/* ===============================
   PROFESSIONAL LOADING SCREEN
   =============================== */
.app-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.app-loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.loader-logo-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.loader-glow {
    display: none;
}

.loader-title {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.loader-spinner {
    position: relative;
    width: 48px;
    height: 48px;
}

.spinner-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.spinner-ring:nth-child(2),
.spinner-ring:nth-child(3) {
    display: none;
}

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

.loader-text {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

.list-group-item { display: flex; gap: 1rem; align-items: flex-start; box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.list-group-item > div.ms-2 { flex: 1 1 auto; }
.list-group-item .ms-3 { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.list-group-item .memory-title { margin-bottom: 0.25rem; }
.memory-content { white-space: pre-wrap; }
.list-group-item .badge { opacity: 0.95; }

/* Icon-only action buttons */
.icon-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 1.15rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.icon-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}
.icon-btn.remove-btn:hover {
    color: var(--accent-red);
}
.icon-btn:active {
    background: var(--bg-active);
}

/* Divider between pinned and regular memories */
.memory-divider {
    width: 100%;
    text-align: left;
    color: var(--text-tertiary);
    font-size: 0.85rem;
    padding: 0.5rem 0.2rem 0.2rem 0.2rem;
    margin: 0.2rem 0 0.6rem 0;
    border-top: 1px solid var(--border-color);
    letter-spacing: 0.03em;
}
:root {
    /* Soft & Very Dark Vibe - "Midnight Blue" */
    --bg-primary: #050505; 
    --bg-secondary: #0A0A0A; 
    --bg-tertiary: #141414; 
    --bg-elevated: #1F1F1F;
    --bg-input: #0F0F0F; 
    
    /* Ultra-soft borders */
    --border-color: rgba(255, 255, 255, 0.04); 
    --border-color-hover: rgba(255, 255, 255, 0.08); 
    --border-color-focus: rgba(56, 189, 248, 0.4);
    
    /* Soft, readable text */
    --text-primary: #EDEDED; 
    --text-secondary: #A1A1AA; 
    --text-tertiary: #52525B; 
    --text-muted: #3F3F46;
    --text-disabled: #27272A;
    
    /* Addictive Accent - "Electric Blue" */
    --accent-primary-hsl: 210, 100%, 60%; 
    --accent-primary: hsl(var(--accent-primary-hsl)); 
    --accent-primary-hover: hsl(210, 100%, 65%); 
    --accent-primary-soft: hsla(var(--accent-primary-hsl), 0.1);
    
    --accent-secondary: hsl(190, 90%, 60%);
    --accent-secondary-hsl: 190, 90%, 60%;
    
    /* Functional Colors */
    --accent-red: #EF4444;
    --accent-green: #10B981;
    --accent-yellow: #F59E0B;
    --accent-purple: #8B5CF6;
    --accent-cyan: #06B6D4;
    
    /* RGB values for transparency effects */
    --accent-primary-rgb: 56, 189, 248;
    --accent-secondary-rgb: 34, 211, 238;
    --surface-rgb: 10, 10, 10;
    --border-color-rgb: 255, 255, 255; 
    
    /* Premium Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; 
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace; 
    
    /* Deep, Soft Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3); 
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4); 
    --shadow-lg: 0 12px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.6);
    --shadow-2xl: 0 32px 64px rgba(0,0,0,0.7);
    
    /* Enhanced Interactive States */
    --bg-hover: rgba(255, 255, 255, 0.03);
    --bg-active: rgba(255, 255, 255, 0.05);
    
    /* Refined Spacing Scale */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 0.75rem;    /* 12px */
    --space-lg: 1rem;       /* 16px */
    --space-xl: 1.5rem;     /* 24px */
    --space-2xl: 2rem;      /* 32px */
    --space-3xl: 3rem;      /* 48px */
    --space-4xl: 4rem;      /* 64px */
    
    /* Soft Border Radius Scale - More Rounded */
    --radius-xs: 0.375rem;   /* 6px */
    --radius-sm: 0.5rem;     /* 8px */
    --radius-md: 0.75rem;    /* 12px */
    --radius-lg: 1rem;       /* 16px */
    --radius-xl: 1.25rem;    /* 20px */
    --radius-2xl: 1.75rem;   /* 28px */
    --radius-full: 9999px;
    
    /* Premium Transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-smooth: 0.5s cubic-bezier(0.4, 0.0, 0.1, 1);

    /* Theme-specific Component Variables (Dark Default) */
    --composer-bg: rgba(20, 20, 20, 0.6);
    --composer-border: rgba(255, 255, 255, 0.1);
    --user-msg-bg: rgba(255, 255, 255, 0.03);
    --user-msg-border: rgba(255, 255, 255, 0.05);
    --avatar-bg: rgba(255, 255, 255, 0.08);
    
    /* Sidebar & Topbar Variables (Dark Default) */
    --sidebar-bg: rgba(5, 5, 5, 0.6);
    --sidebar-border: rgba(255, 255, 255, 0.03);
    --topbar-bg: rgba(5, 5, 5, 0.6);
    --topbar-border: rgba(255, 255, 255, 0.03);
    --sidebar-item-active-bg: rgba(255, 255, 255, 0.08);
    --sidebar-item-active-text: var(--text-primary);
    --sidebar-item-hover-bg: rgba(255, 255, 255, 0.04);

    /* Code Block Variables (Dark Default) */
    --code-bg: #0d1117;
    --code-border: #21262d;
    --code-toolbar-bg: #0d1117;
    --code-toolbar-btn-bg: rgba(59, 130, 246, 0.15);
    --code-toolbar-btn-border: rgba(59, 130, 246, 0.3);
    --code-toolbar-btn-text: #60a5fa;
    --code-toolbar-btn-hover-bg: rgba(59, 130, 246, 0.25);
    --code-toolbar-btn-hover-text: #93c5fd;
    
    /* Syntax Highlighting (Dark Default) */
    --token-comment: #6A9955;
    --token-punctuation: #D4D4D4;
    --token-property: #569CD6;
    --token-number: #B5CEA8;
    --token-string: #CE9178;
    --token-keyword: #C586C0;
    --token-function: #DCDCAA;
}

/* ==============================
   GEMINI/CLAUDE-STYLE INLINE CANVAS
   Modern inline code artifacts
   ============================== */

/* Inline Canvas Card - Appears in chat messages */
.inline-canvas-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    margin: 16px 0;
    max-width: 100%;
    transition: all 0.2s ease;
}

.inline-canvas-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Canvas Header */
.inline-canvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
}

.inline-canvas-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}

.inline-canvas-title i {
    color: var(--accent-primary);
    font-size: 16px;
    flex-shrink: 0;
}

.inline-canvas-title span:first-of-type {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-canvas-badge {
    background: var(--bg-primary);
    color: var(--text-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.inline-canvas-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.inline-canvas-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inline-canvas-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: translateY(-1px);
}

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

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

/* Canvas Content */
.inline-canvas-content {
    position: relative;
    max-height: 600px;
    overflow: auto;
}

.inline-canvas-code {
    background: var(--bg-primary);
}

.inline-canvas-code pre {
    margin: 0;
    padding: 20px;
    background: var(--bg-primary);
    border-radius: 0;
    overflow-x: auto;
}

.inline-canvas-code code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-primary);
}

/* Fullscreen Editor Overlay */
.canvas-fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    z-index: 10000;
    display: none;
    animation: fadeIn 0.2s ease;
}

.canvas-fullscreen-overlay.active {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.canvas-fullscreen-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.canvas-fullscreen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

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

.canvas-fullscreen-title i {
    color: var(--accent-primary);
}

.canvas-fullscreen-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.canvas-fs-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-fs-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

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

.canvas-fs-btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.canvas-select-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

.canvas-select-btn:hover {
    border-color: var(--accent-primary);
}

.canvas-select-btn:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.canvas-fullscreen-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.canvas-editor-textarea {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    padding: 24px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.8;
    resize: none;
    outline: none;
    tab-size: 4;
}

.canvas-editor-textarea::placeholder {
    color: var(--text-tertiary);
}

/* Scrollbar for canvas content */
.inline-canvas-content::-webkit-scrollbar,
.canvas-editor-textarea::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.inline-canvas-content::-webkit-scrollbar-track,
.canvas-editor-textarea::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

.inline-canvas-content::-webkit-scrollbar-thumb,
.canvas-editor-textarea::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 5px;
}

.inline-canvas-content::-webkit-scrollbar-thumb:hover,
.canvas-editor-textarea::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Responsive canvas */
@media (max-width: 768px) {
    .inline-canvas-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .inline-canvas-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .inline-canvas-btn {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .canvas-fullscreen-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .canvas-fullscreen-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .canvas-fs-btn {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* ==============================
   OLD CANVAS PANEL STYLES (DEPRECATED - Kept for compatibility)
   ============================== */

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

.canvas-panel-title i {
    color: var(--accent-primary);
    font-size: 18px;
}

.canvas-panel-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.canvas-action-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.canvas-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

.canvas-action-btn i {
    font-size: 14px;
}

/* Canvas Toolbar */
.canvas-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.canvas-toolbar-left,
.canvas-toolbar-right {
    display: flex;
    gap: 8px;
    align-items: center;
}

.canvas-btn-group {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    padding: 4px;
    border-radius: 8px;
}

.canvas-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.canvas-btn:hover {
    color: var(--text-primary);
    background: var(--bg-primary);
}

.canvas-btn.active {
    background: var(--bg-primary);
    color: var(--accent-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Canvas Content Area */
.canvas-panel-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.canvas-view-mode,
.canvas-edit-mode {
    flex: 1;
    overflow: auto;
    padding: 24px;
}

.canvas-view-mode {
    display: block;
}

.canvas-edit-mode {
    display: none;
    padding: 0;
}

.canvas-edit-mode.active {
    display: block;
}

.canvas-view-mode.hidden {
    display: none;
}

/* Rich Text Editor */
.canvas-editor-textarea {
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    padding: 24px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    outline: none;
}

.canvas-editor-textarea:focus {
    outline: none;
}

/* Code Editor */
.canvas-code-editor {
    width: 100%;
    height: 100%;
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.6;
    padding: 24px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: none;
    resize: none;
    outline: none;
    tab-size: 2;
}

/* Code Preview */
.canvas-preview-container {
    width: 100%;
    height: 100%;
    background: white;
    border: none;
    display: none;
}

.canvas-preview-container.active {
    display: block;
}

.canvas-preview-frame {
    width: 100%;
    height: 100%;
    border: none;
}

/* Console Panel */
.canvas-console {
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
    padding: 12px;
    max-height: 200px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    display: none;
}

.canvas-console.active {
    display: block;
}

.console-entry {
    padding: 4px 8px;
    margin: 2px 0;
    border-radius: 4px;
}

.console-entry.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.console-entry.log {
    color: var(--text-secondary);
}

/* Canvas List View */
.canvas-list-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    padding: 8px;
    display: none;
    z-index: 1000;
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: var(--bg-tertiary);
}

.dropdown-item i {
    width: 16px;
    color: var(--text-secondary);
}

.canvas-list-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
}

.canvas-list-item {
    padding: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 12px;
}

.canvas-list-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.canvas-list-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    flex-shrink: 0;
}

.canvas-list-info {
    flex: 1;
    min-width: 0;
}

.canvas-list-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-list-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Formatting Toolbar */
.canvas-format-toolbar {
    display: flex;
    gap: 4px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    flex-wrap: wrap;
}

.format-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
}

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

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

/* Version Control */
.canvas-version-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
}

.version-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

.version-btn:hover:not(:disabled) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.version-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.version-info {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 0 8px;
}

/* Adjust chat container when canvas is open */
.chat-container.canvas-open {
    margin-right: 50%;
}

/* Responsive */
@media (max-width: 1024px) {
    .canvas-panel {
        width: 100%;
    }
    
    .chat-container.canvas-open {
        display: none;
    }
}
.canvas-list-meta { color:var(--text-secondary); font-size:12px }
.canvas-trigger-btn { margin-left:8px; background:transparent; border:1px solid rgba(255,255,255,0.04); color:var(--text-secondary); padding:6px 8px; border-radius:6px; cursor:pointer }
.canvas-trigger-btn:hover { border-color:var(--border-color-hover); color:var(--accent-primary) }


/* ===============================
   PROFESSIONAL ANIMATIONS
   =============================== */
   
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

/* Enhanced typography */
:root {
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; 
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace; 
    
    /* Improved shadow system */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.15);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.18); 
    --shadow-md: 0 4px 12px rgba(0,0,0,0.25); 
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.35);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.45);
    
    /* Spacing scale */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem; 
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    
    /* Enhanced border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    
    /* Smooth transitions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Custom Scrollbar Styles for Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px; /* Width of the vertical scrollbar */
    height: 8px; /* Height of the horizontal scrollbar (if any) */
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary); /* Background of the scrollbar track */
    border-radius: 10px; /* Rounded corners for the track */
}

/* Default (Dark Theme) Scrollbar Thumb */
::-webkit-scrollbar-thumb {
    background: var(--text-tertiary); /* Color of the scrollbar thumb for dark theme */
    border-radius: 10px; /* Rounded corners for the thumb */
    /* Add a border to create a subtle margin/padding effect inside the track */
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary); /* Thumb color on hover for dark theme */
}

/* Original Light Theme */
body[data-theme="light"] {
    --bg-primary: #ffffff; 
    --bg-secondary: #f8f9fa; 
    --bg-tertiary: #e9ecef; 
    --bg-elevated: #dee2e6;
    --bg-input: #ffffff; 
    --bg-hover: rgba(0, 0, 0, 0.02);
    --bg-active: rgba(0, 0, 0, 0.04);
    
    --border-color: #dee2e6; 
    --border-color-hover: #adb5bd; 
    --border-color-focus: #6c757d;
    
    --text-primary: #212529; 
    --text-secondary: #6c757d; 
    --text-tertiary: #adb5bd; 
    --text-muted: #ced4da;
    --text-disabled: #e9ecef;
    
    --accent-primary-hsl: 212, 85%, 50%; 
    --accent-primary-soft: hsla(var(--accent-primary-hsl), 0.1);
    --accent-red: #dc3545; 
    --accent-green: #28a745;
    --accent-green: #28a745;
    --accent-yellow: #ffc107;
    
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.06); 
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08); 
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);

    /* Theme-specific Component Variables (Light) */
    --composer-bg: rgba(255, 255, 255, 0.8);
    --composer-border: rgba(0, 0, 0, 0.1);
    --user-msg-bg: rgba(0, 0, 0, 0.04);
    --user-msg-border: rgba(0, 0, 0, 0.08);
    --avatar-bg: rgba(0, 0, 0, 0.06);
    
    /* Sidebar & Topbar Variables (Light) */
    --sidebar-bg: rgba(255, 255, 255, 0.8);
    --sidebar-border: rgba(0, 0, 0, 0.05);
    --topbar-bg: rgba(255, 255, 255, 0.8);
    --topbar-border: rgba(0, 0, 0, 0.05);
    --sidebar-item-active-bg: rgba(0, 0, 0, 0.06);
    --sidebar-item-active-text: var(--text-primary);
    --sidebar-item-hover-bg: rgba(0, 0, 0, 0.03);

    /* Code Block Variables (Light) */
    --code-bg: #ffffff;
    --code-border: rgba(0,0,0,0.1);
    --code-toolbar-bg: #ffffff;
    --code-toolbar-btn-bg: rgba(0, 0, 0, 0.05);
    --code-toolbar-btn-border: rgba(0, 0, 0, 0.1);
    --code-toolbar-btn-text: var(--text-secondary);
    --code-toolbar-btn-hover-bg: rgba(0, 0, 0, 0.1);
    --code-toolbar-btn-hover-text: var(--text-primary);

    /* Syntax Highlighting (Light) */
    --token-comment: #008000;
    --token-punctuation: #393A34;
    --token-property: #0000FF;
    --token-number: #098658;
    --token-string: #A31515;
    --token-keyword: #0000FF;
    --token-function: #795E26;
}
body[data-theme="lemonade"] {
    --bg-primary: #FFFDEB; --bg-secondary: #FEF9C3; --bg-tertiary: #FFF176; --bg-input: #FFFFFF; --border-color: rgba(239, 68, 68, 0.2); --border-color-hover: rgba(239, 68, 68, 0.4); --text-primary: #422006; --text-secondary: #78350F; --text-tertiary: #9A3412; --accent-primary-hsl: 345, 89%, 60%; --accent-red: #EF4444; --shadow-sm: 0 1px 2px rgba(120, 53, 15, 0.08); --shadow-md: 0 4px 6px rgba(120, 53, 15, 0.08); --shadow-lg: 0 10px 15px rgba(120, 53, 15, 0.08);
    
    /* Theme-specific Component Variables (Lemonade) */
    --composer-bg: rgba(255, 253, 235, 0.8);
    --composer-border: rgba(239, 68, 68, 0.15);
    --user-msg-bg: rgba(239, 68, 68, 0.05);
    --user-msg-border: rgba(239, 68, 68, 0.1);
    --avatar-bg: rgba(239, 68, 68, 0.1);
    
    /* Sidebar & Topbar Variables (Lemonade) */
    --sidebar-bg: rgba(255, 253, 235, 0.8);
    --sidebar-border: rgba(239, 68, 68, 0.15);
    --topbar-bg: rgba(255, 253, 235, 0.8);
    --topbar-border: rgba(239, 68, 68, 0.15);
    --sidebar-item-active-bg: rgba(239, 68, 68, 0.1);
    --sidebar-item-active-text: var(--text-primary);
    --sidebar-item-hover-bg: rgba(239, 68, 68, 0.05);
    
    --bg-elevated: #FFF176;

    /* Code Block Variables (Lemonade) */
    --code-bg: #ffffff;
    --code-border: rgba(239, 68, 68, 0.15);
    --code-toolbar-bg: #ffffff;
    --code-toolbar-btn-bg: rgba(239, 68, 68, 0.05);
    --code-toolbar-btn-border: rgba(239, 68, 68, 0.1);
    --code-toolbar-btn-text: var(--text-secondary);
    --code-toolbar-btn-hover-bg: rgba(239, 68, 68, 0.1);
    --code-toolbar-btn-hover-text: var(--text-primary);

    /* Syntax Highlighting (Light) */
    --token-comment: #008000;
    --token-punctuation: #393A34;
    --token-property: #0000FF;
    --token-number: #098658;
    --token-string: #A31515;
    --token-keyword: #0000FF;
    --token-function: #795E26;
}
body[data-theme="lemonade"] .welcome-section h1 { background: -webkit-linear-gradient(45deg, #F43F5E, #FBBF24); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
body[data-theme="icecream"] {
    --bg-primary: #F7F8F9; --bg-secondary: #E8EBED; --bg-tertiary: #DDE2EC; --bg-input: #FFFFFF; --border-color: rgba(128, 137, 210, 0.3); --border-color-hover: rgba(128, 137, 210, 0.5); --text-primary: #2C3F70; --text-secondary: #586690; --text-tertiary: #7F89A7; --accent-primary-hsl: 234, 45%, 66%; --accent-red: #A5231C; --shadow-sm: 0 1px 2px rgba(44, 63, 112, 0.08); --shadow-md: 0 4px 6px rgba(44, 63, 112, 0.08); --shadow-lg: 0 10px 15px rgba(44, 63, 112, 0.08);
    
    /* Theme-specific Component Variables (Icecream) */
    --composer-bg: rgba(247, 248, 249, 0.8);
    --composer-border: rgba(128, 137, 210, 0.2);
    --user-msg-bg: rgba(128, 137, 210, 0.05);
    --user-msg-border: rgba(128, 137, 210, 0.1);
    --avatar-bg: rgba(128, 137, 210, 0.1);
    
    /* Sidebar & Topbar Variables (Icecream) */
    --sidebar-bg: rgba(247, 248, 249, 0.8);
    --sidebar-border: rgba(128, 137, 210, 0.2);
    --topbar-bg: rgba(247, 248, 249, 0.8);
    --topbar-border: rgba(128, 137, 210, 0.2);
    --sidebar-item-active-bg: rgba(128, 137, 210, 0.15);
    --sidebar-item-active-text: var(--text-primary);
    --sidebar-item-hover-bg: rgba(128, 137, 210, 0.08);
    
    --bg-elevated: #DDE2EC;

    /* Code Block Variables (Icecream) */
    --code-bg: #ffffff;
    --code-border: rgba(128, 137, 210, 0.2);
    --code-toolbar-bg: #ffffff;
    --code-toolbar-btn-bg: rgba(128, 137, 210, 0.05);
    --code-toolbar-btn-border: rgba(128, 137, 210, 0.1);
    --code-toolbar-btn-text: var(--text-secondary);
    --code-toolbar-btn-hover-bg: rgba(128, 137, 210, 0.1);
    --code-toolbar-btn-hover-text: var(--text-primary);

    /* Syntax Highlighting (Light) */
    --token-comment: #008000;
    --token-punctuation: #393A34;
    --token-property: #0000FF;
    --token-number: #098658;
    --token-string: #A31515;
    --token-keyword: #0000FF;
    --token-function: #795E26;
}
body[data-theme="icecream"] .welcome-section h1 { background: -webkit-linear-gradient(45deg, #8089D2, #A5231C); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* Light/Lemonade/Icecream Theme Scrollbar Thumb Overrides */
body:not([data-theme="dark"]) ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary); /* Use tertiary background for light themes */
    border-color: var(--bg-primary); /* Border matches the background of the scrolling area */
}
body:not([data-theme="dark"]) ::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary); /* Use tertiary text color on hover for light themes */
}

body:not([data-theme="dark"]) .input-area { box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
body:not([data-theme="dark"]) .input-area:focus-within { box-shadow: 0 0 0 3px rgba(var(--accent-primary-hsl), 0.3), 0 4px 20px rgba(0,0,0,0.08); }
body:not([data-theme="dark"]) .modal-content { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); }

/* ===============================
   CLEAN ORGANIZED MEMORY MODAL
   =============================== */

/* Clean backdrop */
#memoryModal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Modal positioning */
#memoryModal .modal-dialog {
    max-width: 700px;
    width: 90%;
    margin: 2.5rem auto;
}

/* Modal surface - Clean & Soft */
#memoryModal .modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

/* Memory modal header - Organized */
#memoryModal .modal-header {
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

#memoryModal .modal-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

#memoryModal .btn-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    opacity: 1;
    filter: none;
}

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

#memoryModal .btn-close:before {
    content: "×";
    font-size: 20px;
    font-weight: 300;
}

#memory-count {
    background-color: var(--accent-primary);
    color: white;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    min-width: 20px;
    text-align: center;
}

/* Memory Toolbar */
.memory-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    gap: 1rem;
}

.memory-toolbar-left {
    flex: 1;
    max-width: 300px;
}

.memory-toolbar-right {
    display: flex;
    gap: 0.5rem;
}

/* Header actions matching sidebar style - DEPRECATED, keeping for backwards compatibility */
.memory-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.memory-add-btn {
    background: var(--accent-primary);
    border: none;
    color: #ffffff;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: var(--shadow-sm);
}

.memory-add-btn:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.memory-add-btn:active {
    transform: translateY(0);
}

/* Close button */
#memoryModal .btn-close {
    background-color: transparent;
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 18px;
}

#memoryModal .btn-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

/* Modal body */
#memoryModal .modal-body {
    padding: 0;
    max-height: 60vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Memory list container */
#memory-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    margin: 0;
}

/* Scrollbar styling */
#memory-list::-webkit-scrollbar {
    width: 8px;
}

#memory-list::-webkit-scrollbar-track {
    background-color: transparent;
}

#memory-list::-webkit-scrollbar-thumb {
    background-color: var(--border-color);
    border-radius: 4px;
}

#memory-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-color-hover);
}

/* Memory items matching chat list items */
.memory-item {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 0.75rem 1rem;
    transition: all 0.2s ease;
    position: relative;
    margin: 0 0 2px 0;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.memory-item:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.memory-item.pinned {
    background-color: rgba(var(--accent-primary-rgb), 0.05);
    border-color: rgba(var(--accent-primary-rgb), 0.2);
}

.memory-item-content {
    flex: 1;
    min-width: 0;
    padding-right: 32px;
}

.memory-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 2px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.memory-item[data-auto-saved="true"] .memory-title {
    color: var(--accent-primary);
}

.memory-item[data-auto-saved="true"]::before {
    content: "🤖";
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 12px;
    opacity: 0.7;
}

.memory-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.memory-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Professional memory content */
.memory-item-content {
    flex: 1;
    min-width: 0;
}

/* Professional memory titles */
.memory-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

/* Professional memory content */
.memory-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Memory item actions matching chat actions */
.memory-item-actions {
    display: flex;
    gap: var(--space-xs);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: rgba(0, 0, 0, 0.8);
    padding: var(--space-xs);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.memory-item:hover .memory-item-actions {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.memory-action-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    padding: var(--space-xs);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    position: relative;
}

.memory-action-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.1);
}

.memory-action-btn.memory-pin-btn:hover {
    color: #60A5FA;
    background: rgba(96, 165, 250, 0.2);
}

.memory-action-btn.memory-pin-btn.pinned {
    color: #60A5FA;
    background: rgba(96, 165, 250, 0.2);
}

.memory-action-btn.memory-edit-btn:hover {
    color: #34D399;
    background: rgba(52, 211, 153, 0.2);
}

.memory-action-btn.memory-remove-btn:hover {
    color: var(--accent-red);
    background: rgba(248, 81, 73, 0.2);
}

/* Utility classes */
.hidden {
    display: none !important;
}

.memory-loading-text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Add memory section */
.add-memory-section {
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    flex-shrink: 0;
    animation: slideDown 0.2s ease;
}

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

.add-memory-section input,
.add-memory-section textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    line-height: 1.4;
}

.add-memory-section input:focus,
.add-memory-section textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.add-memory-section input::placeholder,
.add-memory-section textarea::placeholder {
    color: var(--text-tertiary);
    font-size: 13px;
}

.add-memory-section textarea {
    resize: vertical;
    min-height: 100px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.add-memory-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.add-memory-actions .btn {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    min-width: 80px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.add-memory-actions .btn-primary {
    background-color: var(--accent-primary);
    color: white;
}

.add-memory-actions .btn-primary:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--accent-primary-rgb), 0.3);
}

.add-memory-actions .btn-outline-secondary {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.add-memory-actions .btn-outline-secondary:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

#memoryModal #memory-title::placeholder,
#memoryModal #memory-content::placeholder {
    color: var(--text-tertiary);
}

/* Empty state */
.memory-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
    min-height: 200px;
}

.memory-empty-state p {
    margin: 8px 0 0 0;
    font-size: 14px;
    line-height: 1.5;
    max-width: 300px;
}

.memory-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
    opacity: 0.6;
}

/* Edit state styling */
.memory-item.editing {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px;
    margin: 8px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: editFormSlide 0.2s ease;
}

@keyframes editFormSlide {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.memory-item.editing .memory-item-content {
    padding-right: 0;
}

.memory-item.editing input,
.memory-item.editing textarea {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px 16px;
    width: 100%;
    font-size: 14px;
    color: var(--text-primary);
    font-family: inherit;
    transition: all 0.2s ease;
    margin-bottom: 12px;
    line-height: 1.4;
}

.memory-item.editing input:focus,
.memory-item.editing textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.memory-item.editing input::placeholder,
.memory-item.editing textarea::placeholder {
    color: var(--text-tertiary);
    font-size: 13px;
}

.memory-item.editing textarea {
    resize: vertical;
    min-height: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.memory-item.editing .memory-item-actions {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    padding: 0;
    border-radius: 0;
    backdrop-filter: none;
    border: none;
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.memory-item.editing .memory-action-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: auto;
    height: 40px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.memory-item.editing .memory-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
    transform: translateY(-1px);
}

.memory-item.editing .memory-action-btn:first-child {
    background-color: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.memory-item.editing .memory-action-btn:first-child:hover {
    background-color: var(--accent-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(var(--accent-primary-rgb), 0.3);
}

/* Search input */
#memory-search {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    width: 240px;
    font-size: 14px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    height: 40px;
}

#memory-search:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.2);
    background-color: var(--bg-primary);
}

#memory-search::placeholder {
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Loading state */
.memory-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--text-secondary);
    font-size: 14px;
    gap: 8px;
}

.memory-loading::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Responsive design */
@media (max-width: 768px) {
    #memoryModal .modal-dialog {
        width: 95%;
        margin: 1rem auto;
    }
    
    #memoryModal .modal-header {
        padding: 16px 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .memory-header-actions {
        width: 100%;
        justify-content: space-between;
        order: 2;
    }
    
    #memory-search {
        width: 100%;
        order: 1;
    }
    
    #memoryModal .modal-title {
        align-self: flex-start;
        order: 0;
    }
    
    .memory-item {
        padding: 12px;
        margin: 2px 4px;
    }
    
    .add-memory-section {
        padding: 16px 20px;
    }
    
    .add-memory-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .add-memory-actions .btn {
        width: 100%;
    }
}

/* Empty state */
#memory-list .text-muted { padding: 1.1rem 0.5rem; color: var(--text-secondary); }

/* Memory item layout improvements */
.list-group-item { display: flex; gap: 1rem; align-items: flex-start; }
.list-group-item > div.ms-2 { flex: 1 1 auto; }
.list-group-item .ms-3 { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem; }
.list-group-item .memory-title { margin-bottom: 0.25rem; }
.memory-content { white-space: pre-wrap; }
.list-group-item .badge { opacity: 0.95; }

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-primary); 
    background-color: var(--bg-primary); 
    color: var(--text-primary); 
    margin: 0; 
    height: 100vh; 
    width: 100%; 
    overflow: hidden; 
    display: grid; 
    grid-template-columns: 280px 1fr; 
    grid-template-rows: 1fr; 
    transition: grid-template-columns 0.3s ease-in-out, background-color 0.3s, color 0.3s;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.sidebar-collapsed { grid-template-columns: 0px 1fr; }
body::before {
    content: ''; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(var(--accent-primary-rgb), 0.15) 0%, transparent 45%),
        radial-gradient(circle at 100% 50%, rgba(var(--accent-secondary-rgb), 0.08) 0%, transparent 50%);
    opacity: 1; 
    z-index: 0; 
    pointer-events: none; 
    transition: background-image 0.5s ease;
}

/* ===============================
   CLEAN ORGANIZED SIDEBAR
   =============================== */
#sidebar {
    grid-column: 1; 
    background-color: var(--sidebar-bg); 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid var(--sidebar-border); 
    display: flex; 
    flex-direction: column; 
    padding: var(--space-lg); 
    position: relative; 
    z-index: 50; 
    height: 100vh; 
    overflow: hidden; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 1px 0 20px rgba(0,0,0,0.2);
}

.sidebar-header, .new-chat-btn {
    flex-shrink: 0;
}

.chat-list {
    flex: 1 1 auto; 
    overflow-y: auto; 
    min-height: 0; 
    padding: 0; 
    margin: 0; 
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-lg);
}

.sidebar-footer {
    flex-shrink: 0; 
    margin-top: auto; 
    padding-top: var(--space-sm);
}

/* Make sidebar header and footer sticky while chat list scrolls internally */
#sidebar { display: flex; flex-direction: column; }
.sidebar-header { position: sticky; top: 0; z-index: 12; background: transparent; }
.sidebar-footer { position: sticky; bottom: 0; z-index: 12; background: transparent; }

.chat-list { overflow-y: auto; padding-right: 8px; }
.chat-list::-webkit-scrollbar { width: 12px; }
.chat-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.01); border-radius: 12px; margin: 6px 0; }
.chat-list::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border-radius: 12px; border: 3px solid rgba(0,0,0,0.12); background-clip: padding-box; box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); }
.chat-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)); }


/* Floating Composer - A new design vision */
.input-section {
  padding: 1rem 2rem 2rem;
  background: transparent;
  position: relative;
  z-index: 10;
  margin-top: auto;
}

.composer-container {
  max-width: 850px;
  margin: 0 auto;
}

/* ===============================
   PROFESSIONAL INPUT COMPOSER (Gemini Layout - Theme Colors)
   =============================== */
.composer-shell {
  background: var(--composer-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--composer-border);
  border-radius: 26px; /* Slightly smaller pill */
  display: flex;
  flex-direction: column;
  /* overflow: hidden; REMOVED to allow dropdowns to pop out */
  box-shadow: var(--shadow-lg);
  transition: all 0.2s ease;
  position: relative;
  min-height: auto; /* Compact */
}

.composer-shell.focused {
  background: var(--composer-bg);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(var(--accent-primary-rgb), 0.2);
  border-color: rgba(var(--accent-primary-rgb), 0.3);
}

.composer-input-wrapper {
  padding: 0.75rem 1.25rem 0.25rem; /* Reduced padding */
  flex-grow: 1;
}

#user-input {
  width: 100%;
  min-height: 24px; /* Compact start height */
  max-height: 200px;
  resize: none;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: none;
  color: var(--text-primary);
  font-size: 1rem; /* Standard size */
  line-height: 1.5;
  outline: none;
  font-family: var(--font-primary);
  box-shadow: none !important;
}

#user-input::placeholder {
  color: var(--text-tertiary);
  font-weight: 400;
}

/* Professional composer toolbar */
.composer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0.75rem 0.75rem; /* Compact padding */
  background: transparent;
}

.toolbar-group-left { 
  display: flex; 
  align-items: center; 
  gap: 0.5rem; 
}

.toolbar-group-right { 
  display: flex; 
  align-items: center; 
  gap: 0.75rem; 
}

/* Minimalist Buttons */
.composer-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  width: 32px; /* Smaller buttons */
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.composer-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Plus button specific styling */
#main-plus-btn {
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: var(--text-secondary);
    background: transparent;
}

#main-plus-btn:hover {
    background: rgba(255,255,255,0.1);
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Model Selector - Text style */
.model-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  height: auto;
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  background: transparent;
}

.model-selector:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary);
}

/* Send button - Minimalist */
#send-button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent; /* Hidden by default/transparent */
  color: var(--text-secondary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
  transition: all 0.2s ease;
}

.composer-shell.has-text #send-button,
.composer-shell #send-button:not(:disabled) {
  background: var(--accent-primary); /* Theme accent color */
  color: #FFFFFF; /* White icon on accent */
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.4);
}

#send-button:hover:not([disabled]) { 
  background: var(--accent-primary-hover);
  transform: none;
}

/* Processing dim state for the composer */
#input-area-wrapper.processing { opacity: 0.7; pointer-events: none; }

/* BUT allow the stop button to be clickable during processing */
#input-area-wrapper.processing .stop-btn {
    pointer-events: auto;
    cursor: pointer;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    #sidebar { position: fixed; left: 0; top: 0; height: 100vh; transform: translateX(-100%); transition: transform 0.24s ease; }
    #sidebar.visible { transform: translateX(0); }
    
    /* Input area mobile fixes */
    .input-section {
        padding: 1rem 0.75rem 1.25rem;
    }
    
    .composer-shell {
        border-radius: 16px;
    }
    
    .composer-toolbar {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .toolbar-group-left,
    .toolbar-group-right {
        gap: 0.75rem;
    }
    
    /* Make buttons larger and more touch-friendly on mobile */
    .composer-btn,
    #attach-file-btn,
    #toggle-search-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    
    #send-button,
    .send-btn {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }
    
    .model-selector {
        height: 44px;
        padding: 0 1rem;
        border-radius: 12px;
        font-size: 14px;
    }
    
    #user-input {
        min-height: 48px;
        font-size: 16px; /* Prevent zoom on iOS */
        padding: 1rem;
    }
    
    /* Ensure attachment badge is visible */
    .attachment-badge {
        font-size: 11px;
        min-width: 18px;
        height: 18px;
    }
}

/* Extra mobile adjustments for very small screens */
@media (max-width: 480px) {
    .input-section {
        padding: 0.75rem 0.5rem 1rem;
    }
    
    .composer-toolbar {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .toolbar-group-left,
    .toolbar-group-right {
        gap: 0.5rem;
    }
    
    .model-selector span {
        font-size: 13px;
    }
    
    /* Ensure buttons remain visible and touchable */
    .composer-btn,
    #attach-file-btn,
    #toggle-search-btn,
    #send-button,
    .send-btn {
        min-width: 40px;
        min-height: 40px;
        flex-shrink: 0;
    }
}

/* Mobile viewport and positioning fixes */
@media (max-width: 768px) {
    /* Ensure input section is always visible and properly positioned */
    .input-section {
        position: fixed !important;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        padding: 0.75rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
    
    /* Adjust main content to account for fixed input */
    .main-content-wrapper {
        padding-bottom: 120px; /* Space for input area */
    }
    
    .input-frame {
        max-width: 100%;
        margin: 0;
    }
    
    /* Override any conflicting styles */
    .composer-shell {
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 480px) {
    .input-section {
        padding: 0.5rem;
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
    }
    
    .main-content-wrapper {
        padding-bottom: 100px;
    }
}

/* iOS safe area support */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .input-section {
            padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
        }
    }
    
    @media (max-width: 480px) {
        .input-section {
            padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        }
    }
}

body.sidebar-collapsed #sidebar { 
    width: 0; 
    padding: 0; 
    opacity: 0; 
    pointer-events: none; 
    overflow: hidden;
}

/* ===============================
   PROFESSIONAL SIDEBAR
   =============================== */
.sidebar-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 1.5rem; 
    padding: 0.5rem 0; 
}

.sidebar-header .logo { 
    font-size: 1.25rem; 
    font-weight: 600; 
    color: var(--text-primary); 
    display: flex; 
    align-items: center; 
    gap: 0.75rem;
}

.logo-icon { 
    object-fit: contain; 
    flex-shrink: 0; 
}

.sidebar-header .logo .logo-icon { 
    width: 24px; 
    height: 24px;
}

.sidebar-header button { 
    background: transparent; 
    border: 1px solid transparent; 
    color: var(--text-secondary); 
    width: 32px; 
    height: 32px; 
    border-radius: 50%; 
    cursor: pointer; 
    transition: all 0.2s ease; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
}

.sidebar-header button:hover { 
    background-color: var(--bg-tertiary); 
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* Professional New Chat Button */
.new-chat-btn { 
    width: 100%; 
    padding: 0.75rem 1rem; 
    background: var(--accent-primary); 
    color: #fff; 
    border: none; 
    border-radius: 2rem; 
    font-weight: 500; 
    font-size: 0.95rem; 
    cursor: pointer; 
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5rem; 
    margin-bottom: 1.5rem; 
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.25);
    position: relative;
    overflow: hidden;
}

.new-chat-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.1), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.new-chat-btn:hover { 
    background: var(--accent-primary-hover); 
    box-shadow: 0 6px 16px rgba(var(--accent-primary-rgb), 0.35);
    transform: translateY(-1px);
}

.new-chat-btn:hover::after {
    opacity: 1;
}

.new-chat-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.25);
}

/* Chat Search Feature */
.search-section {
    margin-bottom: 1rem;
}

.search-container {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    padding: 0.625rem 1rem;
    transition: all 0.2s ease;
}

.search-container:focus-within {
    border-color: var(--accent-primary);
    background: var(--bg-input);
    box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb), 0.15);
}

.search-icon {
    color: var(--text-tertiary);
    font-size: 0.875rem;
    margin-right: 0.75rem;
    transition: color 0.2s ease;
}

.search-container:focus-within .search-icon {
    color: var(--accent-primary);
}

.search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: inherit;
    width: 100%;
}

.search-input::placeholder {
    color: var(--text-tertiary);
}

.clear-search-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    font-size: 0.8rem;
    margin-left: var(--space-xs);
}

.clear-search-btn.visible {
    opacity: 1;
    visibility: visible;
}

.clear-search-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Search results styling */
.search-results {
    margin-top: var(--space-sm);
}

.search-no-results {
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.85rem;
}

.search-result-highlight {
    background: rgba(var(--accent-primary-hsl), 0.3);
    color: var(--accent-primary);
    border-radius: 2px;
    padding: 1px 2px;
}

/* Professional Search Loading Animation */
@keyframes professionalSearchSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes subtleOpacity {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.search-loading {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.search-loading i {
    font-size: 1.2rem;
    color: var(--accent-primary);
    animation: subtleOpacity 1.5s ease-in-out infinite;
}

/* Search header with cancel button */
.search-header .search-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cancel-search-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.cancel-search-btn:hover {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.1);
}

/* Search match type indicators */
.search-match-icon {
    opacity: 0.7;
    margin-right: var(--space-xs) !important;
}

.chat-list-item .search-match-icon[title*="content"] {
    color: var(--accent-green);
}

.chat-list-item .search-match-icon[title*="title"] {
    color: var(--accent-primary);
}

.chat-list-header {
    font-size: 0.7rem; 
    font-weight: 500; 
    color: var(--text-tertiary); 
    text-transform: uppercase; 
    letter-spacing: 0.08em; 
    padding: var(--space-sm) var(--space-md) var(--space-sm) var(--space-md); 
    position: sticky; 
    top: 0; 
    background: var(--bg-primary); 
    backdrop-filter: blur(10px);
    z-index: 20; 
    transition: all 0.3s ease;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: var(--space-xs);
}

/* Remove extra spacing from the first header */
.chat-list-header:first-child {
    margin-top: 0;
    padding-top: var(--space-sm);
}

/* Ensure no gaps when scrolling */
.chat-list > *:first-child {
    margin-top: 0;
}

.chat-list { position: relative; }

/* ===============================
   PROFESSIONAL CHAT LIST ITEMS
   =============================== */
.chat-list-item {
    display: flex; 
    align-items: center; 
    gap: 0.75rem; 
    padding: 0.75rem 1rem; 
    margin-bottom: 4px; 
    border-radius: 2rem; 
    color: var(--text-secondary); 
    cursor: pointer; 
    transition: all 0.2s ease; 
    position: relative; 
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.9rem;
}

.chat-list-item i:first-child { 
    font-size: 0.9rem; 
    flex-shrink: 0; 
    opacity: 0.7;
    transition: opacity 0.2s;
}

.chat-list-item .chat-title-text { 
    flex-grow: 1; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
    font-weight: 400;
    line-height: 1.4;
}

.chat-list-item:hover { 
    background: var(--sidebar-item-hover-bg); 
    color: var(--text-primary); 
}

.chat-list-item:hover i:first-child {
    opacity: 1;
}

.chat-list-item.active { 
    background: var(--sidebar-item-active-bg); 
    color: var(--sidebar-item-active-text); 
    font-weight: 500; 
    border-color: transparent;
    box-shadow: none;
}

.chat-list-item.active i:first-child { 
    color: var(--accent-primary); 
    opacity: 1;
}

.chat-item-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--bg-elevated);
    padding: 2px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Show action buttons on hover with smooth animation */
.chat-list-item:hover .chat-item-actions {
    opacity: 1;
    visibility: visible;
}

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

.chat-action-btn:hover { 
    color: var(--text-primary); 
    background: var(--bg-tertiary); 
}

.chat-action-btn.rename-chat-btn:hover { 
    color: var(--accent-primary); 
    background: rgba(var(--accent-primary-rgb), 0.1); 
}

.chat-action-btn.delete-chat-btn:hover { 
    color: var(--accent-red); 
    background: rgba(239, 68, 68, 0.1); 
}

.rename-chat-input {
       flex-grow: 1;
    background-color: var(--bg-input);
    border: 1px solid var(--accent-primary);
    color: var(--text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    outline: none;
    margin-right: 0.5rem;
}
/* --- END OF CHAT LIST ITEM STYLES --- */
        
.theme-switcher { padding: 1rem 0; border-top: 1px solid var(--border-color); display: flex; align-items: center; gap: 0.75rem; }
.theme-label { display: flex; align-items: center; gap: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; flex-shrink: 0; transition: color 0.2s ease; }
.theme-label:hover { color: var(--text-primary); }
.theme-label i { font-size: 1rem; width: 20px; text-align: center; }
#theme-select {
    width: 100%; background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 0.5rem; font-size: 0.85rem; padding: 0.25rem 0.5rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%237D8590' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 16px 12px; transition: all 0.2s ease;
}
#theme-select:focus { box-shadow: 0 0 0 3px rgba(var(--accent-primary-hsl), 0.3); border-color: var(--accent-primary); }

.user-info-sidebar { padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.user-profile { display: flex; align-items: center; gap: 0.75rem; overflow: hidden; flex-grow: 1; }
.user-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-color); }
.user-avatar.anon-avatar { display: flex; align-items: center; justify-content: center; background-color: var(--bg-tertiary); font-size: 1rem; color: var(--text-secondary); }
.user-name { font-weight: 500; font-size: 0.9rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logout-btn-sidebar { background: none; border: none; color: var(--text-secondary); font-size: 1rem; padding: 0.5rem; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; }
.logout-btn-sidebar:hover { background-color: var(--bg-tertiary); color: var(--text-primary); }

.main-content-wrapper { 
    grid-column: 2; 
    display: grid; 
    grid-template-rows: auto 1fr auto; 
    height: 100%; 
    overflow: hidden;
    transition: margin-right 0.3s ease-out;
}

.main-content-wrapper.canvas-active {
    margin-right: 50%;
}
/* ===============================
   CLEAN TOP BAR - Organized & Sleek
   =============================== */
.top-bar { 
    background-color: var(--topbar-bg); 
    padding: 0.875rem var(--space-lg); 
    border-bottom: 1px solid var(--topbar-border); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    flex-shrink: 0; 
    position: sticky;
    top: 0;
    z-index: 100; 
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 1px 20px rgba(0,0,0,0.1);
}

.top-bar-start { 
    display: flex; 
    align-items: center; 
    gap: var(--space-md); 
}

.top-bar .logo .logo-icon { 
    width: 1.5rem; 
    height: 1.5rem; 
}

.top-bar .logo { 
    display: none; 
}

.top-bar-actions { 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
}

.top-bar-btn { 
    background: transparent; 
    border: 1px solid transparent; 
    color: var(--text-secondary); 
    width: 2.5rem; 
    height: 2.5rem; 
    border-radius: var(--radius-lg); 
    cursor: pointer; 
    transition: all 0.3s ease; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.125rem; 
    position: relative;
}

.top-bar-btn:hover { 
    background-color: var(--bg-hover); 
    color: var(--text-primary); 
    border-color: var(--border-color);
    transform: translateY(-1px);
}

.top-bar-btn:active {
    transform: translateY(0);
}
#sidebar-toggle-btn i { transition: transform 0.3s ease; }
body.sidebar-collapsed #sidebar-toggle-btn i { transform: rotate(90deg); }
.chat-container { 
    flex-grow: 1; 
    overflow-y: auto; 
    position: relative; 
    z-index: 1; 
    padding: 0; /* Remove container padding to let content control alignment */
    -webkit-overflow-scrolling: touch;
}
.chat-content { 
    max-width: 48rem; /* Match input frame width */
    margin: 0 auto; 
    padding: 2rem 0; /* No side padding to ensure perfect alignment with input frame */
    width: 100%;
    box-sizing: border-box; /* Ensure padding doesn't add to width */
}

@media (max-width: 768px) {
    .chat-content {
        padding: 2rem 1rem;
    }
}

/* ===============================
   GEMINI-STYLE CLEAN WELCOME
   =============================== */
.welcome-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
    max-width: 100%;
    min-height: calc(100vh - 280px);
    text-align: center;
    animation: fadeIn 0.5s ease-out;
}

.welcome-header {
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.welcome-logo {
    margin-bottom: 1.5rem;
    position: relative;
}

.welcome-logo img {
    width: 64px;
    height: 64px;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.1));
}

.hero-brand {
    display: none;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 400;
}

.hero-cta {
    display: none;
}

/* Modern Suggestion Cards */
.suggestion-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: 800px;
    margin-top: 1rem;
}

.suggestion-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.suggestion-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.suggestion-card .card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-primary);
    font-size: 1.25rem;
    transition: all 0.2s ease;
}

.suggestion-card:hover .card-icon {
    background: var(--accent-primary);
    color: white;
}

.suggestion-card .card-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.suggestion-card .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.suggestion-card .card-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .suggestion-cards {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
    
    .hero-title {
        font-size: 2rem;
    }
}

/* Legacy support removal */
.suggestion-pills {
    display: none;
}

.suggestion-pill {
    display: none;
}

.suggestion-pill:hover {
    display: none;
}

.suggestion-pill i {
    display: none;
}

/* Legacy support removed */




.suggestion-card:nth-child(2) h3::before { content: '�'; }
.suggestion-card:nth-child(3) h3::before { content: '✍️'; }
.suggestion-card:nth-child(4) h3::before { content: '🍳'; }

/* Clean icons on cards removed */



.features-badges {
    display: none;
}

.hero-cta {
    display: none;
}

.hero-subtitle {
    display: none;
}

/* Sidebar overlay/backdrop for mobile */
.close-sidebar-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 8px; padding: 0.4rem 0.6rem; }
.close-sidebar-btn i { pointer-events: none; }
.sidebar-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px); z-index: 900; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
body.sidebar-overlay-open .sidebar-backdrop { opacity: 1; visibility: visible; }

/* Clean mobile responsive */
@media (max-width: 768px) {
    .welcome-section {
        padding: 1.5rem;
        min-height: calc(100vh - 200px);
    }
    
    .welcome-logo img {
        width: 36px;
        height: 36px;
    }
    
    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
    
    .suggestion-pills {
        gap: 0.375rem;
    }
    
    .suggestion-pill {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
    }
    
    .suggestion-pill i {
        font-size: 0.8125rem;
    }
    
    .welcome-section {
        padding: 7rem 1.5rem 4rem 1.5rem;
    }
    
    .features-badges {
        margin-bottom: 2rem;
        gap: 0.5rem;
    }
    
    .features-badges li {
        padding: 0.5rem 0.875rem;
        font-size: 0.8125rem;
        align-items: center;
    }
    
    .hero-cta .btn {
        padding: 0.875rem 2rem;
        font-size: 0.95rem;
        width: 100%;
        max-width: 280px;
    }
    
    .features-badges {
        gap: 0.75rem;
        margin-bottom: 3rem;
    }
    
    .features-badges li {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }
    
    .suggestion-cards {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    
    .suggestion-card {
        padding: 0.875rem 1rem;
    }
    
    #sidebar.visible { transform: translateX(0); }
    body.sidebar-overlay-open { overflow: hidden; }
    .composer-input-wrapper textarea#user-input { max-height: 35vh; overflow-y: auto; }
}

@media (max-width: 480px) {
    .welcome-section {
        padding: 0 1.25rem;
        min-height: calc(100vh - 160px);
    }
    
    .hero-title {
        font-size: 1.5rem;
        margin-bottom: 0.625rem;
    }
    
    .hero-subtitle {
        font-size: 0.9375rem;
        margin-bottom: 2rem;
    }
    
    .suggestion-cards {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    .suggestion-card {
        width: 100%;
        justify-content: flex-start;
    }
    
    .hero-cta .btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .features-badges {
        margin-bottom: 2.5rem;
    }
    
    .suggestion-card {
        padding: 1rem;
    }
}
/* ===============================
   PROFESSIONAL SUGGESTION CARDS
   =============================== */
.suggestion-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    max-width: 850px;
    margin: 0 auto;
}

.suggestion-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.suggestion-card:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.suggestion-card h3 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.suggestion-card p {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.features-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    justify-content: center;
    margin: 2.5rem auto 3.5rem auto;
    padding: 0;
    list-style: none;
}

.features-badges li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.features-badges li:hover {
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.features-badges li i {
    color: var(--accent-primary);
    font-size: 1rem;
}
/* ===============================
   PROFESSIONAL MESSAGE BUBBLES
   =============================== */
.message { 
    display: flex; 
    flex-direction: column; /* Stack content to handle absolute avatar */
    position: relative;
    margin-bottom: 2rem; 
    width: 100%;
    max-width: 100%;
    overflow: visible; /* Allow avatar to sit in gutter */
}

.message-avatar { 
    position: absolute;
    left: -48px; /* Move into gutter */
    top: 0;
    width: 32px;
    height: 32px; 
    border-radius: 8px; 
    background: var(--bg-tertiary); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 0.875rem; 
    color: var(--text-secondary); 
    border: 1px solid var(--border-color); 
}

.ai-message .message-avatar { 
    color: var(--accent-primary); 
    border-color: rgba(var(--accent-primary-rgb), 0.2);
    background: rgba(var(--accent-primary-rgb), 0.1);
}

.user-message .message-avatar {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.message-content { 
    width: 100%;
    padding: 0; 
    line-height: 1.7; 
    color: var(--text-primary);
    font-size: 1rem;
}

/* Mobile Adaptation */
@media (max-width: 1024px) {
    .message {
        flex-direction: row;
        gap: 1rem;
    }
    
    .message-avatar {
        position: static; /* Restore inline flow */
        margin-top: 4px;
    }
    
    .chat-content {
        padding: 2rem 1rem;
    }
}

.message-content p { 
    margin-bottom: 1.2em; 
    line-height: 1.75;
}

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

.message-content ul, 
.message-content ol { 
    margin-bottom: 1.2em; 
    padding-left: 1.75rem;
    line-height: 1.75;
}

.message-content li {
    margin-bottom: 0.5em;
}

.message-content blockquote { 
    margin: 1.5em 0;
    padding-left: 1.25rem;
    border-left: 3px solid var(--accent-primary);
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(var(--accent-primary-rgb), 0.05);
    padding: 1rem 1rem 1rem 1.25rem;
    border-radius: var(--radius-md);
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
    font-weight: 600;
    margin-top: 1.75em;
    margin-bottom: 0.75em;
    line-height: 1.3;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.message-content h1 { font-size: 1.75rem; }
.message-content h2 { font-size: 1.5rem; }
.message-content h3 { font-size: 1.25rem; }
.message-content h4 { font-size: 1.1rem; }

.message-content strong {
    font-weight: 600;
    color: var(--text-primary);
}

.message-content a {
    color: var(--accent-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-color);
    transition: border-bottom-color 0.15s ease;
}

.message-content a:hover {
    border-bottom-color: var(--accent-primary);
}
.message-actions { position: absolute; top: -12px; right: 0; display: flex; gap: 0.25rem; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 0.5rem; padding: 2px; opacity: 0; visibility: hidden; transform: translateY(5px); transition: all 0.2s ease; }
.message:hover .message-actions { opacity: 1; visibility: visible; transform: translateY(0); }
.message-actions button { background: none; border: none; color: var(--text-secondary); width: 1.75rem; height: 1.75rem; border-radius: 0.375rem; font-size: 0.8rem; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.message-actions button:hover { color: var(--text-primary); background-color: var(--bg-tertiary); }

/* Sources Button in Message Actions */
.message-actions .view-sources-btn {
    width: auto;
    padding: 0.25rem 0.5rem;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: var(--accent-primary);
}
.message-actions .view-sources-btn:hover {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}
.message-actions .view-sources-btn i {
    font-size: 0.7rem;
}

/* ===============================
   PROFESSIONAL CODE BLOCKS
   =============================== */

/* Professional code block container */
.message-content pre {
    position: relative;
    margin: 1.5rem 0;
    border-radius: var(--radius-lg);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    max-width: 100%;
}

/* Code content styling with better spacing */
.message-content pre code {
    display: block;
    padding: 1.25rem 1.5rem;
    margin: 0;
    background: transparent !important;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-family: var(--font-mono);
    line-height: 1.65;
    white-space: pre;
    overflow-x: auto;
    border-radius: 0;
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.message-content pre code::-webkit-scrollbar {
    height: 8px;
}

.message-content pre code::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

.message-content pre code::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 4px;
}

.message-content pre code::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Professional inline code styling */
.message-content code:not(pre code) {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
    padding: 0.2rem 0.45rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.875em;
    font-weight: 500;
    border: 1px solid var(--border-color);
}

/* OLD CODE BLOCK STYLES REMOVED - Using syntax-highlight.css now */

.thinking-details { margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem; }
.thinking-details summary { cursor: pointer; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; outline: none; transition: color 0.2s ease; }
.thinking-details summary:hover { color: var(--accent-primary); }
.thinking-content { padding: 0.5rem 0; color: var(--text-tertiary); font-size: 0.85rem; line-height: 1.6; }

/* --- Status Indicators & Loaders --- */
.status-line { display: none; align-items: center; gap: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.75rem; animation: fadeIn 0.3s ease; }
.status-line.visible { display: flex; }

.shiki-toolbar .code-copy-btn.copied {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

/* Professional language badge */
.message-content .shiki-toolbar .code-language-label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
}

.message-content .shiki-toolbar .code-language-label::before { display: none; }

[data-theme="dark"] .message-content .shiki-toolbar .code-language-label {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Professional copy button */
.message-content .shiki-toolbar .code-copy-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: var(--font-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    min-width: 5rem !important;
    justify-content: center !important;
}

.message-content .shiki-toolbar .code-copy-btn::before {
    display: none;
}

.message-content .shiki-toolbar .code-copy-btn:hover {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

.message-content .shiki-toolbar .code-copy-btn:active { 
    transform: scale(0.98) !important;
}

/* ==================== 🚀 PROFESSIONAL PRISM.JS STYLING ==================== */

/* Professional code block container */
.message-content pre[class*="language-"] {
    position: relative !important;
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: var(--radius-xl) !important;
    background: var(--code-bg) !important;
    border: 1px solid var(--code-border) !important;
    box-shadow: var(--shadow-sm) !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    transition: all 0.3s ease !important;
}

.message-content pre[class*="language-"]:hover { box-shadow: none !important; transform: none !important; }

/* Code content styling */
.message-content pre[class*="language-"] code {
    display: block !important;
    padding: 1.5rem !important;
    padding-top: 3.5rem !important; /* Space for toolbar */
    margin: 0 !important;
    background: transparent !important;
    font-size: inherit !important;
    font-family: inherit !important;
    line-height: inherit !important;
    white-space: pre !important;
    overflow-x: auto !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
}

/* 🎯 PREMIUM TOOLBAR STYLING */
.message-content pre[class*="language-"] .toolbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1.25rem !important;
    background: var(--code-toolbar-bg) !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid var(--code-border) !important;
    border-radius: 12px 12px 0 0 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    z-index: 10 !important;
}

/* Language label styling */
.message-content pre[class*="language-"] .toolbar .toolbar-item:first-child {
    background: transparent !important;
    color: var(--text-secondary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
    box-shadow: none !important;
}

/* Premium copy button */
.message-content pre[class*="language-"] .toolbar .toolbar-item button {
    background: var(--code-toolbar-btn-bg) !important;
    border: 1px solid var(--code-toolbar-btn-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0.4rem 0.8rem !important;
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    color: var(--code-toolbar-btn-text) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    white-space: nowrap !important;
}

.message-content pre[class*="language-"] .toolbar .toolbar-item button:hover {
    background: var(--code-toolbar-btn-hover-bg) !important;
    border-color: var(--code-toolbar-btn-border) !important;
    color: var(--code-toolbar-btn-hover-text) !important;
    transform: translateY(-1px);
}

.message-content pre[class*="language-"] .toolbar .toolbar-item button:active { 
    transform: translateY(0) !important;
}

/* Success state for copy button */
.message-content pre[class*="language-"] .toolbar .toolbar-item button.copied {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}

/* 📜 PROFESSIONAL SCROLLBAR */
.message-content pre[class*="language-"] code::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.message-content pre[class*="language-"] code::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.message-content pre[class*="language-"] code::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

.message-content pre[class*="language-"] code::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* 🎨 BEAUTIFUL SYNTAX HIGHLIGHTING - VS Code Style */
.message-content .token.comment,
.message-content .token.prolog,
.message-content .token.doctype,
.message-content .token.cdata {
    color: var(--token-comment) !important;
    font-style: italic;
}

.message-content .token.punctuation {
    color: var(--token-punctuation) !important;
}

.message-content .token.property,
.message-content .token.tag,
.message-content .token.boolean,
.message-content .token.constant {
    color: var(--token-property) !important;
}

.message-content .token.number {
    color: var(--token-number) !important;
}

.message-content .token.symbol,
.message-content .token.deleted {
    color: var(--token-string) !important;
}

.message-content .token.selector,
.message-content .token.attr-name,
.message-content .token.char,
.message-content .token.builtin,
.message-content .token.inserted {
    color: var(--token-property) !important;
}

.message-content .token.string,
.message-content .token.attr-value {
    color: var(--token-string) !important;
}

.message-content .token.operator,
.message-content .token.entity,
.message-content .token.url {
    color: var(--token-punctuation) !important;
}

.message-content .token.keyword {
    color: var(--token-keyword) !important;
    font-weight: 500;
}

.message-content .token.function,
.message-content .token.class-name {
    color: var(--token-function) !important;
    font-weight: 500;
}

.message-content .token.variable {
    color: var(--token-property) !important;
}

.message-content .token.regex,
.message-content .token.important {
    color: var(--token-string) !important;
}

.message-content .token.function,
.message-content .token.class-name {
    color: #DCDCAA !important;
    font-weight: 500;
}

.message-content .token.variable {
    color: #9CDCFE !important;
}

.message-content .token.regex,
.message-content .token.important {
    color: #D16969 !important;
}

/* 📱 RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .message-content pre[class*="language-"] {
        margin: 1rem 0 !important;
        border-radius: 8px !important;
        font-size: 0.8rem !important;
    }
    
    .message-content pre[class*="language-"] code {
        padding: 1rem !important;
        padding-top: 3rem !important;
    }
    
    .message-content pre[class*="language-"] .toolbar {
        padding: 0.5rem 1rem !important;
        border-radius: 8px 8px 0 0 !important;
    }
    
    .message-content pre[class*="language-"] .toolbar .toolbar-item:first-child {
        padding: 0.2rem 0.5rem !important;
        font-size: 0.65rem !important;
    }
    
    .message-content pre[class*="language-"] .toolbar .toolbar-item button {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.7rem !important;
    }
}

/* Enhanced success state */
.message-content .shiki-toolbar .code-copy-btn.copied {
    background: #059669 !important;
    border-color: #059669 !important;
    color: white !important;
}

/* Dark theme copy button */
[data-theme="dark"] .message-content .shiki-toolbar .code-copy-btn {
    background: #1a202c !important;
    border-color: #4a5568 !important;
}

[data-theme="dark"] .message-content .shiki-toolbar .code-copy-btn:hover {
    background: #4f46e5 !important;
    border-color: #6366f1 !important;
}

/* Icon styling within button */
.message-content .shiki-toolbar .code-copy-btn i { font-size: 0.75rem; }

/* Dark theme adjustments */
[data-theme="dark"] .message-content pre {
    background: #1a1b26;
    border-color: #2a2e42;
}

[data-theme="dark"] .message-content .shiki-toolbar {
    background: #16161e !important;
    border-color: #2a2e42 !important;
}

[data-theme="dark"] .message-content .shiki-toolbar button.copied {
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: #22c55e !important;
    color: #22c55e !important;
}

/* Scrollbar styling for code blocks */
.message-content pre code::-webkit-scrollbar {
    height: 0.5rem;
}

.message-content pre code::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
}

.message-content pre code::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--radius-sm);
}

.message-content pre code::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Enhanced focus states for accessibility */
.message-content .shiki-toolbar button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .message-content pre {
        margin: 1rem -0.5rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .message-content pre code {
        padding: 0.875rem 1rem;
        font-size: 0.8125rem;
    }
    
    .message-content .shiki-toolbar {
        padding: 0.625rem 1rem !important;
        font-size: 0.6875rem !important;
    }
    
    .message-content .shiki-toolbar button {
        padding: 0.3125rem 0.625rem !important;
        font-size: 0.6875rem !important;
        min-width: 3.5rem !important;
    }
}
        
.thinking-details { margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem; }
.thinking-details summary { cursor: pointer; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; outline: none; transition: color 0.2s ease; }
.thinking-details summary:hover { color: var(--accent-primary); }
.thinking-content { padding: 0.5rem 0; color: var(--text-tertiary); font-size: 0.85rem; line-height: 1.6; }

/* --- [ADDED] STATUS INDICATORS & LOADERS --- */
.status-line { display: none; align-items: center; gap: 0.75rem; color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.75rem; animation: fadeIn 0.3s ease; }
.status-line.visible { display: flex; }

.shiki-toolbar .code-copy-btn.copied {
    background: var(--accent-green);
    color: white;
    border-color: var(--accent-green);
}

/* Professional language badge */
.message-content .shiki-toolbar .code-language-label {
    color: var(--text-secondary) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding: 0.375rem 0.75rem !important;
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
}

.message-content .shiki-toolbar .code-language-label::before { display: none; }

[data-theme="dark"] .message-content .shiki-toolbar .code-language-label {
    background: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}

/* Professional copy button */
.message-content .shiki-toolbar .code-copy-btn {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    padding: 0.5rem 1rem !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-family: var(--font-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    min-width: 5rem !important;
    justify-content: center !important;
}

.message-content .shiki-toolbar .code-copy-btn::before {
    display: none;
}

.message-content .shiki-toolbar .code-copy-btn:hover {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

.message-content .shiki-toolbar .code-copy-btn:active { 
    transform: scale(0.98) !important;
}

/* ==================== 🚀 PROFESSIONAL PRISM.JS STYLING ==================== */

/* Professional code block container */
.message-content pre[class*="language-"] {
    position: relative !important;
    margin: 1.5rem 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: var(--radius-xl) !important;
    background: var(--code-bg) !important;
    border: 1px solid var(--code-border) !important;
    box-shadow: var(--shadow-sm) !important;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Monaco', monospace !important;
    font-size: 0.9rem !important;
}

.status-line .spinner { 
    width: 18px; 
    height: 18px; 
    position: relative;
    border: 2px solid;
    border-radius: 50%; 
    animation: eliteSpinnerCore 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    margin-right: 8px;
}

.status-line .spinner::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border: 1px solid var(--accent-primary);
    border-radius: 50%;
    animation: eliteSpinnerOrbit 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.status-line .spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--accent-primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: subtlePulse 1s ease-in-out infinite;
}

/* Professional Image Generation Spinner */
@keyframes professionalImageSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes imageProgress {
    0% { stroke-dashoffset: 125; }
    100% { stroke-dashoffset: 0; }
}

/* Unique Image Generation - Paint Brush Effect */
@keyframes paintBrush {
    0% { transform: rotate(-10deg) translateX(-2px); }
    50% { transform: rotate(10deg) translateX(2px); }
    100% { transform: rotate(-10deg) translateX(-2px); }
}

@keyframes paintDrip {
    0%, 100% { height: 2px; opacity: 0.6; }
    50% { height: 8px; opacity: 1; }
}

.status-line.generating-image {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
}

.status-line.generating-image .paint-brush {
    position: relative;
    width: 20px;
    height: 16px;
}

.status-line.generating-image .paint-brush::before {
    content: '🖌️';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 16px;
    animation: paintBrush 1.5s ease-in-out infinite;
    transform-origin: bottom center;
}

.status-line.generating-image .paint-brush::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 8px;
    width: 2px;
    background: var(--accent-primary);
    border-radius: 1px;
    animation: paintDrip 1.8s ease-in-out infinite;
}

/* Typing Indicator */
@keyframes blink-caret { from, to { opacity: 0 } 50% { opacity: 1 } }
.ai-response-area .answer-content:not(:empty)::after { content: '▋'; display: inline-block; animation: blink-caret 1s step-end infinite; color: var(--accent-primary); margin-left: 2px; font-size: 1.1em; transform: translateY(1px); }
.message.final-message .ai-response-area .answer-content::after { display: none; }

/* --- [ADDED/REPLACED] IMAGE DISPLAY STYLES --- */
/* For user-uploaded images */
.message-content img:not(.generated-image) { max-width: 100%; max-height: 400px; border-radius: 0.75rem; margin-top: 0.5rem; border: 1px solid var(--border-color); cursor: pointer; }
/* For AI-generated images */
.generated-image {
    max-width: 100%; border-radius: 1rem; border: 1px solid var(--border-color); margin-top: 0.75rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.2s ease-in-out;
}

/* ===============================================
   PROFESSIONAL TABLE FORMATTING - BEATS OPENAI
   =============================================== */

/* Table Container with Horizontal Scroll */
.table-container {
    overflow-x: auto;
    margin: 1rem 0;
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

/* Main Table Styling */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.9rem;
    line-height: 1.4;
    background: var(--bg-primary);
    margin: 0;
}

/* Table Header Styling */
thead {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    position: sticky;
    top: 0;
    z-index: 10;
}

thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--accent-primary);
    border-right: 1px solid var(--border-color);
    background: inherit;
    white-space: nowrap;
    position: relative;
}

thead th:last-child {
    border-right: none;
}

/* Header with Sort Indicators */
thead th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

thead th.sortable:hover {
    background: rgba(var(--accent-primary-hsl), 0.1);
}

thead th.sortable::after {
    content: '↕️';
    font-size: 0.8em;
    opacity: 0.5;
    margin-left: 8px;
}

/* Table Body Styling */
tbody tr {
    transition: background-color 0.2s ease, transform 0.1s ease;
    border-bottom: 1px solid var(--border-color);
}

tbody tr:nth-child(even) {
    background: rgba(var(--bg-secondary-hsl), 0.3);
}

tbody tr:hover {
    background: rgba(var(--accent-primary-hsl), 0.08);
    transform: translateX(2px);
    box-shadow: 2px 0 0 0 var(--accent-primary);
}

tbody td {
    padding: 10px 16px;
    border-right: 1px solid var(--border-color);
    vertical-align: top;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

tbody td:last-child {
    border-right: none;
}

/* Numeric Column Alignment */
tbody td.numeric {
    text-align: right;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-weight: 500;
}

/* Currency Formatting */
tbody td.currency {
    text-align: right;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-weight: 600;
    color: var(--accent-primary);
}

tbody td.currency.positive {
    color: #10b981; /* Green for positive */
}

tbody td.currency.negative {
    color: #ef4444; /* Red for negative */
}

/* Ensure proper contrast in all themes */
[data-theme="light"] tbody td.currency.positive { color: #059669; }
[data-theme="light"] tbody td.currency.negative { color: #dc2626; }
[data-theme="dark"] tbody td.currency.positive { color: #10b981; }
[data-theme="dark"] tbody td.currency.negative { color: #ef4444; }

/* Date Column Formatting */
tbody td.date {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-size: 0.85em;
    color: var(--text-secondary);
}

/* Status/Badge Columns */
tbody td .status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

tbody td .status-badge.success {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

tbody td .status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

tbody td .status-badge.error {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Table Footer for Totals */
tfoot {
    background: linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
    border-top: 2px solid var(--accent-primary);
    font-weight: 600;
}

tfoot td {
    padding: 12px 16px;
    border-right: 1px solid var(--border-color);
    color: var(--text-primary);
}

tfoot td:last-child {
    border-right: none;
}

tfoot td.total {
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    font-weight: 700;
    color: var(--accent-primary);
    text-align: right;
}

/* Enhanced Responsive Table Design */
@media (max-width: 1024px) {
    .table-container {
        margin: 1rem 0;
        border-radius: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--accent-primary) var(--bg-secondary);
    }
    
    .table-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .table-container::-webkit-scrollbar-track {
        background: var(--bg-secondary);
        border-radius: 4px;
    }
    
    .table-container::-webkit-scrollbar-thumb {
        background: var(--accent-primary);
        border-radius: 4px;
    }
    
    .table-container::-webkit-scrollbar-thumb:hover {
        background: var(--accent-secondary);
    }
}

@media (max-width: 768px) {
    table {
        font-size: 0.85rem;
        min-width: 100%;
    }
    
    thead th, tbody td, tfoot td {
        padding: 12px 10px;
        white-space: nowrap;
    }
    
    thead th {
        font-size: 0.8rem;
        letter-spacing: 0.3px;
    }
    
    .table-container {
        margin: 1rem 0;
        box-shadow: var(--shadow-md);
        border: 2px solid var(--border-color);
    }
    
    /* Mobile table scroll indicator */
    .table-container::after {
        content: 'Swipe to see more →';
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(var(--accent-primary-rgb), 0.9);
        color: white;
        padding: 0.25rem 0.5rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 500;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1;
    }
    
    .table-container:hover::after {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    table {
        font-size: 0.8rem;
    }
    
    thead th, tbody td, tfoot td {
        padding: 10px 8px;
        font-size: 0.75rem;
    }
    
    thead th {
        font-size: 0.7rem;
        padding: 12px 8px;
    }
    
    .table-container {
        margin: 0.75rem 0;
        border-radius: 8px;
    }
    
    /* Compact mobile table styling */
    tbody tr {
        border-bottom: 2px solid var(--border-color);
    }
    
    tbody td {
        line-height: 1.4;
    }
    
    /* Number formatting for mobile */
    tbody td[data-type="number"],
    tbody td.number,
    tbody td:has(span.currency) {
        font-family: var(--font-mono);
        text-align: right;
        font-weight: 600;
    }
}

/* Table Caption Styling */
table caption {
    caption-side: top;
    padding: 12px 16px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    text-align: left;
}

/* ===============================================
   INTERACTIVE TABLE FUNCTIONALITY
   =============================================== */

/* Add click handlers for sortable tables */
.table-enhanced {
    position: relative;
}

.table-enhanced .sort-asc::after {
    content: '▲';
    color: var(--accent-primary);
    opacity: 1;
}

.table-enhanced .sort-desc::after {
    content: '▼';
    color: var(--accent-primary);
    opacity: 1;
}

/* Table summary/statistics bar */
.table-stats {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 8px 16px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.table-stats .stat-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.table-stats .stat-value {
    font-weight: 600;
    color: var(--accent-primary);
}

/* ===============================================
   DYNAMIC DATA DASHBOARD - AI-DRIVEN VISUALIZATION
   =============================================== */

/* Dynamic Dashboard */
.dynamic-dashboard {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    margin: var(--space-lg) 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg) var(--space-xl);
    background: linear-gradient(90deg, var(--accent-primary-soft), rgba(255,255,255,0.03));
    border-bottom: 1px solid var(--border-color);
}

.dashboard-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.dashboard-nav {
    display: flex;
    gap: var(--space-sm);
}

.nav-btn {
    padding: var(--space-sm) var(--space-lg);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.nav-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    box-shadow: 0 2px 4px rgba(37,99,235,0.3);
}

.dashboard-content {
    padding: var(--space-xl);
}

.dashboard-view {
    display: none;
}

.dashboard-view.active {
    display: block;
}

/* Metrics View */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.metric-card {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    transition: all 0.2s ease;
}

.metric-card:hover {
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.metric-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    font-weight: 500;
}

.metric-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: var(--font-mono);
}

/* Chart View */
.chart-controls {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    justify-content: center;
}

.chart-type-btn {
    padding: var(--space-sm) var(--space-md);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chart-type-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
}

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

.dynamic-chart-container {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 24px;
    height: 450px;
    position: relative;
    box-shadow: var(--shadow-sm);
    margin: 16px 0;
}

.dynamic-chart-container canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 4px;
}

/* Professional Chart Title */
.chart-container .chart-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    text-align: center;
}

.chart-container .chart-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 20px;
}

/* Finance-Grade Chart Controls */
.chart-type-btn {
    padding: 8px 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chart-type-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

.chart-type-btn.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(var(--accent-primary-rgb), 0.2);
}

/* Insights View */
.insights-container {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.insight-item {
    background: linear-gradient(135deg, var(--bg-input), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    color: var(--text-primary);
    line-height: 1.6;
}

.no-insights {
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--space-xl);
}

.no-metrics {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
    padding: var(--space-xl);
    background: var(--bg-input);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
}

/* ===============================================
   PROFESSIONAL DATA VISUALIZATION & CHARTS
   =============================================== */

/* Professional Chart Container */
.chart-container {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.chart-container:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-primary);
}

/* Responsive Chart Header */
.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
    gap: 1rem;
}

.chart-title-group {
    flex: 1;
    min-width: 200px;
}

.chart-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}

.chart-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.chart-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.chart-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-height: 36px;
    display: flex;
    align-items: center;
}

.chart-toggle:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.chart-toggle.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.3);
}

/* Responsive Chart Canvas */
.chart-canvas {
    position: relative;
    width: 100%;
    height: 350px;
    min-height: 250px;
    max-height: 500px;
    background: rgba(var(--bg-secondary-rgb), 0.5);
    border-radius: 12px;
    overflow: hidden;
}

.chart-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 12px;
}

.chart-canvas.large {
    height: 450px;
}

.chart-canvas.small {
    height: 250px;
}

/* Mobile Responsive Charts */
@media (max-width: 768px) {
    .chart-container {
        margin: 1rem 0;
        padding: 1rem;
        border-radius: 12px;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .chart-title-group {
        min-width: unset;
    }
    
    .chart-title {
        font-size: 1.1rem;
    }
    
    .chart-subtitle {
        font-size: 0.85rem;
    }
    
    .chart-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .chart-toggle {
        flex: 1;
        min-width: 80px;
        justify-content: center;
        padding: 10px 8px;
        font-size: 0.75rem;
    }
    
    .chart-canvas {
        height: 280px;
    }
    
    .chart-canvas.large {
        height: 320px;
    }
    
    .chart-canvas.small {
        height: 220px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        padding: 0.75rem;
        margin: 0.75rem 0;
    }
    
    .chart-header {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    
    .chart-title {
        font-size: 1rem;
    }
    
    .chart-canvas {
        height: 240px;
    }
    
    .chart-toggle {
        padding: 8px 6px;
        font-size: 0.7rem;
        min-width: 70px;
    }
}

/* Statistics Panel */
.stats-panel {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-card .stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}

.stat-card .stat-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-primary);
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.stat-card .stat-change {
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.stat-change.positive {
    color: #10b981;
}

.stat-change.negative {
    color: #ef4444;
}

.stat-change.neutral {
    color: var(--text-secondary);
}

/* Data Insights */
.data-insights {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-primary);
    border-radius: 0 8px 8px 0;
    padding: 1rem;
    margin: 1rem 0;
}

.data-insights .insights-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.data-insights .insights-title::before {
    content: '💡';
    font-size: 1.2em;
}

.data-insights .insight-item {
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.data-insights .insight-highlight {
    background: rgba(var(--accent-primary-hsl), 0.1);
    color: var(--accent-primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Chart Types */
.chart-type-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.chart-type-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chart-type-btn:hover,
.chart-type-btn.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .chart-container {
        padding: 0.75rem;
        margin: 1rem 0;
    }
    
    .chart-canvas {
        height: 250px;
    }
    
    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .stats-panel {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 0.75rem;
        padding: 0.75rem;
    }
    
    .stat-card .stat-number {
        font-size: 1.25rem;
    }
}
.generated-image:hover {
    transform: scale(1.02);
}
.answer-content > p:has(+ .generated-image) {
    color: var(--text-primary); font-weight: 500;
}
.thinking-details-area .thinking-details {
    margin-top: 1rem; border-top: 1px solid var(--border-color); padding-top: 1rem;
}

/* --- INPUT AREA --- */
.input-section { padding: 1rem 1.5rem 1.5rem 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.3), transparent); position: relative; z-index: 10; }
.input-area-wrapper { max-width: 820px; margin: 0 auto; transition: opacity 0.3s ease; }
.input-area { display: flex; align-items: flex-end; background-color: var(--bg-input); border: 1px solid var(--border-color); border-radius: 1.25rem; padding: 0.5rem 0.5rem 0.5rem 1.25rem; box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.input-area:focus-within { border-color: var(--accent-primary); box-shadow: 0 0 0 3px rgba(var(--accent-primary-hsl), 0.3), 0 4px 20px rgba(0,0,0,0.2); }
#user-input { flex-grow: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 1rem; font-family: var(--font-primary); resize: none; padding: 0.5rem 0; line-height: 1.5; max-height: 200px; overflow-y: auto; }
#user-input::placeholder { color: var(--text-secondary); }
.input-buttons { display: flex; align-items: flex-end; padding-left: 0.5rem; }
.input-buttons button { background: none; border: none; color: var(--text-secondary); font-size: 1.125rem; width: 2.5rem; height: 2.5rem; cursor: pointer; transition: all 0.2s ease; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.input-buttons button:hover:not(:disabled) { color: var(--text-primary); background-color: var(--bg-tertiary); }
#send-button { background-color: var(--accent-primary); color: #fff; transform: scale(0.9); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
#send-button:not(:disabled) { transform: scale(1); opacity: 1; visibility: visible; pointer-events: auto; }
#send-button:not(:disabled):hover { background-color: var(--accent-primary-hover); }
#send-button i { transform: translateX(1px); }
.input-area-wrapper.processing { opacity: 0.7; pointer-events: none; }

/* BUT allow the stop button to be clickable during processing */
.input-area-wrapper.processing .stop-btn {
    pointer-events: auto;
    cursor: pointer;
    opacity: 1;
}

/* Enhanced attachment preview container */
.attachment-preview { 
    width: 100%; 
    margin: 0 0 0.5rem 0; 
    padding: 0; 
    background: linear-gradient(145deg, var(--bg-input) 0%, rgba(26, 33, 41, 0.9) 100%);
    border: 1px solid var(--border-color); 
    border-radius: 0.875rem; 
    animation: slideInUp 0.3s ease; 
    overflow: hidden;
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-md);
}

/* Attachment header with counter and clear all button */
.attachment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(4px);
}

.attachment-counter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.attachment-counter i {
    color: var(--accent-primary);
    font-size: 0.825rem;
}

.clear-all-btn {
    background: rgba(248, 81, 73, 0.1);
    border: 1px solid rgba(248, 81, 73, 0.2);
    color: var(--accent-red);
    padding: 0.375rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.clear-all-btn:hover {
    background: rgba(248, 81, 73, 0.15);
    border-color: var(--accent-red);
    transform: translateY(-1px);
}

/* Enhanced attachment list */
.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    max-height: 280px;
    overflow-y: auto;
}

/* Modern attachment items */
.attachment-item { 
    background: linear-gradient(145deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.01) 100%);
    border: 1px solid var(--border-color); 
    border-radius: 0.75rem; 
    padding: 0.75rem; 
    display: flex; 
    flex-direction: row;
    align-items: center;
    gap: 0.75rem; 
    position: relative; 
    overflow: hidden;
    transition: all 0.25s ease;
    cursor: pointer;
    backdrop-filter: blur(4px);
    width: 100%;
}

.attachment-item:hover {
    background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* Attachment thumbnails and icons */
.attachment-thumb { 
    width: 60px; 
    height: 60px; 
    object-fit: cover; 
    border-radius: 0.5rem; 
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attachment-item:hover .attachment-thumb {
    transform: scale(1.05);
}

.attachment-icon { 
    width: 60px; 
    height: 60px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(26, 33, 41, 0.8) 100%);
    border-radius: 0.5rem; 
    font-size: 1.25rem; 
    color: var(--accent-primary);
    border: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attachment-item:hover .attachment-icon {
    color: var(--accent-primary-hover);
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, rgba(33, 41, 51, 0.9) 100%);
}
.attachment-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.file-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.file-summary { font-size: 0.8rem; color: var(--text-secondary); max-width: 420px; overflow: hidden; text-overflow: ellipsis; }
.file-actions { margin-top: 0.25rem; }
.remove-attachment-btn { background: transparent; border: 1px solid rgba(255,255,255,0.04); color: var(--text-secondary); padding: 0.25rem 0.5rem; border-radius: 0.375rem; cursor: pointer; }
.remove-attachment-btn:hover { background: rgba(255,255,255,0.02); color: var(--text-primary); }

.attached-file-display { display:flex; gap:0.75rem; align-items:flex-start; padding:0.5rem 0; }
.attached-file-display .file-icon { width:44px; height:44px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.02); border-radius:8px; }
.attached-file-display .file-content { display:flex; flex-direction:column; gap:0.25rem; }
.attached-file-display .file-name { font-weight:700; }
.attached-extracted-img { width:96px; height:96px; object-fit:cover; margin-top:6px; border-radius:8px; }
.message-image { max-width:420px; border-radius:8px; display:block; margin-top:8px; }

/* New multi-attachment styles */
.attachment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; width: 100%; }
/* Attachment metadata */
.attachment-meta { 
    display: flex; 
    flex-direction: column; 
    gap: 0.25rem;
    min-height: 0;
    flex: 1;
    min-width: 0;
}

.file-name { 
    font-size: 0.875rem; 
    color: var(--text-primary); 
    font-weight: 500;
    line-height: 1.3;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.file-info { 
    font-size: 0.75rem; 
    color: var(--text-secondary); 
    display: flex;
    align-items: center;
    gap: 0.375rem;
    opacity: 0.8;
}

.file-type-badge {
    background: var(--accent-primary);
    color: white;
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.file-size {
    font-size: 0.7rem;
    color: var(--text-tertiary);
}

.file-summary {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    opacity: 0.9;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Enhanced remove button */
.remove-attachment-btn { 
    position: absolute; 
    top: 8px; 
    right: 8px; 
    background: rgba(0, 0, 0, 0.6); 
    border: none; 
    color: #fff; 
    width: 28px; 
    height: 28px; 
    border-radius: 50%; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    font-size: 0.875rem;
    transition: all 0.2s ease;
    opacity: 0;
    transform: scale(0.8);
    backdrop-filter: blur(4px);
    z-index: 10;
}

.attachment-item:hover .remove-attachment-btn {
    opacity: 1;
    transform: scale(1);
}

.remove-attachment-btn:hover { 
    background: var(--accent-red); 
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(248, 81, 73, 0.3);
}

/* Attachment limit badge */
.attachment-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--accent-red);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-secondary);
    animation: pulse 2s infinite;
}

/* Smooth animations */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Extracted images preview */
.extracted-images {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.extracted-images img {
    border-radius: 0.25rem;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.2s ease;
}

.extracted-images img:hover {
    transform: scale(1.1);
    z-index: 10;
    position: relative;
}

.extracted-count {
    color: var(--accent-primary);
    font-weight: 500;
    font-size: 0.7rem;
}

/* Professional Loading state for attachments */
@keyframes professionalAttachmentLoad {
    0% { left: -100%; }
    100% { left: 100%; }
}

.attachment-item.loading {
    opacity: 0.7;
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

.attachment-item.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--accent-primary-hsl), 0.15), transparent);
    animation: professionalAttachmentLoad 1.5s ease-in-out infinite;
}

.attachment-item.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(var(--accent-primary-hsl), 0.3);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: professionalSpin 1s linear infinite;
}

/* Original basic spin animation kept for compatibility */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Processing state styles */
.attachment-item.processing {
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.3);
    opacity: 0.9;
}

.attachment-item.processing .attachment-icon i {
    animation: spin 1s linear infinite;
}

.processing-text {
    color: #2196F3 !important;
    font-style: italic;
}

.processing-badge {
    background: #2196F3;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Error state styles */
.attachment-item.error {
    background: rgba(244, 67, 54, 0.1);
    border: 1px solid rgba(244, 67, 54, 0.3);
}

.error-text {
    color: #f44336 !important;
    font-style: italic;
}

.error-badge {
    background: #f44336;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Success state styles */
.success-badge {
    background: #4CAF50;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced attachment processing states */
@keyframes pulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

@keyframes processingGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(33, 150, 243, 0.3); }
    50% { box-shadow: 0 0 15px rgba(33, 150, 243, 0.6); }
}

/* Enhanced processing attachment item */
.attachment-item.processing {
    background: rgba(33, 150, 243, 0.15);
    border: 1px solid rgba(33, 150, 243, 0.4);
    opacity: 0.95;
    animation: processingGlow 2s ease-in-out infinite;
}

.attachment-item.processing .file-name {
    color: #2196F3;
}

/* Processing state for input area */
#input-area-wrapper.processing {
    opacity: 0.8;
    pointer-events: none;
}

/* Disabled send button with processing files */
#send-button:disabled {
    cursor: not-allowed;
    transition: all 0.2s ease;
}

#send-button:disabled:hover {
    transform: none;
    background: var(--bg-input);
}

/* Attach button processing state */
#attach-file-btn.disabled {
    cursor: not-allowed;
    transition: all 0.2s ease;
}

#attach-file-btn.disabled .fa-spin {
    color: #2196F3;
}

/* Enhanced attachment counter with processing indicator */
.attachment-counter.processing {
    color: #2196F3;
}

.attachment-counter.processing::after {
    content: " (processing...)";
    font-size: 0.75rem;
    opacity: 0.8;
    animation: pulse 1.5s ease-in-out infinite;
}

/* Processing indicator in attachment header */
.processing-indicator {
    display: flex;
    align-items: center;
    background: rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: 0.5rem;
    padding: 0.375rem 0.75rem;
    animation: processingGlow 2s ease-in-out infinite;
}

.processing-indicator i {
    font-size: 0.8rem;
}

.processing-indicator span {
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* Professional Loading Screen for Page Transitions */
@keyframes professionalPageLoad {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.professional-loader {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    z-index: 9999;
    border: 3px solid rgba(var(--accent-primary-hsl), 0.1);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: professionalSpin 1s linear infinite;
}

/* Professional Loading Dots */
.loading-dots {
    display: flex;
    gap: 4px;
    align-items: center;
}

.loading-dots::before,
.loading-dots::after {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: subtleOpacity 1.2s ease-in-out infinite;
}

.loading-dots::before {
    animation-delay: 0s;
}

.loading-dots::after {
    animation-delay: 0.4s;
}

/* Professional Button Loading States */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: professionalSpin 0.8s linear infinite;
}

/* Professional Send Button Animation */
.send-btn.sending {
    opacity: 0.8;
}

.send-btn.sending::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: professionalSpin 0.8s linear infinite;
}

/* Stop Response Button - replaces send button during streaming */
.send-btn.stop-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

.send-btn.stop-btn i {
    color: #dc3545;
    font-size: 18px;
}

.send-btn.stop-btn:hover {
    background: #ffe5e7;
    border-color: #dc3545;
}

[data-theme="dark"] .send-btn.stop-btn:hover {
    background: rgba(220, 53, 69, 0.1);
}

.send-btn.stop-btn:active {
    transform: scale(0.95);
}

/* Unique Web Search Bar Chart Animation */
@keyframes searchBarChart {
    0% { height: 4px; }
    25% { height: 12px; }
    50% { height: 8px; }
    75% { height: 16px; }
    100% { height: 4px; }
}

.status-line.searching-status {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-line.searching-status .search-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 16px;
    margin-right: 2px;
}

.status-line.searching-status .search-bars .bar {
    width: 3px;
    background: var(--accent-primary);
    border-radius: 1px;
    animation: searchBarChart 1.2s ease-in-out infinite;
}

.status-line.searching-status .search-bars .bar:nth-child(1) { animation-delay: 0s; }
.status-line.searching-status .search-bars .bar:nth-child(2) { animation-delay: 0.2s; }
.status-line.searching-status .search-bars .bar:nth-child(3) { animation-delay: 0.4s; }
.status-line.searching-status .search-bars .bar:nth-child(4) { animation-delay: 0.6s; }

/* Unique Thinking Animation - Brain Waves */
@keyframes brainWave {
    0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
    50% { transform: scaleY(1); opacity: 1; }
}

.status-line.thinking-status {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--accent-primary);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--text-primary);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-line.thinking-status .brain-waves {
    display: flex;
    align-items: center;
    gap: 1px;
    height: 16px;
}

.status-line.thinking-status .brain-waves .wave {
    width: 2px;
    height: 16px;
    background: var(--accent-primary);
    border-radius: 1px;
    animation: brainWave 1.4s ease-in-out infinite;
    transform-origin: center;
}

.status-line.thinking-status .brain-waves .wave:nth-child(1) { animation-delay: 0s; }
.status-line.thinking-status .brain-waves .wave:nth-child(2) { animation-delay: 0.1s; }
.status-line.thinking-status .brain-waves .wave:nth-child(3) { animation-delay: 0.2s; }
.status-line.thinking-status .brain-waves .wave:nth-child(4) { animation-delay: 0.3s; }
.status-line.thinking-status .brain-waves .wave:nth-child(5) { animation-delay: 0.4s; }

.status-line.thinking-status .thinking-text::after {
    content: '';
    animation: eliteThinkingDots 2s ease-in-out infinite;
    font-weight: 500;
    color: var(--accent-primary);
}

/* Attachment button disabled state */
.composer-btn.disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.composer-btn.disabled:hover {
    background-color: var(--bg-input) !important;
    transform: none !important;
}

/* Enhanced attachment preview animations */
.attachment-item {
    animation: slideInFromBottom 0.3s ease;
}

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

/* Professional Welcome Animations - Subtle and Clean */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Clear all button hover effect */
.clear-all-btn:hover i {
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

/* Improved scrollbar for attachment list */
.attachment-list::-webkit-scrollbar {
    width: 6px;
}

.attachment-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 3px;
}

.attachment-list::-webkit-scrollbar-thumb {
    background: var(--border-color-hover);
    border-radius: 3px;
}

.attachment-list::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

/* --- MODALS & TOASTS --- */
.modal-content { background-color: var(--bg-secondary); border-color: var(--border-color); border-radius: 0.75rem; box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border-color); }

/* Toast container positioning */
.toast-container {
    z-index: 1080;
    position: fixed;
    top: 20px;
    right: 20px;
    max-width: 350px;
}

/* Modern toast styling with theme colors */
.toast {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-lg);
    border-radius: 16px;
    margin-bottom: 12px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-width: 320px;
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.hide {
    transform: translateX(100%);
    opacity: 0;
}

/* Toast header styling */
.toast-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 16px 20px 12px;
    border-radius: 16px 16px 0 0;
    color: var(--text-primary);
    position: relative;
    overflow: hidden;
}

.toast-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, var(--accent-color-alpha) 0%, transparent 50%);
    pointer-events: none;
}

/* Toast body styling */
.toast-body {
    padding: 16px 20px 20px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.5;
}

/* Close button styling */
.toast .btn-close {
    position: relative;
    z-index: 2;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.toast .btn-close:hover {
    opacity: 1;
}

/* Memory notification specific styling */
.toast.memory-notification .toast-header {
    background: var(--accent-color);
    color: white;
}

.toast.memory-notification .toast-body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.toast.memory-notification .btn-close {
    filter: invert(1);
}

/* Animation keyframes */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    html, body { height: 100%; }
    body { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    #sidebar { position: fixed; top: 0; left: 0; height: 100%; width: 280px; z-index: 1000; transform: translateX(-100%); box-shadow: 2px 0 10px rgba(0,0,0,0.3); }
    #sidebar.visible { transform: translateX(0); }
    .main-content-wrapper { grid-column: 1; }
    .top-bar .logo { display: flex; }
    #sidebar.visible .sidebar-header .logo span, #sidebar.visible .new-chat-btn span, #sidebar.visible .chat-list-item .chat-title-text, #sidebar.visible .user-info-sidebar .user-name { display: initial; }
    #sidebar.visible .chat-list-item:hover .chat-item-actions { display: flex; } /* Ensure actions show on hover on mobile too */
    #sidebar.visible .new-chat-btn { width: 100%; padding: 0.75rem 1rem; }
    #sidebar.visible .new-chat-btn i { margin-right: 0.5rem; }
    #sidebar.visible .chat-list-item { justify-content: flex-start; padding: 0.75rem 1rem; }
    #sidebar.visible .logout-btn-sidebar { width: auto; }
    #sidebar.visible .sidebar-header button { display: inline-flex; }

    /* Pin the input section to the bottom on mobile and ensure chat content is not hidden */
    .input-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.5rem 0.75rem calc(env(safe-area-inset-bottom, 12px) + 0.9rem);
        background: linear-gradient(to top, rgba(0,0,0,0.36), rgba(0,0,0,0.03));
        z-index: 9999;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 -8px 32px rgba(0,0,0,0.45);
    }
    /* Ensure the main chat area has enough bottom padding so messages are not covered by the input */
    .chat-content { padding-bottom: 220px; }

    /* Bigger touch targets for mobile */
    .input-area { padding: 0.75rem 0.75rem 0.75rem 1rem; border-radius: 1rem; }
    #user-input { font-size: 1.05rem; padding: 0.6rem 0; }
    .input-buttons button { width: 3.25rem; height: 3.25rem; font-size: 1.25rem; }
    #send-button { width: 3.5rem; height: 3.5rem; border-radius: 0.75rem; }

    /* Make attachment preview width comfortable on mobile */
    .attachment-preview { 
        margin: 0.5rem 0 0.375rem 0; 
        border-radius: 0.75rem;
    }
    
    .attachment-header {
        padding: 0.5rem 0.75rem;
    }
    
    .attachment-list {
        gap: 0.375rem;
        padding: 0.75rem;
        max-height: 240px;
    }
    
    .attachment-item {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .attachment-thumb,
    .attachment-icon {
        width: 50px;
        height: 50px;
    }
    
    .remove-attachment-btn { 
        width: 32px; 
        height: 32px; 
        font-size: 1rem; 
        position: relative;
        top: auto;
        right: auto;
        opacity: 1;
        transform: none;
        margin-left: 0.5rem;
        flex-shrink: 0;
    }

    /* Ensure chat container uses smooth scrolling and doesn't get clipped */
    .chat-container { height: calc(100vh - 220px); -webkit-overflow-scrolling: touch; }

    /* Larger top bar buttons for easier taps */
    .top-bar-btn { width: 3.25rem; height: 3.25rem; font-size: 1.15rem; }
    #close-sidebar-btn { width: 3.25rem; height: 3.25rem; }

    /* Improve touch responsiveness */
    button, .top-bar-btn, .input-buttons button, .new-chat-btn { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
}

/* ===============================================
   ADVANCED DASHBOARD SYSTEM - BUSINESS INTELLIGENCE
   =============================================== */

/* Advanced Dashboard Container */
.advanced-dashboard {
    background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e3a8a 100%);
    border-radius: 24px;
    padding: 30px;
    margin: 25px 0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.advanced-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}

.dashboard-navigation {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 30px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.dashboard-nav-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
    padding: 12px 24px;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: 600;
    font-size: 0.9rem;
    backdrop-filter: blur(15px);
    position: relative;
    overflow: hidden;
}

.dashboard-nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transition: left 0.6s ease;
}

.dashboard-nav-item:hover::before {
    left: 100%;
}

.dashboard-nav-item:hover {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.2);
    transform: translateY(-3px);
    color: white;
}

.dashboard-nav-item.active {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: 0 8px 25px rgba(var(--accent-primary-rgb), 0.3);
    transform: translateY(-2px);
}

.dashboard-content {
    position: relative;
    z-index: 2;
    min-height: 400px;
}

.dashboard-view {
    display: none;
    animation: fadeInUp 0.5s ease-out;
}

.dashboard-view.active {
    display: block;
}

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

/* Overview View */
.overview-summary {
    margin-bottom: 30px;
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.summary-card {
    background: var(--bg-secondary);
    border-radius: 18px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
}

.summary-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    background: var(--bg-tertiary);
}

.card-title {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Advanced Metrics View */
.advanced-metrics-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.metrics-section h4 {
    color: var(--text-primary);
    font-size: 1.3rem;
    margin-bottom: 20px;
    text-align: center;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.metric-card.sum { border-left: 4px solid #10b981; }
.metric-card.average { border-left: 4px solid var(--accent-primary); }
.metric-card.median { border-left: 4px solid var(--accent-secondary); }
.metric-card.growth { border-left: 4px solid #f59e0b; }
.metric-card.variance { border-left: 4px solid #ef4444; }
.metric-card.trend { border-left: 4px solid #06b6d4; }

.metric-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Multi-Chart View */
.multi-charts-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.chart-section {
    background: var(--bg-secondary);
    border-radius: 20px;
    padding: 25px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.chart-section h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
    font-weight: 700;
}

.dynamic-chart-container {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 20px 0;
}

.dynamic-chart-container canvas {
    max-width: 100%;
    height: 400px !important;
    border-radius: 8px;
    background: transparent;
}

/* Projections View */
.projections-container {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.projections-container h4 {
    color: var(--text-primary);
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 30px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.projection-card {
    background: var(--bg-secondary);
    border-radius: 18px;
    padding: 25px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    border-left: 5px solid #10b981;
    border: 1px solid var(--border-color);
    border-left-width: 5px;
}

.projection-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    background: var(--bg-tertiary);
}

.projection-card h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.projection-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
}

.projection-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.projection-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 600;
}

.projection-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-primary);
}

.projection-confidence {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.projection-confidence.high {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.projection-confidence.medium {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.projection-confidence.low {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Advanced Insights View */
.advanced-insights-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.insight-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    border: 1px solid var(--border-color);
    border-left-width: 5px;
}

.insight-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    background: var(--bg-tertiary);
}

.insight-card.positive {
    border-left-color: #10b981;
}

.insight-card.warning {
    border-left-color: #f59e0b;
}

.insight-card.info {
    border-left-color: var(--accent-primary);
}

.insight-icon {
    font-size: 2rem;
    line-height: 1;
    margin-top: 4px;
}

.insight-content {
    flex: 1;
}

.insight-content h5 {
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 12px;
    font-weight: 700;
}

.insight-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 15px;
}

.insight-recommendation {
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border-left: 3px solid var(--accent-primary);
    font-style: italic;
}

/* Enhanced Source Citations - ChatGPT Style */
.sources-section {
    margin-top: 24px;
    padding: 16px;
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.sources-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.95rem;
}

.sources-header i {
    color: var(--accent-primary);
}

.sources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.source-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.2s ease;
    min-height: 60px;
}

.source-card:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.source-card .source-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.source-favicon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    object-fit: contain;
}

.source-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.source-title {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.source-domain {
    color: var(--text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Mobile responsive sources */
@media (max-width: 768px) {
    .sources-section {
        padding: 12px;
        margin-top: 20px;
    }
    
    .sources-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .source-card {
        padding: 10px;
        gap: 8px;
        min-height: auto;
    }
    
    .source-card .source-number {
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }
    
    .source-title {
        font-size: 0.8rem;
    }
    
    .source-domain {
        font-size: 0.7rem;
    }
}

/* ============================================
   SOURCES SIDEBAR - ChatGPT "More" Style
   ============================================ */

/* Backdrop overlay */
.sources-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Sidebar panel */
.sources-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    z-index: 1060;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.15);
}

.sources-sidebar.active {
    transform: translateX(0);
}

/* Sidebar header */
.sources-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.sources-sidebar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sources-sidebar-title i {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
    border-radius: 8px;
    color: white;
    font-size: 0.85rem;
}

.close-sources-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.close-sources-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

/* Sidebar content */
.sources-sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Empty state */
.sources-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-tertiary);
    text-align: center;
}

.sources-empty-state i {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.sources-empty-state p {
    font-size: 0.9rem;
    margin: 0;
}

/* Source items in sidebar */
.source-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
    position: relative;
}

.source-sidebar-item:hover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.04);
    transform: translateX(-2px);
    box-shadow: 4px 4px 16px rgba(0, 0, 0, 0.08);
}

.source-sidebar-item .source-number {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
    color: white;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}

.source-sidebar-item .source-favicon {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    flex-shrink: 0;
    object-fit: contain;
    background: var(--bg-tertiary);
    padding: 2px;
}

.source-sidebar-item .source-info {
    flex: 1;
    min-width: 0;
}

.source-sidebar-item .source-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.source-sidebar-item .source-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.source-sidebar-item .source-domain {
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}

.source-sidebar-item .source-type {
    font-size: 0.65rem;
    padding: 3px 8px;
    background: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.source-sidebar-item .source-quality {
    font-size: 0.65rem;
    padding: 3px 8px;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border-radius: 4px;
    font-weight: 600;
}

.source-sidebar-item .source-snippet {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.source-sidebar-item .source-external {
    position: absolute;
    top: 14px;
    right: 14px;
    color: var(--text-tertiary);
    font-size: 0.7rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.source-sidebar-item:hover .source-external {
    opacity: 1;
    color: var(--accent-primary);
}

/* Inline sources trigger button (in message) */
.sources-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-top: 16px;
    background: linear-gradient(135deg, 
        rgba(var(--accent-primary-rgb), 0.08) 0%, 
        rgba(var(--accent-primary-rgb), 0.04) 100%);
    border: 1px solid rgba(var(--accent-primary-rgb), 0.2);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sources-trigger-btn:hover {
    background: rgba(var(--accent-primary-rgb), 0.12);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--accent-primary-rgb), 0.15);
}

.sources-trigger-btn i {
    color: var(--accent-primary);
}

.sources-trigger-btn .sources-count-badge {
    background: var(--accent-primary);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Theme-specific sidebar adjustments */
[data-theme="dark"] .sources-sidebar {
    background: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .sources-sidebar-header {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .source-sidebar-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .sources-sidebar {
    background: #ffffff;
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .source-sidebar-item {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="lemonade"] .sources-sidebar-title i,
[data-theme="lemonade"] .source-sidebar-item .source-number {
    background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%);
}

[data-theme="lemonade"] .source-sidebar-item .source-type {
    background: rgba(245, 124, 0, 0.12);
    color: #E65100;
}

[data-theme="icecream"] .sources-sidebar {
    background: #1E1E2E;
    border-color: rgba(150, 130, 180, 0.2);
}

[data-theme="icecream"] .sources-sidebar-title i,
[data-theme="icecream"] .source-sidebar-item .source-number {
    background: linear-gradient(135deg, #CBA6F7 0%, #89B4FA 100%);
}

[data-theme="icecream"] .source-sidebar-item .source-type {
    background: rgba(203, 166, 247, 0.15);
    color: #CBA6F7;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .sources-sidebar {
        width: 100%;
        max-width: 100%;
    }
}

/* Modern Reasoning Section */

.source-pill .pill-number {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary, var(--accent-primary)) 100%);
    color: white;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--accent-primary-rgb), 0.3);
}

.source-pill .pill-favicon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    flex-shrink: 0;
    object-fit: contain;
    background: var(--bg-secondary);
}

.source-pill .pill-info {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.source-pill .pill-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.source-pill .pill-domain {
    font-size: 0.7rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
}

.source-pill .pill-type {
    font-size: 0.65rem;
    padding: 2px 6px;
    background: rgba(var(--accent-primary-rgb), 0.1);
    color: var(--accent-primary);
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.source-pill .pill-external {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--text-tertiary);
    font-size: 0.65rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.source-pill:hover .pill-external {
    opacity: 1;
    color: var(--accent-primary);
}

/* Expanded grid view for many sources */
.sources-grid-expanded {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding-top: 8px;
}

.source-card-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.source-card-mini:hover {
    border-color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.04);
}

.source-card-mini .mini-number {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary);
    color: white;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.source-card-mini .mini-info {
    flex: 1;
    min-width: 0;
}

.source-card-mini .mini-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.source-card-mini .mini-domain {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

/* Theme-specific adjustments */
[data-theme="dark"] .sources-panel {
    background: linear-gradient(135deg, 
        rgba(59, 130, 246, 0.06) 0%, 
        rgba(59, 130, 246, 0.02) 100%);
}

[data-theme="dark"] .source-pill,
[data-theme="dark"] .source-card-mini {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="light"] .sources-panel {
    background: linear-gradient(135deg, 
        rgba(37, 99, 235, 0.05) 0%, 
        rgba(37, 99, 235, 0.02) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .source-pill,
[data-theme="light"] .source-card-mini {
    background: white;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="lemonade"] .sources-panel {
    background: linear-gradient(135deg, 
        rgba(245, 124, 0, 0.06) 0%, 
        rgba(245, 124, 0, 0.02) 100%);
}

[data-theme="lemonade"] .sources-panel-summary .sources-icon {
    background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%);
}

[data-theme="lemonade"] .source-pill .pill-number,
[data-theme="lemonade"] .source-card-mini .mini-number {
    background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%);
}

[data-theme="lemonade"] .source-pill .pill-type {
    background: rgba(245, 124, 0, 0.12);
    color: #E65100;
}

[data-theme="icecream"] .sources-panel {
    background: linear-gradient(135deg, 
        rgba(203, 166, 247, 0.08) 0%, 
        rgba(137, 180, 250, 0.04) 100%);
}

[data-theme="icecream"] .sources-panel-summary .sources-icon {
    background: linear-gradient(135deg, #CBA6F7 0%, #89B4FA 100%);
}

[data-theme="icecream"] .source-pill .pill-number,
[data-theme="icecream"] .source-card-mini .mini-number {
    background: linear-gradient(135deg, #CBA6F7 0%, #89B4FA 100%);
}

[data-theme="icecream"] .source-pill .pill-type {
    background: rgba(203, 166, 247, 0.15);
    color: #CBA6F7;
}

[data-theme="icecream"] .sources-chevron {
    background: rgba(203, 166, 247, 0.15);
    color: #CBA6F7;
}

[data-theme="icecream"] .sources-panel[open] .sources-chevron {
    background: linear-gradient(135deg, #CBA6F7 0%, #89B4FA 100%);
}

/* Mobile responsive sources panel */
@media (max-width: 768px) {
    .sources-panel-summary {
        padding: 12px 14px;
    }
    
    .sources-panel-summary .sources-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .sources-panel-content {
        padding: 4px 12px 12px;
    }
    
    .source-pill {
        min-width: 180px;
        max-width: 240px;
        padding: 8px 12px;
    }
    
    .sources-grid-expanded {
        grid-template-columns: 1fr;
    }
}

/* Modern Reasoning Section */
.thinking-details {
    margin-top: 20px;
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    overflow: hidden;
}

.thinking-details summary {
    padding: 0;
    cursor: pointer;
    list-style: none;
    user-select: none;
    outline: none;
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-radius: var(--radius-md);
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

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

.thinking-details summary::before {
    content: 'Reasoning';
    font-weight: 600;
    transition: color 0.2s ease;
}

.thinking-details summary::after {
    content: ' • Show reasoning';
    font-weight: 400;
    transition: color 0.2s ease;
}

.thinking-details[open] summary::after {
    content: ' • Hide reasoning';
}

.thinking-details summary:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.thinking-details[open] summary {
    margin-bottom: 12px;
    color: var(--accent-primary);
    background: rgba(37, 99, 235, 0.1);
    border-color: var(--accent-primary);
}

.thinking-content {
    padding: 16px 20px;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.9rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-top: 8px;
    animation: slideDown 0.3s ease-out;
}

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

/* Professional AI Message Styling */
.ai-message {
    position: relative;
}

.ai-message .message-content {
    font-size: 0.95rem;
    line-height: 1.6;
}

.ai-message .answer-content {
    margin-bottom: 8px;
}

.ai-message .answer-content h1,
.ai-message .answer-content h2,
.ai-message .answer-content h3 {
    margin-top: 24px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.ai-message .answer-content h1 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 8px;
}

.ai-message .answer-content h2 {
    font-size: 1.25rem;
}

.ai-message .answer-content h3 {
    font-size: 1.1rem;
}

.ai-message .answer-content p {
    margin-bottom: 16px;
    color: var(--text-primary);
}

.ai-message .answer-content ul,
.ai-message .answer-content ol {
    margin: 16px 0;
    padding-left: 24px;
}

.ai-message .answer-content li {
    margin-bottom: 8px;
    line-height: 1.5;
}

.ai-message .answer-content blockquote {
    margin: 16px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--accent-primary);
    background: var(--bg-secondary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--text-secondary);
}

.ai-message .answer-content code {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9em;
}

.ai-message .answer-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}

.ai-message .answer-content pre code {
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Professional Chart Container */
.viz-wrapper {
    margin: 16px 0;
}

.chart-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin: 16px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.chart-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    text-align: center;
}

/* Enhanced Status Indicators */
.status-line.visible {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    margin: 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Dropdown Menu Styles */
.dropdown-container {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    position: relative;
}

/* OpenAI-style Dropdown Menu (Revamped - Theme Colors) */
.plus-dropdown {
    position: absolute;
    bottom: calc(100% + 12px); /* Float above the button */
    left: 0;
    background: var(--bg-secondary); /* Theme background */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-xl);
    min-width: 260px;
    width: max-content;
    z-index: 1000;
    overflow: hidden;
    transform-origin: bottom left;
    animation: dropdownPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownPop {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.dropdown-content {
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dropdown-item {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
    text-decoration: none;
    min-height: auto; /* Reset min-height */
}

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

/* Icons - Simple, no background */
.dropdown-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    color: var(--text-secondary);
    background: transparent; /* Removed background */
    border-radius: 0;
}

.dropdown-item:hover .dropdown-item-icon {
    background: transparent;
    color: var(--text-primary);
}

.dropdown-item-icon i, 
.dropdown-item-icon svg {
    font-size: 1.1rem;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-item-text {
    flex-grow: 1;
}

/* Shortcut Hint (Ctrl + U) */
.shortcut-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-left: 12px;
    font-family: var(--font-mono);
}

/* Separator */
.dropdown-separator {
    height: 1px;
    background: var(--border-color);
    margin: 4px 6px;
}

/* Toggle Switch in Dropdown */
.dropdown-item-toggle {
    margin-left: 12px;
}

.toggle-switch {
    width: 36px;
    height: 20px;
    background: var(--bg-tertiary);
    border-radius: 20px;
    position: relative;
    transition: background 0.2s;
}

.dropdown-item[data-enabled="true"] .toggle-switch {
    background: var(--accent-primary);
}

.toggle-slider {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.dropdown-item[data-enabled="true"] .toggle-slider {
    transform: translateX(16px);
}

/* Ensure attachment button is properly sized */
#attach-file-btn {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 56px;
    margin: 0;
    position: relative;
}

#attach-file-btn .dropdown-item-icon {
    display: flex !important;
}

#attach-file-btn .fas.fa-paperclip {
    display: inline-block !important;
    visibility: visible !important;
    color: var(--text-primary) !important;
    font-size: 16px;
}

#attach-file-btn .dropdown-item-text {
    display: block !important;
    color: var(--text-primary) !important;
    font-weight: 500;
}

.dropdown-item:hover .dropdown-item-icon svg,
.dropdown-item:hover .dropdown-item-icon i {
    opacity: 1;
}

.dropdown-item-text {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.dropdown-item-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    pointer-events: auto;
    z-index: 10;
}

/* Toggle Switch for Web Search */
.toggle-switch {
    position: relative;
    width: 40px;
    height: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
    z-index: 10;
}

.toggle-switch.active {
    background: var(--accent-primary, #10b981);
    border-color: var(--accent-primary, #10b981);
}

.toggle-switch:hover {
    opacity: 0.8;
}

.toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active .toggle-slider {
    transform: translateX(20px);
}

/* Plus button specific styling */
#main-plus-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

#main-plus-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-color-hover);
    color: var(--text-primary);
}

#main-plus-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Responsive dropdown sizing */
@media (max-width: 768px) {
    .plus-dropdown {
        position: fixed !important;
        bottom: 70px !important;
        left: 20px !important;
        right: 20px !important;
        min-width: auto !important;
        width: calc(100vw - 40px) !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
    
    .dropdown-item {
        padding: 20px 24px !important;
        min-height: 64px !important;
    }
    
    .dropdown-item-text {
        font-size: 16px !important;
    }
    
    .dropdown-content {
        min-height: 160px !important;
    }
}

@media (max-width: 480px) {
    .plus-dropdown {
        position: fixed !important;
        bottom: 60px !important;
        left: 10px !important;
        right: 10px !important;
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        min-width: auto !important;
    }
    
    .dropdown-item {
        padding: 22px 20px !important;
        min-height: 68px !important;
    }
    
    .dropdown-item-icon {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Active state for dropdown trigger */
.dropdown-trigger.active {
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}


/* ===============================
   CANVAS PANEL (GEMINI-STYLE ARTIFACTS)
   =============================== */
.canvas-panel {
    position: fixed;
    right: -50%;
    top: 0;
    width: 50%;
    height: 100vh;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.2, 0, 0, 1);
    z-index: 900;
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
}

.canvas-panel.active {
    right: 0;
}

.canvas-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    height: 60px;
}

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

.canvas-panel-title i {
    color: var(--accent-primary);
    font-size: 16px;
}

.canvas-panel-actions {
    display: flex;
    gap: 8px;
}

.canvas-action-btn {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.canvas-action-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

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

.canvas-panel-content {
    flex: 1;
    overflow: hidden; /* Changed from auto to hidden to manage scroll in children */
    padding: 0; /* Remove padding from container, move to children */
    display: flex;
    flex-direction: column;
}

.canvas-view-mode {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.canvas-edit-mode {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.canvas-editor-textarea {
    flex: 1;
    width: 100%;
    height: 100%;
    resize: none;
    border: none;
    padding: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.6;
    outline: none;
}

.canvas-panel-content pre {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin: 0;
}

.canvas-panel-content pre code {
    font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Canvas trigger button in messages */
.canvas-trigger-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--accent-primary);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.canvas-trigger-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.canvas-trigger-btn i {
    font-size: 12px;
}

/* Floating Canvas Button */
.canvas-floating-btn {
    position: absolute;
    display: none; /* Hidden by default */
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    z-index: 1000;
    animation: fadeIn 0.2s ease;
}

.canvas-floating-btn:hover {
    background: var(--bg-tertiary);
    transform: translateY(-2px);
}

.canvas-floating-btn i {
    color: var(--accent-primary);
}

/* Adjust main content when canvas is open */
.chat-container.canvas-open main {
    margin-right: 45%;
}

/* ===============================
   MODE INDICATORS
   =============================== */
.mode-indicators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 8px;
    animation: fadeIn 0.2s ease;
}

.mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    animation: badgePop 0.3s ease;
}

@keyframes badgePop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.mode-badge i {
    font-size: 11px;
}

/* Canvas Mode Badge */
.mode-canvas {
    background: rgba(130, 170, 255, 0.15);
    color: #82AAFF;
    border: 1px solid rgba(130, 170, 255, 0.3);
}

/* Web Search Mode Badge */
.mode-search {
    background: rgba(100, 200, 150, 0.15);
    color: #69F0AE;
    border: 1px solid rgba(100, 200, 150, 0.3);
}

/* Learning Mode Badge */
.mode-learning {
    background: rgba(255, 200, 100, 0.15);
    color: #FFCB6B;
    border: 1px solid rgba(255, 200, 100, 0.3);
}

/* Light Theme Mode Badges */
[data-theme="light"] .mode-canvas {
    background: rgba(97, 130, 184, 0.12);
    color: #5C6BC0;
    border-color: rgba(97, 130, 184, 0.25);
}

[data-theme="light"] .mode-search {
    background: rgba(76, 175, 80, 0.12);
    color: #388E3C;
    border-color: rgba(76, 175, 80, 0.25);
}

[data-theme="light"] .mode-learning {
    background: rgba(255, 152, 0, 0.12);
    color: #E65100;
    border-color: rgba(255, 152, 0, 0.25);
}

/* Lemonade Theme Mode Badges */
[data-theme="lemonade"] .mode-canvas {
    background: rgba(21, 101, 192, 0.12);
    color: #1565C0;
    border-color: rgba(21, 101, 192, 0.25);
}

[data-theme="lemonade"] .mode-search {
    background: rgba(104, 159, 56, 0.12);
    color: #689F38;
    border-color: rgba(104, 159, 56, 0.25);
}

[data-theme="lemonade"] .mode-learning {
    background: rgba(230, 81, 0, 0.12);
    color: #E65100;
    border-color: rgba(230, 81, 0, 0.25);
}

/* Icecream Theme Mode Badges */
[data-theme="icecream"] .mode-canvas {
    background: rgba(137, 180, 250, 0.15);
    color: #89B4FA;
    border-color: rgba(137, 180, 250, 0.3);
}

[data-theme="icecream"] .mode-search {
    background: rgba(166, 227, 161, 0.15);
    color: #A6E3A1;
    border-color: rgba(166, 227, 161, 0.3);
}

[data-theme="icecream"] .mode-learning {
    background: rgba(249, 226, 175, 0.15);
    color: #F9E2AF;
    border-color: rgba(249, 226, 175, 0.3);
}

/* Mobile responsiveness */
@media (max-width: 1024px) {
    .canvas-panel {
        width: 100%;
        right: -100%;
    }
    
    .canvas-panel.active {
        right: 0;
    }
    
    .chat-container.canvas-open main {
        margin-right: 0;
    }
}

/* ===============================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   =============================================== */

/* ===== TABLET BREAKPOINT (1024px) ===== */
@media (max-width: 1024px) {
    /* Layout adjustments */
    body {
        grid-template-columns: 260px 1fr;
    }
    
    #sidebar {
        width: 260px;
    }
    
    /* Chat content narrower */
    .chat-content {
        max-width: 100%;
        padding: 1.5rem;
    }
    
    /* Welcome section */
    .welcome-section {
        padding: 1.5rem;
        min-height: calc(100vh - 250px);
    }
    
    .welcome-section h1 {
        font-size: 2rem;
    }
    
    /* Input area */
    .input-frame-wrapper {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    /* Message bubbles */
    .message {
        max-width: 95%;
    }
    
    /* Modal sizing */
    .modal-dialog {
        max-width: 90%;
        margin: 1rem auto;
    }
}

/* ===== MOBILE LANDSCAPE & SMALL TABLETS (768px) ===== */
@media (max-width: 768px) {
    /* Body becomes single column */
    body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }
    
    /* Sidebar as overlay */
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 300px;
        max-width: 85vw;
        height: 100%;
        z-index: 1050;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    }
    
    #sidebar.visible {
        transform: translateX(0);
    }
    
    /* Sidebar backdrop */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .sidebar-backdrop.visible,
    body.sidebar-overlay-open .sidebar-backdrop {
        display: block;
        opacity: 1;
    }
    
    /* Main content takes full width */
    .main-content-wrapper {
        grid-column: 1;
        width: 100%;
    }
    
    /* Top bar adjustments */
    .top-bar {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
    }
    
    .top-bar .logo {
        display: flex;
    }
    
    .top-bar-btn {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1rem;
    }
    
    #sidebar-toggle-btn {
        display: flex;
    }
    
    /* Chat content */
    .chat-content {
        max-width: 100%;
        padding: 1rem;
        padding-bottom: 180px;
    }
    
    /* Welcome section responsive */
    .welcome-section {
        padding: 1rem;
        min-height: auto;
    }
    
    .welcome-section h1 {
        font-size: 1.75rem;
        line-height: 1.3;
    }
    
    .welcome-section p {
        font-size: 0.95rem;
    }
    
    .welcome-header {
        margin-bottom: 1.5rem;
    }
    
    /* Suggestion cards responsive */
    .suggestion-cards {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .suggestion-card {
        padding: 1rem;
    }
    
    /* Message styling */
    .message {
        padding: 0.875rem;
        gap: 0.75rem;
        max-width: 100%;
    }
    
    .message-avatar {
        width: 2rem;
        height: 2rem;
        font-size: 0.9rem;
    }
    
    .message-content {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .message-actions {
        top: -8px;
        right: 0;
        gap: 0.125rem;
        padding: 2px;
    }
    
    .message-actions button {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
    }
    
    .message-actions .view-sources-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
    }
    
    /* Input section - fixed bottom */
    .input-section {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.5rem 0.75rem calc(env(safe-area-inset-bottom, 12px) + 0.75rem);
        background: linear-gradient(to top, var(--bg-primary) 70%, transparent);
        z-index: 999;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .input-frame-wrapper {
        max-width: 100%;
        padding: 0;
    }
    
    .input-area {
        padding: 0.625rem 0.625rem 0.625rem 0.875rem;
        border-radius: 1rem;
        gap: 0.5rem;
    }
    
    #user-input {
        font-size: 1rem;
        padding: 0.5rem 0;
        min-height: 24px;
    }
    
    .input-buttons {
        gap: 0.25rem;
    }
    
    .input-buttons button {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.1rem;
    }
    
    #send-button {
        width: 3rem;
        height: 3rem;
        border-radius: 0.75rem;
    }
    
    /* Attachment preview */
    .attachment-preview {
        margin: 0.375rem 0;
        border-radius: 0.75rem;
    }
    
    .attachment-list {
        gap: 0.375rem;
        padding: 0.625rem;
        max-height: 200px;
    }
    
    .attachment-item {
        padding: 0.5rem;
    }
    
    .attachment-thumb,
    .attachment-icon {
        width: 48px;
        height: 48px;
    }
    
    .remove-attachment-btn {
        width: 28px;
        height: 28px;
        opacity: 1;
    }
    
    /* Mode toggles menu */
    .input-area-menu {
        padding: 0.375rem 0.5rem;
        gap: 0.375rem;
    }
    
    .mode-toggle-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
        gap: 0.25rem;
    }
    
    .mode-indicators {
        gap: 0.25rem;
    }
    
    .mode-badge {
        padding: 0.125rem 0.375rem;
        font-size: 0.65rem;
    }
    
    /* Thinking/Reasoning section */
    .thinking-details summary {
        padding: 0.625rem 0.875rem;
        font-size: 0.85rem;
    }
    
    .thinking-content {
        padding: 0.875rem;
        font-size: 0.9rem;
    }
    
    /* Code blocks */
    pre:not(.CodeMirror-line):not(.CodeMirror pre) {
        margin: 0.75rem 0;
        border-radius: 0.625rem;
    }
    
    pre code {
        font-size: 12px;
        padding: 0.75rem;
    }
    
    .code-toolbar {
        height: 38px;
        padding: 0 0.5rem;
    }
    
    .code-btn {
        padding: 4px 6px;
        font-size: 10px;
    }
    
    /* Modals */
    .modal-dialog {
        max-width: 95%;
        margin: 0.5rem auto;
    }
    
    .modal-content {
        border-radius: 1rem;
    }
    
    .modal-header {
        padding: 0.875rem 1rem;
    }
    
    .modal-body {
        padding: 1rem;
    }
    
    .modal-footer {
        padding: 0.875rem 1rem;
    }
    
    /* Sources sidebar */
    .sources-sidebar {
        width: 100%;
        max-width: 100%;
    }
    
    .sources-sidebar-header {
        padding: 0.875rem 1rem;
    }
    
    .source-sidebar-item {
        padding: 0.875rem;
        gap: 0.625rem;
    }
    
    .source-number {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .source-favicon {
        width: 20px;
        height: 20px;
    }
    
    .source-title {
        font-size: 0.85rem;
    }
    
    /* Canvas inline */
    .inline-canvas-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.625rem;
        padding: 0.75rem;
    }
    
    .inline-canvas-actions {
        width: 100%;
        justify-content: flex-end;
    }
    
    .inline-canvas-btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .inline-canvas-content {
        padding: 0.75rem;
        max-height: 350px;
    }
    
    /* Dashboard */
    .dynamic-dashboard {
        padding: 1rem;
        border-radius: 0.875rem;
        margin: 0.75rem 0;
    }
    
    .dashboard-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .dashboard-nav {
        width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
    }
    
    .nav-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
        white-space: nowrap;
    }
    
    /* Memory modal */
    #memoryModal .modal-dialog {
        max-width: 95%;
    }
    
    .memory-item {
        padding: 0.875rem;
    }
    
    /* Settings */
    .settings-section {
        padding: 1rem;
    }
    
    .theme-options {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .theme-option {
        padding: 0.75rem;
    }
}

/* ===== SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {
    /* Sidebar narrower on very small screens */
    #sidebar {
        width: 280px;
        max-width: 90vw;
    }
    
    /* Even tighter spacing */
    .top-bar {
        padding: 0.375rem 0.5rem;
    }
    
    .top-bar-btn {
        width: 2.5rem;
        height: 2.5rem;
    }
    
    /* Chat content */
    .chat-content {
        padding: 0.75rem;
        padding-bottom: 160px;
    }
    
    /* Welcome section */
    .welcome-section h1 {
        font-size: 1.5rem;
    }
    
    .welcome-section p {
        font-size: 0.875rem;
    }
    
    /* Messages */
    .message {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .message-avatar {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8rem;
    }
    
    .message-content {
        font-size: 0.9rem;
    }
    
    /* Input area */
    .input-area {
        padding: 0.5rem 0.5rem 0.5rem 0.75rem;
        border-radius: 0.875rem;
    }
    
    #user-input {
        font-size: 0.95rem;
    }
    
    .input-buttons button {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    #send-button {
        width: 2.75rem;
        height: 2.75rem;
    }
    
    /* Mode toggles */
    .input-area-menu {
        padding: 0.25rem 0.375rem;
        flex-wrap: wrap;
    }
    
    .mode-toggle-btn {
        padding: 0.25rem 0.375rem;
        font-size: 0.7rem;
    }
    
    .mode-toggle-btn span {
        display: none;
    }
    
    /* Hide labels on very small screens */
    .mode-badge span {
        max-width: 60px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* Sources button compact */
    .message-actions .view-sources-btn span {
        display: none;
    }
    
    .message-actions .view-sources-btn {
        width: 1.5rem;
        padding: 0.2rem;
    }
    
    /* Code blocks */
    pre code {
        font-size: 11px;
        padding: 0.5rem;
    }
    
    .code-gutter {
        width: 32px;
    }
    
    /* Thinking section */
    .thinking-details summary {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .thinking-content {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    /* Modals */
    .modal-header h5 {
        font-size: 1rem;
    }
    
    .modal-body {
        padding: 0.75rem;
    }
    
    /* Dashboard */
    .dashboard-title {
        font-size: 1rem;
    }
    
    .metric-card {
        padding: 0.75rem;
    }
    
    .metric-value {
        font-size: 1.25rem;
    }
    
    /* Theme options */
    .theme-options {
        grid-template-columns: 1fr;
    }
}

/* ===== EXTRA SMALL (360px and below) ===== */
@media (max-width: 360px) {
    .welcome-section h1 {
        font-size: 1.25rem;
    }
    
    .chat-content {
        padding: 0.5rem;
        padding-bottom: 150px;
    }
    
    .message {
        padding: 0.625rem;
    }
    
    .message-avatar {
        width: 1.5rem;
        height: 1.5rem;
        font-size: 0.7rem;
    }
    
    .input-buttons button {
        width: 2.25rem;
        height: 2.25rem;
    }
    
    #send-button {
        width: 2.5rem;
        height: 2.5rem;
    }
}

/* ===== LANDSCAPE ORIENTATION ADJUSTMENTS ===== */
@media (max-height: 500px) and (orientation: landscape) {
    .input-section {
        padding: 0.375rem 0.5rem;
    }
    
    .input-area {
        padding: 0.375rem 0.5rem 0.375rem 0.625rem;
    }
    
    #user-input {
        min-height: 20px;
        max-height: 60px;
    }
    
    .chat-content {
        padding-bottom: 100px;
    }
    
    .welcome-section {
        min-height: auto;
        padding: 0.5rem;
    }
    
    .welcome-section h1 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .suggestion-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    button,
    .top-bar-btn,
    .input-buttons button,
    .new-chat-btn,
    .chat-list-item,
    .mode-toggle-btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Remove hover effects on touch */
    .top-bar-btn:hover,
    .input-buttons button:hover {
        transform: none;
    }
    
    /* Always show message actions on touch devices */
    .message-actions {
        opacity: 1;
        visibility: visible;
    }
    
    /* Tap highlight color */
    * {
        -webkit-tap-highlight-color: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.1);
    }
    
    /* Better scrolling */
    .chat-container,
    .chat-list,
    .modal-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
    
    /* Disable text selection on buttons */
    button,
    .btn {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* ===== HIGH DPI / RETINA DISPLAY ===== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper borders */
    .message,
    .input-area,
    .modal-content,
    pre {
        border-width: 0.5px;
    }
}

/* ===== REDUCED MOTION PREFERENCE ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    #sidebar {
        transition: none;
    }
    
    .sources-sidebar {
        transition: none;
    }
}

/* ===== DARK MODE SYSTEM PREFERENCE ===== */
@media (prefers-color-scheme: dark) {
    /* Already handled by theme system */
}

/* ===== PRINT STYLES ===== */
@media print {
    #sidebar,
    .top-bar,
    .input-section,
    .message-actions,
    .sources-sidebar,
    .sidebar-backdrop {
        display: none !important;
    }
    
    .main-content-wrapper {
        grid-column: 1;
    }
    
    .chat-content {
        padding: 0;
        max-width: 100%;
    }
    
    .message {
        page-break-inside: avoid;
        border: 1px solid #ddd;
        margin-bottom: 1rem;
    }
    
    pre {
        white-space: pre-wrap;
        word-wrap: break-word;
    }
}

/* ===== SAFE AREA INSETS (Notch devices) ===== */
@supports (padding: max(0px)) {
    .input-section {
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }
    
    #sidebar {
        padding-left: max(1rem, env(safe-area-inset-left));
    }
    
    .top-bar {
        padding-top: max(0.5rem, env(safe-area-inset-top));
    }
}