/**
 * HeuriSight App Shell Layout
 * Based on: mockups/apple-redesign/01-main-app-shell.html
 * 
 * Provides the main application layout structure:
 * - Sidebar (left navigation)
 * - Main content area
 * - Optional right panel
 */

/* =============================================================================
   APP CONTAINER
   ============================================================================= */

.hs-app {
    display: flex;
    height: 100vh;
    overflow: hidden;
    background: var(--bg-primary, #FFFFFF);
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */

.hs-sidebar {
    width: var(--sidebar-width, 260px);
    min-width: var(--sidebar-width, 260px);
    max-width: var(--sidebar-width, 260px);
    flex-shrink: 0;
    overflow-x: hidden;
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #F5F5F7);
    border-right: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    height: 100vh;
    overflow: hidden;
}

.hs-sidebar__header {
    height: var(--header-height, 52px);
    padding: 0 var(--space-4, 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.hs-sidebar__content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-3, 12px);
}

.hs-sidebar__footer {
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    overflow: hidden;
}

/* Logo */
.hs-logo {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.hs-logo__mark {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: contain;
}

/* When logo is an img element, don't add background */
img.hs-logo__mark {
    background: transparent;
}

/* When logo is a div (fallback), show colored background with icon */
div.hs-logo__mark {
    background: var(--accent, #0071E3);
}

div.hs-logo__mark svg {
    width: 16px;
    height: 16px;
    fill: white;
}

.hs-logo__text {
    font-family: var(--font-display);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-primary, #1D1D1F);
}

/* =============================================================================
   GRAPH VISUALIZATION
   ============================================================================= */

.visualization-container {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 520px;
    overflow: hidden;
    border-radius: var(--radius-lg, 16px);
    background: var(--bg-secondary, #F5F5F7);
}

#graph-3d-container {
    width: 100%;
    height: 100%;
}

/* Sidebar Action Button */
.hs-sidebar__action {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.hs-sidebar__action:hover {
    background: var(--border-light, rgba(0, 0, 0, 0.06));
    color: var(--text-primary, #1D1D1F);
}

/* =============================================================================
   MAIN CONTENT AREA
   ============================================================================= */

.hs-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-primary, #FFFFFF);
}

.hs-main__header {
    height: var(--header-height, 52px);
    padding: 0 var(--space-6, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    flex-shrink: 0;
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.hs-main__title {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.hs-main__title,
.hs-main__title h1 {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.hs-main__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* Header Controls (voice toggle + model selector) */
.hs-main__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-left: auto;
    margin-right: var(--space-4, 16px);
}

.hs-header-model-selector {
    min-width: 180px;
    max-width: 280px;
}

.hs-select {
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-family: var(--font-sans);
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 10px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.hs-select:hover {
    border-color: var(--accent, #0071E3);
}

.hs-select:focus {
    outline: none;
    border-color: var(--accent, #0071E3);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(0, 113, 227, 0.08));
}

.hs-select--compact {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    padding-right: 28px;
    font-size: var(--text-xs, 11px);
    border-radius: var(--radius-sm, 8px);
}

/* Voice toggle button in header */
.voice-toggle-btn {
    color: var(--text-secondary, #6E6E73);
    position: relative;
}

.voice-toggle-btn:hover {
    color: var(--accent, #0071E3);
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
}

/* Active/listening state - prominent visual feedback */
.voice-toggle-btn.active,
.voice-toggle-btn.listening {
    color: #FFFFFF;
    background: var(--accent, #0071E3);
}

.voice-toggle-btn.active:hover,
.voice-toggle-btn.listening:hover {
    background: var(--accent-hover, #0077ED);
}

/* Pulsing ring animation when active */
.voice-toggle-btn.active::before,
.voice-toggle-btn.listening::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: var(--radius-md, 10px);
    border: 2px solid var(--accent, #0071E3);
    opacity: 0.6;
    animation: voice-pulse 1.5s ease-in-out infinite;
}

@keyframes voice-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.08);
        opacity: 0.3;
    }
}

/* Dark theme for header controls */
[data-theme="dark"] .hs-select {
    background-color: var(--bg-tertiary, #3A3A3C);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
    color: var(--text-primary, #FFFFFF);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238E8E93' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

[data-theme="dark"] .voice-toggle-btn.active,
[data-theme="dark"] .voice-toggle-btn.listening {
    background: var(--accent, #0071E3);
    color: #FFFFFF;
}

.hs-main__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6, 24px);
}

/* =============================================================================
   TAB CONTENT (Legacy tab system)
   ============================================================================= */

.tab-content {
    display: none;
    flex: 1;
    min-height: 0;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
}

.tab-header-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    background: var(--bg-primary, #FFFFFF);
}

.tab-header-controls .model-selector-container {
    flex: 1 1 auto;
    min-width: 0;
}

/* Header Button */
.hs-header-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 101;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

/* Model Indicator */
.hs-model-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-default);
}

.hs-model-indicator:hover {
    background: var(--border-light, rgba(0, 0, 0, 0.06));
}

.hs-model-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full, 9999px);
    background: var(--success, #34C759);
}

.hs-model-name {
    font-weight: 500;
}

.hs-model-indicator svg {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.hs-model-indicator.hs-hidden {
    display: none;
}

.hs-header-btn:hover {
    background: var(--border-light, rgba(0, 0, 0, 0.06));
    color: var(--text-primary, #1D1D1F);
}

.hs-header-btn svg {
    width: 18px;
    height: 18px;
}

/* =============================================================================
   RIGHT PANEL (Optional)
   ============================================================================= */

.hs-panel-right {
    width: var(--panel-width, 320px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #F5F5F7);
    border-left: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.hs-panel-right__header {
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.hs-panel-right__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 16px);
}

/* =============================================================================
   SECTION HEADERS
   ============================================================================= */

.hs-section {
    margin-bottom: var(--space-4, 16px);
}

.hs-section__header {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-tertiary, #86868B);
}

.hs-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1, 4px);
}

/* Empty state for sidebar sections */
.hs-empty-state {
    padding: var(--space-6, 24px);
    text-align: center;
    color: var(--text-tertiary, #86868B);
}

.hs-empty-state--compact {
    padding: var(--space-4, 16px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
}

.hs-empty-state p {
    margin: 0;
}

/* =============================================================================
   SECTION HEADINGS (Consistent typography for section titles)
   ============================================================================= */

.section-heading {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    letter-spacing: -0.01em;
    margin: 0;
    line-height: 1.3;
}

/* Inline variant - no margin bottom */
.section-heading--inline {
    margin-bottom: 0;
}

/* Small variant for sub-sections */
.section-heading--small {
    font-size: var(--text-base, 15px);
    font-weight: 600;
}

/* Extra small for tertiary headings */
.section-heading--xs {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
}

/* Subtle variant with muted color */
.section-heading--subtle {
    color: var(--text-secondary, #6E6E73);
}

/* Dark theme */
[data-theme="dark"] .section-heading {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .section-heading--subtle {
    color: var(--text-tertiary, #86868B);
}

/* =============================================================================
   USER CARD
   ============================================================================= */

.hs-user-card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
}

.hs-user-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

.hs-user-card__avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(135deg, #5E5CE6, #BF5AF2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.hs-user-card__info {
    flex: 1;
    min-width: 0;
}

.hs-user-card__name {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-user-card__role {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

/* =============================================================================
   LEGACY CLASS COMPATIBILITY
   ============================================================================= */

.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: var(--sidebar-width, 260px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #F5F5F7);
    border-right: 1px solid var(--border-light);
}

.sidebar-header {
    height: var(--header-height, 52px);
    padding: 0 var(--space-4, 16px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3, 12px);
}

.sidebar-footer {
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-light);
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-primary, #FFFFFF);
}

.main-header {
    height: var(--header-height, 52px);
    padding: 0 var(--space-6, 24px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* =============================================================================
   DARK THEME
   ============================================================================= */

[data-theme="dark"] .hs-sidebar,
[data-theme="dark"] .sidebar {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .hs-panel-right {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .hs-sidebar__action:hover,
[data-theme="dark"] .hs-header-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .hs-user-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* =============================================================================
   SIDEBAR LAYOUT MODE (Feature Flag)
   When .hs-app--sidebar is added, switches from horizontal to sidebar nav
   ============================================================================= */

.hs-app--sidebar {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Ensure #app-content has proper flex layout when sidebar is active */
#app-content.hs-app--sidebar {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    padding: 0 !important;
    margin: 0;
    gap: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

/* Sidebar within the new layout */
.hs-app--sidebar > .hs-sidebar,
#app-content.hs-app--sidebar > .hs-sidebar {
    display: flex !important;
    flex-direction: column !important;
    width: var(--sidebar-width, 260px) !important;
    min-width: var(--sidebar-width, 260px) !important;
    flex-shrink: 0 !important;
    height: 100vh !important;
}

.hs-app--sidebar .app-header {
    display: none !important; /* Hide legacy horizontal header */
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.hs-app--sidebar .header-nav {
    display: none !important;
}

/* Remove any top spacing from main content wrapper */
.hs-app--sidebar #main-content,
.hs-app--sidebar .main-content-wrapper {
    padding-top: 0;
    margin-top: 0;
}

/* Ensure grid-container doesn't add legacy min-height calculations */
.hs-app--sidebar .grid-container {
    min-height: auto;
    height: 100%;
}

/* Override unified-container in sidebar mode */
.hs-app--sidebar .unified-container {
    height: 100%;
    max-height: 100%;
    gap: 0;
    padding: 0;
}

.hs-app--sidebar .unified-container .panel.primary-panel {
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

/* Tab content should fill available space */
.hs-app--sidebar .tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* Reset any explicit padding/gaps on content containers */
.hs-app--sidebar #chat-content.active,
.hs-app--sidebar #knowledge-content.active,
.hs-app--sidebar #journal-content.active,
.hs-app--sidebar #heuristics-content.active {
    padding-top: 0;
    margin-top: 0;
    overflow-x: hidden;
}

/* All tab contents should fill available space when active */
.hs-app--sidebar .tab-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: auto;
}

.hs-app--sidebar .app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;  /* Critical for flex children to shrink */
    /* Override legacy max-width and centering */
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hs-app--sidebar .panel.primary-panel {
    flex: 1;
    border-radius: 0;
    margin: 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Keep the mobile bottom nav hidden on desktop in sidebar mode */
.hs-app--sidebar .mobile-bottom-nav {
    display: none;
}

/* Minimize the tab-header-controls in sidebar mode (content already in hs-main__header) */
.hs-app--sidebar .tab-header-controls {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    background: transparent;
    border-bottom: none;
    gap: var(--space-2, 8px);
}

/* Hide redundant elements in sidebar mode header controls */
.hs-app--sidebar #chat-fullscreen-toggle {
    display: none;
}

/* Hide empty panel-header in sidebar mode - header is now in hs-main__header */
.hs-app--sidebar .panel.primary-panel > .panel-header:empty,
.hs-app--sidebar .panel.primary-panel > .panel-header {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Remove any gaps/margins between header and content in sidebar mode */
.hs-app--sidebar .panel.primary-panel {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hs-app--sidebar .panel.primary-panel > .panel-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.hs-app--sidebar .tab-content.active {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* =============================================================================
   CHAT LAYOUT (Scrollable messages, fixed input)
   Complete flex chain from app-main to chat-messages
   ============================================================================= */

/* Panel content must properly contain flex children */
.hs-app--sidebar .panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    height: 100%;
}

/* Tab content fills panel - only when active */
.hs-app--sidebar #chat-content.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    height: 100%;
}

/* Chat container fills tab content */
.hs-app--sidebar .chat-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    height: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Messages area is scrollable */
.hs-app--sidebar .chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-6, 24px);
    padding-bottom: var(--space-4, 16px);
}

/* =============================================================================
   HEADER CONTROLS IN SIDEBAR MODE
   Move chat-header-controls into the main header area
   ============================================================================= */

/* Hide the tab-header-controls container - we'll move contents to main header */
.hs-app--sidebar #chat-header-controls {
    display: none !important;
}

/* Hide mobile mode toggle (handled by desktop toggle) */
.hs-app--sidebar .mobile-mode-toggle {
    display: none !important;
}

/* =============================================================================
   CHAT FOCUS UI (Document editing context indicator)
   ============================================================================= */

/* =============================================================================
   SCROLL TO BOTTOM BUTTON
   ============================================================================= */

.scroll-to-bottom-button {
    position: absolute;
    bottom: var(--space-4, 16px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: 50%;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, 0.08));
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
    z-index: 50;
}

.scroll-to-bottom-button:hover {
    background: var(--bg-secondary, #F5F5F7);
    color: var(--text-primary, #1D1D1F);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
}

.scroll-to-bottom-button.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.scroll-to-bottom-button svg {
    width: 18px;
    height: 18px;
}

/* Dark theme */
[data-theme="dark"] .scroll-to-bottom-button {
    background: var(--bg-tertiary, #2C2C2E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .scroll-to-bottom-button:hover {
    background: var(--bg-secondary, #3A3A3C);
}

/* =============================================================================
   CHAT FOCUS UI (Document editing context indicator)
   ============================================================================= */

.chat-focus-container {
    display: none; /* Hidden by default, shown when document workspace is active */
}

.chat-focus-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}

.chat-focus-label {
    font-weight: 500;
    color: var(--text-tertiary, #86868B);
    font-size: var(--text-xs, 11px);
    flex-shrink: 0;
}

.chat-focus-scope {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    background: var(--bg-secondary, #F5F5F7);
    border: none;
    border-radius: var(--radius-full, 9999px);
    color: var(--text-primary, #1D1D1F);
    cursor: pointer;
    max-width: 200px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: var(--space-6, 24px);
}

.chat-focus-scope:hover {
    background: var(--bg-tertiary, #E8E8ED);
}

.chat-focus-scope:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-subtle, rgba(0, 113, 227, 0.2));
}

/* Dark theme */
[data-theme="dark"] .chat-focus-chip {
    background: var(--bg-tertiary, #2C2C2E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .chat-focus-scope {
    background: var(--bg-secondary, #1C1C1E);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

[data-theme="dark"] .chat-focus-scope:hover {
    background-color: var(--bg-tertiary, #3A3A3C);
}

/* =============================================================================
   CHAT INPUT AREA (Apple-style design)
   ============================================================================= */

.hs-app--sidebar .chat-input-container {
    padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-6, 24px);
    background: var(--bg-primary, #FFFFFF);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;  /* Don't shrink - stay visible at bottom */
}

/* Mode toggle controls (Instant/Research) - also contains editing dropdown */
.hs-app--sidebar .chat-mode-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
}

/* When document workspace is open, show editing dropdown inline with mode controls */
body.document-workspace-open .chat-focus-container {
    display: flex;
    align-items: center;
    margin-bottom: 0;
}

body.document-workspace-open .chat-focus-chip {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: var(--space-2, 8px);
}

.hs-app--sidebar .chat-mode-toggle {
    display: inline-flex;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px);
    background: var(--bg-secondary, #F5F5F7);
    border-radius: var(--radius-full, 9999px);
}

.hs-app--sidebar .chat-mode-btn {
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary, #6E6E73);
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.hs-app--sidebar .chat-mode-btn:hover {
    color: var(--text-primary, #1D1D1F);
}

.hs-app--sidebar .chat-mode-btn[aria-pressed="true"],
.hs-app--sidebar .chat-mode-btn.active {
    background: var(--bg-primary, #FFFFFF);
    color: var(--text-primary, #1D1D1F);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
}

/* Input wrapper - pill-shaped container */
.hs-app--sidebar .chat-input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2, 8px);
    width: 100%;
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-2, 8px);
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.hs-app--sidebar .chat-input-wrapper:focus-within {
    border-color: var(--accent, #0071E3);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(0, 113, 227, 0.08));
}

/* Textarea styling */
.hs-app--sidebar .chat-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-base, 15px);
    line-height: 1.5;
    color: var(--text-primary, #1D1D1F);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    resize: none;
    max-height: 200px;
    min-height: 24px;
}

.hs-app--sidebar .chat-input::placeholder {
    color: var(--text-tertiary, #86868B);
}

/* Attach button */
.hs-app--sidebar .chat-attach-button {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-tertiary, #86868B);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
    flex-shrink: 0;
}

.hs-app--sidebar .chat-attach-button:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-secondary, #6E6E73);
}

/* Send button */
.hs-app--sidebar .chat-send-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--accent, #0071E3);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
    flex-shrink: 0;
}

.hs-app--sidebar .chat-send-button:hover:not(:disabled) {
    background: var(--accent-hover, #0077ED);
}

.hs-app--sidebar .chat-send-button:disabled {
    background: var(--gray-300, #D2D2D7);
    cursor: not-allowed;
}

.hs-app--sidebar .chat-send-button svg {
    width: 16px;
    height: 16px;
}

/* Stop button */
.hs-app--sidebar .chat-stop-button {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--destructive, #FF3B30);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    flex-shrink: 0;
}

.hs-app--sidebar .chat-stop-button:hover {
    background: #E63329;
}

/* Dark theme for chat input */
[data-theme="dark"] .hs-app--sidebar .chat-input-container {
    background: var(--bg-primary, #1C1C1E);
}

[data-theme="dark"] .hs-app--sidebar .chat-mode-toggle {
    background: var(--bg-tertiary, #3A3A3C);
}

[data-theme="dark"] .hs-app--sidebar .chat-mode-btn[aria-pressed="true"],
[data-theme="dark"] .hs-app--sidebar .chat-mode-btn.active {
    background: var(--bg-secondary, #2C2C2E);
}

[data-theme="dark"] .hs-app--sidebar .chat-input-wrapper {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .hs-app--sidebar .chat-attach-button:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   MOBILE MENU BUTTON (Hamburger)
   ============================================================================= */

.hs-mobile-menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md, 12px);
    background: transparent;
    color: var(--text-primary, #1D1D1F);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms) var(--ease-default);
    flex-shrink: 0;
}

.hs-mobile-menu-btn:hover {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
}

.hs-mobile-menu-btn:active {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.08));
}

[data-theme="dark"] .hs-mobile-menu-btn {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .hs-mobile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   SIDEBAR BACKDROP (Mobile)
   ============================================================================= */

.hs-sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-overlay, 300) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal, 250ms) var(--ease-default),
                visibility var(--duration-normal, 250ms) var(--ease-default);
}

.hs-sidebar-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .hs-sidebar-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* =============================================================================
   SIDEBAR CLOSE BUTTON (Mobile)
   ============================================================================= */

.hs-sidebar__close {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.hs-sidebar__close:hover {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #1D1D1F);
}

[data-theme="dark"] .hs-sidebar__close {
    color: var(--text-secondary, #98989D);
}

[data-theme="dark"] .hs-sidebar__close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #F5F5F7);
}

.hs-sidebar__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* =============================================================================
   BODY SCROLL LOCK (Mobile sidebar open)
   ============================================================================= */

body.sidebar-open {
    overflow: hidden;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 768px) {
    /* Show hamburger menu button */
    .hs-mobile-menu-btn {
        display: flex;
    }

    /* Show sidebar backdrop */
    .hs-sidebar-backdrop {
        display: block;
    }

    /* Show sidebar close button */
    .hs-sidebar__close {
        display: flex;
    }

    /* Sidebar slide-in behavior */
    .hs-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        z-index: var(--z-overlay, 300);
        transform: translateX(-100%);
        transition: transform var(--duration-normal, 250ms) var(--ease-default);
        box-shadow: none;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .hs-sidebar.visible {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.15);
    }

    /* Ensure sidebar content area scrolls on mobile */
    .hs-sidebar__content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        min-height: 0; /* Required for flex child scrolling */
    }

    /* Ensure footer stays at bottom */
    .hs-sidebar__footer {
        flex-shrink: 0;
    }

    /* Hide right panel on mobile */
    .hs-panel-right {
        display: none;
    }

    /* Adjust main header for mobile */
    .hs-main__header {
        padding: var(--space-3, 12px) var(--space-4, 16px);
        gap: var(--space-2, 8px);
    }

    .hs-main__title h1 {
        font-size: var(--text-base, 15px);
    }

    /* Hide model selector on mobile header (use sidebar instead) */
    .hs-main__controls .hs-header-model-selector {
        display: none;
    }

    /* Compact header controls on mobile */
    .hs-main__controls {
        gap: var(--space-2, 8px);
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1199px) {
    .hs-sidebar {
        width: 240px;
    }

    .hs-sidebar__header .hs-logo__text {
        display: none;
    }
}

/* =============================================================================
   MODEL STUDIO (Unified Reasoning view)
   ============================================================================= */

.model-studio {
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-xl, 20px);
    box-shadow: var(--shadow-md, 0 12px 36px rgba(0, 0, 0, 0.08));
    overflow: hidden;
}

.model-studio__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px) var(--space-6, 24px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    background: var(--bg-primary, #FFFFFF);
}

.model-studio__title-text {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-xl, 20px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

.model-studio__subtitle {
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
    margin-top: var(--space-1, 4px);
}

.model-studio__header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.model-studio__header-actions .btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md, 12px);
}

.model-studio__header-actions .btn-icon svg {
    width: 18px;
    height: 18px;
}

.model-studio__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    min-height: 520px;
}

.model-studio__table-panel {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    padding: var(--space-5, 20px) var(--space-6, 24px);
    gap: var(--space-4, 16px);
    min-width: 0;
}

.model-studio__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-md, 12px);
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    flex-wrap: wrap;
}

.model-studio__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-width: 0;
}

.model-studio__controls .form-control {
    min-width: 180px;
}

.model-studio__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-wrap: wrap;
}

.model-studio__graph-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-primary, #FFFFFF);
}

.model-studio__graph-header {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    background: var(--bg-secondary, #F5F5F7);
}

/* Permission banner icons */
.permission-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Permission banner inline with tabs */
.permission-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    color: var(--accent, #0071E3);
    white-space: nowrap;
    flex-shrink: 0;
}

.permission-banner i {
    font-size: var(--text-xs, 11px);
}

/* Dark theme */
[data-theme="dark"] .model-studio {
    background: var(--bg-primary, #1C1C1E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .model-studio__header {
    background: var(--bg-primary, #1C1C1E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .model-studio__toolbar,
[data-theme="dark"] .model-studio__graph-header {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .model-studio__table-panel {
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

/* =============================================================================
   MANAGE MODELS MODAL
   ============================================================================= */

.manage-models-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-6, 24px);
}

.manage-models-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-4, 16px);
}

.manage-models-section__title {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-4, 16px);
}

.models-grid__loading {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3, 12px);
    padding: var(--space-8, 32px);
    color: var(--text-tertiary, #86868B);
    font-size: var(--text-sm, 13px);
}

.models-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-8, 32px);
    color: var(--text-tertiary, #86868B);
    font-size: var(--text-sm, 13px);
}

.model-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-4, 16px);
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-lg, 16px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.model-card:hover {
    border-color: var(--accent, #0071E3);
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.1);
}

.model-card--active {
    border-color: var(--accent, #0071E3);
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
}

.model-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-2, 8px);
}

.model-card__name {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.model-card__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    flex-shrink: 0;
}

.model-card__badge {
    flex-shrink: 0;
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.model-card__badge--public {
    background: rgba(48, 209, 88, 0.12);
    color: #30D158;
}

.model-card__description {
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
    line-height: 1.4;
    margin-bottom: var(--space-3, 12px);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-grow: 1;
}

.model-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin-top: auto;
}

.model-card__stats {
    display: flex;
    gap: var(--space-4, 16px);
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

.model-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    opacity: 0;
    transition: opacity var(--duration-fast, 150ms) var(--ease-default);
}

.model-card:hover .model-card__actions {
    opacity: 1;
}

.model-card__action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-tertiary, #86868B);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.model-card__action:hover {
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.04));
    color: var(--text-primary, #1D1D1F);
}

.model-card__action--active {
    color: #30D158;
}

.model-card__action--active:hover {
    color: #30D158;
}

.model-card__action--danger:hover {
    background: rgba(255, 69, 58, 0.1);
    color: #FF453A;
}

.model-card__stat {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
}

/* Dark theme for manage models */
[data-theme="dark"] .manage-models-section__title {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .model-card {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .model-card:hover {
    border-color: var(--accent, #0A84FF);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.15);
}

[data-theme="dark"] .model-card--active {
    border-color: var(--accent, #0A84FF);
    background: rgba(10, 132, 255, 0.12);
}

[data-theme="dark"] .model-card__name {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .model-card__badge {
    background: rgba(10, 132, 255, 0.15);
    color: var(--accent, #0A84FF);
}

[data-theme="dark"] .model-card__badge--public {
    background: rgba(48, 209, 88, 0.15);
    color: #30D158;
}

[data-theme="dark"] .model-card__action {
    color: var(--text-tertiary, #98989D);
}

[data-theme="dark"] .model-card__action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .model-card__action--danger:hover {
    background: rgba(255, 69, 58, 0.15);
    color: #FF453A;
}

/* Responsive: Stack on smaller screens */
@media (max-width: 1024px) {
    .model-studio__content {
        grid-template-columns: 1fr;
    }

    .model-studio__table-panel {
        border-right: none;
        border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    }

    .model-studio__graph-panel {
        min-height: 420px;
    }
}

@media (max-width: 768px) {
    .model-studio__header {
        flex-direction: column;
        align-items: flex-start;
    }

    .model-studio__controls {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .model-studio__controls .form-control {
        width: 100%;
        min-width: 0;
    }

    .model-studio__actions {
        width: 100%;
        justify-content: flex-start;
    }
}

/* =============================================================================
   PERSONA EDITOR (Compact layout for Reasoning > Persona tab)
   ============================================================================= */

#persona-content .hs-space-y-4 {
    gap: var(--space-2, 8px);
}

#persona-content .section-heading {
    margin-bottom: var(--space-2, 8px);
}

#persona-content .surface-card {
    padding: var(--space-3, 12px);
}

.surface-card--compact {
    padding: var(--space-3, 12px) !important;
}

/* Surface card title - consistent with section headings */
.surface-card__title {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0 0 var(--space-3, 12px) 0;
    line-height: 1.3;
}

#persona-content .surface-card__title {
    font-size: var(--text-base, 15px);
    margin-bottom: var(--space-3, 12px);
}

.persona-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.persona-editor .form-group {
    margin-bottom: 0;
}

.persona-editor .form-label {
    font-size: var(--text-sm, 13px);
    margin-bottom: var(--space-1, 4px);
}

.persona-editor .form-actions {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

/* =============================================================================
   DOCUMENT WORKSPACE PANEL
   Right-side panel for document editing and management
   ============================================================================= */

/* CSS Variables for document workspace (set by JS) */
:root {
    --document-workspace-width: 480px;
    --document-workspace-toc-height: 200px;
}

/* Main panel container */
.document-workspace {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--document-workspace-width, 480px);
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #F5F5F7);
    border-left: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, 0.12));
    z-index: var(--z-modal, 400);
    transform: translateX(100%);
    transition: transform var(--duration-normal, 250ms) var(--ease-default);
}

.document-workspace.open {
    transform: translateX(0);
}

/* Resize handle */
.document-workspace__resize-handle {
    position: absolute;
    top: 0;
    left: -4px;
    width: 8px;
    height: 100%;
    cursor: ew-resize;
    background: transparent;
    z-index: 10;
}

.document-workspace__resize-handle:hover,
.document-workspace--resizing .document-workspace__resize-handle {
    background: var(--accent, #0071E3);
    opacity: 0.3;
}

/* Header */
.document-workspace__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--bg-tertiary, #E8E8ED);
    border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
    gap: var(--space-2, 8px);
}

.document-workspace__header-left {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex: 1;
    min-width: 0;
}

.document-workspace__header-right,
.document-workspace__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1, 4px);
    flex-shrink: 0;
}

/* More menu within header */
.document-workspace__more-menu {
    position: relative;
}

.document-workspace__more-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: var(--space-1, 4px);
    margin-top: var(--space-1, 4px);
}

.document-workspace__menu-label {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #86868B);
}

.document-workspace__title {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    white-space: nowrap;
}

.document-workspace__artifact {
    flex: 1;
    min-width: 0;
    max-width: 200px;
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary, #1D1D1F);
    cursor: pointer;
}

/* Body */
.document-workspace__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* TOC Section */
.document-workspace__toc {
    flex-shrink: 0;
    height: var(--document-workspace-toc-height, 200px);
    min-height: 80px;
    max-height: 400px;
    overflow-y: auto;
    border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    background: var(--bg-primary, #FFFFFF);
}

.document-workspace__toc-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--bg-tertiary, #E8E8ED);
    border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
}

.document-workspace__toc-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.document-workspace__toc-row:hover {
    background: var(--bg-tertiary, #E8E8ED);
}

.document-workspace__toc-row.active {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    border-left-color: var(--accent, #0071E3);
    color: var(--text-primary, #1D1D1F);
}

.document-workspace__toc-item {
    flex: 1;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
}

.document-workspace__toc-actions {
    display: flex;
    gap: var(--space-1, 4px);
    opacity: 0;
    transition: opacity var(--duration-fast, 150ms);
}

.document-workspace__toc-row:hover .document-workspace__toc-actions {
    opacity: 1;
}

.document-workspace__drag-handle {
    cursor: grab;
    color: var(--text-tertiary, #86868B);
    font-size: 10px;
    user-select: none;
}

/* TOC Resize handle */
.document-workspace__toc-resize-handle {
    height: 4px;
    cursor: ns-resize;
    background: transparent;
    transition: background var(--duration-fast, 150ms);
}

.document-workspace__toc-resize-handle:hover {
    background: var(--accent, #0071E3);
    opacity: 0.3;
}

/* Content area */
.document-workspace__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.document-workspace__content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--bg-tertiary, #E8E8ED);
    border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    flex-shrink: 0;
}

.document-workspace__section-title {
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

.document-workspace__content-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

/* Edit toggle checkbox label */
.document-workspace__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    user-select: none;
}

.document-workspace__toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--accent, #0071E3);
    cursor: pointer;
}

.document-workspace__toggle span {
    line-height: 1;
}

.document-workspace__toggle:hover {
    color: var(--text-primary, #1D1D1F);
}

.document-workspace__content-body {
    flex: 1;
    padding: var(--space-4, 16px);
    overflow-y: auto;
    background: var(--bg-primary, #FFFFFF);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-sm, 13px);
    line-height: 1.6;
    color: var(--text-primary, #1D1D1F);
}

/* Document content typography */
.document-workspace__content-body h1,
.document-workspace__content-body h2 {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0 0 var(--space-3, 12px) 0;
    line-height: 1.3;
}

.document-workspace__content-body h3 {
    font-family: var(--font-display, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: var(--space-4, 16px) 0 var(--space-2, 8px) 0;
    line-height: 1.3;
}

.document-workspace__content-body h4,
.document-workspace__content-body h5,
.document-workspace__content-body h6 {
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: var(--space-3, 12px) 0 var(--space-2, 8px) 0;
    line-height: 1.3;
}

.document-workspace__content-body p {
    margin: 0 0 var(--space-3, 12px) 0;
}

.document-workspace__content-body ul,
.document-workspace__content-body ol {
    margin: 0 0 var(--space-3, 12px) 0;
    padding-left: var(--space-5, 20px);
}

.document-workspace__content-body li {
    margin-bottom: var(--space-1, 4px);
}

/* Edit mode */
.document-workspace__content-body textarea {
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: var(--space-3, 12px);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-sm, 13px);
    line-height: 1.6;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-sm, 8px);
    color: var(--text-primary, #1D1D1F);
    resize: vertical;
}

/* Empty states */
.document-workspace__empty,
.document-workspace__start {
    padding: var(--space-6, 24px);
    text-align: center;
    color: var(--text-tertiary, #86868B);
}

.document-workspace__start-title {
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin-bottom: var(--space-2, 8px);
}

.document-workspace__start-subtitle {
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
    margin-bottom: var(--space-4, 16px);
}

/* Toggle button */
.document-workspace__toggle-btn {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-right: none;
    border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    z-index: var(--z-modal, 400);
    transition: all var(--duration-fast, 150ms);
}

.document-workspace__toggle-btn:hover {
    background: var(--bg-tertiary, #E8E8ED);
    color: var(--text-primary, #1D1D1F);
}

.document-workspace__toggle-btn.active {
    right: var(--document-workspace-width, 480px);
}

/* Menu dropdown */
.document-workspace__menu {
    position: relative;
}

.document-workspace__menu-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    box-shadow: var(--shadow-lg);
    z-index: 100;
    padding: var(--space-1, 4px);
}

.document-workspace__menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    background: none;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast, 150ms);
}

.document-workspace__menu-item:hover {
    background: var(--bg-secondary, #F5F5F7);
}

.document-workspace__menu-item--danger {
    color: var(--destructive, #FF3B30);
}

.document-workspace__menu-divider {
    height: 1px;
    background: var(--border-default, rgba(0, 0, 0, 0.1));
    margin: var(--space-1, 4px) 0;
}

/* Processing state */
.document-workspace__body.is-processing {
    opacity: 0.6;
    pointer-events: none;
}

/* Buttons within workspace */
.document-workspace .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms);
}

.document-workspace .btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-secondary, #6E6E73);
}

.document-workspace .btn-ghost:hover {
    background: var(--bg-tertiary, #E8E8ED);
    color: var(--text-primary, #1D1D1F);
}

.document-workspace .btn-secondary {
    background: var(--bg-tertiary, #E8E8ED);
    border: none;
    color: var(--text-primary, #1D1D1F);
}

.document-workspace .btn-secondary:hover {
    background: var(--bg-primary, #FFFFFF);
}

.document-workspace .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
}

.document-workspace .btn-xs {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    gap: var(--space-1, 4px);
}

.document-workspace .btn-ghost {
    color: var(--text-secondary, #6E6E73);
}

.document-workspace .btn-ghost:hover {
    color: var(--text-primary, #1D1D1F);
}

/* Inline icon in buttons */
.document-workspace .btn-icon-inline {
    display: inline-flex;
    align-items: center;
    margin-right: var(--space-1, 4px);
}

.document-workspace .btn-icon-inline svg {
    width: 14px;
    height: 14px;
}

/* Dark theme */
[data-theme="dark"] .document-workspace {
    background: var(--bg-secondary, #1C1C1E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .document-workspace__header,
[data-theme="dark"] .document-workspace__toc-controls,
[data-theme="dark"] .document-workspace__content-header {
    background: var(--bg-tertiary, #2C2C2E);
}

[data-theme="dark"] .document-workspace__toc,
[data-theme="dark"] .document-workspace__content-body {
    background: var(--bg-secondary, #1C1C1E);
}

[data-theme="dark"] .document-workspace__menu-dropdown,
[data-theme="dark"] .document-workspace__more-dropdown {
    background: var(--bg-tertiary, #2C2C2E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .document-workspace__toggle-btn {
    background: var(--bg-tertiary, #2C2C2E);
}

[data-theme="dark"] .document-workspace__toggle {
    color: var(--text-tertiary, #86868B);
}

[data-theme="dark"] .document-workspace__toggle:hover {
    color: var(--text-primary, #F5F5F7);
}

/* Body class when workspace is open - shift main content */
body.document-workspace-open .hs-main,
body.document-workspace-open .app-main {
    margin-right: var(--document-workspace-width, 480px);
    transition: margin-right var(--duration-normal, 250ms) var(--ease-default);
}

/* Resizing state (horizontal panel resize) */
body.document-workspace--resizing {
    cursor: ew-resize;
    user-select: none;
}

body.document-workspace--resizing * {
    cursor: ew-resize !important;
    user-select: none !important;
}

/* TOC resizing state (vertical) */
body.document-workspace--toc-resizing {
    cursor: ns-resize;
    user-select: none;
}

body.document-workspace--toc-resizing * {
    cursor: ns-resize !important;
    user-select: none !important;
}

/* Modal backdrops for document workspace */
.docws-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal, 400);
}

.docws-modal-backdrop.hidden {
    display: none;
}

.docws-modal {
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    box-shadow: var(--shadow-xl);
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.docws-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
}

.docws-modal__header h3 {
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

.docws-modal__body {
    padding: var(--space-4, 16px);
    overflow-y: auto;
    flex: 1;
}

.docws-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    border-top: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
}

[data-theme="dark"] .docws-modal {
    background: var(--bg-secondary, #1C1C1E);
}

/* Snapshot items */
.docws-snapshot-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px);
    border-bottom: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
}

.docws-snapshot-item:last-child {
    border-bottom: none;
}

.docws-snapshot-item__info {
    flex: 1;
    min-width: 0;
}

.docws-snapshot-item__title {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
}

.docws-snapshot-item__meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
    margin-top: 2px;
}

.docws-snapshot-item__actions {
    display: flex;
    gap: var(--space-1, 4px);
}

.docws-snapshot-loading,
.docws-snapshot-empty {
    padding: var(--space-6, 24px);
    text-align: center;
    color: var(--text-tertiary, #86868B);
    font-size: var(--text-sm, 13px);
}

/* Spinner animation */
@keyframes docws-spin {
    to { transform: rotate(360deg); }
}

.docws-spin {
    animation: docws-spin 1s linear infinite;
}

/* =============================================================================
   DOCUMENT WORKSPACE FAB (Mobile)
   ============================================================================= */

.docws-fab {
    display: none;
    position: fixed;
    bottom: calc(var(--space-4, 16px) + 60px); /* Above bottom nav */
    right: var(--space-4, 16px);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent, #0071E3);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.35);
    cursor: pointer;
    z-index: var(--z-fab, 200);
    transition: transform var(--duration-fast, 150ms) var(--ease-default),
                box-shadow var(--duration-fast, 150ms) var(--ease-default);
}

.docws-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.4);
}

.docws-fab:active {
    transform: scale(0.95);
}

.docws-fab svg {
    width: 24px;
    height: 24px;
}

[data-theme="dark"] .docws-fab {
    background: var(--accent, #0A84FF);
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.35);
}

/* Mobile responsive - Document Workspace */
@media (max-width: 767px) {
    /* Show FAB on mobile */
    .docws-fab {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Hide FAB when workspace is open or bottom nav is hidden */
    body.document-workspace-open .docws-fab,
    body.dashboard-open .docws-fab {
        display: none;
    }

    /* Document workspace as bottom sheet on mobile */
    .document-workspace {
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 90vh;
        max-height: 90vh;
        border-radius: var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;
        transform: translateY(100%);
        transition: transform var(--duration-normal, 250ms) var(--ease-default);
        z-index: var(--z-modal, 500);
    }
    
    .document-workspace.visible {
        transform: translateY(0);
    }
    
    .document-workspace__toggle-btn {
        display: none;
    }
    
    body.document-workspace-open .hs-main,
    body.document-workspace-open .app-main {
        margin-right: 0;
    }

    /* Add drag handle at top of bottom sheet */
    .document-workspace::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 36px;
        height: 4px;
        background: var(--border-default, rgba(0, 0, 0, 0.2));
        border-radius: 2px;
    }

    /* Document workspace header adjustments for mobile */
    .document-workspace__header {
        padding-top: var(--space-5, 20px);
    }
}

/* Document workspace backdrop for mobile bottom sheet */
.docws-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: calc(var(--z-modal, 500) - 1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-normal, 250ms) var(--ease-default),
                visibility var(--duration-normal, 250ms) var(--ease-default);
}

.docws-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

@media (max-width: 767px) {
    .docws-backdrop {
        display: block;
    }
}

[data-theme="dark"] .docws-backdrop {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .document-workspace::before {
    background: rgba(255, 255, 255, 0.2);
}

/* =============================================================================
   DASHBOARD OVERLAYS (Facilitator, Instructor, Student dashboards)
   ============================================================================= */

/* Theme backdrop - solid background for overlay panels */
.theme-backdrop {
    background: var(--bg-primary, #FFFFFF);
}

[data-theme="dark"] .theme-backdrop {
    background: var(--bg-primary, #1C1C1E);
}

/* Facilitator Dashboard Overlay */
#facilitator-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--bg-primary, #FFFFFF);
    overflow: hidden;
}

#facilitator-dashboard.hidden {
    display: none !important;
}

#facilitator-dashboard > div {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Dashboard header */
#facilitator-dashboard header {
    flex-shrink: 0;
    background: var(--bg-secondary, #F5F5F7);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    padding: var(--space-4, 16px);
}

#facilitator-dashboard header h1 {
    font-family: var(--font-display);
    font-size: var(--text-xl, 20px);
    font-weight: 600;
    color: var(--purple, #AF52DE);
    margin: 0;
}

/* Dashboard content wrapper */
.dashboard-content-wrapper {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* Dashboard sidebar */
.dashboard-sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--bg-primary, #FFFFFF);
    border-right: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Sidebar Header */
.dashboard-sidebar__header {
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.dashboard-sidebar__logo {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.dashboard-sidebar__logo-img {
    width: 28px;
    height: 28px;
}

.dashboard-sidebar__logo-text {
    font-family: var(--font-display);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

/* Sidebar Navigation */
.dashboard-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3, 12px);
}

.dashboard-sidebar__section {
    margin-bottom: var(--space-4, 16px);
}

.dashboard-sidebar__section:last-child {
    margin-bottom: 0;
}

.dashboard-sidebar__section-label {
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    color: var(--text-tertiary, #86868B);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    margin-bottom: var(--space-1, 4px);
}

/* Navigation Button */
.dashboard-nav-btn {
    width: 100%;
    text-align: left;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-sm, 8px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary, #6E6E73);
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    transition: all var(--duration-fast, 150ms);
    margin-bottom: var(--space-1, 4px);
}

.dashboard-nav-btn:last-child {
    margin-bottom: 0;
}

.dashboard-nav-btn__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.dashboard-nav-btn span {
    flex: 1;
}

.dashboard-nav-btn:hover {
    background: var(--bg-secondary, #F5F5F7);
    color: var(--text-primary, #1D1D1F);
}

.dashboard-nav-btn.active {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.dashboard-nav-btn.active .dashboard-nav-btn__icon {
    color: var(--accent, #0071E3);
}

/* Badge for notifications */
.dashboard-nav-btn__badge {
    display: none;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--destructive, #FF3B30);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
    text-align: center;
    line-height: 18px;
}

.dashboard-nav-btn__badge:not(:empty) {
    display: inline-block;
}

/* Sidebar Footer */
.dashboard-sidebar__footer {
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    background: var(--bg-primary, #FFFFFF);
}

.dashboard-sidebar__user {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms);
}

.dashboard-sidebar__user:hover {
    background: var(--bg-secondary, #F5F5F7);
}

.dashboard-sidebar__user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(135deg, var(--accent, #0071E3), var(--purple, #AF52DE));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.dashboard-sidebar__user-info {
    flex: 1;
    min-width: 0;
}

.dashboard-sidebar__user-name {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-sidebar__user-role {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

/* Dashboard main content area */
.dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-secondary, #F5F5F7);
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px) var(--space-6, 24px);
    background: var(--bg-primary, #FFFFFF);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    flex-shrink: 0;
}

.dashboard-header__left {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
}

.dashboard-header__title {
    font-family: var(--font-display);
    font-size: var(--text-xl, 20px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.dashboard-header__right {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.dashboard-header__selector {
    min-width: 280px;
}

.dashboard-header__select {
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2386868B' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

.dashboard-header__select:hover {
    border-color: var(--accent, #0071E3);
}

.dashboard-header__select:focus {
    outline: none;
    border-color: var(--accent, #0071E3);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(0, 113, 227, 0.1));
}

.dashboard-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.dashboard-header__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-secondary, #6E6E73);
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms);
}

.dashboard-header__btn:hover {
    background: var(--bg-secondary, #F5F5F7);
    border-color: var(--border-medium, rgba(0, 0, 0, 0.15));
    color: var(--text-primary, #1D1D1F);
}

.dashboard-header__btn--primary {
    background: var(--accent, #0071E3);
    color: white;
    border-color: var(--accent, #0071E3);
}

.dashboard-header__btn--primary:hover {
    background: var(--accent-hover, #0077ED);
    border-color: var(--accent-hover, #0077ED);
    color: white;
}

.dashboard-header__btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Dashboard Main Area (scrollable content) */
.dashboard-main-area {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4, 16px) var(--space-6, 24px);
    background: var(--bg-primary, #FFFFFF);
}

/* Secondary Actions Row */
.dashboard-secondary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4, 16px);
}

.dashboard-secondary-actions__left,
.dashboard-secondary-actions__right {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
    text-decoration: none;
    transition: color var(--duration-fast, 150ms);
}

.dashboard-link:hover {
    color: var(--accent, #0071E3);
}

.dashboard-link__icon {
    width: 12px;
    height: 12px;
}

.dashboard-meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

/* Dark theme support */
[data-theme="dark"] #facilitator-dashboard {
    background: var(--bg-primary, #1C1C1E);
}

[data-theme="dark"] #facilitator-dashboard header {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .dashboard-sidebar {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .dashboard-sidebar__header,
[data-theme="dark"] .dashboard-sidebar__footer {
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
    background: var(--bg-secondary, #2C2C2E);
}

[data-theme="dark"] .dashboard-sidebar__logo-text {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-nav-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-nav-btn.active {
    background: rgba(0, 113, 227, 0.2);
}

[data-theme="dark"] .dashboard-sidebar__user:hover {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dashboard-sidebar__user-name {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-main {
    background: var(--bg-secondary, #2C2C2E);
}

[data-theme="dark"] .dashboard-header {
    background: var(--bg-primary, #1C1C1E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .dashboard-header__title {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-header__select {
    background-color: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-header__btn {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
    color: var(--text-secondary, #A1A1A6);
}

[data-theme="dark"] .dashboard-header__btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-main-area {
    background: var(--bg-primary, #1C1C1E);
}

/* =============================================================================
   DASHBOARD RESPONSIVE (Mobile)
   ============================================================================= */

@media (max-width: 768px) {
    /* Dashboard content wrapper - stack sidebar and main vertically */
    .dashboard-content-wrapper {
        flex-direction: column;
    }

    /* Convert sidebar to horizontal scrolling tabs on mobile */
    .dashboard-sidebar {
        width: 100%;
        height: auto;
        max-height: none;
        flex-shrink: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
        display: flex;
        flex-direction: column;
    }

    .dashboard-sidebar__header {
        display: none; /* Hide logo on mobile - shown in main header */
    }

    .dashboard-sidebar__footer {
        display: none; /* Hide user card on mobile - shown in main header */
    }

    .dashboard-sidebar__nav {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        overflow-x: auto;
        overflow-y: hidden;
        padding: var(--space-2, 8px) var(--space-3, 12px);
        gap: var(--space-2, 8px);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex: none;
    }

    .dashboard-sidebar__nav::-webkit-scrollbar {
        display: none;
    }

    /* Flatten sections - buttons flow directly in nav */
    .dashboard-sidebar__section {
        display: contents;
    }

    /* Hide section labels on mobile */
    .dashboard-sidebar__section-label {
        display: none !important;
    }

    /* Nav buttons as horizontal tabs */
    .dashboard-nav-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-1, 4px);
        padding: var(--space-2, 8px) var(--space-3, 12px);
        min-width: 64px;
        white-space: nowrap;
        flex-shrink: 0;
        border-radius: var(--radius-md, 12px);
    }

    .dashboard-nav-btn .dashboard-nav-btn__icon {
        width: 20px;
        height: 20px;
    }

    .dashboard-nav-btn span {
        font-size: var(--text-xs, 11px);
        text-align: center;
    }

    /* Dashboard main area adjustments */
    .dashboard-main {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    /* Dashboard header compact on mobile */
    .dashboard-header {
        padding: var(--space-3, 12px) var(--space-4, 16px);
        flex-wrap: wrap;
        gap: var(--space-2, 8px);
    }

    .dashboard-header__title {
        font-size: var(--text-lg, 17px);
    }

    .dashboard-header__selector {
        min-width: 100%;
        order: 3;
    }

    /* Cohort selector - handle long text with ellipsis */
    .dashboard-header__select {
        max-width: 100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    /* Dashboard metrics cards stack on mobile */
    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dashboard content area */
    .dashboard-content {
        padding: var(--space-4, 16px);
    }

    /* Dashboard main area - ensure scrolling content works */
    .dashboard-main-area {
        overflow-y: auto;
        flex: 1;
    }

    /* ==========================================================================
       STUDENT 360 - MOBILE RESPONSIVE
       ========================================================================== */

    .s360-selector-bar {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-3, 12px) var(--space-4, 16px);
    }

    .s360-selector-bar__search {
        flex: none;
        width: 100%;
    }

    .s360-select {
        max-width: 100%;
        width: 100%;
    }

    .s360-selector-bar__hint {
        display: none;
    }

    /* Profile bar - stack on mobile */
    .s360-profile-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3, 12px);
        padding: var(--space-4, 16px);
    }

    .s360-profile-avatar {
        width: 48px;
        height: 48px;
    }

    .s360-profile-info {
        width: 100%;
    }

    .s360-profile-name {
        font-size: var(--text-base, 15px);
    }

    .s360-profile-stats {
        width: 100%;
        justify-content: flex-start;
        gap: var(--space-4, 16px);
    }

    .s360-header-stat-value {
        font-size: var(--text-lg, 17px);
    }

    .s360-actions-dropdown {
        width: 100%;
    }

    .s360-actions-trigger {
        width: 100%;
        justify-content: center;
    }

    /* Center avatar on mobile for better visual balance */
    .s360-profile-bar {
        align-items: center;
        text-align: center;
    }

    .s360-profile-info {
        text-align: center;
    }

    .s360-profile-stats {
        justify-content: center;
    }

    /* ==========================================================================
       S360 BODY & CARDS - MOBILE
       ========================================================================== */

    .s360-body {
        padding: var(--space-4, 16px);
    }

    .s360-content-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4, 16px);
    }

    .s360-main-col {
        gap: var(--space-4, 16px);
    }

    /* Cards - ensure consistent spacing */
    .s360-card {
        margin-bottom: var(--space-4, 16px);
    }

    .s360-card-header {
        padding: var(--space-3, 12px);
    }

    .s360-card-body {
        padding: var(--space-3, 12px);
    }

    /* Competency items - better touch targets */
    .s360-competency-item {
        padding: var(--space-3, 12px);
    }

    .s360-competency-item__name {
        font-size: var(--text-sm, 13px);
    }

    /* Chart containers - ensure they fit on mobile */
    .s360-pattern-card,
    .dashboard-chart-card {
        overflow: hidden;
    }

    .s360-pattern-card canvas,
    .dashboard-chart-card canvas {
        max-width: 100%;
        height: auto !important;
    }

    /* Radar chart container - allow horizontal scroll if needed */
    .s360-pattern-chart,
    .dashboard-chart-card__body {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Chart legend - wrap on mobile */
    .s360-pattern-legend,
    .dashboard-chart-card__legend {
        flex-wrap: wrap;
        gap: var(--space-2, 8px);
        justify-content: center;
    }

    /* Competency summary - stack on mobile */
    .s360-competency-summary {
        padding: var(--space-3, 12px);
    }

    .s360-competency-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2, 8px);
    }

    .s360-competency-name {
        font-size: var(--text-base, 15px);
    }

    /* Assessment cards - full width */
    .s360-assessment-card {
        padding: var(--space-3, 12px);
    }

    /* Recommendation card - full width text */
    .s360-recommendation {
        padding: var(--space-3, 12px);
    }
}

/* Smaller mobile (320-375px) */
@media (max-width: 375px) {
    .dashboard-nav-btn {
        padding: var(--space-1, 4px) var(--space-2, 8px);
    }

    .dashboard-nav-btn span {
        font-size: 10px;
    }

    .dashboard-metrics {
        grid-template-columns: 1fr;
    }

    /* Radar chart - smaller on very small screens */
    .s360-pattern-chart {
        height: 240px;
        max-width: 280px;
    }

    /* Profile stats - stack vertically on very small screens */
    .s360-profile-stats {
        flex-direction: column;
        gap: var(--space-2, 8px);
    }

    .s360-header-stat {
        display: flex;
        align-items: center;
        gap: var(--space-2, 8px);
    }

    .s360-header-stat-value {
        font-size: var(--text-base, 15px);
    }
}

/* =============================================================================
   DASHBOARD METRIC CARDS
   ============================================================================= */

.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-6, 24px);
}

@media (max-width: 1024px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.dashboard-metric-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow var(--duration-fast, 150ms);
}

.dashboard-metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dashboard-metric-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--gray-100, #F5F5F7);
    color: var(--text-secondary, #6E6E73);
}

.dashboard-metric-card__icon svg {
    width: 20px;
    height: 20px;
}

.dashboard-metric-card__content {
    flex: 1;
    min-width: 0;
}

.dashboard-metric-card__label {
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    color: var(--text-tertiary, #86868B);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1, 4px);
}

.dashboard-metric-card__value {
    font-family: var(--font-display);
    font-size: var(--text-2xl, 24px);
    font-weight: 700;
    color: var(--text-primary, #1D1D1F);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.dashboard-metric-card__meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
    margin-top: var(--space-1, 4px);
}

.dashboard-metric-card__meta--positive {
    color: var(--success, #34C759);
}

.dashboard-metric-card__meta--negative {
    color: var(--destructive, #FF3B30);
}

/* Metric card color variants */
.dashboard-metric-card--accent .dashboard-metric-card__icon {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.dashboard-metric-card--accent .dashboard-metric-card__value {
    color: var(--accent, #0071E3);
}

.dashboard-metric-card--success .dashboard-metric-card__icon {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

.dashboard-metric-card--success .dashboard-metric-card__value {
    color: var(--success, #34C759);
}

.dashboard-metric-card--destructive .dashboard-metric-card__icon {
    background: var(--destructive-subtle, rgba(255, 59, 48, 0.12));
    color: var(--destructive, #FF3B30);
}

.dashboard-metric-card--destructive .dashboard-metric-card__value {
    color: var(--destructive, #FF3B30);
}

/* =============================================================================
   DASHBOARD CHART CARDS
   ============================================================================= */

.dashboard-charts {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-6, 24px);
}

@media (max-width: 1024px) {
    .dashboard-charts {
        grid-template-columns: 1fr;
    }
}

.dashboard-chart-card {
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

.dashboard-chart-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3, 12px);
}

.dashboard-chart-card__title {
    font-family: var(--font-display);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.dashboard-chart-card__body {
    position: relative;
    height: 280px;
}

.dashboard-chart-card__body--donut {
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dashboard-chart-card__legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4, 16px);
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.dashboard-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-xs, 11px);
    color: var(--text-secondary, #6E6E73);
}

.dashboard-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full, 9999px);
    background: var(--gray-400, #86868B);
}

.dashboard-legend-dot--success {
    background: var(--success, #34C759);
}

.dashboard-legend-dot--accent {
    background: var(--accent, #0071E3);
}

.dashboard-legend-dot--destructive {
    background: var(--destructive, #FF3B30);
}

/* =============================================================================
   DASHBOARD TABLE CARD
   ============================================================================= */

.dashboard-table-card {
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-4, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    margin-bottom: var(--space-6, 24px);
}

.dashboard-table-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4, 16px);
}

.dashboard-table-card__title {
    font-family: var(--font-display);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.dashboard-table-card__count {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
    margin-left: var(--space-2, 8px);
}

.dashboard-table-card__footer {
    display: flex;
    justify-content: center;
    padding: var(--space-3, 12px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

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

.dashboard-table th {
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    color: var(--text-tertiary, #86868B);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.dashboard-table td {
    padding: var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    vertical-align: middle;
}

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

.dashboard-table tbody tr:hover {
    background: var(--bg-secondary, #F5F5F7);
}

.dashboard-table__empty td {
    padding: var(--space-8, 32px);
    text-align: center;
}

.dashboard-table__empty:hover {
    background: transparent !important;
}

/* Student cell with avatar */
.dashboard-student-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.dashboard-student-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(135deg, var(--accent, #0071E3), var(--purple, #AF52DE));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.dashboard-student-info {
    min-width: 0;
}

.dashboard-student-name {
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-student-email {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

/* Progress bar */
.dashboard-progress {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

.dashboard-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--gray-200, #E8E8ED);
    border-radius: var(--radius-full, 9999px);
    overflow: hidden;
    min-width: 80px;
}

.dashboard-progress-bar__fill {
    height: 100%;
    border-radius: var(--radius-full, 9999px);
    transition: width var(--duration-normal, 300ms);
}

.dashboard-progress-bar__fill--success {
    background: var(--success, #34C759);
}

.dashboard-progress-bar__fill--warning {
    background: var(--warning, #FF9500);
}

.dashboard-progress-bar__fill--danger {
    background: var(--destructive, #FF3B30);
}

.dashboard-progress-value {
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    color: var(--text-secondary, #6E6E73);
    min-width: 36px;
    text-align: right;
}

/* Status badge */
.dashboard-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    border-radius: var(--radius-full, 9999px);
}

.dashboard-status-badge--at-risk {
    background: var(--destructive-subtle, rgba(255, 59, 48, 0.12));
    color: var(--destructive, #FF3B30);
}

.dashboard-status-badge--struggling {
    background: var(--warning-subtle, rgba(255, 149, 0, 0.12));
    color: var(--warning, #FF9500);
}

.dashboard-status-badge--inactive {
    background: var(--gray-200, #E8E8ED);
    color: var(--text-secondary, #6E6E73);
}

.dashboard-status-badge--on-track {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

/* Action button in table */
.dashboard-table-action {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-xs, 11px);
    font-weight: 500;
    color: var(--accent, #0071E3);
    background: transparent;
    border: 1px solid var(--accent, #0071E3);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms);
}

.dashboard-table-action:hover {
    background: var(--accent, #0071E3);
    color: white;
}

/* Empty state */
.dashboard-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2, 8px);
    color: var(--text-tertiary, #86868B);
}

.dashboard-empty-state__icon {
    width: 48px;
    height: 48px;
    color: var(--gray-300, #D2D2D7);
}

/* =============================================================================
   DARK THEME - Dashboard Components
   ============================================================================= */

[data-theme="dark"] .dashboard-metric-card {
    background: var(--bg-secondary, #2C2C2E);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .dashboard-metric-card__icon {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .dashboard-metric-card__value {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-chart-card,
[data-theme="dark"] .dashboard-table-card {
    background: var(--bg-secondary, #2C2C2E);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .dashboard-chart-card__title,
[data-theme="dark"] .dashboard-table-card__title {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-chart-card__legend {
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .dashboard-table th,
[data-theme="dark"] .dashboard-table td {
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .dashboard-table td {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .dashboard-student-name {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .dashboard-progress-bar {
    background: var(--gray-700, #3A3A3C);
}

[data-theme="dark"] .dashboard-status-badge--inactive {
    background: var(--gray-700, #3A3A3C);
}

/* =============================================================================
   STUDENT 360 VIEW - COMPETENCY CENTRIC REDESIGN
   ============================================================================= */

/* Selector Bar */
.s360-selector-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-6, 24px);
    background: var(--bg-primary, #FFFFFF);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.s360-selector-bar__search {
    flex: 0 0 200px;
}

.s360-search-input {
    width: 100%;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    background: var(--bg-primary, #FFFFFF);
}

.s360-search-input:focus {
    outline: none;
    border-color: var(--accent, #0071E3);
    box-shadow: 0 0 0 3px var(--accent-subtle, rgba(0, 113, 227, 0.08));
}

.s360-select {
    flex: 1;
    max-width: 300px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 13px);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    background: var(--bg-primary, #FFFFFF);
    cursor: pointer;
}

.s360-selector-bar__hint {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
    margin-left: auto;
}

/* Profile Bar with Header Stats and Actions Dropdown */
.s360-profile-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4, 16px);
    padding: var(--space-4, 16px) var(--space-6, 24px);
    background: var(--bg-primary, #FFFFFF);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.s360-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 9999px);
    background: linear-gradient(135deg, #5E5CE6, #BF5AF2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.s360-profile-info {
    flex: 1;
    min-width: 0;
}

.s360-profile-name {
    font-family: var(--font-display);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

.s360-profile-meta {
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
}

/* Header Stats (in profile bar) */
.s360-profile-stats {
    display: flex;
    gap: var(--space-6, 24px);
}

.s360-header-stat {
    text-align: center;
}

.s360-header-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl, 20px);
    font-weight: 700;
    color: var(--success, #34C759);
}

.s360-header-stat-label {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Actions Dropdown */
.s360-actions-dropdown {
    position: relative;
}

.s360-actions-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-3, 12px);
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
    cursor: pointer;
    transition: background var(--duration-fast, 150ms);
}

.s360-actions-trigger:hover {
    background: var(--gray-200, #E8E8ED);
}

.s360-actions-trigger svg {
    width: 16px;
    height: 16px;
    transition: transform var(--duration-fast, 150ms);
}

.s360-actions-dropdown.open .s360-actions-trigger svg {
    transform: rotate(180deg);
}

.s360-actions-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    background: var(--bg-primary, #FFFFFF);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    border-radius: var(--radius-md, 12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 100;
    overflow: hidden;
}

.s360-actions-dropdown.open .s360-actions-menu {
    display: block;
}

.s360-actions-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: none;
    border: none;
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    cursor: pointer;
    text-align: left;
    transition: background var(--duration-fast, 150ms);
}

.s360-actions-item:hover {
    background: var(--bg-secondary, #F5F5F7);
}

.s360-actions-item svg {
    width: 16px;
    height: 16px;
    color: var(--accent, #0071E3);
}

/* Body container */
.s360-body {
    padding: var(--space-5, 20px) var(--space-6, 24px);
    background: var(--bg-secondary, #F5F5F7);
    min-height: calc(100vh - 200px);
}

/* Two Column Layout */
.s360-two-col {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-5, 20px);
    max-width: 1200px;
    margin: 0 auto;
}

.s360-main-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
}

.s360-sidebar-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 16px);
}

@media (max-width: 900px) {
    .s360-two-col {
        grid-template-columns: 1fr;
    }
    .s360-sidebar-col {
        order: -1; /* Move sidebar above main on mobile */
    }
}

/* Learning Pattern Card */
.s360-pattern-card {
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    padding: var(--space-5, 20px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.s360-pattern-header {
    margin-bottom: var(--space-3, 12px);
}

.s360-pattern-title {
    font-family: var(--font-display);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
}

/* Chart container - takes full width */
.s360-pattern-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Large centered chart - expanded width */
.s360-pattern-chart {
    width: 100%;
    max-width: 400px;
    height: 320px;
    position: relative;
    margin: 0 auto;
}

.s360-pattern-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

/* Footer with legend and insight */
.s360-pattern-footer {
    margin-top: var(--space-4, 16px);
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    text-align: center;
}

/* Legend below chart */
.s360-pattern-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-6, 24px);
    margin-bottom: var(--space-3, 12px);
}

.s360-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
}

.s360-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.s360-legend-dot--student {
    background: var(--accent, #0071E3);
}

.s360-legend-dot--cohort {
    background: var(--gray-300, #D2D2D7);
}

.s360-pattern-insight {
    font-size: var(--text-sm, 13px);
    color: var(--text-secondary, #6E6E73);
    line-height: 1.5;
    margin: 0;
}

/* AI Insight (Collapsible Details) */
.s360-insight-details {
    background: linear-gradient(135deg, var(--purple-subtle, rgba(175, 82, 222, 0.12)), var(--accent-subtle, rgba(0, 113, 227, 0.08)));
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

.s360-insight-summary {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    cursor: pointer;
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--purple, #AF52DE);
    list-style: none;
}

.s360-insight-summary::-webkit-details-marker {
    display: none;
}

.s360-insight-summary svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.s360-insight-chevron {
    margin-left: auto;
    transition: transform var(--duration-fast, 150ms);
}

.s360-insight-details[open] .s360-insight-chevron {
    transform: rotate(180deg);
}

.s360-insight-content {
    padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}

.s360-insight-text {
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    line-height: 1.5;
    margin: 0;
}

/* Learning Recommendation Card (Always Expanded) */
.s360-recommendation-card {
    background: linear-gradient(135deg, var(--purple-subtle, rgba(175, 82, 222, 0.12)), var(--accent-subtle, rgba(0, 113, 227, 0.08)));
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;
}

.s360-recommendation-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--purple, #AF52DE);
    border-bottom: 1px solid rgba(175, 82, 222, 0.15);
}

.s360-recommendation-header svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.s360-recommendation-content {
    padding: var(--space-4, 16px);
}

.s360-recommendation-text {
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    line-height: 1.6;
    margin: 0;
}

.s360-recommendation-text strong {
    font-weight: 600;
}

[data-theme="dark"] .s360-recommendation-card {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.2), rgba(0, 113, 227, 0.12));
}

/* Vertical Competency List (Sidebar) */
.s360-competency-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
}

.s360-competency-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3, 12px);
    background: var(--bg-secondary, #F5F5F7);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms);
}

.s360-competency-item:hover {
    background: var(--gray-200, #E8E8ED);
}

.s360-competency-item.active {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    border-color: var(--accent, #0071E3);
}

.s360-competency-item__name {
    flex: 1;
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s360-competency-item__score {
    font-family: var(--font-mono);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    flex-shrink: 0;
    margin-left: var(--space-2, 8px);
}

.s360-competency-item__score--good {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

.s360-competency-item__score--average {
    background: var(--warning-subtle, rgba(255, 149, 0, 0.12));
    color: var(--warning, #FF9500);
}

.s360-competency-item__score--low {
    background: var(--destructive-subtle, rgba(255, 59, 48, 0.12));
    color: var(--destructive, #FF3B30);
}

/* Generic Card */
.s360-card {
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.s360-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.s360-card-title {
    font-family: var(--font-display);
    font-size: var(--text-base, 15px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.s360-card-subtitle {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

.s360-card-action {
    font-size: var(--text-sm, 13px);
    color: var(--accent, #0071E3);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.s360-card-action:hover {
    text-decoration: underline;
}

.s360-card-body {
    padding: var(--space-4, 16px);
}

/* Competency Section (Detail Card) */
.s360-competency-section {
    padding: var(--space-4, 16px);
}

/* Competency Summary (Detail Layer) */
.s360-competency-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    background: var(--bg-secondary, #F5F5F7);
    border-radius: var(--radius-md, 12px);
    margin-bottom: var(--space-3, 12px);
}

.s360-competency-header {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
}

.s360-competency-name {
    font-family: var(--font-display);
    font-size: var(--text-lg, 17px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin: 0;
}

.s360-level-badge {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-xs, 11px);
    font-weight: 600;
    background: var(--gray-200, #E8E8ED);
    color: var(--text-secondary, #6E6E73);
}

.s360-level-badge--mastery {
    background: var(--success-subtle, rgba(52, 199, 89, 0.12));
    color: var(--success, #34C759);
}

.s360-level-badge--proficient {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.s360-level-badge--developing {
    background: var(--warning-subtle, rgba(255, 149, 0, 0.12));
    color: var(--warning, #FF9500);
}

.s360-level-badge--needs-work {
    background: var(--destructive-subtle, rgba(255, 59, 48, 0.12));
    color: var(--destructive, #FF3B30);
}

.s360-summary-text {
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    line-height: 1.5;
    margin: 0;
}

.s360-summary-stats {
    display: flex;
    gap: var(--space-4, 16px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
}

.s360-mini-stat {
    text-align: center;
    padding: 0 var(--space-3, 12px);
}

.s360-mini-stat-value {
    font-family: var(--font-display);
    font-size: var(--text-xl, 20px);
    font-weight: 700;
    color: var(--text-primary, #1D1D1F);
}

.s360-mini-stat-label {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

/* Evidence Section (Always Open) */
.s360-evidence-section {
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    padding-top: var(--space-4, 16px);
    margin-top: var(--space-3, 12px);
}

.s360-evidence-header {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    color: var(--text-primary, #1D1D1F);
    margin-bottom: var(--space-3, 12px);
}

.s360-evidence-header svg {
    width: 16px;
    height: 16px;
    color: var(--accent, #0071E3);
}

.s360-evidence-content {
    padding: var(--space-4, 16px);
    background: var(--bg-secondary, #F5F5F7);
    border-radius: var(--radius-md, 12px);
    min-height: 80px;
}

/* Evidence Quotes */
.s360-evidence-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
}

.s360-evidence-quote {
    padding: var(--space-3, 12px);
    background: var(--bg-primary, #FFFFFF);
    border-radius: var(--radius-md, 12px);
    border-left: 3px solid var(--accent, #0071E3);
}

.s360-evidence-quote__text {
    font-size: var(--text-sm, 13px);
    color: var(--text-primary, #1D1D1F);
    line-height: 1.5;
    margin: 0 0 var(--space-2, 8px) 0;
    font-style: italic;
}

.s360-evidence-quote__meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

/* Assessment List */
.s360-assessment-list {
    display: flex;
    flex-direction: column;
}

.s360-assessment-item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    border-bottom: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    cursor: pointer;
    transition: background var(--duration-fast, 150ms);
}

.s360-assessment-item:last-child {
    border-bottom: none;
}

.s360-assessment-item:hover {
    background: var(--bg-secondary, #F5F5F7);
    border-radius: var(--radius-md, 12px);
    margin: 0 calc(-1 * var(--space-3, 12px));
    padding-left: calc(var(--space-3, 12px) * 2);
    padding-right: calc(var(--space-3, 12px) * 2);
}

.s360-assessment-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md, 12px);
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.s360-assessment-icon svg {
    width: 18px;
    height: 18px;
    color: var(--accent, #0071E3);
}

.s360-assessment-info {
    flex: 1;
    min-width: 0;
}

.s360-assessment-title {
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    color: var(--text-primary, #1D1D1F);
}

.s360-assessment-meta {
    font-size: var(--text-xs, 11px);
    color: var(--text-tertiary, #86868B);
}

.s360-assessment-score {
    font-family: var(--font-mono);
    font-size: var(--text-base, 15px);
    font-weight: 600;
}

.s360-assessment-score--good { color: var(--success, #34C759); }
.s360-assessment-score--average { color: var(--warning, #FF9500); }
.s360-assessment-score--low { color: var(--destructive, #FF3B30); }

/* Show More Button */
.s360-show-more {
    display: block;
    width: 100%;
    padding: var(--space-3, 12px);
    background: none;
    border: none;
    border-top: 1px solid var(--border-light, rgba(0, 0, 0, 0.06));
    font-size: var(--text-sm, 13px);
    color: var(--accent, #0071E3);
    cursor: pointer;
    text-align: center;
}

.s360-show-more:hover {
    text-decoration: underline;
}

/* Empty State */
.s360-empty-state {
    padding: var(--space-6, 24px);
    text-align: center;
    font-size: var(--text-sm, 13px);
    color: var(--text-tertiary, #86868B);
}

/* =============================================================================
   STUDENT 360 - DARK THEME
   ============================================================================= */

[data-theme="dark"] .s360-selector-bar,
[data-theme="dark"] .s360-profile-bar {
    background: var(--bg-primary, #1C1C1E);
    border-color: var(--border-light, rgba(255, 255, 255, 0.08));
}

[data-theme="dark"] .s360-search-input,
[data-theme="dark"] .s360-select {
    background-color: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.1));
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .s360-profile-name,
[data-theme="dark"] .s360-card-title,
[data-theme="dark"] .s360-competency-name,
[data-theme="dark"] .s360-pattern-title,
[data-theme="dark"] .s360-mini-stat-value,
[data-theme="dark"] .s360-summary-text,
[data-theme="dark"] .s360-insight-text,
[data-theme="dark"] .s360-expand-trigger-text,
[data-theme="dark"] .s360-pill,
[data-theme="dark"] .s360-actions-trigger,
[data-theme="dark"] .s360-actions-item,
[data-theme="dark"] .s360-assessment-title {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .s360-body {
    background: var(--bg-secondary, #2C2C2E);
}

[data-theme="dark"] .s360-card,
[data-theme="dark"] .s360-pattern-card,
[data-theme="dark"] .s360-competency-strip {
    background: var(--bg-primary, #1C1C1E);
}

[data-theme="dark"] .s360-competency-summary,
[data-theme="dark"] .s360-evidence-content {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .s360-competency-item {
    background: rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .s360-competency-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .s360-competency-item.active {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.15));
}

[data-theme="dark"] .s360-competency-item__name {
    color: var(--text-primary, #F5F5F7);
}

[data-theme="dark"] .s360-actions-trigger {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--border-default, rgba(255, 255, 255, 0.1));
}

[data-theme="dark"] .s360-actions-menu {
    background: var(--bg-primary, #1C1C1E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.1));
}

[data-theme="dark"] .s360-actions-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .s360-evidence-quote {
    background: var(--bg-secondary, #2C2C2E);
}

[data-theme="dark"] .s360-assessment-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .s360-insight-details {
    background: linear-gradient(135deg, rgba(175, 82, 222, 0.2), rgba(0, 113, 227, 0.12));
}

/* Instructor Dashboard Overlay (similar styling) */
#instructor-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--bg-primary, #FFFFFF);
    overflow: hidden;
}

#instructor-dashboard.hidden {
    display: none !important;
}

[data-theme="dark"] #instructor-dashboard {
    background: var(--bg-primary, #1C1C1E);
}

/* Student Dashboard Overlay (similar styling) */
#student-dashboard {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: var(--bg-primary, #FFFFFF);
    overflow: hidden;
}

#student-dashboard.hidden {
    display: none !important;
}

[data-theme="dark"] #student-dashboard {
    background: var(--bg-primary, #1C1C1E);
}