/* ======================================================
   Page-specific styles
   ====================================================== */

/* ============ LANDING PAGE ============ */
.landing-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 32px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(10, 14, 26, 0.8);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
}
[data-theme="light"] .landing-nav { background: rgba(255, 255, 255, 0.85); }
.nav-brand { display: flex; align-items: center; gap: 10px; }
.brand-name { font-size: 18px; font-weight: 700; letter-spacing: -0.5px; }
.nav-actions { display: flex; gap: 12px; }

.hero {
    position: relative; min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 120px 32px 60px;
}
.hero-content { max-width: 800px; text-align: center; position: relative; z-index: 1; }

.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; margin-bottom: 24px;
    background: var(--bg-glass); border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 13px; font-weight: 500; color: var(--accent-secondary);
}
.badge-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-success);
    animation: pulse 2s ease-in-out infinite;
}

.hero-title {
    font-size: 3.5rem; font-weight: 800; line-height: 1.15;
    letter-spacing: -1.5px; margin-bottom: 20px;
}
.hero-subtitle {
    font-size: 1.1rem; color: var(--text-secondary);
    max-width: 600px; margin: 0 auto 32px; line-height: 1.7;
}
.hero-subtitle strong { color: var(--text-primary); }

.hero-actions { display: flex; gap: 16px; justify-content: center; margin-bottom: 48px; }

.hero-stats {
    display: flex; justify-content: center; gap: 48px;
    padding-top: 32px; border-top: 1px solid var(--border-color);
}
.stat-item { text-align: center; }
.stat-number {
    display: block; font-size: 2rem; font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 13px; color: var(--text-muted); }

/* Features */
.features { padding: 80px 32px; max-width: 1100px; margin: 0 auto; }
.section-title {
    text-align: center; font-size: 2rem; font-weight: 700;
    margin-bottom: 48px; letter-spacing: -0.5px;
}

.features-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
.feature-card {
    padding: 28px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}
.feature-card:hover {
    border-color: rgba(108, 99, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}
.feature-icon {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(108, 99, 255, 0.1);
    border-radius: var(--radius-md);
    margin-bottom: 16px; color: var(--accent, var(--accent-primary));
}
.feature-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.feature-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }

.landing-footer {
    text-align: center; padding: 32px;
    border-top: 1px solid var(--border-color);
    font-size: 13px; color: var(--text-muted);
}

/* ============ AUTH PAGES ============ */
.auth-container {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 32px;
    background: radial-gradient(ellipse at center, rgba(108, 99, 255, 0.08) 0%, transparent 60%);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-header h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.auth-header p { color: var(--text-secondary); font-size: 14px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-secondary); }

.back-btn {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 24px; padding: 8px 14px;
    background: none; border: none; color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 14px; cursor: pointer;
    transition: color var(--transition-fast);
}
.back-btn:hover { color: var(--text-primary); }

/* ============ MEDAI LOGO ============ */
.medai-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    user-select: none;
}
.medai-logo-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.15), rgba(0, 210, 255, 0.1));
    border: 1px solid rgba(108, 99, 255, 0.3);
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(108, 99, 255, 0.15);
}
.medai-logo-text {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    line-height: 1;
}
.medai-ai {
    background: linear-gradient(90deg, #6C63FF, #00D2FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============ SIDEBAR TOGGLE BUTTON ============ */
.sidebar-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
    color: var(--accent-primary);
    border-color: rgba(108, 99, 255, 0.4);
    background: rgba(108, 99, 255, 0.08);
}

/* ============ DASHBOARD ============ */
.app-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 20px;
    background: rgba(10, 14, 26, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    position: sticky; top: 0; z-index: 50;
    height: 54px;
}
[data-theme="light"] .app-header { background: rgba(255, 255, 255, 0.95); }
.header-left { display: flex; align-items: center; gap: 10px; }
.header-title { font-size: 16px; font-weight: 700; }
.header-right { display: flex; align-items: center; gap: 12px; }

.user-info { display: flex; align-items: center; gap: 8px; }
#user-name { font-size: 13px; font-weight: 500; }
.role-badge {
    padding: 2px 9px; font-size: 10px; font-weight: 600;
    border-radius: var(--radius-full); text-transform: uppercase;
    letter-spacing: 0.5px;
}
.role-badge[data-role="instructor"] { background: rgba(108, 99, 255, 0.15); color: var(--accent-primary); }
.role-badge[data-role="student"] { background: rgba(0, 210, 255, 0.15); color: var(--accent-secondary); }

.back-btn-sm {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-glass); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); cursor: pointer;
    color: var(--text-secondary); transition: all var(--transition-fast);
}
.back-btn-sm:hover { color: var(--text-primary); background: var(--bg-glass-hover); }

/* ============ DASHBOARD 2-COLUMN LAYOUT ============ */
.dashboard-layout {
    display: block;
    width: 100%;
    min-height: calc(100vh - 54px);
    position: relative;
}

/* ============ SIDEBAR — Fixed, fully collapsible (ChatGPT/Notion style) ============ */
.dashboard-sidebar {
    position: fixed;
    left: 0;
    top: 54px;
    height: calc(100vh - 54px);
    width: 240px;
    border-right: 1px solid var(--border-color);
    background: rgba(7, 10, 20, 0.85);
    backdrop-filter: blur(20px);
    /* Animate both transform + opacity smoothly */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width     0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 40;
    transform: translateX(0);
    opacity: 1;
    will-change: transform, opacity;
}
[data-theme="light"] .dashboard-sidebar {
    background: rgba(248, 249, 252, 0.97);
}

/* COLLAPSED — completely off-screen, invisible, non-interactive */
.dashboard-sidebar.collapsed {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    width: 0;
}

.sidebar-inner {
    position: relative;
    padding: 12px 8px;
    height: 100%;
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
    width: 240px; /* match sidebar expanded width */
}
.sidebar-inner::-webkit-scrollbar { width: 3px; }
.sidebar-inner::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 4px; }
.sidebar-inner::-webkit-scrollbar-track { background: transparent; }

/* Sidebar divider */
.sidebar-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 4px;
    opacity: 0.6;
}

/* ---- Sidebar Nav items ---- */
.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.18s ease;
    white-space: nowrap;
    position: relative;
}
.sidebar-nav-item svg { flex-shrink: 0; }
.sidebar-nav-item:hover {
    background: rgba(108, 99, 255, 0.1);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px rgba(108, 99, 255, 0.15);
}
.sidebar-nav-item.active {
    background: rgba(108, 99, 255, 0.12);
    color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px rgba(108, 99, 255, 0.2);
    border-left: 3px solid var(--role-primary, #534AB7);
}
.sidebar-nav-label {
    opacity: 1;
    overflow: hidden;
}


/* ---- Accordion trigger ---- */
.sidebar-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px; font-weight: 500;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
    position: relative;
}
.sidebar-accordion-trigger:hover {
    background: rgba(108, 99, 255, 0.08);
    color: var(--text-primary);
}
.sidebar-accordion-trigger.open {
    color: var(--accent-primary);
    background: rgba(108, 99, 255, 0.06);
}
.sidebar-accordion-trigger-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.accordion-chevron {
    flex-shrink: 0;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.6;
}
.sidebar-accordion-trigger.open .accordion-chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* ---- Accordion body (collapsible) ---- */
.sidebar-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease;
    opacity: 0;
}
.sidebar-accordion-body.open {
    max-height: 600px;
    opacity: 1;
}

/* ---- Specialty list inside accordion ---- */
.sidebar-specialty-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 4px 0 4px 8px;
}
.sidebar-specialty-list .specialty-chip {
    width: 100%;
    padding: 7px 10px;
    font-size: 12.5px;
    border-radius: 6px;
    gap: 8px;
    justify-content: flex-start;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.16s ease;
    white-space: nowrap;
    text-align: left;
}
.sidebar-specialty-list .specialty-chip:hover {
    background: rgba(108, 99, 255, 0.09);
    color: var(--text-primary);
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.12) inset;
}
.sidebar-specialty-list .specialty-chip.active {
    background: rgba(108, 99, 255, 0.14);
    color: var(--accent-primary);
    box-shadow: 0 0 0 1px rgba(108, 99, 255, 0.22) inset;
}
.sidebar-specialty-list .specialty-chip-icon { font-size: 14px; flex-shrink: 0; }
.sidebar-specialty-list .specialty-chip-count {
    margin-left: auto;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-full);
    color: var(--text-muted);
}
.sidebar-specialty-list .specialty-chip.active .specialty-chip-count {
    background: rgba(108, 99, 255, 0.2);
    color: var(--accent-primary);
}

/* ---- Case submenu ---- */
.sidebar-submenu {
    padding-top: 4px;
    animation: fadeIn 0.25s ease;
}
.sidebar-submenu-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 4px 8px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 6px;
}
.sidebar-submenu-back {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.sidebar-submenu-back:hover { background: var(--bg-glass); color: var(--text-primary); }
.sidebar-submenu-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-submenu-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.sidebar-case-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: transparent;
    text-align: left;
    width: 100%;
    font-family: var(--font-sans);
    transition: all 0.15s ease;
    line-height: 1.4;
}
.sidebar-case-item:hover {
    background: rgba(0, 210, 255, 0.07);
    color: var(--accent-secondary);
    box-shadow: 0 0 0 1px rgba(0, 210, 255, 0.12) inset;
}
.sidebar-case-item-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
    margin-top: 5px;
    opacity: 0.5;
}
.sidebar-case-item:hover .sidebar-case-item-dot { opacity: 1; background: var(--accent-secondary); }
.sidebar-case-item-name {
    flex: 1;
    white-space: normal;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sidebar-case-diff {
    font-size: 9px; font-weight: 700; padding: 1px 5px;
    border-radius: 3px; flex-shrink: 0; text-transform: uppercase;
    margin-top: 2px;
}
.sidebar-case-diff.diff-easy { background: rgba(74,222,128,0.12); color: var(--accent-success); }
.sidebar-case-diff.diff-medium { background: rgba(255,217,61,0.12); color: var(--accent-warning); }
.sidebar-case-diff.diff-hard { background: rgba(255,107,107,0.12); color: var(--accent-danger); }

/* (No icon-only collapsed styles needed — sidebar fully hides with translateX) */

/* --- Main content area — full width when sidebar is hidden --- */
.dashboard-main {
    margin-left: 240px;
    min-width: 0;
    padding: 28px 32px 60px;
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: margin-left;
}

/* Sidebar hidden — main takes full screen width */
.dashboard-main.sidebar-collapsed {
    margin-left: 0;
}

.dashboard-welcome { margin-bottom: 32px; }
.dashboard-welcome h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.dashboard-welcome p { color: var(--text-secondary); }

.dashboard-filters {
    display: flex; gap: 8px; margin-bottom: 24px;
    padding-bottom: 16px; border-bottom: 1px solid var(--border-color);
}
.filter-btn {
    padding: 8px 18px;
    background: none; border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary); font-family: var(--font-sans);
    font-size: 13px; font-weight: 500; cursor: pointer;
    transition: all var(--transition-fast);
}
.filter-btn:hover { color: var(--text-primary); border-color: rgba(255,255,255,0.2); }
.filter-btn.active {
    background: var(--gradient-primary); color: #fff;
    border-color: transparent;
}

.cases-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.cases-loading { grid-column: 1 / -1; text-align: center; padding: 60px; color: var(--text-muted); }

.case-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    cursor: pointer;
    transition: all var(--transition-normal);
    position: relative; overflow: hidden;
}
.case-card::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 100%; height: 3px;
    background: var(--gradient-primary); opacity: 0;
    transition: opacity var(--transition-normal);
}
.case-card:hover {
    border-color: rgba(108, 99, 255, 0.3);
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}
.case-card:hover::before { opacity: 1; }

.case-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.case-card-title { font-size: 16px; font-weight: 700; line-height: 1.4; }
.case-card-difficulty {
    padding: 3px 10px; font-size: 11px; font-weight: 600;
    border-radius: var(--radius-full); text-transform: uppercase;
    white-space: nowrap; letter-spacing: 0.5px;
}
.diff-easy { background: rgba(74, 222, 128, 0.15); color: var(--accent-success); }
.diff-medium { background: rgba(255, 217, 61, 0.15); color: var(--accent-warning); }
.diff-hard { background: rgba(255, 107, 107, 0.15); color: var(--accent-danger); }

.case-card-complaint {
    font-size: 14px; color: var(--text-secondary);
    margin-bottom: 16px; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.case-card-meta { display: flex; gap: 12px; flex-wrap: wrap; }
.case-meta-tag {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--text-muted);
}
.case-meta-tag svg { width: 14px; height: 14px; }

/* ============================================================
   CASE VIEWER — Hospital EMR Workstation Style
   ============================================================ */
.case-content-wrapper { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }

.case-layout {
    display: flex; flex: 1; min-height: 0;
    overflow: hidden;
}
.case-panel {
    overflow-y: auto; padding: 20px 22px;
}
.panel-left {
    flex: 0 0 420px; min-width: 340px; max-width: 480px;
    border-right: 1px solid var(--border-color);
    background: var(--bg-primary);
}
.panel-right {
    flex: 1; min-width: 0;
    background: var(--bg-primary);
}

/* ── EMR Panel Section ── */
.panel-section {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.panel-section:last-child { border-bottom: none; margin-bottom: 0; }

.panel-title {
    display: flex; align-items: center; gap: 7px;
    font-size: 10px; font-weight: 700;
    color: var(--text-muted); margin-bottom: 10px;
    text-transform: uppercase; letter-spacing: 0.8px;
}
.panel-title svg { color: var(--accent-primary); width: 14px; height: 14px; }

/* ── Patient Meta Chips ── */
.patient-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.meta-item {
    padding: 3px 10px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    font-size: 12px; font-weight: 500;
}
.difficulty-badge.diff-easy   { background: rgba(74,222,128,0.12); color: var(--accent-success); border-color: rgba(74,222,128,0.25); }
.difficulty-badge.diff-medium { background: rgba(255,217,61,0.12); color: var(--accent-warning); border-color: rgba(255,217,61,0.25); }
.difficulty-badge.diff-hard   { background: rgba(255,107,107,0.12); color: var(--accent-danger); border-color: rgba(255,107,107,0.25); }
.specialty-badge              { background: rgba(108,99,255,0.12); color: var(--accent-primary); border-color: rgba(108,99,255,0.25); }

/* ── Case Text ── */
.case-text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; }

/* ── Symptoms List ── */
.symptoms-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.symptoms-list li {
    padding: 7px 12px; font-size: 13px;
    background: rgba(255,255,255,0.025);
    border-left: 2px solid var(--accent-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    display: flex; align-items: flex-start; gap: 8px;
}
.symptoms-list li::before { content: '▸'; color: var(--accent-primary); font-size: 10px; margin-top: 2px; flex-shrink: 0; }

/* ── Vital Signs Grid ── */
.vitals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.vital-card {
    padding: 10px 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md);
    text-align: center;
    transition: border-color 0.2s;
}
.vital-card:hover { border-color: rgba(108,99,255,0.25); }
.vital-icon  { font-size: 16px; margin-bottom: 3px; }
.vital-value { font-size: 15px; font-weight: 800; color: var(--text-primary); line-height: 1.1; }
.vital-unit  { font-size: 9px; color: var(--text-muted); font-weight: 500; }
.vital-label { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.vital-card.vital-alert { border-color: rgba(255,107,107,0.3); }
.vital-card.vital-alert .vital-value { color: #FF6B6B; }

/* ── Medical Timeline ── */
.medical-timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
    display: flex; gap: 12px; position: relative;
    padding-bottom: 14px;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute; left: 15px; top: 28px;
    width: 2px; height: calc(100% - 14px);
    background: rgba(255,255,255,0.07);
}
.timeline-dot {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(108,99,255,0.12);
    border: 2px solid rgba(108,99,255,0.3);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; flex-shrink: 0; z-index: 1;
}
.timeline-body { flex: 1; min-width: 0; }
.timeline-time { font-size: 10px; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
.timeline-text { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }


/* Lab Results Table */
.lab-table-container { overflow-x: auto; }
.lab-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.lab-table th {
    text-align: left; padding: 8px 12px;
    font-weight: 600; color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.lab-table td {
    padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.lab-table tr:hover td { background: rgba(255,255,255,0.02); }
.lab-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-status-high { color: var(--accent-danger); }
.lab-status-low { color: var(--accent-secondary); }
.lab-status-critical { color: var(--accent-danger); font-weight: 700; }
.lab-status-normal { color: var(--accent-success); }

.image-viewer {
    background: rgba(0,0,0,0.2); border-radius: var(--radius-md);
    padding: 16px; min-height: 120px;
}
.no-image { text-align: center; color: var(--text-muted); font-size: 14px; padding: 40px; }
.image-desc {
    margin-top: 12px; padding: 12px;
    background: rgba(108, 99, 255, 0.08);
    border-radius: var(--radius-sm);
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
    border-left: 3px solid var(--accent-primary);
}

/* Medical Images Grid */
.medical-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.medical-image-card {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-normal);
    aspect-ratio: 4/3;
    background: rgba(0,0,0,0.3);
}
.medical-image-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(108, 99, 255, 0.2);
}
.medical-image-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.medical-image-card:hover img { transform: scale(1.05); }
.medical-image-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(transparent 50%, rgba(0,0,0,0.7));
    display: flex; flex-direction: column;
    align-items: center; justify-content: flex-end;
    padding: 12px; gap: 4px;
    opacity: 0; transition: opacity 0.2s ease;
    color: #fff; font-size: 12px; font-weight: 500;
}
.medical-image-card:hover .medical-image-overlay { opacity: 1; }

/* ============================================================
   MEDICAL IMAGING UPLOAD & PACS VIEWER
   ============================================================ */

/* ── Drag & Drop Upload Zone ── */
.imaging-upload-zone {
    border: 2px dashed rgba(0,210,255,0.25);
    border-radius: var(--radius-md);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    background: rgba(0,210,255,0.02);
    position: relative;
    margin-bottom: 12px;
}
.imaging-upload-zone:hover,
.imaging-upload-zone.drag-over {
    border-color: rgba(0,210,255,0.5);
    background: rgba(0,210,255,0.05);
    box-shadow: 0 0 20px rgba(0,210,255,0.08);
}
.imaging-upload-zone input[type="file"] {
    position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.upload-zone-icon   { font-size: 28px; margin-bottom: 8px; }
.upload-zone-title  { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.upload-zone-sub    { font-size: 11px; color: var(--text-muted); }
.upload-zone-types  {
    display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 10px;
}
.upload-type-tag {
    padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 600;
    background: rgba(0,210,255,0.1); color: #00D2FF; border: 1px solid rgba(0,210,255,0.2);
}

/* ── Upload Progress ── */
.upload-progress-wrap {
    margin-bottom: 10px;
    display: none;
}
.upload-progress-wrap.visible { display: block; }
.upload-progress-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.upload-progress-track {
    height: 4px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden;
}
.upload-progress-fill {
    height: 100%; background: linear-gradient(90deg, #00D2FF, var(--accent-primary));
    border-radius: 4px; width: 0%; transition: width 0.3s ease;
}

/* ── Thumbnail Gallery ── */
.imaging-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
}
.imaging-thumb {
    position: relative; aspect-ratio: 1;
    border-radius: var(--radius-sm); overflow: hidden;
    background: #000; cursor: pointer;
    border: 1px solid rgba(255,255,255,0.07);
    transition: all 0.2s;
}
.imaging-thumb:hover { border-color: #00D2FF; box-shadow: 0 0 10px rgba(0,210,255,0.2); }
.imaging-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.85) contrast(1.1); }
.imaging-thumb-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8));
    padding: 6px 5px 4px;
    font-size: 9px; font-weight: 600; color: #00D2FF; text-transform: uppercase;
}
.imaging-thumb-delete {
    position: absolute; top: 3px; right: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: rgba(255,107,107,0.7); border: none; color: #fff;
    font-size: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.2s;
}
.imaging-thumb:hover .imaging-thumb-delete { opacity: 1; }

/* ── PACS Fullscreen Viewer Modal ── */
.pacs-overlay {
    position: fixed; inset: 0; z-index: 3000;
    background: #000;
    display: flex; flex-direction: column;
    animation: fadeIn 0.2s ease;
}
.pacs-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: rgba(0,0,0,0.9);
    border-bottom: 1px solid rgba(0,210,255,0.15);
    flex-shrink: 0;
}
.pacs-header-left { display: flex; align-items: center; gap: 10px; }
.pacs-logo { font-size: 11px; font-weight: 800; color: #00D2FF; letter-spacing: 2px; }
.pacs-filename { font-size: 12px; color: rgba(255,255,255,0.6); }
.pacs-header-controls { display: flex; gap: 6px; }
.pacs-btn {
    padding: 6px 12px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7); font-size: 11px; font-weight: 600; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; gap: 5px;
}
.pacs-btn:hover { background: rgba(0,210,255,0.15); border-color: rgba(0,210,255,0.3); color: #00D2FF; }
.pacs-btn-close { background: rgba(255,107,107,0.12); border-color: rgba(255,107,107,0.2); color: #FF6B6B; }
.pacs-btn-close:hover { background: rgba(255,107,107,0.25); }

.pacs-workspace {
    flex: 1; display: flex; overflow: hidden;
}
.pacs-viewport {
    flex: 1; overflow: hidden; position: relative;
    display: flex; align-items: center; justify-content: center;
    cursor: grab;
}
.pacs-viewport:active { cursor: grabbing; }
.pacs-image-wrap {
    position: absolute;
    transform-origin: center center;
    transition: none;
    user-select: none;
}
.pacs-image-wrap img {
    max-width: 90vw; max-height: 85vh;
    display: block;
    filter: brightness(1) contrast(1.05);
    user-select: none; pointer-events: none;
}

/* ── PACS Sidebar: metadata + tools ── */
.pacs-sidebar {
    width: 200px; flex-shrink: 0;
    background: rgba(5,5,10,0.95);
    border-left: 1px solid rgba(0,210,255,0.12);
    padding: 14px 12px;
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 14px;
}
.pacs-sidebar-title { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #00D2FF; margin-bottom: 6px; }
.pacs-meta-row { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.pacs-meta-key   { font-size: 10px; color: rgba(255,255,255,0.4); }
.pacs-meta-val   { font-size: 10px; color: rgba(255,255,255,0.8); font-weight: 600; }
.pacs-tool-btn {
    width: 100%; padding: 7px; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6); font-size: 11px; cursor: pointer; text-align: left;
    transition: all 0.2s; display: flex; align-items: center; gap: 7px;
}
.pacs-tool-btn:hover { background: rgba(0,210,255,0.1); border-color: rgba(0,210,255,0.2); color: #00D2FF; }
.pacs-tool-btn.active { background: rgba(0,210,255,0.15); border-color: rgba(0,210,255,0.3); color: #00D2FF; }

/* ── PACS Zoom HUD ── */
.pacs-hud {
    position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 4px; align-items: center;
    background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-full); padding: 4px 8px;
}
.pacs-hud-btn {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,0.07); border: none; color: #fff;
    font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
}
.pacs-hud-btn:hover { background: rgba(0,210,255,0.2); }
.pacs-zoom-label { font-size: 11px; color: rgba(255,255,255,0.6); min-width: 40px; text-align: center; }


/* ── Blinking cursor ── */
.typing-cursor {
    display: inline-block;
    width: 2px; height: 0.9em;
    background: var(--accent-primary);
    margin-left: 2px; vertical-align: text-bottom;
    animation: cursorBlink 0.75s step-end infinite;
    border-radius: 1px;
}
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Skeleton loading lines ── */
.skeleton-line {
    height: 11px; border-radius: 4px; margin-bottom: 7px;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 25%,
        rgba(255,255,255,0.09) 50%,
        rgba(255,255,255,0.04) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line.w-full { width: 100%; }
.skeleton-line.w-75   { width: 75%; }
.skeleton-line.w-50   { width: 50%; }
.skeleton-line.w-60   { width: 60%; }
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── AI Activity Indicator (top of timeline) ── */
.ai-activity-header {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; margin-bottom: 16px;
    background: rgba(108,99,255,0.07);
    border: 1px solid rgba(108,99,255,0.18);
    border-radius: var(--radius-md);
    font-size: 12px; font-weight: 600; color: var(--accent-primary);
    animation: fadeIn 0.3s ease;
}
.ai-activity-dots { display: flex; gap: 4px; }
.ai-activity-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-primary);
    animation: dotBounce 1.2s ease-in-out infinite;
}
.ai-activity-dot:nth-child(2) { animation-delay: 0.2s; }
.ai-activity-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotBounce {
    0%, 80%, 100% { transform: scale(0.55); opacity: 0.35; }
    40%           { transform: scale(1);    opacity: 1; }
}

/* ── Per-step phase message + skeleton ── */
.ai-step-skeleton {
    padding: 4px 0;
}
.ai-phase-bar {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    font-size: 11.5px; color: var(--text-muted); font-style: italic;
}
.ai-phase-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-primary);
    flex-shrink: 0;
    animation: phasePulse 1s ease-in-out infinite;
}
@keyframes phasePulse {
    0%, 100% { opacity: 0.3; transform: scale(0.7); }
    50%       { opacity: 1;   transform: scale(1.1); }
}

/* ── Streaming content reveal ── */
.streaming-reveal {
    animation: streamIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes streamIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Typewriter text ── */
.typewriter-text {
    overflow: hidden;
    white-space: normal;
    animation: typeReveal 0.8s steps(40, end) forwards;
}
@keyframes typeReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Image Lightbox Modal */
.image-modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    animation: fadeIn 0.2s ease;
}
.image-modal {
    position: relative;
    max-width: 90vw; max-height: 90vh;
    display: flex; flex-direction: column;
    align-items: center; gap: 16px;
}
.image-modal img {
    max-width: 100%; max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.image-modal-close {
    position: absolute; top: -12px; right: -12px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,0.15); border: none;
    color: #fff; font-size: 18px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    z-index: 1;
}
.image-modal-close:hover { background: rgba(255,255,255,0.3); }
.image-modal-desc {
    max-width: 700px; text-align: center;
    font-size: 14px; color: rgba(255,255,255,0.8);
    line-height: 1.6;
}

/* ============ REASONING TABS ============ */
.reasoning-tabs {
    display: flex; gap: 4px;
    padding: 4px; margin-bottom: 20px;
    background: var(--bg-glass); border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}
.tab-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 10px 16px;
    background: none; border: none; border-radius: var(--radius-sm);
    color: var(--text-muted); font-family: var(--font-sans);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: all var(--transition-fast);
}
.tab-btn:hover { color: var(--text-secondary); }
.tab-btn.active {
    background: var(--bg-card); color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.tab-btn.visited {
    position: relative;
}
.tab-btn.visited::before {
    content: '✓';
    position: absolute;
    top: 3px; right: 6px;
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 800;
    color: #fff;
    background: #4ADE80;
    border-radius: 50%;
    line-height: 1;
    animation: checkPop .25s ease;
}
@keyframes checkPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}
.tab-content { display: none; animation: fadeIn 0.3s ease; }
.tab-content.active { display: block; }

/* ============================================================
   EXPLAINABLE AI (XAI) REASONING PANEL
   ============================================================ */

/* ── XAI Container ── */
.xai-panel {
    margin-top: 20px;
    border: 1px solid rgba(108,99,255,0.25);
    border-radius: var(--radius-md);
    overflow: hidden;
    animation: streamIn 0.5s ease;
}

/* ── Collapsible Header ── */
.xai-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(108,99,255,0.1), rgba(0,210,255,0.06));
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid rgba(108,99,255,0.15);
    transition: background 0.2s;
}
.xai-header:hover { background: linear-gradient(135deg, rgba(108,99,255,0.15), rgba(0,210,255,0.09)); }
.xai-header-left { display: flex; align-items: center; gap: 10px; }
.xai-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(108,99,255,0.2); border: 1px solid rgba(108,99,255,0.3);
    display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.xai-title   { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.xai-subtitle{ font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.xai-chevron {
    font-size: 12px; color: var(--text-muted);
    transition: transform 0.3s ease;
}
.xai-panel.xai-open .xai-chevron { transform: rotate(180deg); }

/* ── XAI Body ── */
.xai-body {
    display: none;
    padding: 16px;
    background: rgba(0,0,0,0.1);
}
.xai-panel.xai-open .xai-body { display: block; }

/* ── Why section ── */
.xai-why-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px; margin-bottom: 12px;
    background: rgba(108,99,255,0.07);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}

/* ── Evidence Grid ── */
.xai-evidence-grid {
    display: flex; flex-direction: column; gap: 7px;
    margin-bottom: 14px;
}
.xai-evidence-card {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    animation: contentReveal 0.4s ease;
}
.xai-evidence-card:hover {
    border-color: rgba(108,99,255,0.25);
    background: rgba(108,99,255,0.04);
    box-shadow: 0 0 8px rgba(108,99,255,0.08);
}
/* Evidence type colors */
.xai-evidence-card.ev-symptom  { border-left: 2px solid var(--accent-primary); }
.xai-evidence-card.ev-lab      { border-left: 2px solid #FFD93D; }
.xai-evidence-card.ev-imaging  { border-left: 2px solid var(--accent-secondary); }
.xai-evidence-card.ev-history  { border-left: 2px solid #FF6B6B; }
.xai-evidence-card.ev-positive { border-left: 2px solid #4ADE80; }

.xai-ev-icon {
    width: 26px; height: 26px; border-radius: 6px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 13px;
    background: rgba(255,255,255,0.05);
}
.xai-ev-content { flex: 1; min-width: 0; }
.xai-ev-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 2px; }
.xai-ev-text  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.xai-ev-weight {
    flex-shrink: 0; font-size: 11px; font-weight: 700;
    padding: 2px 7px; border-radius: var(--radius-full);
}
.weight-strong { background: rgba(74,222,128,0.15); color: #4ADE80; }
.weight-medium { background: rgba(255,217,61,0.12); color: #FFD93D; }
.weight-weak   { background: rgba(255,255,255,0.07); color: var(--text-muted); }

/* ── Confidence Breakdown ── */
.xai-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 8px;
}
.xai-breakdown { display: flex; flex-direction: column; gap: 6px; }
.xai-breakdown-row { display: flex; align-items: center; gap: 10px; }
.xai-breakdown-name { font-size: 12px; color: var(--text-secondary); flex: 0 0 130px; }
.xai-breakdown-bar-track {
    flex: 1; height: 5px; background: rgba(255,255,255,0.06); border-radius: 4px; overflow: hidden;
}
.xai-breakdown-bar-fill {
    height: 100%; border-radius: 4px;
    animation: barGrow 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.xai-breakdown-pct { font-size: 11px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; min-width: 30px; text-align: right; }

/* ============================================================
   MULTI-AGENT MEDICAL WORKFLOW DASHBOARD
   ============================================================ */

/* ── Supervisor Agent Card ── */
.supervisor-card {
    position: relative; overflow: hidden;
    padding: 16px 18px; margin-bottom: 16px;
    background: linear-gradient(135deg, rgba(108,99,255,0.12), rgba(0,210,255,0.07));
    border: 1px solid rgba(108,99,255,0.3);
    border-radius: var(--radius-md);
}
.supervisor-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}
.supervisor-header {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
}
.supervisor-title {
    display: flex; align-items: center; gap: 10px;
}
.supervisor-icon {
    width: 36px; height: 36px; border-radius: 10px;
    background: rgba(108,99,255,0.2); border: 1px solid rgba(108,99,255,0.3);
    display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.supervisor-name  { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.supervisor-role  { font-size: 11px; color: var(--text-muted); }
.supervisor-status-badge {
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
}
.sup-idle      { background: rgba(255,255,255,0.07); color: var(--text-muted); }
.sup-running   { background: rgba(108,99,255,0.15); color: var(--accent-primary); }
.sup-complete  { background: rgba(74,222,128,0.15); color: #4ADE80; }
.supervisor-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* ── Agent Grid ── */
.agent-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}
.agent-card {
    position: relative;
    padding: 13px 14px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md);
    transition: all 0.3s ease;
    overflow: hidden;
}
.agent-card.agent-active {
    border-color: rgba(108,99,255,0.4);
    background: rgba(108,99,255,0.06);
    box-shadow: 0 0 16px rgba(108,99,255,0.12);
}
.agent-card.agent-done {
    border-color: rgba(74,222,128,0.3);
    background: rgba(74,222,128,0.04);
}
/* Animated top border when active */
.agent-card.agent-active::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    animation: borderSlide 1.5s ease-in-out infinite;
}
@keyframes borderSlide {
    0%   { opacity: 0.4; }
    50%  { opacity: 1; }
    100% { opacity: 0.4; }
}

.agent-card-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.agent-icon {
    width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    transition: all 0.3s;
}
.agent-card.agent-active .agent-icon {
    border-color: rgba(108,99,255,0.4);
    background: rgba(108,99,255,0.12);
    box-shadow: 0 0 10px rgba(108,99,255,0.2);
}
.agent-card.agent-done .agent-icon {
    border-color: rgba(74,222,128,0.3);
    background: rgba(74,222,128,0.1);
}
.agent-info { flex: 1; min-width: 0; }
.agent-name { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.agent-type { font-size: 10px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.3px; }

/* Status dot */
.agent-status-row { display: flex; align-items: center; gap: 6px; }
.agent-status-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    transition: all 0.3s;
}
.dot-idle     { background: rgba(255,255,255,0.2); }
.dot-active   { background: var(--accent-primary); animation: dotGlow 1s ease-in-out infinite; }
.dot-done     { background: #4ADE80; }
.dot-error    { background: #FF6B6B; }
@keyframes dotGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(108,99,255,0.4); }
    50%       { box-shadow: 0 0 0 4px rgba(108,99,255,0); }
}
.agent-status-label { font-size: 11px; color: var(--text-muted); font-weight: 500; }
.agent-card.agent-active .agent-status-label { color: var(--accent-primary); }
.agent-card.agent-done   .agent-status-label { color: #4ADE80; }

/* Agent result snippet */
.agent-result {
    margin-top: 8px; padding: 7px 9px;
    background: rgba(0,0,0,0.15);
    border-radius: var(--radius-sm);
    font-size: 11px; color: var(--text-secondary); line-height: 1.5;
    display: none;
    animation: contentReveal 0.4s ease;
}
.agent-card.agent-done .agent-result { display: block; }

/* ── Workflow Activity Log ── */
.workflow-log {
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 11.5px;
}
.log-line {
    display: flex; gap: 8px; padding: 2px 0;
    animation: contentReveal 0.3s ease;
}
.log-time   { color: var(--text-muted); flex-shrink: 0; }
.log-agent  { color: var(--accent-primary); font-weight: 600; flex-shrink: 0; }
.log-msg    { color: var(--text-secondary); }
.log-line.log-done .log-agent  { color: #4ADE80; }
.log-line.log-error .log-agent { color: #FF6B6B; }

/* Run workflow button */
.btn-workflow {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(0,210,255,0.12));
    border: 1px solid rgba(108,99,255,0.35);
    border-radius: var(--radius-md);
    color: var(--accent-primary); font-size: 13px; font-weight: 700;
    cursor: pointer; transition: all 0.25s;
    margin-bottom: 16px;
}
.btn-workflow:hover {
    background: linear-gradient(135deg, rgba(108,99,255,0.3), rgba(0,210,255,0.18));
    box-shadow: 0 0 20px rgba(108,99,255,0.2);
}
.btn-workflow:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================
   STUDENT REASONING STEPPER
   ============================================================ */

/* ── Stepper Progress Bar ── */
.stepper-bar {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 8px 16px;
}

.stepper-dot {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800;
    background: var(--surface-2, rgba(255,255,255,.06));
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    transition: all .3s ease;
    cursor: pointer;
    position: relative;
}

.stepper-dot.active {
    background: linear-gradient(135deg, #6C63FF, #00D2FF);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 12px rgba(108,99,255,.35);
}

.stepper-dot.done {
    background: rgba(74,222,128,.15);
    border-color: #4ADE80;
    color: #4ADE80;
}

.stepper-dot.done span { display: none; }
.stepper-dot.done::after {
    content: '✓';
    font-size: 14px; font-weight: 700;
}

.stepper-line {
    flex: 1; height: 2px;
    background: var(--border-color);
    border-radius: 1px;
    overflow: hidden;
}

.stepper-line-fill {
    width: 0; height: 100%;
    background: linear-gradient(90deg, #6C63FF, #00D2FF);
    border-radius: 1px;
    transition: width .4s ease;
}

/* ── Step Panels ── */
.stepper-panels {
    position: relative;
    min-height: 200px;
}

.stepper-panel {
    display: none;
    animation: stepFadeIn .3s ease;
}

.stepper-panel.active {
    display: block;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stepper-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--surface-1, rgba(255,255,255,.03));
    border: 1px solid var(--border-color);
}

.stepper-panel-icon {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(108,99,255,.12), rgba(0,210,255,.08));
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}

.stepper-panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.stepper-panel-sub {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.stepper-panel textarea {
    width: 100%;
    min-height: 130px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-1, rgba(255,255,255,.03));
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.7;
    resize: vertical;
    transition: border-color .2s, box-shadow .2s;
}

.stepper-panel textarea:focus {
    outline: none;
    border-color: rgba(108,99,255,.4);
    box-shadow: 0 0 0 3px rgba(108,99,255,.1);
}

.stepper-panel textarea::placeholder {
    color: var(--text-muted);
    font-size: 12px;
}

/* ── Navigation ── */
.stepper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0 4px;
    border-top: 1px solid var(--border-color);
    margin-top: 14px;
}

.stepper-counter {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    flex-shrink: 0;
}

.stepper-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-1, rgba(255,255,255,.03));
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
}

.stepper-btn:hover:not(:disabled) {
    border-color: rgba(108,99,255,.3);
    background: rgba(108,99,255,.06);
}

.stepper-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.stepper-btn.stepper-next {
    background: linear-gradient(135deg, rgba(108,99,255,.12), rgba(0,210,255,.08));
    border-color: rgba(108,99,255,.2);
    color: var(--accent-primary, #6C63FF);
}

.stepper-btn.stepper-next:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(108,99,255,.2), rgba(0,210,255,.15));
    box-shadow: 0 4px 12px rgba(108,99,255,.15);
}

.stepper-btn.stepper-submit {
    background: linear-gradient(135deg, #6C63FF, #00D2FF);
    border: none;
    color: #fff;
    padding: 10px 24px;
    font-weight: 700;
    box-shadow: 0 4px 18px rgba(108,99,255,.25);
}

.stepper-btn.stepper-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(108,99,255,.35);
}

/* ============================================================
.ai-reasoning { padding: 4px 0; }

/* ── CoT Empty / Skeleton State ── */
.ai-cot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 16px 24px;
}

.cot-empty-hero {
    text-align: center;
}

.cot-empty-icon {
    width: 56px; height: 56px;
    margin: 0 auto 12px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(108,99,255,.12), rgba(0,210,255,.08));
    border: 1px solid rgba(108,99,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: var(--primary-color, #6C63FF);
}

.cot-empty-hero h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.cot-empty-hero p {
    font-size: 13px;
    color: var(--text-muted);
}

/* Skeleton steps */
.cot-skeleton-steps {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cot-skel-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--surface-1);
    transition: border-color .3s;
}

.cot-skel-step:hover {
    border-color: rgba(108,99,255,.3);
}

.cot-skel-num {
    width: 28px; height: 28px; flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(108,99,255,.15), rgba(0,210,255,.1));
    color: var(--primary-color, #6C63FF);
    font-size: 12px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}

.cot-skel-body {
    flex: 1; min-width: 0;
}

.cot-skel-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.cot-skel-bar {
    height: 5px;
    border-radius: 4px;
    background: var(--surface-2, rgba(255,255,255,.06));
    overflow: hidden;
}

.cot-skel-fill {
    width: 40%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, transparent, rgba(108,99,255,.25), transparent);
    animation: skelShimmer 2s ease-in-out infinite;
}

@keyframes skelShimmer {
    0%   { transform: translateX(-100%); width: 40%; }
    50%  { transform: translateX(60%);   width: 60%; }
    100% { transform: translateX(200%);  width: 40%; }
}

/* CTA button */
.cot-empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #6C63FF, #00D2FF);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 4px 18px rgba(108,99,255,.25);
    margin-top: 4px;
}

.cot-empty-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(108,99,255,.35);
}

.cot-empty-cta:active {
    transform: translateY(0);
}

/* ── Timeline wrapper ── */
.ai-timeline {
    display: flex;
    flex-direction: column;
    padding: 8px 4px;
}

/* ── Single Timeline Step ── */
.ai-step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0 14px;
}

/* ── Connector line between steps ── */
.step-connector {
    position: absolute;
    left: 27px;
    top: 58px;
    width: 2px;
    height: calc(100% - 32px);
    background: var(--border-color);
    transition: background 0.5s ease;
    z-index: 0;
    border-radius: 2px;
}
.ai-step.done .step-connector {
    background: linear-gradient(180deg, #4ADE80 0%, rgba(74,222,128,0.15) 100%);
}
.ai-step.processing .step-connector {
    background: linear-gradient(180deg, rgba(108,99,255,0.7) 0%, transparent 100%);
}

/* ── Icon Column ── */
.step-icon-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    padding-top: 6px;
}

/* ── Icon Circle ── */
.step-icon-wrap {
    width: 48px; height: 48px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    border: 2px solid var(--border-color);
    background: var(--bg-card);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; z-index: 2;
    flex-shrink: 0;
}
.ai-step.pending .step-icon-wrap {
    border-color: rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    opacity: 0.45;
    filter: grayscale(0.6);
}
.ai-step.processing .step-icon-wrap {
    border-color: var(--accent-primary);
    background: rgba(108,99,255,0.12);
    box-shadow: 0 0 0 4px rgba(108,99,255,0.1), 0 0 24px rgba(108,99,255,0.25);
    animation: iconGlow 1.8s ease-in-out infinite;
}
.ai-step.done .step-icon-wrap {
    border-color: #4ADE80;
    background: rgba(74,222,128,0.1);
    box-shadow: 0 0 16px rgba(74,222,128,0.15);
}
@keyframes iconGlow {
    0%, 100% { box-shadow: 0 0 0 4px rgba(108,99,255,0.1), 0 0 16px rgba(108,99,255,0.2); }
    50%       { box-shadow: 0 0 0 8px rgba(108,99,255,0.18), 0 0 36px rgba(108,99,255,0.35); }
}

/* ── Step Body Column ── */
.step-body-col {
    padding-bottom: 24px;
    min-width: 0;
}

/* ── Step Header ── */
.ai-step-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; gap: 8px;
    margin-bottom: 6px; padding-top: 12px;
}
.ai-step-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.ai-step-title {
    font-size: 14px; font-weight: 700; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-step.pending .ai-step-title { color: var(--text-muted); }

.ai-step-subtitle {
    font-size: 11px; color: var(--text-muted);
    font-weight: 500; letter-spacing: 0.3px;
}

/* ── Badges ── */
.step-badges {
    display: flex; align-items: center; gap: 6px; flex-shrink: 0;
}
.step-status {
    font-size: 11px; font-weight: 600;
    padding: 3px 8px; border-radius: var(--radius-full); white-space: nowrap;
}
.step-status.pending    { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.step-status.processing { background: rgba(108,99,255,0.15); color: var(--accent-primary); }
.step-status.done       { background: rgba(74,222,128,0.15); color: #4ADE80; }

/* Confidence badge — only visible when done */
.step-confidence {
    font-size: 11px; font-weight: 700;
    padding: 3px 8px; border-radius: var(--radius-full);
    display: none; align-items: center; gap: 4px;
}
.ai-step.done .step-confidence { display: inline-flex; }
.confidence-high   { background: rgba(74,222,128,0.12); color: #4ADE80;  border: 1px solid rgba(74,222,128,0.2); }
.confidence-medium { background: rgba(255,217,61,0.12); color: #FFD93D;  border: 1px solid rgba(255,217,61,0.2); }
.confidence-low    { background: rgba(255,107,107,0.12); color: #FF6B6B; border: 1px solid rgba(255,107,107,0.2); }

/* ── Animated progress bar ── */
.step-progress-bar {
    height: 2px; background: rgba(255,255,255,0.06); border-radius: 2px;
    overflow: hidden; margin-bottom: 10px; display: none;
}
.ai-step.processing .step-progress-bar { display: block; }
.step-progress-fill {
    height: 100%; width: 0;
    background: var(--gradient-primary);
    border-radius: 2px;
    animation: progressFill 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes progressFill {
    from { width: 0; }
    to   { width: 100%; }
}

/* ── Step content area ── */
.ai-step-content {
    font-size: 13.5px; color: var(--text-secondary); line-height: 1.7;
    animation: contentReveal 0.4s ease;
}
@keyframes contentReveal {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Reasoning card ── */
.step-reasoning {
    padding: 12px 14px;
    background: rgba(108,99,255,0.05);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin-bottom: 14px; font-size: 13px;
}
.step-reasoning p { margin: 0; }

/* ── Section within step ── */
.step-section { margin-bottom: 14px; padding-top: 4px; }
.step-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.7px; color: var(--text-muted); margin-bottom: 8px;
}

/* ── Lists inside steps ── */
.step-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 3px;
}
.step-list li {
    padding: 6px 10px; font-size: 13px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.04);
    border-radius: var(--radius-sm);
    display: flex; align-items: flex-start; gap: 8px;
}
.step-list li::before { content: '▸'; color: var(--accent-primary); font-weight: 700; flex-shrink: 0; font-size: 11px; margin-top: 2px; }
.step-list.warning li::before { content: '⚠'; color: var(--accent-warning); }
.step-list.success li::before { content: '✓'; color: var(--accent-success); }
.step-list.danger  li::before { content: '🚨'; }
.step-list.info    li::before { content: '📌'; }


/* ============================================================
   DIAGNOSIS CONFIDENCE SYSTEM — Medical AI Professional UI
   ============================================================ */

/* ── Primary Diagnosis Hero Card ── */
.diagnosis-primary-card {
    position: relative;
    padding: 20px 20px 16px;
    background: linear-gradient(135deg, rgba(108,99,255,0.12), rgba(0,210,255,0.07));
    border: 1px solid rgba(108,99,255,0.3);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 4px;
}
.diagnosis-primary-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}
.diagnosis-primary-name {
    font-size: 17px; font-weight: 800; color: var(--text-primary);
    margin-bottom: 8px; letter-spacing: -0.2px;
}
/* legacy compat */
.diagnosis-name {
    font-size: 16px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px;
}
.diagnosis-primary-badges {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-bottom: 14px;
}
/* Risk level badges */
.risk-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700; letter-spacing: 0.4px;
}
.risk-critical { background: rgba(255,59,48,0.15); color: #FF3B30; border: 1px solid rgba(255,59,48,0.25); }
.risk-high     { background: rgba(255,107,107,0.15); color: #FF6B6B; border: 1px solid rgba(255,107,107,0.25); }
.risk-medium   { background: rgba(255,193,7,0.15); color: #FFC107; border: 1px solid rgba(255,193,7,0.25); }
.risk-low      { background: rgba(74,222,128,0.15); color: #4ADE80; border: 1px solid rgba(74,222,128,0.25); }

/* Confidence score large display */
.confidence-score-row {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.confidence-score-value {
    font-size: 32px; font-weight: 800; line-height: 1;
    background: var(--gradient-primary);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    min-width: 72px;
}
.confidence-score-bar-wrap { flex: 1; }
.confidence-score-label {
    font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500;
}
.confidence-bar-track {
    height: 6px; background: rgba(255,255,255,0.07); border-radius: 6px; overflow: hidden;
}
.confidence-bar-fill {
    height: 100%; border-radius: 6px;
    transition: width 0s; /* controlled by animation */
    animation: barGrow 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes barGrow {
    from { width: 0 !important; }
    /* width set inline via style */
}
.bar-fill-primary  { background: linear-gradient(90deg, #6C63FF, #00D2FF); }
.bar-fill-high     { background: linear-gradient(90deg, #FF6B6B, #FF3B30); }
.bar-fill-medium   { background: linear-gradient(90deg, #FFD93D, #FFC107); }
.bar-fill-low      { background: linear-gradient(90deg, #4ADE80, #22c55e); }

.diagnosis-confidence { font-size: 13px; color: var(--accent-secondary); margin-bottom: 8px; }
.diagnosis-evidence {
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
    padding-top: 8px; border-top: 1px solid rgba(255,255,255,0.07);
}

/* ── Differential Diagnosis Ranking List ── */
.diagnosis-cards { display: flex; flex-direction: column; gap: 10px; }

.diag-conf-card {
    position: relative;
    padding: 14px 16px;
    background: rgba(255,255,255,0.025);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, background 0.2s ease;
    cursor: pointer;
}
.diag-conf-card:hover {
    border-color: rgba(108,99,255,0.3);
    background: rgba(108,99,255,0.04);
}
/* rank badge top-left */
.diag-rank {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.rank-1 { background: rgba(255,215,0,0.18); color: #FFD700; border: 1px solid rgba(255,215,0,0.3); }
.rank-2 { background: rgba(192,192,192,0.15); color: #C0C0C0; border: 1px solid rgba(192,192,192,0.25); }
.rank-3 { background: rgba(205,127,50,0.15); color: #CD7F32; border: 1px solid rgba(205,127,50,0.25); }
.rank-n { background: rgba(255,255,255,0.06); color: var(--text-muted); border: 1px solid rgba(255,255,255,0.1); }

/* Card header row */
.diag-conf-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.diag-conf-name {
    flex: 1; font-size: 14px; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diag-conf-pct {
    font-size: 16px; font-weight: 800; flex-shrink: 0;
    min-width: 44px; text-align: right;
}
.diag-conf-pct.pct-high   { color: #FF6B6B; }
.diag-conf-pct.pct-medium { color: #FFD93D; }
.diag-conf-pct.pct-low    { color: #4ADE80; }

/* Probability bar */
.diag-conf-bar-row {
    display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.diag-conf-bar-track {
    flex: 1; height: 5px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden;
}
.diag-conf-bar-fill {
    height: 100%; border-radius: 4px;
    animation: barGrow 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.diag-conf-bar-label {
    font-size: 10px; font-weight: 600; color: var(--text-muted);
    white-space: nowrap; min-width: 28px; text-align: right;
}

/* Expandable detail */
.diag-conf-detail {
    display: none; padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.6;
    animation: contentReveal 0.3s ease;
}
.diag-conf-card.expanded .diag-conf-detail { display: block; }
.diag-conf-expand-btn {
    float: right; font-size: 10px; color: var(--text-muted);
    cursor: pointer; user-select: none; margin-left: 8px;
    transition: color 0.15s;
}
.diag-conf-card.expanded .diag-conf-expand-btn { color: var(--accent-primary); }

/* Evidence / against tags */
.diag-detail-row { margin-bottom: 6px; }
.diag-detail-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 3px;
}

/* ── Management Plan ── */
.plan-group { margin-bottom: 12px; }
.plan-group-title {
    font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 6px;
}

/* --- Compact Lab Table (for AI step) --- */
.lab-table.compact th { font-size: 10px; padding: 6px 10px; }
.lab-table.compact td { padding: 6px 10px; font-size: 13px; }

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


/* ============ EVALUATION ============ */
.evaluation-container {
    padding: 24px;
    animation: slideUp 0.5s ease;
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.eval-score-circle {
    width: 120px; height: 120px; margin: 0 auto 24px;
    position: relative;
}
.eval-score-circle svg { transform: rotate(-90deg); }
.eval-score-value {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 800;
}

.eval-scores-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px; margin-bottom: 20px;
}
.eval-score-item {
    padding: 14px;
    background: var(--bg-glass); border: 1px solid var(--border-color);
    border-radius: var(--radius-md); text-align: center;
}
.eval-score-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.eval-score-num { font-size: 24px; font-weight: 700; margin-top: 4px; }

.eval-section { margin-bottom: 16px; }
.eval-section-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: 8px;
}
.eval-list { list-style: none; }
.eval-list li {
    padding: 6px 0; font-size: 14px; color: var(--text-secondary);
    display: flex; align-items: flex-start; gap: 8px;
}
.eval-list li::before { flex-shrink: 0; }
.eval-list.strengths li::before { content: '✓'; color: var(--accent-success); font-weight: 700; }
.eval-list.weaknesses li::before { content: '✗'; color: var(--accent-danger); font-weight: 700; }
.eval-list.suggestions li::before { content: '→'; color: var(--accent-primary); font-weight: 700; }

.eval-feedback {
    padding: 16px;
    background: rgba(108, 99, 255, 0.06);
    border: 1px solid rgba(108, 99, 255, 0.15);
    border-radius: var(--radius-md);
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}

/* ============ SETTINGS PAGE ============ */
.settings-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 24px;
}

.settings-profile-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    margin-bottom: 28px;
}

.avatar-circle {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; font-weight: 800; color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.profile-info { flex: 1; }
.profile-name { font-size: 20px; font-weight: 700; margin-bottom: 2px; }
.profile-email { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.profile-meta {
    display: flex; gap: 8px; flex-wrap: wrap;
}
.profile-tag {
    padding: 3px 10px; font-size: 11px; font-weight: 600;
    border-radius: var(--radius-full);
    background: var(--bg-glass); border: 1px solid var(--border-color);
    color: var(--text-muted);
}
.profile-tag.tag-role { background: rgba(0, 210, 255, 0.12); color: var(--accent-secondary); border-color: rgba(0, 210, 255, 0.25); }

.settings-section {
    padding: 24px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
}
.settings-section-title {
    font-size: 15px; font-weight: 700;
    margin-bottom: 20px;
    display: flex; align-items: center; gap: 8px;
}

.form-success {
    margin-top: 8px; padding: 10px 14px;
    background: rgba(74, 222, 128, 0.1);
    border: 1px solid rgba(74, 222, 128, 0.3);
    border-radius: var(--radius-sm);
    color: var(--accent-success); font-size: 13px;
}

/* ============ SEARCH & SORT ============ */
.dashboard-toolbar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-bar {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 0 16px;
    transition: all var(--transition-fast);
}
.search-bar:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}
.search-bar svg { color: var(--text-muted); flex-shrink: 0; }
.search-bar input {
    flex: 1; padding: 10px 0;
    background: transparent; border: none; outline: none;
    color: var(--text-primary); font-family: var(--font-sans); font-size: 14px;
}
.search-bar input::placeholder { color: var(--text-muted); }

.sort-select {
    padding: 10px 16px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 13px; font-weight: 500;
    cursor: pointer; appearance: none;
    outline: none;
    min-width: 150px;
    transition: all var(--transition-fast);
}
.sort-select:focus {
    border-color: var(--accent-primary);
}
.sort-select option { background: var(--bg-secondary); }

/* ============ PAGINATION ============ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.page-btn {
    display: flex; align-items: center; justify-content: center;
    min-width: 38px; height: 38px;
    padding: 0 12px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-sans); font-size: 13px; font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}
.page-btn:hover:not(:disabled) {
    color: var(--text-primary);
    border-color: var(--accent-primary);
    background: rgba(108, 99, 255, 0.08);
}
.page-btn.active {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
}
.page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0 12px;
}

/* ============ DASHBOARD STATS ============ */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.section-subtitle {
    font-size: 18px; font-weight: 700; margin-bottom: 20px;
    letter-spacing: -0.3px;
}
.stats-overview {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 16px; margin-bottom: 32px;
}
.stat-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px; background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.stat-card-icon {
    width: 48px; height: 48px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.stat-card-value { font-size: 24px; font-weight: 800; }
.stat-card-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ============ WORKFLOW SECTION ============ */
.workflow-section {
    margin-bottom: 32px; padding: 28px;
    background: var(--bg-glass); border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
}
.workflow-steps {
    display: flex; align-items: stretch; gap: 0;
}
.workflow-step {
    flex: 1; text-align: center; padding: 20px 12px;
    background: rgba(255,255,255,0.02); border-radius: var(--radius-md);
    position: relative; transition: all var(--transition-normal);
}
.workflow-step:hover { background: rgba(108, 99, 255, 0.06); transform: translateY(-2px); }
.workflow-step-num {
    position: absolute; top: 8px; right: 12px;
    font-size: 11px; font-weight: 700; color: var(--text-muted); opacity: 0.5;
}
.workflow-step-icon { font-size: 32px; margin-bottom: 10px; }
.workflow-step-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.workflow-step-desc { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.workflow-arrow {
    display: flex; align-items: center; padding: 0 8px;
    font-size: 20px; color: var(--text-muted); opacity: 0.4;
}

/* ============ SPECIALTY CARDS ============ */
.specialty-section {
    margin-bottom: 32px;
    text-align: left;
}
.specialty-cards {
    display: flex; gap: 10px; flex-wrap: wrap;
    justify-content: flex-start;
}
.specialty-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 18px; background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full); cursor: pointer;
    font-size: 13px; font-weight: 500; color: var(--text-secondary);
    transition: all var(--transition-fast);
}
.specialty-chip:hover {
    border-color: rgba(108, 99, 255, 0.4); color: var(--text-primary);
    background: rgba(108, 99, 255, 0.08);
}
.specialty-chip.active {
    background: var(--gradient-primary); color: #fff; border-color: transparent;
}
.specialty-chip-icon { font-size: 16px; }
.specialty-chip-count {
    padding: 2px 8px; font-size: 11px; font-weight: 700;
    background: rgba(255,255,255,0.12); border-radius: var(--radius-full);
}
.specialty-chip.active .specialty-chip-count { background: rgba(255,255,255,0.25); }

/* ============ CASES SECTION HEADER ============ */
.cases-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 12px;
}
.cases-section-header .dashboard-filters { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

/* ============ CASE INTRO BANNER ============ */
.case-content-wrapper { display: flex; flex-direction: column; height: calc(100vh - 57px); }
.case-intro-banner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 24px 28px; gap: 32px;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.08), rgba(0, 210, 255, 0.05));
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; animation: fadeIn 0.4s ease;
}
.case-intro-left { flex: 1; }
.case-intro-badges { display: flex; gap: 8px; margin-bottom: 10px; }
.intro-badge {
    padding: 4px 14px; font-size: 12px; font-weight: 600;
    border-radius: var(--radius-full); letter-spacing: 0.3px;
}
.case-intro-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.5px; }
.case-intro-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 12px; }
.case-intro-patient { display: flex; gap: 12px; flex-wrap: wrap; }
.patient-chip {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px; background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full); font-size: 13px; font-weight: 500;
}
.patient-chip svg { color: var(--accent-primary); }
.case-intro-right { flex-shrink: 0; }
.case-intro-stats { display: flex; gap: 20px; }
.intro-stat { text-align: center; min-width: 70px; }
.intro-stat-icon { font-size: 24px; margin-bottom: 4px; }
.intro-stat-value { font-size: 22px; font-weight: 800; }
.intro-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.case-layout { flex: 1; overflow: hidden; }

@media (max-width: 900px) {
    .stats-overview { grid-template-columns: repeat(2, 1fr); }
    .workflow-steps { flex-direction: column; }
    .workflow-arrow { transform: rotate(90deg); justify-content: center; padding: 4px 0; }
    .case-intro-banner { flex-direction: column; }
    /* Sidebar auto-collapses on tablet */
    .dashboard-sidebar {
        width: 52px;
    }
    .dashboard-sidebar.collapsed { width: 52px; }
    .cases-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .stats-overview { grid-template-columns: 1fr; }
    /* Full hide sidebar on very small screens */
    .dashboard-sidebar {
        display: none;
    }
    .dashboard-layout { flex-direction: column; }
}
@media (max-width: 600px) {
    .stats-overview { grid-template-columns: 1fr; }
}

/* ============ LIGHT THEME OVERRIDES ============ */
[data-theme="light"] .auth-container {
    background: radial-gradient(ellipse at center, rgba(108, 99, 255, 0.05) 0%, transparent 60%);
}
[data-theme="light"] .symptoms-list li { background: rgba(0,0,0,0.02); }
[data-theme="light"] .case-card { background: var(--bg-card); }
[data-theme="light"] .ai-step { background: var(--bg-card); }
[data-theme="light"] .search-bar { background: rgba(255,255,255,0.7); }
[data-theme="light"] .sort-select { background: rgba(255,255,255,0.7); }
[data-theme="light"] .settings-profile-card { background: var(--bg-card); }
[data-theme="light"] .settings-section { background: var(--bg-card); }
[data-theme="light"] .stat-card { background: var(--bg-card); }
[data-theme="light"] .workflow-section { background: var(--bg-card); }
[data-theme="light"] .workflow-step { background: rgba(0,0,0,0.02); }
[data-theme="light"] .specialty-chip { background: rgba(255,255,255,0.8); }
[data-theme="light"] .case-intro-banner { background: linear-gradient(135deg, rgba(108,99,255,0.05), rgba(0,210,255,0.03)); }
[data-theme="light"] .chat-widget { background: rgba(255,255,255,0.95); }
[data-theme="light"] .chat-header { background: rgba(108,99,255,0.9); }
[data-theme="light"] .chat-msg.user .chat-msg-bubble { background: var(--accent-primary); }
[data-theme="light"] .chat-msg.bot .chat-msg-bubble { background: rgba(0,0,0,0.05); color: var(--text-primary); }
[data-theme="light"] .chat-input-area input { background: rgba(0,0,0,0.04); }

/* ============ CHAT WIDGET ============ */
.chat-fab {
    position: fixed; bottom: 24px; right: 24px; z-index: 1000;
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--gradient-primary); border: none;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(108, 99, 255, 0.45);
    transition: all 0.25s ease;
}
.chat-fab:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(108, 99, 255, 0.55); }
.chat-fab.active { transform: rotate(15deg) scale(0.92); }
.chat-fab-badge {
    position: absolute; top: -3px; right: -3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-danger); color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bg-primary);
    animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.4); }
    50% { box-shadow: 0 0 0 5px rgba(255,107,107,0); }
}

.chat-widget {
    position: fixed; bottom: 90px; right: 24px; z-index: 1001;
    width: 380px;
    display: flex; flex-direction: column;
    background: rgba(12, 16, 30, 0.97);
    backdrop-filter: blur(24px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(108,99,255,0.08);
    overflow: hidden;
    animation: chatSlideUp 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-height: calc(100vh - 110px);
}
.chat-widget.hidden { display: none; }

@keyframes chatSlideUp {
    from { opacity: 0; transform: translateY(16px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Demo mode banner */
.chat-demo-banner {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 14px;
    background: rgba(255, 170, 0, 0.12);
    border-bottom: 1px solid rgba(255, 170, 0, 0.2);
    color: #ffaa00;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.2px;
    flex-shrink: 0;
}
.chat-demo-banner svg { flex-shrink: 0; }
.chat-demo-banner.hidden { display: none; }

/* Chat header */
.chat-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(108,99,255,0.85), rgba(67,56,202,0.9));
    color: #fff; flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.chat-header-left { display: flex; align-items: center; gap: 10px; }
.chat-header-actions { display: flex; align-items: center; gap: 4px; }
.chat-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.2);
}
.chat-header-title { font-size: 13px; font-weight: 700; }
.chat-header-sub {
    font-size: 10.5px; opacity: 0.85;
    display: flex; align-items: center; gap: 5px;
    margin-top: 1px;
}

/* Status dot with pulse animation */
.chat-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #4ade80;
    display: inline-block;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.4);
    animation: statusPulse 2.5s infinite;
}
.chat-status-dot.busy {
    background: #facc15;
    animation: statusPulse 1s infinite;
}
.chat-status-dot.error { background: var(--accent-danger); animation: none; }
@keyframes statusPulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    70%  { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

.chat-close, .chat-action-btn {
    background: rgba(255,255,255,0.12); border: none; color: #fff;
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 13px;
    transition: background 0.18s;
}
.chat-close:hover, .chat-action-btn:hover { background: rgba(255,255,255,0.25); }

/* Case context bar */
.chat-case-bar {
    display: flex; align-items: center; gap: 7px;
    padding: 6px 14px;
    background: rgba(0, 210, 255, 0.06);
    border-bottom: 1px solid rgba(0,210,255,0.12);
    font-size: 11px; font-weight: 500;
    color: var(--accent-secondary);
    flex-shrink: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chat-case-bar.hidden { display: none; }
.chat-case-bar span { overflow: hidden; text-overflow: ellipsis; }

/* Messages container */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 14px 12px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 180px; max-height: 300px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Messages */
.chat-msg { display: flex; gap: 8px; animation: fadeIn 0.25s ease; }
.chat-msg.user { flex-direction: row-reverse; }

.chat-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(108,99,255,0.15);
    border: 1px solid rgba(108,99,255,0.25);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; align-self: flex-end;
    color: var(--accent-primary);
}
.chat-msg.user .chat-msg-avatar {
    background: rgba(0,210,255,0.15);
    border-color: rgba(0,210,255,0.25);
    color: var(--accent-secondary);
}

/* Content wrapper for bubble + timestamp */
.chat-msg-content {
    display: flex; flex-direction: column; gap: 3px;
    max-width: 80%;
}
.chat-msg.user .chat-msg-content { align-items: flex-end; }

.chat-msg-bubble {
    padding: 9px 13px;
    border-radius: 14px; font-size: 13px; line-height: 1.6;
    word-wrap: break-word;
}
.chat-msg.bot .chat-msg-bubble {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-bottom-left-radius: 4px;
    color: var(--text-primary);
}
.chat-msg.user .chat-msg-bubble {
    background: linear-gradient(135deg, rgba(108,99,255,0.8), rgba(67,56,202,0.9));
    color: #fff;
    border-bottom-right-radius: 4px;
    border: none;
}
/* Markdown formatting inside bubbles */
.chat-msg-bubble strong { color: inherit; font-weight: 700; }
.chat-msg-bubble em { font-style: italic; opacity: 0.85; }
.chat-msg-bubble ul {
    margin: 6px 0 0; padding-left: 16px;
    display: flex; flex-direction: column; gap: 2px;
}
.chat-msg-bubble ul li { list-style: disc; font-size: 12.5px; line-height: 1.5; }
.chat-msg-bubble ol { margin: 6px 0 0; padding-left: 18px; }
.chat-msg-bubble ol li { list-style: decimal; font-size: 12.5px; line-height: 1.5; }
.chat-msg-bubble .chat-highlight { color: var(--accent-secondary); font-weight: 600; }

/* Message timestamp */
.chat-msg-time {
    font-size: 10px;
    color: var(--text-muted);
    opacity: 0.6;
    padding: 0 3px;
}

/* 3-dot typing animation */
.chat-typing-dots {
    display: flex; align-items: center; gap: 4px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px; border-bottom-left-radius: 4px;
    width: fit-content;
}
.chat-typing-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--text-muted);
    display: inline-block;
    animation: typingBounce 1.3s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.18s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes typingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

/* Quick suggestions */
.chat-suggestions {
    display: flex; gap: 5px; padding: 8px 12px;
    flex-wrap: wrap; flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.chat-suggestion {
    padding: 5px 11px; font-size: 11px; font-weight: 500;
    background: rgba(108, 99, 255, 0.08);
    border: 1px solid rgba(108, 99, 255, 0.18);
    border-radius: var(--radius-full);
    color: rgba(180,175,255,0.9); cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.18s;
    white-space: nowrap;
}
.chat-suggestion:hover {
    background: rgba(108, 99, 255, 0.18);
    border-color: rgba(108, 99, 255, 0.4);
    color: #fff;
}

/* Input area */
.chat-input-area {
    display: flex; gap: 8px; padding: 10px 12px;
    border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
    background: rgba(0,0,0,0.15);
}
.chat-input-area input {
    flex: 1; padding: 9px 13px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--radius-full);
    color: var(--text-primary); font-family: var(--font-sans); font-size: 13px;
    outline: none; transition: border-color 0.18s, box-shadow 0.18s;
}
.chat-input-area input:focus {
    border-color: rgba(108,99,255,0.5);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.1);
}
.chat-input-area input::placeholder { color: var(--text-muted); }
.chat-send {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--gradient-primary); border: none;
    color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.chat-send:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(108,99,255,0.4); }
.chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

/* Light theme overrides */
[data-theme="light"] .chat-widget {
    background: rgba(255, 255, 255, 0.97);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .chat-msg.bot .chat-msg-bubble {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: var(--text-primary);
}
[data-theme="light"] .chat-input-area { background: rgba(0,0,0,0.03); }
[data-theme="light"] .chat-input-area input {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .chat-suggestions { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .chat-case-bar { background: rgba(0,180,210,0.05); }

@media (max-width: 480px) {
    .chat-widget { width: calc(100vw - 32px); right: 16px; bottom: 76px; max-height: calc(100vh - 100px); }
    .chat-fab { bottom: 16px; right: 16px; width: 48px; height: 48px; }
}


/* ============================================================
   ADMIN PANEL
   ============================================================ */

/* Sidebar admin link badge */
.sidebar-nav-badge {
    margin-left: auto;
    padding: 1px 7px;
    font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.6px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #6C63FF, #00D2FF);
    color: #fff;
    opacity: 0.9;
}
.sidebar-admin-link {
    background: rgba(108, 99, 255, 0.06) !important;
    border: 1px solid rgba(108, 99, 255, 0.15) !important;
    margin-top: 4px;
}
.sidebar-admin-link:hover {
    background: rgba(108, 99, 255, 0.14) !important;
    border-color: rgba(108, 99, 255, 0.3) !important;
}

/* Admin header brand */
.admin-header-brand {
    display: flex; align-items: center; gap: 10px;
}
.admin-header-icon {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(108,99,255,0.2), rgba(0,210,255,0.1));
    border: 1px solid rgba(108,99,255,0.3);
    border-radius: 8px;
    color: var(--accent-primary);
}
.instructor-badge {
    background: rgba(108, 99, 255, 0.18);
    color: var(--accent-primary);
    border: 1px solid rgba(108, 99, 255, 0.3);
    padding: 2px 10px;
    border-radius: var(--radius-full);
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Admin container */
.admin-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 32px;
}

/* ── Stats row ── */
.admin-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.admin-stat-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    transition: all var(--transition-normal);
}
.admin-stat-card:hover {
    border-color: rgba(108,99,255,0.25);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.admin-stat-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(108,99,255,0.1);
    border-radius: var(--radius-md);
    color: var(--ac, var(--accent-primary));
    background: color-mix(in srgb, var(--ac, #6C63FF) 12%, transparent);
}
.admin-stat-value {
    font-size: 26px; font-weight: 800; line-height: 1;
    letter-spacing: -1px;
}
.admin-stat-label {
    font-size: 12px; color: var(--text-muted);
    margin-top: 4px; font-weight: 500;
}

/* ── Admin toolbar ── */
.admin-toolbar {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.admin-search {
    flex: 1; min-width: 260px;
}
.admin-filters {
    display: flex; gap: 10px; flex-shrink: 0;
}

/* ── User table card ── */
.admin-table-card {
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.admin-table-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px; color: var(--text-muted);
    font-weight: 500;
    background: rgba(255,255,255,0.02);
}
.admin-table-body { min-height: 200px; }
.admin-loading {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 60px; gap: 12px;
    color: var(--text-muted); font-size: 14px;
}

/* Table itself */
.admin-user-table {
    width: 100%; border-collapse: collapse;
}
.admin-user-table thead th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.7px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    background: rgba(255,255,255,0.015);
    white-space: nowrap;
}
.admin-user-table tbody tr {
    transition: background 0.15s ease;
}
.admin-user-table tbody tr:hover {
    background: rgba(108,99,255,0.04);
}
.admin-user-table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    font-size: 13.5px; vertical-align: middle;
}
.admin-user-table tbody tr:last-child td { border-bottom: none; }

/* User avatar cell */
.admin-user-cell {
    display: flex; align-items: center; gap: 12px;
}
.admin-user-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, #6C63FF, #00D2FF);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; color: #fff;
    flex-shrink: 0;
}
.admin-user-name {
    font-weight: 600; font-size: 14px;
    margin-bottom: 2px;
}
.admin-user-email {
    font-size: 12px; color: var(--text-muted);
}

/* Role badges in table */
.admin-role-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.admin-role-badge.student {
    background: rgba(0,210,255,0.12);
    color: var(--accent-secondary);
    border: 1px solid rgba(0,210,255,0.2);
}
.admin-role-badge.instructor {
    background: rgba(108,99,255,0.14);
    color: var(--accent-primary);
    border: 1px solid rgba(108,99,255,0.25);
}

/* Status badges */
.admin-status-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.4px;
}
.admin-status-badge.active {
    background: rgba(74,222,128,0.12);
    color: var(--accent-success);
    border: 1px solid rgba(74,222,128,0.2);
}
.admin-status-badge.banned {
    background: rgba(255,107,107,0.12);
    color: var(--accent-danger);
    border: 1px solid rgba(255,107,107,0.2);
}
.admin-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: currentColor;
}

/* Action button & dropdown */
.admin-action-wrap {
    position: relative; display: inline-block;
}
.admin-action-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px;
    background: var(--bg-glass); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: var(--font-sans);
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.admin-action-btn:hover {
    background: rgba(108,99,255,0.1);
    border-color: rgba(108,99,255,0.3);
    color: var(--text-primary);
}
.admin-dropdown {
    position: absolute; right: 0; top: calc(100% + 6px);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0,0,0,0.4);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
    animation: slideDown 0.18s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.admin-dropdown-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    font-size: 13px; font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer; border: none;
    background: none; width: 100%;
    text-align: left; font-family: var(--font-sans);
    transition: all var(--transition-fast);
}
.admin-dropdown-item:hover {
    background: rgba(108,99,255,0.08);
    color: var(--text-primary);
}
.admin-dropdown-item.danger { color: var(--accent-danger); }
.admin-dropdown-item.danger:hover { background: rgba(255,107,107,0.08); }
.admin-dropdown-sep {
    height: 1px; background: var(--border-color); margin: 4px 0;
}

/* Empty state */
.admin-empty {
    text-align: center; padding: 60px 20px;
    color: var(--text-muted); font-size: 14px;
}
.admin-empty-icon { font-size: 40px; margin-bottom: 12px; }
.admin-empty h4 { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }

/* ── Confirmation Modal ── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.modal-overlay.hidden { display: none; }
.modal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 36px 32px;
    max-width: 420px; width: 90%;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
    animation: scaleIn 0.2s ease;
}
@keyframes scaleIn {
    from { transform: scale(0.92); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}
.modal-icon { font-size: 40px; margin-bottom: 16px; }
.modal-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 28px; }
.modal-actions { display: flex; gap: 12px; justify-content: center; }
.modal-actions .btn { min-width: 110px; }
.btn-danger {
    background: linear-gradient(135deg, #FF6B6B, #e05555) !important;
    color: #fff !important; border-color: transparent !important;
}
.btn-danger:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-warn {
    background: linear-gradient(135deg, #FFD93D, #f0c020) !important;
    color: #1a1a1a !important; border-color: transparent !important;
}

/* Light mode overrides */
[data-theme="light"] .admin-stat-card { background: #fff; }
[data-theme="light"] .admin-table-card { background: #fff; }
[data-theme="light"] .admin-user-table thead th { background: rgba(0,0,0,0.02); }
[data-theme="light"] .admin-user-table tbody tr:hover { background: rgba(108,99,255,0.04); }
[data-theme="light"] .admin-user-table tbody td { border-color: rgba(0,0,0,0.05); }
[data-theme="light"] .admin-dropdown { background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,0.15); }
[data-theme="light"] .modal-card { background: #fff; }
[data-theme="light"] .admin-table-header { background: rgba(0,0,0,0.015); }

/* Responsive */
@media (max-width: 900px) {
    .admin-stats-row { grid-template-columns: repeat(2, 1fr); }
    .admin-container { padding: 20px 16px; }
}
@media (max-width: 600px) {
    .admin-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
    .admin-toolbar { flex-direction: column; align-items: stretch; }
    .admin-filters { flex-wrap: wrap; }
}

/* ============================================================
   HAMBURGER BUTTON ANIMATION (3 lines → X)
   ============================================================ */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4.5px;
    width: 18px;
    height: 18px;
    pointer-events: none;
}
.hamburger-icon span {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
/* Hamburger → X when active */
.hamburger-open .hamburger-icon span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.hamburger-open .hamburger-icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.hamburger-open .hamburger-icon span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

/* ============================================================
   MOBILE OVERLAY BACKDROP
   ============================================================ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 39; /* behind sidebar (z-50 on mobile) */
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    display: none; /* hidden on desktop */
}
.sidebar-overlay.active {
    opacity: 1;
    pointer-events: all;
}
/* Body scroll lock when mobile menu open */
body.mobile-menu-open {
    overflow: hidden;
}

/* ============================================================
   RESPONSIVE — TABLET & MOBILE (< 1024px)
   Sidebar becomes full-height overlay drawer
   ============================================================ */
@media (max-width: 1023px) {
    /* Show overlay element */
    .sidebar-overlay {
        display: block;
    }

    /* Sidebar: full-height overlay covering header too */
    .dashboard-sidebar {
        top: 0;
        height: 100vh;
        width: 280px;
        z-index: 50;
        /* collapsed by default on mobile — starts off-screen */
    }

    /* Main content: NEVER has margin on mobile (sidebar is overlay) */
    .dashboard-main,
    .dashboard-main.sidebar-collapsed {
        margin-left: 0 !important;
    }

    /* Remove padding from dashboard-layout on mobile */
    .dashboard-layout {
        padding: 0;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE PHONE (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    /* Compact content padding */
    .dashboard-main {
        padding: 16px !important;
    }

    /* Single column cases grid */
    .cases-grid {
        grid-template-columns: 1fr !important;
    }

    /* 2-column stats */
    .stats-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Vertical workflow steps */
    .workflow-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .workflow-arrow {
        transform: rotate(90deg);
        align-self: center;
    }

    /* Compact header */
    .app-header {
        padding: 8px 14px;
    }

    /* Hero title smaller */
    .hero-title {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }
    .hero-stats {
        gap: 24px;
    }
    .hero-actions {
        flex-direction: column;
        align-items: center;
    }

    /* Case layout: vertical on mobile */
    .case-layout {
        flex-direction: column;
    }
    .panel-left {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    /* Chat widget full width */
    .chat-widget {
        width: calc(100vw - 32px);
        right: 16px;
        left: 16px;
        bottom: 80px;
    }

    /* Smaller sidebar toggle on mobile */
    .sidebar-toggle-btn {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   AI IMAGING ANALYSIS OVERLAY
   ============================================================ */

/* ── Scan animation (moving line) ── */
@keyframes scanLine {
    0%   { top: 0%; }
    100% { top: 100%; }
}
.pacs-scan-line {
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, #00D2FF, transparent);
    box-shadow: 0 0 12px #00D2FF, 0 0 24px rgba(0,210,255,0.5);
    pointer-events: none; z-index: 10;
    animation: scanLine 1.8s linear infinite;
}

/* ── AI overlay canvas ── */
#pacs-overlay-canvas {
    position: absolute; inset: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* ── Finding label chips ── */
.pacs-finding-chip {
    position: absolute; z-index: 20;
    padding: 3px 8px; border-radius: 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.4px;
    white-space: nowrap; pointer-events: auto; cursor: default;
    animation: contentReveal 0.4s ease;
    transition: transform 0.2s;
}
.pacs-finding-chip:hover { transform: scale(1.05); }
.chip-critical { background: rgba(255,59,59,0.85); color: #fff; border: 1px solid rgba(255,100,100,0.6); }
.chip-warning  { background: rgba(255,177,0,0.85);  color: #000; border: 1px solid rgba(255,200,0,0.6); }
.chip-info     { background: rgba(0,210,255,0.75);  color: #000; border: 1px solid rgba(0,210,255,0.5); }

/* ── AI Analysis panel in PACS sidebar ── */
.pacs-ai-section { display: flex; flex-direction: column; gap: 6px; }
.btn-pacs-analyze {
    width: 100%; padding: 8px 10px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, rgba(0,210,255,0.15), rgba(108,99,255,0.15));
    border: 1px solid rgba(0,210,255,0.3); color: #00D2FF;
    font-size: 11px; font-weight: 700; cursor: pointer;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.2s;
}
.btn-pacs-analyze:hover {
    background: linear-gradient(135deg, rgba(0,210,255,0.25), rgba(108,99,255,0.25));
    box-shadow: 0 0 12px rgba(0,210,255,0.2);
}
.btn-pacs-analyze:disabled { opacity: 0.5; cursor: not-allowed; }

/* Opacity slider */
.pacs-opacity-row {
    display: flex; align-items: center; gap: 7px; padding: 4px 0;
}
.pacs-opacity-label { font-size: 10px; color: rgba(255,255,255,0.4); flex-shrink: 0; }
.pacs-opacity-slider {
    flex: 1; -webkit-appearance: none; height: 3px;
    background: rgba(0,210,255,0.2); border-radius: 2px; outline: none; cursor: pointer;
}
.pacs-opacity-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
    background: #00D2FF; cursor: pointer; box-shadow: 0 0 6px rgba(0,210,255,0.5);
}
.pacs-overlay-toggle {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 10px; color: rgba(255,255,255,0.5); padding: 3px 0;
    cursor: pointer; user-select: none;
}
.pacs-toggle-pill {
    width: 28px; height: 14px; border-radius: 7px;
    background: rgba(0,210,255,0.3); border: 1px solid rgba(0,210,255,0.4);
    position: relative; transition: background 0.2s;
}
.pacs-toggle-pill.on { background: #00D2FF; }
.pacs-toggle-dot {
    width: 10px; height: 10px; border-radius: 50%; background: #fff;
    position: absolute; top: 1px; left: 1px;
    transition: left 0.2s;
}
.pacs-toggle-pill.on .pacs-toggle-dot { left: 15px; }

/* ── Findings list ── */
.pacs-findings-list { display: flex; flex-direction: column; gap: 4px; }
.pacs-finding-row {
    padding: 5px 7px; border-radius: 4px;
    background: rgba(255,255,255,0.04);
    border-left: 2px solid;
    cursor: pointer; transition: background 0.15s;
}
.pacs-finding-row:hover { background: rgba(255,255,255,0.08); }
.pacs-finding-row.sev-critical { border-color: #FF3B3B; }
.pacs-finding-row.sev-warning  { border-color: #FFB100; }
.pacs-finding-row.sev-info     { border-color: #00D2FF; }
.pacs-finding-name { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.85); }
.pacs-finding-conf { font-size: 9px; color: rgba(255,255,255,0.4); margin-top: 1px; }

/* ── Side-by-side compare ── */
.pacs-compare-wrap {
    flex: 1; display: flex; overflow: hidden;
}
.pacs-compare-pane {
    flex: 1; position: relative;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-right: 1px solid rgba(0,210,255,0.15);
}
.pacs-compare-pane:last-child { border-right: none; }
.pacs-pane-label {
    position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    font-size: 9px; font-weight: 800; letter-spacing: 1px;
    color: #00D2FF; background: rgba(0,0,0,0.6);
    padding: 2px 8px; border-radius: 4px; z-index: 5;
}

/* ============================================================
   SMART SYMPTOM SEMANTIC SEARCH
   ============================================================ */

/* ── Search Wrapper ── */
.smart-search-wrap {
    position: relative; flex: 1;
}

/* ── Search Bar ── */
.smart-search-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 0 14px;
    height: 44px;
    background: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all 0.25s ease;
}
.smart-search-bar:focus-within {
    border-color: rgba(108,99,255,0.5);
    box-shadow: 0 0 0 3px rgba(108,99,255,0.08), 0 0 20px rgba(108,99,255,0.1);
}
.search-icon-svg { color: var(--text-muted); flex-shrink: 0; transition: color 0.2s; }
.smart-search-bar:focus-within .search-icon-svg { color: var(--accent-primary); }

.smart-search-bar input {
    flex: 1; background: none; border: none; outline: none;
    font-size: 14px; color: var(--text-primary);
    font-family: var(--font-sans);
}
.smart-search-bar input::placeholder { color: var(--text-muted); font-size: 13px; }

.search-ai-badge {
    padding: 2px 7px; border-radius: var(--radius-full);
    font-size: 9px; font-weight: 800; letter-spacing: 0.8px;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff; flex-shrink: 0;
}
.search-clear-btn {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 12px; flex-shrink: 0; padding: 2px;
    transition: color 0.15s;
}
.search-clear-btn:hover { color: var(--text-primary); }

/* ── Dropdown Panel ── */
.smart-search-dropdown {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 500;
    background: var(--bg-card);
    border: 1px solid rgba(108,99,255,0.2);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 24px rgba(108,99,255,0.08);
    overflow: hidden;
    animation: dropdownReveal 0.2s ease;
}
@keyframes dropdownReveal {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Dropdown Sections ── */
.ssd-section { padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.05); }
.ssd-section:last-child { border-bottom: none; }
.ssd-section-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.6px; color: var(--text-muted); margin-bottom: 8px;
}

/* ── Recent Chips ── */
.ssd-recent-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ssd-recent-chip {
    padding: 3px 10px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary); font-size: 12px; cursor: pointer;
    transition: all 0.15s;
    display: flex; align-items: center; gap: 4px;
}
.ssd-recent-chip:hover {
    background: rgba(108,99,255,0.1); border-color: rgba(108,99,255,0.25);
    color: var(--accent-primary);
}
.ssd-recent-empty { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ── Suggestion Rows ── */
.ssd-suggestion-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 8px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background 0.15s;
}
.ssd-suggestion-row:hover { background: rgba(108,99,255,0.07); }
.ssd-sugg-icon { font-size: 14px; flex-shrink: 0; }
.ssd-sugg-text { font-size: 13px; color: var(--text-secondary); flex: 1; }
.ssd-sugg-text mark {
    background: rgba(108,99,255,0.2); color: var(--accent-primary);
    border-radius: 2px; padding: 0 2px;
}
.ssd-sugg-type {
    font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.05); color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Semantic Result Rows ── */
.ssd-result-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 8px 8px; border-radius: var(--radius-sm);
    cursor: pointer; transition: background 0.15s;
    border-left: 2px solid transparent;
}
.ssd-result-row:hover {
    background: rgba(108,99,255,0.05);
    border-left-color: var(--accent-primary);
}
.ssd-result-icon {
    width: 28px; height: 28px; border-radius: 7px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; background: rgba(255,255,255,0.05);
}
.ssd-result-body { flex: 1; min-width: 0; }
.ssd-result-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ssd-result-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.ssd-result-score {
    flex-shrink: 0; font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: var(--radius-full);
    background: rgba(74,222,128,0.12); color: #4ADE80;
}
.ssd-no-results { font-size: 12px; color: var(--text-muted); font-style: italic; padding: 4px 8px; }

/* ── Specialty Pills ── */
.ssd-specialty-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.1);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ssd-specialty-label { font-size: 10px; color: var(--text-muted); font-weight: 600; flex-shrink: 0; }
.ssd-specialty-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.ssd-pill {
    padding: 3px 9px; border-radius: var(--radius-full);
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted); font-size: 11px; font-weight: 600;
    cursor: pointer; transition: all 0.15s;
}
.ssd-pill:hover { background: rgba(108,99,255,0.1); border-color: rgba(108,99,255,0.25); color: var(--accent-primary); }
.ssd-pill.active { background: rgba(108,99,255,0.15); border-color: rgba(108,99,255,0.35); color: var(--accent-primary); }