:root {
    --pending: #e67e22;
    --header-height: 50px;
    --sidebar-padding-left: 7px;
    --svg-size: 20px;
    --border-radius: 8px;
    --user-message-collapsed-max-height: 220px;
    /* Modern sans-serif */
    --font-inter: 'Inter', system-ui, sans-serif;
    --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Readable UI */
    --font-verdana: Verdana, Geneva, sans-serif;

    /* Traditional serif */
    --font-georgia: Georgia, 'Times New Roman', serif;
    --font-times: 'Times New Roman', Times, serif;

    /* Monospace / techy */
    --font-courier: 'Courier New', Courier, monospace;

    --app-font-family: var(--font-inter);
    --bg-color: #f5f5f5;
    --theme-background: #f5f5f5;
    --app-background: var(--background, #ffffff);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--app-font-family, var(--font-inter));
}

html {
    background: var(--app-background, var(--background, #ffffff));
    height: 100%;
    color: var(--text-color, #333333);
}

body {
    height: 100%;
    background: var(--app-background, var(--background, #ffffff));
    color: var(--text-color, #333333);
}

/* Text Selection - ensures copied text has standard colors for pasting */
::selection {
    background-color: rgba(59, 130, 246, 0.35);
    color: #000000;
}

::-moz-selection {
    background-color: rgba(59, 130, 246, 0.35);
    color: #000000;
}

[data-mode="dark"] ::selection {
    background-color: rgba(96, 165, 250, 0.4);
    color: #ffffff;
}

[data-mode="dark"] ::-moz-selection {
    background-color: rgba(96, 165, 250, 0.4);
    color: #ffffff;
}

/* Button Reset */
button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: inherit;
}
/* Link (a) Reset */
a {
    text-decoration: none;
    color: inherit;
}
textarea {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    width: 100%;
    height: auto;
    resize: none; /* prevent manual resizing */
    outline: none; /* remove default focus outline (custom outline can be added later) */
}

/* During theme switching, disable transitions to avoid delayed text updates without restarting animations */
.theme-switching,
.theme-switching * {
    transition-property: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
}

[data-reduce-animations="true"] *,
[data-reduce-animations="true"] *::before,
[data-reduce-animations="true"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html:not([data-reduce-animations="false"]) *,
    html:not([data-reduce-animations="false"]) *::before,
    html:not([data-reduce-animations="false"]) *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

[data-mode="light"] {
    --text-color: #333333;
    --text-color-secondary: #787774;
    --text-color-tertiary: #9b9a97;
    --theme-background: var(--bg-color, #ffffff);
    --background: var(--theme-background, #ffffff);    
    --background-color: var(--theme-background, #ffffff);
    --error-color: #e74c3c;
    --error-hover-bg: rgb(104, 30, 12);
    --danger-hover-bg: rgb(251, 241, 240);
    --success-color: #2ecc71;
    --border-color: #e9e9e7; /* rgb(0,0,0,0,0.05) */
    --hover: rgb(0,0,0,0.05);
    --hover-opposite: rgb(255,255,255,0.05);
    --input-bg: #F5F5F5;
    /*
     * Shared application surfaces keep menus, tooltips, and composer controls
     * visually consistent without assigning colors inside each component.
     */
    --surface-elevated: #ffffff;
    --surface-elevated-border: #dedee2;
    --surface-muted: #f4f4f5;
    --surface-interactive-hover: #ebebed;
    --surface-interactive-active: #e4e4e7;
    --surface-control: #f5f5f5;
    --surface-control-button: #ffffff;
    --surface-control-border: #e4e4e7;
    --surface-elevated-shadow: 0 18px 48px rgba(0, 0, 0, 0.14), 0 2px 10px rgba(0, 0, 0, 0.06);
    --files-table-header-bg: #f7f6f3;
    --files-table-header-text: #787774;
    --files-row-hover-bg: #f7f6f3;
    --files-filetype-bg: #f7f6f3;
    --files-table-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --code-token-comment: #6a737d;
    --code-token-punctuation: #4d5562;
    --code-token-operator: #b31d82;
    --code-token-keyword: #b31d82;
    --code-token-function: #005cc5;
    --code-token-string: #22863a;
    --code-token-number: #b36b00;
    --code-token-boolean: #b31d82;
    --code-token-class: #1b7fd4;
    --code-token-attr: #6f42c1;
    --code-token-constant: #b36200;
    --code-token-variable: #e36209;
    --code-token-tag: #d73a49;
    --code-token-builtin: #0f6fc6;
    --code-token-regex: #2f7c4d;
    --code-token-inserted-bg: rgba(46, 160, 67, 0.18);
    --code-token-deleted-bg: rgba(248, 81, 73, 0.18);
    --code-token-selection: rgba(3, 102, 214, 0.18);
    --code-token-line-highlight: rgba(3, 102, 214, 0.08);
    --rate-limit-border: rgba(245, 158, 11, 0.25);
    --rate-limit-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(245, 158, 11, 0.02) 100%);
    --rate-limit-icon-bg: rgba(245, 158, 11, 0.12);
    --rate-limit-icon-color: #d97706;
    --rate-limit-title-color: #b45309;
    --rate-limit-btn-color: #b45309;
    --rate-limit-btn-bg: rgba(245, 158, 11, 0.10);
    --rate-limit-btn-border: rgba(245, 158, 11, 0.3);
    --rate-limit-btn-hover-bg: rgba(245, 158, 11, 0.18);
    --rate-limit-btn-hover-border: rgba(245, 158, 11, 0.5);
}

[data-mode="dark"] {
    /*
     * Keep the shared dark palette comfortably separated from dark surfaces.
     * These semantic tokens are intentionally defined here so standalone
     * screens, authentication flows, and the main application stay aligned.
     */
    --text-color: #F4F4F5;
    --text-color-secondary: #B4B4BA;
    --text-color-tertiary: #929299;
    --theme-background: var(--bg-color, #1F1F1F);
    --background: var(--theme-background, #1F1F1F);
    --background-color: var(--theme-background, #1F1F1F);
    --error-color: #F28B82;
    --error-hover-bg: rgb(242, 139, 130);       
    --danger-hover-bg: rgba(206, 64, 53, 0.15);
    --success-color: #81C995;
    --border-color: #3A3A3F;
    --hover: rgba(255, 255, 255, 0.09);
    --hover-bg: rgba(255, 255, 255, 0.09);
    --hover-opposite: rgb(0,0,0,0.05);
    --input-bg: #29292C;
    /*
     * Layer dark surfaces with visible neutral steps. The stronger hover token
     * remains theme-neutral and works for every accent color on index.html.
     */
    --surface-elevated: #242428;
    --surface-elevated-border: #45454d;
    --surface-muted: #2d2d32;
    --surface-interactive-hover: #39393f;
    --surface-interactive-active: #424249;
    --surface-control: #29292e;
    --surface-control-button: #202023;
    --surface-control-border: #3d3d44;
    --surface-elevated-shadow: 0 20px 52px rgba(0, 0, 0, 0.56), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --files-table-header-bg: #272729;
    --files-table-header-text: #A0A0A0;
    --files-row-hover-bg: rgba(255, 255, 255, 0.06);
    --files-filetype-bg: rgba(255, 255, 255, 0.07);
    --files-table-shadow: 0 8px 16px rgba(0, 0, 0, 0.45);
    --code-token-comment: #7f8c98;
    --code-token-punctuation: #aab2bf;
    --code-token-operator: #c792ea;
    --code-token-keyword: #c792ea;
    --code-token-function: #82aaff;
    --code-token-string: #c3e88d;
    --code-token-number: #f78c6c;
    --code-token-boolean: #ff5370;
    --code-token-class: #ffcb6b;
    --code-token-attr: #80cbc4;
    --code-token-constant: #f07178;
    --code-token-variable: #f78c6c;
    --code-token-tag: #ff5370;
    --code-token-builtin: #82aaff;
    --code-token-regex: #89ddff;
    --code-token-inserted-bg: rgba(76, 175, 80, 0.25);
    --code-token-deleted-bg: rgba(244, 67, 54, 0.25);
    --code-token-selection: rgba(33, 150, 243, 0.35);
    --code-token-line-highlight: rgba(255, 255, 255, 0.08);
    --rate-limit-border: rgba(245, 158, 11, 0.2);
    --rate-limit-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
    --rate-limit-icon-bg: rgba(245, 158, 11, 0.15);
    --rate-limit-icon-color: #fbbf24;
    --rate-limit-title-color: #fbbf24;
    --rate-limit-btn-color: #fbbf24;
    --rate-limit-btn-bg: rgba(245, 158, 11, 0.12);
    --rate-limit-btn-border: rgba(245, 158, 11, 0.3);
    --rate-limit-btn-hover-bg: rgba(245, 158, 11, 0.22);
    --rate-limit-btn-hover-border: rgba(245, 158, 11, 0.5);
}

:root {
    /* New minimal design tokens */
    --bg-normal: #ffffff;
    --bg-normal-elevated: #ffffff;
    --admin-bg: #fafafa;
    --admin-border: rgba(0, 0, 0, 0.06);
    --admin-border-subtle: rgba(0, 0, 0, 0.04);
    --admin-text: #111111;
    --admin-text-secondary: #666666;
    --admin-text-tertiary: #999999;
    --admin-hover: rgba(0, 0, 0, 0.04);
    --admin-active: rgba(0, 0, 0, 0.08);
    --admin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --admin-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --admin-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --admin-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.12), 0 2px 10px rgba(0, 0, 0, 0.08);
    --admin-radius: 12px;
    --admin-radius-sm: 8px;
    --admin-radius-lg: 16px;
    --admin-accent: #000000;
    --admin-accent-subtle: rgba(0, 0, 0, 0.08);
    --admin-success: #22c55e;
    --admin-success-bg: rgba(34, 197, 94, 0.1);
    --admin-error: #ef4444;
    --admin-error-bg: rgba(239, 68, 68, 0.1);
    --admin-warning: #f59e0b;
    --admin-warning-bg: rgba(245, 158, 11, 0.1);
    --admin-info: #3b82f6;
    --admin-info-bg: rgba(59, 130, 246, 0.1);
    --admin-scrollbar: rgba(0, 0, 0, 0.15);
    --admin-scrollbar-hover: rgba(0, 0, 0, 0.25);
    --admin-transition: 0.15s ease;
    --admin-success-border: rgba(34, 197, 94, 0.3);
    --admin-error-border: rgba(239, 68, 68, 0.3);
    --admin-info-border: rgba(59, 130, 246, 0.3);
    --admin-warning-border: rgba(245, 158, 11, 0.3);
    --admin-success-text: #22c55e;
    --admin-error-text: #ef4444;
    --admin-info-text: #3b82f6;
    --admin-warning-text: #f59e0b;
    /*
     * Selection and table interaction tokens prevent navigation and data rows
     * from deriving backgrounds from text colors. Admin components can then
     * preserve the same hierarchy in both modes.
     */
    --admin-selection-bg: #18181b;
    --admin-selection-text: #ffffff;
    --admin-selection-border: #18181b;
    --admin-table-row-hover: #f4f4f5;

    /*
     * Modal surfaces use a dedicated semantic layer so every dialog can share
     * the same depth, controls, and focus treatment without component-specific
     * color overrides. Dark mode only needs to replace these global tokens.
     */
    --modal-backdrop: rgba(24, 24, 27, 0.42);
    --modal-background: #ffffff;
    --modal-surface: #f7f7f8;
    --modal-border: #e4e4e7;
    --modal-border-strong: #a1a1aa;
    --modal-divider: #ececef;
    --modal-shadow: 0 24px 70px rgba(0, 0, 0, 0.18), 0 2px 12px rgba(0, 0, 0, 0.08);
    --modal-focus-ring: rgba(24, 24, 27, 0.14);
    --modal-primary-background: #18181b;
    --modal-primary-text: #ffffff;
    --modal-primary-hover: #27272a;
    --modal-secondary-background: #f4f4f5;
    --modal-secondary-text: #3f3f46;
    --modal-secondary-hover: #e4e4e7;

}

[data-mode="dark"] {
    /*
     * Admin dark mode uses stepped neutral surfaces instead of pure black.
     * These global tokens cover dashboards, forms, tables, menus, and cards.
     */
    --bg-normal: #242428;
    --bg-normal-elevated: #2b2b30;
    --admin-bg: #18181a;
    --admin-border: #3f3f46;
    --admin-border-subtle: #303036;
    --admin-text: #f4f4f5;
    --admin-text-secondary: #b4b4ba;
    --admin-text-tertiary: #85858d;
    --admin-hover: #2e2e34;
    --admin-active: #393940;
    --admin-shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.28);
    --admin-shadow: 0 8px 22px rgba(0, 0, 0, 0.36);
    --admin-shadow-lg: 0 20px 52px rgba(0, 0, 0, 0.52);
    --admin-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.56), 0 0 0 1px rgba(255, 255, 255, 0.025);
    --admin-accent: #a4a4aa;
    --admin-accent-subtle: rgba(164, 164, 170, 0.16);
    --admin-selection-bg: #34343b;
    --admin-selection-text: #f4f4f5;
    --admin-selection-border: #52525b;
    --admin-table-row-hover: #2e2e34;
    --admin-success: #4ade80;
    --admin-success-bg: rgba(74, 222, 128, 0.15);
    --admin-error: #f87171;
    --admin-error-bg: rgba(248, 113, 113, 0.15);
    --admin-warning: #fbbf24;
    --admin-warning-bg: rgba(251, 191, 36, 0.15);
    --admin-info: #60a5fa;
    --admin-info-bg: rgba(96, 165, 250, 0.15);
    --admin-scrollbar: rgba(255, 255, 255, 0.2);
    --admin-scrollbar-hover: rgba(255, 255, 255, 0.3);
    --admin-success-border: rgba(74, 222, 128, 0.4);
    --admin-error-border: rgba(248, 113, 113, 0.4);
    --admin-info-border: rgba(96, 165, 250, 0.4);
    --admin-warning-border: rgba(251, 191, 36, 0.4);
    --admin-success-text: #4ade80;
    --admin-error-text: #f87171;
    --admin-info-text: #60a5fa;
    --admin-warning-text: #fbbf24;

    /*
     * Lift dialogs above the page with warm-neutral layers instead of pure
     * black. Stronger boundaries keep inputs and secondary actions legible.
     */
    --modal-backdrop: rgba(5, 5, 7, 0.7);
    --modal-background: #202023;
    --modal-surface: #29292e;
    --modal-border: #414148;
    --modal-border-strong: #71717a;
    --modal-divider: #35353b;
    --modal-shadow: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.025);
    --modal-focus-ring: rgba(244, 244, 245, 0.16);
    --modal-primary-background: #f4f4f5;
    --modal-primary-text: #18181b;
    --modal-primary-hover: #ffffff;
    --modal-secondary-background: #2a2a2f;
    --modal-secondary-text: #d4d4d8;
    --modal-secondary-hover: #33333a;
}

/* ===== BLUE THEME ===== */
[data-theme="blue"][data-mode="light"] {
    --primary-color: #3a95e9;
    --primary-light: rgba(0, 122, 255, 0.1);
    --secondary-color: #5e6265;
    --accent-color: #1b4274;
    --border-color: #1b4274;
    --input-bg: #d9e9ff;
    --bg-color: #e8f2ff;
    --shadow-color: rgba(58, 149, 233, 0.1);
    --inactive-color: #a0a0a0;
    
}
  
[data-theme="blue"][data-mode="dark"] {
    --primary-color: #4E89F9;
    --primary-light: rgba(0, 122, 255, 0.1);
    --secondary-color: #7AA9FF;
    --accent-color: #2F5DC3;
    --bg-color: #0c121d;
    --shadow-color: rgba(78, 137, 249, 0.15);
    --inactive-color: #9AA0A6;
}

/* ===== GREEN THEME ===== */
[data-theme="green"][data-mode="light"] {
    --primary-color: #3dd598;
    --primary-light: rgba(52, 199, 89, 0.1);
    --secondary-color: #22b07d;
    --accent-color: #1d3b53;
    --border-color: #1d3b53;
    --input-bg: #d3f5e8;
    --bg-color: #e9fbf4;
    --shadow-color: rgba(61, 213, 152, 0.1);
    --inactive-color: #a0a0a0;
}

[data-theme="green"][data-mode="dark"] {
    --primary-color: #4CC278;
    --primary-light: rgba(52, 199, 89, 0.1);
    --secondary-color: #65D790;
    --accent-color: #1E8A48;
    --bg-color: #0a1510;
    --shadow-color: rgba(76, 194, 120, 0.15);
    --inactive-color: #7B7B7B;
}

/* ===== CORAL THEME ===== */
[data-theme="coral"][data-mode="light"] {
    --primary-color: #FF6B6B;
    --primary-light: rgba(255, 107, 107, 0.1);
    --secondary-color: #FF8E8E;
    --accent-color: #D94C4C;
    --border-color: #D94C4C;
    --input-bg: #ffe0e0;
    --bg-color: #ffecec;
    --shadow-color: rgba(255, 107, 107, 0.1);
    --inactive-color: #A0A0A0;
}

[data-theme="coral"][data-mode="dark"] {
    --primary-color: #FF7E7E;
    --primary-light: rgba(255, 107, 107, 0.1);
    --secondary-color: #FF9E9E;
    --accent-color: #CC5A5A;
    --bg-color: #160d0d;
    --shadow-color: rgba(255, 126, 126, 0.15);
    --inactive-color: #777777;
}

/* ===== PURPLE THEME ===== */
[data-theme="purple"][data-mode="light"] {
    --primary-color: #a979e6;
    --primary-light: rgba(175, 82, 222, 0.1);
    --secondary-color: #8e55d5;
    --accent-color: #2d2150;
    --border-color: #2d2150;
    --input-bg: #eadfff;
    --bg-color: #f4edff;
    --shadow-color: rgba(169, 121, 230, 0.1);
    --inactive-color: #a0a0a0;
}

[data-theme="purple"][data-mode="dark"] {
    --primary-color: #BB86FC;
    --primary-light: rgba(175, 82, 222, 0.1);
    --secondary-color: #D0A6FF;
    --accent-color: #8B3DFF;
    --bg-color: #140d22;
    --shadow-color: rgba(187, 134, 252, 0.15);
    --inactive-color: #7B7B7B;
}

/* ===== TEAL THEME ===== */
[data-theme="teal"][data-mode="light"] {
    --primary-color: #00BFA5;
    --primary-light: rgba(90, 200, 250, 0.1);
    --secondary-color: #33D6C2;
    --accent-color: #008F7C;
    --border-color: #008F7C;
    --input-bg: #d2f6ed;
    --bg-color: #e8fbf7;
    --shadow-color: rgba(0, 191, 165, 0.1);
    --inactive-color: #90A4AE;
}

[data-theme="teal"][data-mode="dark"] {
    --primary-color: #00E5B3;
    --primary-light: rgba(90, 200, 250, 0.1);
    --secondary-color: #33EDBF;
    --accent-color: #00B48C;
    --bg-color: #0a1515;
    --shadow-color: rgba(0, 229, 179, 0.15);
    --inactive-color: #777777;
}

/* ===== AMBER THEME ===== */
[data-theme="amber"][data-mode="light"] {
    --primary-color: #FF9800;
    --primary-light: rgba(255, 204, 0, 0.1);
    --secondary-color: #FFB74D;
    --accent-color: #E68200;
    --border-color: #E68200;
    --input-bg: #ffe0b3;
    --bg-color: #fff3da;
    --shadow-color: rgba(255, 152, 0, 0.1);
    --inactive-color: #A0A0A0;
}

[data-theme="amber"][data-mode="dark"] {
    --primary-color: #FFAB40;
    --primary-light: rgba(255, 204, 0, 0.1);
    --secondary-color: #FFC166;
    --accent-color: #FF9100;
    --bg-color: #161006;
    --shadow-color: rgba(255, 171, 64, 0.15);
    --inactive-color: #777777;
}

/* ===== MONO THEME ===== */
[data-theme="mono"][data-mode="light"] {
    --primary-color: #333333;
    --primary-light: rgba(58, 58, 60, 0.1);
    --secondary-color: #555555;
    --accent-color: #111111;
    --bg-color: #ffffff;
    --shadow-color: rgba(0, 0, 0, 0.05);
    --inactive-color: #a0a0a0;
}

[data-theme="mono"][data-mode="dark"] {
    /*
     * The monochrome theme still needs distinct interactive, muted, input,
     * and border levels. The former mid-gray primary disappeared against the
     * page background, especially on outlined controls such as passkeys.
     */
    --primary-color: #88888E;
    --primary-light: rgba(164, 164, 170, 0.16);
    --secondary-color: #A4A4AA;
    --accent-color: #68686E;
    --bg-color: #18181A;
    --border-color: #3F3F46;
    --input-bg: #29292D;
    --shadow-color: rgba(0, 0, 0, 0.45);
    --inactive-color: #929299;
}

.cursor-pointer {
    cursor: pointer;
}

/* Accessibility - Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
/* ─────────────────────────────────────────────────────────────────────────
 * Electron desktop tweaks (set on <html> by electron/preload.js)
 * On macOS the BrowserWindow uses titleBarStyle: 'hiddenInset', which
 * places the traffic-light buttons over the top-left of the page.
 * Reserve space for them and make the inset draggable so the user can
 * still move the window from that strip.
 * ───────────────────────────────────────────────────────────────────── */
:root {
    --desktop-mac-titlebar-height: 28px;
}

html.chatui-desktop-mac .sidebar-header {
    padding-top: calc(7px + var(--desktop-mac-titlebar-height));
    -webkit-app-region: drag;
}

html.chatui-desktop-mac .sidebar-header > * {
    -webkit-app-region: no-drag;
}

/* Login page: pull the top menu/branding away from the traffic lights. */
html.chatui-desktop-mac .login-layout,
html.chatui-desktop-mac .login-menu {
    padding-top: var(--desktop-mac-titlebar-height);
}

/* Generic standalone pages (error, change_password, user_setup, etc.) */
html.chatui-desktop-mac body {
    /* Allow the topmost ~28px to act as a drag handle. Pages that have their
     * own sidebar/login layout already handle this via the rules above. */
    --desktop-mac-titlebar-inset: var(--desktop-mac-titlebar-height);
}