:root {
    /* --- Helper for Glass Effects --- */
    --theme-primary-rgb: 201, 168, 76; /* Sary-OS Gold RGB */

    /* --- Panel accent: single accent used by every studio-style panel
       (Command Center, Suite Panel, independent tools, Model Selector) in dark mode.
       Defaults to blue; kept live-synced to the "Select Accent Color" picker
       in Profile Settings via --bubble-accent-color (see app.html). --- */
    --panel-accent: #4a90e2;
    --panel-accent-rgb: 74, 144, 226;

    /* --- DEFAULT THEME IS NOW MIDNIGHT (Dark) --- */
    --theme-primary-default: #C9A84C; /* Sary-OS Gold */
    --theme-hover-default: #E8C97A;   /* Sary-OS Gold Light */

    /* Replaced #000000 with Midnight Blue-Black #121218 */
    --background-color-default: #121218;
    --wallpaper-fallback-bg: var(--background-color);
    /* Wallpapers and themes are composited instead of competing. Theme
       presets update --background-color, which supplies a subtle colour wash
       while the selected wallpaper remains visible underneath. */
    --theme-wallpaper-overlay: linear-gradient(
        color-mix(in srgb, var(--background-color) 24%, transparent),
        color-mix(in srgb, var(--background-color) 24%, transparent)
    );
    --wallpaper-colour-filter: none;

    /* Replaced #1f1f1f with Midnight Sidebar #1A1A22 */
    --sidebar-bg-default: #1A1A22;
    --header-bg-default: #1A1A22;
    --input-area-bg-default: #1A1A22;
    --settings-modal-bg-default: #1A1A22;

    /* Message Bubbles */
    --ai-message-bg-default: #2C2C3A;
    --text-color-default: #EAEAEA;
    --input-bg-default: #2C2C3A;
    --border-color-default: #444;

    /* Glass/Transparents */
    --background-color-transparent: rgba(26, 26, 34, 0.8);
    --border-color-transparent: rgba(255, 255, 255, 0.1);
    
    /* Highlights */
    --highlight-bg: #00BFFF;
    --highlight-text: #000;

    /* Fonts */
    --font-main-default: 'Inter', system-ui, -apple-system, sans-serif;

    /* --- Default Theme (Dark) --- */
    --theme-primary-default: #C9A84C; /* Sary-OS Gold */
    --theme-hover-default: #E8C97A;   /* Sary-OS Gold Light */
    /* --- App Header Font --- */
    --font-main-default: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --background-color-default: #1e2128;
    --sidebar-bg-default: #252830;
    --header-bg-default: #252830;
    --input-area-bg-default: #252830;
    --ai-message-bg-default: #2d323c;
    --settings-modal-bg-default: #252830;
    --text-color-default: #f0f0f0;
    --input-bg-default: #2d323c;
    --border-color-default: #3d4352;
    --background-color-transparent: rgba(37, 40, 48, 0.1);
    --border-color-transparent: rgba(255, 255, 255, 0.12);
    --highlight-bg: yellow;
    --highlight-text: black;
    /* --- Mid night Theme (Dark) --- */
    --theme-primary-midnight: #C9A84C;
    --theme-hover-midnight: #E8C97A;
    --font-main-midnight: 'Inter', sans-serif;
    --background-color-midnight: #121218;
    --sidebar-bg-midnight: #1A1A22;
    --header-bg-midnight: #1A1A22;
    --input-area-bg-midnight: #1A1A22;
    --ai-message-bg-midnight: #2C2C3A;
    --settings-modal-bg-midnight: #1A1A22;
    --text-color-midnight: #EAEAEA;
    --input-bg-midnight: #2C2C3A;
    --border-color-midnight: #444;
    /* --- Synthwave Theme (Dark) --- */
    --theme-primary-synthwave: #FF00FF;
    --theme-hover-synthwave: #C700C7;
    --font-main-synthwave: 'Fira Code', monospace;
    --background-color-synthwave: #201335;
    --sidebar-bg-synthwave: #2A1A45;
    --header-bg-synthwave: #2A1A45;
    --input-area-bg-synthwave: #2A1A45;
    --ai-message-bg-synthwave: #4A3A65;
    --settings-modal-bg-synthwave: #2A1A45;
    --text-color-synthwave: #E0B0FF;
    --input-bg-synthwave: #4A3A65;
    --border-color-synthwave: #6A4A85;
    /* --- Stealth Black Theme (Dark) --- */
    --theme-primary-stealth: #444;
    --theme-hover-stealth: #555;
    --font-main-stealth: var(--font-main-default);
    --background-color-stealth: #000000;
    --sidebar-bg-stealth: #000000;
    --header-bg-stealth: #000000;
    --input-area-bg-stealth: #000000;
    --ai-message-bg-stealth: #111;
    --settings-modal-bg-stealth: #050505;
    --text-color-stealth: #999;
    --input-bg-stealth: #111;
    --border-color-stealth: #222;
    /* --- Carbon Fibre Theme (Dark) --- */
    --theme-primary-carbon-fibre: #c0c0c0;
    --theme-hover-carbon-fibre: #a0a0a0;
    --font-main-carbon-fibre: var(--font-main-default);
    --background-color-carbon-fibre: #222;
    --sidebar-bg-carbon-fibre: #1a1a1a;
    --header-bg-carbon-fibre: #1a1a1a;
    --input-area-bg-carbon-fibre: #1a1a1a;
    --ai-message-bg-carbon-fibre: #2c2c2c;
    --settings-modal-bg-carbon-fibre: #1a1a1a;
    --text-color-carbon-fibre: #e0e0e0;
    --input-bg-carbon-fibre: #2c2c2c;
    --border-color-carbon-fibre: #444;
    /* --- Frosted Glass Theme (Light) --- */
    --theme-primary-frosted-glass: #007aff;
    --theme-hover-frosted-glass: #0056b3;
    --font-main-frosted-glass: var(--font-main-default);
    --background-color-frosted-glass: #eaf2f8;
    --sidebar-bg-frosted-glass: rgba(255, 255, 255, 0.7);
    --header-bg-frosted-glass: rgba(255, 255, 255, 0.7);
    --input-area-bg-frosted-glass: rgba(255, 255, 255, 0.7);
    --ai-message-bg-frosted-glass: rgba(255, 255, 255, 0.9);
    --settings-modal-bg-frosted-glass: rgba(255, 255, 255, 0.8);
    --text-color-frosted-glass: #111;
    --input-bg-frosted-glass: #e9e9e9;
    --border-color-frosted-glass: #c1c1c1;
    /* --- Paper Theme (Light) --- */
    --theme-primary-paper: #2c5282;
    --theme-hover-paper: #1a365d;
    --font-main-paper: 'Merriweather', serif;
    --background-color-paper: #FFFFFF;
    --sidebar-bg-paper: #FFFFFF;
    --header-bg-paper: #FFFFFF;
    --input-area-bg-paper: #FFFFFF;
    --ai-message-bg-paper: #FFFFFF;
    --settings-modal-bg-paper: #FFFFFF;
    --text-color-paper: #121212;
    --input-bg-paper: #e9e9e9;
    --border-color-paper: #d1d1d1;
    --highlight-bg-paper: #ffd700;
    --highlight-text-paper: black;
    /* --- Light Mode Overrides --- */
    --theme-primary-light: var(--theme-primary-default);
    --theme-hover-light: var(--theme-hover-default);
    --font-main-light: var(--font-main-default);
    --background-color-light: #FFFFFF;
    --sidebar-bg-light: #FFFFFF;
    --header-bg-light: #FFFFFF;
    --input-area-bg-light: #FFFFFF;
    --ai-message-bg-light: #FFFFFF;
    --settings-modal-bg-light: #FFFFFF;
    --text-color-light: #121212;
    --input-bg-light: #e9e9e9;
    --border-color-light: #d1d1d1;
    --highlight-bg-light: #ffd700;
    --highlight-text-light: black;
    /* --- Nord Theme (Dark) --- */
    --theme-primary-nord: #88C0D0;
    --theme-hover-nord: #81A1C1;
    --font-main-nord: 'Inter', sans-serif;
    --background-color-nord: #2E3440;
    --sidebar-bg-nord: #3B4252;
    --header-bg-nord: #3B4252;
    --input-area-bg-nord: #3B4252;
    --ai-message-bg-nord: #434C5E;
    --settings-modal-bg-nord: #3B4252;
    --text-color-nord: #ECEFF4;
    --input-bg-nord: #434C5E;
    --border-color-nord: #4C566A;
    /* --- Emerald Theme (Dark) --- */
    --theme-primary-emerald: #2ecc71;
    --theme-hover-emerald: #27ae60;
    --font-main-emerald: 'Inter', sans-serif;
    --background-color-emerald: #0d1f17;
    --sidebar-bg-emerald: #132a1e;
    --header-bg-emerald: #132a1e;
    --input-area-bg-emerald: #132a1e;
    --ai-message-bg-emerald: #1a3828;
    --settings-modal-bg-emerald: #132a1e;
    --text-color-emerald: #d4f5e2;
    --input-bg-emerald: #1a3828;
    --border-color-emerald: #2d5a3d;
    /* --- Sunset Theme (Dark) --- */
    --theme-primary-sunset: #f97316;
    --theme-hover-sunset: #ea6c0a;
    --font-main-sunset: 'Inter', sans-serif;
    --background-color-sunset: #1a0f00;
    --sidebar-bg-sunset: #241400;
    --header-bg-sunset: #241400;
    --input-area-bg-sunset: #241400;
    --ai-message-bg-sunset: #2e1a00;
    --settings-modal-bg-sunset: #241400;
    --text-color-sunset: #fff3e0;
    --input-bg-sunset: #2e1a00;
    --border-color-sunset: #7c3500;
    /* --- Rose Gold Theme (Dark) --- */
    --theme-primary-rosegold: #f4a2b2;
    --theme-hover-rosegold: #e8899c;
    --font-main-rosegold: 'Inter', sans-serif;
    --background-color-rosegold: #1a1015;
    --sidebar-bg-rosegold: #22141a;
    --header-bg-rosegold: #22141a;
    --input-area-bg-rosegold: #22141a;
    --ai-message-bg-rosegold: #2d1a22;
    --settings-modal-bg-rosegold: #22141a;
    --text-color-rosegold: #fce4ec;
    --input-bg-rosegold: #2d1a22;
    --border-color-rosegold: #7b3a50;
    /* --- Desert Theme (Dark) --- */
    --theme-primary-desert: #d4853a;
    --theme-hover-desert: #c4752a;
    --font-main-desert: 'Inter', sans-serif;
    --background-color-desert: #1c1206;
    --sidebar-bg-desert: #261a0a;
    --header-bg-desert: #261a0a;
    --input-area-bg-desert: #261a0a;
    --ai-message-bg-desert: #30200e;
    --settings-modal-bg-desert: #261a0a;
    --text-color-desert: #fdf0d5;
    --input-bg-desert: #30200e;
    --border-color-desert: #7a4a1a;
    /* --- Volcanic Theme (Dark) --- */
    --theme-primary-volcanic: #e53935;
    --theme-hover-volcanic: #c62828;
    --font-main-volcanic: 'Inter', sans-serif;
    --background-color-volcanic: #0f0000;
    --sidebar-bg-volcanic: #1a0000;
    --header-bg-volcanic: #1a0000;
    --input-area-bg-volcanic: #1a0000;
    --ai-message-bg-volcanic: #220000;
    --settings-modal-bg-volcanic: #1a0000;
    --text-color-volcanic: #ffebee;
    --input-bg-volcanic: #220000;
    --border-color-volcanic: #7f0000;
    /* --- Galactic Theme (Dark) --- */
    --theme-primary-galactic: #7b61ff;
    --theme-hover-galactic: #6347f5;
    --font-main-galactic: 'Inter', sans-serif;
    --background-color-galactic: #05060f;
    --sidebar-bg-galactic: #0a0c1a;
    --header-bg-galactic: #0a0c1a;
    --input-area-bg-galactic: #0a0c1a;
    --ai-message-bg-galactic: #0f1126;
    --settings-modal-bg-galactic: #0a0c1a;
    --text-color-galactic: #e8e6ff;
    --input-bg-galactic: #0f1126;
    --border-color-galactic: #2d2a6e;
    /* --- Slate Theme (Dark) --- */
    --theme-primary-slate: #94a3b8;
    --theme-hover-slate: #7d8fa3;
    --font-main-slate: 'Inter', sans-serif;
    --background-color-slate: #0f1117;
    --sidebar-bg-slate: #161b24;
    --header-bg-slate: #161b24;
    --input-area-bg-slate: #161b24;
    --ai-message-bg-slate: #1e2533;
    --settings-modal-bg-slate: #161b24;
    --text-color-slate: #e2e8f0;
    --input-bg-slate: #1e2533;
    --border-color-slate: #334155;
    /* --- Terminal Theme (Dark) --- */
    --theme-primary-terminal: #39FF14;
    --theme-hover-terminal: #2CC70F;
    --font-main-terminal: 'Fira Code', monospace;
    --background-color-terminal: #0A0A0A;
    --sidebar-bg-terminal: #111;
    --header-bg-terminal: #111;
    --input-area-bg-terminal: #111;
    --ai-message-bg-terminal: #1C1C1C;
    --settings-modal-bg-terminal: #111;
    --text-color-terminal: #39FF14;
    --input-bg-terminal: #1C1C1C;
    --border-color-terminal: #222;
    /* --- Applied Variables --- */
    /* --- Metallic Gold Theme (Dark) --- */ /* <-- NEW */
    --theme-primary-gold: #FFD700; /* Bright Gold */ /* <-- NEW */
    --theme-hover-gold: #E5C400; /* Darker Gold for hover */ /* <-- NEW */
    --font-main-gold: var(--font-main-default); /* <-- NEW */
    --background-color-gold: #101010; /* Near Black */ /* <-- NEW */
    --sidebar-bg-gold: #1A1A1A; /* <-- NEW */
    --header-bg-gold: #1A1A1A; /* <-- NEW */
    --input-area-bg-gold: #1A1A1A; /* <-- NEW */
    --ai-message-bg-gold: #222222; /* <-- NEW */
    --settings-modal-bg-gold: #1A1A1A; /* <-- NEW */
    --text-color-gold: #EAEAEA; /* <-- NEW */
    --input-bg-gold: #333333; /* <-- NEW */
    --border-color-gold: #444444; /* <-- NEW */
    --theme-primary: var(--theme-primary-default);
    --theme-hover: var(--theme-hover-default);
    --font-main: var(--font-main-default);
    --font-main-serif: 'Merriweather', serif;
    --font-main-mono: 'Fira Code', monospace;
    --font-main-inter: 'Inter', sans-serif;
    --user-text-color-final: #fff;
    --ai-text-color-final: var(--text-color);
    --bubble-accent-color: var(--theme-primary);
    --bubble-accent-color-rgb: var(--theme-primary-rgb);
    --bubble-accent-visible: var(--bubble-accent-color);
    --bubble-accent-visible-rgb: var(--bubble-accent-color-rgb);
    --background-color: var(--background-color-default);
    --sidebar-bg: var(--sidebar-bg-default);
    --header-bg: var(--header-bg-default);
    --input-area-bg: var(--input-area-bg-default);
    --ai-message-bg: var(--ai-message-bg-default);
    --settings-modal-bg: var(--settings-modal-bg-default);
    --text-color: var(--text-color-default);
    --input-bg: var(--input-bg-default);
    --border-color: var(--border-color-default);
    --highlight-bg-final: var(--highlight-bg);
    --highlight-text-final: var(--highlight-text);
}

/* Keep this critical sidebar action near the start of the stylesheet so it
   never falls back to the browser's native grey button while later theme
   bundles are loading. The more detailed theme rules further down only refine
   these same values. */
.sidebar .sidebar-history-danger {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 0 !important;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.sidebar .sidebar-history-danger #delete-all-chats-btn {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
    border-radius: 12px !important;
    background: rgba(124, 58, 237, 0.06) !important;
    color: #b9a8ff !important;
    font: 750 0.78rem/1 inherit !important;
    letter-spacing: 0.01em;
    text-decoration: none !important;
    cursor: pointer;
}
.sidebar .sidebar-history-danger #delete-all-chats-btn i {
    flex: 0 0 auto;
    margin: 0 !important;
    font-size: 0.82rem;
}

/* The model switcher sits directly over the wallpaper. Light mode should not
   turn that single toolbar control into an opaque white tile. Keep its white
   glass faint while retaining solid dark text; the full picker keeps its theme. */
html.light-mode body #controls-header-content #model-toggle-button[class] {
    background: rgba(255,255,255,.12) !important;
    color: #111827 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.35);
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}

html.dark-accent-selected:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) {
    --bubble-accent-visible: #f8fafc;
    --bubble-accent-visible-rgb: 248, 250, 252;
}

/* Apply Theme Preset Variables */
html.theme-midnight { --theme-primary: var(--theme-primary-midnight); --theme-hover: var(--theme-hover-midnight); --font-main: var(--font-main-midnight); --background-color: var(--background-color-midnight); --sidebar-bg: var(--sidebar-bg-midnight); --header-bg: var(--header-bg-midnight); --input-area-bg: var(--input-area-bg-midnight); --ai-message-bg: var(--ai-message-bg-midnight); --settings-modal-bg: var(--settings-modal-bg-midnight); --text-color: var(--text-color-midnight); --input-bg: var(--input-bg-midnight); --border-color: var(--border-color-midnight); }
html.theme-synthwave { --theme-primary: var(--theme-primary-synthwave); --theme-hover: var(--theme-hover-synthwave); --font-main: var(--font-main-synthwave); --background-color: var(--background-color-synthwave); --sidebar-bg: var(--sidebar-bg-synthwave); --header-bg: var(--header-bg-synthwave); --input-area-bg: var(--input-area-bg-synthwave); --ai-message-bg: var(--ai-message-bg-synthwave); --settings-modal-bg: var(--settings-modal-bg-synthwave); --text-color: var(--text-color-synthwave); --input-bg: var(--input-bg-synthwave); --border-color: var(--border-color-synthwave); }
html.theme-stealth { --theme-primary: var(--theme-primary-stealth); --theme-hover: var(--theme-hover-stealth); --font-main: var(--font-main-stealth); --background-color: var(--background-color-stealth); --sidebar-bg: var(--sidebar-bg-stealth); --header-bg: var(--header-bg-stealth); --input-area-bg: var(--input-area-bg-stealth); --ai-message-bg: var(--ai-message-bg-stealth); --settings-modal-bg: var(--settings-modal-bg-stealth); --text-color: var(--text-color-stealth); --input-bg: var(--input-bg-stealth); --border-color: var(--border-color-stealth); }
html:not(.light-mode).theme-stealth .sidebar-btn { color: var(--text-color-stealth); }
html.theme-carbon-fibre { --theme-primary: var(--theme-primary-carbon-fibre); --theme-hover: var(--theme-hover-carbon-fibre); --font-main: var(--font-main-carbon-fibre); --background-color: var(--background-color-carbon-fibre); --sidebar-bg: var(--sidebar-bg-carbon-fibre); --header-bg: var(--header-bg-carbon-fibre); --input-area-bg: var(--input-area-bg-carbon-fibre); --ai-message-bg: var(--ai-message-bg-carbon-fibre); --settings-modal-bg: var(--settings-modal-bg-carbon-fibre); --text-color: var(--text-color-carbon-fibre); --input-bg: var(--input-bg-carbon-fibre); --border-color: var(--border-color-carbon-fibre); background-image: linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.04)), linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%, rgba(255,255,255,0.04)); background-size: 3px 3px; }
html.theme-frosted-glass { --theme-primary: var(--theme-primary-frosted-glass); --theme-hover: var(--theme-hover-frosted-glass); --font-main: var(--font-main-frosted-glass); --background-color: transparent; --wallpaper-fallback-bg: var(--background-color-frosted-glass); --sidebar-bg: var(--sidebar-bg-frosted-glass); --header-bg: var(--header-bg-frosted-glass); --input-area-bg: var(--input-area-bg-frosted-glass); --ai-message-bg: var(--ai-message-bg-frosted-glass); --settings-modal-bg: var(--settings-modal-bg-frosted-glass); --text-color: var(--text-color-frosted-glass); --input-bg: var(--input-bg-frosted-glass); --border-color: var(--border-color-frosted-glass); --highlight-bg-final: var(--highlight-bg-light); --highlight-text-final: var(--highlight-text-light); }
@supports (backdrop-filter: blur(10px)) {
html.theme-frosted-glass .sidebar, html.theme-frosted-glass .controls-header, html.theme-frosted-glass #input-area, html.theme-frosted-glass .settings-modal, html.theme-frosted-glass .popover-menu { backdrop-filter: blur(10px); }
html.theme-frosted-glass .sidebar { --sidebar-bg: rgba(255, 255, 255, 0.1); }
html.theme-frosted-glass .controls-header, html.theme-frosted-glass #input-area { --header-bg: rgba(255, 255, 255, 0.5); --input-area-bg: rgba(255, 255, 255, 0.5); }
html.theme-frosted-glass .settings-modal { --settings-modal-bg: rgba(255, 255, 255, 0.6); }
html.theme-frosted-glass .popover-menu { background: rgba(255, 255, 255, 0.6); }
}
html.theme-paper { --theme-primary: var(--theme-primary-paper); --theme-hover: var(--theme-hover-paper); --font-main: var(--font-main-paper); --background-color: var(--background-color-paper); --wallpaper-fallback-bg: #FFFFFF; --sidebar-bg: var(--sidebar-bg-paper); --header-bg: var(--header-bg-paper); --input-area-bg: var(--input-area-bg-paper); --ai-message-bg: var(--ai-message-bg-paper); --settings-modal-bg: var(--settings-modal-bg-paper); --text-color: var(--text-color-paper); --input-bg: var(--input-bg-paper); --border-color: var(--border-color-paper); --highlight-bg-final: var(--highlight-bg-paper); --highlight-text-final: var(--highlight-text-paper); }
html.theme-nord { --theme-primary: var(--theme-primary-nord); --theme-hover: var(--theme-hover-nord); --font-main: var(--font-main-nord); --background-color: var(--background-color-nord); --sidebar-bg: var(--sidebar-bg-nord); --header-bg: var(--header-bg-nord); --input-area-bg: var(--input-area-bg-nord); --ai-message-bg: var(--ai-message-bg-nord); --settings-modal-bg: var(--settings-modal-bg-nord); --text-color: var(--text-color-nord); --input-bg: var(--input-bg-nord); --border-color: var(--border-color-nord); }
html.theme-emerald { --theme-primary: var(--theme-primary-emerald); --theme-hover: var(--theme-hover-emerald); --font-main: var(--font-main-emerald); --background-color: var(--background-color-emerald); --sidebar-bg: var(--sidebar-bg-emerald); --header-bg: var(--header-bg-emerald); --input-area-bg: var(--input-area-bg-emerald); --ai-message-bg: var(--ai-message-bg-emerald); --settings-modal-bg: var(--settings-modal-bg-emerald); --text-color: var(--text-color-emerald); --input-bg: var(--input-bg-emerald); --border-color: var(--border-color-emerald); }
html.theme-emerald { --theme-primary: var(--theme-primary-emerald); --theme-hover: var(--theme-hover-emerald); --font-main: var(--font-main-emerald); --background-color: var(--background-color-emerald); --sidebar-bg: var(--sidebar-bg-emerald); --header-bg: var(--header-bg-emerald); --input-area-bg: var(--input-area-bg-emerald); --ai-message-bg: var(--ai-message-bg-emerald); --settings-modal-bg: var(--settings-modal-bg-emerald); --text-color: var(--text-color-emerald); --input-bg: var(--input-bg-emerald); --border-color: var(--border-color-emerald); }
html.theme-sunset { --theme-primary: var(--theme-primary-sunset); --theme-hover: var(--theme-hover-sunset); --font-main: var(--font-main-sunset); --background-color: var(--background-color-sunset); --sidebar-bg: var(--sidebar-bg-sunset); --header-bg: var(--header-bg-sunset); --input-area-bg: var(--input-area-bg-sunset); --ai-message-bg: var(--ai-message-bg-sunset); --settings-modal-bg: var(--settings-modal-bg-sunset); --text-color: var(--text-color-sunset); --input-bg: var(--input-bg-sunset); --border-color: var(--border-color-sunset); }
html.theme-rosegold { --theme-primary: var(--theme-primary-rosegold); --theme-hover: var(--theme-hover-rosegold); --font-main: var(--font-main-rosegold); --background-color: var(--background-color-rosegold); --sidebar-bg: var(--sidebar-bg-rosegold); --header-bg: var(--header-bg-rosegold); --input-area-bg: var(--input-area-bg-rosegold); --ai-message-bg: var(--ai-message-bg-rosegold); --settings-modal-bg: var(--settings-modal-bg-rosegold); --text-color: var(--text-color-rosegold); --input-bg: var(--input-bg-rosegold); --border-color: var(--border-color-rosegold); }
html.theme-desert { --theme-primary: var(--theme-primary-desert); --theme-hover: var(--theme-hover-desert); --font-main: var(--font-main-desert); --background-color: var(--background-color-desert); --sidebar-bg: var(--sidebar-bg-desert); --header-bg: var(--header-bg-desert); --input-area-bg: var(--input-area-bg-desert); --ai-message-bg: var(--ai-message-bg-desert); --settings-modal-bg: var(--settings-modal-bg-desert); --text-color: var(--text-color-desert); --input-bg: var(--input-bg-desert); --border-color: var(--border-color-desert); }
html.theme-volcanic { --theme-primary: var(--theme-primary-volcanic); --theme-hover: var(--theme-hover-volcanic); --font-main: var(--font-main-volcanic); --background-color: var(--background-color-volcanic); --sidebar-bg: var(--sidebar-bg-volcanic); --header-bg: var(--header-bg-volcanic); --input-area-bg: var(--input-area-bg-volcanic); --ai-message-bg: var(--ai-message-bg-volcanic); --settings-modal-bg: var(--settings-modal-bg-volcanic); --text-color: var(--text-color-volcanic); --input-bg: var(--input-bg-volcanic); --border-color: var(--border-color-volcanic); }
html.theme-galactic { --theme-primary: var(--theme-primary-galactic); --theme-hover: var(--theme-hover-galactic); --font-main: var(--font-main-galactic); --background-color: var(--background-color-galactic); --sidebar-bg: var(--sidebar-bg-galactic); --header-bg: var(--header-bg-galactic); --input-area-bg: var(--input-area-bg-galactic); --ai-message-bg: var(--ai-message-bg-galactic); --settings-modal-bg: var(--settings-modal-bg-galactic); --text-color: var(--text-color-galactic); --input-bg: var(--input-bg-galactic); --border-color: var(--border-color-galactic); }
html.theme-slate { --theme-primary: var(--theme-primary-slate); --theme-hover: var(--theme-hover-slate); --font-main: var(--font-main-slate); --background-color: var(--background-color-slate); --sidebar-bg: var(--sidebar-bg-slate); --header-bg: var(--header-bg-slate); --input-area-bg: var(--input-area-bg-slate); --ai-message-bg: var(--ai-message-bg-slate); --settings-modal-bg: var(--settings-modal-bg-slate); --text-color: var(--text-color-slate); --input-bg: var(--input-bg-slate); --border-color: var(--border-color-slate); }
html.theme-terminal { --theme-primary: var(--theme-primary-terminal); --theme-hover: var(--theme-hover-terminal); --font-main: var(--font-main-terminal); --background-color: var(--background-color-terminal); --sidebar-bg: var(--sidebar-bg-terminal); --header-bg: var(--header-bg-terminal); --input-area-bg: var(--input-area-bg-terminal); --ai-message-bg: var(--ai-message-bg-terminal); --settings-modal-bg: var(--settings-modal-bg-terminal); --text-color: var(--text-color-terminal); --input-bg: var(--input-bg-terminal); --border-color: var(--border-color-terminal); }
html:not(.light-mode).theme-terminal .sidebar, html:not(.light-mode).theme-terminal .controls-header, html:not(.light-mode).theme-terminal #input-area, html:not(.light-mode).theme-terminal .settings-modal, html:not(.light-mode).theme-terminal .popover-menu, html:not(.light-mode).theme-terminal #message-input { color: var(--text-color-terminal); }
html.theme-gold { /* <-- NEW */
    --theme-primary: var(--theme-primary-gold); 
    --theme-hover: var(--theme-hover-gold); 
    --font-main: var(--font-main-gold); 
    --background-color: var(--background-color-gold); 
    --sidebar-bg: var(--sidebar-bg-gold); 
    --header-bg: var(--header-bg-gold); 
    --input-area-bg: var(--input-area-bg-gold); 
    --ai-message-bg: var(--ai-message-bg-gold); 
    --settings-modal-bg: var(--settings-modal-bg-gold); 
    --text-color: var(--text-color-gold); 
    --input-bg: var(--input-bg-gold); 
    --border-color: var(--border-color-gold); 
}

/* Signature wallpaper treatments for themes whose identity is more than a
   single surface colour. Other presets use the generic theme-colour wash
   above, so every current and future preset works with every wallpaper. */
html:not(.light-mode):is(.theme-synthwave,.theme-accent-synthwave) {
    --theme-wallpaper-overlay: linear-gradient(135deg, rgba(32,19,53,.42), rgba(255,0,255,.14));
}
html:not(.light-mode).theme-stealth {
    --theme-wallpaper-overlay: linear-gradient(rgba(0,0,0,.48), rgba(0,0,0,.48));
}
/* Absolute Serenity keeps its interface monochrome through its black surface
   tokens. Do not filter <body>: that would also desaturate user images,
   generated media, video playback and gallery previews. */
html.theme-stealth:not(.light-mode) #asksary-video-editor {
    --ave-bg:#000 !important;
    --ave-surface:#050505 !important;
    --ave-surface-2:#101010 !important;
    --ave-field:#080808 !important;
    --ave-border:#303030 !important;
    --ave-border-strong:#4a4a4a !important;
    --ave-text:#f5f5f5 !important;
    --ave-muted:#a3a3a3 !important;
    --ave-faint:#737373 !important;
    --ave-hover:#181818 !important;
    --ave-grid:rgba(255,255,255,.12) !important;
    --ave-accent:#8a8a8a !important;
    --ave-accent-2:#b0b0b0 !important;
}
html.theme-stealth:not(.light-mode) #asksary-video-editor :is(
    .ave-badge,
    .ave-clip,
    .ave-track-label strong,
    .ave-playhead,
    .ave-playhead::before,
    .ave-marker,
    .ave-marker::before,
    .ave-splitter:hover,
    .ave-splitter.dragging
) {
    background-color:#777 !important;
    border-color:#999 !important;
    color:#fff !important;
}
html.theme-stealth:not(.light-mode) #asksary-video-editor .ave-clip.audio { background:#3f3f3f !important; border-color:#8c8c8c !important; }
html.theme-stealth:not(.light-mode) #asksary-video-editor .ave-clip.text { background:#555 !important; border-color:#aaa !important; }
html.theme-stealth:not(.light-mode) #asksary-video-editor .ave-playhead { background:#9a9a9a !important; }
html.theme-stealth:not(.light-mode) #asksary-video-editor .ave-playhead::before { border-top-color:#9a9a9a !important; }
/* Serenity is intentionally colour-free at every editor control level. */
html.theme-stealth:not(.light-mode) #asksary-video-editor :is(.ave-top > i, .ave-btn i, .ave-media i, .ave-track-label strong, .ave-wave i) { color:#f5f5f5 !important; }
html.theme-stealth:not(.light-mode) #asksary-video-editor :is(.ave-btn.primary, .ave-btn.primary:hover, .ave-btn.danger, .ave-media:hover, .ave-tab.active, .ave-lane.drop-target) {
    background:#1b1b1b !important;
    border-color:#8a8a8a !important;
    color:#f5f5f5 !important;
}
html.theme-stealth:not(.light-mode) #asksary-video-editor :is(.ave-snap-guide, .ave-wave i) { background:#9a9a9a !important; }
html.theme-stealth:not(.light-mode) #asksary-video-editor :is(.ave-zoom, input[type="range"]) { accent-color:#b5b5b5 !important; }
html.theme-stealth:not(.light-mode) #asksary-video-editor .ave-media > span:first-child:not(:has(img, video)) {
    background:#242424 !important;
    color:#f5f5f5 !important;
}
/* The actual edit stays untouched: source footage, generated videos and
   still images retain their original colour inside the monochrome editor. */
html.theme-stealth:not(.light-mode) #asksary-video-editor :is(.ave-stage video,.ave-stage-image,.ave-media img,.ave-media video) { filter:none !important; }
/* AskSary Studio shares the Video Editor's Serenity contract: the whole
   workspace goes monochrome and only the media keeps its colour. */
html.theme-stealth:not(.light-mode) #asksary-studio {
    --ast-bg:#000 !important;
    --ast-surface:#050505 !important;
    --ast-surface-2:#101010 !important;
    --ast-field:#080808 !important;
    --ast-border:#303030 !important;
    --ast-border-strong:#4a4a4a !important;
    --ast-text:#f5f5f5 !important;
    --ast-muted:#a3a3a3 !important;
    --ast-faint:#737373 !important;
    --ast-hover:#181818 !important;
    --ast-grid:rgba(255,255,255,.12) !important;
    --ast-accent:#8a8a8a !important;
    --ast-accent-2:#b0b0b0 !important;
}
html.theme-stealth:not(.light-mode) #asksary-studio :is(
    .ast-badge,
    .ast-clip,
    .ast-track-label strong,
    .ast-playhead,
    .ast-splitter:hover,
    .ast-splitter.dragging
) {
    background-color:#777 !important;
    border-color:#999 !important;
    color:#fff !important;
}
/* .ast-clip paints a gradient, so the reset has to replace `background`
   wholesale — `background-color` alone leaves the gradient on top. */
html.theme-stealth:not(.light-mode) #asksary-studio .ast-clip { background:#777 !important; }
html.theme-stealth:not(.light-mode) #asksary-studio .ast-clip.audio { background:#3f3f3f !important; border-color:#8c8c8c !important; }
html.theme-stealth:not(.light-mode) #asksary-studio .ast-clip.text { background:#555 !important; border-color:#aaa !important; }
html.theme-stealth:not(.light-mode) #asksary-studio .ast-playhead { background:#9a9a9a !important; }
html.theme-stealth:not(.light-mode) #asksary-studio :is(.ast-top > i, .ast-btn i, .ast-row i, .ast-gen-head i, .ast-track-label strong) { color:#f5f5f5 !important; }
html.theme-stealth:not(.light-mode) #asksary-studio :is(.ast-btn.primary, .ast-btn.primary:hover, .ast-btn.danger, .ast-btn.active, .ast-row:hover, .ast-row.drop-target, .ast-track.dropping) {
    background:#1b1b1b !important;
    border-color:#8a8a8a !important;
    color:#f5f5f5 !important;
}
html.theme-stealth:not(.light-mode) #asksary-studio :is(.ast-zoom, input[type="range"]) { accent-color:#b5b5b5 !important; }
html.theme-stealth:not(.light-mode) #asksary-studio .ast-thumb:not(:has(img, video)) {
    background:#242424 !important;
    color:#f5f5f5 !important;
}
/* The media itself is the only colour Studio allows: workspace thumbnails and
   generated previews are never desaturated. Stage clips are deliberately left
   out — they carry the user's own per-clip exposure/contrast/saturation grade
   as an inline filter, and an !important reset here would erase it. */
html.theme-stealth:not(.light-mode) #asksary-studio :is(.ast-row img,.ast-row video,.ast-gen-result img,.ast-gen-result video) { filter:none !important; }
/* Serenity owns the chrome, not the user's creative work. Gallery thumbnails,
   full previews and generated chat media retain source colour. */
html.theme-stealth:not(.light-mode) :is(
    #visual-lib-overlay .visual-item :is(img,video),
    #lib-preview-container :is(img,video,canvas),
    .message :is(img,video),
    #asksary-studio .ast-stage :is(img,video),
    #asksary-video-editor .ave-stage :is(img,video)
) { filter:none !important; }
/* Absolute Serenity has no brand-colour interface state. The only colour
   allowed is the pixel content of image/video previews themselves. */
html.theme-stealth:not(.light-mode) #model-toggle-button[class] {
    color:#f5f5f5 !important;
    background:#050505 !important;
    border-color:#303030 !important;
    box-shadow:none !important;
    animation:none !important;
}
html.theme-stealth:not(.light-mode) #model-toggle-button :is(i,svg) { color:#f5f5f5 !important; }
html.theme-stealth:not(.light-mode) #suite-panel-overlay :is(.sp-shell,.sp-sidebar,.sp-main,.sp-tool-card,.sp-more-card,.sp-credit-plan,.sp-credit-group,.sp-credit-group-head,.sp-trial-more-toggle,.sp-tool-search input,.sp-tier-tabs,.sp-tier-tab,.sp-close,.sp-catalogue-open,.sp-credit-intro,.sp-trial-intro) {
    background:#000 !important;
    background-image:none !important;
    border-color:#303030 !important;
    box-shadow:none !important;
    color:#f5f5f5 !important;
}
html.theme-stealth:not(.light-mode) #suite-panel-overlay :is(.sp-tool-card:hover,.sp-more-card:hover,.sp-suite-btn.active,.sp-tier-tab.active) {
    background:#151515 !important;
    border-color:#707070 !important;
}
html.theme-stealth:not(.light-mode) #suite-panel-overlay :is(.sp-tool-icon,.sp-more-icon,.sp-catalogue-open i,.sp-trial-intro i,.sp-tool-tier,.sp-section-title::before) {
    background:#282828 !important;
    border-color:#777 !important;
    color:#f5f5f5 !important;
    box-shadow:none !important;
}
html.theme-stealth:not(.light-mode) #suite-panel-overlay :is(.sp-tool-tier,.sp-catalogue-open,.sp-trial-intro) { color:#f5f5f5 !important; }
/* Default Dark shares Serenity's true-black canvas and surfaces, but does
   not inherit Serenity's monochrome filter: violet remains its brand accent. */
html.theme-accent-default-black:not(.light-mode) {
    --background-color: #000000 !important;
    --surface-base: #000000 !important;
    --surface-panel: #000000 !important;
    --surface-raised: #050505 !important;
    --surface-input: #050505 !important;
    --surface-hover: #0b0512 !important;
    --wallpaper-fallback-bg: #000000 !important;
    --sidebar-bg: #000000 !important;
    --header-bg: #000000 !important;
    --input-area-bg: #000000 !important;
    --ai-message-bg: #050505 !important;
    --settings-modal-bg: #000000 !important;
    --input-bg: #000000 !important;
    --border-color: #303030 !important;
}
/* Dynamic editors read their surfaces once on launch, so pin their black
   Default Dark palette directly as well. Violet remains for active/primary
   states only; image and video pixels are not affected. */
html.theme-accent-default-black:not(.light-mode) #asksary-video-editor {
    --ave-bg:#000 !important;
    --ave-surface:#000 !important;
    --ave-surface-2:#050505 !important;
    --ave-field:#050505 !important;
    --ave-border:#303030 !important;
    --ave-border-strong:#4a4a4a !important;
    --ave-hover:#0b0512 !important;
}
html.theme-accent-default-black:not(.light-mode) #gallery-video-stitcher {
    --gvs-bg:#000 !important;
    --gvs-surface:#000 !important;
    --gvs-surface-2:#050505 !important;
    --gvs-field:#050505 !important;
    --gvs-border:#303030 !important;
}
html.theme-accent-default-black:not(.light-mode) #wallpaper-fallback {
    background: #000000 !important;
}
html.theme-accent-default-black:not(.light-mode) #mini-toolbar.action-button-grid {
    background: #000000 !important;
    border-color: #303030 !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.04) !important;
}
html.theme-accent-default-black:not(.light-mode) #mini-toolbar .action-btn {
    background: #050505 !important;
    border: 1px solid #303030 !important;
    color: #a78bfa !important;
    box-shadow: none !important;
}
html.theme-accent-default-black:not(.light-mode) #mini-toolbar .action-btn i {
    color: #a78bfa !important;
}
html.theme-accent-default-black:not(.light-mode) #mini-toolbar .action-btn:hover {
    background: #0b0512 !important;
    border-color: #8b5cf6 !important;
    color: #c4b5fd !important;
    box-shadow: 0 0 14px rgba(124,58,237,.25) !important;
}
html.theme-accent-default-black:not(.light-mode) #file-limit-badge {
    background: #7c3aed !important;
    border-color: #000000 !important;
}
/* Tool-specific layouts may bring their own surface tokens. Normalise their
   containers in Default Dark without touching selected/primary purple cues. */
html.theme-accent-default-black:not(.light-mode) :is(
    #global-modal-overlay .custom-modal,
    .custom-modal,
    .custom-modal-box,
    .settings-modal,
    .popover-menu,
    [id^="ind-"][id$="-overlay"] .it-card,
    [id^="ind-"][id$="-overlay"] .it-main,
    [id^="ind-"][id$="-overlay"] .it-aside,
    [id^="ind-"][id$="-overlay"] .it-head,
    [id^="ind-"][id$="-overlay"] .it-foot,
    [id^="ind-"][id$="-overlay"] .it-row
) {
    background: #000000 !important;
    background-image: none !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}
html.theme-accent-default-black:not(.light-mode) [id^="ind-"][id$="-overlay"] .it-input,
html.theme-accent-default-black:not(.light-mode) [id^="ind-"][id$="-overlay"] :is(.it-chip,.it-choice,.it-toggle,.it-outs span) {
    background: #050505 !important;
    border-color: #303030 !important;
}
html.theme-accent-default-black:not(.light-mode) #suite-panel-overlay .sp-shell,
html.theme-accent-default-black:not(.light-mode) #suite-panel-overlay :is(.sp-sidebar,.sp-main,.sp-tool-card,.sp-more-card,.sp-credit-plan,.sp-credit-group,.sp-credit-group-head,.sp-trial-more-toggle,.sp-tool-search input,.sp-tier-tabs,.sp-tier-tab.active,.sp-close,.sp-catalogue-open,.sp-credit-intro) {
    background: #000000 !important;
    background-image: none !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}
html.theme-accent-default-black:not(.light-mode) #suite-panel-overlay :is(.sp-tool-card:hover,.sp-more-card:hover,.sp-suite-btn.active,.sp-tier-tab.active) {
    background: #0b0512 !important;
    border-color: #7c3aed !important;
}
html.theme-accent-default-black:not(.light-mode) #suite-panel-overlay :is(.sp-sidebar,.sp-main,.sp-tool-card,.sp-more-card,.sp-suite-btn,.sp-suite-name,.sp-section-title,.sp-tool-name,.sp-more-name) {
    color: #f5f5f5 !important;
}
html.theme-accent-default-black:not(.light-mode) #suite-panel-overlay :is(.sp-suite-sub,.sp-tool-desc,.sp-search-summary,.sp-credit-intro p,.sp-credit-plan small) {
    color: #a1a1aa !important;
}
/* Every first-party sheet and dialog uses the same true-black base in Default
   Black. Individual tools can still use violet for selected and primary states. */
html.theme-accent-default-black:not(.light-mode) :is(
    #img-flow-box,
    #cmd-overlay .cmd-card,
    #prompt-library-overlay .prompt-modal,
    #folder-manager-overlay .folder-modal,
    #speech-onboarding-overlay .speech-modal,
    #universal-model-overlay .universal-sheet,
    #tracker-overlay .tracker-modal,
    #dg-overlay .dg-modal,
    #visual-lib-overlay .visual-modal,
    #modeler-overlay .modeler-modal,
    #agents-overlay > div,
    #gallery-video-stitcher,
    .notepad-modal,
    .voice-overlay-content,
    .geek-panel
) {
    background: #000000 !important;
    background-image: none !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box :is(
    .ifh-opt,
    .ifh-style,
    .ifh-chip,
    .ifh-input,
    .vfh-reference-box,
    .vfh-reference-picker,
    .vfh-reference-mode
) {
    background: #050505 !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box :is(
    .ifh-opt:hover,
    .ifh-style:hover,
    .ifh-chip:hover,
    .ifh-style.active,
    .ifh-chip.active,
    .vfh-reference-picker:hover,
    .vfh-reference-mode.active
) {
    background: #0b0512 !important;
    border-color: #7c3aed !important;
    color: #f5f3ff !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box :is(
    .ifh-title,
    .ifh-opt,
    .ifh-style,
    .ifh-chip,
    .ifh-input,
    .vfh-reference-head strong
) {
    color: #f5f5f5 !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box :is(
    .ifh-subtitle,
    .ifh-opt .ifh-info small,
    .ifh-section-label,
    .vfh-reference-head small,
    .vfh-reference-note,
    .vfh-reference-item span
) {
    color: #a1a1aa !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box :is(.ifh-input:focus, .vfh-reference-picker:focus-visible, .vfh-reference-mode:focus-visible) {
    border-color: #7c3aed !important;
    box-shadow: 0 0 0 3px rgba(124,58,237,.22) !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box .ifh-dot {
    background: #303030 !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box .ifh-dot.active {
    background: #7c3aed !important;
    box-shadow: 0 3px 8px rgba(124,58,237,.38) !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box .ifh-back {
    color: #c4b5fd !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-box .ifh-back:hover {
    color: #f5f3ff !important;
}
html.theme-accent-default-black:not(.light-mode) #img-flow-close {
    background: #050505 !important;
    border-color: #303030 !important;
    color: #f5f5f5 !important;
    box-shadow: none !important;
}
html:not(.light-mode):is(.theme-carbon-fibre,.theme-accent-carbon) {
    --theme-wallpaper-overlay:
        linear-gradient(rgba(10,10,10,.34), rgba(10,10,10,.34)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
}
html:not(.light-mode):is(.theme-terminal,.theme-accent-terminal) {
    --theme-wallpaper-overlay: linear-gradient(135deg, rgba(0,12,0,.40), rgba(57,255,20,.07));
}
/* Light Mode Overrides */
html.light-mode { --theme-primary: var(--theme-primary-light); --theme-hover: var(--theme-hover-light); --font-main: var(--font-main-light); --background-color: var(--background-color-light); --wallpaper-fallback-bg: #FFFFFF; --sidebar-bg: var(--sidebar-bg-light); --header-bg: var(--header-bg-light); --input-area-bg: var(--input-area-bg-light); --ai-message-bg: var(--ai-message-bg-light); --settings-modal-bg: var(--settings-modal-bg-light); --text-color: var(--text-color-light); --input-bg: var(--input-bg-light); --border-color: var(--border-color-light); --background-color-transparent: rgba(255, 255, 255, 0.1); --border-color-transparent: rgba(0, 0, 0, 0.1); --highlight-bg-final: var(--highlight-bg-light); --highlight-text-final: var(--highlight-text-light); }
body.font-style-serif .message { font-family: var(--font-main-serif); }
body.font-style-mono .message { font-family: var(--font-main-mono); }
html.font-sm #chat .message { font-size: 0.85em; }
html.font-md #chat .message { font-size: 1em; }
html.font-lg #chat .message { font-size: 1.15em; }

/* Specific theme overrides WHEN light mode is ALSO active */
html.light-mode.theme-midnight { --theme-primary: var(--theme-primary-midnight); --theme-hover: var(--theme-hover-midnight); }
html.light-mode.theme-synthwave { --theme-primary: var(--theme-primary-synthwave); --theme-hover: var(--theme-hover-synthwave); }
/* Stealth, Carbon, Nord and Terminal used to re-assert their dark palette here,
   so switching to light mode left dark surfaces behind while the contrast layer
   flipped the copy to near-black — unreadable, and it silently reverted on the
   next reload. They now keep only their accent and typeface in light mode and
   inherit the light surfaces from html.light-mode above, exactly like Midnight,
   Emerald, Sunset and the rest. */
html.light-mode.theme-stealth { --theme-primary: var(--theme-primary-stealth); --theme-hover: var(--theme-hover-stealth); --font-main: var(--font-main-stealth); }
html.light-mode.theme-carbon-fibre { --theme-primary: var(--theme-primary-carbon-fibre); --theme-hover: var(--theme-hover-carbon-fibre); --font-main: var(--font-main-carbon-fibre); }
/* The weave texture is white-on-dark; invert it so Carbon keeps its signature
   pattern on a light surface instead of disappearing. */
html.light-mode.theme-carbon-fibre { background-image: linear-gradient(45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05)), linear-gradient(-45deg, rgba(0,0,0,0.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.05)); background-size: 3px 3px; }
html.light-mode.theme-nord { --theme-primary: var(--theme-primary-nord); --theme-hover: var(--theme-hover-nord); --font-main: var(--font-main-nord); }
html.light-mode.theme-emerald { --theme-primary: var(--theme-primary-emerald); --theme-hover: var(--theme-hover-emerald); }
html.light-mode.theme-sunset { --theme-primary: var(--theme-primary-sunset); --theme-hover: var(--theme-hover-sunset); }
html.light-mode.theme-rosegold { --theme-primary: var(--theme-primary-rosegold); --theme-hover: var(--theme-hover-rosegold); }
html.light-mode.theme-desert { --theme-primary: var(--theme-primary-desert); --theme-hover: var(--theme-hover-desert); }
html.light-mode.theme-volcanic { --theme-primary: var(--theme-primary-volcanic); --theme-hover: var(--theme-hover-volcanic); }
html.light-mode.theme-galactic { --theme-primary: var(--theme-primary-galactic); --theme-hover: var(--theme-hover-galactic); }
html.light-mode.theme-slate { --theme-primary: var(--theme-primary-slate); --theme-hover: var(--theme-hover-slate); }
html.light-mode.theme-terminal { --theme-primary: var(--theme-primary-terminal); --theme-hover: var(--theme-hover-terminal); --font-main: var(--font-main-terminal); }

/* Force light mode for specific themes even if light-mode class is NOT present */
html:not(.light-mode).theme-paper { --theme-primary: var(--theme-primary-paper); --theme-hover: var(--theme-hover-paper); --font-main: var(--font-main-paper); --background-color: var(--background-color-paper); --wallpaper-fallback-bg: #FFFFFF; --sidebar-bg: var(--sidebar-bg-paper); --header-bg: var(--header-bg-paper); --input-area-bg: var(--input-area-bg-paper); --ai-message-bg: var(--ai-message-bg-paper); --settings-modal-bg: var(--settings-modal-bg-paper); --text-color: var(--text-color-paper); --input-bg: var(--input-bg-paper); --border-color: var(--border-color-paper); --highlight-bg-final: var(--highlight-bg-paper); --highlight-text-final: var(--highlight-text-paper); }
html:not(.light-mode).theme-frosted-glass { --theme-primary: var(--theme-primary-frosted-glass); --theme-hover: var(--theme-hover-frosted-glass); --font-main: var(--font-main-frosted-glass); --background-color: transparent; --wallpaper-fallback-bg: var(--background-color-frosted-glass); --sidebar-bg: var(--sidebar-bg-frosted-glass); --header-bg: var(--header-bg-frosted-glass); --input-area-bg: var(--input-area-bg-frosted-glass); --ai-message-bg: var(--ai-message-bg-frosted-glass); --settings-modal-bg: var(--settings-modal-bg-frosted-glass); --text-color: var(--text-color-frosted-glass); --input-bg: var(--input-bg-frosted-glass); --border-color: var(--border-color-frosted-glass); --highlight-bg-final: var(--highlight-bg-light); --highlight-text-final: var(--highlight-text-light); }

/* --- Premium Unlock Modal Styles --- */

/* Premium Credentials Modal */
#premium-credentials-modal { background: var(--settings-modal-bg); color: var(--text-color); padding: 25px 30px; border-radius: 10px; border: 1px solid var(--border-color); box-shadow: 0 5px 20px rgba(0,0,0,0.3); width: 90%; max-width: 380px; text-align: center; transition: background-color 0.3s, color 0.3s, border-color 0.3s; }
#premium-credentials-modal h2 { margin-top: 0; margin-bottom: 10px; color: var(--theme-primary); transition: color 0.3s; }
#premium-credentials-modal h2 i { margin-right: 8px; }
#premium-credentials-modal p { margin-bottom: 20px; opacity: 0.8; }
.form-group { margin-bottom: 15px; text-align: left; }
.form-group label { display: block; font-weight: 500; font-size: 0.9em; margin-bottom: 5px; opacity: 0.9; }
.form-group input[type="text"], .form-group input[type="password"] { width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-size: 1em; box-sizing: border-box; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s, color 0.3s; }
.form-group input[type="text"]::placeholder, .form-group input[type="password"]::placeholder { color: #888; opacity: 0.6; }
html.light-mode .form-group input[type="text"]::placeholder, html.light-mode .form-group input[type="password"]::placeholder, html.theme-paper .form-group input[type="text"]::placeholder, html.theme-paper .form-group input[type="password"]::placeholder, html.theme-frosted-glass .form-group input[type="text"]::placeholder, html.theme-frosted-glass .form-group input[type="password"]::placeholder { color: #777; }
.form-group input[type="text"]:focus, .form-group input[type="password"]:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 8px var(--theme-primary); }
#premium-credentials-modal .button-group { display: flex; gap: 10px; margin-top: 25px; }
#premium-credentials-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 10001; }
html.theme-frosted-glass #premium-credentials-overlay { background: rgba(0,0,0,0.3); }
#premium-credentials-modal button { margin: 0; flex-grow: 1; padding: 12px; font-size: 1em; border: none; border-radius: 6px; cursor: pointer; transition: background 0.3s, transform 0.2s, color 0.3s, border-color 0.3s; font-weight: bold; }
#credentials-unlock-btn { background: var(--theme-primary); color: #fff; border: 1px solid transparent; }
#credentials-unlock-btn:hover { background: var(--theme-hover); transform: translateY(-2px); }
html.light-accent-selected #credentials-unlock-btn, html.theme-carbon-fibre #credentials-unlock-btn, html.theme-nord #credentials-unlock-btn, html.theme-terminal #credentials-unlock-btn, html.light-mode #credentials-unlock-btn, html.theme-paper #credentials-unlock-btn, html.theme-frosted-glass #credentials-unlock-btn { color: #111; }
#credentials-cancel-btn { background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); }
#credentials-cancel-btn:hover { background: var(--ai-message-bg); transform: translateY(-2px); }

/* Unlock/Premium Buttons */
#show-unlock-modal-btn { background: #c69400; border-color: #f5b800; box-shadow: 0 0 10px #f5b800; }
#show-unlock-modal-btn:hover { background: #eab308; }
#premium-status-badge { display: none; background: #c69400; border-color: #f5b800; box-shadow: 0 0 10px #f5b800; cursor: default; opacity: 0.8; }
#premium-status-badge:hover { background: #c69400; box-shadow: 0 0 10px #f5b800; transform: none; }
.premium-feature { display: none !important; }
body.premium-unlocked .model-list li.premium-feature { display: list-item !important; }
body.premium-unlocked .input-controls label.premium-feature { display: flex !important; }
body.premium-unlocked #logout-btn-container.premium-feature { display: block !important; }
body.premium-unlocked #show-unlock-modal-btn { display: none !important; }
body.premium-unlocked #premium-status-badge { display: flex !important; }
/* Knowledge Base is the sole subscription-only workspace. Keep its navigation
   and management surfaces undiscoverable until the wallet entitlement sync has
   confirmed a qualifying recurring plan. The API remains authoritative. */
.kb-subscription-only { display: none !important; }
body.knowledge-base-unlocked .sp-suite-btn.kb-subscription-only,
body.knowledge-base-unlocked .v-tab.kb-subscription-only,
body.knowledge-base-unlocked .input-controls label.kb-subscription-only { display: flex !important; }
body.knowledge-base-unlocked #knowledge-base-settings-section.kb-subscription-only { display: block !important; }
/* Provider-backed composer modes are account features, not subscription gates. */
.registered-feature { display: none !important; }
body.logged-in .input-controls label.registered-feature { display: flex !important; }

/* AskSary Unleashed: the wallet is a first-class, persistent product control. */
.header-credit-balance {
    /* Same quiet chrome as .header-icon-btn: transparent at rest, themed
       glow on hover — the pill keeps its shape for the number + label. */
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border: 1px solid transparent;
    border-radius: 10px; /* rectangular, owner follow-up 2026-08-29 */
    background: transparent;
    color: var(--text-primary,#f8fafc);
    cursor: pointer;
    font: inherit;
    font-weight: 850;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.header-credit-balance i { color:var(--bubble-accent-visible,var(--bubble-accent-color,var(--theme-primary,#6d28d9))); }
.header-credit-balance small { color:var(--text-secondary,#94a3b8);font-size:10px;font-weight:750; }
.header-credit-balance.in-debt, .header-credit-balance.in-debt i { color:#f87171; }
.header-credit-balance:hover { background: rgba(var(--theme-primary-rgb,109,40,217), 0.1); border-color: rgba(var(--theme-primary-rgb,109,40,217), 0.3); box-shadow: 0 0 10px rgba(var(--theme-primary-rgb,109,40,217), 0.2); transform: none; }
html.theme-stealth:not(.light-mode) .header-credit-balance i { color:#f5f5f5; }
html.theme-accent-default-black:not(.light-mode) .header-credit-balance i { color:#a78bfa; }
html:is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .header-credit-balance { background:transparent; border-color:transparent; }
html:is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .header-credit-balance:hover { border-color:#4a4a4a; }
html.light-mode .header-credit-balance { background:linear-gradient(135deg,#ecfeff,#f0fdfa);border-color:#8b5cf6;color:#0f172a; }
html.light-mode .header-credit-balance small { color:#64748b; }

/* Compact upload shortcuts share Serenity's black and violet panel language. */
:is(html,body):is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .file-analysis-overlay { background:rgba(0,0,0,.88)!important; }
:is(html,body):is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .file-analysis-dialog { background:#000!important;border-color:rgba(139,92,246,.48)!important;color:#f5f5f5!important;box-shadow:none!important; }
:is(html,body).theme-stealth:not(.light-mode) .file-analysis-dialog > .fa-solid { color:#f5f5f5!important; }
:is(html,body).theme-accent-default-black:not(.light-mode) .file-analysis-dialog > .fa-solid { color:#a78bfa!important; }
:is(html,body):is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .file-analysis-dialog :is([data-close],[data-video-analysis-close]) { background:#050505!important;border:1px solid #303030!important;color:#f5f5f5!important;box-shadow:none!important; }
:is(html,body).theme-stealth:not(.light-mode) .file-analysis-dialog :is([data-upload],[data-convert-upload],[data-video-analysis-upload],[data-video-analysis-run]) { background:#050505!important;border:1px solid #707070!important;color:#f5f5f5!important;box-shadow:none!important; }
:is(html,body).theme-stealth:not(.light-mode) .file-analysis-dialog :is([data-upload],[data-convert-upload],[data-video-analysis-upload],[data-video-analysis-run]):hover { background:#171717!important;border-color:#aaa!important; }
:is(html,body).theme-accent-default-black:not(.light-mode) .file-analysis-dialog :is([data-upload],[data-convert-upload],[data-video-analysis-upload],[data-video-analysis-run]) { background:#050505!important;border:1px solid #7c3aed!important;color:#c4b5fd!important;box-shadow:none!important; }
:is(html,body).theme-accent-default-black:not(.light-mode) .file-analysis-dialog :is([data-upload],[data-convert-upload],[data-video-analysis-upload],[data-video-analysis-run]):hover { background:#0b0512!important;border-color:#a78bfa!important; }
:is(html,body):is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .file-analysis-dialog [data-video-analysis-url] { background:#050505!important;border-color:rgba(139,92,246,.48)!important;color:#f5f5f5!important; }
@media (max-width: 600px) {
    .header-credit-balance { padding-inline:9px; }
    .header-credit-balance small { display:none; }
}

/* Intro Video */
#intro-video-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 20000; opacity: 1; transition: opacity 0.5s ease-out; pointer-events: auto; }
#intro-video-container.fade-out { opacity: 0; pointer-events: none; }
#intro-video-container video { width: 100%; height: 100%; object-fit: cover; }

/* Base Layout */
html, body { height: 100%; margin: 0; padding: 0; overflow: hidden; }
html { background-color: var(--background-color); transition: background-color 0.3s; }
body { font-family: var(--font-main); color: var(--text-color); transition: color 0.3s; }
.main-container { display: flex; height: 100%; width: 100%; overflow: hidden; position: relative; z-index: 2; }
.chat-container { flex: 1; display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; border-left: 2px solid var(--theme-primary); box-shadow: 0 0 20px var(--theme-primary); overflow: hidden; background: transparent; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; min-width: 0; }
html.theme-frosted-glass .chat-container { border-left: 1px solid var(--theme-primary); box-shadow: 0 0 15px rgba(0,122,255,0.3); }
html.theme-carbon-fibre .chat-container { border-left: 1px solid var(--theme-primary); box-shadow: 0 0 20px rgba(192,192,192,0.3); }

/* Welcome pill card — shares grid row 3 with #chat, overlays it when visible */
#chat { grid-row: 3; grid-column: 1; height: 100%; }
#welcome-message-card {
    grid-row: 3;
    grid-column: 1;
    z-index: 2;
    overflow-y: auto;
    align-self: center;
    /* overflow-y alone never engaged: a centred grid item with no height
       constraint grows past its row instead of scrolling inside it, so once
       the grid became nine doors plus the two modes and All tools, the card
       ran straight over the composer (owner report, 2026-09-14). These two
       give the row the last word, and the scrollbar the card already asked
       for actually appears. */
    min-height: 0;
    max-height: 100%;
    padding: 28px 20px;
    /* Wide enough for the seven-column tool grid (owner 2026-09-05). */
    max-width: 1140px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    color: var(--text-color, #fff);
    box-sizing: border-box;
    pointer-events: auto;
}
#welcome-message-card.hidden { display: none !important; }

/* Welcome card typography & pill styles */
.welcome-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(to right, #fff, #4a90e2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.welcome-subtitle { text-align: center; color: #aaa; margin-bottom: 24px; font-size: 0.95rem; }
.pill-section-label { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: monospace; margin-bottom: 12px; margin-top: 0; }
.pill-label-free { color: #C9A84C; }
.pill-label-premium { color: #8B5CF6; margin-top: 20px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.wpill { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 100px; font-size: 0.83rem; font-family: inherit; cursor: pointer; transition: all 0.2s ease; border: 1px solid; white-space: nowrap; line-height: 1; }
.wpill-free { background: rgba(201,168,76,0.08); border-color: rgba(201,168,76,0.25); color: #E8C97A; }
.wpill-free:hover { background: rgba(201,168,76,0.18); border-color: rgba(201,168,76,0.5); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(201,168,76,0.15); }
.wpill-premium { background: rgba(139,92,246,0.08); border-color: rgba(139,92,246,0.25); color: #A78BFA; opacity: 0.85; }
.wpill-premium:hover { background: rgba(139,92,246,0.18); border-color: rgba(139,92,246,0.5); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(139,92,246,0.15); opacity: 1; }
@media(max-width: 500px) { .wpill { font-size: 0.78rem; padding: 8px 12px; } }

/* Sidebar */
.sidebar {
    /* Nearly transparent — wallpaper shows through */
    background: rgba(0, 0, 0, 0.08);

    /* Frosted glass blur for readability */
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    /* "Light Edge" instead of a border (Subtle highlight on the right) */
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.08), 
                10px 0 40px rgba(0, 0, 0, 0.5);
    border-right: none;

    /* Positioning (Keep existing) */
    position: fixed; top: 0; left: 0; width: 320px; height: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column; z-index: 1000;
}
html.theme-frosted-glass .sidebar, html.theme-carbon-fibre .sidebar { border-right: 1px solid var(--theme-primary); }
html.theme-carbon-fibre .sidebar { box-shadow: 0 0 20px rgba(192,192,192,0.3); }
.sidebar.open { transform: translateX(0); }


.sidebar-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    /* Fading Gradient Separator */
    border-bottom: 1px solid transparent;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    background-size: 100% 1px;
    background-position: bottom;
    background-repeat: no-repeat;
}



#sidebar-header-content { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
#sidebar-greeting { font-size: 1em; font-weight: bold; color: var(--theme-primary); }
#sidebar-subheading { font-size: 0.6em; font-weight: normal; color: var(--text-color); opacity: 0.7; margin-top: 2px; }
html.theme-synthwave .sidebar-header { text-shadow: 0 0 12px var(--theme-primary); }
.sidebar-header button { background: none; border: none; color: var(--text-color); font-size: 1.5em; cursor: pointer; }
.sidebar-controls { display: flex; flex-direction: column; gap: 10px; padding: 15px; border-bottom: 1px solid var(--border-color); transition: border-color 0.3s; overflow: hidden; flex-shrink: 0; }
.sidebar-btn-group { display: flex; gap: 5px; }



/* General Sidebar Buttons (Premium Glass + Accent Glow) */
.sidebar-btn {
    height: 44px;
    border-radius: 12px;
    padding: 0 16px;
    
    /* Transparent Glass Base */
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
    
    box-shadow: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em;
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
}

.sidebar-btn:hover {
    /* Dynamic Accent Tint on Hover */
    background: rgba(var(--theme-primary-rgb), 0.1); 
    
    /* Dynamic Accent Border */
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    
    /* The Subtle Accent Glow */
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.15);
    
    color: #fff;
    transform: translateY(-1px);
}

.sidebar-btn i { opacity: 0.7; transition: 0.3s; }
.sidebar-btn:hover i { opacity: 1; color: var(--theme-primary); }

/* "New Chat" Hero Button (Specific Override) */
#new-chat-btn {
    /* Gradient Glow */
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-hover) 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb), 0.25); /* Colored Glow */
    margin-bottom: 10px;
}

#new-chat-btn:hover {
    box-shadow: 0 6px 25px rgba(var(--theme-primary-rgb), 0.4);
    transform: translateY(-1px) scale(1.01);
    filter: brightness(1.1);
}



.sidebar-btn:hover { background: var(--theme-hover); box-shadow: 0 0 15px var(--theme-primary); }
html.light-mode .sidebar-btn:hover, html.theme-paper .sidebar-btn:hover, html.theme-frosted-glass .sidebar-btn:hover { background: #dcdcdc; }
html:not(.light-mode).theme-carbon-fibre .sidebar-btn { color: var(--text-color-carbon-fibre); box-shadow: 0 0 10px rgba(192,192,192,0.3); }
html.theme-carbon-fibre .sidebar-btn:hover { background: var(--theme-hover-carbon-fibre); color: #111; }
#chat-history-list { flex-grow: 1; overflow-y: auto; padding: 10px; }

/* Improve History Items */
.history-item {
    border-radius: 12px;
    margin-bottom: 8px;
    padding: 14px;
    border: 1px solid transparent;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex; justify-content: space-between; align-items: center; cursor: pointer; 
}

.history-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px); /* Subtle slide on hover */
}

.history-item {
    border-radius: 8px;
    margin: 2px 10px;
    padding: 12px 14px;
    border: none; /* No border by default */
    transition: all 0.2s ease;
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    color: rgba(255, 255, 255, 0.6); /* Muted text */
    background: transparent; /* Blended */
}

/* Hover: Slight highlight */
.history-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
}

/* Active: Laser Gradient */
.history-item.active {
    /* Gradient fading from left to right */
    background: linear-gradient(90deg, rgba(var(--theme-primary-rgb), 0.15) 0%, transparent 100%);
    
    /* The "Laser" indicator on the left */
    box-shadow: inset 3px 0 0 var(--theme-primary);
    
    color: #fff;
    font-weight: 600;
}

/* Adjust the small date text */
.history-item-date {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.3); /* Very subtle */
}
.history-item-details { display: flex; flex-direction: column; flex-grow: 1; overflow: hidden; margin-right: 6px; }
.history-item-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.history-item-date { font-size: 0.75em; color: #888; margin-top: 4px; }
html.light-mode .history-item-date, html.theme-paper .history-item-date, html.theme-frosted-glass .history-item-date { color: #555; }
.history-item-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.history-icon-btn { background: none; border: none; color: #888; font-size: 0.9em; cursor: pointer; padding: 2px 4px; transition: color 0.2s; }
html.light-mode .history-icon-btn, html.theme-paper .history-icon-btn, html.theme-frosted-glass .history-icon-btn { color: #777; }
.history-icon-btn:hover { color: var(--theme-primary); }
.history-icon-btn.delete-chat-btn:hover { color: #ff5c5c; }
.history-icon-btn.pin-chat-btn.pinned { color: var(--theme-primary); }
html.light-mode .history-item:hover, html.theme-paper .history-item:hover, html.theme-frosted-glass .history-item:hover { background-color: rgba(0,0,0,0.05); }
html:not(.light-mode).theme-stealth .history-item:hover { background-color: #1a1a1a; }
html.light-mode .history-item.active, html.theme-paper .history-item.active { background-color: #e0eafc; }
html.theme-frosted-glass .history-item.active { background-color: rgba(0,122,255,0.15); border-color: var(--theme-primary); }
html:not(.light-mode).theme-stealth .history-item.active { background-color: #222; }
html:not(.light-mode).theme-carbon-fibre .history-item.active { background-color: #333; }
.backup-toggle-container { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.9em; padding-top: 10px; }
.overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: 0.3s ease; z-index: 900; }
html.theme-frosted-glass .overlay { background: rgba(0,0,0,0.3); }
.overlay.active { opacity: 1; pointer-events: auto; }

/* Sidebar Footer */

.sidebar-footer {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
    
    /* Fading Gradient Separator */
    border-top: 1px solid transparent;
    background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    background-size: 100% 1px;
    background-position: top;
    background-repeat: no-repeat;
    
    /* Blended Background */
    background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}



.sidebar-footer > div { margin-top: 0 !important; }
.sidebar-footer .sidebar-btn { width: 100%; box-sizing: border-box; }
#user-controls-sidebar { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 10px; flex-wrap: wrap; }
#user-controls-sidebar > .sidebar-btn { flex-grow: 1; }
#logged-in-controls { display: flex; width: 100%; gap: 5px; }
#logged-in-controls .sidebar-btn { flex-grow: 1; box-sizing: border-box; margin: 0; width: auto !important; }
body.logged-in #login-button, body.logged-in #signup-button { display: none !important; }

/* Header */
.top-header, .controls-header { text-align: center; padding: 10px 0 5px 0; border-bottom: 1px solid var(--border-color); background: var(--header-bg); transition: background 0.3s, border-color 0.3s; flex-shrink: 0; }
.controls-header { padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; position: relative; }
#logo-video { max-height: 60px; width: auto; vertical-align: middle; }
.header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 1; min-width: 0; flex-grow: 1; }


.header-right {
    gap: 2px !important; /* Reduced from 6px/8px */
}

/* Optional: If you want to shave off a tiny bit more padding from the buttons themselves */
.header-right .header-icon-btn {
    padding: 0 2px !important; /* Tighter touch targets */
    min-width: 30px !important; /* Allow them to be narrower */
}
    .header-right { display: flex; align-items: center; gap: 2px !important; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }



.header-icon-btn { 
    background: transparent; 
    border: 1px solid transparent; 
    color: rgba(255, 255, 255, 0.7); 
    width: 40px; height: 40px; 
    border-radius: 50%; /* Circle */
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1em; 
    cursor: pointer; 
    transition: all 0.2s ease; 
}

.header-icon-btn:hover { 
    background: rgba(var(--theme-primary-rgb), 0.1);
    border-color: rgba(var(--theme-primary-rgb), 0.3);
    color: var(--theme-primary);
    box-shadow: 0 0 10px rgba(var(--theme-primary-rgb), 0.2);
    transform: none; /* Remove scale, use glow instead */
}
.header-icon-btn.active { color: var(--theme-primary); }
.hamburger { font-size: 1.6em; cursor: pointer; padding: 0 8px; color: var(--text-color); }
#search-container { display: flex; align-items: center; gap: 5px; background-color: var(--input-bg); padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border-color); flex-grow: 1; max-width: 400px; margin: 0 10px; }
.hidden { display: none !important; }
#search-input { flex-grow: 1; background: none; border: none; outline: none; color: var(--text-color); font-size: 0.9em; }
#search-close-btn { background: none; border: none; color: var(--text-color); font-size: 1em; cursor: pointer; padding: 0 4px; flex-shrink: 0; }

/* Toggles */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { display: none; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, #C9A84C, #a87c2a); border-radius: 24px; transition: background 0.3s ease; }
.slider:before { position: absolute; content: "🌙"; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; transition: transform 0.3s ease; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #333; }
.switch input:checked + .slider { background: linear-gradient(90deg, #ccc, #999); }
.switch input:checked + .slider:before { transform: translateX(26px); content: "☀️"; }
.feature-switch { position: relative; display: inline-block; width: 34px; height: 18px; }
.feature-switch input { display: none; }
.feature-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #555; border-radius: 18px; transition: background 0.3s; }
html.light-mode .feature-slider, html.theme-paper .feature-slider, html.theme-frosted-glass .feature-slider { background: #ccc; }
.feature-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 2px; bottom: 2px; background-color: white; border-radius: 50%; transition: transform 0.3s; }
.feature-switch input:checked + .feature-slider { background: var(--theme-primary); }
.feature-switch input:checked + .feature-slider:before { transform: translateX(16px); }
.control-group label:has(input:disabled) { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.control-group label input:disabled + .feature-slider { cursor: not-allowed !important; background: #444 !important; }
.control-group label input:disabled + .feature-slider:before { background-color: #777 !important; }
html.light-mode .control-group label input:disabled + .feature-slider:before, html.theme-paper .control-group label input:disabled + .feature-slider:before, html.theme-frosted-glass .control-group label input:disabled + .feature-slider:before { background-color: #aaa !important; }

/* Chat Area */
#chat { padding: 4px 15px 15px; overflow-y: auto; position: relative; flex-grow: 1; min-height: 0; }
.date-divider { text-align: center; margin: 6px auto 15px; font-size: 0.8em; color: #888; display: flex; align-items: center; }
html.light-mode .date-divider, html.theme-paper .date-divider, html.theme-frosted-glass .date-divider { color: #555; }
.date-divider::before, .date-divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); margin: 0 10px; }

/* Message Containers */
.message-container { 
    display: flex; 
    flex-direction: column; 
    margin-bottom: 24px; /* More breathing room */
}

.message-wrapper { display: flex; gap: 8px; width: 100%; max-width: 960px; margin: 0 auto; } /* review item 9 (2026-08-29): wider reading column */
.message-container.user .message-wrapper { justify-content: flex-end; }

/* Base message style */
.message { 
    padding: 12px 18px; 
    border-radius: 12px; 
    white-space: pre-wrap; 
    transition: background-color 0.3s, color 0.3s, font-size 0.2s ease-in-out, border-color 0.3s, box-shadow 0.3s; 
    line-height: 1.6; 
    min-width: 40px; 
    overflow-wrap: break-word; 
    font-family: var(--font-main); 
}

/* User Message - Tail on bottom right */
.message-container.user .message {
    border-radius: 20px 20px 4px 20px;
    background: var(--bubble-accent-color);
    color: var(--user-text-color-final);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    border: none;
}

/* AI Message - Tail on bottom left */
.message-container.ai .message,
.message-container.assistant .message {
    border-radius: 20px 20px 20px 4px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--ai-text-color-final);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html.theme-paper .message, html.theme-frosted-glass .message { box-shadow: 0 2px 4px rgba(0,0,0,0.08); }
.message mark { background-color: var(--highlight-bg-final); color: var(--highlight-text-final); padding: 0.1em; border-radius: 3px; }
.message img, .message video { max-width: 100%; border-radius: 8px; }
.message img { max-height: 200px; margin-bottom: 8px; display: block; }
html.theme-carbon-fibre .user .message { color: var(--user-text-color-final); }
html.theme-frosted-glass .user .message { color: var(--user-text-color-final); }
.avatar { width: 36px; height: 36px; flex-shrink: 0; }
.message-container.user .avatar { font-size: 1.8em; text-align: center; line-height: 36px; }
.message-container.ai .avatar, .message-container.assistant .avatar { border-radius: 8px; overflow: hidden; }
.message-container.ai .avatar img, .message-container.assistant .avatar img { width: 100%; height: 100%; object-fit: cover; }
.gemini-loader { display: flex; align-items: center; justify-content: center; height: 28px; gap: 6px; }
.gemini-loader div { width: 5px; height: 10px; background: var(--theme-primary); border-radius: 5px; animation: pulse 1.2s infinite ease-in-out; }
.gemini-loader div:nth-child(2) { animation-delay: 0.2s; }
.gemini-loader div:nth-child(3) { animation-delay: 0.4s; }
.gemini-loader div:nth-child(4) { animation-delay: 0.6s; }
@keyframes pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(2.5); } }
.follow-up-prompts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; max-width: 800px; margin-left: auto; margin-right: auto; padding-left: 40px; }
.prompt-suggestion { background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 12px; padding: 6px 12px; cursor: pointer; transition: 0.2s; font-size: 0.9em; }

/* Mac Window Code Blocks */
.code-block-wrapper { 
    position: relative; 
    margin-top: 15px; 
    background: #0d0d0d;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    overflow: hidden; /* Ensures header stays inside rounded corners */
}

/* Fake "Terminal Header" */
.code-block-wrapper::before {
    content: "Code"; /* You can also leave this empty for just a bar */
    display: block;
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 16px;
    font-size: 0.75rem;
    font-family: sans-serif;
    color: #888;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.message pre { 
    background-color: transparent; /* Remove bg from pre, wrapper handles it */
    border: none;
    border-radius: 0; 
    padding: 20px; 
    margin: 0;
    overflow-x: auto; 
    color: #d4d4d4; 
}

/* Adjust copy button position to sit in the header */
.code-block-wrapper .copy-btn {
    top: 6px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: 6px;
    color: #fff; 
    border: none; 
    cursor: pointer; 
    opacity: 0.7; 
    transition: opacity 0.2s;
}

.message pre code { font-family: 'Courier New', Courier, monospace; font-size: 0.9em; white-space: pre; }
html.light-mode .message pre, html.theme-paper .message pre, html.theme-frosted-glass .message pre { background-color: #f5f5f5; color: #333; border-color: #ddd;}
html:not(.light-mode).theme-stealth .message pre { background-color: #080808; border-color: var(--border-color); }
/* Absolute Serenity, owner-directed 2026-08-25: both AI and user chat
   bubbles are true black, not the generic grey accent (--theme-primary-
   stealth, #444, used for buttons elsewhere) or the translucent white AI
   bubble every other theme gets. Keeps the theme's monochrome-black
   discipline already applied to Video Editor/AskSary Studio/model picker
   above. A subtle border (matching --border-color-stealth) keeps bubbles
   readable against the identically-black page background. */
html.theme-stealth:not(.light-mode) .message-container.user .message {
    background: #000 !important;
    border: 1px solid #222;
}
html.theme-stealth:not(.light-mode) .message-container.ai .message,
html.theme-stealth:not(.light-mode) .message-container.assistant .message {
    background: #000 !important;
    border: 1px solid #222;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html:not(.light-mode).theme-carbon-fibre .message pre { background-color: #111; border-color: var(--border-color-carbon-fibre); }
html:not(.light-mode).theme-terminal .message pre { background-color: #111; border-color: var(--border-color-terminal); color: var(--text-color-terminal);}
html.light-mode .copy-btn, html.theme-paper .copy-btn, html.theme-frosted-glass .copy-btn { background-color: #ddd; color: #333;}
html:not(.light-mode).theme-stealth .copy-btn { background-color: #222; color: #777; }
html:not(.light-mode).theme-terminal .copy-btn { background-color: #222; color: var(--text-color-terminal);}
.code-block-wrapper:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background-color: #555; }
html.light-mode .copy-btn:hover, html.theme-paper .copy-btn:hover, html.theme-frosted-glass .copy-btn:hover { background-color: #ccc;}

/* Input Area (Floating) */
#input-area {
    display: flex;
    flex-direction: column;
    /* Ultra translucent — wallpaper shows through */
    background: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    /* Floating card: rounded on every corner and inset from every edge, so
       the composer never butts into the sidebar or screen edges (owner
       feedback 2026-08-28: the old top-only strip visually "plugged into"
       the sidebar at an arbitrary height). */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    /* The card hugs the input instead of spanning the whole column (owner
       feedback 2026-08-28: full-width read as a giant empty tray; second
       pass: "much narrower, taller profile"). !important so no theme block
       can stretch it back. */
    width: min(760px, calc(100% - 24px)) !important;
    /* Docked: flush with the bottom edge, so the hairline shows only on the
       top, left and right (owner feedback 2026-08-28, third pass). */
    margin: 0 auto !important;
    border-radius: 24px 24px 0 0 !important;
    border-bottom: none !important;
    padding: 20px;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); /* Lift with shadow */
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.input-wrapper { display: flex; width: 100%; max-width: 800px; margin: 0 auto; gap: 8px; align-items: flex-end; position: relative; }

#message-input {
    flex: 1;
    /* Round Pill Shape */
    border-radius: 24px; 
    /* A real writing area: ~5 text lines tall by default (owner feedback
       2026-08-28, third pass). min-height clamps the JS auto-resize. */
    padding: 16px 24px;
    min-height: 150px;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(var(--theme-primary-rgb), 0.3);
    color: var(--text-color);
    font-size: 1em;
    outline: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: none; 
    overflow-y: auto; 
    max-height: 150px; 
    line-height: 1.5; 
    white-space: pre-wrap; 
    word-wrap: break-word;
}

#message-input:focus {
    background: rgba(0, 0, 0, 0.6);
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.2);
}
html.workspace-animations-off #message-input {
    animation: none !important;
    filter: drop-shadow(0 0 5px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .55));
}
html.workspace-animations-off #input-area::before {
    animation: none !important;
    box-shadow: 0 0 8px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .45), inset 0 0 4px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .18);
}

html.light-mode #message-input, html.theme-paper #message-input, html.theme-frosted-glass #message-input { box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }

/* Light mode: crisp white input bar */
html.light-mode #input-area {
    background: #ffffff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid #e5e7eb;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
}
html.light-mode #message-input {
    background: #f0f0f0;
    border-color: rgba(0,0,0,0.12);
    color: #111;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.07);
}
html.light-mode #message-input:focus {
    background: #e8e8e8;
    border-color: rgba(var(--theme-primary-rgb), 0.5);
    box-shadow: 0 0 0 2px rgba(var(--theme-primary-rgb), 0.15);
}
html.light-mode #message-input::placeholder { color: #888; }
.action-button-group { display: flex; gap: 8px; flex-shrink: 0; }
/* Unified Premium Action Buttons */
.action-btn {
    border-radius: 16px;
    width: 50px; 
    height: 50px;
    font-size: 1.2rem;
    
    /* Transparent Glass Default */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.6) !important;
    
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.action-btn:hover:not(:disabled) {
    /* Glow matches the Theme Color */
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 15px rgba(var(--theme-primary-rgb), 0.3) !important;
    transform: translateY(-2px);
}

.action-btn i { transition: color 0.3s; }
.action-btn:hover i { color: #fff; }

/* Special Handling for SEND Button (Make it slightly more visible but still glass) */
#send-btn {
    background: rgba(var(--theme-primary-rgb), 0.1) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.2) !important;
    color: var(--theme-primary) !important;
}

#send-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.8), var(--theme-primary)) !important;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.5) !important;
}
.action-btn i { font-size: 1.1em; }
.action-btn:disabled { background-color: #555; cursor: not-allowed; transform: none; color: #aaa !important; }
#send-btn { background: var(--theme-primary); }
#send-btn:hover:not(:disabled) { background: var(--theme-hover); }
html.light-mode #send-btn, html.theme-paper #send-btn, html.theme-frosted-glass #send-btn { color: #111; }
html.light-accent-selected #send-btn { color: #111; }
html.theme-carbon-fibre #send-btn, html.theme-nord #send-btn, html.theme-terminal #send-btn { color: #111; }
#create-image-btn { background: #e67e22; }
#pause-resume-btn { background: #6c757d; }
.input-controls { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; font-size: 0.8em; width: 100%; max-width: 800px; margin: 0 auto; gap: 8px; }
.control-btn { background: none; border: 1px solid var(--border-color); border-radius: 4px; padding: 4px; cursor: pointer; color: #888; font-size: 1.2em; transition: all 0.2s; }

.control-btn { 
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 8px; 
    padding: 6px 10px; 
    cursor: pointer; 
    color: rgba(255, 255, 255, 0.6); 
    font-size: 1.1em; 
    transition: all 0.3s ease; 
}

.control-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.control-btn.active { 
    border-color: var(--theme-primary); 
    color: #fff; 
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.2), rgba(var(--theme-primary-rgb), 0.4));
    box-shadow: 0 0 10px rgba(var(--theme-primary-rgb), 0.2);
}

.control-btn.active { border-color: var(--theme-primary); color: var(--theme-primary); background-color: rgba(74, 144, 226, 0.1); }

.control-btn.hidden { display: none; }
html.light-mode #file-name-display, html.theme-paper #file-name-display, html.theme-frosted-glass #file-name-display { color: #555; }
.input-controls .control-group { display: flex; align-items: center; gap: 15px; }
.input-controls label { display: flex; align-items: center; gap: 6px; font-size: 0.9em; cursor: pointer; user-select: none; }
#file-preview-container { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; width: min(100%, 760px); max-height: 64px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; margin: 0 auto 8px; padding: 0 4px 4px; box-sizing: border-box; scrollbar-width: thin; }
.file-preview-item { position: relative; display: flex; flex: 0 0 min(280px, 82vw); align-items: center; gap: 8px; min-width: 0; max-width: min(100%, 280px); padding: 7px 30px 7px 8px; border: 1px solid var(--theme-primary); border-radius: 10px; background: var(--input-bg); color: var(--text-color); box-shadow: 0 3px 12px rgba(0,0,0,.12); box-sizing: border-box; }
/* The chip reserves a 30px right gutter for this button, so that is where it
   belongs -- vertically centred inside the chip, not pinned outside its corner.
   Anchoring it outside put a third of it above #file-preview-container, which
   is overflow-y:hidden and therefore clips hit-testing as well as paint: the
   dead strip sat over the filename, so a click that missed selected the text
   instead of removing the file.
   min-width/min-height are explicit because the global 48px touch-target rule
   further up this file applies to every button and beats width/height, which
   silently inflated this 20px badge to a 48px circle overlapping the name. */
.file-preview-item > .file-preview-remove {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    width: 20px; height: 20px; min-width: 20px; min-height: 20px;
    display: flex; align-items: center; justify-content: center;
    padding: 0; border: none; border-radius: 50%;
    background: #ff4444; color: #fff;
    font-weight: bold; font-size: 16px; line-height: 1;
    cursor: pointer; z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.file-preview-item > .file-preview-remove:hover { background: #ff2222; }
.file-preview-item > .file-preview-remove:focus-visible {
    outline: 2px solid var(--theme-primary); outline-offset: 2px;
}
/* A miss should do nothing, not select the filename. */
.file-preview-meta { user-select: none; }
.file-preview-thumbnail, .file-preview-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 7px; border: 1px solid var(--border-color); box-sizing: border-box; }
.file-preview-thumbnail { object-fit: cover; display: block; }
.file-preview-icon { display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--theme-primary) 12%, var(--input-bg)); color: var(--theme-primary); font-size: 16px; }
.file-preview-meta { display: grid; gap: 1px; min-width: 0; line-height: 1.2; }
.file-preview-meta strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.file-preview-meta small { color: var(--secondary-text-color, #8b93a7); font-size: .7rem; }
#file-preview-container img:not(.file-preview-thumbnail) { max-height: 50px; max-width: 100%; border-radius: 6px; border: 1px solid var(--border-color); display: block; margin-top: 5px; }
#file-preview-container pre { max-height: 60px; overflow: hidden; font-size: 0.8em; border: 1px solid var(--border-color); padding: 5px; border-radius: 4px; margin-top: 5px; white-space: pre-wrap; word-break: break-all; color: var(--text-color); background: var(--input-bg); }
.generic-file-preview { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); margin-top: 5px; color: var(--text-color); max-width: 300px; box-sizing: border-box; }
.generic-file-preview i { font-size: 2.5em; color: var(--theme-primary); flex-shrink: 0; }
.generic-file-preview .file-info { display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.generic-file-preview .file-name { font-size: 0.9em; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.generic-file-preview .file-size { font-size: 0.8em; color: #888; }
html.light-mode .generic-file-preview .file-size, html.theme-paper .generic-file-preview .file-size, html.theme-frosted-glass .generic-file-preview .file-size { color: #555; }
.tts-btn { background: none; border: none; color: #aaa; cursor: pointer; font-size: 1.1em; padding: 2px 8px; margin-left: 5px; transition: color 0.2s; }
.tts-btn:hover { color: var(--theme-primary); }
.tts-btn.speaking { color: #e67e22; }
#import-file-input, #chat-file-input { opacity: 0; width: 0; height: 0; position: absolute; z-index: -1; }

/* Settings Modal */
#settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 1; transition: opacity 0.3s ease; }
html.theme-frosted-glass #settings-overlay { background: rgba(0,0,0,0.3); }
#settings-overlay.hidden { opacity: 0; pointer-events: none; }
#theme-confirm-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 10001; }
html.theme-frosted-glass #theme-confirm-overlay { background: rgba(0,0,0,0.3); }
#limit-reached-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; z-index: 10001; }
html.theme-frosted-glass #limit-reached-overlay { background: rgba(0,0,0,0.3); }
#limit-reached-modal { background: var(--settings-modal-bg); color: var(--text-color); padding: 20px 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 90%; max-width: 340px; text-align: center; }
#limit-reached-modal h3 { margin-top: 0; }
#limit-reached-buttons { margin-top: 20px; display: flex; justify-content: space-around; gap: 10px; }
#limit-reached-buttons .action-btn { width: 140px; }
#limit-confirm-yes { background: var(--theme-primary); }
#limit-confirm-yes:hover { background: var(--theme-hover); }
html.light-accent-selected #limit-confirm-yes, html.theme-carbon-fibre #limit-confirm-yes, html.theme-nord #limit-confirm-yes, html.theme-terminal #limit-confirm-yes { color: #111; }
#theme-confirm-modal { background: var(--settings-modal-bg); color: var(--text-color); padding: 20px 25px; border-radius: 8px; border: 1px solid var(--border-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: 90%; max-width: 300px; text-align: center; }
#theme-confirm-modal h3 { margin-top: 0; }
#theme-confirm-buttons { margin-top: 20px; display: flex; justify-content: space-around; gap: 10px; }
#theme-confirm-buttons .action-btn { width: 100px; }
#theme-confirm-yes { background: var(--theme-primary); }
#theme-confirm-yes:hover { background: var(--theme-hover); }
html.light-accent-selected #theme-confirm-yes, html.theme-carbon-fibre #theme-confirm-yes, html.theme-nord #theme-confirm-yes, html.theme-terminal #theme-confirm-yes { color: #111; }
.settings-modal { background: var(--background-color-transparent, rgba(31, 31, 31, 0.8)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 20px; border-radius: 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color-transparent, rgba(255, 255, 255, 0.2)); width: 90%; max-width: 400px; color: var(--text-color); }
.settings-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 15px; }
.settings-header h2 { margin: 0; font-size: 1.2em; }
#close-settings-btn, #close-profile-settings-btn { background: none; border: none; color: var(--text-color); font-size: 2em; cursor: pointer; line-height: 1; padding: 0 5px; }
.color-picker { display: flex; gap: 15px; margin-top: 10px; flex-wrap: wrap; }
.color-swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid var(--text-color); transition: transform 0.2s; }
html.light-mode .color-swatch, html.theme-paper .color-swatch, html.theme-frosted-glass .color-swatch { border-color: #555; }
.color-swatch:hover { transform: scale(1.1); }
.settings-modal .setting-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 15px 0; border-top: 1px solid var(--border-color); margin-top: 15px; }
.settings-content > .setting-row:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }
.settings-modal .setting-row > select { background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px; padding: 5px; margin-top: 5px; }
.font-size-controls button { padding: 5px 10px; margin-left: 5px; cursor: pointer; background: var(--input-bg); color: var(--text-color); border: 1px solid var(--border-color); border-radius: 4px; margin-top: 5px; }
.font-size-controls button.active { background: var(--theme-primary); color: white; border-color: var(--theme-primary); }
html.light-accent-selected .font-size-controls button.active, html.theme-carbon-fibre .font-size-controls button.active, html.theme-nord .font-size-controls button.active, html.theme-terminal .font-size-controls button.active { color: #111; }

/* Profile Settings Modal */
#profile-settings-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 10000; opacity: 1; transition: opacity 0.3s ease; }
#profile-settings-overlay.hidden { opacity: 0; pointer-events: none; }
#profile-settings-modal { max-width: 480px; background: var(--background-color-transparent, rgba(31, 31, 31, 0.8)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); border: 1px solid var(--border-color-transparent, rgba(255, 255, 255, 0.2)); }
.settings-section-header { font-size: 1.1em; font-weight: 600; margin-top: 25px; margin-bottom: 15px; padding-bottom: 5px; border-bottom: 2px solid var(--theme-primary); color: var(--text-color); }
.settings-content .settings-section-header:first-child { margin-top: 5px; }
html.light-mode .settings-section-header, html.theme-paper .settings-section-header { color: #111; }
#profile-settings-modal .settings-content { display: flex; flex-direction: column; gap: 0; }
#profile-settings-modal .setting-row { display: block; padding: 0; margin: 0; border-top: none; }
#profile-settings-modal .form-group { margin-bottom: 0; padding: 15px 0; border-bottom: 1px solid var(--border-color); text-align: left; display: flex; flex-direction: column; }
#profile-settings-modal .form-group:has(+ .settings-section-header) { border-bottom: none; padding-bottom: 0; }
#profile-settings-modal .settings-content > .form-group:last-of-type { border-bottom: none; padding-bottom: 0; }
#profile-settings-modal .form-group label { font-size: 0.9em; font-weight: 500; opacity: 0.9; margin-bottom: 10px; display: block; }
#profile-settings-modal .form-group input { width: 100%; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--input-bg); color: var(--text-color); font-size: 1em; box-sizing: border-box; margin-bottom: 10px; }
#profile-settings-modal .form-group input:last-child { margin-bottom: 0; }
.input-with-button-group input { margin-bottom: 0 !important; }
.profile-avatar-group .profile-avatar-controls { display: flex; align-items: center; gap: 15px; }
#profile-avatar-preview { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: #555; border: 2px solid var(--theme-primary); flex-shrink: 0; }
.profile-avatar-group .sidebar-btn { width: auto; flex-grow: 0; padding: 8px 12px; font-size: 0.9em; }
.security-row { flex-direction: row !important; justify-content: space-between; align-items: center; }
.security-row label { display: none !important; }
.security-row .profile-static-info { flex-grow: 1; padding: 0; margin: 0; display: flex; align-items: center; min-width: 0; }
.security-row .profile-static-info span { font-size: 1em; opacity: 1; font-weight: 500; color: var(--text-color); }
.profile-link-btn { background: none !important; border: none !important; color: var(--theme-primary) !important; box-shadow: none !important; padding: 0 !important; font-size: 0.9em; font-weight: bold; cursor: pointer; flex-shrink: 0; transition: color 0.2s; }
.profile-link-btn:hover { color: var(--theme-hover) !important; transform: none !important; }
.security-row .profile-link-btn { margin-left: 10px; flex-shrink: 0; }
#email-change-form .button-group, #password-change-form .button-group { display: flex; gap: 10px; margin-top: 5px; }
.profile-secondary-btn { background: #6c757d !important; border-color: #6c757d !important; box-shadow: none !important; }
.profile-secondary-btn:hover { background: #5a6268 !important; }
.subscription-group { flex-direction: row !important; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.subscription-group label { display: none !important; }
#subscription-status-section { display: flex; align-items: center; flex-grow: 1; min-width: 0; flex-wrap: nowrap; }
#subscription-status-text { font-weight: normal; opacity: 1; }
#subscription-status-text.premium { background: #c69400; color: #111; padding: 4px 10px; border-radius: 4px; font-size: 0.9em; font-weight: bold; margin-right: 15px; flex-shrink: 0; }
.subscription-group .sidebar-btn { background: var(--input-bg); border: 1px solid var(--border-color); box-shadow: none; padding: 8px 15px; font-size: 0.9em; }
.subscription-group .sidebar-btn:hover { background: var(--ai-message-bg); box-shadow: none; transform: none; }
#cancel-sub-confirm { width: 100%; margin-top: 10px; display: none; }
#cancel-sub-confirm p { color: var(--text-color); }
#cancel-sub-confirm .button-group { display: flex; gap: 10px; }

/* Wallpapers */
#live-wallpaper-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0; transition: opacity 0.3s ease; pointer-events: none; overflow: hidden; }
#wallpaper-fallback { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background: var(--wallpaper-fallback-bg, var(--background-color)); transition: background 0.3s; }
/* The light theme is plain white (owner, 2026-09-25). The site-ambience field
   behind the workspace shows in light mode only when the "Ambient light"
   wallpaper is chosen. Dark, Serenity and LiveLoop fields are untouched. */
html.light-mode:not(.wallpaper-ambient-light) .ambience-host-app { display: none !important; }
.wallpaper-option { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; overflow: hidden; }
.wallpaper-option:not(.hidden) { opacity: 1; pointer-events: auto; }
#live-wallpaper-container .wallpaper-option:not(.hidden) {
    filter: var(--wallpaper-colour-filter, none);
    transition: opacity .5s ease, filter .35s ease;
}
html.wallpaper-monochrome #live-wallpaper-container .wallpaper-option:not(.hidden) {
    filter: grayscale(1) saturate(0) contrast(1.04);
}
html.wallpaper-monochrome #wallpaper-fallback { filter: grayscale(1) saturate(0); }
#live-wallpaper-container::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    background: var(--theme-wallpaper-overlay);
    transition: background .35s ease;
}
.blocks-sm, .blocks-md, .blocks-lg, .ask-ai-sm, .ask-ai-md, .ask-ai-lg { position: absolute; top: 0; left: 0; width: 100%; height: 200%; background-repeat: no-repeat; opacity: 0.3; animation: animStar 50s linear infinite; }
html.theme-stealth .blocks-sm, html.theme-stealth .blocks-md, html.theme-stealth .blocks-lg, html.theme-stealth .ask-ai-sm, html.theme-stealth .ask-ai-md, html.theme-stealth .ask-ai-lg, html.theme-carbon-fibre .blocks-sm, html.theme-carbon-fibre .blocks-md, html.theme-carbon-fibre .blocks-lg, html.theme-carbon-fibre .ask-ai-sm, html.theme-carbon-fibre .ask-ai-md, html.theme-carbon-fibre .ask-ai-lg { opacity: 0.1; }
#ambient-gradient-wallpaper { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: gradientBG 15s ease infinite; z-index: -2; }
@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.rain-drop { position: absolute; bottom: 100%; width: 1px; height: 50px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.25)); animation: rain-fall 1s linear infinite; }
html.light-mode .rain-drop, html.theme-frosted-glass .rain-drop { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); }
html.theme-stealth .rain-drop, html.theme-carbon-fibre .rain-drop { background: linear-gradient(to bottom, rgba(100,100,100,0), rgba(100,100,100,0.15)); }
@keyframes rain-fall { 0% { transform: translateY(0); } 100% { transform: translateY(110vh); } }
#rain-wallpaper .rain-drop:nth-child(1) { left: 10%; animation-delay: 0.5s; animation-duration: 0.8s; height: 40px; }
#rain-wallpaper .rain-drop:nth-child(2) { left: 20%; animation-delay: 0.2s; animation-duration: 1.1s; height: 60px; }
#rain-wallpaper .rain-drop:nth-child(3) { left: 30%; animation-delay: 0.8s; animation-duration: 0.7s; height: 30px; }
#rain-wallpaper .rain-drop:nth-child(4) { left: 40%; animation-delay: 0.1s; animation-duration: 1.3s; height: 55px; }
#rain-wallpaper .rain-drop:nth-child(5) { left: 50%; animation-delay: 0.6s; animation-duration: 0.9s; height: 45px; }
#rain-wallpaper .rain-drop:nth-child(6) { left: 60%; animation-delay: 0.3s; animation-duration: 1.2s; height: 50px; }
#rain-wallpaper .rain-drop:nth-child(7) { left: 70%; animation-delay: 0.9s; animation-duration: 0.6s; height: 35px; }
#rain-wallpaper .rain-drop:nth-child(8) { left: 80%; animation-delay: 0.4s; animation-duration: 1.0s; height: 65px; }
#rain-wallpaper .rain-drop:nth-child(9) { left: 90%; animation-delay: 0.7s; animation-duration: 0.8s; height: 40px; }
#rain-wallpaper .rain-drop:nth-child(10){ left: 25%; animation-delay: 1.1s; animation-duration: 0.9s; height: 50px; }
#rain-wallpaper .rain-drop:nth-child(11){ left: 55%; animation-delay: 1.3s; animation-duration: 1.1s; height: 40px; }
#rain-wallpaper .rain-drop:nth-child(12){ left: 85%; animation-delay: 1.0s; animation-duration: 0.7s; height: 60px; }
#particle-canvas { width: 100%; height: 100%; display: block; }
#matrix-canvas { display: block; width: 100%; height: 100%; background-color: #0d0d0d; }
html.light-mode #matrix-canvas, html.theme-paper #matrix-canvas, html.theme-frosted-glass #matrix-canvas { background-color: #f0f0f0; }
html.theme-stealth #matrix-canvas, html.theme-carbon-fibre #matrix-canvas { background-color: #000; }
html.light-mode .blocks-sm, html.light-mode .blocks-md, html.light-mode .blocks-lg, html.theme-frosted-glass .blocks-sm, html.theme-frosted-glass .blocks-md, html.theme-frosted-glass .blocks-lg { background-image: url('https://beeimg.com/images/p77662494522.jpg'), url('https://beeimg.com/images/p77662494522.jpg'), url('https://beeimg.com/images/p77662494522.jpg'); }
.blocks-sm, .blocks-md, .blocks-lg { background-image: url('https://beeimg.com/images/d64744471554.jpg'), url('https://beeimg.com/images/d64744471554.jpg'), url('https://beeimg.com/images/d64744471554.jpg'); }
.blocks-sm { background-size: 100px, 80px, 120px; background-position: 10% 80%, 50% 10%, 80% 90%; animation-duration: 150s; }
.blocks-md { background-size: 180px, 150px; background-position: 25% 40%, 70% 5%; animation-duration: 100s; }
.blocks-lg { background-size: 250px; background-position: 45% 70%; animation-duration: 50s; }
html.light-mode .ask-ai-sm, html.light-mode .ask-ai-md, html.light-mode .ask-ai-lg, html.theme-frosted-glass .ask-ai-sm, html.theme-frosted-glass .ask-ai-md, html.theme-frosted-glass .ask-ai-lg { background-image: url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'); }
.ask-ai-sm, .ask-ai-md, .ask-ai-lg { background-image: url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'), url('askai.png'); }
.ask-ai-sm { background-size: 40px, 30px, 45px, 25px, 50px, 35px; background-position: 10% 80%, 30% 10%, 50% 50%, 75% 20%, 90% 95%, 5% 30%; animation-duration: 150s; }
.ask-ai-md { background-size: 80px, 60px, 75px, 90px; background-position: 5% 90%, 25% 40%, 60% 5%, 80% 60%; animation-duration: 100s; }
.ask-ai-lg { background-size: 120px, 150px, 100px; background-position: 15% 5%, 45% 80%, 70% 30%; animation-duration: 50s; }
@keyframes animStar { from { transform: translateY(0); } to { transform: translateY(-50%); } }
#circuit-wallpaper { background-color: #001a00; }
.circuit-bg-1, .circuit-bg-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://beeimg.com/images/t47916958852.jpg'); background-repeat: repeat; background-size: 300px 300px; opacity: 0.3; }
.circuit-bg-1 { animation: moveCircuit 30s linear infinite; }
.circuit-bg-2 { opacity: 0.2; animation: moveCircuitReverse 60s linear infinite; }
@keyframes moveCircuit { from { background-position: 0 0; } to { background-position: 512px 512px; } }
@keyframes moveCircuitReverse { from { background-position: 0 0; } to { background-position: -512px 512px; } }
html.light-mode #circuit-wallpaper, html.theme-paper #circuit-wallpaper, html.theme-frosted-glass #circuit-wallpaper { background-color: #e6f5e6; }
html.light-mode .circuit-bg-1, html.light-mode .circuit-bg-2, html.theme-paper .circuit-bg-1, html.theme-paper .circuit-bg-2, html.theme-frosted-glass .circuit-bg-1, html.theme-frosted-glass .circuit-bg-2 { filter: invert(1); opacity: 0.15; }
html.light-mode .circuit-bg-2, html.theme-paper .circuit-bg-2, html.theme-frosted-glass .circuit-bg-2 { opacity: 0.1; }
#stars-canvas, #waves-canvas { width: 100%; height: 100%; display: block; }
#polygons-canvas, #data-stream-canvas { width: 100%; height: 100%; display: block; }
#fireflies-wallpaper { overflow: hidden; }
.firefly { position: absolute; width: 4px; height: 4px; background: #ffff99; border-radius: 50%; box-shadow: 0 0 8px 2px #ffff99; opacity: 0; animation: firefly-move linear infinite, firefly-blink ease-in-out infinite alternate; pointer-events: none; }
@keyframes firefly-move { 0% { transform: translate(0, 0); } 100% { transform: translate(0, 0); } }
@keyframes firefly-blink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
#data-stream-canvas { width: 100%; height: 100%; display: block; }
#network-nodes-canvas { width: 100%; height: 100%; display: block; }
#hud-wallpaper { overflow: hidden; border: 1px solid rgba(0, 255, 0, 0.2); box-sizing: border-box;}
.hud-scanline { position: absolute; left: 0; width: 100%; height: 2px; background: rgba(0, 255, 0, 0.3); box-shadow: 0 0 5px rgba(0, 255, 0, 0.5); animation: hud-scan 5s linear infinite; }
.hud-corner { position: absolute; width: 20px; height: 20px; border: 2px solid rgba(0, 255, 0, 0.5); }
.hud-corner.top-left { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-corner.top-right { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hud-corner.bottom-left { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.hud-corner.bottom-right { bottom: 10px; right: 10px; border-left: none; border-top: none; }
@keyframes hud-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
html:not(.theme-terminal):not(.theme-accent-terminal) #hud-wallpaper { border-color: rgba(74, 144, 226, 0.2); }
html:not(.theme-terminal):not(.theme-accent-terminal) .hud-scanline { background: rgba(74, 144, 226, 0.3); box-shadow: 0 0 5px rgba(74, 144, 226, 0.5); }
html:not(.theme-terminal):not(.theme-accent-terminal) .hud-corner { border-color: rgba(74, 144, 226, 0.5); }
html.light-mode #hud-wallpaper { border-color: rgba(0, 0, 0, 0.2); }
html.light-mode .hud-scanline { background: rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
html.light-mode .hud-corner { border-color: rgba(0, 0, 0, 0.5); }
#subtle-noise-canvas { width: 100%; height: 100%; display: block; }
#gentle-pulse-wallpaper { animation: gentle-pulse-anim 8s ease-in-out infinite alternate; }
@keyframes gentle-pulse-anim { from { background-color: var(--background-color); } to { background-color: var(--ai-message-bg); } }

.wallpaper-option video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* Model Selector */
.model-selector-container { position: relative; display: inline-block; z-index: 100; }

#model-toggle-button {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.16), rgba(255,255,255,0.08)) !important;
    color: var(--text-color);
    border: 1px solid rgba(var(--theme-primary-rgb), 0.42) !important;
    padding: 7px 13px;
    border-radius: 999px !important;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    min-width: 0;
    justify-content: flex-start;
    gap: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 18px rgba(0,0,0,0.14);
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
}
#model-toggle-button:hover {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.22), rgba(255,255,255,0.12)) !important;
    transform: translateY(-1px);
}
#selected-model-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; }

/* Dropdown Container */
#model-popover {
    position: absolute; top: calc(100% + 5px); left: 0;
    width: 600px !important; /* Mega Menu Width */
    max-width: 90vw !important;
    background: var(--sidebar-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    z-index: 1001;
    opacity: 1; 
    transform: translateY(0); 
    transition: opacity 0.1s ease-out, transform 0.1s ease-out;
}
#model-popover[hidden] { opacity: 0; transform: translateY(-5px); pointer-events: none; }
/* Grid Layout */
.popover-content { padding: 20px; }
.model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

/* Headers */
.column-header {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
}

/* Model List Items */
.model-list { list-style: none; padding: 0; margin: 0; }
.model-list li {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
    opacity: 1 !important;
}
.model-list li:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    transform: translateY(-1px);
}
.model-list li.active {
    background: var(--theme-primary) !important;
    color: #fff !important;
    border-color: var(--theme-primary) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* Persona Footer */
.persona-footer {
    background: rgba(0,0,0,0.2);
    padding: 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.footer-label { font-size: 0.65rem; color: #666; font-weight: bold; letter-spacing: 1px; }
.persona-pills { display: flex; gap: 8px; width: 100%; justify-content: center; }

.persona-pill {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    list-style: none;
}
.persona-pill:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.persona-pill.active {
    background: #eee;
    color: #111;
    font-weight: bold;
}
/* --- LIGHT MODE COLOUR FIX (Revised) --- */
html.light-mode #model-popover {
    background-color: #f5f5f7 !important; /* Light Grey Menu BG */
    border-color: #d1d1d1 !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
}

/* 1. Force Card Text Color to Black in Light Mode */
html.light-mode .model-list li {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #1c1c1c !important; /* CRITICAL: Forces text black */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 2. Force Icons/Spans inside cards to be Black too */
html.light-mode .model-list li span,
html.light-mode .model-list li i {
    color: #1c1c1c !important;
}

/* 3. Hover State */
html.light-mode .model-list li:hover {
    background-color: #eeeeee !important;
    border-color: #bbb !important;
}

/* 4. ACTIVE SELECTED ITEM (Blue Background, White Text) */
html.light-mode .model-list li.active {
    background-color: #2563eb !important; /* Blue */
    border-color: #2563eb !important;
    color: #ffffff !important; /* White Text */
}
/* Ensure text inside the active button stays white */
html.light-mode .model-list li.active span,
html.light-mode .model-list li.active i {
    color: #ffffff !important;
}

/* 5. Headers */
html.light-mode .column-header { 
    color: #555 !important; 
    text-shadow: none !important;
}

/* 6. Footer Area */
html.light-mode .persona-footer { 
    background-color: #e5e5e5 !important; 
    border-top: 1px solid #ccc !important; 
}
html.light-mode .persona-pill { 
    background-color: #ffffff !important; 
    color: #333 !important; 
    border: 1px solid #ccc !important;
}
html.light-mode .persona-pill.active { 
    background-color: #333 !important; 
    color: #fff !important; 
    border-color: #333 !important;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    #model-popover { width: 300px !important; }
    .model-grid { grid-template-columns: 1fr; gap: 10px; }
    .persona-pills { flex-wrap: wrap; }
}
html.theme-frosted-glass .popover-label { color: #333; }
.model-list, .persona-list { list-style: none; padding: 0; margin: 0; }
.model-list li, .persona-list li { padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; transition: background-color 0.2s; }
.model-list li:hover, .persona-list li:hover { background: var(--input-bg); }
.model-list li.active, .persona-list li.active { background: var(--theme-primary); color: white; font-weight: 500; }
html.light-accent-selected .model-list li.active, html.light-accent-selected .persona-list li.active, html.theme-carbon-fibre .model-list li.active, html.theme-carbon-fibre .persona-list li.active, html.theme-nord .model-list li.active, html.theme-nord .persona-list li.active, html.theme-terminal .model-list li.active, html.theme-terminal .persona-list li.active { color: #111; }
html.theme-stealth .model-list li.active, html.theme-stealth .persona-list li.active { color: #ddd; }

/* Transparent Message Box */
@supports (backdrop-filter: blur(5px)) { body.transparent-mode .message { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); } }
body.transparent-mode .message { border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
body.transparent-mode .ai .message, body.transparent-mode .assistant .message { background: rgba(255, 255, 255, 0.3); }
body.transparent-mode.light-mode .ai .message, body.transparent-mode.light-mode .assistant .message, body.transparent-mode.theme-paper .ai .message, body.transparent-mode.theme-paper .assistant .message, body.transparent-mode.theme-frosted-glass .ai .message, body.transparent-mode.theme-frosted-glass .assistant .message { color: #111; }
body.transparent-mode .user .message { background: rgba(var(--bubble-accent-color-rgb), 0.55); color: var(--user-text-color-final, #fff); }
body.transparent-mode.light-accent-selected .user .message, body.transparent-mode.theme-carbon-fibre .user .message, body.transparent-mode.theme-nord .user .message, body.transparent-mode.theme-terminal .user .message, body.transparent-mode.light-mode .user .message, body.transparent-mode.theme-paper .user .message, body.transparent-mode.theme-frosted-glass .user .message { color: #111; }
body.transparent-mode.theme-frosted-glass .ai .message, body.transparent-mode.theme-frosted-glass .assistant .message { background: rgba(255, 255, 255, 0.7); border-color: rgba(0,0,0,0.1); }
body.transparent-mode.theme-frosted-glass .user .message { background: rgba(var(--bubble-accent-color-rgb), 0.6); border-color: transparent; color: var(--user-text-color-final, #fff); }
body.transparent-mode.theme-stealth .ai .message, body.transparent-mode.theme-stealth .assistant .message { background: rgba(50, 50, 50, 0.4); border-color: rgba(255, 255, 255, 0.1); }
body.transparent-mode.theme-stealth .user .message { background: rgba(70, 70, 70, 0.5); color: #ccc; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 40%; }

/* Toast Notification */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 10000; display: flex; flex-direction: column; align-items: flex-end; }
.toast { background: #333; color: #fff; padding: 15px 20px; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: space-between; opacity: 0; transform: translateX(100%); transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); min-width: 250px; }
.toast.show { opacity: 1; transform: translateX(0); }
.toast.fade-out { opacity: 0; transform: translateX(100%); }
.toast-message { margin-right: 15px; }
.toast.toast--success { background: #28a745; color: white; }
.toast.toast--error { background: #dc3545; color: white; }
.toast.toast--info { background: #17a2b8; color: white; }
.toast-close-btn { background: none; border: none; color: inherit; font-size: 24px; font-weight: bold; line-height: 1; opacity: 0.7; cursor: pointer; padding: 0 5px; }
.toast-close-btn:hover { opacity: 1; }

/* Settings Tabs */
.settings-tabs { display: flex; border-bottom: 1px solid var(--border-color); background-color: var(--background-color-secondary); padding: 0 24px; gap: 16px; flex-shrink: 0; }
.tab-btn { padding: 12px 16px; font-size: 1em; font-weight: 500; color: var(--text-color-secondary); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.2s ease-in-out; }
.tab-btn:hover { color: var(--text-color); }
.tab-btn.active { color: var(--theme-primary); border-bottom-color: var(--theme-primary); }
#universal-settings-modal .settings-content-container { max-height: 60vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #D32F2F #2a2a2e; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar { width: 12px; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar-track { background: #2a2a2e; border-radius: 6px; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar-thumb { background-color: #D32F2F; border-radius: 6px; border: 2px solid #2a2a2e; }
#universal-settings-modal .settings-content-container::-webkit-scrollbar-thumb:hover { background-color: #E53935; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel .settings-content { padding: 16px 24px 24px 24px; }
.input-wrapper { display: flex; align-items: flex-end; width: 100%; gap: 10px; position: relative; }
.delete-account-group p { color: var(--text-color); opacity: 0.8; line-height: 1.5; }
.sidebar-btn.delete-btn, .action-btn.delete-btn { background-color: #a04040 !important; border-color: #a04040 !important; box-shadow: none !important; color: #fff !important; }
.sidebar-btn.delete-btn:hover, .action-btn.delete-btn:hover { background-color: #dc3545 !important; transform: translateY(-2px); }
#delete-error-message { color: #ffc0cb; background: rgba(255, 0, 0, 0.2); border: 1px solid #dc3545; padding: 10px; border-radius: 6px; margin-bottom: 15px; }

/* Cookie Consent */
/* ── COOKIE BANNER — glossy black premium pill ── */
#cookie-consent-banner {
  position: fixed; bottom: -120px; left: 0; right: 0; width: 100%;
  z-index: 10001; padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box; transition: bottom 0.45s cubic-bezier(0.16,1,0.3,1);
  display: flex; justify-content: center; pointer-events: none;
}
#cookie-consent-banner:not(.cookie-banner-hidden) { bottom: 0; pointer-events: auto; }
.cookie-content {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(145deg, rgba(30,30,32,0.96), rgba(12,12,14,0.98));
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-top-color: rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 12px 14px 12px 18px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.07) inset;
  max-width: 680px; width: 100%;
  color: rgba(255,255,255,0.80);
}
.cookie-content p { margin: 0; flex-grow: 1; font-size: 0.82rem; line-height: 1.45; color: rgba(255,255,255,0.72); }
.cookie-content a { color: rgba(255,255,255,0.95); text-decoration: underline; font-weight: 600; }
.cookie-content a:hover { color: #fff; }
.cookie-content #cookie-accept-btn {
  flex-shrink: 0; margin: 0; white-space: nowrap;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff !important;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 7px 18px; border-radius: 999px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.cookie-content #cookie-accept-btn:hover { background: rgba(255,255,255,0.20); border-color: rgba(255,255,255,0.38); }
.temporary-chat-mode #sidebar-greeting { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.temporary-chat-mode #sidebar-greeting::after { content: "Temporary"; font-size: 0.7em; font-weight: 600; color: #ffc107; background-color: rgba(255, 193, 7, 0.1); border: 1px solid rgba(255, 193, 7, 0.3); border-radius: 4px; padding: 2px 6px; line-height: 1; margin: 0; }
.sidebar-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.sidebar-btn-group .sidebar-btn, .sidebar-btn-group label.sidebar-btn { width: 100%; margin: 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; }
.sidebar-btn-group .sidebar-btn i, .sidebar-btn-group label.sidebar-btn i { margin: 0; font-size: 1em; }
pre[class*="language-"] { background: none; color: inherit; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 8px; }
pre[class*="language-"] > code[class*="language-"] { font-family: 'Fira Code', monospace; font-size: 0.9em; color: inherit; background: none; padding: 0; margin: 0; }
.code-block-wrapper { position: relative; }
.code-block-wrapper .copy-btn { position: absolute; top: 8px; right: 8px; z-index: 10; padding: 5px 10px; font-size: 0.8em; background-color: rgba(255, 255, 255, 0.15); color: #fff; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; cursor: pointer; opacity: 0.3; transition: opacity 0.2s; }
.code-block-wrapper:hover .copy-btn { opacity: 1; }
.light-mode .code-block-wrapper .copy-btn { background-color: rgba(0, 0, 0, 0.1); color: #333; border-color: rgba(0, 0, 0, 0.2); }
.control-btn-style-as-label { display: flex; align-items: center; gap: 6px; font-size: 0.9em; cursor: pointer; user-select: none; background: none; border: none; color: var(--text-color); padding: 0; opacity: 0.8; transition: opacity 0.2s; }
.control-btn-style-as-label:hover { opacity: 1; }
.control-btn-style-as-label i { font-size: 1.1em; }
.file-error-message { color: #ff5c5c; background: rgba(255, 92, 92, 0.1); border: 1px solid #ff5c5c; padding: 10px; border-radius: 6px; font-size: 0.9em; font-weight: 500; width: 100%; max-width: 800px; margin: 0 auto 5px auto; box-sizing: border-box; display: none; }
.social-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 10px 16px; font-size: 1em; font-weight: 500; border-radius: 6px; cursor: pointer; transition: background-color 0.2s, box-shadow 0.2s; background-color: #ffffff; color: #333; border: 1px solid #DADCE0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.social-btn:hover { background-color: #F8F9FA; border-color: #C6C6C6; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.social-btn img { width: 20px; height: 20px; }
.divider { display: flex; align-items: center; text-align: center; color: #888; margin: 20px 0; font-size: 0.9em; text-transform: uppercase; }
html.light-mode .divider { color: #555; }
.divider::before, .divider::after { content: ''; flex: 1; border-bottom: 1px solid var(--border-color); }
.divider span { padding: 0 10px; }
#chat-limit-counter { width: 100%; max-width: 960px; margin: 0 auto 5px auto; padding: 0 10px; box-sizing: border-box; text-align: center; font-size: 0.8em; color: #888; }
html.light-mode #chat-limit-counter, html.theme-paper #chat-limit-counter, html.theme-frosted-glass #chat-limit-counter { color: #555; }
#theme-confirm-yes { background-color: var(--theme-primary); color: #FFFFFF; border: 2px solid var(--theme-primary); font-weight: bold; transition: all 0.2s ease; }
#theme-confirm-yes:hover { background-color: var(--theme-hover); border-color: var(--theme-hover); box-shadow: 0 0 10px var(--theme-primary); transform: translateY(-1px); }
#theme-confirm-no { background-color: #6c757d !important; border: 2px solid #6c757d !important; color: #FFFFFF; transition: all 0.2s ease; }
#theme-confirm-no:hover { background-color: #5a6268 !important; border-color: #5a6268 !important; }
#theme-confirm-yes.high-contrast-apply { background-color: #1c1c1c; color: #FFFFFF !important; border-color: #1c1c1c; }
#theme-confirm-yes.high-contrast-apply:hover { background-color: #333; border-color: #333; color: #FFFFFF !important; box-shadow: 0 0 10px rgba(0,0,0,0.3); }

/* Opt-in theme soundtrack controls. */
#theme-mood-settings { flex-wrap: wrap; gap: 12px; }
#theme-mood-settings > :first-child { flex: 1 1 190px; }
.theme-mood-volume { display:flex; align-items:center; gap:8px; flex:1 1 100%; padding-left:52px; color:var(--text-secondary, #a1a1aa); font-size:.84rem; }
.theme-mood-volume input { flex:1; accent-color:var(--theme-primary); }
.theme-mood-volume output { min-width:34px; color:var(--text-color); font-variant-numeric:tabular-nums; }
.theme-mood-overlay { position:fixed; inset:0; z-index:10003; display:grid; place-items:center; padding:20px; background:transparent; }
.theme-mood-overlay.hidden { display:none; }
.theme-mood-modal { width:min(440px, 100%); box-sizing:border-box; padding:26px; border:1px solid var(--border-color, rgba(255,255,255,.16)); border-radius:22px; background:var(--settings-modal-bg, #17171c); color:var(--text-color,#fff); box-shadow:0 22px 60px rgba(0,0,0,.45); }
.theme-mood-icon { width:42px; height:42px; display:grid; place-items:center; margin-bottom:13px; border-radius:13px; color:#fff; background:var(--theme-primary); }
.theme-mood-modal h3 { margin:0 0 8px; font-size:1.2rem; }
.theme-mood-modal p { margin:0; color:var(--text-secondary,#a1a1aa); line-height:1.5; }
.theme-mood-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.theme-mood-actions .action-btn { min-width:130px; }
#theme-mood-without { color:var(--text-color,#fff); background:transparent; border:1px solid var(--border-color, rgba(255,255,255,.2)); }
#theme-mood-with { color:#fff; background:var(--theme-primary); border-color:var(--theme-primary); }
@media (max-width: 520px) { .theme-mood-volume { padding-left:0; } .theme-mood-actions { flex-direction:column-reverse; } .theme-mood-actions .action-btn { width:100%; } }
body { font-family: 'Inter', sans-serif; }
.message { font-family: var(--chat-font-family, 'Inter', sans-serif); }
body.font-style-serif .message { --chat-font-family: 'Merriweather', serif; }
body.font-style-mono .message { --chat-font-family: 'Fira Code', monospace; }
.message pre, .message code { font-family: 'Fira Code', monospace !important; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal { background-color: #ffffff; color: #1c1c1c; border: 1px solid #e0e0e0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-header, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-content h3, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-section-header, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .form-group[style*="border-bottom"] { color: #1c1c1c; border-bottom-color: #eeeeee; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .setting-row span, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .form-group label, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .profile-static-info span, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal p { color: #333333; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .settings-tabs { border-bottom-color: #eeeeee; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .tab-btn { color: #555555; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .tab-btn.active { color: #007AFF; border-bottom-color: #007AFF; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal select, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal input[type="text"], :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal input[type="password"], :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal input[type="email"], :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal textarea { background-color: #f4f4f4; color: #1c1c1c; border: 1px solid #cccccc; border-radius: 4px; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .sidebar-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .action-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .profile-link-btn { background-color: #f0f0f0; color: #1c1c1c; border: 1px solid #cccccc; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .sidebar-btn:hover, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .action-btn:hover, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .profile-link-btn:hover { background-color: #e5e5e5; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal .delete-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal #show-delete-confirm-btn, :is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal #confirm-delete-account-btn { background-color: #dc3545; color: #ffffff; border-color: #dc3545; }
:is(html.theme-paper, html.theme-frosted-glass, html.theme-default, html.light-mode) .settings-modal #set-default-visuals-btn { background-color: #333; color: #fff; border-color: #333; }
#memory-shortcut-btn { display: flex; align-items: center; gap: 8px; font-size: 0.9em; color: #ccc; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; user-select: none; border-radius: 6px; padding: 4px 6px; background: none; border: none; }
#memory-shortcut-btn:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.05); }
.memory-status-light { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background-color: #6b7280; transition: all 0.3s ease; box-shadow: inset 0 1px 2px rgba(0,0,0,0.3); }
#memory-shortcut-btn.memory-on .memory-status-light { background-color: #39FF14; border-color: #39FF14; box-shadow: 0 0 8px #39FF14; }
.action-button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 100px; flex-shrink: 0; }
.action-button-grid .action-btn { padding: 12px; display: flex; justify-content: center; align-items: center; gap: 0; font-weight: 700; }
.message .download-link-button { display: inline-block; padding: 10px 15px; margin-top: 10px; margin-bottom: 10px; background: var(--theme-primary); color: var(--user-text-color-final, #fff); text-decoration: none; border-radius: 6px; font-weight: bold; transition: background 0.2s, transform 0.2s; cursor: pointer; }
.message .download-link-button:hover { background: var(--theme-hover); transform: translateY(-1px); }
html.light-accent-selected .message .download-link-button, html.theme-carbon-fibre .message .download-link-button, html.theme-nord .message .download-link-button, html.theme-terminal .message .download-link-button, html.light-mode .message .download-link-button, html.theme-paper .message .download-link-button, html.theme-frosted-glass .message .download-link-button { color: #111; }
#universal-settings-modal, #profile-settings-modal { width: 95%; max-width: 500px; max-height: 85vh; display: flex; flex-direction: column; padding: 0; overflow: hidden; background: var(--settings-modal-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.settings-header { padding: 20px 25px; margin: 0; background: rgba(0,0,0,0.1); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.settings-content-container { padding: 0; flex-grow: 1; overflow-y: auto; }
.settings-content { padding: 25px; display: flex; flex-direction: column; gap: 2px; }
.settings-section-header { font-size: 0.85em; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--theme-primary); margin-top: 30px; margin-bottom: 15px; opacity: 0.9; }
.settings-section-header:first-child { margin-top: 0; }
.form-group { margin-bottom: 20px; text-align: left; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.95em; color: var(--text-color); opacity: 0.9; }
.form-group p.description { font-size: 0.85em; opacity: 0.7; margin-top: -5px; margin-bottom: 10px; line-height: 1.4; }
.settings-modal input[type="text"], .settings-modal input[type="email"], .settings-modal input[type="password"], .settings-modal textarea, .settings-modal select { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--input-bg); color: var(--text-color); font-size: 1em; font-family: var(--font-main); transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s; box-sizing: border-box; }
.settings-modal input:focus, .settings-modal textarea:focus, .settings-modal select:focus { outline: none; border-color: var(--theme-primary); box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.2); }
.settings-modal textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.settings-modal .sidebar-btn, .settings-modal .action-btn { padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 0.95em; border: none; cursor: pointer; transition: all 0.2s ease; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.settings-modal button.primary-action { background-color: var(--theme-primary); color: #fff !important; }
.settings-modal button.primary-action:hover { filter: brightness(1.1); transform: translateY(-1px); }
.settings-modal button.secondary-action { background-color: transparent; border: 1px solid var(--border-color); color: var(--text-color); }
.settings-modal button.secondary-action:hover { background-color: var(--input-bg); border-color: var(--text-color); }
.settings-modal button.destructive-action { background-color: rgba(220, 53, 69, 0.1); color: #dc3545 !important; border: 1px solid #dc3545; }
.settings-modal button.destructive-action:hover { background-color: #dc3545; color: #fff !important; }
.profile-avatar-group .profile-avatar-controls { display: flex; align-items: center; gap: 20px; background: var(--input-bg); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
#profile-avatar-preview { width: 70px; height: 70px; border-radius: 50%; object-fit: cover; border: 3px solid var(--theme-primary); box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.input-with-button-group { display: flex; gap: 10px; }
.input-with-button-group input { flex-grow: 1; }
.security-row { display: flex; align-items: center; justify-content: space-between; padding: 15px; background: var(--input-bg); border-radius: 8px; border: 1px solid var(--border-color); }
.security-row label { margin: 0; font-weight: normal; }
.profile-static-info { font-weight: bold; flex-grow: 1; text-align: right; margin-right: 20px; opacity: 0.8; }
.profile-link-btn { background: none; border: none; color: var(--theme-primary); font-weight: 600; cursor: pointer; padding: 5px 10px; }
.profile-link-btn:hover { text-decoration: underline; }
#email-change-form, #password-change-form, #delete-account-confirm-form { background: var(--background-color); padding: 20px; border-radius: 10px; margin-top: 15px; border: 1px solid var(--border-color); animation: slideDown 0.3s ease-out; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal { background: rgba(255, 255, 255, 0.85) !important; border-color: #e0e0e0 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(h2, h3, label, p, span, div, select) { color: #1c1c1c !important; }
.settings-modal, .settings-modal h2, .settings-modal h3, .settings-modal h4, .settings-modal p, .settings-modal label, .settings-modal span, .settings-modal div { color: #ffffff; }
.settings-modal input[type="text"], .settings-modal input[type="email"], .settings-modal input[type="password"], .settings-modal textarea, .settings-modal select { background-color: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }
.settings-modal .secondary-action { color: #e0e0e0; border-color: #555; }
html:not(.light-mode).theme-terminal .settings-modal :is(h2, h3, h4, p, label, span, div, select, input, textarea) { color: var(--theme-primary-terminal) !important; }
html:not(.light-mode).theme-synthwave .settings-modal :is(h2, h3, h4, p, label, span, div, select, input, textarea) { color: #E0B0FF !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid #d1d1d1 !important; box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(h1, h2, h3, h4, p, label, span, div, strong, li) { color: #000000 !important; text-shadow: none !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(input, textarea, select) { background-color: #ffffff !important; color: #000000 !important; border: 1px solid #999 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal :is(input, textarea, select):focus { border-color: var(--theme-primary) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.1) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .secondary-action { background-color: #f0f0f0 !important; color: #000000 !important; border: 1px solid #ccc !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .secondary-action:hover { background-color: #e0e0e0 !important; border-color: #999 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-tabs { border-bottom-color: #ccc !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn { color: #666 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn.active { color: #000 !important; font-weight: 700 !important; border-bottom-color: var(--theme-primary) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .primary-action, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal .destructive-action { color: #ffffff !important; }
.watermark { grid-row: 3; grid-column: 1; align-self: end; justify-self: end; margin-bottom: 10px; margin-right: 20px; z-index: 5; pointer-events: none; font-family: var(--font-main); color: var(--text-color); font-size: 0.85em; opacity: 0.4; font-weight: bold; padding: 5px; transition: color 0.3s, opacity 0.3s; }
.watermark:hover { opacity: 0.8; color: var(--theme-primary); }
.setting-section { padding: 15px 0; display: flex; flex-direction: column; gap: 10px; }
.divider { border: 0; border-top: 1px solid var(--border-color); margin: 5px 0; }
.section-label { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.section-desc { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 10px; margin-top: -5px; }
.avatar-section { align-items: center; text-align: center; }
.avatar-wrapper img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg-input); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
.avatar-controls { margin-top: 15px; display: flex; gap: 15px; justify-content: center; }
.input-row { display: flex; gap: 10px; }
input, textarea { width: 100%; background-color: var(--bg-input); border: 1px solid var(--border-color); color: #fff; padding: 10px 12px; border-radius: 8px; font-size: 0.95rem; outline: none; font-family: inherit; }
input:focus, textarea:focus { border-color: var(--primary-color); }
.textarea-group { margin-bottom: 15px; }
.textarea-group label { display: block; font-size: 0.85rem; margin-bottom: 5px; color: var(--text-muted); }
.info-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-input); padding: 12px 15px; border-radius: 8px; }
.info-text { display: flex; flex-direction: column; }
.info-text .label { font-size: 0.75rem; color: var(--text-muted); }
.info-text .value { font-size: 1rem; color: #fff; }
.btn { padding: 8px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: #C9A84C; color: #000; }
.btn-primary:hover { background: #E8C97A; }
.btn-secondary { background: #4b5563; color: white; }
.btn-outline { background: transparent; border: 1px solid #555; color: white; }
.btn-text { background: transparent; color: var(--text-muted); }
.btn-text:hover { color: white; }
.btn-danger { background: var(--danger-color); color: white; }
.btn-danger-outline { background: transparent; border: 1px solid var(--danger-color); color: var(--danger-color); width: 100%; padding: 10px; }
.btn-premium { background: linear-gradient(135deg, #C9A84C, #E8C97A); color: #000; border: none; box-shadow: 0 4px 12px rgba(201,168,76,0.4); }
.text-red { color: var(--danger-color) !important; }
.full-width { width: 100%; }
.hidden-form { display: none; background: rgba(0,0,0,0.2); padding: 15px; border-radius: 8px; margin-top: 10px; animation: slideDown 0.3s ease; border: 1px solid var(--border-color); }
.hidden-form input { margin-bottom: 10px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 5px; }
.error-text { color: var(--danger-color); font-size: 0.85rem; margin-top: 10px; text-align: center; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.setting-section { padding: 15px 0; display: flex; flex-direction: column; gap: 12px; }
.divider { border: 0; border-top: 1px solid #3f3f3f; margin: 10px 0; }
.section-label { font-size: 0.85rem; font-weight: 700; color: #a1a1a1; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; }
.section-desc { font-size: 0.9rem; color: #cccccc; margin-bottom: 10px; margin-top: -5px; }
.avatar-section { align-items: center; text-align: center; background: rgba(255, 255, 255, 0.03); padding: 20px; border-radius: 12px; }
.avatar-wrapper img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #2d2d2d; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
.avatar-controls { margin-top: 15px; display: flex; gap: 15px; justify-content: center; }
.input-row { display: flex; gap: 10px; }
#tab-panel-profile input, #tab-panel-profile textarea { width: 100%; background-color: #222222 !important; border: 1px solid #444444 !important; color: #ffffff !important; padding: 12px 15px; border-radius: 8px; font-size: 1rem; outline: none; font-family: inherit; }
#tab-panel-profile input:focus, #tab-panel-profile textarea:focus { border-color: #3b82f6 !important; background-color: #1a1a1a !important; }
#tab-panel-profile input::placeholder, #tab-panel-profile textarea::placeholder { color: #777777 !important; opacity: 1; }
.textarea-group { margin-bottom: 15px; }
.textarea-group label { display: block; font-size: 0.9rem; margin-bottom: 8px; color: #cccccc; }
.info-row { display: flex; justify-content: space-between; align-items: center; background: #2a2a2a; padding: 15px; border-radius: 8px; border: 1px solid #3a3a3a; }
.info-text { display: flex; flex-direction: column; }
.info-text .label { font-size: 0.75rem; color: #888; margin-bottom: 4px; }
.info-text .value { font-size: 1.1rem; color: #ffffff; font-weight: 500; }
.btn { padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; font-size: 0.95rem; font-weight: 600; transition: all 0.2s; }
.btn-primary { background: #C9A84C; color: #000; }
.btn-primary:hover { background: #E8C97A; }
.btn-secondary { background: #4b5563; color: white; }
.btn-outline { background: transparent; border: 1px solid #666; color: white; }
.btn-outline:hover { border-color: white; }
.btn-text { background: transparent; color: #999; padding: 8px 12px;}
.btn-text:hover { color: white; background: rgba(255,255,255,0.1); }
.btn-danger { background: #ef4444; color: white; }
.btn-danger-outline { background: transparent; border: 1px solid #ef4444; color: #ef4444; width: 100%; padding: 12px; }
.btn-danger-outline:hover { background: rgba(239, 68, 68, 0.1); }
.btn-premium { background: linear-gradient(135deg, #C9A84C, #E8C97A); color: #000; border: none; box-shadow: 0 4px 12px rgba(201,168,76,0.4); }
.text-red { color: #ef4444 !important; }
.full-width { width: 100%; margin-top: 10px; }
.hidden-form { display: none; background: #222; padding: 20px; border-radius: 8px; margin-top: 15px; animation: slideDown 0.3s ease; border: 1px solid #444; }
.hidden-form input { margin-bottom: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
.error-text { color: #ff6b6b; font-size: 0.9rem; margin-top: 10px; text-align: center; background: rgba(255, 0, 0, 0.1); padding: 8px; border-radius: 4px; display: none; }
.visuals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; }
.visual-card { background: var(--bg-secondary, #2a2a2a); border: 1px solid var(--border-color, #444); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: pointer; transition: all 0.2s ease; min-height: 100px; position: relative; }
.visual-card:hover { background: var(--bg-tertiary, #333); transform: translateY(-2px); border-color: var(--theme-primary, #4a90e2); }
.visual-card-icon { font-size: 1.5em; color: var(--theme-primary, #4a90e2); margin-bottom: 10px; }
.visual-card-title { font-size: 0.95em; font-weight: 600; color: var(--text-primary, #fff); margin-bottom: 4px; }
.visual-card-value { font-size: 0.8em; color: var(--text-secondary, #888); }
.visual-card.toggle-card { flex-direction: row; align-items: center; grid-column: span 2; min-height: 60px; }
.revert-section { margin-bottom: 15px; width: 100%; }
#custom-confirm-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
#custom-confirm-overlay.active { opacity: 1; pointer-events: all; }
.confirm-modal { background: #1e293b; border: 1px solid rgba(255, 255, 255, 0.1); width: 90%; max-width: 400px; border-radius: 16px; padding: 24px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); text-align: center; }
#custom-confirm-overlay.active .confirm-modal { transform: scale(1); }
.confirm-icon-area { font-size: 3rem; color: #f59e0b; margin-bottom: 16px; }
.confirm-modal h3 { color: #fff; margin: 0 0 8px 0; font-size: 1.25rem; }
.confirm-modal p { color: #a0aec0; margin: 0 0 24px 0; font-size: 0.95rem; line-height: 1.5; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-btn { padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; border: none; transition: transform 0.1s, opacity 0.2s; }
.modal-btn:active { transform: scale(0.98); }
.modal-btn.cancel { background: transparent; border: 1px solid #4a5568; color: #cbd5e0; }
.modal-btn.confirm { background: #ef4444; color: white; box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3); }
.modal-btn.confirm:hover { background: #dc2626; }
.modal-btn.cancel:hover { border-color: #fff; color: #fff; }
button, .sidebar-btn, .action-btn, .control-btn, .history-icon-btn, select, input[type="text"], input[type="file"] { min-height: 48px; min-width: 48px; touch-action: manipulation; }
@media (max-width: 768px) { .input-wrapper { padding: 10px; } #message-input { font-size: 16px; } .history-item { padding: 12px 10px; margin-bottom: 8px; } }
.download-link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); color: white; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; padding: 10px 18px; font-family: inherit; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); margin-top: 10px; margin-bottom: 5px; width: fit-content; max-width: 100%; }
.download-link-button:hover:not(:disabled) { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(37, 99, 235, 0.3); }
.download-link-button:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.download-link-button:disabled { background: #475569; color: #94a3b8; cursor: not-allowed; box-shadow: none; transform: none; }
.download-link-button i { font-size: 1.1em; }
.download-link-button.success { background: linear-gradient(135deg, #10b981 0%, #059669 100%); pointer-events: none; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card { background-color: #ffffff !important; border: 1px solid #ccc !important; box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-title { color: #000000 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-value { color: #555555 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-icon { filter: brightness(0.9); }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content > div, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content .form-group { background-color: transparent !important; color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal label, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal h3, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal h4, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal span { color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal div[class*="card"], :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal div[class*="box"], :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal div[class*="container"] { background-color: #f9f9f9 !important; border-color: #e0e0e0 !important; color: #000 !important; }
html.light-mode .visual-card, html.theme-paper .visual-card, html.theme-frosted-glass .visual-card { background-color: #ffffff !important; border: 1px solid #ccc !important; color: #000000 !important; box-shadow: 0 4px 10px rgba(0,0,0,0.05) !important; }
html.light-mode .visual-card .visual-card-title, html.theme-paper .visual-card .visual-card-title, html.theme-frosted-glass .visual-card .visual-card-title { color: #000000 !important; }
html.light-mode .visual-card .visual-card-value, html.theme-paper .visual-card .visual-card-value, html.theme-frosted-glass .visual-card .visual-card-value { color: #555555 !important; }
html.light-mode .settings-content div[class*="card"], html.light-mode .settings-content div[class*="box"], html.light-mode .settings-content div[class*="group"], html.theme-paper .settings-content div[class*="card"], html.theme-paper .settings-content div[class*="box"], html.theme-paper .settings-content div[class*="group"], html.theme-frosted-glass .settings-content div[class*="card"], html.theme-frosted-glass .settings-content div[class*="box"], html.theme-frosted-glass .settings-content div[class*="group"] { background-color: #ffffff !important; border-color: #ccc !important; color: #000000 !important; }
html.light-mode .settings-modal select, html.light-mode .settings-modal input, html.theme-paper .settings-modal select, html.theme-paper .settings-modal input, html.theme-frosted-glass .settings-modal select, html.theme-frosted-glass .settings-modal input { background-color: #f5f5f5 !important; color: #000000 !important; border: 1px solid #999 !important; }
html.light-mode .settings-modal label, html.theme-paper .settings-modal label, html.theme-frosted-glass .settings-modal label { color: #333333 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) { --bg-secondary: #ffffff; --bg-tertiary: #f7f7f7; --text-primary: #1c1c1c; --text-secondary: #555555; --border-color: #e2e8f0; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card { background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-title { color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-value { color: #666666 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content .form-group, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content > div { background-color: transparent !important; color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card { background: #ffffff !important; border: 1px solid #ccc !important; box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-title { color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-value { color: #555555 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .visual-card .visual-card-icon { filter: brightness(0.95); }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content .form-group, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content > div { background-color: transparent !important; color: #1c1c1c !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-modal, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) #profile-settings-modal { background: rgba(255, 255, 255, 0.95) !important; border: 1px solid #ccc !important; box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-header { background-color: transparent !important; border-bottom: 1px solid #e0e0e0 !important; color: #000 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-section-header { color: #000000 !important; border-bottom: 2px solid var(--theme-primary) !important; background: transparent !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-tabs { background-color: #f7f7f7 !important; border-bottom: 1px solid #e0e0e0 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn { color: #666 !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .tab-btn.active { color: #000 !important; font-weight: 700 !important; background: transparent !important; }
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content p, :is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .settings-content li { color: #1c1c1c !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) #profile-settings-modal { color: #ffffff !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-section-header { color: #ffffff !important; border-bottom: 2px solid var(--theme-primary) !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal p, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal li, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal label, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal span, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal h2, html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .settings-modal h3 { color: #e0e0e0 !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .visual-card { background: #2a2a2a !important; border: 1px solid #444 !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .visual-card .visual-card-title { color: #ffffff !important; }
html:not(.light-mode):not(.theme-paper):not(.theme-frosted-glass) .visual-card .visual-card-value { color: #aaaaaa !important; }
.support-cta-btn { padding: 12px 20px; border-radius: 8px; font-weight: 600; font-size: 0.95em; border: 1px solid var(--border-color); cursor: pointer; transition: all 0.2s ease; text-align: center; background-color: var(--input-bg); color: var(--text-color); width: auto; min-width: 180px; text-decoration: none !important; display: inline-flex !important; justify-content: center; }
.support-cta-btn:hover { background-color: var(--ai-message-bg); border-color: var(--theme-primary); transform: translateY(-1px); }
#premium-status-badge.ultra-badge { background: linear-gradient(135deg, #dc3545 0%, #b02a37 100%) !important; border-color: #ff5c5c !important; box-shadow: 0 0 15px rgba(220, 53, 69, 0.6) !important; color: white !important; font-weight: 800; letter-spacing: 0.5px; }
#new-chat-btn { grid-column: span 2; background: var(--theme-primary); color: white; font-size: 1em; padding: 12px; }
#new-chat-btn:hover { filter: brightness(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.sidebar-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding-bottom: 5px; }
.sidebar-controls .sidebar-btn-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#new-chat-btn { grid-column: span 2; background-color: var(--theme-primary); color: white; justify-content: center; }
.model-list li[data-model="nano"].active { background: #28a745 !important; border-color: #28a745 !important; color: white !important; }
.model-list li[data-model="gpt4"].active { background: #007aff !important; border-color: #007aff !important; color: white !important; }
.model-list li[data-model="nano"]:hover:not(.active) { border: 1px solid #28a745; color: #28a745; }
.model-list li[data-model="gpt4"]:hover:not(.active) { border: 1px solid #007aff; color: #007aff; }
.model-list li[data-model="nano"].active { background: linear-gradient(135deg, #28a745, #1e7e34) !important; border-color: #28a745 !important; color: white !important; box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3); }
.model-list li[data-model="gpt4"].active { background: linear-gradient(135deg, #007aff, #0056b3) !important; border-color: #007aff !important; color: white !important; box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3); }
.model-list li[data-model="nano"]:hover:not(.active) { color: #28a745; border-color: #28a745; }
.model-list li[data-model="gpt4"]:hover:not(.active) { color: #007aff; border-color: #007aff; }
.download-link-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--theme-primary) !important; color: white !important; border: none !important; border-radius: 20px; padding: 10px 20px; font-family: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; width: 100%; margin-top: 8px; transition: transform 0.2s, filter 0.2s, box-shadow 0.2s; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.download-link-button:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); }
.download-link-button:active { transform: translateY(0); }
#model-toggle-button.tier-nano { background: rgba(40, 167, 69, 0.15) !important; border: 1px solid #28a745 !important; color: #28a745 !important; }
#model-toggle-button.tier-plus { background: rgba(0, 122, 255, 0.15) !important; border: 1px solid #007aff !important; color: #007aff !important; }
#model-toggle-button.tier-ultra { background: rgba(220, 53, 69, 0.15) !important; border: 1px solid #ff5c5c !important; color: #ff5c5c !important; box-shadow: 0 0 15px rgba(220, 53, 69, 0.2); font-weight: 800; }
#model-toggle-button.tier-nano i, #model-toggle-button.tier-plus i { color: inherit !important; }
#model-toggle-button.tier-ultra i { color: white !important; }
.tier-heading { text-align: center; }
.tier-free-status .fa-star { color: #28a745; }
.tier-premium-status .fa-star { color: #007bff; }
.tier-max-status .fa-star { color: #dc3545; }
.sidebar-btn.tier-max-status, .sidebar-btn.tier-premium-status, .sidebar-btn.tier-free-status { box-shadow: none; transition: all 0.3s ease; }
.tier-status-crimson { background: rgba(180, 0, 0, 0.4) !important; border: 1px solid rgba(255, 0, 0, 0.6) !important; color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 0, 0, 0.3) !important; font-weight: 700; pointer-events: none; }
.tier-status-emerald { background: rgba(0, 150, 100, 0.4) !important; border: 1px solid rgba(0, 255, 170, 0.6) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(0, 255, 170, 0.3) !important; font-weight: 600; pointer-events: none; }
.tier-ultra-final-size { padding: 6px 8px !important; font-size: 0.85em !important; align-items: center; justify-content: center; background: rgba(180, 0, 0, 0.4) !important; }
.tier-ultra-stars i.fa-star { font-size: 0.7em !important; color: #000000 !important; margin-right: 2px !important; }
.tier-ultra-final-size i.fa-star:last-of-type { margin-right: 5px !important; }
.tier-plus-stars i.fa-star, .tier-free-stars i.fa-star { color: #34d399 !important; }
.tier-status-crimson { background: rgba(180, 0, 0, 0.4) !important; border: 1px solid rgba(255, 0, 0, 0.6) !important; color: #000000 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 10px rgba(255, 0, 0, 0.3) !important; font-weight: 700; pointer-events: none; }
.tier-ultra-final-size { font-size: 0.8em !important; padding: 6px !important; align-items: center; justify-content: center; display: flex; white-space: nowrap; background: rgba(180, 0, 0, 0.4) !important; }
.tier-ultra-stars i.fa-star { font-size: 0.5em !important; color: #000000 !important; margin-right: 1px !important; }
.tier-ultra-final-size i.fa-star:last-of-type { margin-right: 2px !important; }
.sidebar-btn.tier-max-status { background: rgba(180, 0, 0, 0.4) !important; box-shadow: 0 0 0 transparent !important; color: #000000 !important; }
.tier-ultra-stars i.fa-star { color: #000000 !important; font-size: 0.5em !important; margin-right: 1px !important; }
#model-toggle-button.tier-grok { background: rgba(0, 0, 0, 0.1) !important; border: 1px solid #333 !important; color: #333 !important; }
html:not(.light-mode) #model-toggle-button.tier-grok { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid #fff !important; color: #fff !important; }
#model-toggle-button.tier-auto { background: linear-gradient(45deg, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)) !important; border: 1px solid var(--theme-primary) !important; color: var(--theme-primary) !important; font-weight: 800; animation: borderPulse 3s infinite; }
@keyframes borderPulse { 0% { border-color: #ff00ff; color: #ff00ff; } 50% { border-color: #00ffff; color: #00ffff; } 100% { border-color: #ff00ff; color: #ff00ff; } }

/* === 🟢 FIX: SMALLER PREMIUM/FREE/ULTRA BADGES === */
.tier-premium-status,
.tier-free-status,
.tier-max-status {
    font-size: 10px !important;       
    padding: 4px 8px !important;      
    min-height: 24px !important;      
    height: auto !important;          /* Override default sidebar-btn height */
    gap: 5px !important;              
    line-height: 1 !important;
    width: auto !important;           
    display: inline-flex !important;  
    margin-top: 4px; /* alignment fix */
}

/* Smaller Stars for All Tiers */
.tier-premium-status i, 
.tier-free-status i,
.tier-max-status i {
    font-size: 9px !important;        
    margin-right: 2px !important;
}

/* --- NEW: Go Back Button Style --- */
    .back-btn-pill {
      /* Pill shape */
      border: 1px solid var(--border-light);
      border-radius: 30px; 
      /* Appearance */
      background: var(--background-light);
      color: var(--text-medium);
      padding: 0.75rem 1.5rem;
      width: auto; /* Override button: width: 100% */
      margin: 2rem auto 0 auto; /* Center it and add top margin */
      display: inline-flex; /* Use inline-flex to respect auto width */
      align-items: center;
      gap: 8px;
      font-size: 0.95rem;
      font-weight: 500;
      transition: all 0.2s ease;
    }
    .back-btn-pill:hover {
      background: var(--border-light);
      color: var(--text-dark);
      border-color: var(--text-medium);
    }

    /* === GLOBAL CUSTOM MODAL STYLES === */
.custom-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark dimmed background */
    backdrop-filter: blur(8px);      /* Blur effect */
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.custom-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.custom-modal-box {
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 30px;
    border-radius: 20px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-modal-overlay.active .custom-modal-box {
    transform: scale(1);
}

/* Icon Styling */
.modal-icon-area {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.modal-icon-area i {
    font-size: 28px;
    color: #4a90e2; /* Default Blue */
}

.modal-icon-area i.warning { color: #f59e0b; }
.modal-icon-area i.danger { color: #ef4444; }
.modal-icon-area i.premium { color: #FFD700; }

/* Text Styling */
.custom-modal-box h3 {
    margin: 0 0 10px 0;
    color: white;
    font-size: 1.4rem;
    font-family: 'Inter', sans-serif;
}

.custom-modal-box p {
    margin: 0 0 25px 0;
    color: #aaa;
    font-size: 1rem;
    line-height: 1.5;
}

/* Buttons */
.modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.modal-btn {
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    flex: 1;
    transition: transform 0.2s, opacity 0.2s;
}

.modal-btn:active { transform: scale(0.96); }

.modal-btn.primary {
    background: linear-gradient(135deg, #4a90e2, #3b7dd8);
    color: white;
    box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
}

.modal-btn.primary.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.modal-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ddd;
}

.modal-btn.hidden { display: none; }

/* --- Mega Menu Container --- */
#model-popover {
    width: 600px; /* Wider to fit columns */
    max-width: 90vw;
    background: #1a1a1a; /* Dark background matches your UI */
    border: 1px solid #333;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* --- Grid Layout for Tiers --- */
.popover-content {
    padding: 20px;
}

.model-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Equal Columns */
    gap: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

/* --- Column Headers --- */
.column-header {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #888;
    margin-bottom: 10px;
    font-weight: 600;
    padding-left: 8px;
}

/* --- List Items --- */
.model-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.model-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: 8px;
    cursor: pointer;
    color: #eee;
    font-size: 0.9rem;
    transition: background 0.2s ease;
}

.model-list li:hover {
    background: rgba(255, 255, 255, 0.1);
}

.model-list li.active {
    background: #2563eb; /* Blue Brand Color */
    color: white;
    font-weight: 600;
}

.model-icon {
    font-size: 1.1rem;
}

/* --- Footer: Persona Pills --- */
.persona-footer {
    background: #111; /* Slightly darker footer */
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footer-label {
    font-size: 0.7rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.persona-pills {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

/* --- Pill Buttons --- */
.persona-pill {
    flex: 1; /* Distribute space evenly */
    background: #333;
    border: none;
    color: #aaa;
    padding: 8px 16px;
    border-radius: 999px; /* Pill shape */
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.persona-pill:hover {
    background: #444;
    color: white;
}

.persona-pill.active {
    background: #eee; /* Light active state */
    color: #111;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

/* --- Mobile Optimization --- */
@media (max-width: 600px) {
    #model-popover {
        width: 320px;
    }
    .model-grid {
        grid-template-columns: 1fr; /* Stack columns on mobile */
        gap: 20px;
    }
}

/* --- Mega Menu Visibility Fixes --- */

/* 1. Ensure text is visible in both modes */
.model-list li {
    color: var(--text-primary, #fff); /* Default to white in dark mode */
    opacity: 1; /* Ensure they aren't hidden */
}

/* 2. Light Mode Overrides for the Menu */
.light-mode #model-popover {
    background: #ffffff;
    border-color: #ddd;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
}
.light-mode .column-header {
    color: #555;
}
.light-mode .model-list li {
    color: #333; /* Dark text for light mode */
}
.light-mode .model-list li:hover {
    background: #f5f5f5;
}
.light-mode .persona-footer {
    background: #f9f9f9;
    border-top: 1px solid #eee;
}
.light-mode .persona-pill {
    background: #e0e0e0;
    color: #555;
}
.light-mode .persona-pill.active {
    background: #333;
    color: #fff;
}

/* 3. Locked Item Styling (Optional visual cue) */
/* We don't hide them, but we can give them a lock icon via JS if desired, 
   or just keep them looking normal to entice clicks. */

   /* === COOKIE BANNER FIX === */
#cookie-consent-banner {
    position: fixed;
    bottom: 100px; /* 100px up to clear the input bar */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    background-color: rgba(20, 20, 20, 0.95); /* Dark, distinct background */
    border: 1px solid #444;
    border-radius: 12px;
    padding: 15px 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 999999; /* CRITICAL: Higher than everything else */
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: slideUp 0.5s ease-out;
}

/* Hide class */
.cookie-banner-hidden {
    display: none !important;
}

/* Inner Content Layout */
.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    color: #e0e0e0;
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Link Color */
.cookie-content a {
    color: #4a90e2;
    text-decoration: none;
    font-weight: 600;
}

/* The OK Button */
#cookie-accept-btn {
    background: #2563eb; /* Bright Blue */
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.2s;
}

#cookie-accept-btn:hover {
    background: #1d4ed8;
}

/* Animation */
@keyframes slideUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}

/* Mobile Tweak: Move it slightly higher if keyboard might hide it */
@media (max-width: 600px) {
    #cookie-consent-banner {
        bottom: 90px; /* Adjust based on your input bar height */
        width: 95%;
    }
}

/* Video Container Styling */
.ai-video-container {
    margin-top: 10px;
    max-width: 100%;
    background: #000; /* Black background for cinematic feel */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* The Video Player */
.ai-video-container video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Keep vertical social-video previews useful without allowing them to dominate
   the entire chat thread. Landscape previews retain their existing full width. */
.video-wrapper--portrait {
    width: min(100%, 360px);
}

/* Download Link */
.ai-video-container a {
    text-align: center;
    padding: 8px;
    background: rgba(255, 255, 255, 0.1);
    text-decoration: none;
    transition: background 0.3s;
}

.ai-video-container a:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* === INPUT TEXT VISIBILITY FIX === */

/* Force input text to be white because the background is dark glass */
#message-input {
    color: #ffffff !important;
}

/* Force the placeholder text ("Just ASK AI") to be light grey */
#message-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1;
}

/* Ensure the character counter is also visible */
.char-counter {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* === VISUAL UPGRADE: MODEL SELECTOR & POPOVER === */

/* 1. The Container (Menu) - Frosted Glass Effect */
#model-popover {
    background: rgba(15, 15, 15, 0.85) !important; /* Dark Translucent */
    backdrop-filter: blur(24px) !important; /* Strong Blur */
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6) !important;
    border-radius: 20px !important;
    overflow: hidden;
}

/* 2. The Buttons (Unselected) - Glassy Pills */
.model-list li {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 12px 14px !important;
    color: #e0e0e0 !important;
    font-weight: 500 !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.model-list li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* 3. The Active Button - Gradient & Glow */
/* Active State - Gradient & Glow */
.model-list li.active, 
.persona-pill.active {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-hover)) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3) !important;
    font-weight: 700;
}

/* 4. Specific Tier Glows (Preserve your color coding but add glow) */
/* Nano/Free - Green Glow */
.model-list li[data-model="nano"].active {
    background: linear-gradient(135deg, #28a745, #1e7e34) !important;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-color: #28a745 !important;
}

/* GPT-4/Plus - Blue Glow */
.model-list li[data-model="gpt4"].active {
    background: linear-gradient(135deg, #007aff, #0056b3) !important;
    box-shadow: 0 0 20px rgba(0, 122, 255, 0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    border-color: #007aff !important;
}


/* 5. Chat Persona Pills - Matching Style */
.persona-pill {
    /* Pre-existing corruption, found and fixed 2026-08-25 (same pass as the
       .ask-ai-toast fix above, same pattern: a property value truncated
       mid-declaration with no closing brace, silently breaking every rule
       after it in the file for the browser's CSS parser). The border color
       below was not recoverable from any other definition of this class
       (none exists elsewhere) — chosen to match this same rule's own
       background opacity convention (subtle, low-opacity white). */
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* === AI MESSAGE TEXT VISIBILITY FIX === */

/* 1. Force AI Message Text to be Light Grey in Default/Dark Mode */
.message-container.ai .message,
.message-container.assistant .message {
    color: #e0e0e0 !important; /* Readable Off-White */
}

/* 2. Make Bold Text (Headers/Strong) Pure White for emphasis */
.message-container.ai .message strong,
.message-container.assistant .message strong,
.message-container.ai .message b,
.message-container.assistant .message b {
    color: #ffffff !important; /* Pure White */
    font-weight: 700;
}

/* 3. Ensure Paragraphs and Lists inherit this light color */
.message-container.ai .message p,
.message-container.assistant .message p,
.message-container.ai .message li,
.message-container.assistant .message li {
    color: inherit !important;
}

/* --- EXCEPTION: LIGHT MODE --- */
/* If the user switches to Light Mode (Paper/Frosted), switch text back to Black */
html.light-mode .message-container.ai .message,
html.light-mode .message-container.assistant .message,
html.theme-paper .message-container.ai .message,
html.theme-paper .message-container.assistant .message,
html.theme-frosted-glass .message-container.ai .message,
html.theme-frosted-glass .message-container.assistant .message {
    color: #1c1c1c !important;
}

/* Force Bold text to Black in Light Mode */
html.light-mode .message-container.ai .message strong,
html.light-mode .message-container.assistant .message strong,
html.theme-paper .message-container.ai .message strong,
html.theme-paper .message-container.assistant .message strong,
html.theme-frosted-glass .message-container.ai .message strong,
html.theme-frosted-glass .message-container.assistant .message strong {
    color: #000000 !important;
}

/* === IMPROVED PAUSE BUTTON === */
#pause-resume-btn {
    /* Vibrant Gradient (Red/Crimson) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    
    /* Text/Icon Color */
    color: white !important;
    
    /* Border & Depth */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 4px 15px rgba(255, 75, 43, 0.4) !important;
    
    /* Shape matching other buttons */
    border-radius: 16px !important; 
    
    /* Animation */
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    
    /* Ensure opacity is full */
    opacity: 1 !important; 
}

/* Hover Effect - Glow Brighter */
#pause-resume-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 8px 25px rgba(255, 75, 43, 0.6) !important;
    filter: brightness(1.1);
}

/* Active/Click Effect */
#pause-resume-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 10px rgba(255, 75, 43, 0.3) !important;
}

/* Optional: Pulse animation to show it's active/working */
@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 75, 43, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 75, 43, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 75, 43, 0); }
}

/* Apply pulse when the button is visible (implying generation is happening) */
#pause-resume-btn:not(.hidden) {
    animation: pulse-red 2s infinite;
}

/* === FORCE PAUSE BUTTON VISUALS === */
/* We use the parent ID to increase specificity and override any defaults */
#input-area .input-controls #pause-resume-btn {
    /* 1. Make it stand out (Red/Pink Gradient) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: white !important;
    
    /* 2. Fix the size and shape */
    width: auto !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 20px !important; /* Wider touch target */
    border-radius: 20px !important; /* Pill shape */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* 3. Reset flex/display properties to ensure it shows */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    
    /* 4. Add Glow */
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.5) !important;
    opacity: 1 !important;
    margin-left: 5px !important;
}

/* Hover State */
#input-area .input-controls #pause-resume-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255, 75, 43, 0.8) !important;
    filter: brightness(1.1) !important;
}

/* Hide it properly when the class 'hidden' is present */
#input-area .input-controls #pause-resume-btn.hidden {
    display: none !important;
}

/* Optional: Add text label next to icon for clarity */
#input-area .input-controls #pause-resume-btn::after {
    content: "Stop";
    font-size: 12px;
    font-weight: 700;
    margin-left: 6px;
    text-transform: uppercase;
}

/* === FORCE PAUSE BUTTON VISUALS === */
/* We use the ID selector (#) to override the generic class */
#input-area .input-controls #pause-resume-btn {
    /* 1. THE RED GRADIENT (Replaces grey background) */
    background: linear-gradient(135deg, #ff416c, #ff4b2b) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    
    /* 2. SIZE & SHAPE (Pill shape instead of square) */
    width: auto !important;
    min-width: 80px !important; /* Wide enough for text */
    height: 36px !important;
    border-radius: 20px !important; 
    padding: 0 16px !important;
    margin-left: 10px !important;
    
    /* 3. GLOW EFFECT */
    box-shadow: 0 0 15px rgba(255, 75, 43, 0.5) !important;
    opacity: 1 !important;

    /* 4. FLEX LAYOUT (Centers content) */
    display: flex !important; 
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

/* 5. ADD THE WORD "STOP" (Pseudo-element) */
/* This adds text without changing HTML */
#input-area .input-controls #pause-resume-btn::after {
    content: "STOP";
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Hover State - Brighter Glow */
#input-area .input-controls #pause-resume-btn:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 25px rgba(255, 75, 43, 0.8) !important;
    filter: brightness(1.1) !important;
}

/* Ensure it actually hides when needed */
#input-area .input-controls #pause-resume-btn.hidden {
    display: none !important;
}

/* === MOBILE HEADER LAYOUT FIX === */
@media (max-width: 600px) {
    
    /* 1. Remove Redundant Settings Button (It's in Sidebar) */
    /* This immediately frees up ~50px of space */
    #settings-btn {
        display: none !important;
    }

    /* 2. Tighten Header Padding */
    /* Maximize available width for buttons */
    .controls-header {
        padding: 0 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Shrink Remaining Buttons (Search & Share) */
    /* Reduces them from 48px to 34px */
    .header-right .header-icon-btn {
        min-width: 34px !important;
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 1.1rem !important;
    }

    /* 4. Reduce Gaps */
    .header-right {
        gap: 2px !important;
    }

    /* 5. Shrink the Toggle Switch */
    /* Scales it down to 75% size to fit snugly */
    .switch {
        transform: scale(0.75) !important;
        margin-left: 5px !important;
        transform-origin: right center !important;
    }
    
    /* 6. Prevent Model Selector from pushing too hard */
    #model-toggle-button {
        max-width: 140px !important;
        padding: 4px 8px !important;
    }
    #selected-model-name {
        font-size: 0.8rem !important;
    }
}

/* === NEW VISUALS TAB: MODE GRID === */
.mode-toggle-container {
    margin-bottom: 20px;
}

.mode-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.mode-card {
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.mode-card:hover {
    background: var(--ai-message-bg);
    transform: translateY(-2px);
    border-color: var(--text-secondary);
}

.mode-icon {
    font-size: 1.8rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

/* ACTIVE STATE */
.mode-card.active {
    border-color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb), 0.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Icon Color when Active */
#mode-btn-light.active .mode-icon { color: #f59e0b; /* Sun Yellow */ }
#mode-btn-dark.active .mode-icon { color: #4a90e2; /* Moon Blue */ }

/* Checkmark Badge */
.active-check {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: var(--theme-primary);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.mode-card.active .active-check {
    opacity: 1;
    transform: scale(1);
}

/* === CLEAN UP MOBILE HEADER (Since toggle is gone) === */
@media (max-width: 600px) {
    .header-right {
        gap: 8px !important; /* Restore normal spacing */
    }
    /* Re-enable buttons we hid before if you want them back */
    #settings-btn, #share-btn {
        display: inline-flex !important; 
    }
}


#controls-header-content {
    /* Set up the container as a flex element */
    display: flex; 
    
    /* This is the key property: it distributes the space 
       between the two main child elements (header-left and header-right) 
       pushing them to opposite edges of the container. */
    justify-content: space-between; 
    
    /* Ensures all items are aligned vertically in the center */
    align-items: center; 
    
    /* Ensures the header spans the full width it can take */
    width: 100%; 
}

/* Optional but good practice: ensure header-right uses flex 
   to keep the buttons close together */
.header-right {
    display: flex;
    align-items: center;
    gap: 15px; /* Adjust spacing between icons */
}

/* Luma Premium Glow Effect */
.luma-glow {
    border: 1px solid #8b5cf6 !important; /* Luma Purple border */
    box-shadow: 0 0 10px rgba(139, 92, 246, 0.3);
    position: relative;
    overflow: hidden;
    animation: lumaPulse 3s infinite ease-in-out;
}

.luma-glow::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: lumaShine 3s infinite;
}

@keyframes lumaPulse {
    0% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.2); border-color: #8b5cf6; }
    50% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.6); border-color: #a78bfa; }
    100% { box-shadow: 0 0 5px rgba(139, 92, 246, 0.2); border-color: #8b5cf6; }
}

@keyframes lumaShine {
    0% { left: -100%; }
    20% { left: 100%; }
    100% { left: 100%; }
}

/* Dim icons by default */
.sidebar-btn i, .history-icon-btn i {
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* Brighten on hover or active */
.sidebar-btn:hover i, 
.history-item:hover .history-icon-btn i,
#new-chat-btn i {
    opacity: 1;
}

/* === PREMIUM SKELETON LOADER === */

/* Container for the fake items */
.skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px; /* Matches your history item gap */
    padding: 10px;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* The card itself (matches .history-item dimensions) */
.skeleton-card {
    height: 50px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02); /* Very subtle background */
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

/* The "Title" Line */
.skeleton-line {
    height: 10px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
}

.skeleton-line.title {
    width: 70%; /* Simulate title width */
}

.skeleton-line.date {
    width: 40%; /* Simulate date width */
    height: 8px;
}

/* The Shimmer Animation Effect */
.skeleton-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.03) 20%, /* Slight bright spot */
        rgba(255, 255, 255, 0.06) 60%, /* Peak brightness */
        rgba(255, 255, 255, 0)
    );
    animation: skeletonShimmer 2s infinite;
}

@keyframes skeletonShimmer {
    100% {
        transform: translateX(100%);
    }

}

/* === DRAMATIC PULSATING INPUT GLOW === */

@keyframes theme-pulse-glow {
    0% {
        border-color: rgba(var(--theme-primary-rgb), 0.3);
        /* Subtle starting state */
        box-shadow: 0 0 5px rgba(var(--theme-primary-rgb), 0.1); 
    }
    50% {
        border-color: var(--theme-primary);
        /* DRAMATIC EFFECT: 
           1. First shadow (10px) is the bright inner halo.
           2. Second shadow (30px) is the wide outer diffusion.
           3. Inset shadow adds depth inside the box. 
        */
        box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.8),
                    0 0 30px rgba(var(--theme-primary-rgb), 0.4),
                    inset 0 0 8px rgba(var(--theme-primary-rgb), 0.2);
    }
    100% {
        border-color: rgba(var(--theme-primary-rgb), 0.3);
        /* Return to subtle state */
        box-shadow: 0 0 5px rgba(var(--theme-primary-rgb), 0.1);
    }
}

/* Apply to Input on Focus */
#message-input:focus {
    background: rgba(0, 0, 0, 0.7); /* Darker bg makes the glow pop more */
    animation: theme-pulse-glow 2.5s infinite ease-in-out; /* Slightly faster breath */
    outline: none;
}


/* Add this at the end of your CSS to ensure it overrides */

.btn, .modal-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(5px);
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.btn:hover, .modal-btn:hover {
    background: rgba(var(--theme-primary-rgb), 0.15) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.4) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(var(--theme-primary-rgb), 0.2) !important;
    transform: translateY(-1px);
}

/* Primary/Confirm buttons inside modals get a bit more fill on hover */
.modal-btn.primary:hover, .btn-primary:hover {
    background: rgba(var(--theme-primary-rgb), 0.3) !important;
    box-shadow: 0 0 15px rgba(var(--theme-primary-rgb), 0.4) !important;
}


/* === FORCE GLASS TRANSPARENCY FIX === */

/* 1. Sidebar Buttons (New Chat, History Items, etc.) */
.sidebar-btn {
    /* Make background transparent white (Glass) */
    background: rgba(255, 255, 255, 0.03) !important;
    
    /* Thin subtle border */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    
    /* Blur background for true glass effect */
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    
    /* Text color */
    color: rgba(255, 255, 255, 0.7) !important;
    
    /* Remove any solid shadows */
    box-shadow: none !important;
}

.sidebar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* 2. Model Selector Options (The Grid Buttons) */
.model-list li {
    /* Transparent Glass Background */
    background: rgba(255, 255, 255, 0.03) !important;
    
    /* Subtle Border */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    
    /* Blur */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: none !important;
}

.model-list li:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    transform: translateY(-2px);
}

/* 3. The ACTIVE Selected Model (Blue/Gradient Glass) */
.model-list li.active {
    /* Semi-transparent Gradient */
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.6), rgba(var(--theme-primary-rgb), 0.3)) !important;
    
    /* Border glows with theme color */
    border: 1px solid rgba(var(--theme-primary-rgb), 0.6) !important;
    
    /* Add a glow shadow */
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb), 0.3) !important;
    
    color: #fff !important;
    backdrop-filter: blur(10px) !important;
}

/* 4. Persona Pills (Bottom of menu) */
.persona-pill {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(5px);
    color: rgba(255, 255, 255, 0.6) !important;
}

.persona-pill.active {
    background: linear-gradient(135deg, rgba(var(--theme-primary-rgb), 0.6), rgba(var(--theme-primary-rgb), 0.3)) !important;
    border: 1px solid rgba(var(--theme-primary-rgb), 0.6) !important;
    color: #fff !important;
}

/* === FORCE GLOBAL SIDEBAR TRANSPARENCY === */

/* 1. Default Dark Glass (For Midnight, Synthwave, Stealth, etc.) */
.sidebar {
    /* Semi-transparent dark layer */
    background: rgba(10, 12, 16, 0.65) !important; 
    
    /* Heavy Blur to make text readable */
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    
    /* Remove solid borders, use light highlight */
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    
    /* subtle shadow for separation */
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.3) !important;
}

/* 2. Light Theme Glass (For Paper, Frosted, Default Light) */
/* We need a separate rule because white text on clear glass is hard to read in light mode */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .sidebar {
    /* Semi-transparent white layer */
    background: rgba(255, 255, 255, 0.75) !important;
    
    /* Darker, subtle border for light mode */
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    
    /* Lighter shadow */
    box-shadow: 5px 0 30px rgba(0, 0, 0, 0.05) !important;
}

/* 3. Ensure the Sidebar Footer blends in too */
.sidebar-footer {
    /* Make the footer background mostly clear so the gradient flows */
    background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, transparent 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Fix for Light Mode Footer */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .sidebar-footer {
    background: linear-gradient(0deg, rgba(255,255,255,0.4) 0%, transparent 100%) !important;
    border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* --- NEW SIDEBAR LAYOUT STYLES --- */

/* 1. Header */
.sidebar-header {
    padding: 25px 20px 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: transparent;
    border-bottom: none;
}

#sidebar-greeting {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0;
}

.user-status {
    font-size: 0.75rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* 2. Controls Container */
.sidebar-controls {
    padding: 0 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Full Width "New Chat" Button */
.sidebar-btn.full-width {
    width: 100%;
    justify-content: center;
    font-weight: 600;
    background: var(--theme-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.sidebar-btn.full-width:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

/* 3. Search Bar */
.sidebar-search-container {
    position: relative;
    width: 100%;
}

.sidebar-search-container input {
    width: 100%;
    padding: 10px 10px 10px 35px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-color);
    font-size: 0.9rem;
    outline: none;
    transition: all 0.2s;
}

.sidebar-search-container input:focus {
    background: rgba(255,255,255,0.1);
    border-color: var(--theme-primary);
}

.sidebar-search-container .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    font-size: 0.9rem;
}

/* 4. Utilities Grid (3 Buttons in a row) */
.sidebar-utilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.sidebar-btn.small {
    padding: 8px;
    font-size: 0.85rem;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 8px;
}

/* Glass effect for utility buttons */
.glass-btn {
    background: rgba(255,255,255,0.03) !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    color: var(--text-color);
}

.glass-btn:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* Accent for Premium button */
.accent-glass {
    background: linear-gradient(135deg, rgba(255,215,0,0.1), rgba(255,215,0,0.05)) !important;
    border: 1px solid rgba(255,215,0,0.3) !important;
    color: #FFD700 !important;
}

/* 5. Footer & Delete Link */
.sidebar-footer {
    padding: 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, transparent 100%);
}

#user-controls-sidebar {
    display: flex;
    flex-direction: column;
}

#logged-in-controls {
    display: flex;
}

.sidebar-btn.footer-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
}

/* The Subtle Text Link for Delete All */
.text-link-danger {
    background: none;
    border: none;
    color: #666;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 5px;
    transition: color 0.2s;
}

.text-link-danger:hover {
    color: #ff4444;
}


.notes-modal-box {
    background: var(--sidebar-bg); /* Matches your sidebar glass theme */
    width: 600px;
    height: 70vh;
    max-width: 95%;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: scaleIn 0.2s ease-out;
}

.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    background: rgba(0,0,0,0.2);
}

.notes-title {
    font-weight: 600;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

.save-status {
    font-size: 0.75rem;
    color: #4ade80; /* Green for success */
    opacity: 0;
    transition: opacity 0.3s;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.save-status.saving {
    color: #fbbf24; /* Yellow for saving */
    opacity: 1;
    content: "Saving...";
}

.save-status.saved {
    opacity: 1;
}

.notes-body {
    flex-grow: 1;
    padding: 0;
    background: rgba(0,0,0,0.1);
}

#notes-textarea {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    padding: 20px;
    color: var(--text-color);
    font-family: 'Fira Code', monospace; /* Good for code snippets */
    font-size: 0.95rem;
    resize: none;
    outline: none;
    line-height: 1.6;
}

#notes-textarea::placeholder {
    color: rgba(255,255,255,0.3);
}

.notes-actions .icon-btn {
    color: var(--text-color);
    opacity: 0.7;
    margin-left: 10px;
    transition: opacity 0.2s;
}

.notes-actions .icon-btn:hover {
    opacity: 1;
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mobile Tweak */
@media (max-width: 600px) {
    .notes-modal-box {
        width: 100%;
        height: 100%;
        border-radius: 0;
    }
}

/* Notes Overlay */
#notes-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#notes-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Canvas Box */
.notes-canvas {
    width: 90%;
    max-width: 600px;
    height: 70vh;
    background: var(--bg-card, #1e1e1e);
    border: 1px solid var(--border-color, #333);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#notes-overlay.active .notes-canvas {
    transform: translateY(0);
}

/* Header */
.notes-header {
    padding: 15px;
    background: var(--bg-core, #121212);
    border-bottom: 1px solid var(--border-color, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--theme-primary, #4a90e2);
    font-weight: bold;
}

#notes-status {
    font-size: 0.8rem;
    color: #666;
    margin-right: 10px;
    font-weight: normal;
}

#close-notes-btn {
    background: transparent;
    border: none;
    color: var(--text-color, #fff);
    cursor: pointer;
    font-size: 1.2rem;
}

#notes-textarea {
    flex-grow: 1;
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px;
    color: var(--text-color, #ddd);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    resize: none;
    outline: none;
    line-height: 1.6;
}

/* Delete Animation */
@keyframes slideOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
        max-height: 60px; /* Approx height of item */
        margin-bottom: 5px;
    }
    100% {
        transform: translateX(-120%); /* Slide way off screen */
        opacity: 0;
        max-height: 0; /* Shrink space */
        margin-bottom: 0;
        padding: 0;
        border: none;
    }
}

.history-item.deleting {
    animation: slideOutLeft 0.4s ease-in-out forwards;
    pointer-events: none; /* Prevent clicks while animating */
}

/* === FIX: CHAT BUBBLE SIZING === */

/* 1. Force User Bubble (Blue) to shrink to text */
.message-container.user .message {
    width: fit-content !important;  /* Only as wide as the text */
    max-width: 85% !important;      /* Prevent it from hitting the edge */
    padding: 8px 14px !important;   /* Reduce padding (makes it smaller) */
    /* `margin-left: auto` removed (2026-08-25) — a *physical* left/right
       margin, so in RTL layouts (Arabic/Hebrew/Farsi/Urdu — see the
       isRTL check in app.html) it kept pushing the bubble to the browser's
       physical right while the row's own `.message-wrapper` (flex row,
       justify-content:flex-end — direction-aware) packed the avatar to
       the row's logical *end*, which in RTL is the physical *left*. Two
       different alignment mechanisms disagreeing split the avatar and its
       own bubble to opposite corners of the screen. Owner report,
       screenshot showed exactly this in Arabic: avatar top-left, bubble
       top-right, looking "completely messed up". The wrapper's
       justify-content already right/end-aligns the bubble correctly in
       both directions on its own — this margin was redundant in LTR and
       actively wrong in RTL. */
    min-width: auto !important;     /* Remove minimum width enforcement */
    display: inline-block;          /* Ensures correct wrapping */
    text-align: left;
}

/* 2. Force AI Bubble (Grey) to shrink to text */
.message-container.ai .message, 
.message-container.assistant .message {
    width: fit-content !important;
    max-width: 85% !important;
    padding: 8px 14px !important;
    display: inline-block;
}

/* 3. Ensure the wrapper allows shrinking */
.message-wrapper {
    width: 100% !important;
    display: flex !important;
    /* Was `column` — that stacked the avatar underneath the bubble on its
       own main axis instead of beside it, so `justify-content:flex-end`
       (line ~1233, user rows) pushed the avatar to the row's *bottom*, not
       its *end* alongside the text — visually a lone avatar floating at
       the wrapper's start corner, disconnected from its own message. Bug
       reported 2026-08-25 (owner: "why is user icon on the left of chat").
       Row matches the row-based avatar+bubble layout this rule sits next
       to; the shrink-to-fit sizing this block exists for lives entirely on
       `.message`'s own width/padding above and never depended on this. */
    flex-direction: row !important;
}

/* Style for the Subscription Status Badge */
.status-pill {
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.9em;
    display: inline-block;
}

/* Specific Tier Styles */
.status-free {
    background: #333;
    color: #ccc;
    border: 1px solid #555;
}

.status-premium {
    background: linear-gradient(135deg, #3b82f6, #2563eb); /* Blue */
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.status-ultra {
    background: linear-gradient(135deg, #FFD700, #FDB931); /* Gold */
    color: #000;
    border: none;
    font-weight: 800;
    box-shadow: 0 2px 15px rgba(255, 215, 0, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --- New Help & Features Layout --- */

/* Grid for "How to Use" cards */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.help-card {
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 0.2s ease;
}

.help-card:hover {
    transform: translateY(-2px);
    background: var(--bg-tertiary, #333);
}

.help-icon {
    font-size: 1.5rem;
    color: var(--theme-primary, #4a90e2);
    margin-bottom: 5px;
}

.help-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: #fff;
}

.help-desc {
    font-size: 0.8rem;
    color: #aaa;
    line-height: 1.4;
}

/* Feature Tiers Layout */
.tier-box {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 15px;
    border-left: 3px solid #555;
}

.tier-box.premium {
    border-left-color: #3b82f6; /* Blue */
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05), transparent);
}

.tier-box.ultra {
    border-left-color: #ffd700; /* Gold */
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.05), transparent);
}

.tier-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1rem;
    color: #fff;
}

.feature-list-styled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-list-styled li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: #ccc;
    line-height: 1.4;
}

.feature-list-styled i {
    margin-top: 3px;
    font-size: 0.9rem;
}

/* =========================================
   LIGHT MODE OVERRIDES
   ========================================= */

/* Use this if you toggle themes via a CSS class on the body */
body.light-mode .fa-magnifying-glass,
body.light-mode .fa-gear, 
body.light-mode .fa-share-nodes,
body.light-mode .fa-share-from-square {
    color: #1a1a1a !important; /* Dark text for icons */
}

/* Fix for the Sidebar Tier Status (Free/Upgrade text) */
body.light-mode .sidebar-section span,
body.light-mode .tier-status-text, 
body.light-mode .upgrade-text,
body.light-mode .user-info-panel {
    color: #1a1a1a !important;
}

/* Ensure the Sidebar Search input is visible */
body.light-mode input[type="text"],
body.light-mode .search-history-input {
    background-color: #f0f0f0 !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}

/* =========================================
   SYSTEM PREFERENCE AUTOMATIC OVERRIDE
   (If you rely on system settings instead of a toggle button)
   ========================================= */
@media (prefers-color-scheme: light) {
    /* Header Icons */
    .fa-magnifying-glass, .fa-gear, .fa-share-nodes {
        color: #1a1a1a !important;
    }

    /* Sidebar Text */
    .sidebar-wrapper, .sidebar-content {
        color: #1a1a1a !important; 
    }
    
    /* Specific target for the "Free" text if it's generic */
    .tier-label, .plan-name {
        color: #1a1a1a !important;
    }
}

/* =========================================================
   🚀 FINAL LIGHT MODE FIXES (Paste at the VERY bottom)
   ========================================================= */

/* 1. Fix Invisible Header Icons (Search, Settings, Share) */
html.light-mode .header-icon-btn,
html.light-mode .fa-magnifying-glass,
html.light-mode .fa-gear,
html.light-mode .fa-share-nodes,
html.light-mode .fa-share-from-square {
    color: #1a1a1a !important; /* Forces icons to Black */
    border-color: #ccc !important;
}

/* 2. Fix Sidebar Text (Free/Upgrade/Status) */
html.light-mode .sidebar-section span,
html.light-mode .tier-status-text,
html.light-mode .upgrade-text,
html.light-mode .user-status,
html.light-mode .footer-label {
    color: #1a1a1a !important;
}

/* 3. Fix Invisible Input/Search Bars */
html.light-mode input[type="text"],
html.light-mode .sidebar-search-container input {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #ccc !important;
}
html.light-mode input::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}

/* 4. Fix Sidebar Buttons (Settings, History items) */
html.light-mode .sidebar-btn {
    color: #333 !important;
    border-color: #ddd !important;
    background: rgba(0,0,0,0.05) !important;
}
html.light-mode .sidebar-btn:hover {
    background: rgba(0,0,0,0.1) !important;
}

/* 5. Fix "Free" Star Icon specifically */
html.light-mode .tier-free-status .fa-star {
    color: #28a745 !important; /* Keep green, but ensure visibility */
    text-shadow: none !important;
}

/* =================================================================
   🛑 FORCE LIGHT MODE VISIBILITY FIX (Paste at BOTTOM of file)
   ================================================================= */

/* 1. FORCE HEADER ICONS (Search, Settings, Share) TO BLACK */
html.light-mode .header-right .header-icon-btn,
body.light-mode .header-right .header-icon-btn,
html.light-mode .header-icon-btn,
body.light-mode .header-icon-btn {
    color: #1a1a1a !important; 
    border-color: rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
}

/* Hover state for header icons in light mode */
html.light-mode .header-right .header-icon-btn:hover,
body.light-mode .header-right .header-icon-btn:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: #000 !important;
}

/* 2. FORCE SIDEBAR TEXT & ICONS TO DARK GREY */
/* This targets the Free/Upgrade status text specifically */
html.light-mode .sidebar-controls .sidebar-btn,
body.light-mode .sidebar-controls .sidebar-btn,
html.light-mode .tier-status-text,
html.light-mode .user-status,
html.light-mode .upgrade-text,
html.light-mode .sidebar-btn {
    color: #333333 !important; 
    text-shadow: none !important;
}

/* Force icons inside sidebar buttons to be dark */
html.light-mode .sidebar-btn i,
body.light-mode .sidebar-btn i {
    color: #333333 !important;
    opacity: 1 !important;
}

/* 3. FIX THE "FREE" STAR & TEXT */
html.light-mode .tier-free-status,
body.light-mode .tier-free-status {
    color: #333 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #ccc !important;
}

/* Keep the star green, but make sure it pops against white */
html.light-mode .tier-free-status .fa-star,
body.light-mode .tier-free-status .fa-star {
    color: #28a745 !important;
}

/* 4. SIDEBAR SEARCH BAR TEXT */
html.light-mode .sidebar-search-container input,
body.light-mode .sidebar-search-container input {
    color: #000 !important;
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #ccc !important;
}
html.light-mode .sidebar-search-container input::placeholder {
    color: #666 !important;
    opacity: 1 !important;
}
html.light-mode .sidebar-search-container .search-icon {
    color: #555 !important;
}

/* === LOGIN HERO PILL === */
        .login-hero-btn {
            position: absolute;
            top: 30px;
            right: 30px;
            display: flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.08); /* Glassy background */
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 10px 24px;
            border-radius: 50px;
            color: #fff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            transition: all 0.3s ease;
            z-index: 20; /* Ensure it sits above video */
        }

        .login-hero-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
        }

        /* Adjust positioning for mobile */
        @media (max-width: 768px) {
            .login-hero-btn {
                top: 20px;
                right: 20px;
                padding: 8px 16px;
                font-size: 0.85rem;
            }
        }

        /* Blue Pulse for Code Section */
        @keyframes pulse-blue {
            0% { text-shadow: 0 0 0 rgba(74, 144, 226, 0); }
            50% { text-shadow: 0 0 20px rgba(74, 144, 226, 0.5); color: #8ec5fc; }
            100% { text-shadow: 0 0 0 rgba(74, 144, 226, 0); }
        }

        /* === FIXED BACKGROUND VIDEO === */
        #bg-video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0; 
            overflow: hidden;
            /* ADDED: This makes sure the "transparency" reveals black */
            background-color: #000; 
        }
        #bg-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* CHANGED: 1.0 is fully visible, 0.0 is invisible. 
               Set to 0.4 or 0.3 for a darker, more cinematic look. */
            opacity: 0.4;
        }

/* --- New styles for the Speech Language Globe Button (Above the microphone) --- */
/* Target: #speech-lang-btn (Class: .lang-globe-btn) */
#speech-lang-btn.lang-globe-btn {
    /* Make it look like a secondary action button (Pill-shaped) */
    background-color: var(--theme-primary); 
    color: #fff; /* White text/icon */
    border: 2px solid var(--theme-primary); 
    
    /* Sizing and Shape */
    height: 38px; 
    padding: 0 10px;
    border-radius: 20px; /* Pill shape for button with text/badge */
    
    /* Layout */
    display: flex;
    align-items: center;
    gap: 6px; /* Space between globe icon and language badge */
    cursor: pointer;
    
    /* Effects */
    transition: all 0.2s ease;
    box-shadow: 0 4px 8px rgba(var(--theme-primary-rgb, 74, 144, 226), 0.2);
}

#speech-lang-btn.lang-globe-btn:hover {
    background-color: var(--theme-hover);
    border-color: var(--theme-hover);
    transform: translateY(-1px);
}

/* Make the globe icon inside bigger */
#speech-lang-btn.lang-globe-btn i.fa-globe {
    font-size: 1.1em;
}

/* Style the language badge for visibility/contrast */
#speech-lang-btn .lang-badge-tiny {
    font-size: 0.7em;
    font-weight: 700;
    padding: 2px 4px;
    background: rgba(0, 0, 0, 0.2); /* Subtle dark background for the badge */
    border-radius: 4px;
    min-width: 18px;
    text-align: center;
}

/* === NEW: LANGUAGES GRID === */
.languages-section {
    padding: 80px 20px;
    background: linear-gradient(180deg, #000 0%, #050505 100%);
    text-align: center;
}
.lang-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 900px;
    margin: 40px auto 0 auto;
}
.lang-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 24px;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ccc;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lang-pill:hover {
    background: white;
    color: black;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}
.globe-icon {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
    animation: spin-slow 10s linear infinite;
}

/* === NEW: IMMERSIVE FEATURES (Voice + Wallpapers) === */
.immersive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    max-width: 1100px;
    margin: 40px auto 0 auto;
}
.immersive-card {
    background: #0a0a0a;
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 40px;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s;
}
.immersive-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.2);
}
.immersive-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    display: inline-block;
    padding: 15px;
    border-radius: 16px;
}
/* Voice Card Styling */
.card-voice .immersive-icon {
    background: rgba(74, 144, 226, 0.1);
    color: var(--primary);
}
.voice-waves {
    position: absolute;
    right: -20px; bottom: -20px;
    font-size: 8rem;
    opacity: 0.05;
    color: var(--primary);
}
/* Wallpaper Card Styling */
.card-wallpaper .immersive-icon {
    background: linear-gradient(135deg, #ff00cc20, #33339920);
    color: #d63384; /* Pinkish accent */
}
.wallpaper-preview {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(45deg, #ff00cc, #333399);
    opacity: 0;
    transition: opacity 0.5s;
    z-index: 0;
}
.card-wallpaper:hover .wallpaper-preview {
    opacity: 0.1;
}
.immersive-content { position: relative; z-index: 1; }

@keyframes spin-slow { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

/* Mobile Stack */
@media (max-width: 768px) {
    .immersive-grid { grid-template-columns: 1fr; }
}

/* === VOICE MODE OVERLAY === */
#voice-mode-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: #000; z-index: 20000;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
}
#voice-mode-overlay.active { opacity: 1; pointer-events: auto; }

/* The Orb Container */
.voice-orb-container {
    position: relative; width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
}

/* The Glowing Orb */
.voice-orb {
    width: 100px; height: 100px; border-radius: 50%;
    background: white;
    box-shadow: 0 0 40px 20px rgba(255, 255, 255, 0.4);
    transition: all 0.3s ease;
    animation: orb-idle 4s infinite ease-in-out;
}

/* States */
.voice-orb.listening {
    background: #4a90e2; /* Blue when listening to you */
    box-shadow: 0 0 60px 30px rgba(74, 144, 226, 0.6);
    animation: orb-pulse 1.5s infinite;
}
.voice-orb.processing {
    background: #9013fe; /* Purple when thinking */
    box-shadow: 0 0 50px 20px rgba(144, 19, 254, 0.5);
    animation: orb-spin 2s infinite linear;
}
.voice-orb.speaking {
    background: #fff; /* White/Bright when AI speaks */
    box-shadow: 0 0 80px 40px rgba(255, 255, 255, 0.8);
    animation: orb-speak 0.5s infinite alternate;
}

/* Controls */
.voice-controls {
    margin-top: 80px; display: flex; gap: 40px;
}
.voice-btn {
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: white; width: 60px; height: 60px; border-radius: 50%;
    font-size: 1.5rem; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.voice-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.1); }
.voice-btn.close { background: rgba(255, 59, 59, 0.2); border-color: #ff5c5c; color: #ff5c5c; }
.voice-btn.close:hover { background: rgba(255, 59, 59, 0.4); }

/* Animations */
@keyframes orb-idle { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 0.5; } }
@keyframes orb-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes orb-speak { 0% { transform: scale(1); } 100% { transform: scale(1.2); filter: blur(5px); } }
@keyframes orb-spin { 0% { transform: rotate(0deg) scale(1); border-radius: 40%; } 50% { transform: rotate(180deg) scale(0.8); border-radius: 50%; } 100% { transform: rotate(360deg) scale(1); border-radius: 40%; } }


/* --- HELP TAB STYLES --- */

/* 1. The "How to Use" Grid */
.help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Auto-fit columns */
    gap: 15px;
    margin-bottom: 25px;
}

.help-card {
    background: var(--bg-secondary, #2a2a2a);
    border: 1px solid var(--border-color, #444);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    transition: transform 0.2s, border-color 0.2s;
}

.help-card:hover {
    transform: translateY(-3px);
    border-color: var(--theme-primary, #4a90e2);
    background: var(--bg-tertiary, #333);
}

.help-icon {
    font-size: 1.4rem;
    color: var(--theme-primary, #4a90e2);
    background: rgba(255,255,255,0.05);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 5px;
}

.help-title {
    font-weight: 700;
    font-size: 1rem;
    color: #fff;
}

.help-desc {
    font-size: 0.85rem;
    color: #b0b0b0;
    line-height: 1.5;
}

/* 2. The Tier Comparison Grid */
.tier-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% split */
    gap: 15px;
    margin-bottom: 25px;
}

@media (max-width: 768px) {
    .tier-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
    }
}

.tier-card {
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

/* Distinct Styles for Tiers */
.tier-card.premium {
    border-top: 4px solid #3b82f6; /* Blue Top Border */
}

.tier-card.ultra {
    border-top: 4px solid #ffd700; /* Gold Top Border */
    background: linear-gradient(to bottom, rgba(255, 215, 0, 0.05), rgba(0,0,0,0));
}

.tier-header {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
}

/* List Styling inside Tiers */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: #ccc;
    line-height: 1.4;
}

.feature-list li i {
    margin-top: 3px;
    flex-shrink: 0;
}

/* Contact Card */
.contact-card {
    background: var(--bg-secondary, #252526);
    border: 1px dashed var(--border-color, #444);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* === NEW: CAPABILITIES HIGHLIGHTS === */
.capabilities-wrapper {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 10px; /* Space before the model pills */
    flex-wrap: wrap;
}

.cap-badge {
    background: rgba(10, 10, 10, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-align: left;
    transition: transform 0.3s ease, border-color 0.3s ease;
    cursor: default;
    backdrop-filter: blur(8px);
}

.cap-badge:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Auto-Routing Styles */
.cap-icon-box {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.route-icon { color: #4a90e2; }
.orb-icon { color: #bf5af2; }

.cap-text {
    display: flex;
    flex-direction: column;
}

.cap-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cap-desc {
    font-size: 0.75rem;
    color: #aaa;
}

/* Orb Animation */
.orb-pulse {
    width: 12px;
    height: 12px;
    background: #bf5af2;
    border-radius: 50%;
    box-shadow: 0 0 15px #bf5af2;
    animation: orb-glow 2s infinite ease-in-out;
}

@keyframes orb-glow {
    0% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 10px #bf5af2; }
    50% { transform: scale(1.1); opacity: 1; box-shadow: 0 0 25px #bf5af2; }
    100% { transform: scale(0.9); opacity: 0.7; box-shadow: 0 0 10px #bf5af2; }
}
/* =========================================
   1. SIDEBAR USER TIER & BADGES
   ========================================= */
#sidebar-user-tier {
    font-size: 0.85rem;
    margin-top: 4px;
    margin-bottom: 4px;
    display: block;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Helper to hide elements (Used for Ultra users to hide upgrade button) */
.hidden-el {
    display: none !important;
}

/* =========================================
   2. HEADER UPGRADE PILL BUTTON
   ========================================= */
.header-pill-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%); /* Green Default */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    margin-left: auto; /* Pushes it to the right if in flex container */
}

.header-pill-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Premium Mode (Blue - "Get Ultra") */
.header-pill-btn.premium-mode {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 5px rgba(59, 130, 246, 0.3);
}

/* =========================================
   3. TOAST NOTIFICATIONS (Auth.js Support)
   ========================================= */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ask-ai-toast {
    /* Pre-existing corruption, found and fixed 2026-08-25 while diagnosing an
       unrelated CSS layout bug: this rule was truncated mid-declaration
       ("background: #1", no closing brace), leaving every rule after it in
       this file unparseable by the browser's CSS engine (its opening brace
       was never closed, so everything downstream was consumed as its own
       body). Restored using app.html's own complete, correct definition of
       this exact class (public/app.html:1059) as the source of truth. */
    pointer-events: auto;
    background: var(--bg-secondary, #1c1c1c);
    color: var(--text-primary, #fff);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--theme-primary, #4a90e2);
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    min-width: 250px;
    max-width: 350px;
}

/* =================================================================
   🛑 FIX: FORCE VISIBLE TEXT IN SUB-MODALS (Light Mode)
   ================================================================= */

/* 1. Force the Modal Background to White */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-modal,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .theme-modal {
    background-color: #ffffff !important;
    border-color: #e0e0e0 !important;
}

/* 2. Force Headers (Theme, Wallpaper, etc.) to Black */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-modal-header h3,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .theme-modal-header h3 {
    color: #000000 !important;
}

/* 3. Force the Close 'X' Button to Dark Grey */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-modal-header button,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .theme-modal-header button {
    color: #555555 !important;
    background: rgba(0,0,0,0.05) !important;
}

/* 4. Force the Item Labels (The text under the circles/previews) to Black */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-list-label {
    color: #1c1c1c !important;
    font-weight: 600 !important; /* Make it slightly bolder for readability */
    text-shadow: none !important;
}

/* 5. Add a hover effect so you can see which item you are picking */
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .wallpaper-list-item:hover {
    background-color: #f0f0f0 !important;
    border-color: #ccc !important;
}

/* Theme picker used to be force-converted to a single horizontally-scrolling
   row here ("HORIZONTAL SCROLL FIX FOR THEME SELECTION" — present since this
   branch's very first commit, also live on main). Removed 2026-08-25, owner
   report: "why does my themes scroll and not fill the page like before" —
   #theme-modal-list shares the base .wallpaper-list class (app.html) with
   the wallpaper/accent-colour/user-colour pickers, which were never
   overridden this way and already render as a normal filling/wrapping grid
   (display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr))).
   Deleting this theme-only override just lets it fall back to that same
   grid, matching the other three pickers and how it apparently used to look. */
#theme-modal-list .wallpaper-list-item.selected .theme-preview-box {
    box-shadow: 0 0 0 3px var(--theme-primary, #4a90e2), 0 8px 20px rgba(0,0,0,0.4);
    transform: scale(1.05);
    transition: all 0.2s ease;
}




/* Container for actions below/beside the message */
.ai-action-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Aligns to right of bubble */
    margin-top: 4px;
    padding: 0 5px;
    width: 100%;
}

/* The Report Button itself */
.flag-btn {
    background: transparent;
    border: none;
    color: #888; /* Visible Grey */
    font-size: 12px;
    cursor: pointer;
    padding: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0.7;
    transition: all 0.2s;
}

.flag-btn:hover {
    opacity: 1;
    color: #ff4444; /* Red on hover */
    background: rgba(255, 0, 0, 0.1);
    border-radius: 4px;
}

/* Text label next to icon */
.flag-text {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

/* === FOLDER MANAGER MODAL (Mirrors Prompt Library) === */
#folder-manager-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.8); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
    backdrop-filter: blur(5px); opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
}
#folder-manager-overlay.active { opacity: 1; pointer-events: auto; }

.folder-modal {
    width: 90%; max-width: 900px; height: 85vh;
    background: #121212; border: 1px solid #333;
    border-radius: 16px; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease;
}
#folder-manager-overlay.active .folder-modal { transform: scale(1); }

/* Header */
.folder-header {
    padding: 20px; border-bottom: 1px solid #333;
    display: flex; justify-content: space-between; align-items: center;
    background: #1a1a1a;
}
.folder-header h2 { margin: 0; font-size: 1.2rem; color: #fff; display: flex; gap: 10px; align-items: center; }

/* Body Layout */
.folder-body { display: flex; flex: 1; overflow: hidden; }

/* Left Sidebar (Folder List) */
.folder-sidebar {
    width: 240px; background: #0f0f0f; border-right: 1px solid #333;
    padding: 15px; display: flex; flex-direction: column; gap: 5px;
    overflow-y: auto;
}

.folder-btn {
    background: transparent; border: none; color: #888;
    padding: 12px 15px; text-align: left; cursor: pointer;
    border-radius: 8px; font-weight: 600; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: space-between;
    transition: all 0.2s;
}
.folder-btn:hover { background: rgba(255,255,255,0.05); color: #ccc; }
.folder-btn.active { background: #252525; color: var(--theme-primary, #4a90e2); border-left: 3px solid var(--theme-primary, #4a90e2); }

.folder-count { font-size: 0.75em; background: rgba(255,255,255,0.1); padding: 2px 6px; border-radius: 10px; }

/* Right Content (Chat Grid) */
.folder-content-area {
    flex: 1; padding: 30px; overflow-y: auto; background: #121212;
}
.folder-chats-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.folder-chat-card {
    background: #1e1e1e; border: 1px solid #333; border-radius: 12px;
    padding: 15px; cursor: pointer; transition: all 0.2s;
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
}
.folder-chat-card:hover {
    border-color: var(--theme-primary, #4a90e2); transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.chat-card-title { font-weight: 600; color: #eee; font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-card-date { font-size: 0.8em; color: #666; }

/* Context Menu for Moving Chats */
.chat-move-btn {
    position: absolute; top: 10px; right: 10px;
    background: rgba(0,0,0,0.5); border: none; color: #fff;
    width: 24px; height: 24px; border-radius: 50%;
    cursor: pointer; opacity: 0; transition: opacity 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.folder-chat-card:hover .chat-move-btn { opacity: 1; }

/* Add Button */
#add-folder-btn {
    margin-top: auto; padding: 12px; background: var(--theme-primary, #4a90e2);
    color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 8px;
}
#add-folder-btn:hover { filter: brightness(1.1); }

/* === SETTINGS TABS COMPACT FIX === */

/* 1. Make the container scrollable horizontally (swipeable) */
.settings-tabs {
    display: flex;
    flex-wrap: nowrap !important; /* Force single line */
    overflow-x: auto !important;  /* Allow scrolling if too wide */
    gap: 5px !important;          /* Reduce gap between buttons */
    padding: 0 10px !important;   /* Reduce side padding */
    
    /* Hide scrollbar for cleaner look */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

/* Hide scrollbar for Chrome/Safari/Opera */
.settings-tabs::-webkit-scrollbar {
    display: none;
}

/* 2. Make the buttons smaller and tighter */
.tab-btn {
    padding: 12px 10px !important; /* Reduce padding inside button */
    font-size: 0.9rem !important;  /* Slightly smaller text */
    white-space: nowrap !important; /* Prevent text wrapping */
    flex-shrink: 0; /* Prevent buttons from squishing too much */
}

/* 3. Optional: Rename "Knowledge Base" to "Library" in HTML if preferred */
/* If you can't change the HTML, this CSS trick visually renames it */
/* button[data-tab="knowledge-base"] { font-size: 0 !important; }
button[data-tab="knowledge-base"]::after { content: "Library"; font-size: 0.9rem; }
*/

/* Highlights Audio files in Orange */
.file-preview-item .fa-file-audio {
    color: #ff9f43; 
}

/* Highlights PDFs in Red */
.file-preview-item .fa-file-pdf {
    color: #ff5c5c;
}

/* === PODCAST MODE OVERLAY (FINAL FIX) === */
#podcast-overlay {
    position: fixed;
    bottom: -250px; /* Start hidden */
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 450px;
    
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 24px;
    padding: 20px 25px;
    
    display: flex;
    align-items: center;
    gap: 20px;
    
    box-shadow: 0 20px 60px rgba(0,0,0,0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 99999;
    
    transition: bottom 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Slide Up when Active */
#podcast-overlay.active {
    bottom: 30px !important;
}

/* Visualizer Container */
.podcast-visualizer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    width: 50px;
    flex-shrink: 0;
}

/* The Bars */
.podcast-bar {
    width: 5px;
    height: 10%; /* Default low height */
    background: #fff;
    border-radius: 99px;
    transition: height 0.2s ease;
}

/* ANIMATION: Only runs when 'playing' class is present */
#podcast-overlay.playing .podcast-bar {
    animation: sound-wave 0.5s ease-in-out infinite alternate;
}

/* Color & Stagger delays */
.podcast-bar:nth-child(1) { background: #4a90e2; animation-delay: 0.0s; }
.podcast-bar:nth-child(2) { background: #9013fe; animation-delay: 0.2s; }
.podcast-bar:nth-child(3) { background: #ff0055; animation-delay: 0.4s; }
.podcast-bar:nth-child(4) { background: #9013fe; animation-delay: 0.1s; }
.podcast-bar:nth-child(5) { background: #4a90e2; animation-delay: 0.3s; }

@keyframes sound-wave {
    0% { height: 10%; }
    100% { height: 100%; }
}

/* Info Section */
.podcast-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

.podcast-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.podcast-status {
    font-size: 0.75rem;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
    font-weight: 600;
}

/* Controls */
.podcast-controls {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

.pod-btn {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 1rem;
}

.pod-btn:hover { background: rgba(255,255,255,0.2); transform: scale(1.05); }
.pod-btn.close { background: rgba(255, 59, 59, 0.2); border-color: rgba(255, 59, 59, 0.3); color: #ff5c5c; }
.pod-btn.close:hover { background: rgba(255, 59, 59, 0.4); }


/* =========================================================
   ANDROID COMPACT LAYOUT FIXES
   ========================================================= */

/* 1. TIGHTEN HEADER ICONS (Make them fit) */
.header-right {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important; /* Reduce gap between icons (was likely 10px) */
    padding-right: 0 !important; /* Remove right padding to save space */
}

.header-icon-btn {
    padding: 6px !important; /* Smaller touch target padding */
    width: 34px !important;  /* Force smaller width */
    height: 34px !important;
    min-width: 0 !important; /* Allow shrinking */
    justify-content: center !important;
}

/* Optional: Make icons slightly smaller on mobile to ensure fit */
.header-icon-btn i {
    font-size: 0.9rem !important; 
}


/* 2. FIX SETTINGS MODAL SCROLLING & CUTOFF */
/* This forces the modal to stay within the screen and scroll internally */

#universal-settings-modal {
    display: flex !important;
    flex-direction: column !important;
    /* Constrain height so it doesn't go off-screen */
    max-height: 85vh !important; 
    height: 85vh !important; 
    overflow: hidden !important; /* Prevent the modal box itself from scrolling */
}

/* Force the header and tabs to stay visible at the top */
.settings-header, .settings-tabs {
    flex-shrink: 0 !important; 
}

/* Make the content area fill the rest and SCROLL */
.settings-content-container {
    flex: 1 !important; /* Takes up all remaining space */
    overflow-y: auto !important; /* Enables scrolling for this part only */
    -webkit-overflow-scrolling: touch; /* Smooth scroll for Android */
    padding-bottom: 50px !important; /* Add space at bottom so text isn't cut off */
}

/* Fix Heading/Label Wrapping */
.settings-section h3, 
.settings-section label,
.section-label {
    white-space: normal !important; /* Allow text to wrap to next line */
    overflow: visible !important;
    line-height: 1.4 !important;
}

/* =========================================================
   PROMPT LIBRARY MOBILE FIXES
   ========================================================= */

/* 1. Fix the Main Modal Container */
.prompt-modal {
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important; /* Cap the height */
    height: 85vh !important;
    overflow: hidden !important; /* Stop the whole box from scrolling */
}

/* 2. Fix the Header (Stop overlap) */
.prompt-header {
    flex-shrink: 0 !important; /* Keep header strictly at the top */
    min-height: 60px; /* Ensure minimum space */
}

/* 3. Fix the Body Area (Allow scrolling) */
.prompt-body {
    flex: 1 !important; /* Fill remaining space */
    display: flex !important;
    flex-direction: row !important; /* Default to side-by-side */
    overflow: hidden !important; /* Internal parts scroll, not this wrapper */
}

/* 4. Fix Mobile Layout (Stacking) */
@media (max-width: 768px) {
    .prompt-body {
        flex-direction: column !important; /* Stack sidebar on top of grid */
    }

    /* Fix Sidebar (Categories) */
    .prompt-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 120px !important; /* Limit height */
        min-height: 60px;
        flex-direction: row !important; /* Horizontal scroll for buttons */
        overflow-x: auto !important; /* Scroll sideways */
        overflow-y: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-color, #333) !important;
        padding: 10px !important;
        flex-shrink: 0 !important; /* Don't shrink */
        white-space: nowrap !important;
    }
    
    /* Fix the Buttons inside Sidebar */
    .category-btn {
        display: inline-flex !important;
        width: auto !important;
        margin-right: 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    /* Fix the Grid Area (The main scrolling part) */
    .prompt-grid-container {
        flex: 1 !important; /* Fill the rest of the height */
        overflow-y: auto !important; /* Enable vertical scroll */
        padding: 15px !important;
        padding-bottom: 50px !important; /* Space for bottom navigation/safe area */
    }
}

/* 5. Fix Heading Overlap inside Cards */
.prompt-card h4 {
    white-space: normal !important; /* Allow wrapping */
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    height: auto !important;
}

.prompt-card p {
    white-space: normal !important;
}


/* =========================================
       MOBILE SCROLL FIX (PROMPT LIBRARY & TABS)
       ========================================= */
    @media (max-width: 768px) {
        /* 1. Target the container of the buttons */
        /* We target settings-tabs AND likely class names for the prompt library */
        .settings-tabs,
        .prompt-categories, 
        .library-tabs,
        .prompt-filter-container,
        /* Fallback: Select any flex container inside a modal header that contains buttons */
        [id*="prompt"] header + div, 
        [id*="prompt"] nav {
            display: flex !important;
            flex-wrap: nowrap !important;       /* Prevent wrapping to next line */
            overflow-x: auto !important;        /* Enable horizontal scrolling */
            justify-content: flex-start !important; /* Align to start */
            gap: 12px !important;               /* Space between buttons */
            padding: 5px 2px !important;        /* Padding for touch area */
            width: 100% !important;
            -webkit-overflow-scrolling: touch;  /* Smooth scrolling on iOS */
            
            /* Hide Scrollbar */
            scrollbar-width: none; 
            -ms-overflow-style: none;
        }
        
        /* Hide scrollbar for Chrome/Safari */
        .settings-tabs::-webkit-scrollbar,
        .prompt-categories::-webkit-scrollbar {
            display: none;
        }

        /* 2. CRITICAL: Stop the buttons from squishing */
        .settings-tabs button,
        .settings-tabs .tab-btn,
        .prompt-categories button,
        .library-tabs button,
        [id*="prompt"] header + div button,
        [id*="prompt"] nav button {
            flex: 0 0 auto !important;      /* Don't grow, don't shrink, auto width */
            flex-shrink: 0 !important;      /* Force them to keep their width */
            white-space: nowrap !important; /* Prevent text wrapping inside button */
            width: auto !important;
            min-width: auto !important;
            max-width: 100% !important;
        }
    }

    /* Hide the Share button in the header ONLY on mobile */
@media (max-width: 768px) {
    /* Option 1: If your button has a specific ID (e.g., #header-share-btn), use that */
    #header-share-btn {
        display: none !important;
    }

    /* Option 2: Target by the icon class (Works in modern browsers) */
    .controls-header button:has(.fa-share-nodes),
    .sidebar-header button:has(.fa-share-nodes) {
        display: none !important;
    }
}

/* Add this block to your <style> section in app.html or in your style.css */

@media (max-width: 600px) {
    /* 1. Force the Popover container to behave predictably */
    #model-popover {
        /* CRITICAL: Set a maximum height to keep it on screen */
        max-height: 80vh !important; /* Cap height to 80% of viewport height */
        
        /* Ensure the element can move up if needed when near the bottom */
        transform: translateY(0) !important;
    }
}

/* 2. Apply scrolling to the content grid inside the popover */
/* This ensures the list itself scrolls vertically when the popover is too short */
#model-popover .popover-content {
    /* Set a fluid height that respects the container's max-height */
    height: 100% !important; 
    
    /* CRITICAL: Enable vertical scrolling */
    overflow-y: auto !important; 
    
    /* Ensure scroll is smooth on mobile */
    -webkit-overflow-scrolling: touch;
    
    /* Optional: Hide the scrollbar if you prefer a cleaner look */
    scrollbar-width: none; 
}
#model-popover .popover-content::-webkit-scrollbar {
    display: none;
}

// Add this inside applyPremiumInputStyles or your main CSS file
const styleUpgrade = document.createElement('style');
styleUpgrade.innerHTML = `
    /* --- 1. UPGRADED MINI-MENU (The + Button Menu) --- */
    .action-button-grid {
        /* Deep Glass Effect */
        background: rgba(18, 18, 24, 0.85) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        
        /* Premium Border */
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        box-shadow: 0 20px 40px rgba(0,0,0,0.6), 
                    inset 0 1px 0 rgba(255,255,255,0.1) !important;
        border-radius: 24px !important;
    }

    .action-btn {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid transparent !important;
        transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .action-btn:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        transform: translateY(-2px) !important;
        border-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    }

    /* --- 2. UPGRADED CUSTOM MODAL (Replaces the white prompt) --- */
    .custom-modal {
        background: #151515 !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-radius: 20px !important;
        box-shadow: 0 25px 60px rgba(0,0,0,0.8) !important;
        font-family: 'Inter', sans-serif !important;
    }

    #modal-title {
        /* Solid ink: the old white->grey gradient text fill faded half the
           title and defeated every theme color override. */
        font-size: 1.4rem !important;
    }

    .modal-input {
        background: #0a0a0a !important;
        border: 1px solid #333 !important;
        color: #fff !important;
        border-radius: 12px !important;
        padding: 16px !important;
        font-size: 1rem !important;
        transition: 0.3s ease !important;
    }

    .modal-input:focus {
        border-color: #4a90e2 !important;
        box-shadow: 0 0 0 4px rgba(74, 144, 226, 0.15) !important;
        background: #000 !important;
    }
    
    .modal-btn.primary {
        background: linear-gradient(135deg, #4a90e2, #357abd) !important;
        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
        transition: transform 0.2s !important;
    }
    
    .modal-btn.primary:active {
        transform: scale(0.96) !important;
    }
`;
document.head.appendChild(styleUpgrade);


/* GPT-6.1 Sol Specific Button Style */
.tier-gpt5\.2 { /* Escaping the dot is important in CSS */
    background: linear-gradient(135deg, #10a37f 0%, #0d8a6a 100%) !important; /* OpenAI Green vibe */
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 0 15px rgba(16, 163, 127, 0.4) !important;
}

/* Lock Icon on Wallpapers */
.wallpaper-list-item .lock-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    background: rgba(0,0,0,0.6);
    color: #ffd700; /* Gold */
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    backdrop-filter: blur(2px);
    z-index: 5;
}

/* --- Limit Reached Modal Styles --- */

#limit-reached-overlay {
    /* Use the same overlay styles as your other modals */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#limit-reached-modal {
    background: var(--bg-primary, #1c1c1c); /* Dark Background */
    border: 1px solid var(--border-color, #444);
    border-radius: 16px;
    width: 90%;
    max-width: 380px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: var(--text-primary, #fff);
}

#limit-reached-modal h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    font-weight: 700;
}

#limit-reached-modal p {
    color: var(--text-secondary, #ccc);
    font-size: 0.95rem;
    margin: 0 0 25px 0; /* Space before buttons */
}

/* Button Container - Key to layout */
#limit-reached-buttons {
    display: flex;
    flex-direction: column; /* Stack vertically for better mobile tap target */
    gap: 12px;
}

/* Primary Action: Sign Up */
#limit-confirm-yes {
    /* Inherits styling from .action-btn, but we force the primary look */
    background: var(--theme-primary, #4a90e2) !important;
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    border: 1px solid var(--theme-primary, #4a90e2);
}

#limit-confirm-yes:hover {
    background: var(--theme-hover, #357ab8) !important;
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb, 74, 144, 226), 0.4);
    transform: translateY(-1px);
}

/* Secondary Action: Not Now */
#limit-confirm-no {
    /* Override inline style and make it a subtle secondary button */
    background: transparent !important;
    color: var(--text-secondary, #aaa) !important; 
    border: 1px solid var(--border-color, #444) !important;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

#limit-confirm-no:hover {
    background: var(--bg-secondary, #2a2a2a) !important;
    color: var(--text-primary, #fff) !important;
    border-color: var(--theme-primary, #4a90e2) !important;
}

/* Small mobile screens: put them side-by-side */
@media (min-width: 350px) {
    #limit-reached-buttons {
        flex-direction: row; /* Buttons side-by-side */
        justify-content: space-between;
    }
    #limit-confirm-yes, #limit-confirm-no {
        flex: 1; /* Make them equal width */
    }
}

/* =================================================================
   🚀 ULTIMATE REPAIR: DAILY LIMIT MODAL BUTTONS
   ================================================================= */

/* 1. Force the container to be a horizontal flexbox */
body #limit-reached-overlay #limit-reached-modal #limit-reached-buttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 30px !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* 2. Strip away the circular shape and fixed dimensions */
body #limit-reached-overlay #limit-reached-modal #limit-reached-buttons .action-btn,
body #limit-reached-overlay #limit-reached-modal #limit-confirm-yes,
body #limit-reached-overlay #limit-reached-modal #limit-confirm-no {
    /* RESET DIMENSIONS */
    width: auto !important;
    height: auto !important;
    min-width: 140px !important; /* Wide enough for text */
    min-height: unset !important; /* Remove the 48px global min-height */
    padding: 12px 20px !important;
    
    /* FIX SHAPE */
    border-radius: 50px !important; /* Forces Pill Shape */
    
    /* FIX TEXT */
    white-space: nowrap !important; /* CRITICAL: Prevents stacking text */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important; /* Removes link underline */
    line-height: 1 !important;
}

/* 3. Cyan Gradient for "SIGN UP FREE" */
body #limit-reached-overlay #limit-reached-modal #limit-confirm-yes {
    background: linear-gradient(135deg, #00BFFF, #009ACD) !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: 0 5px 15px rgba(0, 191, 255, 0.4) !important;
}

/* 4. Glass Effect for "WAIT 24 HOURS" */
body #limit-reached-overlay #limit-reached-modal #limit-confirm-no {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

/* Hover effects */
body #limit-reached-overlay #limit-reached-modal #limit-confirm-yes:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.6) !important;
}

body #limit-reached-overlay #limit-reached-modal #limit-confirm-no:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* RTL Support - Text Only Alignment */
body.rtl-text-only .message, 
body.rtl-text-only #welcome-message-content,
body.rtl-text-only #message-input,
body.rtl-text-only .history-item-details,
body.rtl-text-only .section-label,
body.rtl-text-only .section-desc {
    text-align: right !important;
    direction: rtl !important;
}

/* Maintain the icon positions in the sidebar */
body.rtl-text-only .history-item {
    flex-direction: row; /* Forces it not to flip */
}

/* Keep layout fixed, but align text for Urdu, Arabic, etc. */
.rtl-text-only #message-input,
.rtl-text-only .message-content,
.rtl-text-only .welcome-title,
.rtl-text-only .welcome-subtitle {
    text-align: right !important;
    direction: rtl !important;
}

/* Ensure the typing container doesn't move buttons to the wrong side */
.rtl-text-only .input-container {
    direction: ltr !important; 
}

/* === UNIVERSAL MODEL SELECTOR (Body Injection Fix) === */

/* The Full Screen Overlay */
#universal-model-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 999999; /* Highest priority */
    display: flex;
    justify-content: center; /* Center Horizontal */
    align-items: center;     /* Center Vertical (Desktop Default) */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

#universal-model-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* The Card/Sheet Itself */
.universal-sheet {
    background: #1a1a1a;
    width: 90%;
    max-width: 450px;
    max-height: 80vh;
    border: 1px solid #333;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.8);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

#universal-model-overlay.active .universal-sheet {
    transform: scale(1);
}

/* Mobile Bottom Sheet Override */
@media (max-width: 768px) {
    #universal-model-overlay {
        align-items: flex-end; /* Push to bottom */
    }
    .universal-sheet {
        width: 100%;
        max-width: 100%;
        border-radius: 24px 24px 0 0; /* Round top only */
        border-bottom: none;
        transform: translateY(100%); /* Start off-screen down */
        margin-bottom: 0;
    }
    #universal-model-overlay.active .universal-sheet {
        transform: translateY(0); /* Slide up */
    }
}

/* Header & Content Styling */
.us-header {
    padding: 15px 20px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #222;
}
.us-header h3 { margin: 0; color: #fff; font-size: 1.1rem; }
.us-close-btn { background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer; }

.us-content {
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.us-tier-label {
    font-size: 0.75rem; font-weight: 800; letter-spacing: 1px; 
    margin-bottom: 10px; color: #666; display: block;
}
.us-tier-label.free { color: #10b981; }
.us-tier-label.premium { color: #3b82f6; }
.us-tier-label.ultra { color: #ff4444; }

.us-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 400px) { .us-grid { grid-template-columns: 1fr; } }

.us-option {
    background: #252525; border: 1px solid #333; color: #ccc;
    padding: 12px; border-radius: 12px; cursor: pointer;
    display: flex; align-items: center; gap: 10px; text-align: left;
    transition: 0.2s;
}
.us-option:hover { background: #333; transform: translateY(-2px); }
.us-option.active { border-color: #fff; background: rgba(255,255,255,0.1); color: #fff; }
.us-option.premium.active { border-color: #3b82f6; background: rgba(59, 130, 246, 0.15); }
.us-option.ultra.active { border-color: #ff4444; background: rgba(255, 68, 68, 0.15); }

.us-footer { padding: 20px; background: #151515; border-top: 1px solid #333; }
.us-persona-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 5px; }
.us-persona-btn { 
    background: #252525; border: 1px solid #333; color: #aaa; 
    padding: 6px 14px; border-radius: 20px; white-space: nowrap; cursor: pointer; 
}
.us-persona-btn.active { background: #4a90e2; color: #fff; border-color: #4a90e2; }


/* Container must have a solid base color to fade into */
#live-wallpaper-container {
    background-color: #000; /* Dark mode default */
    transition: background-color 0.5s ease;
}

.light-mode #live-wallpaper-container {
    background-color: #f0f0f0; /* Light mode default */
}

/* Cinematic Fade Keyframes */
@keyframes cinematicLoop {
    0% { opacity: 0; }
    5% { opacity: 1; }   /* Quickly fade in */
    95% { opacity: 1; }  /* Stay visible for most of the loop */
    100% { opacity: 0; } /* Fade out right before the jump */
}

/* Targeting your specific video IDs from wallpapers.js */
[id^="background-video-player"] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    will-change: opacity;
    /* Animation duration is handled dynamically in JS below */
    animation: cinematicLoop 10s infinite ease-in-out;
}

html.light-mode #speech-lang-badge-display {
    color: #000 !important;
    background: rgba(0,0,0,0.1) !important;
}

/* Trial Highlight Badge */
.trial-badge-floating {
    background: var(--accent-green);
    color: #000;
    padding: 6px 15px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    display: inline-block;
    margin-bottom: 1rem;
    box-shadow: 0 0 20px rgba(46, 204, 113, 0.3);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}


/* Container for the buttons */
#limit-buttons-v2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
}

/* Shared Button Styles */
.limit-btn {
    width: 100%;
    padding: 14px 20px;
    border-radius: 50px; /* Pill shape */
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit; /* Inherit font from body */
    box-sizing: border-box; /* Ensures padding doesn't widen element */
}

/* SPECIFIC FIX FOR LINKS ("<a>" tags) */
a.limit-btn {
    text-decoration: none !important; /* Removes purple underline */
    line-height: normal; /* Fixes vertical alignment */
}

/* Secondary Style (White Box like in your screenshot) */
.limit-btn-secondary {
    background-color: #ffffff;
    color: #000000 !important; /* Force black text */
    border: 1px solid #e0e0e0;
}

.limit-btn-secondary:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}

/* Optional: Icon wrapper style if you need it */
.modal-icon-wrapper {
    margin-bottom: 15px;
    font-size: 2rem;
    color: #ffffff;
}


/* Realtime Voice Styles */
.loading-pulse {
    animation: pulse-gold 1.5s infinite;
    color: #ffd700 !important;
    border-color: #ffd700 !important;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}

.active-realtime {
    background-color: #ff4444 !important;
    color: white !important;
    border-color: #ff4444 !important;
    animation: pulse-red 2s infinite;
    box-shadow: 0 0 15px rgba(255, 68, 68, 0.4);
}

@keyframes pulse-gold {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-red {
    0% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(255, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 68, 68, 0); }
}

#wallpaper-modal-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    max-height: 450px; /* Adjust based on your screen size */
    overflow-y: auto !important; /* THIS ALLOWS SCROLLING */
    padding: 10px;
}

/* --- Music Player Card --- */
.music-player-container {
    background: rgba(30, 30, 35, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
    margin-top: 15px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    gap: 15px;
    backdrop-filter: blur(10px);
}

.music-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.music-icon-glow {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #FFEB3B, #FF9800);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.5rem;
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.3);
}

.music-meta {
    flex: 1;
    overflow: hidden;
}

.music-meta h4 {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.music-meta span {
    color: #888;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Custom Audio Styling */
.music-player-container audio {
    width: 100%;
    height: 35px;
    filter: invert(90%) hue-rotate(180deg) brightness(1.5); /* Makes standard player match dark mode */
}

.music-actions {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.music-dl-btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    padding: 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.music-dl-btn:hover {
    background: #FFEB3B;
    color: #000;
}

/* --- 🎵 Professional Music Studio UI --- */
.music-player-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 25px;
    width: 100%;
    max-width: 450px;
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    animation: slideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lyrics-container {
    margin-top: 20px;
    height: 120px;
    overflow-y: auto;
    mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
    scrollbar-width: none;
}

.lyric-line {
    font-size: 0.95rem;
    color: #555;
    padding: 8px 0;
    transition: all 0.3s ease;
    text-align: center;
    font-weight: 500;
}

.lyric-line.active {
    color: #FFEB3B;
    transform: scale(1.1);
    text-shadow: 0 0 15px rgba(255, 235, 59, 0.5);
}

/* Custom Progress Bar */
.music-seeker {
    width: 100%;
    height: 6px;
    background: #333;
    border-radius: 10px;
    margin: 20px 0 10px;
    cursor: pointer;
    position: relative;
}

.seeker-fill {
    height: 100%;
    background: linear-gradient(90deg, #FFEB3B, #FF9800);
    border-radius: 10px;
    width: 0%;
}

/* ==========================================================================
   ASK SARY GLOSS WORKSPACE SYSTEM
   Shared visual language for tools, builders, studios and multi-step flows.
   This intentionally sits at the end of the stylesheet so legacy components
   inherit the new product language without changing their working logic.
   ========================================================================== */
:root {
    --gloss-ink: #172033;
    --gloss-ink-strong: #0f172a;
    --gloss-muted: #697386;
    --gloss-faint: #98a2b3;
    --gloss-line: rgba(148, 163, 184, 0.28);
    --gloss-line-strong: rgba(100, 116, 139, 0.34);
    --gloss-white: rgba(255, 255, 255, 0.94);
    --gloss-white-soft: rgba(255, 255, 255, 0.78);
    --gloss-panel: rgba(248, 250, 252, 0.82);
    --gloss-accent: #635bff;
    --gloss-accent-2: #7c3aed;
    --gloss-accent-soft: rgba(99, 91, 255, 0.10);
    --gloss-success: #0f9f6e;
    --gloss-danger: #dc3d56;
    --gloss-radius-xl: 26px;
    --gloss-radius-lg: 18px;
    --gloss-radius-md: 13px;
    --gloss-shadow:
        0 34px 90px rgba(15, 23, 42, 0.24),
        0 8px 26px rgba(15, 23, 42, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* Shared dimmed, softly lit stage behind every product tool. */
:is(
    #global-modal-overlay,
    #img-flow-wrap,
    #cmd-overlay,
    #visual-lib-overlay,
    #document-gallery-overlay,
    #notepad-overlay,
    #speech-overlay,
    #modeler-overlay,
    #token-tracker-overlay,
    #geek-overlay,
    #org-overlay,
    #agents-overlay,
    #prompt-library-overlay,
    #theme-modal,
    #wallpaper-modal,
    #accent-color-modal,
    #user-color-modal,
    #custom-confirm-overlay,
    #settings-overlay,
    #profile-settings-overlay
) {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
}

:is(
    #global-modal-overlay,
    #cmd-overlay,
    #visual-lib-overlay,
    #document-gallery-overlay,
    #notepad-overlay,
    #speech-overlay,
    #modeler-overlay,
    #token-tracker-overlay,
    #org-overlay,
    #agents-overlay,
    #prompt-library-overlay,
    #custom-confirm-overlay,
    #settings-overlay,
    #profile-settings-overlay
) {
    background:
        radial-gradient(circle at 18% 4%, rgba(129, 140, 248, 0.16), transparent 28%),
        radial-gradient(circle at 86% 92%, rgba(192, 132, 252, 0.12), transparent 31%),
        rgba(15, 23, 42, 0.48) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
}

/* General modal shell. Specialist variants can still refine dimensions. */
#global-modal-overlay .custom-modal {
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(245,247,252,0.93)) !important;
    border: 1px solid rgba(255,255,255,0.76) !important;
    border-radius: var(--gloss-radius-xl) !important;
    box-shadow: var(--gloss-shadow) !important;
}

#global-modal-overlay .modal-icon-wrapper {
    width: 56px;
    height: 56px;
    margin: 0 auto 17px !important;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: var(--gloss-accent) !important;
    background: linear-gradient(145deg, rgba(238, 242, 255, 0.96), rgba(255,255,255,0.78));
    border: 1px solid rgba(129, 140, 248, 0.22);
    box-shadow: 0 12px 28px rgba(99, 91, 255, 0.13), inset 0 1px 0 #fff;
    font-size: 1.35rem !important;
}

#global-modal-overlay :is(#modal-title, .modal-title) {
    color: var(--gloss-ink-strong) !important;
    letter-spacing: -0.025em;
}

#global-modal-overlay #modal-message {
    color: var(--gloss-muted) !important;
    line-height: 1.65;
}

#global-modal-overlay :is(.modal-input, input:not([type="range"]), textarea, select) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid var(--gloss-line) !important;
    border-radius: 13px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.035) !important;
}

#global-modal-overlay :is(.modal-input, input:not([type="range"]), textarea, select):focus {
    border-color: rgba(99, 91, 255, 0.60) !important;
    box-shadow: 0 0 0 4px rgba(99, 91, 255, 0.10) !important;
}

#global-modal-overlay .modal-actions {
    gap: 10px;
}

#global-modal-overlay .modal-btn,
.gloss-button {
    min-height: 42px;
    border-radius: 12px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease !important;
}

#global-modal-overlay .modal-btn.primary,
.gloss-button.primary {
    color: #fff !important;
    background: linear-gradient(135deg, #6d67ff, #7046d9) !important;
    border: 1px solid rgba(91, 76, 220, 0.50) !important;
    box-shadow: 0 10px 22px rgba(99, 91, 255, 0.24), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

#global-modal-overlay .modal-btn.primary:hover,
.gloss-button.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(99, 91, 255, 0.30), inset 0 1px 0 rgba(255,255,255,.28) !important;
}

#global-modal-overlay .modal-btn.secondary,
.gloss-button.secondary {
    color: #4b5565 !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: 0 5px 14px rgba(15,23,42,0.05), inset 0 1px 0 #fff !important;
}

/* Image + video builders share the same full multi-stage flow. */
#img-flow-backdrop {
    background:
        radial-gradient(circle at 20% 8%, rgba(129, 140, 248, 0.17), transparent 30%),
        rgba(15,23,42,0.50) !important;
    backdrop-filter: blur(18px) saturate(120%);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
}

#img-flow-box {
    width: min(500px, calc(100% - 28px)) !important;
    padding: 30px 28px 24px !important;
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(246,248,253,0.94)) !important;
    border: 1px solid rgba(255,255,255,0.82) !important;
    border-radius: 26px !important;
    box-shadow: var(--gloss-shadow) !important;
}

#img-flow-close {
    width: 34px;
    height: 34px;
    top: 13px !important;
    right: 14px !important;
    display: grid;
    place-items: center;
    color: #7c8493 !important;
    background: rgba(241,245,249,0.82) !important;
    border: 1px solid rgba(148,163,184,0.20) !important;
    border-radius: 50% !important;
}

#img-flow-close:hover {
    color: var(--gloss-ink-strong) !important;
    background: #fff !important;
}

#img-flow-box .ifh-title {
    color: var(--gloss-ink-strong) !important;
    font-size: 1.18rem !important;
    letter-spacing: -0.025em;
}

#img-flow-box .ifh-subtitle {
    color: var(--gloss-muted) !important;
    font-size: .82rem !important;
}

#img-flow-box .ifh-dot {
    width: 7px !important;
    height: 7px !important;
    background: #d9dee8 !important;
}

#img-flow-box .ifh-dot.active {
    width: 20px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #6d67ff, #8b5cf6) !important;
    box-shadow: 0 3px 8px rgba(99,91,255,.22);
}

#img-flow-box :is(.ifh-opt, .ifh-style, .ifh-chip) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: 0 5px 14px rgba(15,23,42,0.045), inset 0 1px 0 #fff;
}

#img-flow-box .ifh-opt {
    border-radius: 16px !important;
    padding: 15px 16px !important;
}

#img-flow-box :is(.ifh-opt, .ifh-style, .ifh-chip):hover {
    color: #4338ca !important;
    background: rgba(245,243,255,0.92) !important;
    border-color: rgba(99,91,255,0.42) !important;
    box-shadow: 0 10px 23px rgba(99,91,255,.10), inset 0 1px 0 #fff !important;
}

#img-flow-box :is(.ifh-style, .ifh-chip).active {
    color: #4338ca !important;
    background: linear-gradient(145deg, rgba(238,242,255,.98), rgba(245,243,255,.92)) !important;
    border-color: rgba(99,91,255,.62) !important;
    box-shadow: 0 0 0 2px rgba(99,91,255,.08), inset 0 1px 0 #fff !important;
}

#img-flow-box .ifh-opt .ifh-info small {
    color: var(--gloss-muted) !important;
}

#img-flow-box :is(.ifh-input, input.ifh-input, textarea.ifh-input) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,0.80) !important;
    border: 1px solid var(--gloss-line) !important;
    border-radius: 14px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.035);
}

#img-flow-box :is(.ifh-input, input.ifh-input, textarea.ifh-input)::placeholder {
    color: #8f98a8 !important;
}

#img-flow-box :is(.ifh-input, input.ifh-input, textarea.ifh-input):focus {
    border-color: rgba(99,91,255,.58) !important;
    box-shadow: 0 0 0 4px rgba(99,91,255,.09) !important;
}

#img-flow-box .ifh-section-label {
    color: #667085 !important;
    font-weight: 700;
}

#img-flow-box .ifh-gen-btn {
    min-height: 48px;
    color: #fff !important;
    background: linear-gradient(135deg, #6d67ff, #7046d9) !important;
    border: 1px solid rgba(91,76,220,.45) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 24px rgba(99,91,255,.23), inset 0 1px 0 rgba(255,255,255,.25) !important;
}

#img-flow-box .ifh-gen-btn:disabled {
    color: #9299a7 !important;
    background: #e9ebf1 !important;
    border-color: #e2e5eb !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

#img-flow-box .ifh-back {
    color: #7b8494 !important;
    font-weight: 650;
}

#img-flow-box .ifh-back:hover {
    color: var(--gloss-accent) !important;
}

/* Legacy command centre, kept consistent if this surface is still opened. */
#cmd-overlay .cmd-card {
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,248,252,.94)) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    box-shadow: var(--gloss-shadow) !important;
}

#cmd-overlay .cmd-header {
    background: rgba(255,255,255,.72) !important;
    border-bottom: 1px solid var(--gloss-line) !important;
}

#cmd-overlay .cmd-header h3 {
    color: var(--gloss-ink-strong) !important;
}

#cmd-overlay #close-cmd-btn {
    color: #7c8493 !important;
}

#cmd-overlay .cmd-tabs {
    background: rgba(248,250,252,.82) !important;
    border-bottom: 1px solid var(--gloss-line) !important;
}

#cmd-overlay .cmd-tab {
    color: #7b8495 !important;
}

#cmd-overlay .cmd-tab.active {
    color: #4f46e5 !important;
    background: rgba(99,91,255,.07) !important;
    border-bottom-color: #635bff !important;
}

#cmd-overlay .cmd-category-title {
    color: #7a8495 !important;
    border-bottom-color: rgba(148,163,184,.22) !important;
}

#cmd-overlay .cmd-item {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.70) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: 0 7px 18px rgba(15,23,42,.045), inset 0 1px 0 #fff;
}

#cmd-overlay .cmd-item:hover {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(99,91,255,.34) !important;
    box-shadow: 0 14px 28px rgba(15,23,42,.09), inset 0 1px 0 #fff !important;
}

#cmd-overlay .cmd-item span {
    color: #465165 !important;
}

/* 2026-08-30 owner (phone, Serenity/black + dark): the gloss card above is a
   light-surface treatment — under any dark contrast it rendered grey cards
   with near-invisible descriptions. Dark contrast gets its own card. */
html:not(.light-mode):not(.theme-contrast-light) #cmd-overlay .cmd-item {
    background: #23252c !important;
    border: 1px solid #383c46 !important;
    color: #e7ebf3 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.35) !important;
}
html:not(.light-mode):not(.theme-contrast-light) #cmd-overlay .cmd-item:hover {
    background: #2c2f38 !important;
    border-color: #4b5261 !important;
}
html:not(.light-mode):not(.theme-contrast-light) #cmd-overlay .cmd-item span {
    color: #b8c1d1 !important;
}

/* Reusable makeover for richer, independently mounted tool workspaces. */
:is(
    .notepad-modal,
    .speech-modal,
    .visual-modal,
    .modeler-modal,
    .tracker-modal,
    .dg-modal,
    .org-modal,
    .prompt-modal,
    .folder-modal,
    .agent-modal,
    .voice-overlay-content,
    .geek-panel
) {
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,248,252,.94)) !important;
    border: 1px solid rgba(255,255,255,.80) !important;
    border-radius: var(--gloss-radius-xl) !important;
    box-shadow: var(--gloss-shadow) !important;
}

:is(
    .notepad-modal,
    .speech-modal,
    .visual-modal,
    .modeler-modal,
    .tracker-modal,
    .dg-modal,
    .org-modal,
    .prompt-modal,
    .folder-modal,
    .agent-modal,
    .voice-overlay-content,
    .geek-panel
) :is(h1,h2,h3,h4,h5,strong,.title) {
    color: var(--gloss-ink-strong) !important;
}

:is(
    .notepad-modal,
    .speech-modal,
    .visual-modal,
    .modeler-modal,
    .tracker-modal,
    .dg-modal,
    .org-modal,
    .prompt-modal,
    .folder-modal,
    .agent-modal,
    .voice-overlay-content,
    .geek-panel
) :is(p,small,label,.subtitle,.description,.meta) {
    color: var(--gloss-muted) !important;
}

:is(
    .notepad-modal,
    .speech-modal,
    .visual-modal,
    .modeler-modal,
    .tracker-modal,
    .dg-modal,
    .org-modal,
    .prompt-modal,
    .folder-modal,
    .agent-modal
) :is(input:not([type="range"]),textarea,select) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid var(--gloss-line) !important;
    border-radius: 12px !important;
}

/* Cards and tab panels inside libraries, agents, documents and organisation. */
:is(
    .visual-modal,
    .dg-modal,
    .org-modal,
    .agent-modal,
    .tracker-modal,
    .notepad-modal,
    .prompt-modal
) :is(
    .visual-item,
    .dg-card,
    .org-tab-panel,
    .agent-card,
    .voice-card,
    .podcast-card,
    .sw-card,
    .eq-card,
    .chat-card,
    .music-export-card,
    .tool-card
) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.70) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: 0 7px 20px rgba(15,23,42,.05), inset 0 1px 0 #fff !important;
}

/* Generic confirmation dialog. */
.confirm-modal {
    color: var(--gloss-ink) !important;
    background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,248,252,.95)) !important;
    border: 1px solid rgba(255,255,255,.80) !important;
    border-radius: 22px !important;
    box-shadow: var(--gloss-shadow) !important;
}

.confirm-modal h3 { color: var(--gloss-ink-strong) !important; }
.confirm-modal p { color: var(--gloss-muted) !important; }

/* Settings and appearance pickers are product workspaces too. */
:is(.settings-modal, .theme-modal, .wallpaper-modal) {
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,248,252,.94)) !important;
    border: 1px solid rgba(255,255,255,.80) !important;
    box-shadow: var(--gloss-shadow) !important;
}

:is(.settings-modal, .theme-modal, .wallpaper-modal) :is(h1,h2,h3,h4,strong) {
    color: var(--gloss-ink-strong) !important;
}

:is(.settings-modal, .theme-modal, .wallpaper-modal) :is(p,label,small,span:not(.badge)) {
    color: var(--gloss-muted);
}

/* Keep code, waveform and media preview canvases intentionally dark. */
:is(
    .CodeMirror,
    #code-preview-frame,
    #canvas-code-area,
    #canvas-diagram-panel,
    #three-canvas-container,
    .waveform,
    audio,
    video
) {
    color-scheme: dark;
}

@media (max-width: 700px) {
    #img-flow-box {
        width: calc(100% - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 27px 17px 20px !important;
        border-radius: 22px !important;
    }

    #img-flow-box .ifh-styles {
        gap: 9px !important;
    }

    #global-modal-overlay:not([data-variant="web-architect"]) {
        padding: 10px !important;
    }

    #global-modal-overlay:not([data-variant="web-architect"]) .custom-modal {
        width: calc(100% - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
        padding: 24px 18px !important;
        border-radius: 22px !important;
    }

    #cmd-overlay .cmd-card {
        border-radius: 24px 24px 0 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #global-modal-overlay *,
    #img-flow-wrap *,
    #cmd-overlay * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   GLOSS WORKSPACE SYSTEM — LEGACY TOOL ADAPTERS
   These selectors cover older self-mounted tools whose CSS is injected after
   style.css. Important declarations are deliberate: they replace presentation
   only and leave each tool's behaviour untouched.
   ========================================================================== */
:is(
    #prompt-library-overlay,
    #folder-manager-overlay,
    #speech-onboarding-overlay,
    #universal-model-overlay,
    #tracker-overlay,
    #dg-overlay,
    #visual-lib-overlay,
    #modeler-overlay,
    #agents-overlay
) {
    background:
        radial-gradient(circle at 16% 6%, rgba(129,140,248,.17), transparent 29%),
        radial-gradient(circle at 88% 94%, rgba(192,132,252,.11), transparent 30%),
        rgba(15,23,42,.50) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
}

:is(.prompt-modal, .folder-modal, .speech-modal, .universal-sheet, .tracker-modal, .dg-modal, .visual-modal, .modeler-modal),
#agents-overlay > div {
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,248,252,.94)) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 26px !important;
    box-shadow: var(--gloss-shadow) !important;
}

:is(
    .prompt-header,
    .folder-header,
    .speech-header,
    .us-header,
    .visual-header,
    .modeler-header,
    .dg-header,
    .org-modal-header,
    .notepad-header
) {
    background: rgba(255,255,255,.76) !important;
    border-color: var(--gloss-line) !important;
}

:is(
    .prompt-header,
    .folder-header,
    .speech-header,
    .us-header,
    .visual-header,
    .modeler-header,
    .dg-header,
    .org-modal-header,
    .notepad-header
) :is(h1,h2,h3,h4) {
    color: var(--gloss-ink-strong) !important;
    letter-spacing: -.02em;
}

:is(
    .prompt-close-btn,
    .speech-close-btn,
    .us-close-btn,
    .dg-close,
    .visual-close,
    .modeler-close,
    .notepad-close-btn,
    .org-modal-close,
    #close-tracker,
    #close-agents-btn
) {
    color: #7b8493 !important;
    background: rgba(241,245,249,.82) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
    border-radius: 50% !important;
}

:is(
    .prompt-close-btn,
    .speech-close-btn,
    .us-close-btn,
    .dg-close,
    .visual-close,
    .modeler-close,
    .notepad-close-btn,
    .org-modal-close,
    #close-tracker,
    #close-agents-btn
):hover {
    color: var(--gloss-ink-strong) !important;
    background: #fff !important;
}

/* Prompt library and folder manager. */
:is(.prompt-sidebar, .folder-sidebar) {
    background: rgba(245,247,251,.78) !important;
    border-color: var(--gloss-line) !important;
}

:is(.prompt-grid-container, .folder-content-area) {
    background: transparent !important;
}

:is(.category-btn, .folder-btn) {
    color: #667085 !important;
    border: 1px solid transparent !important;
}

:is(.category-btn, .folder-btn):hover {
    color: #4338ca !important;
    background: rgba(255,255,255,.78) !important;
    border-color: var(--gloss-line) !important;
}

:is(.category-btn, .folder-btn).active {
    color: #4338ca !important;
    background: rgba(238,242,255,.92) !important;
    border-color: rgba(99,91,255,.30) !important;
    box-shadow: inset 3px 0 0 #635bff;
}

:is(.prompt-card, .folder-chat-card) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 7px 19px rgba(15,23,42,.045), inset 0 1px 0 #fff !important;
}

:is(.prompt-card, .folder-chat-card):hover {
    background: rgba(255,255,255,.96) !important;
    border-color: rgba(99,91,255,.38) !important;
    box-shadow: 0 14px 28px rgba(15,23,42,.09), inset 0 1px 0 #fff !important;
}

.prompt-card h4,
.folder-chat-card .chat-card-title {
    color: var(--gloss-ink-strong) !important;
}

.prompt-card p,
.folder-chat-card .chat-card-date {
    color: var(--gloss-muted) !important;
}

.folder-count {
    color: #596477 !important;
    background: rgba(226,232,240,.88) !important;
}

:is(.folder-pill, .dg-chip) {
    color: #667085 !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
}

:is(.folder-pill, .dg-chip).selected,
.dg-chip.active {
    color: #4338ca !important;
    background: rgba(238,242,255,.96) !important;
    border-color: rgba(99,91,255,.46) !important;
}

/* Cloud notepad. */
.notepad-tabs-container {
    background: rgba(244,246,250,.86) !important;
    border-color: var(--gloss-line) !important;
}

.note-tab {
    color: #7b8495 !important;
    background: rgba(235,239,245,.76) !important;
    border-color: transparent !important;
}

.note-tab:hover {
    color: #4f46e5 !important;
    background: rgba(255,255,255,.82) !important;
}

.note-tab.active {
    color: var(--gloss-ink-strong) !important;
    background: rgba(255,255,255,.98) !important;
    border-color: var(--gloss-line) !important;
    border-bottom-color: #fff !important;
}

#notepad-textarea {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.64) !important;
}

#notepad-textarea::placeholder { color: #a2aaba !important; }
.notepad-status { color: var(--gloss-muted) !important; }

/* Model picker sheet. */
.universal-sheet {
    overflow: hidden;
}

.us-content,
.us-footer {
    background: transparent !important;
    border-color: var(--gloss-line) !important;
}

.us-category {
    background: rgba(255,255,255,.66) !important;
    border: 1px solid var(--gloss-line) !important;
    border-radius: 15px !important;
}

.us-category summary,
.us-category[open] summary {
    color: var(--gloss-ink) !important;
    background: rgba(248,250,252,.82) !important;
    border-color: var(--gloss-line) !important;
}

.us-category .us-grid {
    background: rgba(255,255,255,.38) !important;
}

.us-btn,
.us-persona {
    color: #5d6778 !important;
    background: rgba(255,255,255,.76) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: inset 0 1px 0 #fff;
}

.us-btn:hover,
.us-persona:hover {
    color: #4338ca !important;
    background: #fff !important;
    border-color: rgba(99,91,255,.34) !important;
}

.us-btn.active,
.us-persona.active {
    color: #4338ca !important;
    background: rgba(238,242,255,.95) !important;
    border-color: rgba(99,91,255,.55) !important;
}

/* Speech language onboarding. */
.speech-lang-btn {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: inset 0 1px 0 #fff;
}

.speech-lang-btn:hover,
.speech-lang-btn.active {
    color: #4338ca !important;
    background: rgba(238,242,255,.96) !important;
    border-color: rgba(99,91,255,.48) !important;
}

/* Agents: the old panel is assembled with inline dark styles. */
#agents-overlay > div :is(h1,h2,h3,h4) {
    color: var(--gloss-ink-strong) !important;
}

#agents-overlay .agent-card {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: 0 7px 18px rgba(15,23,42,.05), inset 0 1px 0 #fff;
}

#agents-overlay .agent-card:hover {
    background: #fff !important;
    border-color: rgba(124,58,237,.40) !important;
    box-shadow: 0 14px 27px rgba(15,23,42,.09), inset 0 1px 0 #fff !important;
}

#agents-overlay .agent-name { color: var(--gloss-ink-strong) !important; }

#agents-overlay :is(input,textarea) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.80) !important;
    border: 1px solid var(--gloss-line) !important;
}

#agents-overlay label { color: var(--gloss-muted) !important; }

/* Visual and document libraries. */
:is(.visual-tabs, .dg-toolbar, .dg-filter-bar) {
    background: rgba(248,250,252,.70) !important;
    border-color: var(--gloss-line) !important;
}

:is(.dg-search, .dg-sort, #lib-search-input, #lib-date-sort) {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.82) !important;
    border: 1px solid var(--gloss-line) !important;
}

.dg-card {
    background: rgba(255,255,255,.72) !important;
    border-color: var(--gloss-line) !important;
}

.dg-card:hover {
    background: #fff !important;
    border-color: rgba(79,135,247,.40) !important;
    box-shadow: 0 14px 28px rgba(15,23,42,.09) !important;
}

.dg-card-name { color: var(--gloss-ink-strong) !important; }
.dg-card-meta { color: var(--gloss-muted) !important; }
.dg-dropzone {
    color: #778194 !important;
    background: rgba(248,250,252,.56) !important;
    border-color: rgba(99,91,255,.24) !important;
}

/* Wallet and other metric dashboards. */
.tracker-progress-bg {
    background: rgba(226,232,240,.88) !important;
    border: 1px solid var(--gloss-line) !important;
}

.tracker-modal .eq-card {
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
}

.tracker-modal :is(.eq-val, #cred-balance) {
    color: var(--gloss-ink-strong) !important;
}

.tracker-modal :is(.eq-lbl, p, span) {
    color: var(--gloss-muted);
}

@media (max-width: 768px) {
    #tracker-overlay {
        align-items: flex-start !important;
        justify-content: center !important;
        padding: max(8px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    #tracker-overlay .tracker-modal {
        width: calc(100vw - 16px) !important;
        max-width: 420px !important;
        max-height: calc(100dvh - 20px) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 18px !important;
        padding: 14px !important;
        transform: none !important;
    }

    #tracker-overlay.active .tracker-modal {
        transform: none !important;
    }

    #tracker-overlay .tracker-modal > div:first-child {
        padding-bottom: 10px !important;
        margin-bottom: 10px !important;
        align-items: center !important;
    }

    #tracker-overlay .tracker-modal h3 {
        font-size: 1rem !important;
        line-height: 1.1 !important;
    }

    #tracker-overlay #close-tracker {
        width: 34px !important;
        height: 34px !important;
        padding: 0 !important;
        font-size: 1.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #tracker-overlay #tracker-content > div:first-child {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 8px !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    #tracker-overlay #tracker-content > div:first-child > div:first-child span:first-child {
        font-size: 0.68rem !important;
    }

    #tracker-overlay #cred-balance {
        font-size: clamp(1.35rem, 8vw, 2rem) !important;
        line-height: 1 !important;
        letter-spacing: -0.04em !important;
    }

    #tracker-overlay #tracker-content > div:first-child > div:last-child {
        gap: 6px !important;
        max-width: 132px !important;
    }

    #tracker-overlay #tracker-content > div:first-child > div:last-child :is(a, button) {
        width: 100% !important;
        min-height: 34px !important;
        padding: 7px 10px !important;
        border-radius: 999px !important;
        font-size: 0.72rem !important;
        line-height: 1.05 !important;
        white-space: normal !important;
    }

    #tracker-overlay #tracker-content > div:nth-child(2) {
        padding: 8px !important;
        margin-bottom: 10px !important;
        border-radius: 11px !important;
    }

    #tracker-overlay #tracker-content > div:nth-child(2) span:first-child {
        font-size: 0.52rem !important;
        letter-spacing: 0.08em !important;
    }

    #tracker-overlay #sub-breakdown,
    #tracker-overlay #pur-breakdown {
        font-size: 0.95rem !important;
        line-height: 1.05 !important;
    }

    #tracker-overlay .tracker-progress-bg {
        height: 8px !important;
        margin: 10px 0 12px !important;
    }

    #tracker-overlay #tracker-content > p:first-of-type {
        font-size: 0.74rem !important;
        margin: 0 0 8px !important;
    }

    #tracker-overlay .eq-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-top: 8px !important;
    }

    #tracker-overlay .eq-card {
        min-height: 92px !important;
        padding: 9px 6px !important;
        border-radius: 13px !important;
        justify-content: center !important;
    }

    #tracker-overlay .eq-card i {
        font-size: 0.98rem !important;
        margin-bottom: 4px !important;
    }

    #tracker-overlay .eq-val {
        font-size: 1.1rem !important;
        line-height: 1.05 !important;
        margin: 0 !important;
    }

    #tracker-overlay .eq-lbl {
        max-width: 100% !important;
        font-size: 0.48rem !important;
        line-height: 1.1 !important;
        letter-spacing: 0.08em !important;
        white-space: normal !important;
    }

    #tracker-overlay .eq-cost {
        font-size: 0.48rem !important;
        padding: 2px 5px !important;
        margin-top: 4px !important;
    }

    #tracker-overlay .tracker-modal > p:last-child,
    #tracker-overlay #tracker-content > p:last-child {
        font-size: 0.62rem !important;
        margin-top: 8px !important;
    }
}

/* Preserve intentionally dark creative/code work areas within white shells. */
:is(.lab-editor, .preview-content pre, .code-editor, .terminal-output) {
    color: #d7dee9 !important;
    background: #151a23 !important;
    border-color: #293141 !important;
}

@media (max-width: 768px) {
    :is(.prompt-modal, .folder-modal, .speech-modal, .universal-sheet, .tracker-modal, .dg-modal, .visual-modal, .modeler-modal),
    #agents-overlay > div {
        width: calc(100% - 18px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 18px) !important;
        border-radius: 22px !important;
    }

    :is(.prompt-sidebar, .folder-sidebar) {
        background: rgba(247,249,252,.92) !important;
        border-color: var(--gloss-line) !important;
    }

    .category-btn {
        background: rgba(255,255,255,.72) !important;
        border-color: var(--gloss-line) !important;
    }
}

/* ==========================================================================
   GLOSS WORKSPACE SYSTEM — AUDIO, ORGANISATION & ONBOARDING
   ========================================================================== */
:is(
    #podcast-overlay,
    #voice-overlay,
    #notepad-tts-overlay,
    #ntts-translate-popup,
    #org-modal-overlay,
    #ob-overlay,
    #tw-overlay
) {
    background:
        radial-gradient(circle at 18% 7%, rgba(129,140,248,.17), transparent 29%),
        radial-gradient(circle at 86% 92%, rgba(192,132,252,.11), transparent 30%),
        rgba(15,23,42,.50) !important;
    backdrop-filter: blur(18px) saturate(118%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(118%) !important;
}

:is(
    .podcast-card,
    .voice-card,
    #notepad-tts-card,
    .ntts-translate-box,
    .org-modal,
    #ob-modal,
    #tw-modal
) {
    color: var(--gloss-ink) !important;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(246,248,252,.94)) !important;
    border: 1px solid rgba(255,255,255,.82) !important;
    border-radius: 26px !important;
    box-shadow: var(--gloss-shadow) !important;
}

/* Podcast keeps its expressive visualizer while the control surface goes light. */
.podcast-card::before {
    background: radial-gradient(circle at 50% 35%, rgba(99,91,255,.13), transparent 62%) !important;
}

.pod-status,
.pod-setup-title {
    color: var(--gloss-ink-strong) !important;
    text-shadow: none !important;
}

.pod-voice-label { color: var(--gloss-muted) !important; }

.pod-voice-select {
    color: var(--gloss-ink) !important;
    background-color: rgba(255,255,255,.80) !important;
    border: 1px solid var(--gloss-line) !important;
}

.pod-voice-select option {
    color: var(--gloss-ink) !important;
    background: #fff !important;
}

/* Voice preview button, dropped after any voice select by
   attachVoicePreviewButtons() (public/script.js) - sits inline in a flex row
   next to the select it previews, small icon-only square (matches the app's
   own transport-control look), never a full-width bar underneath. 2026-08-25,
   owner-requested; fixed same day after the first pass rendered as a huge
   grey full-width bar - the select it sits beside lives inside a
   flex-direction column container (e.g. .pod-voice-row), which stretches
   any bare child to full width by default, and a sitewide global button
   min-size rule further inflated it. Important flags throughout are
   deliberate, not decorative - verified needed to win against both of
   those ambient rules. */
.voice-preview-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100%;
}
.voice-preview-row select {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
.voice-preview-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    background: rgba(255, 255, 255, .05) !important;
    color: #e5e7eb !important;
    font-size: .78em !important;
    cursor: pointer;
    transition: background .15s ease;
}
.voice-preview-btn:hover { background: rgba(255, 255, 255, .1) !important; }
.voice-preview-btn.voice-preview-playing { background: #7c3aed !important; border-color: #7c3aed !important; color: #fff !important; }
.voice-preview-btn.voice-preview-loading { opacity: .7; cursor: wait; }

/* Same preview affordance, sized for a pill (Notepad TTS voice grid) —
   sits as a small inline icon inside the pill rather than a separate
   circular button next to a <select>. */
.ntts-voice-pill .voice-preview-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border-radius: 50%;
    border: 1px solid rgba(124, 58, 237, .4);
    background: rgba(124, 58, 237, .12);
    color: #a78bfa;
    font-size: .65em;
    cursor: pointer;
    flex-shrink: 0;
}
.ntts-voice-pill .voice-preview-inline:hover { background: rgba(124, 58, 237, .28); }
.ntts-voice-pill .voice-preview-inline.voice-preview-playing { background: #7c3aed; color: #fff; }

.pod-bar {
    background: #cbd2df !important;
    box-shadow: none !important;
}

.pod-audio-progress {
    background: rgba(226,232,240,.90) !important;
}

/* Realtime voice selection. */
.voice-card h3 { color: var(--gloss-ink-strong) !important; }
.voice-card p { color: var(--gloss-muted) !important; }

.voice-option {
    color: #4f5a6c !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: 0 6px 16px rgba(15,23,42,.045), inset 0 1px 0 #fff;
}

.voice-option:hover {
    color: #4338ca !important;
    background: #fff !important;
    border-color: rgba(99,91,255,.40) !important;
    box-shadow: 0 13px 26px rgba(15,23,42,.09), inset 0 1px 0 #fff !important;
}

#cancel-voice { color: #7b8495 !important; }

/* Notepad TTS and every nested panel. */
#ntts-header {
    background: rgba(255,255,255,.72) !important;
    border-color: var(--gloss-line) !important;
}

#ntts-header h2,
.ntts-translate-box h4 {
    color: var(--gloss-ink-strong) !important;
}

#notepad-tts-close {
    color: #7b8493 !important;
    background: rgba(241,245,249,.82) !important;
    border: 1px solid rgba(148,163,184,.20) !important;
}

.ntts-label { color: #687386 !important; }

.ntts-voice-pill,
.ntts-lang-btn {
    color: #5f697a !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: inset 0 1px 0 #fff;
}

.ntts-voice-pill:hover,
.ntts-lang-btn:hover,
.ntts-voice-pill.selected {
    color: #4338ca !important;
    background: rgba(238,242,255,.95) !important;
    border-color: rgba(99,91,255,.48) !important;
    box-shadow: 0 7px 17px rgba(99,91,255,.08), inset 0 1px 0 #fff !important;
}

#notepad-tts-textarea {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.78) !important;
    border: 1px solid var(--gloss-line) !important;
}

#notepad-tts-textarea::placeholder { color: #9aa3b2 !important; }

#notepad-tts-counter {
    color: #8490a2 !important;
    background: rgba(248,250,252,.92) !important;
}

#notepad-tts-player {
    background: rgba(238,242,255,.56) !important;
    border-color: rgba(99,91,255,.18) !important;
}

.ntts-translate-cancel {
    color: #758094 !important;
    background: rgba(255,255,255,.68) !important;
    border-color: var(--gloss-line) !important;
}

/* Organisation / team administration. */
.org-tabs {
    background: rgba(248,250,252,.68) !important;
    border-color: var(--gloss-line) !important;
}

.org-tab { color: #7b8495 !important; }
.org-tab:hover { color: #4f46e5 !important; }
.org-tab.active {
    color: #4f46e5 !important;
    border-bottom-color: #635bff !important;
}

.org-section { border-color: rgba(148,163,184,.18) !important; }
.org-section-title { color: #758094 !important; }

.org-input {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.80) !important;
    border: 1px solid var(--gloss-line) !important;
}

.org-btn-primary {
    color: #fff !important;
    background: linear-gradient(135deg,#6d67ff,#7046d9) !important;
    box-shadow: 0 9px 20px rgba(99,91,255,.20);
}

.org-btn-ghost {
    color: #596477 !important;
    background: rgba(255,255,255,.72) !important;
    border: 1px solid var(--gloss-line) !important;
}

.org-member-row:hover { background: rgba(241,245,249,.72) !important; }
.org-avatar { background: rgba(238,242,255,.92) !important; color: #4f46e5 !important; }
.org-member-name { color: var(--gloss-ink-strong) !important; }
.org-member-email { color: var(--gloss-muted) !important; }

.org-invite-link {
    background: rgba(248,250,252,.86) !important;
    border: 1px solid var(--gloss-line) !important;
}

.org-invite-link span { color: #667085 !important; }

/* User and team onboarding walkthroughs. */
#ob-modal h2,
#tw-modal h2 {
    color: var(--gloss-ink-strong) !important;
}

:is(#ob-body, #tw-body) {
    color: var(--gloss-muted) !important;
}

:is(#ob-body, #tw-body) strong {
    color: var(--gloss-ink-strong) !important;
}

:is(.ob-info-box, .ob-upgrade-box, #tw-body > div[style*="background"]) {
    color: #566174 !important;
    background: rgba(248,250,252,.86) !important;
    border: 1px solid var(--gloss-line) !important;
}

:is(.ob-dot, .tw-dot) { background: #d9dee8 !important; }
:is(.ob-dot, .tw-dot).active {
    width: 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg,#6d67ff,#8b5cf6) !important;
}

:is(.ob-btn-ghost, .tw-btn-ghost) { color: #7b8495 !important; }
:is(#ob-progress, #tw-progress) { color: #98a2b3 !important; }
:is(.ob-btn-next, .tw-btn-next) {
    color: #fff !important;
    background: linear-gradient(135deg,#6d67ff,#7046d9) !important;
    box-shadow: 0 9px 20px rgba(99,91,255,.20);
}

/* Visual library: white chrome, neutral gallery floor, media remains vivid. */
.visual-grid {
    background: rgba(244,247,251,.76) !important;
}

.visual-item.doc-item {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.76) !important;
    border-color: var(--gloss-line) !important;
}

.visual-item.doc-item .doc-name { color: var(--gloss-ink-strong) !important; }
.visual-badge {
    color: #465165 !important;
    background: rgba(255,255,255,.86) !important;
    border: 1px solid rgba(148,163,184,.24);
}

/* 3D modeler keeps the black stage, but gains a white floating control dock. */
.modeler-controls {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    box-shadow: 0 22px 50px rgba(0,0,0,.28), inset 0 1px 0 #fff !important;
    backdrop-filter: blur(18px) saturate(115%) !important;
}

.modeler-input {
    color: var(--gloss-ink) !important;
    background: rgba(248,250,252,.92) !important;
    border: 1px solid var(--gloss-line-strong) !important;
}

/* Geek stats becomes a compact white utility glass instead of terminal green. */
.geek-panel {
    color: var(--gloss-ink) !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(255,255,255,.76) !important;
    border-right: 0 !important;
    border-left: 3px solid #635bff !important;
    box-shadow: -18px 12px 44px rgba(15,23,42,.18), inset 0 1px 0 #fff !important;
}

.geek-panel h3 { color: var(--gloss-ink-strong) !important; }
.stat-group {
    border-color: rgba(99,91,255,.16) !important;
}
.stat-group label { color: #7b8495 !important; }
.stat-group span { color: #354052 !important; }
.geek-close { color: #7b8495 !important; }

@media (max-width: 700px) {
    :is(.podcast-card, .voice-card, #notepad-tts-card, .ntts-translate-box, .org-modal, #ob-modal, #tw-modal) {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 20px) !important;
        border-radius: 22px !important;
    }

    #notepad-tts-card { overflow-y: auto; }
    .org-input-row { flex-direction: column; }
    select.org-input { max-width: none !important; }
}

/* --- 🎹 Music Studio Modal --- */
#global-modal-overlay[data-variant="music-studio"] {
    padding: 20px 12px;
    align-items: center;
    background: rgba(15, 23, 42, 0.32);
    backdrop-filter: blur(14px);
}

#global-modal-overlay[data-variant="music-studio"] .custom-modal {
    width: min(760px, calc(100% - 24px));
    max-width: 760px;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(229, 231, 235, 0.95);
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
    max-height: calc(100vh - 40px);
}

#global-modal-overlay[data-variant="music-studio"] .modal-icon-wrapper,
#global-modal-overlay[data-variant="music-studio"] > .custom-modal > #modal-title {
    display: none;
}

#global-modal-overlay[data-variant="music-studio"] #modal-message {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    color: #606675;
}

#global-modal-overlay[data-variant="music-studio"] .modal-input {
    display: none !important;
}

#global-modal-overlay[data-variant="music-studio"] .modal-actions {
    display: none;
}





/* === SETTINGS MODAL RESTORE === */
#settings-overlay {
    pointer-events: auto !important;
}

#settings-overlay.hidden {
    pointer-events: none !important;
    display: none !important;
}

#universal-settings-modal {
    width: 90% !important;
    max-width: 480px !important;
    max-height: 85vh !important;
    height: auto !important;
    border-radius: 16px !important;
    background: var(--settings-modal-bg) !important;
    backdrop-filter: blur(12px) !important;
}

.settings-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding: 20px 25px !important;
}

.settings-header h2 {
    color: var(--text-color) !important;
}

#close-settings-btn {
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}







.music-studio-shell {
    padding: 24px;
}

.music-studio-header {
    text-align: center;
    margin-bottom: 20px;
}

.music-studio-header-copy h3 {
    margin: 0;
    color: #111827;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.music-studio-header-copy p {
    margin: 8px auto 0;
    max-width: 32rem;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
}

.music-studio-card {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #ffffff;
    padding: 18px;
}

.music-studio-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 16px;
}

.music-studio-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.music-studio-section-head h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #111827;
    font-size: 1rem;
    font-weight: 600;
}

.music-studio-section-head h4 i {
    color: #7c3aed;
}

.music-studio-counter {
    color: #9ca3af;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
}

.music-studio-counter.is-near-limit {
    color: #7c3aed;
}

.music-studio-section-copy {
    margin: 0 0 12px;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.5;
}

.music-studio-prompt {
    width: 100%;
    min-height: 124px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    color: #111827;
    resize: vertical;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.music-studio-assist-chip,
.music-studio-duration-preset,
.music-studio-footer-pill,
.music-studio-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font: inherit;
}

.music-studio-prompt:focus,
.music-studio-duration-input:focus,
.music-studio-lyrics-input:focus {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.music-studio-prompt.is-invalid,
.music-studio-lyrics-input.is-invalid {
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.music-studio-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.music-studio-assist-chip i {
    color: #6f4bff;
}

.music-studio-assist-chip {
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.music-studio-duration-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.music-studio-slider-row {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4b5563;
    font-size: 0.82rem;
    font-weight: 600;
}

.music-studio-slider {
    flex: 1;
    appearance: none;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, #7c3aed, #7c3aed) 0/var(--music-slider-fill, 0%) 100% no-repeat, #e5e7eb;
    outline: none;
}

.music-studio-slider::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #7c3aed;
    background: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
    cursor: pointer;
}

.music-studio-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid #7c3aed;
    background: #fff;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.2);
    cursor: pointer;
}

.music-studio-duration-input {
    width: 64px;
    height: 36px;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    text-align: center;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.music-studio-duration-preset-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.music-studio-duration-preset {
    min-width: 62px;
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    background: #f3f4f6;
    color: #374151;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.music-studio-duration-preset.active {
    background: #7c3aed;
    border-color: #7c3aed;
    color: #ffffff;
}

.music-studio-budget-strip {
    display: none;
}

.music-studio-budget-row {
    margin-top: 14px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
}

.music-studio-budget-copy span {
    display: block;
    color: #6b7280;
    font-size: 0.78rem;
    font-weight: 600;
}

.music-studio-budget-copy strong {
    display: block;
    margin-top: 2px;
    color: #111827;
    font-size: 1rem;
    font-weight: 700;
}

.music-studio-budget-meta {
    text-align: right;
    color: #9ca3af;
    font-size: 0.74rem;
    line-height: 1.45;
}

.music-studio-range-label {
    color: #9ca3af;
    font-size: 0.78rem;
    font-weight: 700;
}

.music-studio-lyrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.music-lyrics-card {
    display: grid;
    gap: 8px;
    align-content: start;
    padding: 12px;
    text-align: left;
    border-radius: 12px;
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.music-lyrics-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.music-lyrics-card-icon {
    color: #6f4bff;
    font-size: 1.1rem;
}

.music-lyrics-card-radio {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    background: #fff;
}

.music-lyrics-card strong {
    color: #111827;
    font-size: 0.84rem;
}

.music-lyrics-card p {
    margin: 0;
    color: #6b7280;
    font-size: 0.72rem;
    line-height: 1.45;
}

.music-lyrics-card.active {
    border-color: #7c3aed;
    background: rgba(124, 58, 237, 0.05);
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.08);
}

.music-lyrics-card.active .music-lyrics-card-radio {
    border-color: #7c3aed;
    box-shadow: inset 0 0 0 4px #7c3aed;
}

.music-lyrics-card.is-locked {
    opacity: 0.58;
}

.music-lyrics-card:not(.is-locked):hover {
    border-color: rgba(124, 58, 237, 0.28);
    box-shadow: 0 8px 18px rgba(124, 58, 237, 0.08);
}

.music-lyrics-card-lock {
    display: inline-flex;
    justify-self: start;
    padding: 4px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 0.68rem;
    font-weight: 700;
}

.music-studio-upgrade-note {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(124, 58, 237, 0.06);
    color: #6b7280;
    font-size: 0.8rem;
    font-weight: 600;
}

.music-studio-upgrade-note i {
    color: #6f4bff;
}

.music-studio-custom-wrap {
    margin-top: 12px;
}

.music-studio-custom-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.music-studio-custom-head > span:first-child {
    color: #374151;
    font-size: 0.8rem;
    font-weight: 700;
}

.music-studio-lyrics-input {
    width: 100%;
    min-height: 100px;
    padding: 12px 14px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    background: #ffffff;
    color: #111827;
    resize: vertical;
    font: inherit;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.music-studio-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.music-studio-footer-pills,
.music-studio-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.music-studio-footer-pill {
    padding: 6px 12px;
    background: #f3f4f6;
    color: #374151;
    font-size: 0.78rem;
    font-weight: 700;
}

.music-studio-btn {
    border: 1px solid transparent;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 700;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.music-studio-btn:hover,
.music-studio-assist-chip:hover,
.music-studio-duration-preset:hover {
    transform: translateY(-1px);
}

.music-studio-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border-color: #e5e7eb;
}

.music-studio-btn-primary {
    background: #7c3aed;
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.22);
}

@media (min-width: 820px) {
    #global-modal-overlay[data-variant="music-studio"] .custom-modal {
        width: min(1120px, calc(100% - 40px));
        max-width: 1120px;
    }

    .music-studio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    #global-modal-overlay[data-variant="music-studio"] {
        padding: 12px;
    }

    #global-modal-overlay[data-variant="music-studio"] .custom-modal {
        width: calc(100% - 24px);
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }

    .music-studio-shell {
        padding: 18px;
    }

    .music-studio-header-copy h3 {
        font-size: 1.3rem;
    }

    .music-studio-prompt {
        min-height: 112px;
    }

    .music-studio-duration-row,
    .music-studio-budget-row,
    .music-studio-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .music-studio-slider-row {
        width: 100%;
    }

    .music-studio-duration-input {
        width: 100%;
        text-align: left;
    }

    .music-studio-lyrics-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .music-studio-footer-actions {
        width: 100%;
    }

    .music-studio-btn {
        flex: 1;
    }
}


/* === RESTORE APRIL SIDEBAR & INPUT === */

/* Sidebar */
.sidebar-header {
    padding: 20px 15px !important;
    background: transparent !important;
}

.sidebar-controls {
    padding: 10px 15px 15px !important;
    gap: 8px !important;
}

/* Input area - remove the black box look */
.input-wrapper {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Restore the message input pill */
#message-input {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 2px solid rgba(var(--theme-primary-rgb), 0.3) !important;
    border-radius: 24px !important;
    padding: 14px 24px !important;
    color: var(--text-color) !important;
}

/* Remove the floating + button box styling */
.main-trigger-btn {
    background: var(--theme-primary) !important;
    box-shadow: 0 4px 15px rgba(var(--theme-primary-rgb), 0.3) !important;
}

/* Sidebar buttons */
.sidebar-btn {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    height: 44px !important;
    border-radius: 12px !important;
}

/* Chat input: always black with white text, regardless of theme/config */
#message-input,
#message-input:focus,
html.light-mode #message-input,
html.light-mode #message-input:focus,
html.theme-paper #message-input,
html.theme-frosted-glass #message-input,
html:not(.light-mode).theme-terminal #message-input {
    background: #000000 !important;
    color: #ffffff !important;
}
#message-input::placeholder,
html.light-mode #message-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    opacity: 1 !important;
}

/* Select Model sheet: match the sidebar's theme-aware glass instead of the
   fixed white gloss look shared by other overlays (prompt/folder/speech/etc). */
.universal-sheet {
    background: rgba(10, 12, 16, 0.75) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.us-header {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.us-header h3 { color: #fff !important; }
.us-close-btn {
    color: #ccc !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.us-close-btn:hover { color: #fff !important; background: rgba(255, 255, 255, 0.12) !important; }
.us-category {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.us-category summary,
.us-category[open] summary {
    color: #e5e7eb !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.us-category .us-grid { background: transparent !important; }
.us-btn,
.us-persona {
    color: #d1d5db !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
}
.us-btn:hover,
.us-persona:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.5) !important;
}
.us-btn.active,
.us-persona.active {
    color: #fff !important;
    background: rgba(var(--theme-primary-rgb), 0.2) !important;
    border-color: rgba(var(--theme-primary-rgb), 0.6) !important;
}

/* Locked for guests (owner 2026-09-14). A guest sees the whole catalogue, so
   these must stay legible — the entire point is that someone signed out can
   read "Claude Opus 5" and know it exists. Dimmed slightly and marked with a
   padlock; never `disabled`, because the click is what explains the account. */
.us-btn.us-btn-locked { opacity: .72; }
.us-btn.us-btn-locked:hover { opacity: 1; }
.us-btn.us-btn-locked .us-model-copy strong::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: .62rem;
    margin-left: 7px;
    opacity: .7;
    vertical-align: 1px;
}


/* Light mode / paper / frosted-glass: sidebar's light glass instead of dark */
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .universal-sheet {
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-header {
    background: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-header h3 {
    color: var(--gloss-ink-strong) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-close-btn {
    color: #7b8493 !important;
    background: rgba(241, 245, 249, 0.82) !important;
    border: 1px solid rgba(148, 163, 184, 0.2) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-category {
    background: rgba(255, 255, 255, 0.66) !important;
    border: 1px solid var(--gloss-line) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-category summary,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-category[open] summary {
    color: var(--gloss-ink) !important;
    background: rgba(248, 250, 252, 0.82) !important;
    border-color: var(--gloss-line) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-btn,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-persona {
    color: #5d6778 !important;
    background: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid var(--gloss-line) !important;
    box-shadow: inset 0 1px 0 #fff;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-btn:hover,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-persona:hover {
    color: #4338ca !important;
    background: #fff !important;
    border-color: rgba(99, 91, 255, 0.34) !important;
}
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-btn.active,
:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .us-persona.active {
    color: #4338ca !important;
    background: rgba(238, 242, 255, 0.95) !important;
    border-color: rgba(99, 91, 255, 0.55) !important;
}

/* Model picker — compact Studio toolbar visual language */
#universal-model-overlay {
    background: rgba(3, 6, 12, 0.58) !important;
    backdrop-filter: blur(14px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(115%) !important;
}

.universal-sheet {
    width: min(92vw, 560px) !important;
    max-width: 560px !important;
    max-height: min(84vh, 760px) !important;
    border-radius: 18px !important;
    background: rgba(13, 16, 22, 0.94) !important;
    border: 1px solid rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.34) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,.025) inset !important;
}

.us-header {
    min-height: 72px;
    box-sizing: border-box;
    padding: 14px 18px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border-bottom: 1px solid rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.26) !important;
}

.us-title-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.us-title-icon {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px;
    display: grid; place-items: center;
    color: var(--bubble-accent-visible, var(--bubble-accent-color, var(--theme-primary, #4a90e2))) !important;
    background: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.12);
    border: 1px solid rgba(var(--bubble-accent-color-rgb, 74, 144, 226), 0.3);
}
.us-title-group h3 { font-size: 16px !important; font-weight: 800; letter-spacing: -.01em; }
.us-title-group p { margin: 3px 0 0; color: #8f9aab; font-size: 11px; font-weight: 600; }
.us-close-btn {
    width: 34px !important; height: 34px !important; flex: 0 0 34px;
    border-radius: 10px !important; font-size: 13px !important;
    color: #9ba5b4 !important; background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    transition: color .16s ease, background .16s ease, border-color .16s ease, transform .16s ease;
}
.us-close-btn:hover { transform: translateY(-1px); border-color: rgba(255,255,255,.16) !important; }

.us-content {
    padding: 16px 18px 18px !important;
    gap: 16px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .38) transparent;
}
.us-content > div { min-width: 0; }
.us-label {
    margin: 0 0 7px !important;
    font-size: 10px !important; font-weight: 900 !important;
    letter-spacing: .13em !important; opacity: .9;
}
.us-label i { margin-right: 5px; }
.us-category {
    margin: 0 0 7px !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.025) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
}
.us-category:hover { border-color: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .32) !important; }
.us-category summary,
.us-category[open] summary {
    min-height: 42px; box-sizing: border-box;
    padding: 10px 13px !important;
    color: #dce3ed !important; background: transparent !important;
    border-bottom-color: rgba(255,255,255,.065) !important;
    font-size: 12px !important; font-weight: 800 !important;
}
.us-category summary::after { font-size: 9px !important; color: #788496 !important; }
.us-category .us-grid { padding: 9px !important; gap: 7px !important; }
.us-btn {
    min-height: 42px; box-sizing: border-box;
    padding: 9px 11px !important; border-radius: 9px !important;
    color: #cbd3df !important; background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    font-size: 12px !important; font-weight: 700; line-height: 1.25;
    transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease !important;
}
.us-btn:hover {
    transform: translateY(-1px) !important;
    background: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .09) !important;
    border-color: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .32) !important;
}
.us-btn.active {
    color: #fff !important;
    background: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .15) !important;
    border-color: var(--bubble-accent-visible, var(--bubble-accent-color, var(--theme-primary, #4a90e2))) !important;
    box-shadow: 0 0 0 1px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .13) inset !important;
}
.us-footer {
    padding: 11px 18px 14px !important;
    background: rgba(5, 7, 11, .48) !important;
    border-top: 1px solid rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .22) !important;
}
.us-persona-label { color: #7f8a9a !important; margin-bottom: 8px !important; }
.us-persona-row { gap: 6px !important; padding: 0 !important; }
.us-persona {
    flex: 1 1 0; min-width: max-content;
    padding: 7px 11px !important; border-radius: 9px !important;
    color: #aeb7c4 !important; background: rgba(255,255,255,.035) !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    font-size: 11px !important; font-weight: 800;
}
.us-persona.active {
    color: #fff !important;
    background: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .15) !important;
    border-color: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .72) !important;
}

:is(html.light-mode, html.theme-paper, html.theme-frosted-glass) .universal-sheet {
    background: rgba(250, 252, 255, .94) !important;
    box-shadow: 0 28px 80px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.7) inset !important;
}
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .us-title-group p { color: #7a8493; }
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .us-category { background: rgba(255,255,255,.48) !important; }
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .us-category summary,
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .us-category[open] summary { color: #273142 !important; background: transparent !important; }
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .us-btn,
:is(html.light-mode, html.theme-default, html.theme-paper, html.theme-frosted-glass) .us-persona { color: #4b5565 !important; background: rgba(255,255,255,.72) !important; }

@media (max-width: 768px) {
    .universal-sheet { max-height: 92vh !important; border-radius: 18px 18px 0 0 !important; }
}
@media (max-width: 430px) {
    .us-header { padding-inline: 14px !important; }
    .us-content { padding: 14px !important; }
    .us-footer { padding-inline: 14px !important; }
    .us-grid { grid-template-columns: 1fr 1fr !important; }
    .us-btn { min-height: 46px; padding: 8px 9px !important; }
    .us-persona { padding-inline: 9px !important; }
}

/* Workspace accent unification. Appearance > Accent owns
   --bubble-accent-color; surfaces keep their current theme backgrounds. */
#controls-header-content {
    border-top: none !important;
    border-bottom: none !important;
}
.header-left,
.model-selector-container { align-self: stretch !important; display: flex !important; align-items: stretch !important; }
#model-toggle-button[class] {
    height: 100% !important;
    min-height: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,.035) !important;
    color: inherit !important;
    box-shadow: none !important;
    animation: none !important;
}
html.light-mode body #controls-header-content #model-toggle-button[class] {
    background: rgba(255,255,255,.12) !important;
    color: #111827 !important;
    text-shadow: 0 1px 1px rgba(255,255,255,.35);
    backdrop-filter: blur(16px) saturate(125%) !important;
    -webkit-backdrop-filter: blur(16px) saturate(125%) !important;
}
.hamburger,
.hamburger i,
.header-right .header-icon-btn,
.header-right .header-icon-btn i { color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important; }
.header-right .header-icon-btn {
    border: none !important;
    background: transparent !important;
}
#message-input,
#message-input:focus,
html.light-mode #message-input,
html.light-mode #message-input:focus {
    border: none !important;
    /* Owner 2026-09-20: no flashing outline on the composer, in any mode. The
       field carries a steady glow only; the outer strip already breathes on
       opt-in (composer-glow-animated) and nowhere else. */
    animation: none !important;
    filter: drop-shadow(0 0 5px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .55));
}
#input-area,
html.light-mode #input-area,
html.theme-paper #input-area,
html.theme-frosted-glass #input-area {
    position: relative !important;
    border: none !important;
    box-sizing: border-box !important;
}
#input-area::before {
    content: '' !important;
    position: absolute;
    inset: 1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
    /* Owner 2026-09-14: the outer composer glow does not animate by default,
       for every user. It ran a 2.4s pulse forever on every page. The steady
       glow below is exactly what workspace-animations-off already produced,
       so there is one appearance rather than two. The keyframes stay for the
       opt-in rule below. */
    box-shadow: 0 0 8px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .45), inset 0 0 4px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .18);
}
html.composer-glow-animated:not(.workspace-animations-off) #input-area::before {
    animation: outerComposerAccentGlow 2.4s ease-in-out infinite;
}
@keyframes outerComposerAccentGlow {
    0%, 100% { box-shadow: 0 0 3px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .2), inset 0 0 2px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .14); }
    50% { box-shadow: 0 0 14px 3px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .72), inset 0 0 8px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .38); }
}
#input-area:focus-within::before {
    animation: none !important;
    box-shadow: 0 0 8px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .48), inset 0 0 4px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .2);
}
#message-input:focus {
    animation: none !important;
    filter: drop-shadow(0 0 5px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .58));
}
@media (prefers-reduced-motion: reduce) {
    #message-input { animation: none !important; filter: drop-shadow(0 0 5px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .55)); }
    #input-area::before { animation: none !important; box-shadow: 0 0 8px rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .45); }
}
#quick-actions-toggle i { color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important; }
.sidebar {
    border: none !important;
    box-sizing: border-box !important;
}
.sidebar .sidebar-btn i,
.sidebar .history-icon-btn i,
.sidebar .sidebar-search-container .search-icon,
.sidebar #close-sidebar i { color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important; }
.history-item[draggable="true"] { cursor: grab; }
.history-item.is-dragging { opacity: .38; cursor: grabbing; }
.history-item.drag-over {
    outline: 2px solid var(--bubble-accent-color, var(--theme-primary, #4a90e2));
    outline-offset: -2px;
    background: rgba(var(--bubble-accent-color-rgb, 74, 144, 226), .14) !important;
}
#folder-manager-overlay .folder-modal,
#folder-manager-overlay .folder-header,
#folder-manager-overlay .folder-sidebar,
#folder-manager-overlay #active-folder-title,
#folder-manager-overlay .folder-chat-card { border-color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important; }
#folder-manager-overlay .folder-header h2 i,
#folder-manager-overlay .folder-btn i,
#folder-manager-overlay #add-folder-btn,
#folder-manager-overlay .chat-move-btn,
#folder-manager-overlay .folder-btn.active { color: var(--bubble-accent-color, var(--theme-primary, #4a90e2)) !important; }

/* Folder cards use dark glass surfaces, so keep their copy light regardless of
   the active theme or custom chat-text colour. */
#folder-manager-overlay .folder-header h2,
#folder-manager-overlay #active-folder-title,
#folder-manager-overlay .chat-card-title {
    color: #fff !important;
    opacity: 1 !important;
    text-shadow: none !important;
}
#folder-manager-overlay .chat-card-title {
    font-weight: 750 !important;
    letter-spacing: .005em;
}
#folder-manager-overlay .chat-card-date,
#folder-manager-overlay .folder-btn:not(.active) {
    color: #e5e7eb !important;
    opacity: 1 !important;
}
#folder-manager-overlay .chat-card-date { color: #cbd5e1 !important; font-weight: 600 !important; }
#folder-manager-overlay .folder-btn:hover:not(.active) { color: #fff !important; }
#folder-manager-overlay .folder-count {
    color: #fff !important;
    background: #374151 !important;
    font-weight: 800 !important;
}
#folder-manager-overlay .chat-move-btn {
    color: #d1d5db !important;
    opacity: 1 !important;
}

/* Long conversational text wraps inside its bubble. Only actual code blocks
   retain horizontal scrolling. */
.message-wrapper,
.message-content-column {
    min-width: 0 !important;
}
.message-content-column {
    width: fit-content !important;
    max-width: 85% !important;
    box-sizing: border-box !important;
}
.message-container.user .message-content-column { align-items: flex-end !important; }
.message-container.ai .message-content-column,
.message-container.assistant .message-content-column { align-items: flex-start !important; }
.message-container .message {
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow-x: clip !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
.message-container .message > span,
.message-container .message > p,
.message-container .message li,
.message-container .message a {
    max-width: 100% !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
.message-container.user .message > span {
    display: block !important;
    width: 100% !important;
}
.message-container .message pre,
.message-container .message pre code {
    max-width: 100% !important;
    overflow-x: auto !important;
    white-space: pre !important;
}
/* Saved creative prompts created before the stricter code detector may still
   arrive in a <pre>. User messages are prose-first and must always wrap. */
.message-container.user .message pre,
.message-container.user .message pre code {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
}
.message-container.ai .message.generated-image-message,
.message-container.assistant .message.generated-image-message {
    width: fit-content !important;
    max-width: min(70vw, 548px) !important;
    padding: 12px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.generated-image-message .shared-image {
    width: auto !important;
    max-width: min(520px, 70vw) !important;
    max-height: 520px !important;
    object-fit: contain !important;
}
.generated-image-message .download-link-button {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 5px 0 0 !important;
}

/* Quick-key Toolbar removed (owner, 2026-09-26). */

/* Touch-first devices need an opaque navigation surface over wallpapers. */
@media (max-width:1023px), (hover:none), (pointer:coarse) {
    .sidebar {
        background:rgba(10,12,16,.94) !important;
        backdrop-filter:blur(24px) saturate(150%) !important;
        -webkit-backdrop-filter:blur(24px) saturate(150%) !important;
        box-shadow:10px 0 40px rgba(0,0,0,.38),inset -1px 0 rgba(255,255,255,.09) !important;
    }
    :is(html.light-mode,html.theme-paper,html.theme-frosted-glass) .sidebar {
        background:rgba(248,250,252,.96) !important;
        box-shadow:8px 0 32px rgba(15,23,42,.14),inset -1px 0 rgba(15,23,42,.08) !important;
    }
}

/* Compact full sidebar: reserve the upper panel for controls and leave the
   majority of the height to conversation history on phones and tablets. */
@media (max-width:1023px) {
.sidebar .sidebar-header {
    min-height: 52px;
    padding: 10px 14px 8px !important;
    align-items: center;
}
.sidebar #sidebar-header-content {
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.sidebar #sidebar-greeting {
    flex: 0 1 auto;
    font-size: .9rem;
    line-height: 1;
    white-space: nowrap;
}
.sidebar .sidebar-tier-row {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    margin: 0 !important;
}
.sidebar #sidebar-user-tier {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0;
    font-size: .67rem;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
}
.sidebar .sidebar-tier-row .header-pill-btn {
    padding: 3px 6px !important;
    font-size: .58rem !important;
}
.sidebar #close-sidebar {
    width: 30px;
    min-width: 30px;
    height: 30px;
    padding: 0;
    font-size: 1rem;
}
.sidebar .sidebar-controls {
    gap: 6px;
    padding: 6px 14px 9px !important;
}
.sidebar #new-chat-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    margin-bottom: 0 !important;
    border-radius: 9px;
    font-size: .78rem;
    box-shadow: 0 2px 10px rgba(var(--theme-primary-rgb),.18);
}
.sidebar #new-chat-btn i {
    font-size: .72rem;
}
.sidebar .sidebar-search-container {
    height: 26px;
    margin: 0;
}
.sidebar .sidebar-search-container input {
    box-sizing: border-box;
    height: 26px;
    min-height: 26px;
    padding: 3px 9px 3px 28px;
    border-radius: 8px;
    font-size: .74rem;
    line-height: 1;
}
.sidebar .sidebar-search-container .search-icon {
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .7rem;
    line-height: 1;
    pointer-events: none;
}
.sidebar .sidebar-utilities-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 0 !important;
}
.sidebar .sidebar-btn.small {
    box-sizing: border-box;
    width: auto !important;
    height: 28px;
    min-height: 28px;
    padding: 0 3px !important;
    gap: 4px;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .67rem;
    line-height: 1;
    white-space: nowrap;
}
.sidebar .sidebar-btn.small:hover,
.sidebar .sidebar-btn.small:focus-visible {
    color: var(--text-color);
    background: rgba(255,255,255,.05) !important;
    box-shadow: none !important;
    transform: none;
}
.sidebar .sidebar-btn.small i {
    font-size: .68rem;
}
.sidebar .sidebar-btn.small span {
    margin-left: 0 !important;
}
.sidebar #chat-history-list {
    min-height: 0;
    padding: 6px !important;
}
.sidebar .history-item {
    margin: 2px 5px;
    padding: 9px 10px;
}
.sidebar .history-item-date { margin-top: 2px; }
.sidebar .sidebar-footer {
    padding: 10px 14px 12px !important;
    gap: 5px !important;
}
.sidebar #user-controls-sidebar { margin-bottom: 2px; }
.sidebar .sidebar-footer .sidebar-btn,
.sidebar .sidebar-footer button {
    height: 38px;
    min-height: 38px !important;
}
.sidebar #delete-all-chats-btn { font-size: .72rem; }
.sidebar .sidebar-footer > div:last-child { margin-top: 4px !important; }
}

/* Wide desktop sidebar follows the workspace's 80% visual scale. */
@media (min-width: 1024px) {
    #sidebar.sidebar {
        width: 224px !important;
        min-width: 224px !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    #sidebar.sidebar .sidebar-header {
        padding: 18px 20px 12px !important;
        align-items: flex-start !important;
    }
    #sidebar.sidebar #sidebar-greeting { font-size: 1em !important; }
    #sidebar.sidebar .sidebar-controls {
        gap: 15px !important;
        padding: 0 20px 20px !important;
    }
    #sidebar.sidebar #new-chat-btn {
        height: auto !important;
        min-height: 48px !important;
    }
    #sidebar.sidebar .sidebar-search-container input {
        height: auto !important;
        min-height: 48px !important;
        padding: 10px 10px 10px 35px !important;
        font-size: .9rem !important;
    }
    #sidebar.sidebar #chat-history-list { padding: 12px !important; }
    #sidebar.sidebar .history-item {
        margin: 0 8px 8px !important;
        padding: 12px 14px !important;
    }
    #sidebar.sidebar :is(.sidebar-btn,.history-icon-btn) i { font-size: 1.25em; }
    #sidebar.sidebar .sidebar-footer {
        padding: 15px 20px 20px !important;
        gap: 8px !important;
    }
}

/* Full-screen audio workspace. This is static rather than only injected by
   script.js, so Voiceover and Notepad TTS render correctly after a reload and
   cannot be narrowed by older theme/mobile modal rules. */
#notepad-tts-overlay { position: fixed !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; padding: 0 !important; }
#notepad-tts-card {
    position: fixed !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}
#ntts-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; }

/* Sidebar history reset: deliberately quiet, but aligned with the Profile and
   Logout controls instead of appearing as an unstyled system button. */
.sidebar .sidebar-history-danger {
    width: 100%;
    box-sizing: border-box;
    margin: 4px 0 0 !important;
    padding-top: 10px;
    border-top: 1px solid rgba(148, 163, 184, 0.14);
}
.sidebar #delete-all-chats-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 40px !important;
    height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(167, 139, 250, 0.25) !important;
    border-radius: 12px !important;
    background: rgba(124, 58, 237, 0.06) !important;
    color: #b9a8ff !important;
    font: 750 0.78rem/1 inherit;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.sidebar #delete-all-chats-btn i { font-size: .82rem; }
.sidebar #delete-all-chats-btn:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(248, 113, 113, 0.42) !important;
    color: #fecaca !important;
    transform: translateY(-1px);
}
.sidebar #delete-all-chats-btn:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }

/* Sidebar density: the search field is directly actionable, so it does not
   need a duplicate launcher or decorative magnifier. Keep touch targets
   generous on coarse pointers while tightening desktop history controls. */
#sidebar.sidebar #mobile-sidebar-search-btn,
#sidebar.sidebar .sidebar-search-container .search-icon {
    display: none !important;
}

#sidebar.sidebar .sidebar-search-container input {
    padding-left: 12px !important;
}

#sidebar.sidebar #logged-in-controls {
    gap: 6px !important;
}

#sidebar.sidebar #logout-button {
    flex: 0 0 38px !important;
    width: 38px !important;
}

@media (pointer: fine) {
    #sidebar.sidebar #logged-in-controls .sidebar-btn {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 11px !important;
        font-size: .88rem !important;
    }

    #sidebar.sidebar #logged-in-controls .sidebar-btn i {
        font-size: .82rem !important;
    }

    #sidebar.sidebar .history-item-actions {
        gap: 2px !important;
    }

    #sidebar.sidebar .history-icon-btn {
        width: 22px !important;
        min-width: 22px !important;
        height: 22px !important;
        min-height: 22px !important;
    }

    #sidebar.sidebar .history-icon-btn i {
        font-size: .78rem !important;
    }
}

/* One overflow menu per chat keeps titles readable without hiding familiar
   Pin, Rename and Delete actions. */
#sidebar.sidebar .history-item-actions {
    position: relative;
    overflow: visible;
}

#sidebar.sidebar .history-menu-toggle {
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--bubble-accent-visible, var(--bubble-accent-color, var(--theme-primary, #7c3aed)));
    background: #000 !important;
    border: 0 !important;
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
}

#sidebar.sidebar .history-menu-toggle:hover,
#sidebar.sidebar .history-item.chat-actions-open .history-menu-toggle {
    color: var(--bubble-accent-visible, var(--bubble-accent-color, var(--theme-primary, #7c3aed)));
    background: #000 !important;
    border-color: transparent !important;
}

#sidebar.sidebar .history-menu-toggle i {
    font-size: .66rem;
    transition: transform .16s ease;
}

#sidebar.sidebar .history-item.chat-actions-open .history-menu-toggle i {
    transform: rotate(180deg);
}

#sidebar.sidebar .history-item-menu {
    position: absolute;
    z-index: 100;
    top: calc(100% + 5px);
    right: 0;
    display: grid !important;
    gap: 2px;
    width: 112px;
    min-width: 112px !important;
    padding: 5px;
    background: #101010;
    border: 1px solid rgba(124, 58, 237, 0.38);
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.38);
}

#sidebar.sidebar .history-item-menu[hidden] { display: none; }

/* Plain hex, not the --bubble-accent-visible/--bubble-accent-color/
   --theme-primary fallback chain — see script.js's matching override
   (2026-08-25 fix) for why that chain can silently drop to unreadable text. */
#sidebar.sidebar .history-menu-action {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 28px !important;
    padding: 0 8px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 7px;
    font: 700 .7rem/1 inherit;
    text-align: left;
    cursor: pointer;
}

#sidebar.sidebar .history-menu-action:hover {
    background: rgba(124, 58, 237, 0.24);
}

#sidebar.sidebar .history-menu-action.delete-chat-btn:hover {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.18);
}

#sidebar.sidebar .history-menu-action i {
    width: 12px;
    color: #a78bfa !important;
    font-size: .7rem;
    text-align: center;
}

#sidebar.sidebar .history-menu-action.delete-chat-btn i { color: #fb7185 !important; }

@media (pointer: coarse) {
    #sidebar.sidebar .history-menu-toggle {
        width: 26px !important;
        min-width: 26px !important;
        height: 26px !important;
        min-height: 26px !important;
    }

    #sidebar.sidebar .history-menu-action {
        min-height: 38px !important;
        font-size: .78rem;
    }
}


/* ============================================================
   COMPOSER ANATOMY — owner reference design 2026-08-28
   One card: a big borderless writing area on top, and a single
   control row inside the card's bottom edge. The model selector
   is an inline one-piece text control ("6.1 Sol ⌄"), not a pill.
   ============================================================ */
#input-area .input-wrapper {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    max-width: none !important;
}
#input-area #message-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    resize: none;
}
#input-area #message-input:focus {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
.composer-bottom-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 4px 0;
}
.composer-row-spacer { flex: 1 1 auto; }
/* Inline, one-piece selectors: quiet text + chevron, no pill chrome */
.composer-bottom-row .composer-model-selector #model-toggle-button,
.composer-bottom-row .composer-style-selector #composer-style-toggle {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-color, #e8e8ee);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
}
.composer-bottom-row #model-toggle-button .fa-chevron-down,
.composer-bottom-row #composer-style-toggle .fa-chevron-down {
    font-size: 0.7em;
    opacity: 0.55;
}
.composer-bottom-row #model-toggle-button:hover,
.composer-bottom-row #composer-style-toggle:hover {
    background: rgba(255, 255, 255, 0.07) !important;
}
/* Tier accent lives on the model NAME, like the reference ("Sol Ultra") */
.composer-bottom-row #model-toggle-button.tier-ultra #selected-model-name { color: #b4a2fd; }
.composer-bottom-row #model-toggle-button.tier-plus #selected-model-name { color: #8ab8ff; }
html.light-mode #input-area #message-input {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #111 !important;
}
html.light-mode .composer-bottom-row #model-toggle-button,
html.light-mode .composer-bottom-row #composer-style-toggle {
    color: #1c1c22;
}
html.light-mode .composer-bottom-row #model-toggle-button:hover,
html.light-mode .composer-bottom-row #composer-style-toggle:hover {
    background: rgba(0, 0, 0, 0.05) !important;
}


/* ── Compact composer menu (owner reference design 2026-08-28) ── */
.composer-style-selector.compact-menu-absorbed { display: none !important; }
.ccm-popover {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    min-width: 240px;
    background: rgba(28, 28, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    padding: 6px;
    z-index: 1200;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.ccm-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 11px 12px;
    color: #ececf1;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
}
.ccm-row.hovered, .ccm-row:hover { background: rgba(255, 255, 255, 0.08); }
.ccm-label { flex: 0 0 auto; font-weight: 600; }
.ccm-value { flex: 1 1 auto; text-align: right; color: #9a9aa3; font-weight: 500; }
.ccm-row .fa-chevron-right { font-size: 0.68em; color: #7c7c86; }
.ccm-divider { height: 1px; margin: 6px 4px; background: rgba(255, 255, 255, 0.08); }
.ccm-reset .ccm-label, .ccm-browse .ccm-label { color: #b9b9c2; font-weight: 500; flex: 1 1 auto; }
.ccm-reset .fa-rotate-left, .ccm-browse .fa-table-cells-large { color: #8b8b95; font-size: 0.85em; }
.ccm-submenu {
    position: absolute;
    /* Flies out to the RIGHT — the direction the row chevron points. */
    left: calc(100% + 8px);
    right: auto;
    top: 0;
    min-width: 230px;
    max-height: 340px;
    overflow-y: auto;
    background: rgba(28, 28, 32, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    padding: 8px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
/* Only when the right flyout would leave the viewport (narrow windows). */
.ccm-submenu.ccm-flip { left: auto; right: calc(100% + 8px); }
.ccm-subheading {
    padding: 8px 10px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #85858f;
}
.ccm-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 9px;
    padding: 10px 10px;
    color: #ececf1;
    font-size: 0.92rem;
    cursor: pointer;
    text-align: left;
}
.ccm-subitem:hover { background: rgba(255, 255, 255, 0.08); }
.ccm-subitem.active { font-weight: 700; }
.ccm-subitem .fa-check { font-size: 0.75em; color: #b4a2fd; }
html.light-mode .ccm-popover, html.light-mode .ccm-submenu {
    background: rgba(252, 252, 253, 0.98);
    border-color: #e5e5ea;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.16);
}
html.light-mode .ccm-row, html.light-mode .ccm-subitem { color: #1c1c22; }
html.light-mode .ccm-row.hovered, html.light-mode .ccm-row:hover,
html.light-mode .ccm-subitem:hover { background: rgba(0, 0, 0, 0.055); }
html.light-mode .ccm-value { color: #6d6d76; }
html.light-mode .ccm-divider { background: rgba(0, 0, 0, 0.08); }


/* ── Ambient sync indicator (owner design 2026-08-28) ── */
.sync-activity { display: inline-flex; align-items: center; margin-left: 10px; }
.sync-activity[hidden] { display: none; }
.sync-activity-ring {
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(var(--theme-primary-rgb, 124, 58, 237), 0.25);
    border-top-color: rgb(var(--theme-primary-rgb, 124, 58, 237));
    animation: askSarySyncSpin 0.8s linear infinite;
}
html.workspace-animations-off .sync-activity-ring { animation: none; opacity: 0.7; }
@keyframes askSarySyncSpin { to { transform: rotate(360deg); } }


/* Owner 2026-08-29: the credits pill follows the header
   icon-button family on every theme — quiet at rest, themed glow on hover,
   no accent outline, no shimmer sweep. Stealth/Default-Black keep their
   solid #050505 chip treatment via the theme block. */
html:is(.theme-stealth,.theme-accent-default-black):not(.light-mode) .header-credit-balance {
    color: #f5f5f5 !important;
    background: #050505 !important;
    border-color: #303030 !important;
    box-shadow: none !important;
}


/* ============================================================
   FROZEN WHITE (owner 2026-08-29): the light preset that keeps
   wallpapers visible — icy translucent surfaces over the user's
   chosen wallpaper instead of opaque light panels.
   ============================================================ */
html.theme-frozen-white .sidebar {
    background: rgba(255, 255, 255, 0.58) !important;
    backdrop-filter: blur(26px) saturate(150%);
    -webkit-backdrop-filter: blur(26px) saturate(150%);
    border-color: rgba(120, 160, 190, 0.28) !important;
}
html.theme-frozen-white .controls-header,
html.theme-frozen-white .top-header {
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: rgba(120, 160, 190, 0.25) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
}
html.theme-frozen-white .main-container,
html.theme-frozen-white .chat-container,
html.theme-frozen-white #chat {
    background: transparent !important;
}
html.theme-frozen-white #input-area {
    background: rgba(255, 255, 255, 0.5) !important;
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
    border-color: rgba(120, 160, 190, 0.3) !important;
}
html.theme-frozen-white .message-container.assistant .message {
    background: rgba(255, 255, 255, 0.78) !important;
    color: #1d3242 !important;
}
html.theme-frozen-white .message-container.user .message {
    background: color-mix(in srgb, var(--theme-primary, #5da9dd) 84%, #ffffff) !important;
    color: #ffffff !important;
}

/* Owner follow-up 2026-08-29: white backdrop, white welcome cards, dark
   input text — the first pass left dark surfaces and white-on-white type. */
/* The icy gradient is the ground behind everything, painted on the wallpaper
   fallback layer (z-index -2). Painting body hid every wallpaper (owner
   2026-09-13); this theme exists to keep them visible. */
html.theme-frozen-white #wallpaper-fallback {
    background: linear-gradient(180deg, #eef5fb, #dde9f4) !important;
}
html.theme-frozen-white #live-wallpaper-container {
    background-color: #e6eff7;
}
html.theme-frozen-white #welcome-message-card .tool-card,
html.theme-frozen-white .mode-card {
    background: rgba(255, 255, 255, 0.78) !important;
    border: 1px solid rgba(110, 150, 185, 0.3) !important;
    color: #17324a !important;
    box-shadow: 0 6px 18px rgba(80, 120, 160, 0.12) !important;
}
html.theme-frozen-white #welcome-message-card .tool-card * {
    color: #17324a !important;
}
html.theme-frozen-white .welcome-subtitle { color: #4a6a84 !important; }
html.theme-frozen-white #message-input,
html.theme-frozen-white #message-input:focus {
    color: #14283a !important;
    caret-color: #14283a !important;
}
html.theme-frozen-white #message-input::placeholder { color: #7291a9 !important; }
html.theme-frozen-white .input-controls,
html.theme-frozen-white .char-counter,
html.theme-frozen-white .input-controls label {
    color: #3d5c76 !important;
}


/* ============================================================
   Owner 2026-08-29: one appearance switch governs the workspace
   glass — sidebar, pinned tools shelf, and composer together.
   Transparent is the default styling of these surfaces; Solid
   turns all three opaque on the current theme surface.
   ============================================================ */
html.sidebar-appearance-solid #input-area {
    background: var(--surface-panel, #131318) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.sidebar-appearance-solid.light-mode #input-area,
html.sidebar-appearance-solid .light-mode #input-area {
    background: #ffffff !important;
}
html.sidebar-appearance-solid #welcome-message-card.tips-pinned {
    background: var(--surface-panel, #131318) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.sidebar-appearance-solid.light-mode #welcome-message-card.tips-pinned {
    background: #f4f5f7 !important;
}
html.sidebar-appearance-solid #welcome-message-card.tips-pinned .tool-card {
    background: var(--input-bg, #1e1e24) !important;
    border-color: color-mix(in srgb, var(--text-color, #fff) 14%, transparent) !important;
}



/* Owner follow-up 2026-08-29: the sidebar card dropdown was a black box
   with a black chevron on Frozen White — white chip, dark chevron. The
   [class] bump outweighs the injected dark-toggle rules. */
html.theme-frozen-white[class] body #sidebar.sidebar .history-menu-toggle,
html.theme-frozen-white[class] body #sidebar.sidebar .history-item.chat-actions-open .history-menu-toggle {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #17324a !important;
    border: 1px solid rgba(110, 150, 185, 0.32) !important;
}
html.theme-frozen-white[class] body #sidebar.sidebar .history-menu-toggle i {
    color: #17324a !important;
}

#chat-context-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 19700;
    width: min(320px, calc(100vw - 32px));
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    background: #14141c;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    color: #e6e6e6;
    font-size: 1.05em;
    text-align: left;
    cursor: default;
}
#chat-context-popover .ccp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#chat-context-popover .ccp-head span { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.6); }
#chat-context-popover .ccp-bar { height: 5px; margin: 10px 0 12px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
#chat-context-popover .ccp-bar span { display: block; height: 100%; border-radius: inherit; background: #6366f1; }
#chat-context-popover .ccp-rows { margin: 0; display: grid; gap: 6px; }
#chat-context-popover .ccp-rows > div { display: flex; justify-content: space-between; gap: 12px; }
#chat-context-popover dt { color: rgba(255, 255, 255, 0.5); margin: 0; }
#chat-context-popover dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
#chat-context-popover .ccp-fresh {
    margin-top: 12px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: inherit;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
#chat-context-popover .ccp-fresh:hover { background: rgba(255, 255, 255, 0.1); }

/* Handover in progress: the actions are unavailable until it lands. */
#chat-context-status .context-compact:disabled { opacity: 0.6; cursor: progress; }
#chat-context-status.working .context-fresh { opacity: 0.6; pointer-events: none; }

/* Pre-init composer placeholder. script.js replaces #input-area's innerHTML on
   boot and builds the real #message-input, so this authored textarea is only on
   screen for the first frames. It has no styling of its own, so it painted as a
   plain white browser textarea inside the composer frame. Hidden, not deleted:
   several call sites still fall back to it by id before init completes. */
#chat-input.chat-input-field { display: none !important; }

/* Owner, 2026-09-21: the composer is one shell, not a box drawn inside a box.
   #input-area already supplies the rounded frame; .input-wrapper was drawing a
   second bordered, filled rectangle inside it around the textarea.
   Scoped to #input-area (1,0,1) so it also beats `html.light-mode
   .input-wrapper` (0,1,1) — the earlier `.input-wrapper { border: none }` at
   line 8206 loses to a later rule of equal specificity, which is why that one
   never took effect. Other surfaces reusing .input-wrapper are untouched. */
#input-area .input-wrapper,
html.light-mode #input-area .input-wrapper {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* Light themes, measured in a settled theme rather than a loop (the loop read
   styles before the theme applied and reported false contrast).

   The composer shell is rgba(255,255,255,.82). Against it:
   - #message-input was forced to pure white, which read as a filled rectangle
     drawn inside the shell. Transparent merges it into the one frame.
   - the context indicator inherited white text from its dark-theme base and
     was invisible; it is now a ring, styled below. */
/* Every theme, not just the light ones: the purple outline comes from the base
   `#message-input { border: 2px solid rgba(var(--theme-primary-rgb), .3) }`,
   which is theme-independent. The composer shell is the only frame; the
   textarea inside it draws nothing of its own. Specificity (2,1,2) so it
   outranks `html.light-mode #input-area #message-input` (2,1,1). */
html body #input-area .input-wrapper #message-input,
html body #input-area .input-wrapper #message-input:focus,
html body #input-area .input-wrapper #message-input:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
html.light-mode #chat-context-popover {
    border-color: rgba(0, 0, 0, 0.1);
    background: #ffffff;
    color: #14141a;
}
html.light-mode #chat-context-popover dt,
html.light-mode #chat-context-popover .ccp-head span,
html.light-mode html.light-mode #chat-context-popover .ccp-bar { background: rgba(0, 0, 0, 0.1); }
html.light-mode #chat-context-popover .ccp-fresh {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.04);
}

/* === CHAT CONTEXT RING (input footer, bottom right) === */
/* A filling circle rather than a capsule of text (owner, 2026-09-21). The id
   and class avoid the substring "pill" on purpose: a theme rule matches
   [class*="pill"] and was styling the old element as a badge. */
.chat-context-ring {
    display: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    /* A global 48px tap-target floor applies to every button; this one is an
       indicator sitting in a tight row, so it opts out explicitly. */
    min-width: 26px !important;
    min-height: 26px !important;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    line-height: 0;
}
.chat-context-ring.visible { display: inline-flex; }
.chat-context-ring svg { width: 22px; height: 22px; transform: rotate(-90deg); overflow: visible; }
.chat-context-ring circle { fill: none; stroke-width: 4; }
.chat-context-ring .ccr-track { stroke: currentColor; opacity: 0.18; }
.chat-context-ring .ccr-fill {
    stroke: #7c3aed;
    stroke-linecap: round;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    /* Only the arc animates. Transitioning `stroke` as well left the ring
       showing the previous state's colour until the next update -- the amber
       and red thresholds were always one step behind the arc. */
    transition: stroke-dashoffset 0.45s ease;
}
.chat-context-ring:hover .ccr-fill { stroke: #9061f9; }
.chat-context-ring.warn .ccr-fill { stroke: #e8a33d; }
.chat-context-ring.danger .ccr-fill { stroke: #e05d5d; }
.chat-context-ring.danger .ccr-track { opacity: 0.26; }
/* Screen readers get the figure the ring is drawing. */
.chat-context-ring .ccr-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


.sd-sample-section {
  margin: 24px 0;
}

.sd-sample-heading {
  margin-bottom: 14px;
}

.sd-sample-heading h3 {
  margin: 0 0 6px;
}

.sd-sample-heading p {
  margin: 0;
  opacity: 0.72;
}

.sd-sample-grid {
  display: grid;
  /* 4 x 3 (owner, 2026-10-01: "do it in 4x3 grid"); 2 across on tablets, 1 on phones. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px) {
  .sd-sample-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sd-sample-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sd-border, rgba(128, 128, 128, 0.25));
  border-radius: 14px;
  background: var(--sd-card, rgba(128, 128, 128, 0.08));
}

.sd-sample-preview {
  height: 210px;
  overflow: hidden;
  background: #111;
}

.sd-sample-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.sd-sample-placeholder {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 0;
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0) 70%), #0b0b0c;
  color: rgba(255, 255, 255, 0.82);
  font: 600 13px/1.3 Inter, system-ui, sans-serif;
}
.sd-sample-placeholder i { font-size: 30px; opacity: 0.85; }
button.sd-sample-placeholder { cursor: pointer; }
button.sd-sample-placeholder:hover { color: #fff; }

.sd-sample-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
}

.sd-sample-info strong,
.sd-sample-info small {
  display: block;
}

.sd-sample-info small {
  margin-top: 3px;
  opacity: 0.7;
}

.sd-sample-info .sd-btn {
  flex-shrink: 0;
  text-decoration: none;
}

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

  .sd-sample-preview {
    height: 220px;
  }
}