: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;
    --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"] {
    --text-color: #E8EAED;
    --text-color-secondary: #A0A0A0;
    --text-color-tertiary: #9b9a97;
    --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: #2C2C2E; /* rgb(5,5,5,5,0.1) */
    --hover: rgb(255,255,255,0.05);
    --hover-opposite: rgb(0,0,0,0.05);
    --input-bg: #2C2C2C;
    --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;

}

[data-mode="dark"] {
    --bg-normal: #000000;
    --bg-normal-elevated: #1a1a1a;
    --admin-bg: #0a0a0a;
    --admin-border: rgba(255, 255, 255, 0.08);
    --admin-border-subtle: rgba(255, 255, 255, 0.04);
    --admin-text: #fafafa;
    --admin-text-secondary: #a1a1a1;
    --admin-text-tertiary: #666666;
    --admin-hover: rgba(255, 255, 255, 0.06);
    --admin-active: rgba(255, 255, 255, 0.1);
    --admin-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --admin-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    --admin-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
    --admin-shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.3);
    --admin-accent: #ffffff;
    --admin-accent-subtle: rgba(255, 255, 255, 0.1);
    --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;
}

/* ===== 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"] {
    --primary-color: #4A4A4A;
    --primary-light: rgba(58, 58, 60, 0.1);
    --secondary-color: #666666;
    --accent-color: #808080;
    --bg-color: #1A1A1A;
    --shadow-color: rgba(255, 255, 255, 0.05);
    --inactive-color: #666666;
}

.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);
}