/* ============================================
   MAIN STYLES - Generic styles for the application
   ============================================ */

/* Root height for flex layout + Safari mobile (avoid header cut off) */
html {
    height: 100%;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    min-height: 100%;
    height: 100%;
    /* Safari iOS: use dynamic viewport so fixed header/footer align to visible area */
    min-height: -webkit-fill-available;
    margin-bottom: 15px;
}

/* v0: Inter font - exact match */
body, .app-container {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* App container fills viewport so main-content height works (Safari mobile) */
.app-container {
    min-height: 100%;
}

/* ============================================
   LAYOUT FLEXBOX - Para que footer quede abajo y main-content-area tenga scroll
   ============================================ */
.main-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    /* NO min-width: 0 - causes width to collapse to 0px, hiding all content */
    height: 100% !important;
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    /* Reserve space for fixed footer (~56px + safe-area) */
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
}

.main-header {
    flex-shrink: 0 !important;
    z-index: auto !important;
    padding-top: 16px !important;
    padding-bottom: 15px !important;
    padding-left: 24px !important;
    padding-right: 23px !important;
    border-bottom: 1px solid #D0E0FF !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    height: 63px !important;
    min-height: 63px !important;
    max-height: 63px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative !important;
}

@media (max-width: 767px) {
    .main-header {
        padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
        padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        min-height: 63px !important;
        height: auto !important;
        max-height: none !important;
    }
    .main-header .user-menu-btn {
        padding-right: 0 !important;
    }
}

.main-content-area {
    flex: 1 1 0% !important; /* Base 0 so flex can distribute space correctly */
    min-height: 200px !important;
    min-width: 0 !important; /* Prevent flex overflow on mobile */
    width: 100% !important;
    display: block !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important; /* iOS: momentum scroll (course-catalog, etc.) */
    overflow-x: hidden !important;
    scrollbar-width: none !important; /* Firefox - hide scrollbar */
    -ms-overflow-style: none !important; /* IE and Edge - hide scrollbar */
    box-sizing: border-box !important;
    padding: 24px !important; /* Ensure content is inset and visible */
    position: relative !important;
}

/* v0: create-course / create-course-execute - extra bottom padding so footer buttons visible on mobile; no top padding */
.main-content-area.main-content-create-course {
    padding-top: 0 !important;
    padding-bottom: 200px !important;
}

/* Set up your Academy (course-execute) only: remove top padding; keep 24px on create-course and other UIs */
.main-content-area:has(.course-execute-create-page) {
    padding-top: 0 !important;
}

/* About course page: no top padding so sticky title sits flush; no scroll gap above title */
.main-content-area:has(.about-course-v0-wrapper) {
    padding-top: 0 !important;
}

/* About course mobile: extra bottom padding so scroll clears the fixed footer */
@media (max-width: 767px) {
    .main-content-area:has(.about-course-v0-wrapper) {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Creating course view on mobile: fix header to top like other screens */
@media (max-width: 767px) {
    .main-content:has(.main-content-area.main-content-create-course) .main-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 100 !important;
        background-color: #ffffff !important;
        box-shadow: 0 1px 0 0 #D0E0FF;
    }
    .main-content:has(.main-content-area.main-content-create-course) {
        padding-top: calc(63px + env(safe-area-inset-top, 0px)) !important;
    }
}

/* Fix: create-course-execute - content in DOM but not visible (layout/clipping) */
.main-content-area .course-execute-container {
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 100% !important;
    display: block !important;
}

/* progress-container: full width (was 414px in preview); min-height + padding so "Show execution" button isn't cut off */
#progress-container {
    width: 100%;
    min-height: min-content;
    padding-top: 24px;
    padding-bottom: 80px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.main-content-area::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* v0: footer fixed at bottom - input bar sits at bottom: 56px (footer height) */
.main-footer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    flex-shrink: 0 !important;
    border-top: 1px solid #D0E0FF !important;
    padding: 16px 24px !important;  /* v0 py-4 px-6 */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    background-color: #ffffff !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
}
@media (max-width: 767px) {
    .main-footer { left: 0 !important; }
}
@media (min-width: 768px) {
    .app-container:has(.sidebar-desktop:not(.collapsed)) .main-footer { left: 260px !important; }
    .app-container:has(.sidebar-desktop.collapsed) .main-footer { left: 72px !important; }
}

/* Footer – EXACT v0 platform-footer: gap-4 (16px) main row, items alineados */
.footer-content {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1rem !important;  /* v0 gap-4 = 16px */
    font-size: 14px !important;  /* v0 text-sm */
    color: #6b7280 !important;
    line-height: 1.25rem !important;  /* mismo que logo para alinear links con [logo] ibl.ai OS */
}

.footer-link {
    color: #6b7280 !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    line-height: inherit !important;
}

.footer-link:hover {
    color: #374151 !important;
}

/* Debug: Studio auth_hello from footer */
.footer-auth-hello-debug {
    font-size: 11px !important;
    color: #9ca3af !important;
    background: transparent !important;
    border: none !important;
    padding: 0 4px 0 0 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    font-family: ui-monospace, monospace !important;
}
.footer-auth-hello-debug:hover {
    color: #4b5563 !important;
}
.footer-session-role-wrap {
    display: inline-flex !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
}
.footer-session-role {
    font-size: 11px !important;
    color: #9ca3af !important;
    font-family: ui-monospace, monospace !important;
    text-transform: lowercase !important;
    user-select: none !important;
}
.footer-auth-hello-debug-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10050;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.footer-auth-hello-debug-modal.is-open {
    display: flex;
}
.footer-auth-hello-debug-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}
.footer-auth-hello-debug-box {
    position: relative;
    z-index: 1;
    max-width: min(900px, 100%);
    max-height: 80vh;
    width: 100%;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.footer-auth-hello-debug-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid #e5e7eb;
}
.footer-auth-hello-debug-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}
.footer-auth-hello-debug-close {
    border: none;
    background: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 4px 8px;
}
.footer-auth-hello-debug-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.footer-auth-hello-debug-wink {
    margin: 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: #1f2937;
    white-space: pre-wrap;
    word-break: break-word;
    border-bottom: 1px solid #e5e7eb;
    max-height: 42vh;
    overflow: auto;
    flex-shrink: 0;
}
.footer-auth-hello-debug-json-label {
    margin: 0;
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
}
.footer-auth-hello-debug-pre {
    margin: 0;
    padding: 12px 14px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-all;
    flex: 1 1 auto;
    min-height: 0;
}

.footer-powered {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;  /* v0 gap-2 entre [logo] e ibl.ai OS */
}

/* v0: logo y texto centrados verticalmente - wrapper fuerza mismo line-box */
.footer-logo-wrap {
    display: flex !important;
    align-items: center !important;
    height: 1.25rem !important;  /* v0 h-5 = 20px */
    flex-shrink: 0 !important;
}

.footer-logo {
    width: auto !important;
    height: 1.25rem !important;  /* v0 h-5 */
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

.footer-powered-text {
    font-size: 0.875rem !important;  /* v0 text-sm */
    line-height: 1.25rem !important;  /* mismo que logo para centrado */
}

/* Header MOBILE – v0: logo oculto en móvil (solo Menu + LLM a la izquierda) */
@media (max-width: 767px) {
    .mobile-logo-container {
        display: none !important;
    }
}

/* Footer MOBILE – v0: justify-center (logo centrado), solo [logo] ibl.ai OS (Privacy/Terms ocultos) */
@media (max-width: 767px) {
    .main-footer {
        display: block !important;
        padding: 16px !important;  /* v0: py-4 px-4 */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    }
    .footer-content {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;  /* v0: justify-center en móvil */
        gap: 0.5rem !important;  /* v0: gap-2 entre logo e ibl.ai OS */
        font-size: 14px !important;  /* v0: text-sm */
    }
    /* v0: Privacy y Terms tienen hidden sm:flex = ocultos en móvil */
    .footer-content .footer-link {
        display: none !important;
    }
    /* v0 móvil: same padding as chat history view (chats items click) – 12px for all home/chat */
    .main-content-area:has(.home-v0-wrapper:not(.chat-active)),
    .main-content-area:has(.home-v0-wrapper.chat-active),
    .main-content-area:has(.chat-v0-wrapper) {
        padding: 12px !important;
    }
}

/* Mobile Safari: prevent zoom on input/focus (iOS zooms when font-size < 16px) */
@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input:not([type]),
    textarea,
    select {
        font-size: 16px !important;
    }
    /* Quill editor (contenteditable): prevent zoom on tap in mobile Safari */
    .ql-editor,
    .description-editor-wrapper .ql-editor,
    #edit_description_editor .ql-editor {
        font-size: 16px !important;
    }
    .ql-editor p,
    .ql-editor span,
    .ql-editor div[contenteditable] {
        font-size: 16px !important;
    }
}

/* Sidebar toggle button - ensure it's not cut */
.app-container {
    width: 100% !important;
    overflow-x: visible !important;
    overflow-y: hidden !important;
    box-sizing: border-box !important;
}

.sidebar-desktop {
    overflow: visible !important;
    border-right: 1px solid #D0E0FF !important;
}

.sidebar-toggle-btn {
    z-index: 1001 !important;
}

/* Desktop: no sidebar width transition on first paint; animate only after user toggle */
@media (min-width: 1024px) {
    .sidebar-desktop {
        transition: none !important;
    }
    .sidebar-desktop.sidebar-desktop--animate {
        transition: width 0.3s ease !important;
    }
}

/* First paint when user saved collapsed (non-course): html class until DOMContentLoaded syncs .collapsed */
@media (min-width: 1024px) {
    html.wink-sidebar-init-collapsed .app-container .main-footer {
        left: 72px !important;
    }
    html.wink-sidebar-init-collapsed #sidebar-desktop {
        width: 72px !important;
        min-width: 72px !important;
    }
    html.wink-sidebar-init-collapsed #sidebar-desktop #sidebar-expanded-content {
        display: none !important;
    }
    html.wink-sidebar-init-collapsed #sidebar-desktop #sidebar-collapsed-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
    }
    html.wink-sidebar-init-collapsed #sidebar-desktop .sidebar-logo-text {
        display: none !important;
    }
    html.wink-sidebar-init-collapsed #sidebar-desktop .sidebar-logo-container {
        justify-content: center !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    html.wink-sidebar-init-collapsed .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box {
        left: 128px;
        right: 56px;
        width: min(768px, calc(100vw - 128px - 56px));
        margin-left: auto;
        margin-right: auto;
    }
    html.wink-sidebar-init-collapsed .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
        left: max(128px, calc(128px + (100vw - 128px - 56px - 768px) / 2));
        right: 12px;
        width: auto;
    }
}

/* New Course (expanded): pl-[11px] py-2.5, gap-2 (8px); fixed icon slot for text alignment */
.nav-btn-new-course {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 10px 12px 10px 11px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 4px;
}
.nav-btn-new-course:hover {
    background-color: #f9fafb;
    color: #374151;
}
.nav-btn-new-course img[src*="square-pen"] {
    opacity: 0.7;
}
/* Active state (on home page): bg-blue-50 text-blue-600 border-blue-200 */
.nav-btn-new-course.is-active {
    border-color: #bfdbfe;
    background-color: #eff6ff;
    color: #2563eb;
}
.nav-btn-new-course.is-active:hover {
    background-color: #dbeafe;
}
.nav-btn-new-course.is-active img[src*="square-pen"] {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1352%) hue-rotate(202deg) brightness(98%) contrast(96%);
}

/* Active state for nav links (All Courses, Configure, Users): same as New Course – padding, border-radius, bg, border, color, and active icon */
.nav-btn-ghost.nav-btn-active {
    padding: 10px 12px 10px 11px !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 8px !important;
    background-color: #eff6ff !important;
    color: #2563eb !important;
}
.nav-btn-ghost.nav-btn-active:hover {
    background-color: #dbeafe !important;
    color: #2563eb !important;
}
.nav-btn-ghost.nav-btn-active .nav-icon,
.nav-btn-ghost.nav-btn-active .nav-text,
.nav-btn-ghost.nav-btn-active > img.nav-icon {
    color: #2563eb !important;
}
.nav-btn-ghost.nav-btn-active .nav-icon,
.nav-btn-ghost.nav-btn-active > img.nav-icon {
    opacity: 1 !important;
    filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1352%) hue-rotate(202deg) brightness(98%) contrast(96%);
}
.nav-btn-collapsed.nav-btn-active {
    border: 1px solid #bfdbfe;
    background-color: #eff6ff;
    color: #2563eb;
}
.nav-btn-collapsed.nav-btn-active:hover {
    background-color: #dbeafe;
}
.nav-btn-collapsed.nav-btn-active .nav-icon,
.nav-btn-collapsed.nav-btn-active > img.nav-icon {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1352%) hue-rotate(202deg) brightness(98%) contrast(96%);
}

/* Ghost nav items (All Courses, Configure, etc.): same padding and border-radius as New Course for consistent height/alignment */
.sidebar-desktop #sidebar-expanded-content .nav-btn-ghost {
    padding: 10px 12px 10px 11px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    min-height: 40px;
    box-sizing: border-box !important;
}
/* First icon slot 20px so all sidebar button labels align (New Course, All Courses, Invite User, etc.) */
.nav-btn-new-course > img:first-child,
.sidebar-desktop .nav-btn > img:first-child,
.sidebar-desktop .nav-btn > .nav-icon:first-of-type {
    min-width: 20px !important;
    flex-shrink: 0 !important;
}

/* v0: más espacio entre New Course y All Courses (segundo ítem) */
#sidebar-expanded-content > .nav-item-wrapper:first-child {
    margin-bottom: 8px;
}

/* New Course (collapsed): 40×40px, no padding */
.nav-btn-new-course-collapsed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    margin: 0 auto 4px auto;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
}
.nav-btn-new-course-collapsed:hover {
    background-color: #f9fafb;
    color: #374151;
}
.nav-btn-new-course-collapsed img[src*="square-pen"] {
    opacity: 0.7;
}
.nav-btn-new-course-collapsed.is-active {
    border-color: #bfdbfe;
    background-color: #eff6ff;
    color: #2563eb;
}
.nav-btn-new-course-collapsed.is-active:hover {
    background-color: #dbeafe;
}
.nav-btn-new-course-collapsed.is-active img[src*="square-pen"] {
    opacity: 1;
    filter: brightness(0) saturate(100%) invert(27%) sepia(96%) saturate(1352%) hue-rotate(202deg) brightness(98%) contrast(96%);
}

/* New Project submenu – folder avatar (v0 style) */
.nav-submenu-avatar-folder {
    background-image: none !important;
    background-color: #f3f4f6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nav-item-wrapper-projects {
    margin-top: 4px;
}
.nav-divider-collapsed {
    margin: 12px 0;
}

/* Hide scrollbar for main-content-area - like Word document */
.main-content-area::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.main-content-area::-webkit-scrollbar-track {
    display: none !important;
}

.main-content-area::-webkit-scrollbar-thumb {
    display: none !important;
}

/* User Menu Wrapper */
.user-menu-wrapper {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: 10px;
}

.academy-badge {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.user-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    min-width: 40px;
    border-radius: 8px;
    transition: background-color 0.2s;
    border: none;
    background: transparent;
    cursor: pointer;
}

.user-menu-btn:hover {
    background-color: #f9fafb;
}

.user-avatar {
    height: 32px;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
}
.user-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

/* User Dropdown Menu */
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 160px;
    padding: 4px;
    z-index: 50;
}

.user-dropdown.hidden {
    display: none;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid transparent;
    margin-bottom: 2px;
    text-decoration: none;
    color: inherit;
}

.user-dropdown-item:last-child {
    margin-bottom: 0;
}

.user-dropdown-item:hover {
    background-color: #f9fafb;
}

.user-dropdown-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: #4b5563;
}

.user-dropdown-text {
    font-size: 14px;
    color: #374151;
    font-weight: 400;
}

/* Sidebar header: same height as main-header (63px) so border-bottom aligns straight */
.sidebar-header {
    padding: 14px 16px !important;
    border-bottom: 1px solid #D0E0FF !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    min-height: 63px !important;
    height: 63px !important;
    max-height: 63px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
}

/* Ensure child elements don't affect header height */
.sidebar-header > *,
.main-header > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    vertical-align: middle !important;
}

.sidebar-logo-container,
.header-left,
.header-right {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    overflow: visible !important;
}

/* Logo container: don't clip the image, square corners */
.sidebar-header .sidebar-logo-container {
    overflow: visible !important;
    border-radius: 0 !important;
}

/* Logo container: gap-3 (12px) between logo and text */
a.sidebar-logo-container {
    padding-left: 0;
    padding-right: 0;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

/* Logo image: 32×32px, contain so full image visible (no crop), centered, square corners (no radius) */
.sidebar-header .sidebar-logo-img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: center center !important;
    flex-shrink: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
}
/* Academy logo: same circular area as Create Academy form (cover, centered) */
.sidebar-header .sidebar-logo-img-academy {
    object-fit: cover !important;
    border-radius: 50% !important;
}
.mobile-logo-img-academy {
    object-fit: cover !important;
}

/* "ibl.ai Wink" text: text-lg 18px, font-semibold 600, gradient from #00A3EC to #6988FF */
.sidebar-header .sidebar-logo-text {
    font-size: 1.125rem !important;  /* 18px / text-lg */
    font-weight: 600 !important;    /* font-semibold */
}

.header-center {
    flex: 1;
    display: flex !important;
    justify-content: center;
    align-items: center;
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
}

.header-academy-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* LLM provider icon in header: 20×20px (override reference styles) */
#selected-llm-icon {
    width: 20px;
    height: 20px;
}

/* Sidebar collapsed - Hide logo text and center logo */
.sidebar-desktop.collapsed .sidebar-logo-text {
    display: none !important;
}

.sidebar-desktop.collapsed .sidebar-logo-container {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.sidebar-desktop.collapsed .sidebar-header {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Collapsed view: center the buttons in the narrow sidebar */
.sidebar-desktop.collapsed #sidebar-collapsed-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px;
}

/* Tablet (768px–1023px): always show expanded sidebar, hide collapsed strip like desktop expanded */
@media (min-width: 768px) and (max-width: 1023px) {
    /* Same specificity as base .collapsed rules so tablet overrides win */
    .sidebar-desktop.collapsed #sidebar-collapsed-content,
    .sidebar-desktop #sidebar-collapsed-content {
        display: none !important;
    }
    .sidebar-desktop.collapsed #sidebar-expanded-content,
    .sidebar-desktop #sidebar-expanded-content {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    .sidebar-desktop.collapsed,
    .sidebar-desktop {
        width: 260px !important;
        min-width: 260px !important;
    }
    .sidebar-desktop.collapsed .sidebar-logo-text {
        display: block !important;
    }
    .sidebar-desktop.collapsed .sidebar-logo-container {
        justify-content: flex-start !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .sidebar-desktop.collapsed .sidebar-header {
        justify-content: flex-start !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    /* Flex layout so header + nav fill height and nav scrolls */
    .sidebar-desktop .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    /* Align footer with expanded sidebar width */
    .app-container .main-footer {
        left: 260px !important;
    }
    /* Ensure nav scroll area works so sidebar content doesn’t overflow */
    .sidebar-desktop .sidebar-nav-scroll {
        min-height: 0 !important;
        overflow-y: auto !important;
    }
    .sidebar-desktop .sidebar-nav-content {
        min-height: 0 !important;
    }
}
.sidebar-desktop.collapsed .nav-item-wrapper-collapsed {
    display: flex !important;
    justify-content: center !important;
    width: 100%;
}
.sidebar-desktop.collapsed .nav-btn-collapsed,
.sidebar-desktop.collapsed .nav-btn-new-course-collapsed {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Nav list: px-3 py-4 (12px horizontal, 16px vertical), space-y-1 (4px between items) */
.sidebar-desktop .sidebar-nav-content {
    padding: 16px 12px !important;
    gap: 4px !important;
}
.sidebar-desktop .nav-item-wrapper {
    padding: 1px 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Nav buttons: pl-[11px], gap 8px; box-sizing so active border is not clipped by sidebar overflow */
.sidebar-desktop .nav-btn,
.sidebar-desktop .nav-btn-collapsed {
    box-sizing: border-box !important;
}
.sidebar-desktop .nav-btn {
    padding-left: 11px !important;
    gap: 8px !important;
    align-items: center !important;
}
.sidebar-desktop .nav-btn .nav-text {
    flex: 1 1 auto !important;
    text-align: left !important;
    min-width: 0 !important;
}
/* Collapsed nav buttons: 40×40px (w-10 h-10) */
.sidebar-desktop .nav-btn-collapsed {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
}
/* Chat sub-list: ml-6 mt-1 (24px left, 4px top); list pl-4 py-1 (16px left, 4px vertical); space-y-0.5 (2px between items) */
.sidebar-desktop .nav-projects-list {
    margin-left: 20px !important;
    margin-top: 4px !important;
    padding-left: 5px !important;
}
.sidebar-desktop .nav-projects-content {
    padding: 4px 0 4px 0 !important;
    gap: 2px !important;
}
/* Expandable item rows: pl-4 pr-1 py-0.5, min-h-8 (32px), gap 8px */
.sidebar-desktop .nav-project-item {
    padding: 2px 4px 2px 16px !important;
    min-height: 32px !important;
    gap: 8px !important;
}
/* Invite User only: smaller icon (others stay 20px) */
.sidebar-desktop .nav-item-invite-user .nav-icon {
    width: 16px !important;
    height: 16px !important;
}

/* Chats button: smaller icon only (other nav buttons keep 20px) */
.sidebar-desktop .nav-icon-chats {
    width: 16px !important;
    height: 16px !important;
}

/* Chats dropdown: same icon size as Chats button (16px) */
.sidebar-desktop .nav-item-wrapper-chats .nav-project-icon {
    width: 16px !important;
    height: 16px !important;
}

/* My School: section title + indented Main / Courses (always visible, no accordion) */
.sidebar-desktop .nav-school-group {
    margin-top: 4px;
    padding: 8px 0 4px 0;
}
.sidebar-desktop .nav-school-heading {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 6px 12px 8px 11px;
    margin: 0;
    line-height: 1.2;
}
.sidebar-desktop .nav-school-sublink-wrap {
    padding: 2px 0 !important;
}
/* Indented sub-rows under “My School”; icons match other sidebar items (academy + course-catalog) */
.sidebar-desktop .nav-school-group .nav-btn.nav-btn-ghost.nav-school-sublink {
    margin-left: 6px;
    width: calc(100% - 6px);
    box-sizing: border-box;
}

/* Bottom section (Help, etc.): p-3 (12px), top border, space-y-1 (4px between items) */
.sidebar-desktop .sidebar-bottom {
    padding: 12px !important;
    border-top: 1px solid #e5e7eb !important;
}
.sidebar-desktop .sidebar-bottom > * + * {
    margin-top: 4px !important;
}

/* Remove underlines from all sidebar navigation links */
.sidebar-nav a,
.sidebar-nav a:link,
.sidebar-nav a:visited,
.sidebar-nav a:hover,
.sidebar-nav a:active,
.sidebar-nav a:focus {
    text-decoration: none !important;
    border-bottom: none !important;
}

.sidebar-nav a *,
.sidebar-nav a span,
.sidebar-nav a .nav-text,
.sidebar-nav a .nav-project-text,
.sidebar-nav a .nav-submenu-text {
    text-decoration: none !important;
    border-bottom: none !important;
}

.nav-item-wrapper a,
.nav-item-wrapper a:hover,
.nav-item-wrapper a:visited,
.nav-item-wrapper a:active {
    text-decoration: none !important;
}

.nav-projects-list a,
.nav-projects-list a:hover,
.nav-projects-list a:visited,
.nav-projects-list a:active {
    text-decoration: none !important;
}

.nav-submenu a,
.nav-submenu a:hover,
.nav-submenu a:visited,
.nav-submenu a:active {
    text-decoration: none !important;
}

/* Home v0 design - padding horizontal vía main-content */
.home-v0-wrapper {
    padding: 8px 0 120px;
    min-height: 0;
}
@media (min-width: 640px) {
    .home-v0-wrapper {
        padding: 12px 24px 48px;
    }
}
@media (min-width: 768px) {
    .home-v0-wrapper {
        padding-left: 32px;
        padding-right: 32px; /* sm:pl-8 sm:pr-8 */
    }
}
@media (min-width: 1024px) {
    .home-v0-wrapper {
        padding-right: 80px; /* md:pr-20 */
    }
}

.course-creation-form-container.home-v0 {
    max-width: 1152px;
    padding: 0;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

/* v0: max-w-2xl mx-auto mt-0 - sin margin-top, caja pegada arriba */
.home-v0-inner {
    width: 100%;
    max-width: 672px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

/* v0: text-base sm:text-lg md:text-xl font-medium mb-6 sm:mb-8 */
.course-creation-title.home-v0-title {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 24px;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
@media (min-width: 640px) {
    .course-creation-title.home-v0-title { font-size: 1.125rem; margin-bottom: 32px; }
}
@media (min-width: 768px) {
    .course-creation-title.home-v0-title { font-size: 1.25rem; }
}

/* v0 ChatInputForm: root block – bg #FBFBFB, border 2px #F1F2F3, rounded-2xl, flex flex-col, relative */
.course-creation-input-wrapper.home-v0-chat-box {
    background: #FBFBFB;
    border: 2px solid #F1F2F3;
    border-radius: 1rem; /* rounded-2xl */
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: auto;
    max-height: none;
    padding: 0;
    margin-bottom: 0px; /* v0 mb-4 */
    overflow: visible;
    box-shadow: none;
    width: 100%;
    min-width: 0; /* evita overflow en móvil */
}

/* Home page only: prompt box height 144px (chat list view keeps 108px) */
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box {
    height: 144px;
    min-height: 144px;
    max-height: 144px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* When attachments or reply strip are present, grow the box from top so textarea keeps height */
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box.has-attachments,
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip {
    height: auto;
    min-height: 144px;
    max-height: none;
}
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box .course-creation-input {
    flex: 1 1 auto;
    min-height: 0;
    resize: none;
}
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box.has-attachments .course-creation-input,
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .course-creation-input {
    min-height: 80px;
}
.home-v0-wrapper:not(.chat-active) .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions {
    flex-shrink: 0;
}

/* v0 ChatInputForm: textarea – bg-transparent, px-4, rounded-2xl, border-0, min-h-[80px], pt-4 pb-3, placeholder text-gray-400 */
.course-creation-input-wrapper.home-v0-chat-box .course-creation-input {
    background: transparent;
    min-height: 80px;
    padding: 16px 16px 12px; /* pt-4 pb-3 px-4 */
    font-size: 16px; /* text-base - exact v0 */
    line-height: 24px; /* 1.5rem matching text-base */
    border: 0;
    border-radius: 1rem; /* rounded-2xl */
}
.course-creation-input-wrapper.home-v0-chat-box .course-creation-input::placeholder {
    font-size: 16px; /* placeholder:text-base v0 */
    color: #9ca3af; /* placeholder:text-gray-400 */
}

/* v0 ChatInputForm: footer – px-4 py-3, rounded-b-2xl; compact: py-2 */
.course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions {
    padding: 12px 16px; /* px-4 py-3 */
    margin-top: 0;
    border-radius: 0 0 1rem 1rem; /* rounded-b-2xl */
}

/* Reply-to-message strip – one row, pl-2.5 pr-2.5 pt-3 pb-2.5; chip with agentAI label + content + clear */
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 10px; /* pl-2.5 pr-2.5 pt-3 pb-2.5 */
    min-height: 0;
    flex-shrink: 0;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-chip {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 8px 32px 8px 8px; /* py-2 pl-2 pr-8 */
    background: rgba(243, 244, 246, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 6px;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
    text-align: left;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-label {
    font-size: 0.75rem;
    font-weight: 500;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-text {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.25rem;
    margin: 2px 0 0 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-clear:hover {
    background: #f3f4f6;
    color: #374151;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-reply-strip-clear svg {
    width: 14px;
    height: 14px;
    display: block;
}
/* Attachment chips row – flex items-center gap-2, pl-2.5 pr-2.5 pt-3 pb-2.5, overflow-x-auto flex-nowrap scrollbar-hide */
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chips {
    padding: 12px 10px 10px; /* pl-2.5 pr-2.5 pt-3 pb-2.5 */
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-height: 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chips::-webkit-scrollbar {
    display: none;
}
/* Chip: relative flex items-center gap-2 rounded-md bg-gray-100/90 border border-gray-200/80 py-1.5 pl-2 pr-6 */
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip {
    position: relative;
    background: rgba(243, 244, 246, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 6px;
    padding: 6px 24px 6px 8px; /* py-1.5 pl-2 pr-6 */
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 0;
    max-width: 100%;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #2563EB;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: left;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-name {
    font-size: 0.875rem;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
@media (min-width: 640px) {
    .course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-name {
        max-width: 200px;
    }
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-type {
    font-size: 0.75rem;
    color: #64748b;
}
/* Remove button: absolute top -6px right -6px, w-6 h-6, white bg, gray border, X icon */
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    cursor: pointer;
    color: #6b7280;
    flex-shrink: 0;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-remove:hover {
    background: #f9fafb;
    color: #374151;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-attachment-chip-remove svg {
    width: 14px;
    height: 14px;
}
.home-v0-attachment-chip.home-v0-attachment-chip--previewable {
    cursor: pointer;
}
.home-v0-attachment-chip.home-v0-attachment-chip--previewable:hover {
    border-color: #cbd5e1;
    background: rgba(248, 250, 252, 0.98);
}
.home-v0-attachment-chip.home-v0-attachment-chip--previewable:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}
.home-v0-attachment-chip.home-v0-attachment-chip--previewable:focus:not(:focus-visible) {
    outline: none;
}

/* Modal: preview plain-text attachment (e.g. web page extract) */
.attachment-text-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}
.attachment-text-preview-modal.is-open {
    display: flex;
}
.attachment-text-preview-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    cursor: pointer;
}
.attachment-text-preview-panel {
    position: relative;
    z-index: 1;
    max-width: min(900px, 96vw);
    max-height: min(85vh, 800px);
    width: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.attachment-text-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.attachment-text-preview-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.attachment-text-preview-close {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    font-size: 1.35rem;
    line-height: 1;
    color: #4b5563;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.attachment-text-preview-close:hover {
    background: #e5e7eb;
    color: #111827;
}
.attachment-text-preview-body {
    margin: 0;
    padding: 16px;
    overflow: auto;
    flex: 1 1 auto;
    min-height: 120px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 13px;
    line-height: 1.45;
    color: #1e293b;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Input wrap: relative so listening indicator can be positioned inside textarea area */
.course-creation-input-wrapper.home-v0-chat-box .course-creation-input-wrap {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Listening indicator: three bouncing dots + "Listening..." inside textarea area (only when isListening && !value) */
.home-v0-listening-indicator {
    position: absolute;
    left: 1rem;
    top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
}
.home-v0-listening-indicator.is-visible {
    visibility: visible;
    opacity: 1;
}
.home-v0-listening-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #00A6F1;
    animation: home-v0-bounce 0.6s ease-in-out infinite;
}
.home-v0-listening-text {
    margin-left: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}
/* Compact mode (chat-active / chat-v0): indicator top 0.625rem */
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .home-v0-listening-indicator,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .home-v0-listening-indicator {
    top: 0.625rem;
}
@keyframes home-v0-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Textarea extra top padding when listening so indicator fits */
.course-creation-input-wrapper.home-v0-chat-box .course-creation-input.is-listening {
    padding-top: 2.5rem;
}
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .course-creation-input.is-listening,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .course-creation-input.is-listening {
    padding-top: 1.125rem;
}

/* Mic button when listening: blue background, white stop icon */
.course-creation-form-container.home-v0 .course-creation-btn-mic.is-listening,
.course-creation-form-container.chat-v0 .course-creation-btn-mic.is-listening {
    background: #00A6F1 !important;
    color: #fff !important;
}

/* Hide Send button when listening – only mic/stop in row */
.course-creation-input-actions.is-listening .course-creation-btn-voice {
    display: none !important;
}

/* Optional: full overlay fallback – three dots #00A6F1, animate-bounce, "Listening..." text-gray-500 text-sm */
.course-creation-input-wrapper.home-v0-chat-box .home-v0-listening-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #FBFBFB;
    border-radius: 1rem;
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-listening-dots span {
    width: 6px;
    height: 6px;
    background: #00A6F1;
    border-radius: 50%;
    animation: home-v0-bounce 0.6s ease-in-out infinite;
}
.course-creation-input-wrapper.home-v0-chat-box .home-v0-listening-dots span:nth-child(2) { animation-delay: 0.1s; }
.course-creation-input-wrapper.home-v0-chat-box .home-v0-listening-dots span:nth-child(3) { animation-delay: 0.2s; }

/* Chat screen: v0 EXACT 768x108 - flex layout para que textarea y botones quepan */
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
    height: 108px;
    min-height: 108px;
    max-height: 108px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}
/* When attachments or reply strip are present on chat screen: keep bottom fixed, grow height upward only */
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-attachments,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-attachments,
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip {
    height: auto;
    min-height: 108px;
    max-height: none;
    overflow: hidden;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
}
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-attachments .course-creation-input,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-attachments .course-creation-input,
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .course-creation-input,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .course-creation-input {
    flex: 1 1 auto;
    min-height: 56px;
    max-height: none;
    height: auto;
}
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-attachments .home-v0-attachment-chips,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-attachments .home-v0-attachment-chips,
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .home-v0-reply-strip,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .home-v0-reply-strip {
    flex-shrink: 0;
}
/* Keep actions bar padding; extra bottom so buttons don’t touch box border when attachments visible */
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-attachments .course-creation-input-actions,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-attachments .course-creation-input-actions,
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .course-creation-input-actions,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box.has-reply-strip .course-creation-input-actions {
    padding: 8px 16px 12px 16px;
}
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .course-creation-input,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .course-creation-input {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 56px;
    height: 56px;
    padding: 10px 12px 8px 12px;
    resize: none;
}
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions {
    flex-shrink: 0;
    height: 35px;
    min-height: 35px;
    padding: 8px 16px; /* padding left (add source) and right (send button) */
}

/* v0 behavior: in chat mode, input stays docked at bottom of content area */
.home-v0-wrapper.chat-active {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding-bottom: 8px;
    /* Reserve space for fixed input so messages stay visible above it */
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px));
}

.home-v0-wrapper.chat-active .home-v0-inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    max-width: 768px; /* v0 chat: max-w-3xl (768px), no 672 */
}

.home-v0-wrapper.chat-active .chat-messages-container {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 20px;
}

/* Prompt box: same width as chat list, same bg as home page prompt box. Use left/right + margin auto so centering is not affected by ancestor transform. */
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box {
    position: fixed;
    bottom: 72px; /* footer height + 16px gap (v0 mb-4) */
    left: 12px;
    right: 12px;
    width: auto;
    max-width: none;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
    z-index: 100;
    box-shadow: none;
    background: #FBFBFB; /* same as home page prompt box */
    border: 2px solid #F1F2F3;
}

/* Desktop: center prompt in content area using left/right inset + margin auto (no transform/percentage) */
@media (min-width: 768px) {
    /* Sidebar expanded: content area 316px left, 56px right */
    .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box {
        left: 316px;
        right: 56px;
        width: min(768px, calc(100vw - 316px - 56px));
        margin-left: auto;
        margin-right: auto;
    }
    /* Sidebar collapsed: content area 128px left, 56px right */
    .app-container:has(.sidebar-desktop.collapsed) .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box {
        left: 128px;
        right: 56px;
        width: min(768px, calc(100vw - 128px - 56px));
        margin-left: auto;
        margin-right: auto;
    }
}

/* 1024px: same insets, margin auto keeps prompt centered in content area */
@media (min-width: 1024px) {
    .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box {
        left: 316px;
        right: 56px;
        width: min(768px, calc(100vw - 316px - 56px));
        margin-left: auto;
        margin-right: auto;
    }
    .app-container:has(.sidebar-desktop.collapsed) .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box {
        left: 128px;
        right: 56px;
        width: min(768px, calc(100vw - 128px - 56px));
        margin-left: auto;
        margin-right: auto;
    }
}

/* Mobile: menú/sidebar y overlay por encima del input de chat (input z-index 100) */
@media (max-width: 767px) {
    .sidebar-desktop {
        z-index: 1001 !important;
    }
    .mobile-overlay {
        z-index: 1000 !important;
    }
    .user-menu-wrapper {
        z-index: 100 !important; /* below mobile drawer overlay (1000) so overlay covers the button */
    }

    /* Mobile drawer: same look as desktop expanded sidebar */
    .sidebar-desktop.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        height: 100vh !important;
        width: 260px !important;
        min-width: 260px !important;
        background-color: #ffffff !important;
        border-right: 1px solid #D0E0FF !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.08);
    }
    .sidebar-desktop.mobile-open .sidebar-header {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 14px 16px !important;
        min-height: 63px !important;
        height: 63px !important;
        border-bottom: 1px solid #D0E0FF !important;
    }
    .sidebar-desktop.mobile-open .sidebar-logo-text {
        display: inline !important;
    }
    .sidebar-desktop.mobile-open .sidebar-logo-container {
        justify-content: flex-start !important;
        padding-left: 0 !important;
        width: auto !important;
        margin-left: 0 !important;
    }
    .sidebar-desktop.mobile-open .sidebar-nav {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }
    .sidebar-desktop.mobile-open #sidebar-expanded-content {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    .sidebar-desktop.mobile-open #sidebar-collapsed-content {
        display: none !important;
    }
    .sidebar-desktop.mobile-open .sidebar-nav-scroll {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-desktop.mobile-open .sidebar-nav-content {
        padding: 16px 12px !important;
        gap: 4px !important;
        min-height: 0 !important;
    }
}

/* Mobile: chat list prompt box – 12px inset left/right to match chat list */
@media (max-width: 767px) {
    .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box,
    .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        bottom: 56px; /* fallback, JS uses footerHeight + gap */
        padding-left: 0;
        padding-right: 0;
    }
    .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .course-creation-input,
    .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .course-creation-input {
        padding-left: 12px;
        padding-right: 12px;
    }
    .home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions,
    .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1024px) {
    .home-v0-wrapper.chat-active {
        padding-right: 32px;
    }
}

.prompt-suggestions-container.home-v0-prompts {
    max-width: 1152px;
    display: grid !important;
    grid-template-columns: 1fr; /* mobile: 1 columna como v0 */
    gap: 0.5rem;
    flex-wrap: wrap !important;
    margin-top: 1rem;
    padding: 0 0.5rem;
    width: 100%;
    min-width: 0;
}
@media (min-width: 640px) {
    .prompt-suggestions-container.home-v0-prompts {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}
@media (min-width: 768px) {
    .prompt-suggestions-container.home-v0-prompts {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (min-width: 1024px) {
    .prompt-suggestions-container.home-v0-prompts {
        grid-template-columns: repeat(5, 1fr);
    }
}

.prompt-suggestion-box.home-v0-prompt {
    flex: none;
    min-width: 0;
    background: linear-gradient(to bottom right, #F5F8FF, #EEF4FF) !important;
    border: 1px solid #D0E0FF !important;
    border-radius: 0.5rem;
    padding: 0.75rem;
    min-height: 92px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
}

.prompt-suggestion-box.home-v0-prompt:hover {
    background: linear-gradient(to bottom right, #EEF4FF, #E8F0FF) !important;
    border-color: #b8d4ff !important;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}

.prompt-suggestion-box.home-v0-prompt .prompt-suggestion-text {
    font-size: 0.875rem;
    color: #374151;
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 0;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prompt-suggestion-box.home-v0-prompt .prompt-suggestion-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.625rem;
    margin-top: 0.625rem;
}

.prompt-suggestion-box.home-v0-prompt .prompt-suggestion-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    color: #3b82f6;
    stroke: currentColor;
    stroke-width: 2px;
    fill: none;
}

.course-creation-form-container.home-v0 .course-creation-btn-voice {
    background: #00A6F1;
    box-shadow: none;
}
.course-creation-form-container.home-v0 .course-creation-btn-voice:hover {
    background: #0095d9;
    box-shadow: none;
}

.course-creation-form-container.home-v0 .course-creation-btn {
    width: 36px;
    height: 36px;
}
.course-creation-form-container.home-v0 .course-creation-btn svg {
    width: 20px;
    height: 20px;
}
/* v0: Add y Mic iconos color #717985 (rgb(113,121,133)) – negro/gris oscuro, no gris claro – home y chat */
.course-creation-form-container.home-v0 .course-creation-btn:not(.course-creation-btn-voice),
.course-creation-form-container.home-v0 .course-creation-btn-mic,
.course-creation-form-container.chat-v0 .course-creation-btn:not(.course-creation-btn-voice),
.course-creation-form-container.chat-v0 .course-creation-btn-mic {
    color: #717985 !important;
}
.course-creation-form-container.home-v0 .course-creation-btn:not(.course-creation-btn-voice):hover,
.course-creation-form-container.home-v0 .course-creation-btn-mic:hover,
.course-creation-form-container.chat-v0 .course-creation-btn:not(.course-creation-btn-voice):hover,
.course-creation-form-container.chat-v0 .course-creation-btn-mic:hover {
    color: #4b5563 !important;
}
/* Stop listening: mic button is blue; icon must be white (override grey #717985) */
.course-creation-form-container.home-v0 .course-creation-btn-mic.is-listening,
.course-creation-form-container.chat-v0 .course-creation-btn-mic.is-listening {
    color: #ffffff !important;
}
.course-creation-form-container.home-v0 .course-creation-btn-mic.is-listening svg,
.course-creation-form-container.chat-v0 .course-creation-btn-mic.is-listening svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* v0: reduced gap between icons (mic and send), px-3 sm:px-4 py-3 – home y chat */
.course-creation-form-container.home-v0 .course-creation-input-wrapper .course-creation-input-actions,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper .course-creation-input-actions {
    gap: 2px !important;
    padding: 12px 12px !important;
}
@media (min-width: 640px) {
    .course-creation-form-container.home-v0 .course-creation-input-wrapper .course-creation-input-actions {
        padding: 12px 16px !important; /* padding left (add source) and right (send button) */
    }
    .course-creation-form-container.chat-v0 .course-creation-input-wrapper .course-creation-input-actions {
        padding: 12px 0 !important;
    }
}
/* Chat compacto (108px): v0 py-2, 16px left/right padding, actions height 35px */
.home-v0-wrapper.chat-active .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions,
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box .course-creation-input-actions {
    height: 35px !important;
    min-height: 35px !important;
    padding: 8px 16px !important;
    gap: 2px !important;
}

/* Course Creation Form Container - EXACT from agentic-os/index.php */
/* Chat page (sidebar chat link): same layout and spacing as course creation chat list view – prompt box and content same left/right */
.chat-v0-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px 0 calc(180px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 640px) {
    .chat-v0-wrapper {
        padding-left: 24px;
        padding-right: 24px;
    }
}
@media (min-width: 768px) {
    .chat-v0-wrapper {
        padding-left: 32px;
        padding-right: 32px;
    }
}
@media (min-width: 1024px) {
    .chat-v0-wrapper {
        padding-right: 32px;
    }
}
.chat-v0-wrapper .course-creation-form-container.chat-v0 {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.chat-v0-wrapper .chat-v0-inner {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.chat-v0-wrapper .chat-messages-container {
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 20px;
}
.course-creation-form-container.chat-v0 {
    max-width: 768px; /* v0 max-w-3xl */
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.chat-v0-inner {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
}

/* Chat page prompt box: same as home chat-active – fixed at bottom, same width and style */
.course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
    position: fixed;
    bottom: 72px;
    left: 12px;
    right: 12px;
    width: auto;
    max-width: 768px;
    margin: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
    z-index: 100;
    box-shadow: none;
    background: #FBFBFB;
    border: 2px solid #F1F2F3;
}
@media (min-width: 768px) {
    .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
        left: max(316px, calc(316px + (100vw - 316px - 56px - 768px) / 2));
        right: 12px;
        width: auto;
    }
    .app-container:has(.sidebar-desktop.collapsed) .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
        left: max(128px, calc(128px + (100vw - 128px - 56px - 768px) / 2));
        right: 12px;
        width: auto;
    }
}
@media (min-width: 1024px) {
    .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
        left: max(316px, calc(316px + (100vw - 316px - 56px - 768px) / 2));
        right: 12px;
        width: auto;
    }
    .app-container:has(.sidebar-desktop.collapsed) .course-creation-form-container.chat-v0 .course-creation-input-wrapper.home-v0-chat-box {
        left: max(128px, calc(128px + (100vw - 128px - 56px - 768px) / 2));
        right: 12px;
        width: auto;
    }
}
.course-creation-form-container.chat-v0 .course-creation-btn-voice {
    background: #00A6F1;
    box-shadow: none;
}
.course-creation-form-container.chat-v0 .course-creation-btn-voice:hover {
    background: #0095d9;
}
.course-creation-form-container.chat-v0 .course-creation-btn {
    width: 36px;
    height: 36px;
}
.course-creation-form-container.chat-v0 .course-creation-btn svg {
    width: 20px;
    height: 20px;
}

.course-creation-form-container {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    padding: 40px 24px;
    min-height: auto;
}

.course-creation-input-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border: none;
    border-radius: 16px;
    padding: 20px;
    min-height: 160px;
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

.course-creation-input-wrapper::-webkit-scrollbar {
    width: 6px;
}

.course-creation-input-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.course-creation-input-wrapper::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.course-creation-input-wrapper::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.course-creation-input-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    padding: 0;
    margin-top: auto;
    margin-bottom: 0px;
    width: 100%;
}

.course-creation-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    font-family: inherit;
    color: #1f2937;
    background: transparent;
    resize: none;
    min-height: 48px;
    max-height: 200px;
    line-height: 24px;
    padding: 0;
    margin: 0;
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.course-creation-input::placeholder {
    color: #9ca3af;
}

.course-creation-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
    padding: 0;
    flex-shrink: 0;
}

.course-creation-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.course-creation-btn svg {
    width: 18px;
    height: 18px;
}

.course-creation-btn-create {
    width: 36px;
    min-width: 36px;
    padding: 0;
    gap: 0;
    font-size: 0;
    color: #3b82f6;
}

.course-creation-btn-create:hover {
    background: #eff6ff;
    color: #2563eb;
}

.course-creation-btn-create[data-tooltip] {
    position: relative;
}

.course-creation-btn-create[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(2px);
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms ease, transform 80ms ease;
    z-index: 120;
}

.course-creation-btn-create[data-tooltip]::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(2px);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #111827;
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms ease, transform 80ms ease;
    z-index: 120;
}

.course-creation-btn-create[data-tooltip]:hover::after,
.course-creation-btn-create[data-tooltip]:hover::before,
.course-creation-btn-create[data-tooltip]:focus-visible::after,
.course-creation-btn-create[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.course-creation-btn-mic {
    color: #d1d5db;
    margin-left: auto;
}

.course-creation-btn-mic:hover {
    color: #9ca3af;
    background: #f3f4f6;
}

.course-creation-btn-voice {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: #ffffff;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
    margin-left: 8px;
}

.course-creation-btn-voice:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
}

.course-creation-btn-voice svg {
    width: 20px;
    height: 20px;
}

/* Spinner styles for send button */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.course-creation-btn-voice .spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.course-creation-btn-voice.sending svg {
    display: none;
}

.course-creation-btn-voice.sending .spinner {
    display: inline-block;
}

.course-creation-btn-voice:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    pointer-events: none;
}

.course-creation-input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.course-creation-title {
    font-size: 26px;
    font-weight: 400;
    color: #3b82f6;
    margin-bottom: 48px;
    margin-top: 0;
    text-align: center;
}

.jumpstart-templates-heading {
    font-size: 16px;
    font-weight: 300;
    color: #6b7280;
    margin-top: 48px;
    margin-bottom: 32px;
    text-align: left;
    padding-left: 24px;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Prompt Suggestions - EXACT from agentic-os/index.php */
.prompt-suggestions-container {
    display: flex !important;
    gap: 16px;
    margin-top: 24px;
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 24px;
}

/* HIDE prompt suggestions when chat is active */
#chat-messages[style*="display: block"] ~ #prompt-suggestions,
#chat-messages[style*="display: block"] ~ .prompt-suggestions-container,
#chat-messages:not([style*="display: none"]) ~ #prompt-suggestions,
#chat-messages:not([style*="display: none"]) ~ .prompt-suggestions-container,
body:has(#chat-messages[style*="display: block"]) #prompt-suggestions,
body:has(#chat-messages[style*="display: block"]) .prompt-suggestions-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide prompt suggestions when chat is active - only via inline styles, not CSS */

.prompt-suggestion-box {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 12px;
    padding: 16px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 100px;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Force hide individual suggestion boxes when chat is active */
#chat-messages:not([style*="display: none"]) ~ .prompt-suggestions-container .prompt-suggestion-box,
#chat-messages[style*="display: block"] ~ .prompt-suggestions-container .prompt-suggestion-box,
.prompt-suggestion-box[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.prompt-suggestion-box:hover {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.prompt-suggestion-text {
    color: #6b7280;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
    margin-bottom: 12px;
    flex: 1;
    display: flex;
    align-items: flex-start;
}

.prompt-suggestion-icon {
    display: flex;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid #dbeafe;
}

.prompt-suggestion-icon svg {
    width: 20px;
    height: 20px;
    color: #3b82f6;
}

/* Chat Messages - Continuous scroll like Word document */
.chat-messages-container {
    min-height: auto;
    overflow-y: visible;
    overflow-x: hidden;
    margin-bottom: 24px;
    padding: 0 0 24px 0;
    padding-left: 0;
    background: transparent;
    border-radius: 0;
    border: none;
    width: 100%;
    max-width: 100%;
}

/* Hide prompt suggestions when chat is active */
.chat-messages-container:not([style*="display: none"]) ~ #prompt-suggestions,
.chat-messages-container[style*="display: block"] ~ #prompt-suggestions,
.chat-messages-container:not([style*="display: none"]) ~ .prompt-suggestions-container,
.chat-messages-container[style*="display: block"] ~ .prompt-suggestions-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide prompt suggestions when there are chat messages */
#chat-messages:not([style*="display: none"]) ~ #prompt-suggestions,
#chat-messages[style*="display: block"] ~ #prompt-suggestions,
#chat-messages:not([style*="display: none"]) ~ .prompt-suggestions-container,
#chat-messages[style*="display: block"] ~ .prompt-suggestions-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* When chat is active, input should appear below messages */
#chat-messages:not([style*="display: none"]) ~ .course-creation-input-wrapper,
#chat-messages[style*="display: block"] ~ .course-creation-input-wrapper {
    margin-top: 16px;
}

.chat-message {
    margin-bottom: 24px;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.chat-message:last-child {
    margin-bottom: 24px;
}

.chat-message-user {
    text-align: right;
    padding-right: 0;
}

/* v0: user max-w-[85%] sm:max-w-[75%] */
.chat-message-user .chat-message-content {
    display: inline-block;
    background: #f3f4f6;
    color: #6b7280;
    padding: 12px 18px;
    border-radius: 12px;
    max-width: 85%;
    text-align: left;
    line-height: 1.6;
}
@media (min-width: 640px) {
    .chat-message-user .chat-message-content { max-width: 75%; }
}

/* User message: attachments block (above text bubble) – dummy CSS for when attachments are rendered */
.chat-message-user .chat-message-attachments {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    width: 100%;
}
.chat-message-user .chat-message-attachments-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 85%;
    padding: 0;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .chat-message-user .chat-message-attachments-inner {
        max-width: 75%;
    }
}
/* Image attachment: thumbnail, clickable, 200×200 so it always shows */
.chat-message-user .chat-message-attachment-image {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    width: 200px;
    height: 200px;
    min-width: 120px;
    min-height: 120px;
    background: #f9fafb;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.chat-message-user .chat-message-attachment-image:focus-visible {
    outline: 2px solid #2563EB;
    outline-offset: 2px;
}
.chat-message-user .chat-message-attachment-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    vertical-align: top;
}
/* Non-image file: chip (icon + name + type) */
.chat-message-user .chat-message-attachment-file {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    border-radius: 6px;
    background: rgba(229, 231, 235, 0.8);
    color: #334155;
}
.chat-message-user .chat-message-attachment-file-icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: #2563EB;
}
.chat-message-user .chat-message-attachment-file-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.chat-message-user .chat-message-attachment-file-name {
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
.chat-message-user .chat-message-attachment-file-type {
    font-size: 0.75rem;
    color: #64748b;
}

.chat-message-assistant {
    text-align: left;
    padding-left: 0;
    margin-left: 0;
}

/* v0: assistant max-w-none - usa 100% del espacio, sin cortar */
.chat-message-assistant .chat-message-content {
    display: block;
    background: transparent;
    color: rgb(113, 121, 133);
    padding: 12px 0;
    border-radius: 0;
    border: none;
    max-width: none;
    width: 100%;
    line-height: 1.6;
    margin-left: 0;
}

/* v0: CTA box al final del chat - "Click to start creating your course..." */
.chat-create-course-cta {
    margin-top: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid rgba(0, 163, 236, 0.2);
    background: linear-gradient(to bottom right, #F0F9FF, #EEF0FF);
}

.chat-create-course-cta-text {
    font-size: 14px;
    color: #4E5460;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.chat-create-course-cta-btn {
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.chat-create-course-cta-btn:hover {
    opacity: 0.9;
}

/* LoadingMessage – matches React LoadingMessage (mb-4, flex items-center, spinner + avatar + “Just a sec...” ) */
.loading-message-v0 {
    margin-bottom: 1rem;
}

.loading-message-row {
    display: flex;
    align-items: center;
    margin-left: 0;
}

.loading-avatar-wrap {
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-spinner-ring {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-width: 2px;
    border-style: solid;
    border-color: #d1d5db;
    border-top-color: #3b82f6;
    border-radius: 9999px;
    animation: spin 1s linear infinite;
}

.loading-avatar {
    position: relative;
    z-index: 1;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    border: none;
    padding: 0;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f3f4f6;
}

.loading-avatar .loading-avatar-icon {
    position: relative;
    z-index: 2;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

/* Same visible image pattern as create academy logo preview; slightly smaller than circle */
.loading-avatar img,
.loading-avatar-img {
    position: relative;
    z-index: 2;
    display: block;
    width: 90%;
    height: 90%;
    min-width: 0;
    min-height: 0;
    border-radius: 50%;
    object-fit: contain;
    object-position: center;
}

.loading-avatar-fallback {
    position: relative;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.loading-avatar-fallback svg {
    width: 1.25rem;
    height: 1.25rem;
    display: block;
}

.loading-text-v0 {
    color: #374151;
    font-size: 0.875rem;
    line-height: 1.4;
}

@media (min-width: 640px) {
    .loading-avatar-wrap {
        margin-right: 0.75rem;
        width: 2rem;
        height: 2rem;
    }

    .loading-avatar {
        width: calc(100% - 6px);
        height: calc(100% - 6px);
    }

    .loading-avatar .loading-avatar-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .loading-avatar img,
    .loading-avatar-img {
        width: 100%;
        height: 100%;
    }

    .loading-avatar-fallback {
        width: 1.5rem;
        height: 1.5rem;
    }

    .loading-avatar-fallback svg {
        width: 1.5rem;
        height: 1.5rem;
    }
}

.chat-message-content {
    font-size: 15px;
    line-height: 1.7;
    word-wrap: break-word;
    color: #1f2937;
}

.chat-message-content .chat-paragraph {
    margin: 0 0 16px 0;
    padding: 0;
}

.chat-message-content .chat-paragraph:last-child {
    margin-bottom: 0;
}

.chat-message-content strong {
    font-weight: 600;
    color: #111827;
}

.chat-message-content em {
    font-style: italic;
    color: #374151;
}

.chat-message-content u {
    text-decoration: underline;
    color: #1f2937;
}

.chat-message-content h1,
.chat-message-content h2,
.chat-message-content h3 {
    font-weight: 600;
    color: #111827;
    margin: 20px 0 12px 0;
    line-height: 1.4;
}

.chat-message-content h1 {
    font-size: 24px;
}

.chat-message-content h2 {
    font-size: 20px;
}

.chat-message-content h3 {
    font-size: 18px;
}

.chat-message-content .chat-numbered-list,
.chat-message-content .chat-bullet-list {
    margin: 16px 0;
    padding-left: 0;
    list-style: none;
}

.chat-message-content .chat-numbered-list {
    list-style: none;
}

.chat-message-content .chat-bullet-list {
    list-style: none;
}

.chat-message-content .chat-list-item,
.chat-message-content .chat-list-item-bullet {
    margin-bottom: 12px;
    padding-left: 0;
    position: relative;
    line-height: 1.7;
    list-style: none;
}

/* Chat Message Actions - overflow visible so tooltips are not clipped */
.chat-message-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    align-items: center;
    padding-left: 0;
    margin-left: 0;
    overflow: visible;
}

.chat-action-btn {
    background: transparent;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.chat-action-btn:hover {
    background: #f3f4f6;
    color: #6b7280;
}

.chat-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
}

/* v0-style tooltips for chat action buttons - same design as TooltipFlowbite, instant show */
.chat-action-btn[data-tooltip] {
    position: relative;
    overflow: visible;
}

/* Chat message actions: use TooltipFlowbite (js/tooltip-flowbite.js) with delay + portal – hide CSS tooltip */
.chat-message-actions .chat-action-btn[data-tooltip]:hover::after,
.chat-message-actions .chat-action-btn[data-tooltip]:focus-visible::after,
.chat-message-actions .chat-action-btn[data-tooltip]:hover::before,
.chat-message-actions .chat-action-btn[data-tooltip]:focus-visible::before {
    content: none;
    display: none;
}

/* TooltipFlowbite-style portal tooltip (used by js/tooltip-flowbite.js) */
/* Tooltip: px-3 py-2 text-sm font-medium text-white bg-gray-700 rounded-lg shadow-sm */
.wink-tooltip-flowbite {
    position: relative;
    padding: 8px 12px;   /* py-2 px-3 */
    font-size: 0.875rem; /* text-sm */
    font-weight: 500;    /* font-medium */
    color: #ffffff;      /* text-white */
    background: #374151; /* bg-gray-700 */
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* shadow-sm */
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    transition: opacity 0.15s ease-out;
}

.wink-tooltip-flowbite::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    border: 5px solid transparent;
    border-top-color: #374151; /* bg-gray-700 */
}

/* Main header: tooltip below button, arrow on top of tooltip pointing up */
.wink-tooltip-flowbite[data-position="bottom"]::after {
    bottom: auto;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    border-top-color: transparent;
    border-bottom-color: #374151; /* bg-gray-700 */
}

/* Sidebar collapsed: tooltip on the right of the button, arrow on left */
.wink-tooltip-flowbite[data-position="right"]::after {
    bottom: auto;
    left: 0;
    top: 50%;
    transform: translate(-100%, -50%);
    border-top-color: transparent;
    border-right-color: #374151; /* bg-gray-700 */
}

/* Tooltip below button so it isn't clipped by main-content-area overflow (non–chat-message-actions) */
.chat-action-btn[data-tooltip]:hover::after,
.chat-action-btn[data-tooltip]:focus-visible::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 9px; /* 4px gap + 5px arrow */
    padding: 8px 12px; /* px-3 py-2 v0 */
    background: #374151; /* bg-gray-700 v0 */
    color: #ffffff;
    font-size: 14px; /* text-sm */
    font-weight: 500;
    white-space: nowrap;
    border-radius: 8px; /* rounded-lg */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    pointer-events: none;
    z-index: 1000;
    animation: chat-tooltip-fade-in 0.1s ease-out;
}

.chat-action-btn[data-tooltip]:hover::before,
.chat-action-btn[data-tooltip]:focus-visible::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 4px;
    border: 5px solid transparent;
    border-bottom-color: #374151; /* arrow pointing up into button */
    pointer-events: none;
    z-index: 1001;
    animation: chat-tooltip-fade-in 0.1s ease-out;
}

@keyframes chat-tooltip-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Disable all tooltips on mobile (TouchFlowbite + CSS tooltips) */
@media (max-width: 767px) {
    .wink-tooltip-flowbite {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
    [data-tooltip]:hover::after,
    [data-tooltip]:focus-visible::after,
    [data-tooltip]:hover::before,
    [data-tooltip]:focus-visible::before {
        content: none !important;
        display: none !important;
    }
}

/* Course Structure Rendering Styles */
.course-structure {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.course-header {
    margin-bottom: 32px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}

.course-title {
    font-size: 28px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.course-description {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0;
}

.course-syllabus {
    margin-top: 24px;
}

.course-section {
    margin-bottom: 32px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid #3b82f6;
}

.section-title {
    font-size: 22px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 20px 0;
}

.course-subsection {
    margin-bottom: 24px;
    padding-left: 16px;
    border-left: 2px solid #d1d5db;
}

.subsection-title {
    font-size: 18px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 16px 0;
}

.course-unit {
    margin-bottom: 20px;
    padding: 16px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
}

.unit-title {
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 16px 0;
}

.course-blocks {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.course-block {
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: box-shadow 0.2s;
}

.course-block:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.block-type-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    background: #3b82f6;
    color: #ffffff;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.course-block-video .block-type-badge {
    background: #ef4444;
}

.course-block-multiple_choice .block-type-badge {
    background: #10b981;
}

.block-display-name {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.block-content {
    margin-top: 12px;
}

.block-html-content {
    font-size: 14px;
    line-height: 1.7;
    color: #1f2937;
}

.block-html-content p {
    margin: 0 0 12px 0;
}

.block-html-content h1,
.block-html-content h2,
.block-html-content h3 {
    margin: 16px 0 8px 0;
    color: #111827;
}

.block-html-content ul,
.block-html-content ol {
    margin: 8px 0;
    padding-left: 24px;
}

.block-video-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.video-preview {
    position: relative;
    width: 100%;
    max-width: 640px;
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
}

.video-preview:hover .video-overlay {
    background: rgba(0, 0, 0, 0.5);
}

.play-icon {
    width: 64px;
    height: 64px;
    color: #ffffff;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.video-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.video-link {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
}

.video-link:hover {
    text-decoration: underline;
}

.video-transcripts {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
    font-style: italic;
}

.block-quiz-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.quiz-question {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
}

.quiz-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.quiz-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s;
}

.quiz-choice:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.quiz-choice-correct {
    background: #ecfdf5;
    border-color: #10b981;
}

.choice-label {
    font-weight: 600;
    color: #6b7280;
    min-width: 24px;
}

.quiz-choice-correct .choice-label {
    color: #10b981;
}

.choice-text {
    flex: 1;
    color: #374151;
    line-height: 1.5;
}

.correct-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: #10b981;
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quiz-info {
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
    margin-top: 8px;
}

/* Add Sources Overlay – UI from v0 add-sources-dialog.tsx */
:root {
    --add-sources-accent: #38A1E5;
    --add-sources-accent-bg: rgba(56, 161, 229, 0.1);
    --add-sources-accent-bg-hover: rgba(56, 161, 229, 0.2);
    --add-sources-border: #e2e8f0;
    --add-sources-muted: #64748b;
    --add-sources-muted-bg: rgba(241, 245, 249, 0.5);
}

.add-sources-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    background: rgba(0, 0, 0, 0.5);
}

.add-sources-overlay.active {
    display: flex;
}

.add-sources-modal {
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid var(--add-sources-border);
    max-width: 1024px;
    width: 100%;
    max-height: min(90vh, calc(100dvh - 2rem));
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.add-sources-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px 24px;
    border-bottom: 1px solid var(--add-sources-border);
}

@media (min-width: 640px) {
    .add-sources-header { padding: 24px; }
}

.add-sources-header-left {
    flex: 1;
}

.add-sources-title {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 8px 0;
}

@media (min-width: 640px) {
    .add-sources-title { font-size: 20px; }
}

.add-sources-subtitle {
    font-size: 14px;
    color: var(--add-sources-muted);
    margin: 0;
}

.add-sources-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.add-sources-close-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    color: var(--add-sources-muted);
    transition: color 0.2s, background 0.2s;
}

.add-sources-close-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.add-sources-content {
    padding: 20px 24px;
    flex: 1;
    overflow-y: auto;
}

@media (min-width: 640px) {
    .add-sources-content { padding: 24px; }
}

/* Upload area – dashed border, round blue icon (v0) */
.upload-sources-section {
    margin-bottom: 24px;
}

.upload-sources-area {
    border: 2px dashed var(--add-sources-border);
    border-radius: 8px;
    padding: 28px 20px;
    text-align: center;
    background: transparent;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

@media (min-width: 640px) {
    .upload-sources-area { padding: 48px 24px; }
}

.upload-sources-area:hover {
    border-color: rgba(100, 116, 139, 0.3);
}

.upload-sources-area.drag-over {
    border-color: var(--add-sources-accent);
    background: rgba(56, 161, 229, 0.05);
}

.upload-sources-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-icon-wrapper {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--add-sources-accent);
    border-radius: 50%;
    color: #ffffff;
}

.upload-icon-wrapper svg {
    width: 24px;
    height: 24px;
}

.upload-sources-title {
    font-size: 16px;
    font-weight: 500;
    color: #475569;
    margin: 0 0 16px 0;
}

.upload-sources-types {
    font-size: 14px;
    color: var(--add-sources-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 28rem;
}

/* Source options – 3-col grid, pill buttons (v0) */
.source-options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px 16px;
}

@media (min-width: 640px) {
    .source-options-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

.source-option-card {
    background: #ffffff;
    border: 1px solid var(--add-sources-border);
    border-radius: 8px;
    padding: 16px;
}

.source-option-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    min-height: 1.5rem;
}

.source-option-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #38A1E5;
}

.source-option-icon svg {
    width: 20px;
    height: 20px;
}

.source-option-icon-google {
    color: #38A1E5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.source-option-icon-google svg {
    width: 20px;
    height: 20px;
}

.source-option-icon-onedrive { color: #38A1E5; }
.source-option-icon-phone { color: #38A1E5; }
.source-option-icon-link { color: #38A1E5; }
.source-option-icon-clipboard { color: #38A1E5; }

.source-option-title {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
}

.source-option-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.source-option-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    border: none;
    background: var(--add-sources-accent-bg);
    color: var(--add-sources-accent);
    transition: background 0.2s;
}

.source-option-pill:hover {
    background: var(--add-sources-accent-bg-hover);
}

.source-option-pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    order: -1;
}

.source-option-pill svg,
.source-option-pill img {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Footer – source limit with icon + progress (v0) */
.add-sources-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--add-sources-border);
    background: var(--add-sources-muted-bg);
    border-radius: 0 0 8px 8px;
}

.source-limit-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.source-limit-icon {
    flex-shrink: 0;
    display: inline-flex;
    color: var(--add-sources-muted);
}

.source-limit-icon svg {
    width: 16px;
    height: 16px;
}

.source-limit-label {
    font-size: 14px;
    color: var(--add-sources-muted);
    flex-shrink: 0;
}

.source-limit-bar {
    flex: 1;
    height: 8px;
    min-width: 0;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.source-limit-progress {
    height: 100%;
    background: var(--add-sources-accent);
    border-radius: 4px;
    transition: width 0.3s;
}

.source-limit-count {
    font-size: 14px;
    color: var(--add-sources-muted);
    flex-shrink: 0;
}

#add-sources-file-input.hidden,
#add-sources-file-input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

/* Add sources: shared Link view (Website / YouTube – one URL input, add-resource style) */
.add-sources-view { display: block; }
.add-sources-link-view[hidden] { display: none !important; }

.add-sources-link-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 4px;
}

.add-sources-link-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.add-sources-link-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.add-sources-link-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--add-sources-muted);
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.add-sources-link-back:hover {
    background: #f1f5f9;
    color: #1e293b;
}

.add-sources-link-title {
    font-size: 18px;
    font-weight: 600;
    color: #475569;
    margin: 0;
}

@media (min-width: 640px) {
    .add-sources-link-title { font-size: 20px; }
}

.add-sources-link-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.add-sources-link-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.add-sources-url-input {
    width: 100%;
    padding: 10px 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid var(--add-sources-border);
    border-radius: 8px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.add-sources-url-input::placeholder {
    color: var(--add-sources-muted);
}

.add-sources-url-input:focus {
    border-color: var(--add-sources-accent);
    box-shadow: 0 0 0 3px rgba(56, 161, 229, 0.15);
}

.add-sources-link-intro {
    font-size: 14px;
    color: var(--add-sources-muted);
    margin: 0 0 1rem 0;
    line-height: 1.5;
}

.add-sources-link-notes {
    font-size: 14px;
    color: var(--add-sources-muted);
    margin: 0;
    line-height: 1.5;
}

.add-sources-link-notes-list {
    margin-top: 1.5rem;
}

.add-sources-link-notes-heading {
    font-size: 14px;
    font-weight: 500;
    color: #475569;
    margin: 0 0 0.5rem 0;
}

.add-sources-link-notes-ul {
    font-size: 14px;
    color: var(--add-sources-muted);
    margin: 0;
    padding-left: 1.25rem;
    line-height: 1.6;
    list-style: disc;
}

.add-sources-link-notes-ul li {
    margin-bottom: 0.25rem;
}

.add-sources-link-learn {
    color: inherit;
    text-decoration: underline;
}

.add-sources-link-learn:hover {
    color: #1e293b;
}

.add-sources-link-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Link view & Copied view: full-width footer bar with Insert on the right (structure from add-sources-dialog) */
.add-sources-link-view .add-sources-link-actions,
.add-sources-copied-view .add-sources-link-actions {
    width: calc(100% + 48px);
    max-width: calc(100% + 48px);
    margin-top: 1.5rem;
    margin-left: -24px;
    margin-right: -24px;
    margin-bottom: -24px;
    padding-top: 1rem;
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    box-sizing: border-box;
    border-top: 1px solid var(--add-sources-border);
    background: var(--add-sources-muted-bg);
    border-radius: 0 0 8px 8px;
}

.add-sources-urls-textarea,
.add-sources-copied-textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2937;
    background: #ffffff;
    border: 1px solid var(--add-sources-border);
    border-radius: 8px;
    outline: none;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;
}

.add-sources-copied-textarea {
    min-height: 280px;
}

.add-sources-urls-textarea:focus,
.add-sources-copied-textarea:focus {
    border-color: var(--add-sources-accent);
    box-shadow: 0 0 0 3px rgba(56, 161, 229, 0.15);
}

.add-sources-urls-textarea::placeholder,
.add-sources-copied-textarea::placeholder {
    color: var(--add-sources-muted);
}

.add-sources-copied-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 4px;
}

.add-sources-copied-view[hidden] {
    display: none !important;
}

.add-sources-link-insert {
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.add-sources-link-insert:hover {
    opacity: 0.9;
}

.add-sources-link-insert:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   Invite User Dialog (v0 invite-user-dialog UI)
   ============================================ */
.invite-user-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2100;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}

.invite-user-overlay.active {
    display: flex;
}

@media (max-width: 767px) {
    .invite-user-overlay {
        align-items: stretch;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }
    .invite-user-overlay.active .invite-user-modal {
        margin: auto 0;
        flex-shrink: 0;
    }
}

.invite-user-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2101;
}

.invite-user-modal {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 72rem;
    max-height: min(85vh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    z-index: 2102;
    border: 1px solid #e5e7eb;
}

.invite-user-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.invite-user-header-text { flex: 1; }

.invite-user-title {
    font-size: 20px;
    font-weight: 600;
    color: #4b5563;
    margin: 0 0 4px 0;
}

.invite-user-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.invite-user-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.invite-user-close:hover {
    background: #f3f4f6;
    color: #1f2937;
}

.invite-user-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.invite-user-form { margin-bottom: 24px; }

.invite-user-form-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 0px;
}

@media (min-width: 640px) {
    .invite-user-form-row {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding-bottom: 0px;
    }
}

.invite-user-input-wrap {
    position: relative;
    flex: 1;
    max-width: 28rem;
}

.invite-user-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #9ca3af;
    pointer-events: none;
}

.invite-user-input {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.invite-user-input::placeholder { color: #4b5563; }

.invite-user-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.invite-user-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: opacity 0.2s;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 640px) { .invite-user-send-btn { width: auto; } }

.invite-user-send-btn:hover:not(:disabled) { opacity: 0.9; }

.invite-user-send-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.invite-user-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    display: none;
}

@media (min-width: 768px) { .invite-user-table-wrap { display: block; } }

.invite-user-table { width: 100%; border-collapse: collapse; }

.invite-user-table thead { background: rgba(243, 244, 246, 0.5); }

.invite-user-table th {
    text-align: left;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
}

.invite-user-table tbody tr { border-top: 1px solid #e5e7eb; transition: background 0.2s; }

.invite-user-table tbody tr:hover { background: rgba(243, 244, 246, 0.3); }

.invite-user-table td {
    padding: 12px;
    font-size: 14px;
    color: #374151;
}

.invite-user-table .invite-user-cell-email {
    display: flex;
    align-items: center;
    gap: 8px;
}

.invite-user-table .invite-user-cell-email svg { color: #6b7280; flex-shrink: 0; }

.invite-user-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}

.invite-user-status-pending { color: #3b82f6; background: #eff6ff; }

.invite-user-status-pending svg { margin-right: 4px; color: #3b82f6; }

.invite-user-status-accepted { color: #1d4ed8; background: #dbeafe; }

.invite-user-status-accepted svg { margin-right: 4px; color: #1d4ed8; }

.invite-user-status-expired { color: #6b7280; background: #f3f4f6; }

.invite-user-status-expired svg { margin-right: 4px; color: #6b7280; }

.invite-user-resend {
    background: none;
    border: none;
    padding: 0;
    font-size: 12px;
    color: #3b82f6;
    cursor: pointer;
}

.invite-user-resend:hover { color: #1d4ed8; }

.invite-user-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) { .invite-user-cards { display: none; } }

.invite-user-card {
    background: linear-gradient(to bottom right, #F5F8FF, #EEF4FF);
    border: 1px solid #D0E0FF;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.invite-user-card-email { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 12px; }

.invite-user-card-email svg { color: #6b7280; flex-shrink: 0; margin-top: 2px; }

.invite-user-card-email span { font-size: 14px; word-break: break-all; }

.invite-user-card-muted { font-size: 12px; color: #6b7280; }

.invite-user-card-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }

.invite-user-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid #e5e7eb;
}

@media (max-width: 767px) {
    .invite-user-card-footer div > span:not(.invite-user-card-muted) {
        font-size: 12px;
    }
    .invite-user-card-footer .invite-user-card-muted {
        font-size: 11px;
    }
}

.invite-user-empty {
    text-align: center;
    padding: 48px 24px;
}

.invite-user-empty-icon {
    width: 64px;
    height: 64px;
    background: #f3f4f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #6b7280;
}

.invite-user-empty-title { font-size: 18px; font-weight: 500; color: #1f2937; margin: 0 0 8px 0; }

.invite-user-empty-desc { font-size: 14px; color: #6b7280; margin: 0; }

.invite-user-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    background: rgba(243, 244, 246, 0.5);
    border-radius: 0 0 8px 8px;
}

.invite-user-pagination-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

@media (max-width: 639px) { .invite-user-pagination-text { display: none; } }

.invite-user-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 640px) { .invite-user-pagination { gap: 8px; } }

.invite-user-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.invite-user-page-btn:hover:not(:disabled) { background: #f9fafb; }

.invite-user-page-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.invite-user-page-info {
    font-size: 12px;
    color: #6b7280;
    margin: 0 4px;
}

@media (min-width: 640px) { .invite-user-page-info { margin: 0 8px; } }

/* ============================================
   All Chats Page – list view, responsive mobile/desktop
   ============================================ */
.chats-page-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 16px 16px;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .chats-page-container {
        padding: 0 24px 24px 24px;
    }
}
@media (min-width: 768px) {
    .chats-page-container {
        padding: 0 24px 32px 24px;
    }
}

.chats-page-header {
    margin-bottom: 24px;
}
@media (min-width: 640px) {
    .chats-page-header {
        margin-bottom: 32px;
    }
}

.chats-page-title {
    font-size: 18px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
    line-height: 1.25;
}
@media (min-width: 640px) {
    .chats-page-title {
        font-size: 20px;
        margin-bottom: 8px;
    }
}

.chats-page-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}
@media (min-width: 640px) {
    .chats-page-subtitle {
        font-size: 16px;
    }
}

.chats-list {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
@media (min-width: 640px) {
    .chats-list {
        border-radius: 12px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }
}

.chats-list-inner {
    overflow-y: auto;
}

.chat-list-item {
    display: flex;
    align-items: stretch;
    min-height: 56px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
    gap: 8px;
}
.chat-list-item:last-child {
    border-bottom: none;
}
.chat-list-item:hover {
    background-color: #f9fafb;
}
@media (min-width: 640px) {
    .chat-list-item {
        padding: 16px 24px;
        min-height: 64px;
        gap: 12px;
    }
}

.chat-list-link {
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.chat-list-link:focus {
    outline: none;
}
.chat-list-link:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

.chat-list-content {
    flex: 1;
    min-width: 0;
}

.chat-list-title {
    font-size: 15px;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.35;
}
@media (min-width: 640px) {
    .chat-list-title {
        font-size: 16px;
        margin-bottom: 6px;
    }
}

.chat-list-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}
@media (min-width: 640px) {
    .chat-list-meta {
        font-size: 14px;
        gap: 16px;
    }
}

.chat-list-chevron {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-left: auto;
}
@media (min-width: 640px) {
    .chat-list-chevron {
        width: 20px;
        height: 20px;
        margin-left: 0;
    }
}

.chat-list-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 10px;
    margin: -10px 0;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    color: #2563eb;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, opacity 0.2s;
}
.chat-list-delete:hover {
    background: #dbeafe;
    color: #2563eb;
    border-color: #bfdbfe;
}
.chat-list-delete:focus {
    outline: none;
}
.chat-list-delete:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.chat-list-delete:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
@media (min-width: 640px) {
    .chat-list-delete {
        min-width: 40px;
        min-height: 40px;
        margin: 0;
        padding: 8px;
    }
}

.chats-empty {
    padding: 40px 24px;
    text-align: center;
    color: #6b7280;
}
@media (min-width: 640px) {
    .chats-empty {
        padding: 48px 32px;
    }
}

.chats-empty-title {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 8px 0;
}
.chats-empty-desc {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

/* ============================================
   LLM Provider Selection Modal
   ============================================ */
.llm-provider-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2100;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
    overflow: hidden;
}
.llm-provider-overlay.active {
    display: flex;
}
.llm-provider-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2101;
}
.llm-provider-modal {
    position: relative;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    width: 100%;
    max-width: 42rem;
    max-height: min(85vh, calc(100dvh - 32px));
    display: flex;
    flex-direction: column;
    z-index: 2102;
    border: 1px solid #e5e7eb;
}
.llm-provider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.llm-provider-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.llm-provider-back:hover {
    background: #f3f4f6;
    color: #1f2937;
}
.llm-provider-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.llm-provider-title-with-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.llm-provider-header-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
}
.llm-provider-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: #9ca3af;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.llm-provider-close:hover {
    background: #f3f4f6;
    color: #374151;
}
.llm-provider-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 0;
}
.llm-provider-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 16px 0;
    line-height: 1.5;
}
.llm-provider-search-wrap {
    position: relative;
    margin-bottom: 16px;
}
.llm-provider-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: #9ca3af;
    pointer-events: none;
}
.llm-provider-search {
    width: 100%;
    height: 40px;
    padding: 8px 12px 8px 36px;
    font-size: 14px;
    line-height: 1.5;
    color: #1f2937;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    outline: none;
    box-sizing: border-box;
}
.llm-provider-search::placeholder { color: #9ca3af; }
.llm-provider-search:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.llm-provider-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}
.llm-provider-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: llm-provider-spin 0.8s linear infinite;
}
@keyframes llm-provider-spin {
    to { transform: rotate(360deg); }
}
.llm-provider-loading-text {
    font-size: 13px;
    color: #6b7280;
    margin: 12px 0 0 0;
}
.llm-provider-grid {
    display: grid;
    gap: 12px;
}
.llm-provider-grid-providers {
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 640px) {
    .llm-provider-grid-providers { gap: 16px; }
}
.llm-provider-grid-llms {
    grid-template-columns: 1fr 1fr;
}
@media (min-width: 1024px) {
    .llm-provider-grid-llms { grid-template-columns: 1fr 1fr 1fr; }
}
.llm-provider-card,
.llm-provider-llm-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.llm-provider-card:hover,
.llm-provider-llm-card:hover {
    border-color: #3b82f6;
    background: #eff6ff;
}
.llm-provider-card-icon,
.llm-provider-llm-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}
.llm-provider-card-icon img,
.llm-provider-llm-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.llm-provider-card-name,
.llm-provider-llm-name {
    font-size: 14px;
    font-weight: 500;
    color: #646464;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.llm-provider-no-models {
    padding: 32px 16px;
    text-align: center;
    font-size: 14px;
    color: #6b7280;
}

@media (max-width: 767px) {
    .llm-provider-overlay {
        align-items: stretch;
        justify-content: center;
        overflow-y: auto;
        padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    }
    .llm-provider-overlay.active .llm-provider-modal {
        margin: auto 0;
        flex-shrink: 0;
    }
}

/* ============================================
   COURSE PAGES STYLES - Course Catalog, Course About, All Courses
   ============================================ */

/* Common Page Container */
.catalog-page-container,
.about-page-container,
.courses-page-container {
    padding: 24px;
    background: white;
}
/* /course-about en móvil: espacio bajo el contenido para el footer fijo (debe ir después del padding:24px común) */
@media (max-width: 767px) {
    .about-page-container {
        padding-bottom: calc(24px + 80px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
/* ============================================
   COURSE CATALOG – v0 EXACT design (pixel-perfect Tailwind values)
   ============================================ */
/* v0: px-5 py-4 sm:pl-8 sm:pr-8 sm:py-8 md:pr-20 — negate main-content-area 24px, apply v0 EXACT */
.catalog-page-container.catalog-v0,
.courses-page-container.catalog-v0 {
    margin: -24px;
    padding: 16px 20px 200px !important;  /* py-4=16px, px-5=20px */
}
@media (min-width: 640px) {
    .catalog-page-container.catalog-v0,
    .courses-page-container.catalog-v0 {
        padding: 32px 32px 200px !important;  /* sm:pl-8 pr-8 py-8 = 32px */
    }
}
@media (min-width: 768px) {
    .catalog-page-container.catalog-v0,
    .courses-page-container.catalog-v0 {
        padding-right: 80px !important;  /* md:pr-20 = 80px */
    }
}

/* Selected courses: use full width of main column; show imgs (main-content-area hides generic img) */
.main-content-area:has(.selected-courses-page) {
    padding: 0 !important;
}
.selected-courses-page.sc-wrap {
    margin: 0;
    width: 100%;
    max-width: none;
    padding: 16px 20px 120px;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .selected-courses-page.sc-wrap {
        padding: 24px 32px 140px;
    }
}
@media (min-width: 768px) {
    .selected-courses-page.sc-wrap {
        padding-right: 80px;
    }
}
.main-content-area .selected-courses-page .hcl-thumb-wrap img,
.main-content-area .selected-courses-page .card-thumb img,
.main-content-area .selected-courses-page .card-academy-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    position: static !important;
    left: auto !important;
}
.main-content-area .selected-courses-page .hcl-thumb-wrap img,
.main-content-area .selected-courses-page .card-thumb img {
    width: 100% !important;
    height: 100% !important;
}
.main-content-area .selected-courses-page .hcl-thumb-wrap img:not(.hcl-thumb-nopic),
.main-content-area .selected-courses-page .card-thumb img.card-thumb-cover {
    object-fit: cover !important;
}
.main-content-area .selected-courses-page .hcl-thumb-wrap img.hcl-thumb-nopic,
.main-content-area .selected-courses-page .card-thumb img.card-thumb-nopic {
    object-fit: contain !important;
}
.main-content-area .selected-courses-page .card-academy-logo {
    width: auto !important;
    height: auto !important;
    max-height: 28px !important;
    max-width: 80px !important;
    object-fit: contain !important;
}

/* Search container – v0 EXACT: mb-6=24px sm:mb-8=32px, max-w-md=448px */
.catalog-search-container {
    max-width: 448px;  /* 28rem */
    margin-bottom: 24px;  /* mb-6 */
}
@media (min-width: 640px) {
    .catalog-search-container {
        margin-bottom: 32px;  /* sm:mb-8 */
    }
}

.catalog-search-wrapper {
    position: relative;
}

/* Icon – v0: pl-3=12px, w-5 h-5=20px, text-gray-400 */
.catalog-search-icon {
    position: absolute;
    left: 12px;  /* pl-3 */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;   /* w-5 */
    height: 20px;  /* h-5 */
    color: #9ca3af;  /* gray-400 */
    pointer-events: none;
}

/* Input – v0 EXACT: pl-10 pr-4 py-2 (Tailwind spacing scale) */
.catalog-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 1rem 0.5rem 2.5rem;  /* py-2=0.5rem, pr-4=1rem, pl-10=2.5rem - EXACT Tailwind */
    background: #f3f4f6;   /* gray-100 */
    border: 1px solid #e5e7eb;  /* gray-200 */
    border-radius: 8px;    /* rounded-lg */
    font-size: 1rem;       /* 16px - base */
    line-height: 1.5;      /* match Tailwind default */
    font-family: inherit;
    color: #020817;
    transition: outline 0s, box-shadow 0.2s;
}
.catalog-search-input::placeholder {
    color: #9ca3af;  /* gray-400 - placeholder */
}
.catalog-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;  /* focus:ring-2 ring-blue-500 */
}

/* Grid – course-catalog: 1 col mobile, 2 sm, 3 lg, 4 xl */
.catalog-courses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 640px) {
    .catalog-courses-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}
@media (min-width: 1024px) {
    .catalog-courses-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1280px) {
    .catalog-courses-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
/* About and academy-catalog: 1 col mobile, 2 per row from 640px */
.about-catalog-grid.catalog-courses-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 640px) {
    .about-catalog-grid.catalog-courses-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Card – v0: border rounded-lg shadow-sm hover:shadow-md bg-white p-3 */
.catalog-course-card {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    background: white;
    padding: 12px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s;
}
.catalog-course-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* Image – aspect-ratio 16:9 to preserve proportions */
.catalog-course-image-wrap {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}
.catalog-course-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    display: block;
}
.catalog-course-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
}
.catalog-course-placeholder-icon {
    opacity: 0.7;
}
.catalog-course-placeholder-icon svg {
    display: block;
}
.catalog-course-placeholder-text {
    font-weight: 500;
}
.catalog-course-placeholder-fallback {
    z-index: 0;
}
.catalog-course-image-overlay {
    position: relative;
    z-index: 1;
}
.catalog-course-image-failed {
    display: none !important;
}
.catalog-course-image-placeholder.hidden {
    display: none !important;
}

/* Level badge – v0: bottom-2 left-2, gradient #38A1E5→#7284FF */
.catalog-course-level-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    color: white;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
    background: linear-gradient(135deg, #38A1E5 0%, #7284FF 100%);
}
.catalog-course-level-badge--live {
    background: #dc2626;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Status badge (Purchased/Free/Price) */
.catalog-course-status-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    color: white;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    z-index: 10;
}
.catalog-course-purchased {
    background: #10b981;
}
.catalog-course-free {
    background: linear-gradient(135deg, #38A1E5 0%, #7284FF 100%);
}
.catalog-course-price {
    background: linear-gradient(135deg, #38A1E5 0%, #7284FF 100%);
}
.catalog-course-subscription {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* Title – v0: pt-3 (12px), font-medium, line-clamp-2, text-sm sm:text-base, color rgb(113,121,133) */
.catalog-course-body {
    padding-top: 12px;
}
.catalog-course-title {
    font-size: 14px;
    font-weight: 500;
    color: rgb(113, 121, 133);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 640px) {
    .catalog-course-title { font-size: 16px; }
}

/* Empty state – v0: text-center py-12, text-gray-500 */
.catalog-empty-state {
    text-align: center;
    padding: 48px 20px;
}
.catalog-empty-state.hidden {
    display: none !important;
}
.catalog-empty-text {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

/* ============================================
   CONFIGURE – v0 /customize EXACT design
   ============================================ */
.configure-v0 {
    margin: -24px;
    padding: 16px 20px 200px;
}
@media (min-width: 640px) {
    .configure-v0 {
        padding: 32px 32px 200px;
    }
}
@media (min-width: 768px) {
    .configure-v0 {
        padding-right: 80px;
    }
}

.configure-v0-header {
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .configure-v0-header { margin-bottom: 24px; }
}

.configure-v0-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(113, 121, 133);
    margin: 0 0 4px 0;
}
@media (min-width: 640px) {
    .configure-v0-title { font-size: 20px; margin-bottom: 8px; }
}

.configure-v0-subtitle {
    font-size: 12px;
    color: rgb(113, 121, 133);
    margin: 0;
}
@media (min-width: 640px) {
    .configure-v0-subtitle { font-size: 14px; }
}

/* Tabs – v0: px-4 sm:px-6 py-2 sm:py-3 text-xs sm:text-sm */
.configure-v0-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.configure-v0-tabs::-webkit-scrollbar {
    display: none;
}
@media (min-width: 640px) {
    .configure-v0-tabs { margin-bottom: 24px; }
}

.configure-v0-tab {
    padding: 8px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.configure-v0-tab:hover {
    color: #374151;
}
.configure-v0-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}
@media (min-width: 640px) {
    .configure-v0-tab {
        padding: 12px 24px;
    }
}

/* Content box – v0: bg-white rounded-lg border p-3 sm:p-4 md:p-6 */
.configure-v0-content-box {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .configure-v0-content-box {
        padding: 16px;
        margin-bottom: 24px;
    }
}
@media (min-width: 768px) {
    .configure-v0-content-box {
        padding: 24px;
        margin-right: 20px;
    }
}

/* Section title – v0: text-base sm:text-lg font-semibold mb-3 sm:mb-4 */
.configure-v0-section-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(113, 121, 133);
    margin: 0 0 12px 0;
}
@media (min-width: 640px) {
    .configure-v0-section-title { font-size: 18px; margin-bottom: 16px; }
}

.configure-v0-section-desc {
    color: #6b7280;
    font-size: 12px;
    margin: 0 0 16px 0;
}
@media (min-width: 640px) {
    .configure-v0-section-desc { font-size: 14px; }
}

/* Textarea – v0: min-h-[300px] sm:[400px] md:[500px] font-mono text-xs sm:text-sm */
.configure-v0-textarea {
    width: 100%;
    min-height: 300px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 12px;
    font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
    line-height: 1.6;
    resize: vertical;
    box-sizing: border-box;
}
.configure-v0-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
@media (min-width: 640px) {
    .configure-v0-textarea {
        min-height: 400px;
        font-size: 14px;
    }
}
@media (min-width: 768px) {
    .configure-v0-textarea { min-height: 500px; }
}

/* Footer actions – v0: flex flex-col sm:flex-row sm:justify-between gap-3 */
.configure-v0-footer {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 200px;
}
@media (min-width: 640px) {
    .configure-v0-footer {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
    }
}

.configure-v0-footer-left {
    font-size: 12px;
    color: #6b7280;
    display: none;
}
@media (min-width: 640px) {
    .configure-v0-footer-left { display: block; font-size: 14px; }
}

.configure-v0-footer-right {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (min-width: 640px) {
    .configure-v0-footer-right {
        flex-direction: row;
        gap: 12px;
    }
}

/* Buttons – v0: Restore=outline px-4 sm:px-6 py-2, Save=gradient */
.configure-v0-btn {
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
@media (min-width: 640px) {
    .configure-v0-btn {
        padding: 8px 24px;
        font-size: 14px;
    }
}

.configure-v0-btn-outline {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}
.configure-v0-btn-outline:hover {
    background: #f9fafb;
}

.configure-v0-btn-save {
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
}
.configure-v0-btn-save:hover {
    opacity: 0.9;
}

/* ============================================
   USERS – v0 EXACT design
   ============================================ */
.users-v0 {
    margin: -24px;
    padding: 16px 20px 200px;
}
@media (min-width: 640px) {
    .users-v0 { padding: 32px 32px 200px; }
}
@media (min-width: 768px) {
    .users-v0 { padding-right: 80px; }
}

.users-v0-header {
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .users-v0-header { margin-bottom: 24px; }
}

.users-v0-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(113, 121, 133);
    margin: 0 0 16px 0;
}
@media (min-width: 640px) {
    .users-v0-title { font-size: 20px; margin-bottom: 24px; }
}

/* Search + Create row – v0: flex-col sm:flex-row gap-2 sm:gap-3 */
.users-v0-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 8px;
}
@media (min-width: 640px) {
    .users-v0-toolbar {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
}

.users-v0-search-wrap {
    max-width: 512px;
    position: relative;
}
.users-v0-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #9ca3af;
    pointer-events: none;
}
.users-v0-search-input {
    width: 100%;
    height: 40px;
    padding: 0 1rem 0 2.5rem;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: #020817;
    box-sizing: border-box;
}
.users-v0-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;
}

.users-v0-create-btn {
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.users-v0-create-btn:hover {
    opacity: 0.9;
}
@media (min-width: 640px) {
    .users-v0-create-btn {
        padding: 0 24px;
        font-size: 14px;
    }
}

.users-v0-count {
    font-size: 14px;
    color: rgb(113, 121, 133);
    margin-top: 8px;
}

/* Users dialogs (Create / Edit / Delete) – overlay full viewport, dialog vertically and horizontally centered */
.users-dialog-modal {
    display: none;
    position: fixed;
    z-index: 1100;
    inset: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.5);
}
.users-dialog-modal.is-open {
    display: flex;
}
@media (max-width: 767px) {
    .users-dialog-modal {
        padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .users-dialog-content {
        max-height: min(90vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem));
        margin: auto;
        flex-shrink: 0;
    }
}
.users-dialog-content {
    background: white;
    margin: auto;
    padding: 0;
    border-radius: 8px;
    width: 100%;
    max-width: 420px;
    max-height: min(85vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem));
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.users-dialog-header {
    flex-shrink: 0;
    padding: max(24px, env(safe-area-inset-top, 0px)) 24px 24px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.users-dialog-header-text {
    flex: 1;
    min-width: 0;
}
.users-dialog-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--sidebar-foreground, #4b5563);
}
.users-dialog-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}
.users-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.users-dialog-close:hover {
    color: #374151;
}
.users-dialog-alert {
    flex-shrink: 0;
    padding: 0 max(24px, env(safe-area-inset-left, 0px)) 0 max(24px, env(safe-area-inset-right, 0px));
}
.users-dialog-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.users-dialog-form-no-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}
.users-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    display: flex;
    flex-direction: column;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    background-color: #f9fafb;
    border-top: 1px solid #f3f4f6;
}
.users-dialog-body::-webkit-scrollbar {
    width: 6px;
}
.users-dialog-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
.users-dialog-body-p {
    margin: 0 0 16px 0;
    color: #374151;
    font-size: 14px;
}
.users-dialog-body-p-muted {
    margin: 0 0 24px 0;
    color: #6b7280;
    font-size: 14px;
}

/* Delete User modal: deletion method options */
.users-delete-methods {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.users-delete-option {
    display: block;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}
.users-delete-option:hover {
    border-color: #d1d5db;
}
.users-delete-option:has(.users-delete-radio:checked) {
    border-color: #3b82f6;
    background-color: #eff6ff;
}
.users-delete-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.users-delete-option-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.users-delete-option-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}
.users-delete-option-desc {
    font-size: 14px;
    color: #6b7280;
    margin-top: 4px;
}
.users-delete-option-list {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.users-delete-option-item {
    font-size: 14px;
}
.users-delete-option-item-blue {
    color: #2563eb;
}
.users-delete-option-item-muted {
    color: #6b7280;
}
.users-delete-star {
    color: #eab308;
}

.users-dialog-footer {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.users-create-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}
.users-create-label {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: var(--sidebar-foreground, #374151);
}
.users-create-required {
    color: #ef4444;
}
.users-create-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #020817;
    box-sizing: border-box;
}
.users-create-input-disabled {
    background: #f3f4f6;
    color: #6b7280;
}
.users-create-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.users-create-input::placeholder {
    color: #9ca3af;
}
.users-create-checkbox-row {
    padding-top: 0;
}
.users-create-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--sidebar-foreground, #374151);
}
.users-create-checkbox {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}
.users-create-btn {
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    font-family: inherit;
}
.users-create-btn-cancel {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}
.users-create-btn-cancel:hover {
    background: #f9fafb;
}
.users-create-btn-submit {
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
}
.users-create-btn-submit:hover {
    opacity: 0.9;
}
.users-create-btn-delete {
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
}
.users-create-btn-delete:hover {
    opacity: 0.9;
}

/* Table – v0: hidden md:block, bg-white rounded-lg border */
.users-v0-table-wrap {
    display: none;
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    margin-bottom: 32px;
}
@media (min-width: 768px) {
    .users-v0-table-wrap { display: block; }
}

.users-v0-table {
    width: 100%;
    border-collapse: collapse;
}
.users-v0-table thead {
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}
.users-v0-table th {
    padding: 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.users-v0-table tbody tr {
    border-bottom: 1px solid #e5e7eb;
    transition: background 0.2s;
}
.users-v0-table tbody tr:hover {
    background: #f9fafb;
}
.users-v0-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: rgb(113, 121, 133);
}
.users-v0-table td .users-v0-cell-username {
    font-weight: 500;
}

.users-v0-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 500;
}
.users-v0-badge-active {
    background: #dbeafe;
    color: #1e40af;
}
.users-v0-badge-inactive {
    background: #f3f4f6;
    color: #374151;
}
.users-v0-badge-role {
    background: #dbeafe;
    color: #1e40af;
    margin-right: 6px;
    margin-bottom: 4px;
}

.users-v0-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}
.users-v0-action-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.users-v0-action-btn-edit {
    background: #F0F4F8;
}
.users-v0-action-btn-edit:hover {
    background: #dbeafe;
}
.users-v0-action-btn-delete {
    background: #F5F5F5;
    color: #6b7280;
}
.users-v0-action-btn-delete:hover {
    background: #e5e7eb;
}
.users-v0-action-btn-edit {
    color: #2563EB;
}
.users-v0-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Mobile cards – v0: md:hidden */
.users-v0-cards {
    display: block;
    margin-bottom: 200px;
}
@media (min-width: 768px) {
    .users-v0-cards { display: none; }
}

.users-v0-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}
.users-v0-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
}
.users-v0-card-username {
    font-size: 14px;
    font-weight: 500;
    color: rgb(113, 121, 133);
    margin-bottom: 4px;
}
.users-v0-card-email {
    font-size: 12px;
    color: #6b7280;
}
.users-v0-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    font-size: 12px;
    color: rgb(113, 121, 133);
    margin-top: 12px;
}
.users-v0-card-meta span {
    color: #6b7280;
}
.users-v0-card-actions {
    display: flex;
    gap: 14px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #f3f4f6;
}

.about-page-container {
    max-width: 1200px;
    margin: 0 auto;
}

.about-course-back {
    margin-bottom: 16px;
}

.course-objectives-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.course-objectives-list li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
    line-height: 1.5;
    color: #374151;
}

.course-objectives-list .objective-num {
    color: var(--primary-color, #2563eb);
    font-weight: 500;
    flex-shrink: 0;
}

/* Schedule & Details page – v0 course/1/schedule design, block centered */
.schedule-details-page {
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 640px) {
    /* v0: sm:py-8 sm:pl-8 sm:pr-8 */
    .schedule-details-page {
        padding-top: 32px;
        padding-bottom: 32px;
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 768px) {
    /* v0: md:pr-20 */
    .schedule-details-page {
        padding-right: 80px;
    }
}

.schedule-details-back {
    margin-bottom: 16px;
}

.schedule-details-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
}

.schedule-details-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.schedule-details-success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.schedule-details-header {
    margin-bottom: 32px; /* breathing room below title block before forms */
}

@media (min-width: 640px) {
    .schedule-details-header {
        margin-bottom: 40px;
    }
}

.schedule-details-header h1 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--sidebar-foreground, #4b5563);
    margin: 0 0 12px 0;
}

@media (min-width: 640px) {
    .schedule-details-header h1 { font-size: 1.5rem; }
}

.schedule-details-subtitle {
    font-size: 14px;
    color: rgb(113,121,133);
    margin: 0 0 16px 0;
}

.schedule-details-btn-primary {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.schedule-details-btn-primary:hover {
    opacity: 0.9;
}

.schedule-details-section {
    background: unset;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 15px;
}

/* First section (Edit Course Details): no border */
.schedule-details-page .schedule-details-section:not(.schedule-details-section-price) {
    border: none;
    box-shadow: none;
}

/* Course Price block: grey bg like top block, light border */
.schedule-details-page .schedule-details-section-price {
    background: #f9fafb;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(229, 231, 235, 1);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}

.schedule-details-footer-actions {
    margin-top: 24px;
    padding-top: 0;
}

@media (min-width: 640px) {
    .schedule-details-section { padding: 0; }
}

.schedule-details-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: rgb(113,121,133);
    margin: 0 0 4px 0;
}

.schedule-details-hint {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 16px 0;
}

.schedule-details-form {
    margin-top: 16px;
}

.schedule-details-field {
    margin-bottom: 16px;
}

.schedule-details-field label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: rgb(113,121,133);
    margin-bottom: 6px;
}

.schedule-details-input,
.schedule-details-textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
}

.schedule-details-input-readonly {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    background: #f9fafb;
    cursor: not-allowed;
}

.schedule-details-textarea {
    min-height: 80px;
    resize: vertical;
}

.schedule-details-field small {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Schedule details file upload – same look as create course "Choose File" */
.schedule-details-file-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}
@media (min-width: 640px) {
    .schedule-details-file-row {
        flex-direction: row;
        align-items: center;
    }
    .schedule-details-file-row .schedule-details-file-status {
        align-self: center;
    }
}
.schedule-details-file-label {
    cursor: pointer;
    display: inline-block;
}
.schedule-details-choose-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 8px 16px;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    font-family: inherit;
    pointer-events: none;
}
.schedule-details-file-label:hover .schedule-details-choose-btn {
    background: #f9fafb;
}
.schedule-details-file-input {
    display: none;
}
.schedule-details-file-status {
    font-size: 14px;
    color: #6b7280;
    align-self: flex-start;
}

.schedule-details-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 640px) {
    .schedule-details-grid { grid-template-columns: 1fr 1fr; }
}

/* Schedule details – Edit Course form: same as course creation flow (create-course-form-v0) with update buttons */
.schedule-details-page .create-course-form-v0 {
    width: 100%;
    max-width: min(800px, 100%);
    min-width: 0;
    margin: 0 auto;
    background: #F9FAFB;
    border: 1px solid rgba(229, 231, 235, 1);
    border-radius: 0.625rem;
    padding: 16px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0 { padding: 24px; }
}
@media (min-width: 768px) {
    .schedule-details-page .create-course-form-v0 { padding: 32px; }
}
.schedule-details-page .create-course-form-v0-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(113,121,133);
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-title { font-size: 20px; margin-bottom: 24px; }
}
.schedule-details-page .create-course-form-v0-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-body { gap: 24px; }
}
.schedule-details-page .create-course-form-v0-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.schedule-details-page .create-course-form-v0-label {
    font-size: 14px;
    font-weight: 500;
    color: rgb(113,121,133);
    display: block;
}
.schedule-details-page .create-course-form-v0-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 36px;
    padding: 4px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.schedule-details-page .create-course-form-v0-input:focus {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 3px rgba(0,163,236,0.15);
}
.schedule-details-page input.create-course-form-v0-input[type="datetime-local"],
.schedule-details-page textarea.create-course-form-v0-input {
    height: auto;
    min-height: 36px;
    padding: 8px 12px;
    box-sizing: border-box;
}
.schedule-details-page textarea.create-course-form-v0-input {
    min-height: 80px;
    resize: vertical;
}
.schedule-details-page .date-picker-wrap {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
.schedule-details-page .date-picker-wrap input[type="datetime-local"] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}
.schedule-details-page .create-course-form-v0-note {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
    line-height: 1.5;
}
.schedule-details-page .create-course-form-v0-dates-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-dates-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.schedule-details-page .create-course-form-v0-date-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.schedule-details-page .create-course-form-v0-section {
    margin-top: 0px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-section { margin-top: 0; padding-top: 32px; }
}
.schedule-details-page .create-course-form-v0-section-header {
    margin-bottom: 16px;
}
.schedule-details-page .create-course-form-v0-section-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(113,121,133);
    margin-bottom: 4px;
}
.schedule-details-page .create-course-form-v0-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 5px;
    margin-bottom: 30px;
}
@media (max-width: 639px) {
    .schedule-details-page .create-course-form-v0-actions { width: 100%; box-sizing: border-box; }
}

/* Schedule details – Course Image tabs (Upload | Generate with AI) and Generate UI */
.schedule-details-page .create-course-form-v0-tabs-wrapper {
    width: 100%;
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-tabs-wrapper { width: auto; overflow-x: visible; }
}
.schedule-details-page .create-course-form-v0-tabs-list {
    display: inline-flex;
    height: 36px;
    align-items: center;
    justify-content: flex-start;
    background: #f3f4f6;
    border-radius: 0.625rem;
    padding: 3px;
    gap: 0;
    flex-wrap: nowrap;
    min-width: min-content;
}
.schedule-details-page .create-course-form-v0-tab-trigger {
    flex: 1;
    height: calc(100% - 2px);
    padding: 0 12px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: #717985;
    font-family: inherit;
    white-space: nowrap;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-tab-trigger { flex: none; }
}
.schedule-details-page .create-course-form-v0-tab-trigger.active {
    background: #ffffff;
    color: #1f2937;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.schedule-details-page .create-course-form-v0-textarea {
    width: 100%;
    min-width: 0;
    min-height: 100px;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    color: #1f2937;
    background: #fff;
    resize: vertical;
}
.schedule-details-page .create-course-form-v0-textarea:focus {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 3px rgba(0,163,236,0.15);
}
.schedule-details-page .step3-image-loading-spinner {
    position: relative;
    width: 64px;
    height: 64px;
}
.schedule-details-page .step3-image-loading-spinner-ring {
    width: 64px;
    height: 64px;
    border: 4px solid #bfdbfe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.schedule-details-page .step3-image-loading-spinner-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.schedule-details-page .step3-image-loading-spinner-icon svg {
    width: 24px;
    height: 24px;
    color: #2563eb;
}

/* Hide generated image img while generating (show only loading state) */
#schedule-generated-image-container.schedule-image-generating #schedule-generated-image-img {
    display: none !important;
}

/* Center loading state in the preview box when generating */
#schedule-generated-image-container {
    position: relative;
}
#schedule-generated-image-container.schedule-image-generating #schedule-generated-image-loading {
    position: absolute;
    inset: 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #6b7280;
}

/* Schedule details – Course Image block: same UI as create course form (v0) */
.schedule-details-page .create-course-form-v0-section-box {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 16px;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-section-box { padding: 20px; }
}
.schedule-details-page .create-course-form-v0-section-header { margin-bottom: 16px; }
.schedule-details-page .create-course-form-v0-section-title {
    font-size: 16px;
    font-weight: 600;
    color: rgb(113,121,133);
    margin-bottom: 4px;
}
@media (min-width: 640px) {
    .schedule-details-page .create-course-form-v0-section-title-lg { font-size: 18px; }
}
.schedule-details-page .create-course-form-v0-note { font-size: 12px; color: #6b7280; margin-top: 0; margin-bottom: 0; line-height: 1.5; }
.schedule-details-page .v0-upload-content { display: flex; flex-direction: column; gap: 16px; }
.schedule-details-page .v0-upload-field { display: flex; flex-direction: column; gap: 8px; }
.schedule-details-page .v0-upload-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.schedule-details-page .v0-upload-file-status { font-size: 14px; color: #6b7280; }
.schedule-details-page .v0-upload-note { font-size: 12px; color: #6b7280; margin: 0 0 10px 0; line-height: 1.5; }
.schedule-details-page .create-course-form-v0-label { font-size: 14px; font-weight: 500; color: rgb(113,121,133); display: block; }
.schedule-details-page .create-course-form-v0-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 8px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
}
.schedule-details-page .create-course-form-v0-btn-outline:hover { background: #f9fafb; }
.schedule-details-page .create-course-form-v0-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    cursor: pointer;
    font-family: inherit;
}
.schedule-details-page .create-course-form-v0-btn-primary:hover { opacity: 0.9; }
/* Regenerate button (Generate with AI → Regenerate) – same as course creation flow */
.schedule-details-page .v0-regenerate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    padding: 8px 16px;
    background: #ffffff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
}
.schedule-details-page .v0-regenerate-btn:hover { background: #f9fafb; }
.schedule-details-page .v0-regenerate-btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.schedule-details-page .v0-regenerate-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.schedule-details-page .v0-upload-preview-wrap { margin-top: 16px; margin-bottom: 15px; }
.schedule-details-page .v0-upload-preview-label { font-size: 14px; font-weight: 500; color: rgb(113,121,133); margin-bottom: 8px; display: block; }
.schedule-details-page .v0-upload-preview-box {
    border: 1px solid #e5e7eb;
    border-radius: 0.625rem;
    padding: 16px;
    background: #fff;
    min-height: 200px;
    margin-bottom: 10px;
}
.schedule-details-page .v0-upload-preview-box img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
    display: block;
    border-radius: 0.625rem;
    margin-bottom: 10px;
}

/* Current course image: contain inside box and force visible (override .main-content-area img hide) */
.schedule-details-page .schedule-details-current-image-box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: #f9fafb;
    overflow: hidden;
}
.schedule-details-page .schedule-details-current-image-box .schedule-details-current-image-img,
.main-content-area .schedule-details-current-image-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    position: static !important;
    left: auto !important;
    object-fit: contain;
    border-radius: 0.625rem;
}

.schedule-details-image-preview {
    max-width: 560px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    margin-bottom: 16px;
}

.schedule-details-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.schedule-details-image-placeholder {
    max-width: 560px;
    aspect-ratio: 16/9;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    margin-bottom: 16px;
}

.schedule-details-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}
.schedule-details-subscription-only-hint {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}
.schedule-details-visibility-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.schedule-details-visibility-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.schedule-details-visibility-label {
    font-size: 14px;
    color: #6b7280;
}
.schedule-details-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 140px;
}

.schedule-details-price-symbol {
    color: #6b7280;
    font-weight: 500;
}

.schedule-details-price-input {
    width: 100px;
}

/* Schedule Details - CKEditor (aligned with edit_content HTML blocks) */
.schedule-details-editor-wrapper {
    margin-bottom: 8px;
}
.schedule-details-editor-wrapper .cke {
    border-radius: 6px;
}
.schedule-details-editor-wrapper .cke_inner {
    border-radius: 6px;
}
textarea.schedule-details-description-source {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    min-height: 280px;
}

/* Quill tooltip (link/formula/video URL input): blue focus instead of yellow */
.ql-tooltip input:focus {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 2px rgba(0, 163, 236, 0.25);
}

/* Prompts Page (Course Creation User Prompt) - v0 /course/1/creation-prompt design */
/* Break out of main-content-area padding so background fills full main area */
.prompts-v0 {
    margin: -24px;
    min-height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px 20px 200px;
    background: #F8FAFC;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .prompts-v0 {
        padding: 16px 24px 200px;
    }
}
.prompts-v0-card {
    width: 100%;
    max-width: 672px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
}
.prompts-v0-content {
    padding: 24px;
}
@media (min-width: 640px) {
    .prompts-v0-content {
        padding: 32px;
    }
}
.prompts-v0-title {
    font-size: 20px;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
@media (min-width: 640px) {
    .prompts-v0-title {
        font-size: 24px;
    }
}
.prompts-v0-course {
    font-size: 14px;
    color: #4b5563;
    margin: 8px 0 0 0;
}
.prompts-v0-divider {
    border-bottom: 1px solid #e5e7eb;
    margin: 20px 0;
}
.prompts-v0-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 24px;
}
.prompts-v0-box {
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    padding: 16px;
    text-align: left;
}
@media (min-width: 640px) {
    .prompts-v0-box {
        padding: 16px 20px;
    }
}
.prompts-v0-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin: 0 0 8px 0;
}
.prompts-v0-text {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.625;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.prompts-v0-footer {
    margin-top: 32px;
}
.prompts-v0-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #EFF6FF;
    color: #2563EB;
    border: 1px solid #BFDBFE;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}
.prompts-v0-back-btn:hover {
    background: #DBEAFE;
    border-color: #93C5FD;
}
.prompts-v0-back-icon {
    width: 16px;
    height: 16px;
}

/* Page Headers */
.catalog-page-header,
.courses-page-header {
    margin-bottom: 32px;
}

.courses-page-header {
    margin-bottom: 16px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.courses-page-header-main {
    min-width: 0;
}
.courses-page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
@media (min-width: 640px) {
    .courses-page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
@media (max-width: 639px) {
    .courses-page-header-actions { width: 100%; }
    .courses-academy-btn { width: 100%; }
}

.courses-academy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #00A3EC 0%, #6988FF 100%);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.courses-academy-btn:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}
.courses-academy-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 5px;
    background: rgba(255,255,255,0.15);
    font-size: 0.875rem;
    line-height: 1;
}

/* All Courses — outline actions (same as about_course Edit About / Edit Syllabus) */
.courses-page-container.catalog-v0 .course-tab-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #0058cc;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    text-decoration: none;
    font-family: inherit;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
    box-sizing: border-box;
}
.courses-page-container.catalog-v0 .course-tab-action-btn:hover {
    background: #f5f8ff;
    border-color: #0058cc;
}
.courses-page-container.catalog-v0 button.course-tab-action-btn {
    -webkit-appearance: none;
    appearance: none;
}
@media (max-width: 639px) {
    .courses-page-header-actions .course-tab-action-btn {
        width: 100%;
    }
}

/* View Academy modal (All Courses) */
.courses-view-academy-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
}
.courses-view-academy-modal.is-open {
    display: flex;
}
.courses-view-academy-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
}
.courses-view-academy-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: calc(100vh - 2rem);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (min-width: 640px) {
    .courses-view-academy-dialog { max-width: 560px; max-height: min(560px, 85vh); }
}
.courses-view-academy-header {
    padding: 16px 24px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.courses-view-academy-title { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--sidebar-foreground, #111827); }
.courses-view-academy-close { border: none; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; color: #6b7280; }
.courses-view-academy-body { padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.courses-view-academy-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
@media (min-width: 640px) {
    .courses-view-academy-top {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        padding: 12px 16px;
        border-radius: 12px;
        background: #f0f2f5;
    }
}
.courses-view-academy-logo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 32px;
}
.courses-view-academy-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.courses-view-academy-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
@media (min-width: 640px) { .courses-view-academy-actions { justify-content: flex-start; } }
.courses-view-academy-action-btn {
    padding: 6px 12px;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    cursor: pointer;
}
.courses-view-academy-action-btn:hover { background: #f9fafb; }
.courses-view-academy-fields { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.courses-view-academy-field { display: flex; flex-direction: column; gap: 6px; }
.courses-view-academy-label { margin: 0; font-size: 0.8125rem; color: #6b7280; }
.courses-view-academy-value {
    width: 100%;
    min-height: 44px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    padding: 8px 12px;
    font-size: 0.9375rem;
    color: var(--sidebar-foreground, #111827);
    display: flex;
    align-items: center;
}
.courses-view-academy-value-multiline { min-height: 60px; max-height: 60px; align-items: flex-start; overflow-y: auto; }
.courses-view-academy-footer {
    padding: 12px 20px 14px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
}
.courses-view-academy-close-btn {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    cursor: pointer;
}
.courses-view-academy-close-btn:hover { background: #f9fafb; }

.catalog-page-title,
.courses-page-title {
    font-size: 28px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.courses-page-title {
    font-size: 18px;
    font-weight: 600;
    color: rgb(113,121,133);
    margin: 0 0 4px 0;
}
@media (min-width: 640px) {
    .courses-page-title { font-size: 20px; margin-bottom: 8px; }
}

.catalog-page-subtitle,
.courses-page-subtitle {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
}

.courses-page-subtitle {
    font-size: 12px;
    color: rgb(113,121,133);
}
@media (min-width: 640px) {
    .courses-page-subtitle { font-size: 14px; }
}

/* Search Bar */
.search-container {
    margin-bottom: 32px;
    position: relative;
}

.search-input-wrapper {
    position: relative;
    max-width: 600px;
}

.search-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 16px;
    font-family: inherit;
    color: #020817;
    background: #ffffff;
    transition: all 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 88, 204, 0.1);
}

.search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Courses Grid */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

@media (min-width: 1200px) {
    .courses-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Course Card */
.course-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
}

.course-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.course-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    overflow: hidden;
}

.course-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.course-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.course-card-badge {
    position: absolute;
    bottom: 12px;
    left: 12px;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-card-purchased {
    background: #6366f1;
}

.course-card-free {
    background: var(--success-color);
}

.course-card-price {
    background: #93c5fd;
}

.course-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.course-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #020817;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.course-card-link:hover .course-card-title {
    color: var(--primary-color);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state h2 {
    font-size: 24px;
    font-weight: 600;
    color: #020817;
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 16px;
}

/* Course About Page */
.course-header {
    margin-bottom: 32px;
}

.course-header h1 {
    font-size: 36px;
    font-weight: 600;
    color: #020817;
    margin: 0 0 16px 0;
}

/* Tabs Navigation */
.about-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 32px;
}

.about-tab {
    padding: 12px 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.2s;
}

.about-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.about-tab:hover {
    color: var(--primary-color);
}

/* Two Column Layout */
.about-content {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 48px;
    align-items: start;
}

@media (max-width: 968px) {
    .about-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Left Column */
.about-left {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.about-section {
    margin-bottom: 0;
}

.about-section h2 {
    font-size: 24px;
    font-weight: 600;
    color: #020817;
    margin-bottom: 16px;
}

.course-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
}

.course-description p {
    margin-bottom: 16px;
}

.course-description p:last-child {
    margin-bottom: 0;
}

.course-description ul,
.course-description ol {
    margin: 16px 0;
    padding-left: 32px;
}

.course-description ul {
    list-style-type: disc;
}

.course-description ol {
    list-style-type: decimal;
}

.course-description li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Right Column */
.about-right {
    position: sticky;
    top: 100px;
}

.course-image-container {
    width: 100%;
    margin-bottom: 24px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--hover-bg);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.course-image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.course-image-placeholder {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    font-weight: 500;
}

.access-course-btn {
    width: 100%;
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
    text-align: center;
    margin-bottom: 24px;
}

.access-course-btn:hover {
    background: var(--primary-dark);
}

.access-course-btn.success {
    background: var(--success-color);
}

.access-course-btn.success:hover {
    background: #059669;
}

.course-details-box {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
}

.course-detail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hover-bg);
}

.course-detail-item:last-child {
    border-bottom: none;
}

.course-detail-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
}

.course-detail-text {
    font-size: 14px;
    color: var(--text-primary);
    flex: 1;
}

/* All Courses Table */
.courses-table-wrapper {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 0 !important;
    overflow-x: auto;
}

.courses-table {
    width: 100%;
    border-collapse: collapse;
    background: white !important;
    min-width: 1000px;
}

.courses-table thead {
    background: #f9fafb !important;
}

.courses-table th {
    padding: 16px !important;
    text-align: left;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #6b7280 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-bottom: 1px solid #e5e7eb !important;
    background: #f9fafb !important;
}

.courses-table td {
    padding: 12px 16px !important;
    font-size: 14px !important;
    color: rgb(113,121,133) !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: white !important;
}

.courses-table tbody tr:hover {
    background: #f9fafb !important;
}

.courses-table tbody tr:last-child td {
    border-bottom: none;
}

/* v0: Desktop table only on md+, Mobile cards only below md */
.courses-desktop-only {
    display: none;
}
@media (min-width: 768px) {
    .courses-desktop-only {
        display: block;
    }
}

/* v0 Mobile Card View - EXACT boxes design (md:hidden) */
.courses-mobile-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 200px;
}
@media (min-width: 768px) {
    .courses-mobile-cards {
        display: none !important;
    }
}

.course-mobile-card {
    background: white;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s;
}
.course-mobile-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.course-mobile-card-top {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.course-mobile-card-thumb {
    width: 80px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
}
.course-mobile-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.course-mobile-card-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #9ca3af;
}

.course-mobile-card-info {
    flex: 1;
    min-width: 0;
}

.course-mobile-card-title {
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 4px 0;
    color: rgb(113, 121, 133);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-mobile-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: rgb(113, 121, 133);
}

.course-mobile-card-bottom {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
}
@media (min-width: 640px) {
    .course-mobile-card-bottom {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.course-mobile-card-stats {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: rgb(113, 121, 133);
}
.course-mobile-card-stats .font-medium {
    font-weight: 500;
}

.course-mobile-card-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
@media (min-width: 640px) {
    .course-mobile-card-actions {
        gap: 6px;
    }
}

/* v0 mobile: w-7 h-7 = 28px buttons */
.action-btn-sm {
    width: 28px !important;
    height: 28px !important;
}
.action-btn-sm svg {
    width: 14px !important;
    height: 14px !important;
}

/* v0: text-sm font-medium, color rgb(113,121,133) */
.course-title-cell {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: rgb(113, 121, 133) !important;
}

/* Override agentic-os rule that hides .main-content-area img – show course thumbnails, catalog images, about course sidebar image, about video image, and schedule details course image */
.main-content-area .course-thumbnail-cell img,
.main-content-area .course-thumbnail-wrap img,
.main-content-area .course-thumbnail,
.main-content-area .course-mobile-card-thumb img,
.main-content-area .catalog-course-image,
.main-content-area .catalog-course-image-wrap img,
.main-content-area .course-sidebar-image img,
.main-content-area .academy-video-container img,
.main-content-area .academy-video-thumbnail,
.main-content-area .academy-sidebar img,
.main-content-area .schedule-details-page .v0-upload-preview-box img,
.main-content-area .schedule-details-page .schedule-details-image-preview img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;
    position: static !important;
    left: auto !important;
}
.main-content-area .academy-video-container .academy-video-thumbnail {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.main-content-area .course-thumbnail-cell .course-thumbnail,
.main-content-area .course-thumbnail-wrap .course-thumbnail {
    width: 96px !important;
    height: 64px !important;
    min-width: 96px !important;
    min-height: 64px !important;
}
.main-content-area .course-mobile-card-thumb img {
    width: 100% !important;
    height: 100% !important;
}
.main-content-area .catalog-course-image-wrap .catalog-course-image,
.main-content-area .catalog-course-image-wrap img {
    width: 100% !important;
    height: 100% !important;
}
.main-content-area .catalog-course-image.catalog-course-image-failed {
    display: none !important;
}
.main-content-area .course-thumbnail-wrap .course-thumbnail,
.main-content-area .course-thumbnail-wrap img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

.course-thumbnail-cell {
    width: 96px;
    min-width: 96px;
    min-height: 64px;
    vertical-align: middle;
}

.course-thumbnail {
    display: block !important;
    width: 96px !important;
    height: 64px !important;
    min-width: 96px !important;
    min-height: 64px !important;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    aspect-ratio: 16 / 9;
    visibility: visible !important;
    opacity: 1 !important;
}

.course-thumbnail-placeholder {
    width: 96px;
    height: 64px;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    font-size: 11px;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
}

.course-thumbnail-wrap {
    display: block;
    width: 96px;
    height: 64px;
    min-width: 96px;
    min-height: 64px;
    position: relative;
}

.course-thumbnail-loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    z-index: 2;
}

.course-thumbnail-wrap .course-thumbnail,
.course-thumbnail-wrap .course-thumbnail-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 96px;
    height: 64px;
}

.course-thumbnail-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e7eb;
    border-top-color: #00A3EC;
    border-radius: 50%;
    animation: course-thumbnail-spin 0.7s linear infinite;
}

@keyframes course-thumbnail-spin {
    to { transform: rotate(360deg); }
}

.course-mobile-card-thumb .course-thumbnail-loading {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

@media (max-width: 767px) {
    .course-mobile-cards .course-thumbnail-loading,
    .main-content-area .course-thumbnail-loading {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

.course-mobile-card-thumb .course-thumbnail-spinner {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.course-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
}

.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    padding: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.action-btn-copy {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
}

.action-btn-copy:hover {
    background: #c7d2fe !important;
}

/* v0: bg #F0F4F8, icon #2563EB, hover:bg-blue-100 */
.action-btn-info,
.action-btn-edit,
.action-btn-view,
.action-btn-details,
.action-btn-prompt {
    background: #F0F4F8 !important;
    color: #2563EB !important;
}

.action-btn-info:hover,
.action-btn-edit:hover,
.action-btn-view:hover,
.action-btn-details:hover,
.action-btn-prompt:hover {
    background: #dbeafe !important;
}

/* v0 delete: bg #F5F5F5, icon gray-500 */
.action-btn-delete {
    background: #F5F5F5 !important;
    color: #6b7280 !important;
}

.action-btn-delete:hover {
    background: #e5e7eb !important;
}

/* Tooltip for action buttons (same as agentic-os) */
.action-btn[data-tooltip] {
    position: relative;
}

/* Course table + mobile card actions: use TooltipFlowbite (js/tooltip-flowbite.js) – hide CSS tooltip */
.course-actions .action-btn[data-tooltip]:hover::after,
.course-actions .action-btn[data-tooltip]:focus-visible::after,
.course-actions .action-btn[data-tooltip]:hover::before,
.course-actions .action-btn[data-tooltip]:focus-visible::before,
.course-mobile-card-actions .action-btn[data-tooltip]:hover::after,
.course-mobile-card-actions .action-btn[data-tooltip]:focus-visible::after,
.course-mobile-card-actions .action-btn[data-tooltip]:hover::before,
.course-mobile-card-actions .action-btn[data-tooltip]:focus-visible::before {
    content: none;
    display: none;
}

.action-btn[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    padding: 6px 10px;
    background: #1f2937;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    pointer-events: none;
    z-index: 1000;
}

.action-btn[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 2px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
    pointer-events: none;
    z-index: 1001;
}

.action-btn-copy svg,
.action-btn-info svg,
.action-btn-edit svg,
.action-btn-view svg,
.action-btn-delete svg,
.action-btn-details svg,
.action-btn-prompt svg {
    stroke: currentColor !important;
    fill: none !important;
}

/* Delete Course Modal – same as Users / Edit section: fixed header & footer, scrollable body, safe area, max-width 420px */
.delete-course-dialog-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s, visibility 0.2s;
}
.delete-course-dialog-modal.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.delete-course-dialog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.delete-course-dialog-content {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: min(85vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 2rem));
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}
.delete-course-dialog-header {
    flex-shrink: 0;
    padding: max(24px, env(safe-area-inset-top, 0px)) 24px 24px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.delete-course-dialog-header-text {
    flex: 1;
    min-width: 0;
}
.delete-course-dialog-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--sidebar-foreground, #4b5563);
}
.delete-course-dialog-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0.125rem 0 0 0;
}
.delete-course-dialog-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.delete-course-dialog-close:hover {
    color: #374151;
}
.delete-course-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    background-color: #f9fafb;
    border-top: 1px solid #f3f4f6;
    -webkit-overflow-scrolling: touch;
}
.delete-course-dialog-text {
    font-size: 14px;
    color: #374151;
    line-height: 1.625;
    margin: 0 0 16px 0;
}
.delete-course-dialog-name {
    font-weight: 600;
    color: #111827;
}
.delete-course-dialog-id-wrap {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.25;
    margin: 0;
}
.delete-course-dialog-id {
    display: inline-block;
    margin-top: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #1f2937;
}
.delete-course-dialog-footer {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e5e7eb;
    background: #fff;
}
.delete-course-dialog-btn {
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    font-family: inherit;
}
.delete-course-dialog-btn-cancel {
    background: white;
    color: #374151;
    border: 1px solid #d1d5db;
}
.delete-course-dialog-btn-cancel:hover {
    background: #f9fafb;
}
.delete-course-dialog-btn-delete {
    background: linear-gradient(to right, #00A3EC, #6988FF);
    color: white;
    border: none;
}
.delete-course-dialog-btn-delete:hover {
    opacity: 0.9;
}
@media (max-width: 767px) {
    .delete-course-dialog-modal {
        align-items: stretch;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .delete-course-dialog-content {
        margin: auto 0;
        flex-shrink: 0;
    }
}

/* All courses loading: fill viewport, no scroll, loading message centered */
.main-content-area:has(.courses-page-container.courses-page-loading) {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.courses-page-container.courses-page-loading {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    padding-bottom: 24px !important;
}

.courses-page-container.courses-page-loading .courses-page-header {
    flex-shrink: 0;
}

.courses-page-container.courses-page-loading .no-courses-message {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 0 !important;
}

/* Mobile: no full-screen loading overlay – normal layout, no grey fill, loading block fully removed */
@media (max-width: 767px) {
    .main-content-area:has(.courses-page-container.courses-page-loading) {
        overflow: auto !important;
        display: block !important;
    }
    .courses-page-container.courses-page-loading {
        display: block !important;
        flex: none !important;
        min-height: 0 !important;
    }
    .courses-page-container.courses-page-loading .no-courses-message {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        left: -9999px !important;
        pointer-events: none !important;
    }
}

.no-courses-message {
    text-align: center;
    padding: 48px;
    color: var(--text-secondary);
}

.no-courses-message svg {
    margin: 0 auto 16px;
    opacity: 0.5;
}

/* Common Message Styles */
.error-message {
    background: #fee2e2;
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.success-message {
    background: #d1fae5;
    color: #065f46;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
}

.purchase-success-message {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.purchase-canceled-message {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.empty-state-icon {
    margin: 0 auto 16px;
    opacity: 0.5;
}

.course-card-image-placeholder.hidden {
    display: none;
}

.course-thumbnail-placeholder.hidden {
    display: none;
}

.no-courses-title {
    font-size: 18px;
    margin-bottom: 8px;
    color: #020817;
}

.no-courses-text {
    font-size: 14px;
    color: var(--text-secondary);
}

.price-free {
    color: var(--text-muted);
}

/* ============================================
   PROFILE PAGE
   ============================================ */

.profile-page-container {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.profile-page-header {
    margin-bottom: 32px;
}

.profile-page-title {
    font-size: 28px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}

.profile-page-subtitle {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.profile-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

.profile-message-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.profile-message-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.profile-form-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.profile-form-card + .profile-form-card {
    margin-top: 2rem;
}

.profile-password-intro {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin: 0 0 1.25rem 0;
}

.profile-section-title {
    font-size: 18px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e7eb;
}

.profile-form-card .profile-section-title:nth-of-type(2) {
    margin-top: 28px;
}

.profile-section-title + .profile-form-grid {
    margin-top: 0;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 640px) {
    .profile-form-grid {
        grid-template-columns: 1fr;
    }
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-field-full {
    grid-column: 1 / -1;
}

.profile-field-logo {
    grid-column: 1 / -1;
}

.profile-domain-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}

.profile-domain-input-wrap .profile-domain-input {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    flex: 1;
    min-width: 0;
}

.profile-domain-suffix {
    padding: 10px 14px;
    font-size: 15px;
    color: #6b7280;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-left: none;
    border-radius: 0 8px 8px 0;
    white-space: nowrap;
}

.profile-form-grid-academia .profile-field-domain-wrap .profile-domain-input-wrap {
    max-width: 480px;
}

.profile-label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.profile-input {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.profile-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.profile-input:disabled {
    background: #ffffff;
    color: #6b7280;
    cursor: not-allowed;
}

.profile-logo-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    flex-wrap: wrap;
}

.profile-logo-preview {
    width: 120px;
    height: 120px;
    min-width: 120px;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.profile-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.profile-logo-placeholder {
    font-size: 13px;
    color: #9ca3af;
}

.profile-logo-upload {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.profile-file-input {
    font-size: 14px;
    color: #374151;
}

.profile-file-input::file-selector-button {
    padding: 8px 16px;
    margin-right: 12px;
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
}

.profile-file-input::file-selector-button:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}

.profile-file-hint {
    font-size: 13px;
    color: #6b7280;
}

.profile-form-actions {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.profile-btn-primary {
    background: #3b82f6;
    color: #ffffff;
}

.profile-btn-primary:hover {
    background: #2563eb;
}

.profile-subscription-card {
    margin-top: 24px;
}
.profile-subscription-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.profile-subscription-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
}
.profile-subscription-label {
    width: 140px;
    flex-shrink: 0;
    font-weight: 500;
    color: #6b7280;
    font-size: 0.875rem;
}
.profile-subscription-value {
    color: #111827;
    font-size: 0.875rem;
}
.profile-subscription-active {
    color: #10b981;
    font-weight: 600;
}

/* ============================================
   EDIT CONTENT (v0-style) - Full bleed, match v0 Tailwind
   ============================================ */
.edit-content-v0 {
    margin: -24px;
    padding: 1rem max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left));
    min-height: 100%;
    display: block;
    position: relative;
    overflow-x: hidden;
}
@media (min-width: 640px) {
    .edit-content-v0 {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}
@media (min-width: 768px) {
    .edit-content-v0 {
        padding-right: 5rem;
    }
}
.edit-content-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    display: block;
    position: relative;
}
.edit-content-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}
.edit-content-header-row1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.edit-content-header-left {
    min-width: 0;
    flex: 1;
}
.edit-content-header-right {
    flex-shrink: 0;
}
.edit-content-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: #6b7280;
    word-break: break-word;
}
.edit-content-subtitle {
    font-size: 0.875rem;
    color: #717985;
    margin: 0;
}
 .edit-content-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.625rem;
}
/* v0 button variants */
 .edit-content-btn-copy-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-out;
    box-sizing: border-box;
}
 .edit-content-btn-copy-link:hover {
    background: #f9fafb;
    border-color: #d1d5db;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.edit-content-copy-link-text {
    display: none;
}
@media (max-width: 639px) {
    .edit-content-btn-copy-link {
        margin-right: 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}
@media (min-width: 640px) {
    .edit-content-copy-link-text {
        display: inline;
    }
}
/* Action buttons (Add Section / Course Outline / Create or Modify Academy) – unified blue outline style */
.edit-content-btn-add-section,
.edit-content-btn-outline-blue,
.edit-content-btn-create-academy,
.edit-content-btn-create-academy-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563EB;
    background: transparent;
    border: 1px solid #2563EB;
    border-radius: 8px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease-out;
}
.edit-content-btn-add-section:hover,
.edit-content-btn-outline-blue:hover,
.edit-content-btn-create-academy:hover,
.edit-content-btn-create-academy-outline:hover {
    background: #EFF6FF;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.edit-content-btn-view-academy {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
 .edit-content-btn-view-academy:hover {
    background: #f9fafb;
}
.edit-content-btn-view-course {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    height: 2.25rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    border: none;
    border-radius: 8px;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.2s ease-out;
}
.edit-content-btn-view-course:hover {
    opacity: 0.9;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.edit-content-btn-gray {
    color: #374151 !important;
    background: transparent !important;
    border: 1px solid #d1d5db !important;
}
.edit-content-btn-gray:hover {
    background: #f9fafb !important;
}
.edit-content-btn-remove {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
}
.edit-content-btn-remove:hover {
    color: #00A3EC;
}
.edit-content-academy-logo-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    background: #F0F2F5;
    border-radius: 12px;
}
@media (min-width: 640px) {
    .edit-content-academy-logo-row {
        flex-direction: row;
        justify-content: flex-start;
    }
}
.edit-content-academy-logo-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.edit-content-academy-logo-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
}
.edit-content-academy-logo-wrap:has(img[src]) {
    cursor: grab;
}
.edit-content-academy-logo-wrap.logo-dragging {
    cursor: grabbing;
}
.edit-content-academy-logo-placeholder {
    width: 40px;
    height: 40px;
    color: #9ca3af;
}
.edit-content-academy-logo-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
@media (min-width: 640px) {
    .edit-content-academy-logo-btns {
        justify-content: flex-start;
    }
}
.edit-content-view-academy-field {
    margin-bottom: 1rem;
}
.edit-content-view-academy-field .edit-content-label {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.25rem;
}
.edit-content-view-academy-field p {
    margin: 0;
    font-size: 0.875rem;
}
.edit-content-view-academy-value {
    margin: 0;
    font-size: 0.875rem;
    color: var(--sidebar-foreground, #111827);
}
.edit-content-view-academy-value-multiline {
    white-space: pre-wrap;
    word-break: break-word;
}
.edit-content-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-out;
}
.edit-content-btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}
.edit-content-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563EB;
    background: transparent;
    border: 1px solid #2563EB;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.edit-content-btn-outline:hover {
    background: #EFF6FF;
}
.edit-content-icon {
    flex-shrink: 0;
    margin-right: 0px;
}
/* Publish button: keep spinner icon same size as default icon */
.edit-content-btn-publish .edit-content-icon,
.edit-content-btn-publish svg {
    width: 16px;
    height: 16px;
}
.edit-content-error {
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #b91c1c;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
}
.edit-content-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.edit-content-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.edit-content-tab {
    flex-shrink: 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.edit-content-tab:hover {
    color: #374151;
    background: #f9fafb;
}
.edit-content-tab.is-active {
    color: #2563EB;
    background: #f3f4f6;
    border-bottom-color: #2563EB;
    border-radius: 8px 8px 0 0;
}
.edit-content-body {
    min-width: 0;
    display: block;
    position: relative;
}
.edit-content-empty {
    padding: 2rem 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: #6b7280;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}
.edit-content-section {
    margin-bottom: 1.5rem;
    display: block;
    position: relative;
    clear: both;
}
.edit-content-section-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    min-height: 49px;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}
.edit-content-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin: 0;
    color: #6b7280;
}
.edit-content-pub-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.125rem 0.4rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.25;
}
.edit-content-tab .edit-content-pub-badge {
    margin-left: 0.25rem;
}
.edit-content-pub-badge--draft-only {
    color: #fff;
    background: #ea580c;
}
.edit-content-pub-badge--changes {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.55rem 0.25rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: #374151;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.edit-content-pub-badge--changes .edit-content-pub-badge__icon {
    flex-shrink: 0;
    color: #4b5563;
}
.edit-content-pub-badge--changes .edit-content-pub-badge__text {
    line-height: 1.2;
    white-space: nowrap;
}
.edit-content-block-missing-hint {
    margin: 0.5rem 0 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #92400e;
}
.edit-content-draft-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.125rem 0.4rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff;
    background: #ea580c;
    border-radius: 4px;
    vertical-align: middle;
    line-height: 1.25;
}
.edit-content-tab .edit-content-draft-badge {
    margin-left: 0.25rem;
}
.edit-content-section-btns {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* Section / subsection / unit / block icon buttons: square, rounded-lg, size by level */
.edit-content-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-out;
}
/* Section level: 36px */
.edit-content-section-head .edit-content-section-btns .edit-content-icon-btn {
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    min-height: 2.25rem;
}
/* Subsection level: 32px */
.edit-content-subsection-head .edit-content-section-btns .edit-content-icon-btn {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    min-height: 2rem;
}
/* Unit level: 28px */
.edit-content-unit-head .edit-content-section-btns .edit-content-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}
/* Block level: 28px */
.edit-content-block-head .edit-content-icon-btn {
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    min-height: 1.75rem;
}

.edit-content-icon-btn:hover:not(:disabled) {
    color: #2563EB;
    background: rgba(239, 246, 255, 0.8);
    border-color: #93c5fd;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.edit-content-icon-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgba(37, 99, 235, 0.3);
}

.edit-content-icon-sm {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
/* Section level: slightly larger icon */
.edit-content-section-head .edit-content-section-btns .edit-content-icon-sm {
    width: 16px;
    height: 16px;
}

/* Generate: same default/hover as Edit; spins when loading */
/* RotateCw: w-4 h-4 (16px) at all levels */
.edit-content-generate-btn .edit-content-icon-sm {
    width: 16px;
    height: 16px;
}
.edit-content-generate-btn.is-generating .edit-content-icon-sm {
    animation: spin 1s linear infinite;
}

.edit-content-generate-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}
.edit-content-generate-btn:disabled:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

@media (max-width: 639px) {
    .edit-content-section-head,
    .edit-content-subsection-head,
    .edit-content-unit-head {
        flex-wrap: nowrap;
        align-items: flex-start;
    }
    .edit-content-section-title,
    .edit-content-subsection-title,
    .edit-content-unit-title {
        min-width: 0;
        flex: 1 1 0%;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
    .edit-content-section-btns {
        margin-left: auto;
        flex-shrink: 0;
    }
}

.edit-content-toast {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #00A3EC 0%, #6988FF 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 163, 236, 0.3);
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, transform 0.25s;
}
.edit-content-toast.edit-content-toast-loading {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.edit-content-toast-spinner {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    display: block;
    transform-origin: center;
    animation: spin 0.8s linear infinite;
}
.edit-content-toast.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.edit-content-add-block-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #2563EB;
    background: transparent;
    border: 1px solid #93c5fd;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.edit-content-add-block-btn:hover {
    background: #EFF6FF;
}
.edit-content-subsection {
    padding-top: 1rem;
    padding-bottom: 0;
    border-bottom: 1px solid #f3f4f6;
    display: block;
    position: relative;
    clear: both;
}
.edit-content-subsection:last-of-type {
    border-bottom: none;
}
.edit-content-subsection-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.edit-content-subsection-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: #6b7280;
}
.edit-content-unit {
    padding-left: 0.75rem;
    margin-left: 0;
    margin-bottom: 1rem;
    border-left: 2px solid #e5e7eb;
    display: block;
    position: relative;
    clear: both;
}
.edit-content-unit:last-child {
    margin-bottom: 0;
}
@media (min-width: 640px) {
    .edit-content-unit {
        padding-left: 1.25rem;
    }
}
.edit-content-unit-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
    margin-top: 0;
}
.edit-content-unit-title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    color: #6b7280;
}
.edit-content-block {
    margin-bottom: 1rem;
    display: block;
    position: relative;
    clear: both;
}
.edit-content-block:last-child {
    margin-bottom: 0;
}
.edit-content-block-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.edit-content-block-title {
    font-weight: 500;
    color: #6b7280;
}
.edit-content-block-card {
    padding: 1rem;
    font-size: 0.875rem;
    color: #1f2937;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    display: block;
    overflow-x: auto;
    overflow-y: visible;
    word-wrap: break-word;
}
.edit-content-block-html {
    line-height: 1.6;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
    color: #6b7280;
}
.edit-content-block-html :first-child {
    margin-top: 0;
}
.edit-content-block-html :last-child {
    margin-bottom: 0;
}
.edit-content-block-html p {
    margin: 0 0 0.75em;
    max-width: 100%;
}
.edit-content-block-html p:last-child {
    margin-bottom: 0;
}
/* CKEditor / edX: <div> seguidos (modo bloque) suelen ir sin margen entre sí */
.edit-content-block-html > div + div,
.edit-content-block-html > div > div + div {
    margin-top: 0.75em;
}
.edit-content-block-html table div + div,
.edit-content-block-html td div + div,
.edit-content-block-html th div + div {
    margin-top: 0;
}
.edit-content-block-html ul,
.edit-content-block-html ol {
    margin: 0 0 0.75em;
    padding-left: 1.5em;
    max-width: 100%;
}
.edit-content-block-html li {
    max-width: 100%;
}
.edit-content-block-html blockquote {
    margin: 0 0 0.75em;
    padding-left: 1em;
    border-left: 3px solid #e5e7eb;
    color: #4b5563;
}
.edit-content-block-html h1,
.edit-content-block-html h2,
.edit-content-block-html h3,
.edit-content-block-html h4,
.edit-content-block-html h5,
.edit-content-block-html h6 {
    margin: 0.75em 0 0.5em;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}
.edit-content-block-html h1:first-child,
.edit-content-block-html h2:first-child,
.edit-content-block-html h3:first-child,
.edit-content-block-html h4:first-child,
.edit-content-block-html h5:first-child,
.edit-content-block-html h6:first-child {
    margin-top: 0;
}
.edit-content-block-html div {
    max-width: 100%;
}
/* Embeds (YouTube, etc.): no envolver iframe en <p>; el editor usa este div */
.edit-content-block-html .edit-content-html-embed-wrap {
    margin: 0.75em 0;
    max-width: 100%;
}
.edit-content-block-html .edit-content-html-embed-wrap iframe {
    max-width: 100%;
    vertical-align: middle;
}
.edit-content-block-quiz {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
}
/* OLX multiple choice / problem preview — same structure as course-view .cv-problem-native */
.edit-content-block-quiz .cv-block {
    margin-bottom: 0;
}
.edit-content-block-quiz .cv-problem-native {
    box-sizing: border-box;
    max-width: 100%;
    padding: 24px 28px 28px;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-family: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
    color: #333;
}
.edit-content-block-quiz .cv-problem-native__title {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 6px;
    padding: 0;
    color: #292929;
    letter-spacing: -0.01em;
}
.edit-content-block-quiz .cv-problem-native__stem {
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    color: #292929;
    margin: 0 0 22px;
}
.edit-content-block-quiz .cv-problem-native__stem p {
    margin: 0 0 0.75em;
}
.edit-content-block-quiz .cv-problem-native__stem p:last-child {
    margin-bottom: 0;
}
.edit-content-block-quiz .cv-problem-native__choices {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
.edit-content-block-quiz .cv-problem-native__choice {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0 0 12px;
    padding: 14px 16px;
    box-sizing: border-box;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
    line-height: 1.45;
    color: #292929;
}
.edit-content-block-quiz .cv-problem-native__choice:last-child {
    margin-bottom: 0;
}
.edit-content-block-quiz .cv-problem-native__form {
    margin: 0;
    padding: 0;
}
.edit-content-block-quiz .cv-problem-native__choice-label {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.edit-content-block-quiz .cv-problem-native__input--radio,
.edit-content-block-quiz .cv-problem-native__input--checkbox {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: #292929;
    cursor: pointer;
}
.edit-content-block-quiz .cv-problem-native__select-wrap {
    margin: 0 0 16px;
    max-width: 100%;
}
.edit-content-block-quiz .cv-problem-native__select-label {
    display: block;
    font-size: 0.875rem;
    color: #707070;
}
.edit-content-block-quiz .cv-problem-native__select-hint {
    display: block;
    margin-bottom: 8px;
}
.edit-content-block-quiz .cv-problem-native__select {
    width: 100%;
    max-width: 400px;
    padding: 10px 12px;
    font-size: 1rem;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    color: #292929;
}
.edit-content-block-quiz .cv-problem-native__actions {
    margin-top: 20px;
    padding-top: 4px;
}
.edit-content-block-quiz .cv-problem-native__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 28px;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background: #0075b4;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
}
.edit-content-block-quiz .cv-problem-native__submit:hover {
    background: #005f8f;
}
.edit-content-block-quiz .cv-problem-native__choice-text {
    flex: 1 1 auto;
    min-width: 0;
}
.edit-content-block-quiz .cv-problem-native__choice-text p {
    margin: 0;
}
.edit-content-block-quiz .cv-problem-native__input-row {
    margin: 0;
}
.edit-content-block-quiz .cv-problem-native__input-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 1rem;
    color: #292929;
}
.edit-content-block-quiz .cv-problem-native__input-hint {
    font-weight: 500;
    color: #707070;
    font-size: 0.875rem;
}
.edit-content-block-quiz .cv-problem-native__input {
    max-width: 320px;
    padding: 10px 14px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    font-size: 1rem;
    background: #fafafa;
    color: #767676;
}
.edit-content-block-quiz .cv-problem-state {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 0 0 12px;
    padding: 8px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb;
    color: #374151;
    font-size: 0.85rem;
    line-height: 1.35;
}
.edit-content-block-quiz .cv-problem-state__item strong {
    color: #111827;
    font-weight: 600;
}
.edit-content-block-quiz .cv-problem-debug {
    margin-top: 10px;
    border: 1px dashed #d1d5db;
    border-radius: 8px;
    background: #fff;
}
.edit-content-block-quiz .cv-problem-debug__summary {
    cursor: pointer;
    padding: 8px 10px;
    font-size: 0.82rem;
    color: #4b5563;
    font-weight: 600;
    user-select: none;
}
.edit-content-block-quiz .cv-problem-debug__pre {
    margin: 0;
    padding: 10px;
    max-height: 220px;
    overflow: auto;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #111827;
    font-size: 0.78rem;
    line-height: 1.35;
}
.edit-content-block-quiz--fallback .edit-content-block-quiz-fallback-label {
    font-weight: 600;
    margin: 0 0 8px;
    color: #374151;
}
.edit-content-block-quiz--fallback .edit-content-block-quiz-fallback-body {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4b5563;
}
.edit-content-block-video {
    margin: 0;
}
.edit-content-block-video-id {
    margin: 0 0 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
}
.edit-content-block-video-code {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1f2937;
    background: #f3f4f6;
    padding: 0.15em 0.45em;
    border-radius: 4px;
}
/* Embed clásico YouTube 560×315 (16:9). aspect-ratio fija la altura al ancho real del caja (no al padre). */
.edit-content-block-video-wrap {
    position: relative;
    width: 560px;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
    background: #000;
    border: 1px solid #e5e7eb;
    box-sizing: border-box;
}
.edit-content-block-video-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.edit-content-block-meta {
    margin: 0;
    font-weight: 500;
    color: #4b5563;
}
.edit-content-block-card--syllabus-broken {
    border-color: #f5a5a5;
    background: #fff8f8;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12);
}
.edit-content-block--syllabus-broken .edit-content-block-title {
    color: #991b1b;
}
.edit-content-block-missing {
    margin: 0;
}
.edit-content-block-missing-title {
    margin: 0 0 0.35rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #b91c1c;
}
.edit-content-block-missing-detail {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    font-weight: 400;
    color: #7f1d1d;
}
.edit-content-block-missing-detail strong {
    font-weight: 600;
}
.edit-content-add-sub,
.edit-content-add-unit-wrap {
    margin-top: 0.5rem;
    margin-left: 0.5rem;
}
.edit-content-add-sub-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563EB;
    background: transparent;
    border: 1px solid #2563EB;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}
.edit-content-add-sub-btn:hover {
    background: #EFF6FF;
}
.edit-content-footer {
    margin-top: 0;
    border-top: 1px solid #e5e7eb;
    padding-bottom: 1.5rem;
}
@media (max-width: 767px) {
    .edit-content-footer {
        padding-bottom: calc(2rem + 80px + env(safe-area-inset-bottom, 0px));
    }
}
.edit-content-footer-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}
.edit-content-footer .edit-content-btn-primary {
    margin-right: 0;
}
.edit-content-back {
    color: #2563EB;
    text-decoration: none;
    font-size: 0.875rem;
}
.edit-content-back:hover {
    text-decoration: underline;
}

/* Create course step3: image generation success message - prevent text overflow */
#step3-image-generation-success {
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    min-width: 0;
}
#step3-image-success-text {
    word-break: break-all;
    display: inline-block;
    max-width: 100%;
}

/* Shared Create Academy form (create-course-execute + edit_content modal) */
.create-academy-logo-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 16px;
    margin-bottom: 1rem;
    background: #F0F2F5;
    border-radius: 12px;
    box-sizing: border-box;
}
@media (min-width: 640px) {
    .create-academy-logo-row {
        flex-direction: row;
        justify-content: flex-start;
    }
}
.create-academy-logo-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.create-academy-logo-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    border-radius: 50%;
}
.create-academy-logo-wrap:has(img[src]) {
    cursor: grab;
}
.create-academy-logo-wrap.logo-dragging {
    cursor: grabbing;
}
.create-academy-logo-placeholder {
    width: 40px;
    height: 40px;
    color: #9ca3af;
}
.create-academy-logo-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}
@media (min-width: 640px) {
    .create-academy-logo-btns {
        justify-content: flex-start;
    }
}
.create-academy-btn-outline {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    color: #374151;
    background: white;
    border-radius: 8px;
    cursor: pointer;
}
.create-academy-btn-outline:hover {
    background: #f9fafb;
}
.create-academy-btn-remove {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    cursor: pointer;
}
.create-academy-btn-remove:hover {
    color: #00A3EC;
}
.create-academy-field {
    margin-bottom: 1rem;
    position: relative;
}
.create-academy-label {
    display: block;
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 0.375rem;
}
.create-academy-input {
    width: 100%;
    height: 44px;
    padding: 0 12px;
    font-size: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.create-academy-input:focus {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 3px rgba(0, 163, 236, 0.15);
}
.create-academy-textarea {
    width: 100%;
    min-height: 60px;
    max-height: 60px;
    padding: 8px 12px 24px;
    font-size: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    resize: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.create-academy-textarea:focus {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 3px rgba(0, 163, 236, 0.15);
}
.create-academy-word-count {
    position: absolute;
    bottom: 8px;
    right: 12px;
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

.create-academy-input::placeholder,
.create-academy-textarea::placeholder {
    font-size: 0.875rem;
    color: #6b7280;
}
.create-academy-domain-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.create-academy-domain-wrap:focus-within {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 3px rgba(0, 163, 236, 0.15);
}
.create-academy-domain-wrap .create-academy-input {
    border: none;
    border-radius: 0;
    flex: 1;
    min-width: 0;
}
.create-academy-domain-wrap .create-academy-input:focus {
    box-shadow: none;
}
.create-academy-domain-suffix {
    padding: 0 12px;
    font-size: 0.875rem;
    color: #6b7280;
    background: #f9fafb;
    white-space: nowrap;
}
.create-academy-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    margin: 0.25rem 0 0;
}

/* Modals */
/* Above sidebar toggle (1001) so Set up your Academy and other dialogs stack on top */
.edit-content-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}
.edit-content-modal.is-open {
    display: flex;
}
.edit-content-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
}
.edit-content-modal-box {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.25rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
}

/* Safari mobile: keep modals inside viewport and safe area, prevent top/bottom overflow */
@media (max-width: 767px) {
    .edit-content-modal {
        padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
        align-items: stretch;
        justify-content: center;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .edit-content-modal-box {
        max-height: min(90vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem));
        margin: auto 0;
        flex-shrink: 0;
        padding-left: max(1.25rem, env(safe-area-inset-left));
        padding-right: max(1.25rem, env(safe-area-inset-right));
    }
    .edit-content-edit-section-body {
        overflow-x: visible;
    }
    .edit-content-edit-section-body .edit-content-input[type="datetime-local"],
    .edit-content-edit-section-body input[type="datetime-local"] {
        padding-left: 1rem;
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
        min-height: 2.5rem;
        text-align: left !important;
    }
    .edit-content-modal-box[data-active-panel="edit-section"],
    .edit-content-modal-box[data-active-panel="add-section"],
    .edit-content-modal-box[data-active-panel="edit-subsection"],
    .edit-content-modal-box[data-active-panel="delete-section"],
    .edit-content-modal-box[data-active-panel="delete-subsection"] {
        max-height: min(85vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem));
    }
    .edit-content-modal-box-edit-block,
    .edit-content-modal-box-edit-unit,
    .edit-content-modal-box-academy {
        max-height: min(85vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem));
    }
    .edit-content-modal-box-outline {
        max-height: min(70vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 2rem));
    }
    .edit-content-edit-section-body {
        max-height: min(55vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 12rem));
    }
}
.edit-content-modal-box-wide {
    max-width: 560px;
}
.edit-content-modal-box-outline {
    width: 100%;
    max-width: 800px;
    min-height: 70vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    overflow: hidden;
}
@media (max-width: 767px) {
    .edit-content-modal-box-outline {
        padding-top: max(1.25rem, env(safe-area-inset-top));
        padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
        padding-left: max(1.25rem, env(safe-area-inset-left));
        padding-right: max(1.25rem, env(safe-area-inset-right));
        /* Keep dialog inside viewport on mobile Safari (100vh can extend under browser chrome) */
        max-height: min(80vh, calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 4rem));
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}
@supports (height: 100dvh) {
    @media (max-width: 767px) {
        .edit-content-modal-box-outline {
            max-height: min(80vh, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 4rem));
        }
    }
}

/* Edit Section / Add Section panels: same dialog design (500px), fixed header/footer, scrollable body, consistent height */
.edit-content-modal-box[data-active-panel="edit-section"],
.edit-content-modal-box[data-active-panel="add-section"],
.edit-content-modal-box[data-active-panel="edit-subsection"],
.edit-content-modal-box[data-active-panel="delete-section"],
.edit-content-modal-box[data-active-panel="delete-subsection"] {
    max-width: 500px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.edit-content-modal-box[data-active-panel="edit-section"] #edit-content-syllabus-panel-edit-section,
.edit-content-modal-box[data-active-panel="add-section"] #edit-content-syllabus-panel-add-section,
.edit-content-modal-box[data-active-panel="edit-subsection"] #edit-content-syllabus-panel-edit-subsection,
.edit-content-modal-box[data-active-panel="delete-section"] #edit-content-syllabus-panel-delete-section,
.edit-content-modal-box[data-active-panel="delete-subsection"] #edit-content-syllabus-panel-delete-subsection {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}
.edit-content-modal-box-edit-block,
.edit-content-modal-box-edit-unit,
.edit-content-modal-box-academy {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.edit-content-modal-box-academy {
    max-width: 500px;
    max-height: 85vh;
}
/* Edit block / edit unit: wide dialog + room for CKEditor (HTML) */
.edit-content-modal-box-edit-block,
.edit-content-modal-box-edit-unit {
    width: 100%;
    max-width: min(96vw, 1100px);
    max-height: min(92vh, 900px);
}
.edit-content-modal-box-edit-block .edit-content-edit-section-body,
.edit-content-modal-box-edit-unit .edit-content-edit-section-body {
    flex: 1 1 auto;
    max-height: min(78vh, calc(100vh - 9rem));
    min-height: 12rem;
}
.edit-content-edit-block-wysiwyg-wrap {
    min-height: 0;
    border-radius: 0.5rem;
    overflow: hidden;
}
.edit-content-modal-box-edit-block .edit-content-edit-block-wysiwyg-wrap .cke_chrome,
.edit-content-modal-box-edit-unit .edit-content-edit-block-wysiwyg-wrap .cke_chrome {
    border-radius: 0.5rem;
    border-color: #e5e7eb;
}
.edit-content-modal-box-edit-block .edit-content-edit-block-wysiwyg-wrap .cke_inner,
.edit-content-modal-box-edit-unit .edit-content-edit-block-wysiwyg-wrap .cke_inner {
    border-radius: 0.5rem;
}
/* Quill resetea margin/padding en bloques; create-course descripción */
.description-editor-wrapper .ql-editor {
    line-height: 1.6;
}
.description-editor-wrapper .ql-editor p,
.description-editor-wrapper .ql-editor h1,
.description-editor-wrapper .ql-editor h2,
.description-editor-wrapper .ql-editor h3,
.description-editor-wrapper .ql-editor h4,
.description-editor-wrapper .ql-editor h5,
.description-editor-wrapper .ql-editor h6,
.description-editor-wrapper .ql-editor blockquote,
.description-editor-wrapper .ql-editor pre {
    margin-top: 0;
    margin-bottom: 0.75em;
}
.description-editor-wrapper .ql-editor > *:last-child {
    margin-bottom: 0;
}
.description-editor-wrapper .ql-editor ul,
.description-editor-wrapper .ql-editor ol {
    margin-top: 0;
    margin-bottom: 0.75em;
    padding-left: 1.5em;
}
.description-editor-wrapper .ql-editor li {
    margin-bottom: 0.25em;
}
.description-editor-wrapper .ql-editor li:last-child {
    margin-bottom: 0;
}
.edit-content-modal-box-edit-block .edit-content-edit-block-html-textarea,
.edit-content-modal-box-edit-unit .edit-content-add-block-html-textarea {
    min-height: 280px;
    resize: vertical;
}
.edit-content-modal-box-edit-unit .edit-content-edit-section-subtitle {
    max-width: 42rem;
    line-height: 1.45;
}
.edit-content-modal-box-edit-unit .edit-content-edit-section-add-unit {
    margin-top: 0.25rem;
    padding-top: 1.25rem;
}
.edit-content-modal-box-edit-unit .edit-content-edit-section-add-unit-title {
    font-size: 0.9375rem;
    color: #374151;
}
.edit-content-modal-box-edit-unit .edit-content-panel-edit-section,
.edit-content-modal-box-edit-block .edit-content-panel-edit-section,
.edit-content-modal-box-academy .edit-content-panel-edit-section {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
    overflow: hidden;
    gap: 0;
}
.edit-content-panel-edit-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}
.edit-content-edit-section-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    padding-bottom: 15px;
    padding-right: 0.25rem;
    min-width: 0;
    overflow: visible;
}
.edit-content-edit-section-header-text {
    min-width: 0;
    flex: 1 1 auto;
}
.edit-content-edit-section-close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.edit-content-edit-section-close:hover {
    background: #f3f4f6;
    color: #374151;
}
.edit-content-edit-section-close svg {
    width: 20px;
    height: 20px;
}
.edit-content-edit-section-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 0.125rem 0;
}
.edit-content-edit-section-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}
.edit-content-edit-section-body {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 55vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    border-top: 1px solid #f3f4f6;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.edit-content-edit-section-body::-webkit-scrollbar {
    display: none;
}
/* Prevent flex children from shrinking so body scrolls instead of squashing content */
.edit-content-edit-section-body > * {
    flex-shrink: 0;
}
.edit-content-edit-section-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}
.edit-content-edit-section-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(113, 121, 133);
    margin: 0;
    display: block;
}
.edit-content-edit-section-input {
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
}
.edit-content-edit-section-body input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: 2.5rem;
    text-align: left !important;
}
.edit-content-edit-section-footer {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: none;
    min-width: 0;
}
.edit-content-edit-section-footer-left {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 0;
}
.edit-content-edit-section-footer-right {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    min-width: 0;
    flex-shrink: 0;
}
/* When footer has only one group (e.g. Add Section), push it to the right */
.edit-content-edit-section-footer .edit-content-edit-section-footer-right:only-child {
    margin-left: auto;
}
.edit-content-edit-section-add-unit {
    border-top: 1px solid #f3f4f6;
    padding-top: 1rem;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}
.edit-content-edit-section-add-unit-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
}
.edit-content-btn-add-unit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563EB;
    background: transparent;
    border: 1px solid #2563EB;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    align-self: flex-start;
}
.edit-content-btn-add-unit:hover {
    background: #EFF6FF;
}
.edit-content-add-block-quiz-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}
.edit-content-mcq-editor[hidden] {
    display: none !important;
}
.edit-content-mcq-editor:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    margin-bottom: 0.5rem;
}
.edit-content-mcq-answers-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: #1e3a5f;
}
.edit-content-mcq-answers-box {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
    padding: 0.75rem 0.75rem 0.5rem;
    min-width: 0;
}
.edit-content-mcq-answers-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.edit-content-mcq-answer-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 0.35rem 0.5rem;
}
.edit-content-mcq-answer-correct-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    cursor: pointer;
}
.edit-content-mcq-answer-correct {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: #16a34a;
    margin: 0;
    cursor: pointer;
}
.edit-content-mcq-answer-letter {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
    width: 1.25rem;
    text-align: center;
}
.edit-content-mcq-answer-text {
    flex: 1;
    min-width: 0;
    margin: 0;
}
.edit-content-mcq-answer-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: #9ca3af;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.edit-content-mcq-answer-remove:hover {
    color: #b91c1c;
    background: #fef2f2;
}
.edit-content-mcq-add-answer {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0.25rem 0 0;
    padding: 0.35rem 0;
    border: none;
    background: none;
    font-size: 0.875rem;
    font-weight: 500;
    color: #2563eb;
    cursor: pointer;
}
.edit-content-mcq-add-answer:hover {
    text-decoration: underline;
}
.edit-content-mcq-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.2rem;
    background: #f3f4f6;
    border-radius: 8px;
    align-self: flex-start;
}
.edit-content-mcq-tab {
    border: none;
    background: transparent;
    color: #4b5563;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.45rem 0.85rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.edit-content-mcq-tab:hover {
    color: #111827;
    background: rgba(255, 255, 255, 0.7);
}
.edit-content-mcq-tab.is-active {
    background: #fff;
    color: #1d4ed8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.edit-content-mcq-panel {
    min-width: 0;
}
.edit-content-mcq-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #6b7280;
}
.edit-content-mcq-hint strong {
    font-weight: 600;
    color: #374151;
}
.edit-content-btn-edit-section-delete {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.edit-content-btn-edit-section-delete:hover {
    background: #f3f4f6;
}
.edit-content-btn-edit-section-cancel {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}
.edit-content-btn-edit-section-cancel:hover {
    background: #f9fafb;
    text-decoration: none;
}
.edit-content-btn-edit-section-save {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.edit-content-btn-edit-section-save:hover {
    opacity: 0.9;
}

.edit-content-outline-header {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}
.edit-content-outline-header-text {
    min-width: 0;
    flex: 1 1 auto;
}
.edit-content-outline-header .edit-content-edit-section-close {
    flex-shrink: 0;
    margin: 0;
}
.edit-content-outline-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #6b7280;
    margin: 0;
    padding-right: 2rem;
}
.edit-content-outline-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 3px 0 0 0;
}
.edit-content-outline-body {
    flex: 1 1 auto;
    min-height: 55vh;
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0 0.5rem 0;
    padding-left: 0;
    padding-right: 0;
}
@media (max-width: 767px) {
    .edit-content-outline-body {
        min-height: 0;
        max-height: 60vh;
        -webkit-overflow-scrolling: touch;
    }
}
.edit-content-outline-empty {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}
.edit-content-outline-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: 1rem;
    background: #f9fafb;
    border-radius: 8px;
}
.edit-content-outline-section-group {
    position: relative;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.edit-content-outline-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 1rem 1rem 0.75rem 1.25rem;
    border-left: 4px solid #3B82F6;
    background: linear-gradient(to right, rgba(59, 130, 246, 0.06), transparent);
    border-radius: 10px 10px 0 0;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
@media (min-width: 640px) {
    .edit-content-outline-section { flex-wrap: nowrap; gap: 0.5rem; padding: 1rem 1.25rem; }
}
.edit-content-outline-subs {
    margin-top: 0;
    padding: 0.5rem 0 1rem 0;
    padding-left: 1.25rem;
    padding-right: 1rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #f3f4f6;
}
.edit-content-outline-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    margin-left: 0;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border-left: 3px solid #d1d5db;
    background: #fafafa;
    border-radius: 6px;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}
.edit-content-outline-units {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 0.35rem 0;
    padding-left: 1.75rem;
    border-left: 2px solid #e5e7eb;
}
.edit-content-outline-unit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.5rem;
    padding: 0.4rem 0.65rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8125rem;
}
@media (max-width: 639px) {
    .edit-content-outline-sub .edit-content-outline-name {
        flex-basis: 100%;
        overflow: visible;
        text-overflow: clip;
    }
}
@media (min-width: 640px) {
    .edit-content-outline-sub { flex-wrap: nowrap; gap: 0.5rem; padding: 0.625rem 1rem; }
    .edit-content-outline-subs { padding-left: 1.5rem; }
}
.edit-content-outline-footer {
    flex-shrink: 0;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.edit-content-outline-close-btn {
    width: 100%;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(to right, #00A3EC, #6988FF);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.edit-content-outline-close-btn:hover {
    opacity: 0.9;
}
@media (min-width: 640px) {
    .edit-content-outline-close-btn { width: auto; }
}
.edit-content-syllabus-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0.5rem;
}
.edit-content-syllabus-tab {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.edit-content-syllabus-tab:hover {
    color: #111827;
    background: #f3f4f6;
}
.edit-content-syllabus-tab.is-active {
    color: #2563EB;
    background: #EFF6FF;
}
.edit-content-syllabus-panel .edit-content-modal-title {
    margin-top: 0;
}
.edit-content-btn-danger {
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}
.edit-content-btn-danger:hover {
    background: #fef2f2 !important;
    color: #b91c1c !important;
    border-color: #f87171 !important;
}
.edit-content-btn-primary.edit-content-btn-danger {
    background: linear-gradient(to right, #00A3EC, #6988FF) !important;
    border: none !important;
    color: #fff !important;
}
.edit-content-btn-primary.edit-content-btn-danger:hover {
    opacity: 0.9;
}
.edit-content-modal-divider {
    border-top: 1px solid #e5e7eb;
    margin: 1rem 0;
}
.edit-content-modal-subtitle {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem 0;
}
.edit-content-btn-add-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    color: #2563EB;
    border-color: #93c5fd;
}
.edit-content-btn-add-inline:hover {
    background: #EFF6FF;
}
.edit-content-modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #6b7280;
}
.edit-content-modal-desc {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0 0 1rem 0;
}
.edit-content-modal-body {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.edit-content-modal-body .edit-content-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #717985;
    margin-bottom: 0.375rem;
    margin-top: 0.75rem;
}
.edit-content-modal-body .edit-content-label:first-child {
    margin-top: 0;
}
.edit-content-edit-block-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}
.edit-content-edit-block-name-row .edit-content-input {
    flex: 1 1 auto;
    min-width: 0;
}
.edit-content-btn-generate-block {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}
.edit-content-btn-generate-block:hover {
    background: #e5e7eb;
}
.edit-content-input,
.edit-content-select,
.edit-content-textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: #111827;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.edit-content-input:focus,
.edit-content-select:focus,
.edit-content-textarea:focus {
    outline: none;
    border-color: #00A3EC;
    box-shadow: 0 0 0 3px rgba(0, 163, 236, 0.15);
}
.edit-content-textarea {
    min-height: 120px;
    resize: vertical;
}
.edit-content-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}
.edit-content-modal-footer.edit-content-edit-section-footer {
    border-top: none;
}
.edit-content-delete-msg {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
    margin: 0 0 1rem 0;
}
.edit-content-outline-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    flex-shrink: 0;
    width: 4.5rem;
    white-space: nowrap;
}
@media (min-width: 640px) {
    .edit-content-outline-section .edit-content-outline-label { width: 4rem; }
    .edit-content-outline-sub .edit-content-outline-label { width: 5rem; }
}
.edit-content-outline-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #111827;
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
}
.edit-content-outline-section .edit-content-outline-name {
    font-weight: 500;
}
.edit-content-outline-sub .edit-content-outline-name {
    font-weight: 400;
}

/* Academy Share Dropdown */
.academy-share-wrap {
    position: relative;
    display: inline-block;
}
.academy-share-dropdown {
    position: fixed;
    z-index: 10002;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    padding: 6px 0;
    display: none;
}
.academy-share-dropdown.is-open {
    display: block;
}
.academy-share-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    font-size: 0.875rem;
    color: #374151;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-align: left;
    transition: background 0.15s;
}
.academy-share-item:hover {
    background: #f3f4f6;
}
.academy-share-item:first-child {
    border-radius: 6px 6px 0 0;
}
.academy-share-item:last-child {
    border-radius: 0 0 6px 6px;
}
.academy-share-icon {
    flex-shrink: 0;
}
.academy-share-icon-fb { color: #1877f2; }
.academy-share-icon-in { color: #0a66c2; }
.academy-share-icon-x { color: #14171a; }
.academy-share-icon-wa { color: #25d366; }
.academy-share-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: transparent;
    display: none;
}
.academy-share-backdrop.is-open {
    display: block;
}

/* Subscribe header button */
.subscribe-header-btn {
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    background: #00A6F1;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 12px;
    transition: background 0.2s;
}
.subscribe-header-btn:hover {
    background: #0095d9;
}

/* Subscribe modal */
.subscribe-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.subscribe-modal.is-open {
    display: flex;
}
.subscribe-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}
.subscribe-modal-box {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    padding: 32px 24px;
}
.subscribe-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    font-size: 24px;
    line-height: 1;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
}
.subscribe-modal-close:hover {
    color: #111;
}
.subscribe-modal-header {
    text-align: center;
    margin-bottom: 24px;
}
.subscribe-modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    margin: 0;
}
.subscribe-plans {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}
.subscribe-plan-card {
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
}
.subscribe-plan-card.subscribe-plan-featured {
    border-color: #00A6F1;
}
.subscribe-plan-badge {
    position: absolute;
    top: -10px;
    left: 16px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: #00A6F1;
    padding: 2px 8px;
    border-radius: 4px;
}
.subscribe-plan-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.subscribe-plan-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
}
.subscribe-plan-desc {
    font-size: 0.8rem;
    color: #6b7280;
}
.subscribe-plan-btn {
    align-self: flex-start;
    padding: 10px 24px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 8px;
}
.subscribe-plan-btn-primary {
    color: #fff;
    background: #00A6F1;
}
.subscribe-plan-btn-primary:hover {
    background: #0095d9;
}
.subscribe-plan-btn-secondary {
    color: #fff;
    background: #374151;
}
.subscribe-plan-btn-secondary:hover {
    background: #4b5563;
}
.subscribe-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.subscribe-benefits li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.9rem;
    color: #374151;
}
.subscribe-check {
    flex-shrink: 0;
    color: #16a34a;
}
.subscribe-legal {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0 0 16px;
    line-height: 1.5;
}
.subscribe-footer-links {
    text-align: center;
    font-size: 0.875rem;
}
.subscribe-footer-links a {
    color: #3b82f6;
    text-decoration: none;
}
.subscribe-footer-links a:hover {
    text-decoration: underline;
}

/* Checkout success banner */
.checkout-success-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    margin-bottom: 20px;
    background: linear-gradient(to bottom right, #EEF4FF, #E8F0FF);
    border: 1px solid #D0E0FF;
    border-radius: 8px;
    color: #1e293b;
    font-size: 0.95rem;
}
.checkout-success-icon {
    flex-shrink: 0;
    color: #10b981;
}
.checkout-success-dismiss {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 20px;
    color: #6b7280;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.checkout-success-dismiss:hover {
    color: #111;
}

/* === Course /course/ con xblocks: scroll en .main-content-area (syllabus + main junto).
   No usar overflow:hidden en body/main: impedía desplazar la página. === */
.main-content:has(.cv-page--lms-embed) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
}
.main-content-area:has(.cv-page--lms-embed) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* Course mobile syllabus drawer: fixed backdrop/aside must not be clipped by main scrollports
   (otherwise the panel only appears below .main-header). */
@media (max-width: 900px) {
    html.cv-syllabus-drawer-open .main-content:has(.cv-wrap.cv-page) {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    html.cv-syllabus-drawer-open .main-content-area:has(.cv-wrap.cv-page) {
        overflow: visible !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    html.cv-syllabus-drawer-open .app-container:has(.cv-wrap.cv-page) {
        overflow-y: visible !important;
    }
}

/* Breadcrumb: All courses › course › page (from All courses action links) */
.course-actions-breadcrumb {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: #6b7280;
}
.course-actions-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.course-actions-breadcrumb__sep {
    color: #9ca3af;
    user-select: none;
    font-weight: 500;
}
.course-actions-breadcrumb__link {
    color: #0058cc;
    text-decoration: none;
}
.course-actions-breadcrumb__link:hover {
    text-decoration: underline;
}
.course-actions-breadcrumb__current {
    color: #374151;
    font-weight: 500;
}
.schedule-details-page > .course-actions-breadcrumb {
    margin-bottom: 12px;
}
.edit-content-header > .course-actions-breadcrumb {
    margin-bottom: 10px;
}