/* ========================================
               DESIGN SYSTEM - SoLoVision Brand
               ======================================== */

            :root {
                /* Brand Colors */
                --brand-red: #bc2026;
                --brand-red-hover: #a51c21;
                --brand-navy: #1b2232;
                --brand-grey: #a9b2bc;
                --brand-white: #ffffff;
                --accent: #bc2026;

                /* Fallback theme values (midnight) — ensures UI isn't transparent
                   if themes.css loads late or fails */
                --surface-base: #0c0d10;
                --surface-1: #14161a;
                --surface-2: #1c1e23;
                --surface-3: #24262c;
                --surface-overlay: #2c2f36;
                --text-primary: #ffffff;
                --text-secondary: #a9b2bc;
                --text-muted: rgba(169, 178, 188, 0.6);
                --text-faint: rgba(169, 178, 188, 0.4);
                --border-default: rgba(169, 178, 188, 0.12);
                --border-subtle: rgba(169, 178, 188, 0.08);
                --border-strong: rgba(169, 178, 188, 0.2);
                --border-focus: rgba(188, 32, 38, 0.5);
                --control-bg: #1b2232;
                --control-border: rgba(169, 178, 188, 0.2);
                --control-focus: rgba(188, 32, 38, 0.3);
                --success: #22c55e;
                --success-muted: rgba(34, 197, 94, 0.15);
                --warning: #bc2026;
                --warning-muted: rgba(188, 32, 38, 0.15);
                --error: #ef4444;
                --error-muted: rgba(239, 68, 68, 0.15);
                --scrollbar-track: #14161a;
                --scrollbar-thumb: #a9b2bc;

                /* Spacing Scale (8px base) */
                --space-1: 4px;
                --space-2: 8px;
                --space-3: 12px;
                --space-4: 16px;
                --space-5: 20px;
                --space-6: 24px;
                --space-8: 32px;
                --space-10: 40px;
                --space-12: 48px;

                /* Border Radius */
                --radius-sm: 4px;
                --radius-md: 8px;
                --radius-lg: 12px;
                --radius-full: 9999px;

                /* Transitions */
                --transition-fast: 150ms ease;
                --transition-normal: 200ms ease;
            }

            /* Theme transition animation */
            body.theme-transitioning, body.theme-transitioning * {
                transition:
                    background-color 0.3s ease,
                    color 0.3s ease,
                    border-color 0.3s ease,
                    box-shadow 0.3s ease !important;
            }

            /* === DARK THEMES === */
            [data-theme="dark"], [data-theme="midnight"] {
                --surface-base: #0c0d10;
                --surface-1: #14161a;
                --surface-2: #1c1e23;
                --surface-3: #24262c;
                --surface-overlay: #2c2f36;
                --text-primary: #fff;
                --text-secondary: #a9b2bc;
                --text-muted: rgba(169, 178, 188, 0.6);
                --text-faint: rgba(169, 178, 188, 0.4);
                --border-default: rgba(169, 178, 188, 0.12);
                --border-subtle: rgba(169, 178, 188, 0.08);
                --border-strong: rgba(169, 178, 188, 0.2);
                --border-focus: rgba(188, 32, 38, 0.5);
                --control-bg: #1b2232;
                --control-border: rgba(169, 178, 188, 0.2);
                --control-focus: rgba(188, 32, 38, 0.3);
                --success: #22c55e;
                --success-muted: rgba(34, 197, 94, 0.15);
                --warning: #bc2026;
                --warning-muted: rgba(188, 32, 38, 0.15);
                --error: #ef4444;
                --error-muted: rgba(239, 68, 68, 0.15);
                --scrollbar-track: #14161a;
                --scrollbar-thumb: #a9b2bc;
                --accent: #bc2026;
                --brand-red: #bc2026;
            }
            [data-theme="obsidian"] {
                --surface-base: #000;
                --surface-1: #0a0a0a;
                --surface-2: #141414;
                --surface-3: #1f1f1f;
                --surface-overlay: #2a2a2a;
                --text-primary: #fff;
                --text-secondary: #b8b8b8;
                --text-muted: rgba(184, 184, 184, 0.6);
                --text-faint: rgba(184, 184, 184, 0.35);
                --border-default: rgba(255, 255, 255, 0.1);
                --border-subtle: rgba(255, 255, 255, 0.06);
                --border-strong: rgba(255, 255, 255, 0.18);
                --border-focus: rgba(255, 255, 255, 0.3);
                --control-bg: #141414;
                --control-border: rgba(255, 255, 255, 0.15);
                --control-focus: rgba(255, 255, 255, 0.2);
                --success: #10b981;
                --success-muted: rgba(16, 185, 129, 0.15);
                --warning: #f59e0b;
                --warning-muted: rgba(245, 158, 11, 0.15);
                --error: #ef4444;
                --error-muted: rgba(239, 68, 68, 0.15);
                --scrollbar-track: #0a0a0a;
                --scrollbar-thumb: #3a3a3a;
                --accent: #fff;
                --brand-red: #fff;
            }
            [data-theme="nord"] {
                --surface-base: #2e3440;
                --surface-1: #3b4252;
                --surface-2: #434c5e;
                --surface-3: #4c566a;
                --surface-overlay: #5e6b7f;
                --text-primary: #eceff4;
                --text-secondary: #d8dee9;
                --text-muted: rgba(216, 222, 233, 0.6);
                --text-faint: rgba(216, 222, 233, 0.4);
                --border-default: rgba(76, 86, 106, 0.5);
                --border-subtle: rgba(76, 86, 106, 0.3);
                --border-strong: rgba(76, 86, 106, 0.7);
                --border-focus: rgba(136, 192, 208, 0.5);
                --control-bg: #3b4252;
                --control-border: rgba(76, 86, 106, 0.5);
                --control-focus: rgba(136, 192, 208, 0.3);
                --success: #a3be8c;
                --success-muted: rgba(163, 190, 140, 0.2);
                --warning: #ebcb8b;
                --warning-muted: rgba(235, 203, 139, 0.2);
                --error: #bf616a;
                --error-muted: rgba(191, 97, 106, 0.2);
                --scrollbar-track: #3b4252;
                --scrollbar-thumb: #4c566a;
                --accent: #88c0d0;
                --brand-red: #88c0d0;
            }
            [data-theme="dracula"] {
                --surface-base: #1e1f29;
                --surface-1: #282a36;
                --surface-2: #343746;
                --surface-3: #44475a;
                --surface-overlay: #54576a;
                --text-primary: #f8f8f2;
                --text-secondary: #bfbfbf;
                --text-muted: rgba(191, 191, 191, 0.6);
                --text-faint: rgba(191, 191, 191, 0.4);
                --border-default: rgba(98, 114, 164, 0.3);
                --border-subtle: rgba(98, 114, 164, 0.15);
                --border-strong: rgba(98, 114, 164, 0.45);
                --border-focus: rgba(255, 121, 198, 0.5);
                --control-bg: #282a36;
                --control-border: rgba(98, 114, 164, 0.3);
                --control-focus: rgba(255, 121, 198, 0.3);
                --success: #50fa7b;
                --success-muted: rgba(80, 250, 123, 0.15);
                --warning: #ffb86c;
                --warning-muted: rgba(255, 184, 108, 0.15);
                --error: #ff5555;
                --error-muted: rgba(255, 85, 85, 0.15);
                --scrollbar-track: #282a36;
                --scrollbar-thumb: #6272a4;
                --accent: #ff79c6;
                --brand-red: #ff79c6;
            }
            [data-theme="tokyo-night"] {
                --surface-base: #16161e;
                --surface-1: #1a1b26;
                --surface-2: #24283b;
                --surface-3: #2f3549;
                --surface-overlay: #3b4261;
                --text-primary: #c0caf5;
                --text-secondary: #a9b1d6;
                --text-muted: rgba(169, 177, 214, 0.6);
                --text-faint: rgba(169, 177, 214, 0.4);
                --border-default: rgba(122, 162, 247, 0.15);
                --border-subtle: rgba(122, 162, 247, 0.08);
                --border-strong: rgba(122, 162, 247, 0.25);
                --border-focus: rgba(122, 162, 247, 0.5);
                --control-bg: #1a1b26;
                --control-border: rgba(122, 162, 247, 0.2);
                --control-focus: rgba(122, 162, 247, 0.3);
                --success: #9ece6a;
                --success-muted: rgba(158, 206, 106, 0.15);
                --warning: #e0af68;
                --warning-muted: rgba(224, 175, 104, 0.15);
                --error: #f7768e;
                --error-muted: rgba(247, 118, 142, 0.15);
                --scrollbar-track: #1a1b26;
                --scrollbar-thumb: #3b4261;
                --accent: #7aa2f7;
                --brand-red: #7aa2f7;
            }
            [data-theme="monokai"] {
                --surface-base: #1e1f1c;
                --surface-1: #272822;
                --surface-2: #34352f;
                --surface-3: #414339;
                --surface-overlay: #4e5046;
                --text-primary: #f8f8f2;
                --text-secondary: #a7a699;
                --text-muted: rgba(167, 166, 153, 0.6);
                --text-faint: rgba(167, 166, 153, 0.4);
                --border-default: rgba(117, 113, 94, 0.3);
                --border-subtle: rgba(117, 113, 94, 0.15);
                --border-strong: rgba(117, 113, 94, 0.45);
                --border-focus: rgba(249, 38, 114, 0.5);
                --control-bg: #272822;
                --control-border: rgba(117, 113, 94, 0.3);
                --control-focus: rgba(249, 38, 114, 0.3);
                --success: #a6e22e;
                --success-muted: rgba(166, 226, 46, 0.15);
                --warning: #fd971f;
                --warning-muted: rgba(253, 151, 31, 0.15);
                --error: #f92672;
                --error-muted: rgba(249, 38, 114, 0.15);
                --scrollbar-track: #272822;
                --scrollbar-thumb: #75715e;
                --accent: #fd971f;
                --brand-red: #fd971f;
            }
            [data-theme="catppuccin-mocha"] {
                --surface-base: #11111b;
                --surface-1: #1e1e2e;
                --surface-2: #313244;
                --surface-3: #45475a;
                --surface-overlay: #585b70;
                --text-primary: #cdd6f4;
                --text-secondary: #bac2de;
                --text-muted: rgba(186, 194, 222, 0.6);
                --text-faint: rgba(186, 194, 222, 0.4);
                --border-default: rgba(127, 132, 156, 0.3);
                --border-subtle: rgba(127, 132, 156, 0.15);
                --border-strong: rgba(127, 132, 156, 0.45);
                --border-focus: rgba(245, 194, 231, 0.5);
                --control-bg: #1e1e2e;
                --control-border: rgba(127, 132, 156, 0.3);
                --control-focus: rgba(245, 194, 231, 0.3);
                --success: #a6e3a1;
                --success-muted: rgba(166, 227, 161, 0.15);
                --warning: #f9e2af;
                --warning-muted: rgba(249, 226, 175, 0.15);
                --error: #f38ba8;
                --error-muted: rgba(243, 139, 168, 0.15);
                --scrollbar-track: #1e1e2e;
                --scrollbar-thumb: #585b70;
                --accent: #f5c2e7;
                --brand-red: #f5c2e7;
            }

            /* === LIGHT THEMES === */
            [data-theme="light"], [data-theme="snow"] {
                --surface-base: #f8fafc;
                --surface-1: #fff;
                --surface-2: #f1f5f9;
                --surface-3: #e2e8f0;
                --surface-overlay: #fff;
                --text-primary: #1b2232;
                --text-secondary: #64748b;
                --text-muted: rgba(27, 34, 50, 0.5);
                --text-faint: rgba(27, 34, 50, 0.3);
                --border-default: rgba(27, 34, 50, 0.1);
                --border-subtle: rgba(27, 34, 50, 0.06);
                --border-strong: rgba(27, 34, 50, 0.15);
                --border-focus: rgba(188, 32, 38, 0.4);
                --control-bg: #fff;
                --control-border: rgba(27, 34, 50, 0.15);
                --control-focus: rgba(188, 32, 38, 0.2);
                --success: #16a34a;
                --success-muted: rgba(22, 163, 74, 0.1);
                --warning: #bc2026;
                --warning-muted: rgba(188, 32, 38, 0.1);
                --error: #dc2626;
                --error-muted: rgba(220, 38, 38, 0.1);
                --scrollbar-track: #f1f5f9;
                --scrollbar-thumb: #94a3b8;
                --accent: #bc2026;
                --brand-red: #bc2026;
            }
            [data-theme="latte"] {
                --surface-base: #eff1f5;
                --surface-1: #e6e9ef;
                --surface-2: #ccd0da;
                --surface-3: #bcc0cc;
                --surface-overlay: #acb0be;
                --text-primary: #4c4f69;
                --text-secondary: #5c5f77;
                --text-muted: rgba(76, 79, 105, 0.6);
                --text-faint: rgba(76, 79, 105, 0.35);
                --border-default: rgba(76, 79, 105, 0.15);
                --border-subtle: rgba(76, 79, 105, 0.08);
                --border-strong: rgba(76, 79, 105, 0.25);
                --border-focus: rgba(234, 118, 203, 0.5);
                --control-bg: #e6e9ef;
                --control-border: rgba(76, 79, 105, 0.2);
                --control-focus: rgba(234, 118, 203, 0.3);
                --success: #40a02b;
                --success-muted: rgba(64, 160, 43, 0.12);
                --warning: #df8e1d;
                --warning-muted: rgba(223, 142, 29, 0.12);
                --error: #d20f39;
                --error-muted: rgba(210, 15, 57, 0.12);
                --scrollbar-track: #ccd0da;
                --scrollbar-thumb: #9ca0b0;
                --accent: #ea76cb;
                --brand-red: #ea76cb;
            }
            [data-theme="rose-pine-dawn"] {
                --surface-base: #faf4ed;
                --surface-1: #fffaf3;
                --surface-2: #f2e9e1;
                --surface-3: #e8dfd5;
                --surface-overlay: #fff;
                --text-primary: #575279;
                --text-secondary: #797593;
                --text-muted: rgba(87, 82, 121, 0.5);
                --text-faint: rgba(87, 82, 121, 0.3);
                --border-default: rgba(87, 82, 121, 0.12);
                --border-subtle: rgba(87, 82, 121, 0.06);
                --border-strong: rgba(87, 82, 121, 0.2);
                --border-focus: rgba(214, 93, 146, 0.5);
                --control-bg: #fffaf3;
                --control-border: rgba(87, 82, 121, 0.15);
                --control-focus: rgba(214, 93, 146, 0.25);
                --success: #56949f;
                --success-muted: rgba(86, 148, 159, 0.12);
                --warning: #ea9d34;
                --warning-muted: rgba(234, 157, 52, 0.12);
                --error: #b4637a;
                --error-muted: rgba(180, 99, 122, 0.12);
                --scrollbar-track: #f2e9e1;
                --scrollbar-thumb: #9893a5;
                --accent: #d65d92;
                --brand-red: #d65d92;
            }
            [data-theme="solarized-light"] {
                --surface-base: #fdf6e3;
                --surface-1: #eee8d5;
                --surface-2: #e3dcc5;
                --surface-3: #d9d0b7;
                --surface-overlay: #eee8d5;
                --text-primary: #073642;
                --text-secondary: #586e75;
                --text-muted: rgba(7, 54, 66, 0.5);
                --text-faint: rgba(7, 54, 66, 0.3);
                --border-default: rgba(0, 43, 54, 0.1);
                --border-subtle: rgba(0, 43, 54, 0.06);
                --border-strong: rgba(0, 43, 54, 0.15);
                --border-focus: rgba(38, 139, 210, 0.5);
                --control-bg: #eee8d5;
                --control-border: rgba(0, 43, 54, 0.15);
                --control-focus: rgba(38, 139, 210, 0.25);
                --success: #859900;
                --success-muted: rgba(133, 153, 0, 0.12);
                --warning: #b58900;
                --warning-muted: rgba(181, 137, 0, 0.12);
                --error: #dc322f;
                --error-muted: rgba(220, 50, 47, 0.12);
                --scrollbar-track: #e3dcc5;
                --scrollbar-thumb: #93a1a1;
                --accent: #268bd2;
                --brand-red: #268bd2;
            }
            [data-theme="paper"] {
                --surface-base: #fff;
                --surface-1: #fafafa;
                --surface-2: #f5f5f5;
                --surface-3: #eee;
                --surface-overlay: #fafafa;
                --text-primary: #212121;
                --text-secondary: #616161;
                --text-muted: rgba(33, 33, 33, 0.5);
                --text-faint: rgba(33, 33, 33, 0.3);
                --border-default: rgba(0, 0, 0, 0.08);
                --border-subtle: rgba(0, 0, 0, 0.04);
                --border-strong: rgba(0, 0, 0, 0.12);
                --border-focus: rgba(33, 33, 33, 0.4);
                --control-bg: #fafafa;
                --control-border: rgba(0, 0, 0, 0.1);
                --control-focus: rgba(33, 33, 33, 0.2);
                --success: #2e7d32;
                --success-muted: rgba(46, 125, 50, 0.08);
                --warning: #f57c00;
                --warning-muted: rgba(245, 124, 0, 0.08);
                --error: #c62828;
                --error-muted: rgba(198, 40, 40, 0.08);
                --scrollbar-track: #f5f5f5;
                --scrollbar-thumb: #9e9e9e;
                --accent: #424242;
                --brand-red: #424242;
            }

            /* === SPECIAL THEMES === */
            [data-theme="solovision-red"] {
                --surface-base: #0f0506;
                --surface-1: #1a0a0c;
                --surface-2: #2d1215;
                --surface-3: #3d1a1e;
                --surface-overlay: #4d2327;
                --text-primary: #fff;
                --text-secondary: #e5c6c9;
                --text-muted: rgba(229, 198, 201, 0.6);
                --text-faint: rgba(229, 198, 201, 0.35);
                --border-default: rgba(188, 32, 38, 0.2);
                --border-subtle: rgba(188, 32, 38, 0.1);
                --border-strong: rgba(188, 32, 38, 0.35);
                --border-focus: rgba(188, 32, 38, 0.6);
                --control-bg: #1a0a0c;
                --control-border: rgba(188, 32, 38, 0.3);
                --control-focus: rgba(188, 32, 38, 0.4);
                --success: #22c55e;
                --success-muted: rgba(34, 197, 94, 0.15);
                --warning: #f59e0b;
                --warning-muted: rgba(245, 158, 11, 0.15);
                --error: #ef4444;
                --error-muted: rgba(239, 68, 68, 0.15);
                --scrollbar-track: #1a0a0c;
                --scrollbar-thumb: #bc2026;
                --accent: #bc2026;
                --brand-red: #bc2026;
            }
            [data-theme="cyberpunk"] {
                --surface-base: #0a0e27;
                --surface-1: #0f1535;
                --surface-2: #1a1f4d;
                --surface-3: #252a5f;
                --surface-overlay: #303571;
                --text-primary: #00ff9f;
                --text-secondary: #b4c6ff;
                --text-muted: rgba(180, 198, 255, 0.6);
                --text-faint: rgba(180, 198, 255, 0.35);
                --border-default: rgba(0, 255, 159, 0.2);
                --border-subtle: rgba(0, 255, 159, 0.1);
                --border-strong: rgba(0, 255, 159, 0.35);
                --border-focus: rgba(255, 0, 255, 0.6);
                --control-bg: #0f1535;
                --control-border: rgba(0, 255, 159, 0.25);
                --control-focus: rgba(255, 0, 255, 0.35);
                --success: #00ff9f;
                --success-muted: rgba(0, 255, 159, 0.15);
                --warning: #ffee00;
                --warning-muted: rgba(255, 238, 0, 0.15);
                --error: #ff006e;
                --error-muted: rgba(255, 0, 110, 0.15);
                --scrollbar-track: #0f1535;
                --scrollbar-thumb: #00ff9f;
                --accent: #ff00ff;
                --brand-red: #ff00ff;
            }
            [data-theme="ocean"] {
                --surface-base: #0a1628;
                --surface-1: #0e1e33;
                --surface-2: #15293f;
                --surface-3: #1d344d;
                --surface-overlay: #253f5b;
                --text-primary: #e0f2fe;
                --text-secondary: #7dd3fc;
                --text-muted: rgba(125, 211, 252, 0.6);
                --text-faint: rgba(125, 211, 252, 0.35);
                --border-default: rgba(14, 165, 233, 0.2);
                --border-subtle: rgba(14, 165, 233, 0.1);
                --border-strong: rgba(14, 165, 233, 0.35);
                --border-focus: rgba(6, 182, 212, 0.6);
                --control-bg: #0e1e33;
                --control-border: rgba(14, 165, 233, 0.25);
                --control-focus: rgba(6, 182, 212, 0.35);
                --success: #10b981;
                --success-muted: rgba(16, 185, 129, 0.15);
                --warning: #f59e0b;
                --warning-muted: rgba(245, 158, 11, 0.15);
                --error: #ef4444;
                --error-muted: rgba(239, 68, 68, 0.15);
                --scrollbar-track: #0e1e33;
                --scrollbar-thumb: #0ea5e9;
                --accent: #06b6d4;
                --brand-red: #06b6d4;
            }

            /* Light mode overrides for themes with light base — uses :is() to match all light themes */
            :is(
                [data-theme="light"],
                [data-theme="snow"],
                [data-theme="latte"],
                [data-theme="rose-pine-dawn"],
                [data-theme="solarized-light"],
                [data-theme="paper"]
            )
                .system-bubble {
                background: rgba(27, 34, 50, 0.08);
                border: 1px solid rgba(188, 32, 38, 0.2);
            }

            :is(
                [data-theme="light"],
                [data-theme="snow"],
                [data-theme="latte"],
                [data-theme="rose-pine-dawn"],
                [data-theme="solarized-light"],
                [data-theme="paper"]
            )
                .system-bubble-content {
                color: var(--text-primary);
            }

            :is(
                [data-theme="light"],
                [data-theme="snow"],
                [data-theme="latte"],
                [data-theme="rose-pine-dawn"],
                [data-theme="solarized-light"],
                [data-theme="paper"]
            )
                .system-bubble-time {
                color: var(--text-secondary);
            }

            :is(
                [data-theme="light"],
                [data-theme="snow"],
                [data-theme="latte"],
                [data-theme="rose-pine-dawn"],
                [data-theme="solarized-light"],
                [data-theme="paper"]
            )
                .chat-page-message.solobot
                .chat-page-bubble {
                background: var(--surface-2);
                color: var(--text-primary);
            }