/* LEXOR - Dark Mode Optimized Styles */

/* ==================== CSS CUSTOM PROPERTIES ==================== */
:root[data-theme="dark"] {
    /* Core Colors */
    --bg-primary: #0a0a0f;
    --bg-secondary: #141419;
    --bg-tertiary: #1a1a24;
    --bg-elevated: #20202e;

    /* Browser UI Rendering */
    color-scheme: dark;

    /* Text Colors */
    --text-primary: #e8e8f0;
    --text-secondary: #a8a8b8;
    --text-tertiary: #707080;
    --text-hint: #505060;

    /* Accent Colors */
    --accent-primary: #4a93ff;
    --accent-hover: #526cff;
    --accent-active: #45b5ff;

    /* Semantic Colors */
    --success: #4ade80;
    --warning: #fb923c;
    --error: #f87171;
    --info: #60a5fa;

    /* Border & Dividers */
    --border-subtle: #2a2a38;
    --border-medium: #3a3a48;
    --border-strong: #4a4a58;

    /* Shadows - Minimal */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.12);

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border Radius - Minimal */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Typography */
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-primary: Georgia, 'Times New Roman', serif;
}

:root[data-theme="light"] {
    /* Core Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f1f3;
    --bg-elevated: #ffffff;

    /* Browser UI Rendering */
    color-scheme: light;

    /* Text Colors */
    --text-primary: #1a1a1a;
    --text-secondary: #4a4a4a;
    --text-tertiary: #6a6a6a;
    --text-hint: #9a9a9a;

    /* Accent Colors */
    --accent-primary: #5565dd;
    --accent-hover: #4454cc;
    --accent-active: #3343bb;

    /* Semantic Colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;

    /* Border & Dividers */
    --border-subtle: #e5e7eb;
    --border-medium: #d1d5db;
    --border-strong: #9ca3af;

    /* Shadows - More prominent for light mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.18);

    /* Spacing - Inherited from dark mode */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;

    /* Border Radius - Inherited from dark mode */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;

    /* Transitions - Inherited from dark mode */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;

    /* Typography - Inherited from dark mode */
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
    --font-primary: Georgia, 'Times New Roman', serif;
}

/* ==================== LIGHT MODE BUTTON OVERRIDES ==================== */
[data-theme="light"] .secondary-btn {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

[data-theme="light"] .secondary-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

[data-theme="light"] .icon-btn {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

[data-theme="light"] .icon-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

[data-theme="light"] .toolbar-btn {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

[data-theme="light"] .toolbar-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

[data-theme="light"] .chat-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

[data-theme="light"] .chat-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.4);
}

[data-theme="light"] .nav-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

[data-theme="light"] .nav-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.4);
}

[data-theme="light"] .card-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.2);
    color: var(--accent-primary);
}

[data-theme="light"] .card-btn:hover {
    background: rgba(85, 101, 221, 0.12);
    border-color: rgba(85, 101, 221, 0.35);
}

[data-theme="light"] .budget-stats-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

[data-theme="light"] .budget-stats-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.4);
}

[data-theme="light"] .message-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.15);
    color: var(--accent-primary);
}

[data-theme="light"] .message-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.3);
}

/* Context Library Light Mode */
[data-theme="light"] .upload-button-compact {
    background: linear-gradient(135deg, rgba(85, 101, 221, 0.08) 0%, rgba(68, 84, 204, 0.05) 100%);
    border-color: rgba(85, 101, 221, 0.35);
}

[data-theme="light"] .upload-button-compact:hover {
    background: linear-gradient(135deg, rgba(85, 101, 221, 0.12) 0%, rgba(68, 84, 204, 0.08) 100%);
    border-color: rgba(85, 101, 221, 0.5);
    box-shadow: 0 4px 12px rgba(85, 101, 221, 0.2);
}

[data-theme="light"] .upload-button-label {
    color: var(--accent-primary);
}

[data-theme="light"] .document-card,
[data-theme="light"] .summary-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: rgba(85, 101, 221, 0.2);
    box-shadow: 0 2px 8px rgba(85, 101, 221, 0.08);
}

[data-theme="light"] .document-card:hover,
[data-theme="light"] .summary-card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 243, 0.95) 100%);
    border-color: rgba(85, 101, 221, 0.35);
    box-shadow: 0 6px 20px rgba(85, 101, 221, 0.15), 0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .document-card.active {
    background: linear-gradient(135deg, rgba(85, 101, 221, 0.12) 0%, rgba(107, 124, 255, 0.08) 100%);
    border-color: var(--accent-primary);
    box-shadow: 0 4px 16px rgba(85, 101, 221, 0.25), 0 0 0 3px rgba(85, 101, 221, 0.08);
}

[data-theme="light"] .card-title::before {
    filter: drop-shadow(0 0 4px rgba(85, 101, 221, 0.3));
}

/* Message Bubbles Light Mode */
[data-theme="light"] .message-content.user {
    background: rgba(248, 249, 250, 0.95);
    border-color: rgba(85, 101, 221, 0.25);
}

[data-theme="light"] .message-content.user:hover {
    border-color: rgba(85, 101, 221, 0.35);
}

[data-theme="light"] .message-content.assistant {
    background: rgba(85, 101, 221, 0.1);
    border-color: rgba(85, 101, 221, 0.35);
}

[data-theme="light"] .message-content.assistant:hover {
    border-color: rgba(85, 101, 221, 0.5);
}

/* Form Elements Light Mode */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="number"],
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 249, 250, 0.9) 100%);
    border-color: rgba(85, 101, 221, 0.3);
    color: var(--text-primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08), 0 0 0 0 rgba(85, 101, 221, 0);
    caret-color: var(--text-primary);
    cursor: text;
}

[data-theme="light"] input[type="text"]:hover,
[data-theme="light"] input[type="password"]:hover,
[data-theme="light"] input[type="number"]:hover,
[data-theme="light"] select:hover,
[data-theme="light"] textarea:hover {
    border-color: rgba(85, 101, 221, 0.45);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(240, 241, 243, 0.95) 100%);
}

[data-theme="light"] input:focus,
[data-theme="light"] select:focus,
[data-theme="light"] textarea:focus {
    border-color: var(--accent-primary);
    background: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08),
        0 0 0 3px rgba(85, 101, 221, 0.15),
        0 4px 12px rgba(85, 101, 221, 0.2);
}

[data-theme="light"] label {
    color: var(--text-primary);
}

/* ==================== BASE STYLES ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

/* ==================== SCROLLBAR STYLING ==================== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ==================== APP CONTAINER ==================== */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s cubic-bezier(0.4, 0.0, 0.2, 1), visibility 1s ease;
}

.app-container.show {
    opacity: 1;
    visibility: visible;
}

/* ==================== HEADER ==================== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    height: 60px;
    flex-shrink: 0;
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1 1 auto;
    /* allow header-left (incl. tokens) to expand */
    min-width: 0;
    /* enable flex truncation where needed */
}

/* Keep logo size consistent at all resolutions */
.header-left img {
    flex-shrink: 0 !important;
    min-width: 40px !important;
    min-height: 40px !important;
}

#header-icon {
    width: 40px !important;
    height: 40px !important;
}

#header-logo {
    height: 40px !important;
    width: auto !important;
}

.app-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.app-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 8px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.model-selector select,
#layout-preset {
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    max-width: 100px;
}

.model-selector select:hover,
#layout-preset:hover {
    border-color: var(--border-medium);
    background: var(--bg-elevated);
}

/* Dropdown options styling */
.model-selector select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Category selector dropdown styling */
#category-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.header-right {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    transition: all 0.3s ease;
}

/* Header menu toggle button */
.header-menu-toggle {
    display: none;
    /* Hidden by default, shown on small screens */
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 18px;
    min-width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.header-menu-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
}

.header-menu-toggle:active {
    transform: scale(0.95);
}

/* Collapsible header buttons container */
.header-buttons-container {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}

/* ==================== BUDGET BAR ==================== */
.budget-bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    height: 40px;
    flex-shrink: 0;
}

.budget-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 150px;
}

.budget-label {
    color: var(--text-tertiary);
}

#budget-current {
    color: var(--text-primary);
    font-weight: 600;
}

.budget-separator {
    color: var(--text-tertiary);
}

.budget-progress {
    flex: 1;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.budget-fill {
    height: 100%;
    background: var(--success);
    transition: all var(--transition-normal);
    border-radius: 3px;
}

.budget-fill.warning {
    background: var(--warning);
}

.budget-fill.error {
    background: var(--error);
}

.budget-stats-btn {
    padding: 6px 14px;
    background: rgba(26, 26, 36, 0.5);
    border: 1px solid rgba(107, 124, 255, 0.2);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.3px;
}

.budget-stats-btn:hover {
    border-color: rgba(107, 124, 255, 0.4);
    color: var(--text-primary);
    background: rgba(107, 124, 255, 0.12);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.2);
}

/* ==================== MAIN PANELS ==================== */
.main-panels {
    display: grid;
    grid-template-columns: minmax(240px, 16%) 1fr minmax(260px, 18%);
    gap: 0;
    flex: 1;
    overflow: hidden;
}

.panel {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    overflow: hidden;
}

.left-panel {
    border-right: 1px solid var(--border-subtle);
}

.middle-panel {
    background: var(--bg-primary);
}

.right-panel {
    border-left: 1px solid var(--border-subtle);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    height: 50px;
    flex-shrink: 0;
}

.panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-left: 8px;
}

.panel-title-btn {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    text-align: left;
}

.panel-title-btn:hover {
    color: var(--accent-primary);
}

.canvas-stats {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 12px;
    color: var(--text-secondary);
    margin-right: 8px;
}

.stat {
    font-variant-numeric: tabular-nums;
}

.stat-separator {
    color: var(--text-tertiary);
}

.panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md);
}

/* Canvas panel content should not have overflow since textarea handles it */
.middle-panel .panel-content {
    overflow: hidden;
    padding: 0;
}

/* ==================== BUTTONS ==================== */
.icon-btn,
.primary-btn,
.secondary-btn,
.ai-btn,
.toolbar-btn {
    border: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
    position: relative;
    overflow: hidden;
}

.icon-btn {
    position: relative;
    padding: 12px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 10px;
    font-size: 16px;
    border: 1px solid var(--border-medium);
}

.icon-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.2);
}

.primary-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #6b7cff 0%, #8592ff 100%);
    color: white;
    border-radius: 10px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.3);
    letter-spacing: 0.3px;
}

.primary-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.primary-btn:hover::before {
    left: 100%;
}

.primary-btn:hover {
    background: linear-gradient(135deg, #8592ff 0%, #a0abff 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 124, 255, 0.4);
}

.primary-btn:active {
    background: linear-gradient(135deg, #5565dd 0%, #6b7cff 100%);
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.3);
}

.primary-btn.small {
    padding: 6px 12px;
    font-size: 12px;
}

.secondary-btn {
    padding: 8px 16px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.secondary-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 10px;
    background: rgba(107, 124, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.secondary-btn:hover::after {
    width: 100%;
    height: 100%;
}

.secondary-btn:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.2);
}

.secondary-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.secondary-btn:disabled:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
    color: var(--text-primary);
    transform: none;
    box-shadow: none;
}

.secondary-btn.small {
    padding: 6px 12px;
    font-size: 12px;
}

.secondary-btn.full-width {
    width: 100%;
}

.ai-btn {
    padding: 12px 20px;
    background: linear-gradient(135deg, #6b7cff 0%, #7d8eff 100%);
    color: white;
    border-radius: 8px;
    font-weight: 600;
    border: none;
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.3);
    letter-spacing: 0.3px;
    transition: all 0.25s ease;
    position: relative;
    white-space: nowrap;
    flex-shrink: 0;
}

.ai-btn:hover {
    background: linear-gradient(135deg, #7d8eff 0%, #8f9fff 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(107, 124, 255, 0.4);
}

.ai-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.3);
}

.ai-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.2);
}

.ai-btn:disabled:hover {
    background: linear-gradient(135deg, #6b7cff 0%, #7d8eff 100%);
    transform: none;
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.2);
}

/* ==================== CANVAS TOOLBAR ==================== */
.canvas-toolbar {
    display: none;
    /* Hidden by default (only shows for advanced tags) */
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    margin-top: 0;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
    z-index: 2;
    /* keep above chat UI */
}

.canvas-toolbar:has(#formatting-container:not(:empty)) {
    display: flex;
    /* Show when formatting container has content */
}

.toolbar-group {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
    min-width: min-content;
    transition: all 0.3s ease;
}

/* Toolbar toggle button (hamburger menu) */
.toolbar-toggle {
    display: none;
    /* Hidden by default, shown on small screens */
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 16px;
    min-width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.toolbar-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-strong);
}

.toolbar-toggle:active {
    transform: scale(0.95);
}

.toolbar-btn {
    padding: 6px 12px;
    background: rgba(26, 26, 36, 0.5);
    color: var(--text-secondary);
    border: 1px solid rgba(107, 124, 255, 0.15);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toolbar-btn:hover {
    background: rgba(107, 124, 255, 0.12);
    border-color: rgba(107, 124, 255, 0.3);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.15);
}

.toolbar-btn.special {
    background: linear-gradient(135deg, #6b7cff 0%, #8592ff 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.3);
}

.toolbar-btn.special:hover {
    background: linear-gradient(135deg, #8592ff 0%, #a0abff 100%);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.4);
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--border-medium);
}

/* ==================== CANVAS EDITOR ==================== */
.canvas-editor {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
    outline: none;
    font-family: var(--font-primary);
    transition: background-color var(--transition-fast);
}

.canvas-editor::selection {
    background: #3b82f6;
    /* Saturated blue highlight */
    color: white;
}

.canvas-editor::-moz-selection {
    background: #3b82f6;
    /* Saturated blue highlight for Firefox */
    color: white;
}

/* Search highlights in canvas */
.search-highlight {
    background: var(--warning);
    color: #1a1a1a;
    border-radius: 2px;
    padding: 0;
}

[data-theme="dark"] .search-highlight {
    background: var(--accent-primary);
    color: white;
}

/* Selection memory highlight - blue blinking */
.selection-memory-highlight {
    background: rgba(59, 130, 246, 0.5);
    /* Blue with transparency */
    color: transparent;
    border-radius: 2px;
    padding: 0;
    transition: opacity 0.05s ease;
}

[data-theme="dark"] .selection-memory-highlight {
    background: rgba(96, 165, 250, 0.4);
    /* Lighter blue for dark theme */
}

.canvas-editor::placeholder {
    color: var(--text-hint);
    line-height: 1.6;
    line-height: 1.8;
}

/* ==================== CANVAS CONTROLS ==================== */
.canvas-controls {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex-shrink: 0;
    position: relative;
}

.controls-row {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}


/* ==================== CONTEXT MANAGEMENT ==================== */
.upload-area {
    padding: var(--space-lg);
    background: transparent;
    border: 1px dashed var(--border-medium);
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: var(--space-md);
    transition: all var(--transition-fast);
}

.upload-area:hover {
    border-color: var(--border-strong);
    background: var(--bg-tertiary);
}

.upload-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    color: var(--text-secondary);
}

.upload-icon {
    font-size: 32px;
}

.upload-hint {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Compact Upload Button */
.upload-button-compact {
    margin-bottom: var(--space-md);
    padding: 10px 8px;
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.08) 0%, rgba(133, 146, 255, 0.05) 100%);
    border: 2px dashed rgba(107, 124, 255, 0.3);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    font-size: 12px;
    white-space: nowrap;
    min-width: 0;
}

.upload-button-compact span {
    font-size: 12px !important;
}

.upload-button-compact span:first-child {
    font-size: 16px !important;
}

.upload-button-compact::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(107, 124, 255, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.upload-button-compact:hover::before {
    width: 300px;
    height: 300px;
}

/* Create button hover animation */
#create-document-btn:hover {
    border-color: rgba(107, 124, 255, 0.5);
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.12) 0%, rgba(133, 146, 255, 0.08) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.2);
}

.upload-button-compact:hover {
    border-color: rgba(107, 124, 255, 0.5);
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.12) 0%, rgba(133, 146, 255, 0.08) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.2);
}

.upload-button-compact.drag-over {
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.2) 0%, rgba(133, 146, 255, 0.15) 100%);
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(107, 124, 255, 0.3);
}

.upload-button-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--accent-primary);
    font-size: 13px;
    width: 100%;
    height: 100%;
    font-weight: 700;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
}

.documents-list,
.summaries-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: var(--space-md);
    padding-top: 12px;
}

/* ==================== DOCUMENT CARDS ==================== */
.document-card {
    padding: 8px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
    position: relative;
}

.document-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.15);
}

.document-card.active {
    border-color: var(--accent-primary);
    background: rgba(107, 124, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(107, 124, 255, 0.2);
}

/* Document Card Header */
.doc-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

/* Checkbox */
.doc-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-medium);
    border-radius: 4px;
    background: var(--bg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--accent-primary);
    flex-shrink: 0;
    padding: 0;
}

.doc-checkbox:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.doc-checkbox.checked {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* Document Title */
.doc-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.doc-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.doc-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-card.active .doc-name {
    color: var(--accent-primary);
}

/* Action Buttons */
.doc-actions {
    display: flex;
    gap: 4px;
}

.doc-action-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    opacity: 0.7;
    padding: 0;
    color: var(--text-primary);
}

.doc-action-btn:hover {
    opacity: 1;
    background: var(--bg-elevated);
}

/* Document Card Footer */
.doc-card-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-left: 30px;
}

/* Token Badge */
.doc-token-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    background: var(--accent-primary);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Document Tags */
.doc-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.doc-tag .tag-icon {
    font-size: 12px;
}

.doc-category {
    color: var(--info);
    border-color: rgba(96, 165, 250, 0.3);
}

.doc-trigger {
    color: var(--warning);
    border-color: rgba(251, 146, 60, 0.3);
}

/* Summary Cards (legacy support) */
.summary-card {
    padding: 14px;
    background: linear-gradient(135deg, rgba(26, 26, 36, 0.8) 0%, rgba(20, 20, 25, 0.9) 100%);
    border: 1px solid rgba(107, 124, 255, 0.15);
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(107, 124, 255, 0.3), rgba(107, 124, 255, 0.05));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s;
}

.summary-card:hover::before {
    opacity: 1;
}

.summary-card:hover {
    border-color: rgba(107, 124, 255, 0.3);
    background: linear-gradient(135deg, rgba(32, 32, 46, 0.95) 0%, rgba(26, 26, 36, 0.95) 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(107, 124, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-word;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-title::before {
    content: '📄';
    font-size: 16px;
    filter: drop-shadow(0 0 4px rgba(107, 124, 255, 0.3));
}

.card-actions {
    display: flex;
    gap: var(--space-xs);
}

.card-btn {
    padding: 6px 10px;
    background: rgba(26, 26, 36, 0.4);
    border: 1px solid rgba(107, 124, 255, 0.15);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 12px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
}

.card-btn:hover {
    background: rgba(107, 124, 255, 0.1);
    color: var(--text-primary);
    border-color: rgba(107, 124, 255, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(107, 124, 255, 0.15);
}

.card-content {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: var(--space-sm);
}

.card-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: 11px;
    color: var(--text-tertiary);
}

.token-count {
    color: #ffffff !important;
    font-weight: 700;
    background: linear-gradient(135deg, #6b7cff 0%, #8b5cf6 100%);
    padding: 5px 12px;
    border-radius: 14px;
    box-shadow: 0 3px 10px rgba(107, 124, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-size: 12px;
    letter-spacing: 0.5px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.smart-load-section,
.heat-meter-section {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.context-info {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
}

.heat-result {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.heat-rating {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.heat-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.heat-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: var(--radius-md);
    transition: width var(--transition-normal);
}

.heat-text {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* ==================== CHAT INTERFACE ==================== */
.prompt-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
}

.nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 26, 36, 0.5);
    border: 1px solid rgba(107, 124, 255, 0.2);
    border-radius: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-btn:hover {
    background: rgba(107, 124, 255, 0.15);
    border-color: rgba(107, 124, 255, 0.4);
    color: var(--text-primary);
    box-shadow: 0 3px 10px rgba(107, 124, 255, 0.2);
}

.prompt-display {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
}

.prompt-display:hover {
    background: var(--bg-elevated);
    transform: scale(1.02);
}

.prompt-icon {
    font-size: 18px;
}

.prompt-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
}

.prompt-dropdown {
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.prompt-dropdown-item {
    transition: all 0.15s ease;
}

.prompt-dropdown-item:hover {
    background: var(--bg-tertiary) !important;
    padding-left: 20px;
}

.prompt-dropdown-item:last-child {
    border-bottom: none;
}

.chat-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: 20px;
}

.chat-message {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 75%;
}

/* User messages aligned to the right */
.chat-message:has(.message-content.user) {
    align-self: flex-end;
    margin-left: auto;
    margin-right: 0;
}

/* Assistant messages aligned to the left */
.chat-message:has(.message-content.assistant) {
    align-self: flex-start;
    margin-right: auto;
    margin-left: 0;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* User message header - align right */
.chat-message:has(.message-content.user) .message-header {
    flex-direction: row-reverse;
}

/* Assistant message header - align left */
.chat-message:has(.message-content.assistant) .message-header {
    flex-direction: row;
}

.message-role {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
}

/* User role text aligned right */
.chat-message:has(.message-content.user) .message-role {
    text-align: right;
}

/* Assistant role text aligned left */
.chat-message:has(.message-content.assistant) .message-role {
    text-align: left;
}

.message-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Add margin between username and buttons for assistant messages (left-aligned) */
.chat-message:has(.message-content.assistant) .message-actions {
    margin-left: 12px;
}

/* Add margin between username and buttons for user messages (right-aligned) */
.chat-message:has(.message-content.user) .message-actions {
    margin-right: 12px;
}

.chat-message:hover .message-actions {
    opacity: 1;
}

.message-btn {
    padding: 3px 7px;
    background: rgba(26, 26, 36, 0.6);
    border: 1px solid rgba(107, 124, 255, 0.15);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 9px;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    line-height: 1.2;
}

.message-btn:hover {
    background: rgba(107, 124, 255, 0.2);
    border-color: rgba(107, 124, 255, 0.4);
    color: var(--text-primary);
    transform: scale(1.05);
    box-shadow: 0 1px 4px rgba(107, 124, 255, 0.2);
}

.message-content {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    position: relative;
    will-change: contents;
    contain: layout style;
}

.message-content.user {
    background: rgba(107, 124, 255, 0.18);
    border: 1px solid rgba(107, 124, 255, 0.3);
    border-radius: 18px 18px 4px 18px;
}

.message-content.user:hover {
    border-color: rgba(107, 124, 255, 0.35);
}

.message-content.assistant {
    background: rgba(26, 26, 36, 0.7);
    border: 1px solid rgba(107, 124, 255, 0.2);
    border-radius: 18px 18px 18px 4px;
}

.message-content.assistant:hover {
    border-color: rgba(107, 124, 255, 0.45);
}

/* Typing indicator - 3 dots animation when AI hasn't started generating yet */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-tertiary);
    opacity: 0.4;
    animation: typingDot 1.4s infinite;
}

.typing-indicator span:nth-child(1) {
    animation-delay: 0s;
}

.typing-indicator span:nth-child(2) {
    animation-delay: 0.2s;
}

.typing-indicator span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes typingDot {

    0%,
    60%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.chat-input-container {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.insert-canvas-btn {
    width: 100%;
    padding: 7px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.insert-canvas-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
}

.insert-canvas-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* When inside the expanded chat modal, keep the insert-canvas button inline with other action buttons */
#chat-expand-overlay .insert-canvas-btn {
    width: auto !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    min-width: 56px !important;
    padding: 8px 12px !important;
}

/* Make all action buttons inside the expanded chat modal share the same height
   and vertical alignment so they look consistent. This targets the inline
   action row inside the chat expand overlay. */
#chat-expand-overlay .document-viewer-window .secondary-btn,
#chat-expand-overlay .document-viewer-window .ai-btn,
#chat-expand-overlay .document-viewer-window .insert-canvas-btn {
    height: 44px !important;
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-size: 15px !important;
    border-radius: 10px !important;
}

/* Slightly smaller on very small screens to avoid overflow */
@media (max-width: 480px) {

    #chat-expand-overlay .document-viewer-window .secondary-btn,
    #chat-expand-overlay .document-viewer-window .ai-btn,
    #chat-expand-overlay .document-viewer-window .insert-canvas-btn {
        height: 40px !important;
        min-height: 40px !important;
        font-size: 14px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

#canvas-attached-badge {
    font-size: 14px;
    font-weight: 700;
}

.canvas-tag {
    /* Re-enable canvas tag with spacing so it doesn't stick to role text */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* future-proof if icon/text split */
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
    margin-left: 10px;
    /* space from preceding role label */
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--bg-elevated);
}

/* Ensure when user header is reversed the canvas tag still has left spacing visually */
.chat-message:has(.message-content.user) .canvas-tag {
    margin-right: 10px;
    /* since flex-direction row-reverse */
    margin-left: 0;
}

.chat-input {
    width: 100%;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    margin-bottom: 8px;
}

.chat-input:focus {
    outline: none;
    border-color: var(--border-medium);
}

.chat-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 0;
}

.chat-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 8px;
    background: rgba(26, 26, 36, 0.5);
    color: var(--text-primary);
    border: 1px solid rgba(107, 124, 255, 0.2);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.3px;
}

.chat-btn:hover {
    background: rgba(107, 124, 255, 0.12);
    border-color: rgba(107, 124, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(107, 124, 255, 0.15);
}

.chat-btn.send-btn {
    background: linear-gradient(135deg, #6b7cff 0%, #8592ff 100%);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 3px 10px rgba(107, 124, 255, 0.3);
}

.chat-btn.send-btn:hover {
    background: linear-gradient(135deg, #8592ff 0%, #a0abff 100%);
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(107, 124, 255, 0.4);
}

/* ==================== MODALS ==================== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    /* Below loading overlay (15000) */
    animation: fadeIn var(--transition-fast);
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    position: relative;
    z-index: 10004;
    /* Just above backdrop, still below loading (15000) */
    width: 90%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    animation: slideUp var(--transition-normal);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 18px;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-lg);
    overflow-y: auto;
    flex: 1;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--border-subtle);
}

/* ==================== TOAST NOTIFICATIONS ==================== */
#toast-container {
    position: fixed;
    top: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    /* Place toasts above all interactive UI (modals, overlays, token panels, etc.)
       but below the app's initial loading screens (#app-loading-screen 999998 and #app-black-screen 999999).
       Use a high value that remains safely under the startup loading overlay. */
    z-index: 999997;
    pointer-events: none;
    /* Allow clicks to pass through container unless on an actual toast */
}

#toast-container .toast {
    pointer-events: auto;
    /* But allow clicks on actual toasts */
}

.toast {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-size: 13px;
    animation: slideInRight var(--transition-fast);
    /* Ensure each toast creates its own stacking context inside the container so z-index ordering is predictable */
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.toast.success {
    border-color: var(--success);
    border-left-width: 3px;
}

.toast.error {
    border-color: var(--error);
    border-left-width: 3px;
}

.toast.warning {
    border-color: var(--warning);
    border-left-width: 3px;
}

/* ==================== LOADING OVERLAY ==================== */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999 !important;
    /* FORCE above everything including modals */
    pointer-events: auto !important;
    /* Must block all clicks */
}

.loading-overlay.hidden {
    display: none;
}

/* Canvas-Only Loading Overlay */
.canvas-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 10, 15, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 15000;
    /* Above modals */
    pointer-events: none;
}

.canvas-overlay:not(.hidden) {
    pointer-events: auto;
}

.canvas-overlay.hidden {
    display: none;
}

/* Position canvas overlay only over middle panel - will be overridden by responsive CSS */
.canvas-overlay:not(.hidden) {
    left: 16%;
    right: 18%;
    pointer-events: auto;
}

.loading-content {
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--space-md);
}

.loading-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

/* ==================== ANIMATIONS ==================== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes dotPulse {

    0%,
    20%,
    100% {
        opacity: 0.3;
        transform: scale(0.8);
    }

    40% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes fadeInFromBlack {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==================== BLACK SCREEN ==================== */
#app-black-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 999999;
    animation: fadeToLoading 0.5s ease 0.5s forwards;
}

@keyframes fadeToLoading {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ==================== APP LOADING SCREEN ==================== */
#app-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999998;
    opacity: 1;
    /* Fully visible from the start */
}

@keyframes fadeInLoading {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#app-loading-screen.fade-out {
    animation: fadeOutToApp 1s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

@keyframes fadeOutToApp {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

.app-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.app-loading-logos {
    display: flex;
    align-items: center;
    gap: 15px;
}

.app-loading-icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.app-loading-logo {
    height: 80px;
    object-fit: contain;
    margin: 0;
}

.app-loading-dots {
    display: flex;
    gap: 12px;
    align-items: center;
}

.app-loading-dots span {
    width: 12px;
    height: 12px;
    background: var(--accent-primary);
    border-radius: 50%;
    display: inline-block;
    animation: dotPulse 1.4s infinite ease-in-out;
}

.app-loading-dots span:nth-child(1) {
    animation-delay: 0s;
}

.app-loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.app-loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

/* ==================== UTILITY CLASSES ==================== */
.hidden {
    display: none !important;
}

.text-center {
    text-align: center;
}

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

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

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

/* ==================== TOKEN COST DISPLAYS ==================== */
#canvas-token-cost,
#chat-token-cost {
    z-index: 9999 !important;
}

/* ==================== RANGE SLIDER GRADIENTS ==================== */
/* AI Context Slider - Bright blue to purple to red gradient */
#context-slider {
    background: linear-gradient(to right, #60a5fa 0%, #8b5cf6 50%, #f87171 100%) !important;
    height: 8px;
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Max Tokens Sliders - Bright blue to purple to red gradient */
#max-tokens-slider,
#chat-max-tokens-slider {
    background: linear-gradient(to right, #60a5fa 0%, #8b5cf6 50%, #f87171 100%) !important;
    height: 8px;
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Range slider thumb styling - Webkit */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #e8e8f0 100%);
    cursor: pointer;
    border: 3px solid #6b7cff;
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.4),
        0 0 0 0 rgba(107, 124, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    margin-top: 0;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    border-color: #8592ff;
    box-shadow: 0 4px 16px rgba(107, 124, 255, 0.6),
        0 0 0 6px rgba(107, 124, 255, 0.15);
}

input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.5),
        0 0 0 8px rgba(107, 124, 255, 0.2);
}

/* Range slider thumb styling - Firefox */
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #e8e8f0 100%);
    cursor: pointer;
    border: 3px solid #6b7cff;
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.4),
        0 0 0 0 rgba(107, 124, 255, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
    border-color: #8592ff;
    box-shadow: 0 4px 16px rgba(107, 124, 255, 0.6),
        0 0 0 6px rgba(107, 124, 255, 0.15);
}

input[type="range"]::-moz-range-thumb:active {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(107, 124, 255, 0.5),
        0 0 0 8px rgba(107, 124, 255, 0.2);
}

/* Slider focus states */
input[type="range"]:focus {
    outline: none;
}

input[type="range"]:focus::-webkit-slider-thumb {
    border-color: #8592ff;
    box-shadow: 0 4px 16px rgba(107, 124, 255, 0.6),
        0 0 0 4px rgba(107, 124, 255, 0.2);
}

input[type="range"]:focus::-moz-range-thumb {
    border-color: #8592ff;
    box-shadow: 0 4px 16px rgba(107, 124, 255, 0.6),
        0 0 0 4px rgba(107, 124, 255, 0.2);
}

/* ==================== FORM ELEMENTS ==================== */
input[type="text"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(26, 26, 36, 0.6) 0%, rgba(20, 20, 25, 0.7) 100%);
    border: 2px solid rgba(107, 124, 255, 0.25);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(107, 124, 255, 0);
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="number"]:hover,
select:hover,
textarea:hover {
    border-color: rgba(107, 124, 255, 0.4);
    background: linear-gradient(135deg, rgba(32, 32, 46, 0.7) 0%, rgba(26, 26, 36, 0.8) 100%);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: linear-gradient(135deg, rgba(32, 32, 46, 0.8) 0%, rgba(26, 26, 36, 0.9) 100%);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2),
        0 0 0 3px rgba(107, 124, 255, 0.2),
        0 4px 12px rgba(107, 124, 255, 0.3);
}

textarea {
    min-height: 120px;
    resize: vertical;
    font-family: var(--font-sans);
    line-height: 1.5;
}

select {
    cursor: pointer;
    background-image: linear-gradient(135deg, rgba(26, 26, 36, 0.6) 0%, rgba(20, 20, 25, 0.7) 100%);
    padding-right: 35px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.form-group {
    margin-bottom: var(--space-md);
}

/* ==================== LAYOUT MODES ==================== */
.layout-preset-selector {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 16px;
    background: transparent;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    transition: all var(--transition-fast);
}

.layout-preset-selector:hover {
    border-color: var(--border-medium);
    background: var(--bg-tertiary);
}

.layout-preset-selector label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    white-space: nowrap;
}

.layout-preset-selector select {
    padding: 4px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    min-width: 100px;
    transition: all var(--transition-fast);
}

.layout-preset-selector select:hover {
    background: var(--bg-tertiary);
}

.layout-preset-selector select:focus {
    outline: none;
    background: var(--bg-tertiary);
}

/* Writer Mode (Default) - All panels visible */
body[data-layout="writer"] .main-panels {
    grid-template-columns: minmax(240px, 16%) 1fr minmax(260px, 18%);
}

body[data-layout="writer"] .middle-panel {
    display: flex;
}

/* Canvas Fullscreen Mode - Only canvas visible in writer mode */
body[data-layout="writer"].canvas-fullscreen .main-panels {
    grid-template-columns: 1fr;
}

body[data-layout="writer"].canvas-fullscreen .left-panel,
body[data-layout="writer"].canvas-fullscreen .right-panel {
    display: none !important;
}

body[data-layout="writer"].canvas-fullscreen .middle-panel {
    display: flex;
    border-left: none;
    border-right: none;
}

/* Fullscreen toggle button state indicator */
body.canvas-fullscreen #fullscreen-toggle-btn {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* Chatter Mode - Canvas hidden, Left and Right panels split screen */
/* DEPRECATED: Chatter mode CSS removed - use Writer or Roleplay modes instead */

/* Max tokens control (hidden by default, shown in writer mode) */
#chat-max-tokens-control {
    display: none;
    padding: 10px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
}

body[data-layout="writer"] #chat-max-tokens-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

body[data-layout="writer"] .chat-input-container {
    padding-bottom: 0;
}

/* Roleplay Mode - Character panel + Chat, canvas and context library hidden */
body[data-layout="roleplay"] .main-panels {
    grid-template-columns: minmax(220px, 15%) 1fr;
}

body[data-layout="roleplay"] .left-panel {
    display: none !important;
}

body[data-layout="roleplay"] .middle-panel {
    display: none !important;
}

body[data-layout="roleplay"] .right-panel {
    border-left: none;
}

/* Hide prompt navigation, settings button, and max tokens checkbox in roleplay mode */
body[data-layout="roleplay"] .prompt-nav {
    display: none !important;
}

#manage-prompts-btn:hover {
    opacity: 1 !important;
    color: var(--accent-primary) !important;
    transform: none !important;
    box-shadow: none !important;
}

body[data-layout="roleplay"] #manage-prompts-btn {
    display: none !important;
}

body[data-layout="roleplay"] #use-max-tokens-chat-container {
    display: none !important;
}

/* Fix token cost display in roleplay mode */
body[data-layout="roleplay"] #chat-token-cost {
    bottom: 215px !important;
    /* Adjust position for roleplay layout */
}

/* Hide canvas-related token cost info in roleplay mode */
body[data-layout="roleplay"] #chat-token-cost span[title="Canvas + Documents"] {
    display: none !important;
}

/* Show character panel in roleplay mode */
body[data-layout="roleplay"] .characters-panel {
    display: flex !important;
}

/* Character Panel Styles */
.characters-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-subtle);
}

.characters-panel .panel-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.characters-panel .panel-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.characters-panel .panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

#characters-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.character-item {
    padding: 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.character-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.character-item.selected {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.character-item.selected .icon-btn {
    color: white;
    opacity: 0.9;
}

.character-item.selected .icon-btn:hover {
    opacity: 1;
}

#create-character-btn {
    width: 100%;
    padding: 10px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.ai-btn {
    padding: 8px 16px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
    white-space: nowrap;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#create-character-btn:hover {
    background: var(--accent-hover);
}

#define-yourself-btn:hover {
    background: #4a9efa;
}

/* ==================== UNIFIED TOKEN DISPLAY ==================== */
#unified-token-display {
    user-select: none;
    box-shadow: var(--shadow-sm);
    flex: 1 1 auto;
    /* expand to available width */
    min-width: 0;
    max-width: none;
    /* allow full info when space exists */
    overflow: hidden;
    /* prevent visual spill (e.g., cost glow) */
}

#unified-token-display:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

#token-details {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 1 1 auto;
    /* let details shrink first */
    min-width: 0;
    /* allow flexbox truncation */
    animation: fadeIn 0.3s ease;
}

#token-cost {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px rgba(74, 222, 128, 0.3);
    white-space: nowrap;
    flex: 0 0 auto;
    /* keep cost visible */
}

/* Ensure the label doesn't shrink and overall layout is stable */
#unified-token-display>span:first-child {
    white-space: nowrap;
    flex: 0 0 auto;
}

#token-breakdown {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    /* enable child truncation */
    flex: 1 1 auto;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(-5px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }
}

/* High token warning pulse */
#unified-token-display[data-warning="high"] {
    animation: pulse 2s ease-in-out infinite;
}

/* ==================== DOCUMENT VIEWER/EDITOR ==================== */
.document-viewer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    padding: 50px;
}

.document-viewer-window {
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--border-medium);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: documentViewerFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    position: relative;
    z-index: 1;
}

@keyframes documentViewerFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.document-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
    gap: 20px;
}

.document-viewer-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 200px;
}

.document-viewer-title .doc-icon {
    font-size: 24px;
}

.document-viewer-title .doc-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.document-viewer-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.document-viewer-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.doc-viewer-btn {
    padding: 10px 20px;
    background: rgba(26, 26, 36, 0.6);
    color: var(--text-primary);
    border: 1px solid rgba(107, 124, 255, 0.2);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.doc-viewer-btn:hover {
    border-color: rgba(107, 124, 255, 0.4);
    background: rgba(107, 124, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(107, 124, 255, 0.2);
}

.doc-viewer-btn.save-btn {
    background: rgba(26, 26, 36, 0.6);
}

.doc-viewer-btn.summarize-btn {
    background: var(--info);
    border-color: rgba(107, 124, 255, 0.4);
    color: white;
}

.doc-viewer-btn.close-btn {
    background: rgba(248, 113, 113, 0.15);
    border-color: rgba(248, 113, 113, 0.3);
    color: var(--error);
}

.doc-viewer-btn.close-btn:hover {
    background: rgba(248, 113, 113, 0.25);
    border-color: rgba(248, 113, 113, 0.5);
}

.document-viewer-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.doc-viewer-textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 16px;
    line-height: 1.6;
    padding: 20px;
    outline: none;
    font-family: var(--font-primary);
    overflow-y: auto;
    transition: background-color var(--transition-fast);
}

.doc-viewer-textarea::placeholder {
    color: var(--text-hint);
    line-height: 1.6;
}

.doc-viewer-textarea::selection {
    background: #3b82f6;
    /* Saturated blue highlight */
    color: white;
}

.doc-viewer-textarea::-moz-selection {
    background: #3b82f6;
    /* Saturated blue highlight for Firefox */
    color: white;
}

/* Light mode overrides */
[data-theme="light"] .document-viewer-overlay {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .doc-viewer-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

[data-theme="light"] .doc-viewer-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.4);
}

[data-theme="light"] .doc-viewer-btn.summarize-btn {
    background: var(--info);
    border-color: rgba(85, 101, 221, 0.4);
    color: white;
}

[data-theme="light"] .doc-viewer-btn.close-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

[data-theme="light"] .doc-viewer-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ==================== RESPONSIVE DESIGN ==================== */
/* Base responsive styles - enhanced by responsive-optimization.css */

@media (max-width: 1200px) {
    .main-panels {
        grid-template-columns: minmax(240px, 19%) 1fr minmax(280px, 21%);
    }

    body[data-layout="roleplay"] .main-panels {
        grid-template-columns: minmax(220px, 18%) 1fr;
    }

    .header-right button {
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .main-panels {
        grid-template-columns: minmax(200px, 16%) 1fr minmax(240px, 19%);
    }

    #unified-token-display {
        margin-left: 10px;
        padding: 4px 10px;
        font-size: 11px;
    }

    #token-details {
        max-width: 250px;
        font-size: 10px;
    }

    #token-cost {
        font-size: 11px;
    }
}

/* ==================== FOLDER EXPLORER ==================== */
.folder-explorer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 50px;
    pointer-events: auto;
}

.folder-explorer-window {
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    pointer-events: auto;

    @media (max-width: 768px) {
        border-radius: 8px;
    }
}

.folder-explorer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    gap: 20px;
}

.folder-explorer-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
    min-width: 200px;
}

.folder-explorer-title .folder-icon {
    font-size: 24px;
}

.folder-explorer-title .folder-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.folder-explorer-search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    justify-content: center;
}

.folder-explorer-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.folder-explorer-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
}

.folder-explorer-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

.folder-explorer-btn.close-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

.folder-explorer-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.folder-explorer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-secondary);
    overflow-x: auto;
}

.breadcrumb-item {
    cursor: pointer;
    color: var(--accent-primary);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.breadcrumb-item:hover {
    color: var(--accent-secondary);
}

.folder-explorer-content {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
}

.folder-explorer-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 12px;
    padding: 4px;
}

.folder-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-secondary);
    font-size: 14px;
}

.folder-item-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    min-height: 140px;
}

.folder-item-card:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.folder-item-card.selected {
    background: rgba(107, 124, 255, 0.15);
    border-color: var(--accent-primary);
}

.folder-item-card.favorite {
    border-color: var(--accent-primary);
    border-width: 2px;
}

/* Drag-drop visual effects removed - functionality preserved */

.folder-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.folder-item-icon-large {
    font-size: 32px;
}

.folder-item-header-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="light"] .folder-item-header-actions {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.folder-item-favorite-btn,
.folder-item-canvas-btn {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.folder-item-favorite-btn {
    filter: brightness(1.5);
    /* Make favorite icon brighter in dark mode */
}

[data-theme="light"] .folder-item-favorite-btn {
    filter: brightness(1);
    /* Normal brightness in light mode */
}

.folder-item-favorite-btn:hover,
.folder-item-canvas-btn:hover {
    transform: scale(1.2);
}

.folder-item-canvas-btn {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-primary);
}

.folder-item-body {
    flex: 1;
    margin-bottom: 12px;
}

.folder-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.4;
}

.folder-item-meta {
    font-size: 11px;
    color: var(--text-secondary);
}

.folder-item-rename-input {
    flex: 1;
    padding: 4px 8px;
    font-size: 13px;
    background: var(--bg-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 4px;
    color: var(--text-primary);
    outline: none;
}

.folder-item-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.folder-item-action-btn {
    flex: 1;
    min-width: fit-content;
    padding: 6px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.folder-item-action-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
    color: var(--text-primary);
}

.folder-item-action-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: var(--error);
}

/* Ensure folder explorer delete buttons keep the same base styling as other action buttons
   (avoid being overridden by global .delete-btn used in other modules) */
.folder-item-action-btn.delete-btn {
    /* match base action button visuals */
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    color: var(--text-secondary);
}

[data-theme="light"] .folder-item-action-btn.delete-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

/* Parent folder styling */
.parent-folder {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    flex-direction: row;
}

.parent-folder .folder-item-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.parent-folder .folder-item-icon {
    font-size: 24px;
}

.parent-folder .folder-item-name {
    font-size: 16px;
    font-weight: 600;
}

/* ==================== FILE EDITOR ==================== */
.file-editor-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 50px;
    pointer-events: auto;
}

.file-editor-window {
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-medium);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    pointer-events: auto;
}

.file-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-subtle);
    gap: 20px;
}

.file-editor-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.file-editor-title .file-icon {
    font-size: 24px;
}

.file-editor-title .file-name {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-editor-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.file-editor-btn {
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.file-editor-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--border-medium);
}

.file-editor-btn.save-btn {
    background: var(--bg-tertiary);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.file-editor-btn.save-btn:hover {
    background: linear-gradient(135deg, #6b7cff 0%, #8592ff 100%);
    border-color: var(--accent-primary);
    color: white;
}

.file-editor-btn.close-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

.file-editor-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

.file-editor-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.file-editor-textarea {
    flex: 1;
    padding: 16px;
    background: var(--bg-primary);
    border: none;
    color: var(--text-primary);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    resize: none;
    outline: none;
    overflow: auto;
}

.file-editor-textarea::placeholder {
    color: var(--text-secondary);
}

/* Light mode overrides */
[data-theme="light"] .folder-explorer-overlay {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .folder-explorer-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

[data-theme="light"] .folder-explorer-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.4);
}

[data-theme="light"] .folder-explorer-btn.close-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

[data-theme="light"] .folder-explorer-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

[data-theme="light"] .file-editor-overlay {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .file-editor-btn {
    background: rgba(85, 101, 221, 0.08);
    border-color: rgba(85, 101, 221, 0.25);
    color: var(--accent-primary);
}

[data-theme="light"] .file-editor-btn:hover {
    background: rgba(85, 101, 221, 0.15);
    border-color: rgba(85, 101, 221, 0.4);
}

[data-theme="light"] .file-editor-btn.close-btn {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--error);
}

[data-theme="light"] .file-editor-btn.close-btn:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

/* ==================== DIAGNOSTICS PANEL ==================== */

.diagnostics-panel {
    padding: 20px;
    max-height: 70vh;
    overflow-y: auto;
}

.diag-section {
    margin-bottom: 30px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
}

.diag-section h3 {
    margin: 0 0 15px 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
}

.diag-section h4 {
    margin: 15px 0 10px 0;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
}

.diag-table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
}

.diag-table th,
.diag-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.diag-table th {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
}

.diag-table td {
    color: var(--text-primary);
    font-size: 14px;
}

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

.diag-buttons {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

.diag-btn {
    padding: 8px 16px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
}

.diag-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.diag-btn-small {
    padding: 4px 8px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    margin: 0 2px;
    transition: all 0.2s;
}

.diag-btn-small:hover {
    background: var(--accent-hover);
}

.diag-btn-danger,
.diag-btn-small.diag-btn-danger {
    background: var(--error);
}

.diag-btn-danger:hover,
.diag-btn-small.diag-btn-danger:hover {
    background: #dc2626;
}

.diag-error-categories {
    margin: 10px 0;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 13px;
}

.diag-error-categories li {
    margin: 5px 0;
}

.diag-recent-errors {
    margin-top: 10px;
}

.error-entry {
    padding: 10px;
    margin-bottom: 10px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--error);
    border-radius: var(--radius-sm);
}

.error-entry-detailed {
    padding: 15px;
    margin-bottom: 15px;
    background: var(--bg-tertiary);
    border-left: 3px solid var(--error);
    border-radius: var(--radius-sm);
}

.error-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
}

.error-category {
    color: var(--error);
    font-weight: 600;
}

.error-date {
    color: var(--text-tertiary);
}

.error-message {
    color: var(--text-primary);
    font-size: 13px;
    margin: 8px 0;
}

.error-stack,
.error-context pre {
    background: var(--bg-primary);
    padding: 10px;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    font-size: 11px;
    color: var(--text-tertiary);
    margin: 8px 0;
    font-family: 'Courier New', monospace;
}

.error-log-view,
.backup-list {
    max-height: 60vh;
    overflow-y: auto;
}

.error-log-entries {
    margin-top: 15px;
}

/* Light mode overrides */
[data-theme="light"] .diag-section {
    background: #f8f9fa;
    border-color: #dee2e6;
}

[data-theme="light"] .diag-table th {
    background: #e9ecef;
}

[data-theme="light"] .error-entry,
[data-theme="light"] .error-entry-detailed {
    background: #f8f9fa;
}

[data-theme="light"] .error-stack,
[data-theme="light"] .error-context pre {
    background: #e9ecef;
}

/* Update Button - Premium Style */
.update-btn-premium {
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.9), rgba(10, 10, 15, 0.95)) !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
    color: var(--text-primary) !important;
    padding: 6px 12px 6px 8px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative !important;
    overflow: visible !important;
    margin-right: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.update-btn-premium:hover {
    background: linear-gradient(135deg, rgba(32, 32, 40, 0.95), rgba(20, 20, 25, 1)) !important;
    border-color: rgba(74, 222, 128, 0.5) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 0 12px rgba(74, 222, 128, 0.1) !important;
    color: #fff !important;
}

.update-indicator-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--success);
    box-shadow: 0 0 8px var(--success);
    position: relative;
    z-index: 1;
}

.update-indicator-pulse::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--success);
    opacity: 0.6;
    animation: updatePulse 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes updatePulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* Light Mode Overrides for Update Button */
[data-theme="light"] .update-btn-premium {
    background: linear-gradient(135deg, #ffffff, #f8f9fa) !important;
    border: 1px solid rgba(74, 222, 128, 0.4) !important;
    color: #1a1a1a !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), inset 0 1px 0 #fff !important;
    text-shadow: none !important;
}

[data-theme="light"] .update-btn-premium:hover {
    background: #fff !important;
    border-color: rgba(74, 222, 128, 0.6) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 8px rgba(74, 222, 128, 0.15) !important;
}

[data-theme="light"] .update-indicator-pulse {
    background-color: #22c55e;
    /* Slightly darker green for light mode contrast */
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.4);
}

/* Feedback Button - Highlight & Bloom */
.feedback-btn-highlight {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.4), 0 0 30px rgba(139, 92, 246, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    position: relative !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 38px !important;
}

.feedback-btn-highlight:hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.6), 0 0 50px rgba(139, 92, 246, 0.3) !important;
    filter: brightness(1.1) !important;
}

.feedback-btn-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: all 0.6s;
}

.feedback-btn-highlight:hover::before {
    left: 100%;
}

/* Light mode adjustments for Feedback button bloom */
[data-theme="light"] .feedback-btn-highlight {
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.3), 0 0 25px rgba(139, 92, 246, 0.1) !important;
}

/* ==================== LYRICS MODE LAYOUT OVERRIDES ==================== */
/* When in lyrics mode, the left panel is hidden. 
   We must adjust grid columns to prevent the middle panel from falling into the first column slot.
   Original: minmax(240px, 16%) 1fr minmax(260px, 18%)
   Lyrics: 1fr minmax(260px, 18%)
*/
body[data-layout="lyrics"] .main-panels {
    grid-template-columns: 1fr minmax(260px, 18%);
}