/* AUTO-GENERATED CSS bundle - DO NOT EDIT. Source: ui-src/ (build/build_dist.py) */
/* ==== css/fonts.css ==== */
/*
* All @font-face declarations for the selectable UI fonts (Settings → Visuals → Font).
*
* Every family carries a `size-adjust` calibrated against JetBrains Mono (the app
* default) so switching fonts never changes layout: size-adjust scales the glyphs
* inside the em box without touching the em box itself, so font-size, line-height
* and padding everywhere stay identical. Values blend the x-height and cap-height
* ratios measured from the TTF metrics (JetBrains x-height = 0.550em, cap = 0.730em).
*
* Adding a font: drop the folder into fonts/, add @font-face blocks here (same
* size-adjust on every face of a family), and add one entry to FONT_CHOICES in
* modules/js/util/theme.js.
*/
/* JetBrains Mono — app default, the size-adjust baseline (x-height 0.550em). */
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/JetBrains/JetBrainsMono-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/JetBrains/JetBrainsMono-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: url("../fonts/JetBrains/JetBrainsMono-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
/* Fira Code — metrics nearly identical to JetBrains (x-height 0.540em). No italics shipped. */
@font-face {
font-family: "Fira Code";
src: url("../fonts/Fira_Code/FiraCode-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 102%;
}
@font-face {
font-family: "Fira Code";
src: url("../fonts/Fira_Code/FiraCode-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
size-adjust: 102%;
}
/* IBM Plex Mono (x-height 0.516em). */
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 105%;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
size-adjust: 105%;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
size-adjust: 105%;
}
@font-face {
font-family: "IBM Plex Mono";
src: url("../fonts/IBM_Plex_Mono/IBMPlexMono-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
size-adjust: 105%;
}
/* Plus Jakarta Sans — proportional sans (not mono). Metrics land on JetBrains almost
exactly (x-height 0.536em, cap 0.745em → blend ~100%), so no size-adjust needed. */
@font-face {
font-family: "Plus Jakarta Sans";
src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: "Plus Jakarta Sans";
src: url("../fonts/Plus_Jakarta_Sans/PlusJakartaSans-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
}
/* Share Tech Mono — regular only (browser synthesizes bold/italic; x-height 0.500em). */
@font-face {
font-family: "Share Tech Mono";
src: url("../fonts/Share_Tech_Mono/ShareTechMono-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 108%;
}
/* VT323 — retro low-res pixel font, regular only. Tiny glyphs in a huge em box
(x-height 0.400em) — this is the font the whole size-adjust scheme exists for. */
@font-face {
font-family: "VT323";
src: url("../fonts/VT323/VT323-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 134%;
}
/* Anton — heavy bold condensed display font (regular weight only) */
@font-face {
font-family: "Anton";
src: url("../fonts/Anton/Anton-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 90%;
}
/* VCR OSD Mono — blocky VHS on-screen-display font, regular only
(x-height 0.537em, cap-height 0.684em — blend against JetBrains ≈ 105%). */
@font-face {
font-family: "VCR OSD Mono";
src: url("../fonts/VCR_OSD_MONO/VCR_OSD_MONO_1.001.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 105%;
}
/* Barlow Condensed — high-legibility retro condensed sans-serif */
@font-face {
font-family: "Barlow Condensed";
src: url("../fonts/Barlow_Condensed/BarlowCondensed-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
size-adjust: 104%;
}
@font-face {
font-family: "Barlow Condensed";
src: url("../fonts/Barlow_Condensed/BarlowCondensed-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
size-adjust: 104%;
}
@font-face {
font-family: "Barlow Condensed";
src: url("../fonts/Barlow_Condensed/BarlowCondensed-Italic.ttf") format("truetype");
font-weight: normal;
font-style: italic;
size-adjust: 104%;
}
@font-face {
font-family: "Barlow Condensed";
src: url("../fonts/Barlow_Condensed/BarlowCondensed-BoldItalic.ttf") format("truetype");
font-weight: bold;
font-style: italic;
size-adjust: 104%;
}
/* ==== css/tokens.css ==== */
/* ==========================================================================
Design Tokens — Single source of truth for all CSS custom properties.
Every rule in every other stylesheet consumes values from here.
Theme overrides live in css/themes/*.css (loaded after this file).
========================================================================== */
:root {
/* ── Backgrounds ─────────────────────────────────────────────────── */
--bg-darker: #080a0f;
--bg-main: #0c0e14;
--bg-panel: #11141e;
--bg-hover: #1b2030;
/* NOTE: --bg-header / --bg-sidebar / --bg-footer / --bg-inner are declared on
`body` (not :root) so they resolve lazily against the body-scoped --bg-darker
that theme classes override. Declaring them in :root would lock them to the
cyberpunk default before any theme class is applied. */
/* ── Borders ─────────────────────────────────────────────────────── */
--border-color: #2e364f;
--border-glow: #00ff66;
--border-width: 1px;
--border-width-thick: 2px;
/* ── Accents ─────────────────────────────────────────────────────── */
--accent-primary: #00ff66;
--accent-primary-dim: rgba(0, 255, 102, 0.15);
--accent-warning: #f59e0b;
--accent-warning-dim: rgba(245, 158, 11, 0.15);
--accent-secondary: #00f0ff;
--accent-secondary-dim: rgba(0, 240, 255, 0.15);
--accent-error: #ff3b30;
--accent-error-dim: rgba(255, 59, 48, 0.15);
/* ── Status indicators ───────────────────────────────────────────── */
/* Kept independent of --accent-primary so online is always green-ish,
offline always red-ish, and dormant always amber regardless of theme. */
--indicator-online: #00ff66;
--indicator-online-dim: rgba(0, 255, 102, 0.18);
--indicator-offline: #ff3b30;
--indicator-offline-dim: rgba(255, 59, 48, 0.18);
--indicator-dormant: #f59e0b;
--indicator-dormant-dim: rgba(245, 158, 11, 0.18);
/* ── Typography ──────────────────────────────────────────────────── */
--text-primary: #e2e8f0;
--text-muted: #94a3b8;
--text-bright: #ffffff;
/* Font resolution chain (Settings → Visuals → Font):
--font-theme = the active theme's default (overridden in theme blocks).
Falls back to JetBrains Mono, the app default.
--font-user = set inline on by applyFontChoice() when the user pins
"Default" or an explicit font; absent in "Theme Default" mode.
--font-mono = what every rule actually consumes. Re-declared on body
(not just :root) because var() resolves where the property is
DECLARED — body is where theme classes live. */
--font-theme: "JetBrains Mono", "Courier New", Courier, monospace;
--font-mono: var(--font-user, var(--font-theme));
/* ── Shape & layout ──────────────────────────────────────────────── */
--panel-border-radius: 4px;
--input-border-radius: 4px;
--modal-border-radius: 8px;
--bubble-border-radius: 6px;
--titlebar-btn-radius: 3px;
--titlebar-btn-border-width: 1px;
--titlebar-btn-bg: none;
--titlebar-btn-border-color: var(--border-color);
--titlebar-height: 38px;
/* Shorthand radius tokens */
--radius-sm: 3px;
--radius-md: 6px;
--radius-lg: 12px;
--radius-full: 9999px;
/* ── Shadows ─────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.55);
/* ── Scrollbars ──────────────────────────────────────────────────── */
--scrollbar-width: 6px;
--scrollbar-radius: 4px;
--scrollbar-thumb: rgba(255, 255, 255, 0.2);
--scrollbar-thumb-hover: rgba(255, 255, 255, 0.3);
--scrollbar-track: transparent;
/* ── Buttons — generic (literal values only; alias chain moves to body) ─ */
--btn-gradient: none;
--bg-gradient: none;
--btn-shadow: none;
--btn-text-shadow: none;
/* ── Checkboxes & controls ───────────────────────────────────────── */
--checkmark-bg: #ffffff;
/* ── SVG arrows (form controls, literal fallbacks for cyberpunk) ─── */
/* Themes override these with their own data-URIs; the component CSS
references --select-arrow-svg / --preset-arrow-svg / --spin-buttons-svg. */
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff66' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* ── Capability / behaviour tokens (literal values) ─────────────── */
--heading-font-weight: normal;
--heading-text-transform: none;
--heading-letter-spacing: normal;
--heading-text-shadow: none;
--backdrop-blur: 0px;
--send-btn-text-shadow: none;
--input-border-focus: 1px solid var(--border-glow); /* border-glow is literal → safe */
--panel-border: 1px solid var(--border-color); /* border-color is literal → safe */
--btn-border: 1px solid var(--border-color); /* border-color is literal → safe */
--send-btn-border: 1px solid var(--border-color); /* overridden on body below */
/* ── Vana-Link / light-theme helper tokens ───────────────────────── */
--text-shadow-dark: 0 1px 3px rgba(0, 0, 0, 0.5);
--overlay-light: rgba(255, 255, 255, 0.08);
--glow-blue: rgba(173, 220, 255, 0.4);
--placeholder-light: rgba(255, 255, 255, 0.35);
--border-faint: rgba(255, 255, 255, 0.25);
--inbound-green: #7dffb3;
}
/* All vars that reference other vars (aliases) must live on `body`, not :root.
This ensures they re-evaluate against whatever --bg-* / --accent-* the active
theme class declares on body, rather than locking to the :root cyberpunk defaults. */
body {
/* ── Font resolution ─────────────────────────────────────────────── */
--font-mono: var(--font-user, var(--font-theme));
--font-theme-code: var(--font-theme);
--font-code: var(--font-user-code, var(--font-theme-code));
/* ── Layout background aliases ───────────────────────────────────── */
--bg-header: var(--bg-darker);
--bg-sidebar: var(--bg-darker);
--bg-footer: var(--bg-darker);
--bg-inner: var(--bg-darker);
/* Opacity applied to header/sidebar/footer when a custom background image is set */
/*--opacity-header: clamp(0.35, var(--ui-opacity, 0.72), 1);
--opacity-sidebar: clamp(0.35, var(--ui-opacity, 0.72), 1);
--opacity-footer: 1;*/
/* ── Buttons — aliases onto primitive tokens ─────────────────────── */
--btn-radius: var(--input-border-radius);
--btn-color: var(--text-primary);
--btn-hover-bg: var(--bg-hover);
--btn-hover-color: var(--text-primary);
/* Ok / Save / Apply */
--btn-ok-bg: var(--accent-primary-dim);
--btn-ok-color: var(--accent-primary);
--btn-ok-border: var(--accent-primary);
--btn-ok-hover-bg: var(--accent-primary);
--btn-ok-hover-color: var(--bg-main);
/* Cancel / Close */
--btn-cancel-bg: var(--bg-panel);
--btn-cancel-color: var(--text-primary);
--btn-cancel-border: var(--border-color);
--btn-cancel-hover-bg: var(--bg-hover);
--btn-cancel-hover-color: var(--text-primary);
--btn-close-bg: var(--btn-cancel-bg);
--btn-close-color: var(--btn-cancel-color);
--btn-close-border: var(--btn-cancel-border);
--btn-close-hover-bg: var(--btn-cancel-hover-bg);
--btn-close-hover-color: var(--btn-cancel-hover-color);
/* Send button */
--send-btn-gradient: var(--btn-ok-bg);
--send-btn-border: 1px solid var(--btn-ok-border);
--send-btn-color: var(--btn-ok-color);
/* ── Icon colours ────────────────────────────────────────────────── */
--icon-files: var(--accent-primary);
--icon-debug: var(--accent-secondary);
--icon-settings: var(--text-muted);
/* ── Panel text aliases ──────────────────────────────────────────── */
--panel-text: var(--text-primary);
--panel-header-text: var(--text-bright);
--panel-footer-text: var(--text-muted);
--header-text: var(--text-primary);
--footer-text: var(--text-muted);
--header-bg: var(--bg-darker);
--footer-bg: var(--bg-darker);
/* ── Input aliases ───────────────────────────────────────────────── */
--input-bg-focus: var(--bg-hover);
/* ── Chat bubble aliases ─────────────────────────────────────────── */
--user-bubble-bg: color-mix(in srgb, var(--bg-panel) 40%, transparent);
--user-bubble-border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
--user-bubble-accent-border: 2px solid var(--accent-primary-dim);
--user-bubble-color: var(--text-primary);
--user-bubble-time-color: var(--user-bubble-color);
--assistant-bubble-bg: color-mix(in srgb, var(--bg-panel) 40%, transparent);
--assistant-bubble-border: 1px solid color-mix(in srgb, var(--border-color) 50%, transparent);
--assistant-bubble-accent-border: 2px solid var(--accent-primary-dim);
--assistant-bubble-color: var(--text-primary);
--assistant-bubble-time-color: var(--text-muted);
/* ── Sidebar badges ──────────────────────────────────────────────── */
--sidebar-tag-bg: var(--border-color);
--sidebar-tag-color: var(--text-muted);
/* ── Checkbox aliases ────────────────────────────────────────────── */
--checkmark-border: var(--border-color);
--checkmark-checked-bg: var(--accent-primary);
--checkmark-checked-border: var(--accent-primary);
/* ── SVG arrow colour aliases (resolved after theme sets --text-muted etc.) */
--arrow-color: var(--text-muted);
--arrow-accent-color: var(--accent-primary);
/* ── Visualizer ──────────────────────────────────────────────────── */
--visualizer-color: var(--accent-primary);
}
/* ==== css/themes/pear.css ==== */
/* ==========================================================================
Pear Themes — Apple-inspired (Plus Jakarta Sans)
========================================================================== */
body.theme-pear-dark {
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
--bg-darker: #161617; /* Apple's sleek header/sidebar dark background */
--bg-main: #000000; /* Apple's pure black main messaging canvas */
--bg-panel: #1c1c1e; /* Apple's elevated modal/input gray */
--bg-hover: #2c2c2e;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #2c2c2e;
--border-glow: #30d158; /* Soft green border glow */
--accent-primary: #30d158; /* Pear vibrant green */
--accent-primary-dim: rgba(48, 209, 88, 0.15);
--accent-secondary: #0a84ff; /* Apple Dark Blue */
--accent-secondary-dim: rgba(10, 132, 255, 0.15);
--accent-warning: #ffd60a;
--accent-warning-dim: rgba(255, 214, 10, 0.15);
--accent-error: #ff453a;
--accent-error-dim: rgba(255, 69, 58, 0.15);
--text-primary: #ffffff;
--text-muted: #8e8e93;
--text-bright: #ffffff;
--bubble-border-radius: 16px;
--panel-border-radius: 10px;
--input-border-radius: 18px;
--modal-border-radius: 12px;
/* Outgoing User (Human) Bubbles — Deep forest green, white text */
--user-bubble-bg: #248a3d;
--user-bubble-border: none;
--user-bubble-accent-border: none;
--user-bubble-color: #ffffff;
/* Incoming Assistant (AI) Bubbles — Dark gray, white text */
--assistant-bubble-bg: #26262a;
--assistant-bubble-border: none;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #ffffff;
--sidebar-tag-bg: #2c2c2e;
--sidebar-tag-color: #a1a1a6;
--arrow-color: #8e8e93;
--arrow-accent-color: #248a3d;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23248a3d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #30d158;
--indicator-online-dim: rgba(48, 209, 88, 0.18);
--indicator-offline: #ff453a;
--indicator-offline-dim: rgba(255, 69, 58, 0.18);
--indicator-dormant: #ffd60a;
--indicator-dormant-dim: rgba(255, 214, 10, 0.18);
/* Action Buttons: darker forest green OK so white text stays readable; dark-panel Cancel */
--btn-ok-bg: #248a3d;
--btn-ok-color: #ffffff;
--btn-ok-border: #1a6b2e;
--btn-ok-hover-bg: #1a6b2e;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #2c2c2e;
--btn-cancel-color: #8e8e93;
--btn-cancel-border: #3a3a3c;
--btn-cancel-hover-bg: #3a3a3c;
--btn-cancel-hover-color: #ebebf5;
}
body.theme-pear-light {
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
--bg-darker: #f5f5f7; /* Apple's sleek off-white sidebar */
--bg-main: #ffffff; /* Apple's pure white messaging canvas */
--bg-panel: #ffffff; /* Clean white modals/inputs */
--bg-hover: #e5e5ea;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #d1d1d6;
--border-glow: #34c759;
--accent-primary: #34c759; /* Pear vibrant green */
--accent-primary-dim: rgba(52, 199, 89, 0.15);
--accent-secondary: #007aff; /* Apple Light Blue */
--accent-secondary-dim: rgba(0, 122, 255, 0.15);
--accent-warning: #ff9500;
--accent-warning-dim: rgba(255, 149, 0, 0.15);
--accent-error: #ff3b30;
--accent-error-dim: rgba(255, 59, 48, 0.15);
--text-primary: #000000;
--text-muted: #8e8e93;
--text-bright: #000000;
--bubble-border-radius: 16px;
--panel-border-radius: 10px;
--input-border-radius: 18px;
--modal-border-radius: 12px;
/* Outgoing User (Human) Bubbles — Green with White text */
--user-bubble-bg: #34c759;
--user-bubble-border: none;
--user-bubble-accent-border: none;
--user-bubble-color: #ffffff;
/* Incoming Assistant (AI) Bubbles — Light Gray with Black text */
--assistant-bubble-bg: #e5e5ea;
--assistant-bubble-border: none;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #000000;
--sidebar-tag-bg: #e5e5ea;
--sidebar-tag-color: #8e8e93;
--arrow-color: #8e8e93;
--arrow-accent-color: #34c759;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334c759' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #34c759;
--indicator-online-dim: rgba(52, 199, 89, 0.15);
--indicator-offline: #ff3b30;
--indicator-offline-dim: rgba(255, 59, 48, 0.15);
--indicator-dormant: #ff9500;
--indicator-dormant-dim: rgba(255, 149, 0, 0.15);
/* Action Buttons: solid fills that remain legible inside the solid-green user bubble */
--btn-ok-bg: #34c759;
--btn-ok-color: #ffffff;
--btn-ok-border: #34c759;
--btn-ok-hover-bg: #30b651;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #e5e5ea;
--btn-cancel-color: #000000;
--btn-cancel-border: #c7c7cc;
--btn-cancel-hover-bg: #d1d1d6;
--btn-cancel-hover-color: #000000;
}
/* ==== css/themes/standard.css ==== */
/* ==========================================================================
Standard Themes — ChatGPT/Gemini-inspired (Plus Jakarta Sans)
========================================================================== */
body.theme-standard-dark {
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
--bg-darker: #131314; /* Darker slate/charcoal (Gemini-like sidebar) */
--bg-main: #1f1f20; /* Central workspace panels (ChatGPT/Gemini main background) */
--bg-panel: #2d2f31; /* Settings panel/modals, input area */
--bg-hover: #3e4144; /* Hover states on buttons/inputs */
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #444746; /* Standard separators and outlines */
--border-glow: #10a37f; /* Glowing accent border effects */
--accent-primary: #10a37f; /* ChatGPT mint-green */
--accent-primary-dim: rgba(16, 163, 127, 0.15);
--accent-secondary: #4285f4; /* Gemini Blue */
--accent-secondary-dim: rgba(66, 133, 244, 0.15);
--accent-warning: #f59e0b;
--accent-warning-dim: rgba(245, 158, 11, 0.15);
--accent-error: #ef4444;
--accent-error-dim: rgba(239, 68, 68, 0.15);
--text-primary: #e3e3e3; /* Main chat bubble text */
--text-muted: #b4b4b4; /* Secondary descriptions, timestamps */
--text-bright: #ffffff; /* Titles and highlighted terms */
--arrow-color: #b4b4b4;
--arrow-accent-color: #10a37f;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310a37f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4b4b4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #10a37f;
--indicator-online-dim: rgba(16, 163, 127, 0.18);
--indicator-offline: #ef4444;
--indicator-offline-dim: rgba(239, 68, 68, 0.18);
--indicator-dormant: #f59e0b;
--indicator-dormant-dim: rgba(245, 158, 11, 0.18);
--sidebar-tag-bg: #3e4144;
--sidebar-tag-color: #e3e3e3;
/* Action Buttons: solid mint OK; charcoal Cancel */
--btn-ok-bg: #10a37f;
--btn-ok-color: #ffffff;
--btn-ok-border: #0d8065;
--btn-ok-hover-bg: #0d8065;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #3e4144;
--btn-cancel-color: #e3e3e3;
--btn-cancel-border: #5a5d61;
--btn-cancel-hover-bg: #52565a;
--btn-cancel-hover-color: #ffffff;
}
body.theme-standard-light {
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
--bg-darker: #f4f4f5; /* Light gray background (ChatGPT/Gemini sidebar) */
--bg-main: #ffffff; /* Pure white main canvas */
--bg-panel: #fafafa; /* Light panels/modals */
--bg-hover: #f0f0f1; /* Hover states */
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #e3e3e3;
--border-glow: #0b57d0; /* Blue border glow */
--accent-primary: #0b57d0; /* Gemini Google Blue */
--accent-primary-dim: rgba(11, 87, 208, 0.15);
--accent-secondary: #10a37f; /* ChatGPT green */
--accent-secondary-dim: rgba(16, 163, 127, 0.15);
--accent-warning: #b45309;
--accent-warning-dim: rgba(180, 83, 9, 0.15);
--accent-error: #dc2626;
--accent-error-dim: rgba(220, 38, 38, 0.15);
--text-primary: #0d0d0d; /* Dark gray text */
--text-muted: #676767; /* Muted descriptions/labels */
--text-bright: #000000; /* Clear headings */
--arrow-color: #676767;
--arrow-accent-color: #0b57d0;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676767' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b57d0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23676767' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #16a34a;
--indicator-online-dim: rgba(22, 163, 74, 0.15);
--indicator-offline: #dc2626;
--indicator-offline-dim: rgba(220, 38, 38, 0.15);
--indicator-dormant: #d97706;
--indicator-dormant-dim: rgba(217, 119, 6, 0.15);
--user-bubble-bg: #f2f0f0;
--user-bubble-border: 1px solid #f2f0f0;
--user-bubble-accent-border: none;
--user-bubble-color: #0d0d0d;
--assistant-bubble-bg: #f2f0f0;
--assistant-bubble-border: 1px solid #f2f0f0;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #0d0d0d;
--sidebar-tag-bg: #e2e8f0;
--sidebar-tag-color: #475569;
/* Action Buttons: solid fills for light background */
--btn-ok-bg: #0b57d0;
--btn-ok-color: #ffffff;
--btn-ok-border: #0842a0;
--btn-ok-hover-bg: #0842a0;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #f0f0f1;
--btn-cancel-color: #0d0d0d;
--btn-cancel-border: #c8c8c8;
--btn-cancel-hover-bg: #e3e3e3;
--btn-cancel-hover-color: #0d0d0d;
}
/* ==== css/themes/light.css ==== */
/* ==========================================================================
Light Themes — Modern Slate, Grey Monochrome, Grey Colourful
========================================================================== */
body.theme-light-modern {
--bg-darker: #cbd5e1;
--bg-main: #f1f5f9;
--bg-panel: #ffffff;
--bg-hover: #e2e8f0;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #94a3b8;
--border-glow: #64748b;
--accent-primary: #059669;
--accent-primary-dim: rgba(5, 150, 105, 0.15);
--accent-warning: #d97706;
--accent-warning-dim: rgba(217, 119, 6, 0.15);
--accent-secondary: #0284c7;
--accent-secondary-dim: rgba(2, 132, 199, 0.15);
--accent-error: #dc2626;
--accent-error-dim: rgba(220, 38, 38, 0.15);
--text-primary: #0f172a;
--text-muted: #475569;
--text-bright: #000000;
--arrow-color: #475569;
--arrow-accent-color: #059669;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: slightly deeper shades for contrast on light backgrounds */
--indicator-online: #16a34a;
--indicator-online-dim: rgba(22, 163, 74, 0.15);
--indicator-offline: #dc2626;
--indicator-offline-dim: rgba(220, 38, 38, 0.15);
--indicator-dormant: #d97706;
--indicator-dormant-dim: rgba(217, 119, 6, 0.15);
/* Chat Boxes / Message Bubbles — Modern Slate & Light Mint */
--user-bubble-bg: #e6f4ea;
--user-bubble-border: 1px solid #e6f4ea;
--user-bubble-accent-border: none;
--user-bubble-color: #0f172a;
--assistant-bubble-bg: #f8fafc;
--assistant-bubble-border: 1px solid #e2e8f0;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #0f172a;
--sidebar-tag-bg: #f1f5f9;
--sidebar-tag-color: #64748b;
/* Action Buttons: solid fills for light background */
--btn-ok-bg: #059669;
--btn-ok-color: #ffffff;
--btn-ok-border: #047857;
--btn-ok-hover-bg: #047857;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #e2e8f0;
--btn-cancel-color: #0f172a;
--btn-cancel-border: #94a3b8;
--btn-cancel-hover-bg: #cbd5e1;
--btn-cancel-hover-color: #0f172a;
}
body.theme-grey-monochrome {
--bg-darker: #8f8f8f;
--bg-main: #cfcfcf;
--bg-panel: #dfdfdf;
--bg-hover: #b8b8b8;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #6f6f6f;
--border-glow: #404040;
--accent-primary: #2f2f2f;
--accent-primary-dim: rgba(47, 47, 47, 0.18);
--accent-warning: #3f3f3f;
--accent-warning-dim: rgba(63, 63, 63, 0.18);
--accent-secondary: #1f1f1f;
--accent-secondary-dim: rgba(31, 31, 31, 0.2);
--accent-error: #4f4f4f;
--accent-error-dim: rgba(79, 79, 79, 0.2);
--text-primary: #111111;
--text-muted: #2d2d2d;
--text-bright: #000000;
--arrow-color: #2d2d2d;
--arrow-accent-color: #2f2f2f;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f2f2f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d2d2d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: use real semantic colours so they remain distinguishable
even though the theme's own accents are all grey shades. */
--indicator-online: #2e7d32;
--indicator-online-dim: rgba(46, 125, 50, 0.2);
--indicator-offline: #c62828;
--indicator-offline-dim: rgba(198, 40, 40, 0.18);
--indicator-dormant: #e65100;
--indicator-dormant-dim: rgba(230, 81, 0, 0.2);
--user-bubble-bg: #e8e8e8;
--user-bubble-border: 1px solid #cfcfcf;
--user-bubble-accent-border: none;
--user-bubble-color: #111111;
--assistant-bubble-bg: #dfdfdf;
--assistant-bubble-border: 1px solid #cfcfcf;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #111111;
--sidebar-tag-bg: #2f2f2f;
--sidebar-tag-color: #ffffff;
/* Action Buttons: solid fills — since accent-primary is near-black on grey, keep solid */
--btn-ok-bg: #2f2f2f;
--btn-ok-color: #ffffff;
--btn-ok-border: #1a1a1a;
--btn-ok-hover-bg: #111111;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #b8b8b8;
--btn-cancel-color: #111111;
--btn-cancel-border: #6f6f6f;
--btn-cancel-hover-bg: #a0a0a0;
--btn-cancel-hover-color: #111111;
}
body.theme-grey-colourful {
--bg-darker: #7b7d7b;
--bg-main: #a5a6a5;
--bg-panel: #bfbfbf;
--bg-hover: #8c8d8c;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #525352;
--border-glow: #383938;
--accent-primary: #32e769f0;
--accent-primary-dim: rgba(0, 230, 118, 0.15);
--accent-secondary: #2eaceb;
--accent-secondary-dim: rgba(2, 132, 199, 0.15);
--accent-warning: #c963e6;
--accent-warning-dim: rgba(138, 44, 163, 0.22);
--accent-error: #ff1744;
--accent-error-dim: rgba(255, 23, 68, 0.15);
--text-primary: #101010;
--text-muted: #3a3b3a;
--text-bright: #000000;
--arrow-color: #3a3b3a;
--arrow-accent-color: #32e769;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a3b3a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2332e769' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233a3b3a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: light background needs slightly darker greens/reds */
--indicator-online: #1aad4a;
--indicator-online-dim: rgba(26, 173, 74, 0.2);
--indicator-offline: #e5143a;
--indicator-offline-dim: rgba(229, 20, 58, 0.18);
--indicator-dormant: #b86b00;
--indicator-dormant-dim: rgba(184, 107, 0, 0.2);
--user-bubble-bg: rgba(50, 231, 105, 0.12);
--user-bubble-border: 1px solid rgba(50, 231, 105, 0.4);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(46, 172, 235, 0.1);
--assistant-bubble-border: 1px solid rgba(46, 172, 235, 0.35);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
--sidebar-tag-bg: #1c719c;
--sidebar-tag-color: #ffffff;
/* Action Buttons: solid fills for readability on mid-grey backgrounds */
--btn-ok-bg: #1da84f;
--btn-ok-color: #ffffff;
--btn-ok-border: #14813b;
--btn-ok-hover-bg: #14813b;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #8c8d8c;
--btn-cancel-color: #101010;
--btn-cancel-border: #525352;
--btn-cancel-hover-bg: #797a79;
--btn-cancel-hover-color: #101010;
}
/* ==== css/themes/retro.css ==== */
/* ==========================================================================
Retro Themes — Blue Retro (XP), 80s Neon, CGA 8-bit, Acheron (Matrix)
========================================================================== */
body.theme-blue-retro {
--font-theme: "IBM Plex Mono", "Courier New", Courier, monospace;
--bg-darker: #142755;
--bg-main: #3b63a3;
--bg-panel: #5f86c0;
--bg-hover: #4b74b0;
--border-color: #223f79;
--border-glow: #0d1f45;
--accent-primary: #42d65b;
--accent-primary-dim: rgba(27, 212, 58, 0.2);
--accent-warning: #f7e18e;
--accent-warning-dim: rgba(247, 225, 142, 0.2);
--accent-secondary: #d6e6ff;
--accent-secondary-dim: rgba(214, 230, 255, 0.18);
--accent-error: #ff9d6e;
--accent-error-dim: rgba(255, 157, 110, 0.2);
--text-primary: #f5f8ff;
--text-muted: #d8e6ff;
--text-bright: #ffffff;
--arrow-color: #d8e6ff;
--arrow-accent-color: #42d65b;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8e6ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342d65b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d8e6ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: brighter online green for contrast against mid-blue panels;
red/amber chosen to pop clearly without clashing with the blue palette. */
--indicator-online: #4cff70;
--indicator-online-dim: rgba(76, 255, 112, 0.2);
--indicator-offline: #ff5252;
--indicator-offline-dim: rgba(255, 82, 82, 0.2);
--indicator-dormant: #ffd740;
--indicator-dormant-dim: rgba(255, 215, 64, 0.2);
--user-bubble-bg: rgba(66, 214, 91, 0.12);
--user-bubble-border: 1px solid rgba(66, 214, 91, 0.35);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(95, 134, 192, 0.25);
--assistant-bubble-border: 1px solid rgba(34, 63, 121, 0.4);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
--sidebar-tag-bg: #3b63a3;
--sidebar-tag-color: #ffffff;
/* Windows XP close button styling */
--close-btn-bg: #da4925;
--close-btn-border: 1px solid #7d260f;
--close-btn-color: #ffffff;
--close-btn-hover-bg: #e66040;
--close-btn-hover-border: 1px solid #993319;
--close-btn-hover-color: #ffffff;
/* Action Buttons: Ok matches the Windows XP Start button green */
--btn-ok-bg: #3c7a28;
--btn-ok-color: #ffffff;
--btn-ok-border: #2a5a1a;
--btn-ok-hover-bg: #2a5a1a;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #4b74b0;
--btn-cancel-color: #f5f8ff;
--btn-cancel-border: #223f79;
--btn-cancel-hover-bg: #3b63a3;
--btn-cancel-hover-color: #ffffff;
}
body.theme-80s {
--font-theme: "Share Tech Mono", "Courier New", Courier, monospace;
--bg-darker: #0d0d0d;
--bg-main: #1a1024;
--bg-panel: #251635;
--bg-hover: #331d49;
--border-color: #5f3c88;
--border-glow: #ff3b3b;
--accent-primary: #ff3b3b;
--accent-primary-dim: rgba(255, 59, 59, 0.2);
--accent-warning: #ffe347;
--accent-warning-dim: rgba(255, 227, 71, 0.2);
--accent-secondary: #43d3ff;
--accent-secondary-dim: rgba(67, 211, 255, 0.2);
--accent-error: #ff6a00;
--accent-error-dim: rgba(255, 106, 0, 0.2);
--text-primary: #fff6d0;
--text-muted: #ffca7a;
--text-bright: #ffffff;
--arrow-color: #ffca7a;
--arrow-accent-color: #ff3b3b;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b3b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca7a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: accent-primary is red here, so we must define online separately
to avoid a nonsensical red "online" lamp. Use neon green to match 80s vibe. */
--indicator-online: #39ff14;
--indicator-online-dim: rgba(57, 255, 20, 0.2);
--indicator-offline: #ff1744;
--indicator-offline-dim: rgba(255, 23, 68, 0.2);
--indicator-dormant: #ffe347;
--indicator-dormant-dim: rgba(255, 227, 71, 0.2);
--user-bubble-bg: rgba(67, 211, 255, 0.12);
--user-bubble-border: 1px solid rgba(67, 211, 255, 0.3);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(255, 59, 59, 0.08);
--assistant-bubble-border: 1px solid rgba(255, 59, 59, 0.25);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
/* Action Buttons: cyan OK avoids red-as-confirm confusion; dark-purple Cancel */
--btn-ok-bg: #43d3ff;
--btn-ok-color: #0d0d0d;
--btn-ok-border: #22b8e8;
--btn-ok-hover-bg: #22b8e8;
--btn-ok-hover-color: #0d0d0d;
--btn-cancel-bg: #331d49;
--btn-cancel-color: #ffca7a;
--btn-cancel-border: #5f3c88;
--btn-cancel-hover-bg: #4a2a6a;
--btn-cancel-hover-color: #fff6d0;
}
/* ─── CGA (8-bit Throwback) ──────────────────────────────────────────────────
Authentic CGA Palette 1, High Intensity: the notorious cyan/magenta/white
combo. Pure black background keeps text readable.
Colour reference (CGA 16-colour RGBI):
Bright Cyan #55ffff │ Bright Magenta #ff55ff
Bright Yellow #ffff55 │ Bright Red #ff5555
Dark Cyan #005555 │ White #ffffff
─────────────────────────────────────────────────────────────────────────── */
body.theme-cga {
--font-theme: "VT323", "Courier New", Courier, monospace;
--bg-darker: #000000;
--bg-main: #000000;
--bg-panel: #0a0a0a;
--bg-hover: #141414;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #005555; /* dark cyan — exists in the CGA 16-colour set */
--border-glow: #55ffff;
--accent-primary: #55ffff; /* bright cyan */
--accent-primary-dim: rgba(85, 255, 255, 0.15);
--accent-warning: #ffff55; /* bright yellow */
--accent-warning-dim: rgba(255, 255, 85, 0.18);
--accent-secondary: #ff55ff; /* bright magenta */
--accent-secondary-dim: rgba(255, 85, 255, 0.15);
--accent-error: #ff5555; /* bright red */
--accent-error-dim: rgba(255, 85, 85, 0.18);
--text-primary: #ffffff;
--text-muted: #55ffff; /* dim text uses bright cyan — no greys in CGA */
--text-bright: #ffffff;
--arrow-color: #55ffff;
--arrow-accent-color: #55ffff;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355ffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355ffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355ffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: straight from the CGA colour chart */
--indicator-online: #55ff55; /* bright green */
--indicator-online-dim: rgba(85, 255, 85, 0.2);
--indicator-offline: #ff5555; /* bright red */
--indicator-offline-dim: rgba(255, 85, 85, 0.2);
--indicator-dormant: #ffff55; /* bright yellow */
--indicator-dormant-dim: rgba(255, 255, 85, 0.2);
--user-bubble-bg: #000000;
--user-bubble-border: 1px solid #ff55ff;
--user-bubble-accent-border: 1px solid #ff55ff;
--user-bubble-color: #ffffff;
--assistant-bubble-bg: #000000;
--assistant-bubble-border: 1px solid #55ffff;
--assistant-bubble-accent-border: 1px solid #55ffff;
--assistant-bubble-color: #ffffff;
--sidebar-tag-bg: #ff55ff;
--sidebar-tag-color: #000000;
/* Action Buttons: magenta OK (distinct from cyan UI accent); dark-cyan Cancel */
--btn-ok-bg: #ff55ff;
--btn-ok-color: #000000;
--btn-ok-border: #cc22cc;
--btn-ok-hover-bg: #cc22cc;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #000000;
--btn-cancel-color: #55ffff;
--btn-cancel-border: #008888;
--btn-cancel-hover-bg: #007777;
--btn-cancel-hover-color: #ffffff;
}
body.theme-acheron {
--font-theme: "Share Tech Mono", "Courier New", Courier, monospace;
--bg-darker: #040605;
--bg-main: #070d0a;
--bg-panel: #0d1511;
--bg-hover: #16241d;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #22372b;
--border-glow: #00ff41;
--accent-primary: #00ff41;
--accent-primary-dim: rgba(0, 255, 65, 0.15);
--accent-warning: #ffb000;
--accent-warning-dim: rgba(255, 176, 0, 0.15);
--accent-secondary: #2dff61;
--accent-secondary-dim: rgba(0, 255, 65, 0.15);
--accent-error: #ff1111;
--accent-error-dim: rgba(255, 17, 17, 0.15);
--text-primary: #85e09b;
--text-muted: #4e805b;
--text-bright: #d1ffd9;
--arrow-color: #4e805b;
--arrow-accent-color: #00ff41;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e805b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300ff41' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234e805b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: accent-primary is already a strong green; offline/dormant use
theme-consistent colours. */
--indicator-online: #00ff41;
--indicator-online-dim: rgba(0, 255, 65, 0.18);
--indicator-offline: #ff1111;
--indicator-offline-dim: rgba(255, 17, 17, 0.18);
--indicator-dormant: #ffb000;
--indicator-dormant-dim: rgba(255, 176, 0, 0.18);
--user-bubble-bg: rgba(27, 57, 41, 0.35);
--user-bubble-border: none;
--user-bubble-accent-border: none;
--user-bubble-color: #ffffff;
--user-bubble-time-color: var(--user-bubble-color);
--assistant-bubble-bg: rgba(27, 57, 41, 0.35);
--assistant-bubble-border: none;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #ffffff;
--assistant-bubble-time-color: var(--assistant-bubble-color);
--sidebar-tag-bg: rgba(0, 255, 65, 0.15);
--sidebar-tag-color: #00ff41;
/* Action Buttons: deeper matrix-green OK; near-black green Cancel */
--btn-ok-bg: #00c830;
--btn-ok-color: #070d0a;
--btn-ok-border: #009924;
--btn-ok-hover-bg: #009924;
--btn-ok-hover-color: #070d0a;
--btn-cancel-bg: #16241d;
--btn-cancel-color: #85e09b;
--btn-cancel-border: #22372b;
--btn-cancel-hover-bg: #22372b;
--btn-cancel-hover-color: #d1ffd9;
}
/* Sharp / zero-radius rendering for pixel-perfect retro aesthetics */
body.theme-cga,
body.theme-cga * {
border-radius: 0px !important;
}
body.theme-acheron,
body.theme-acheron * {
border-radius: 0px !important;
}
body.theme-cga ::-webkit-scrollbar-thumb {
border-radius: 0px !important;
}
body.theme-acheron ::-webkit-scrollbar-thumb {
border-radius: 0px !important;
}
/* ==== css/themes/scifi.css ==== */
/* ==========================================================================
Sci-Fi Themes — Renaissance Gold, Starship Terminal, Celestial OS, Aqua Classic
========================================================================== */
/* ─── Renaissance Gold ───────────────────────────────────────────────────────
Inspired by the amber-gold-on-dark-charcoal aesthetic of augmented-reality
heads-up displays. Deep almost-black backgrounds with rich antique gold and
warm bronze accents evoke an age of mechanical enlightenment.
─────────────────────────────────────────────────────────────────────────── */
body.theme-renaissance {
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace; /* required: --font-theme is proportional */
--bg-darker: #0a0800;
--bg-main: #100d00;
--bg-panel: #1a1500;
--bg-hover: #251e00;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #3d3000;
--border-glow: #e8a000;
--accent-primary: #e8a000;
--accent-primary-dim: rgba(232, 160, 0, 0.15);
--accent-warning: #ffcc44;
--accent-warning-dim: rgba(255, 204, 68, 0.18);
--accent-secondary: #c47b00;
--accent-secondary-dim: rgba(196, 123, 0, 0.18);
--accent-error: #cc2200;
--accent-error-dim: rgba(204, 34, 0, 0.18);
--text-primary: #f0dfa0;
--text-muted: #a08840;
--text-bright: #fff8d0;
--arrow-color: #a08840;
--arrow-accent-color: #e8a000;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a08840' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8a000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a08840' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #6fcf3a;
--indicator-online-dim: rgba(111, 207, 58, 0.2);
--indicator-offline: #cc2200;
--indicator-offline-dim: rgba(204, 34, 0, 0.2);
--indicator-dormant: #e8a000;
--indicator-dormant-dim: rgba(232, 160, 0, 0.2);
--user-bubble-bg: rgba(232, 160, 0, 0.12);
--user-bubble-border: 1px solid rgba(232, 160, 0, 0.4);
--user-bubble-accent-border: 2px solid var(--accent-primary);
--user-bubble-color: #fff8d0;
--assistant-bubble-bg: rgba(196, 123, 0, 0.08);
--assistant-bubble-border: 1px solid rgba(196, 123, 0, 0.3);
--assistant-bubble-accent-border: 2px solid var(--accent-secondary);
--assistant-bubble-color: var(--text-primary);
--sidebar-tag-bg: #3d3000;
--sidebar-tag-color: #f0dfa0;
/* Action Buttons: solid bronze OK; near-black parchment Cancel */
--btn-ok-bg: #c47b00;
--btn-ok-color: #fff8d0;
--btn-ok-border: #9a6000;
--btn-ok-hover-bg: #9a6000;
--btn-ok-hover-color: #fff8d0;
--btn-cancel-bg: #251e00;
--btn-cancel-color: #a08840;
--btn-cancel-border: #3d3000;
--btn-cancel-hover-bg: #3d3000;
--btn-cancel-hover-color: #f0dfa0;
}
/* ─── Starship Terminal ──────────────────────────────────────────────────────
Inspired by LCARS-style federation computer interfaces. Black backgrounds
with warm beige/peach/orange panel dividers and that characteristic
burnt-orange rounded-panel aesthetic. Text is a warm off-white.
─────────────────────────────────────────────────────────────────────────── */
body.theme-starship {
--bg-darker: #000000;
--bg-main: #06060f;
--bg-panel: #0d0d1a;
--bg-hover: #14142a;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #cc7722;
--border-glow: #dd9944;
--accent-primary: #dd9944;
--accent-primary-dim: rgba(221, 153, 68, 0.18);
--accent-warning: #ffcc00;
--accent-warning-dim: rgba(255, 204, 0, 0.18);
--accent-secondary: #cc6633;
--accent-secondary-dim: rgba(204, 102, 51, 0.18);
--accent-error: #cc3333;
--accent-error-dim: rgba(204, 51, 51, 0.18);
--text-primary: #f5e6cc;
--text-muted: #b09060;
--text-bright: #fff5e0;
--arrow-color: #b09060;
--arrow-accent-color: #dd9944;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b09060' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dd9944' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b09060' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #66cc44;
--indicator-online-dim: rgba(102, 204, 68, 0.2);
--indicator-offline: #cc3333;
--indicator-offline-dim: rgba(204, 51, 51, 0.2);
--indicator-dormant: #ffcc00;
--indicator-dormant-dim: rgba(255, 204, 0, 0.2);
--user-bubble-bg: rgba(221, 153, 68, 0.1);
--user-bubble-border: 1px solid rgba(221, 153, 68, 0.3);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(204, 102, 51, 0.08);
--assistant-bubble-border: 1px solid rgba(204, 102, 51, 0.25);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
--sidebar-tag-bg: #cc6633;
--sidebar-tag-color: #ffffff;
/* Action Buttons: LCARS burnt-orange OK; very-dark-space Cancel */
--btn-ok-bg: #cc6633;
--btn-ok-color: #fff5e0;
--btn-ok-border: #a04e22;
--btn-ok-hover-bg: #a04e22;
--btn-ok-hover-color: #fff5e0;
--btn-cancel-bg: #14142a;
--btn-cancel-color: #b09060;
--btn-cancel-border: #cc7722;
--btn-cancel-hover-bg: #1e1e3a;
--btn-cancel-hover-color: #f5e6cc;
}
/* ─── Celestial OS ───────────────────────────────────────────────────────────
Inspired by TempleOS's stark, high-contrast 16-color palette on pure white.
Vivid primary colours on a blinding white background — bold cobalt blue,
bright red errors, sunshine yellow warnings. No subtlety; pure intent.
─────────────────────────────────────────────────────────────────────────── */
body.theme-celestial {
--bg-darker: #d8d8d8;
--bg-main: #ffffff;
--bg-panel: #f0f0f0;
--bg-hover: #e0e0e0;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #a0a0a0;
--border-glow: #0000aa;
--accent-primary: #0000cc;
--accent-primary-dim: rgba(0, 0, 204, 0.12);
--accent-warning: #aaaa00;
--accent-warning-dim: rgba(170, 170, 0, 0.15);
--accent-secondary: #00aaaa;
--accent-secondary-dim: rgba(0, 170, 170, 0.15);
--accent-error: #cc0000;
--accent-error-dim: rgba(204, 0, 0, 0.12);
--text-primary: #000000;
--text-muted: #444444;
--text-bright: #000000;
--arrow-color: #444444;
--arrow-accent-color: #0000cc;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230000cc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23444444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: use vivid system colours faithful to a 16-colour palette */
--indicator-online: #00aa00;
--indicator-online-dim: rgba(0, 170, 0, 0.15);
--indicator-offline: #cc0000;
--indicator-offline-dim: rgba(204, 0, 0, 0.15);
--indicator-dormant: #aaaa00;
--indicator-dormant-dim: rgba(170, 170, 0, 0.15);
--user-bubble-bg: #e8f0fe;
--user-bubble-border: 1px solid #0000cc;
--user-bubble-accent-border: none;
--user-bubble-color: #000000;
--assistant-bubble-bg: #e0f7fa;
--assistant-bubble-border: 1px solid #00aaaa;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #000000;
--sidebar-tag-bg: #0000cc;
--sidebar-tag-color: #ffffff;
/* Action Buttons: solid fills faithful to 16-colour palette — plain blue Ok, grey Cancel */
--btn-ok-bg: #0000cc;
--btn-ok-color: #ffffff;
--btn-ok-border: #000099;
--btn-ok-hover-bg: #000099;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #d8d8d8;
--btn-cancel-color: #000000;
--btn-cancel-border: #a0a0a0;
--btn-cancel-hover-bg: #c0c0c0;
--btn-cancel-hover-color: #000000;
}
/* ─── Aqua Classic ───────────────────────────────────────────────────────────
Inspired by Mac OS X 10.0–10.4 Aqua. Soft sky-blue panels on near-white,
with that iconic deep-water teal accent and polished platinum sidebars.
Secondary accent echoes the original graphite/mauve finder window chrome.
─────────────────────────────────────────────────────────────────────────── */
body.theme-aqua {
--bg-darker: #c5d9f0;
--bg-main: #ddeeff;
--bg-panel: #eef5ff;
--bg-hover: #d0e8ff;
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #8ab4d8;
--border-glow: #0077cc;
--accent-primary: #0077cc;
--accent-primary-dim: rgba(0, 119, 204, 0.15);
--accent-warning: #e07800;
--accent-warning-dim: rgba(224, 120, 0, 0.15);
--accent-secondary: #008b9c;
--accent-secondary-dim: rgba(0, 139, 156, 0.15);
--accent-error: #cc1100;
--accent-error-dim: rgba(204, 17, 0, 0.15);
--text-primary: #1a2a3a;
--text-muted: #4a6a8a;
--text-bright: #000000;
--arrow-color: #4a6a8a;
--arrow-accent-color: #0077cc;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230077cc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a6a8a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Indicators: vivid but still within the cool-blue palette */
--indicator-online: #1a8c1a;
--indicator-online-dim: rgba(26, 140, 26, 0.18);
--indicator-offline: #cc1100;
--indicator-offline-dim: rgba(204, 17, 0, 0.18);
--indicator-dormant: #e07800;
--indicator-dormant-dim: rgba(224, 120, 0, 0.18);
--user-bubble-bg: rgba(0, 119, 204, 0.08);
--user-bubble-border: 1px solid rgba(0, 119, 204, 0.25);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(0, 139, 156, 0.06);
--assistant-bubble-border: 1px solid rgba(0, 139, 156, 0.2);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
--sidebar-tag-bg: #c5d9f0;
--sidebar-tag-color: #1a2a3a;
/* Action Buttons: solid fills within the Aqua blue palette */
--btn-ok-bg: #0077cc;
--btn-ok-color: #ffffff;
--btn-ok-border: #005599;
--btn-ok-hover-bg: #005599;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #c5d9f0;
--btn-cancel-color: #1a2a3a;
--btn-cancel-border: #8ab4d8;
--btn-cancel-hover-bg: #b0caeb;
--btn-cancel-hover-color: #1a2a3a;
}
/* ==== css/themes/grand-prix-98.css ==== */
/* ==========================================================================
Grand Prix 98 (Ridge Racer Type 4-inspired Dark Theme)
========================================================================== */
body.theme-grand-prix-98-dark {
--font-theme: "Barlow Condensed", "Segoe UI", sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
--bg-darker: #f3b704; /* Namco Yellow margin frame */
--bg-main: #1e1e22; /* Central workspace panels (charcoal slate) */
--bg-panel: #26262a; /* Sidebar, settings boxes, card items */
--bg-hover: #323238; /* Hover states on buttons/inputs */
--border-color: #3b3b40;
--border-glow: #ff3b00; /* Glowing accent border effects (scarlet) */
/* Layout & Inner Container overrides */
--bg-header: var(--bg-darker);
--bg-sidebar: var(--bg-panel);
--bg-footer: var(--bg-darker);
--bg-inner: #151518;
--opacity-header: 1;
--opacity-footer: 1;
--accent-primary: #ff3b00; /* Scarlet orange-red */
--accent-primary-dim: rgba(255, 59, 0, 0.15);
--accent-secondary: #f3b704; /* Namco yellow-orange */
--accent-secondary-dim: rgba(243, 183, 4, 0.15);
--accent-warning: #ffd60a;
--accent-warning-dim: rgba(255, 214, 10, 0.15);
--accent-error: #ff453a;
--accent-error-dim: rgba(255, 69, 58, 0.15);
--text-primary: #ffffff;
--text-muted: #8e909a;
--text-bright: #ffffff;
--arrow-color: #8e909a;
--arrow-accent-color: #ff3b00;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e909a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b00' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e909a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #30d158;
--indicator-online-dim: rgba(48, 209, 88, 0.2);
--indicator-offline: #ef4617;
--indicator-offline-dim: rgba(255, 69, 58, 0.18);
--indicator-dormant: #1e1e22;
--indicator-dormant-dim: rgba(185, 185, 209, 0.2);
--user-bubble-bg: #ff3b00;
--user-bubble-border: none;
--user-bubble-accent-border: none;
--user-bubble-color: #ffffff;
--user-bubble-time-color: var(--user-bubble-color);
--assistant-bubble-bg: #26262a;
--assistant-bubble-border: none;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #ffffff;
--assistant-bubble-time-color: var(--assistant-bubble-color);
--sidebar-tag-bg: #ff3b00;
--sidebar-tag-color: #ffffff;
/* Grand Prix close button styling (slate grey with white X) */
--close-btn-bg: #26262a;
--close-btn-border: 1px solid #3b3b40;
--close-btn-color: #ffffff;
--close-btn-hover-bg: var(--accent-error);
--close-btn-hover-border: var(--accent-error);
--close-btn-hover-color: #ffffff;
/* Action Buttons: white OK with dark text (pops on the charcoal settings panel); charcoal Cancel */
--btn-ok-bg: #ffffff;
--btn-ok-color: #1e1e22;
--btn-ok-border: #c0c0c0;
--btn-ok-hover-bg: #ff3b00;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #3b3b40;
--btn-cancel-color: #ffffff;
--btn-cancel-border: #5a5a60;
--btn-cancel-hover-bg: #52525a;
--btn-cancel-hover-color: #ffffff;
/* Header/Footer text for yellow background readability */
--header-text: #1e1e22;
--footer-text: #1e1e22;
/* Checkbox styling */
--checkmark-bg: #ffffff;
--checkmark-border: #1e1e22;
--checkmark-checked-bg: #ff3b00;
--checkmark-checked-border: #ff3b00;
}
/* ── Structural overrides ─────────────────────────────────────────────────── */
/* Force rigid, sharp console menu styling */
body.theme-grand-prix-98-dark,
body.theme-grand-prix-98-dark * {
border-radius: 0px !important;
}
body.theme-grand-prix-98-dark ::-webkit-scrollbar-thumb {
border-radius: 0px !important;
}
/* Header & HUD Styling using Anton font */
body.theme-grand-prix-98-dark .app-title,
body.theme-grand-prix-98-dark h1,
body.theme-grand-prix-98-dark h2,
body.theme-grand-prix-98-dark h3,
body.theme-grand-prix-98-dark .sidebar-header,
body.theme-grand-prix-98-dark .panel-header h2,
body.theme-grand-prix-98-dark .status-lamp,
body.theme-grand-prix-98-dark #sidebar-toggle-btn,
body.theme-grand-prix-98-dark .ptt-btn,
body.theme-grand-prix-98-dark .action-btn,
body.theme-grand-prix-98-dark .input-controls label {
font-family: "Anton", "Arial Black", sans-serif !important;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Emoji trigger button: icon colour must be charcoal against the yellow footer background
(the default --text-muted grey is invisible on #f3b704). */
body.theme-grand-prix-98-dark .emoji-trigger-btn {
color: var(--header-text);
border-color: var(--header-text);
}
/* R4 Header Prefix (*) */
body.theme-grand-prix-98-dark h1:before,
body.theme-grand-prix-98-dark h2:before,
body.theme-grand-prix-98-dark .panel-header h2:before,
body.theme-grand-prix-98-dark .sidebar-header:before {
content: "*";
color: var(--accent-primary);
margin-right: 6px;
}
/* Custom titlebar styling for Grand Prix 98 (Yellow header) */
body.theme-grand-prix-98-dark .titlebar {
border-bottom: var(--border-width-thick) solid var(--header-text); /* Sharp dark separator */
}
/* Make text, buttons, and icons inside the header dark charcoal for high readability on yellow */
body.theme-grand-prix-98-dark .titlebar .app-title,
body.theme-grand-prix-98-dark .titlebar .tb-btn-label,
body.theme-grand-prix-98-dark .titlebar .status-btn:not(#status-stt):not(#status-tts),
body.theme-grand-prix-98-dark .titlebar .set-default-btn,
body.theme-grand-prix-98-dark .titlebar .win-btn {
color: var(--header-text) !important;
}
body.theme-grand-prix-98-dark .titlebar .app-icon {
color: var(--accent-primary) !important; /* Keep the red accent icon */
filter: drop-shadow(0 0 2px var(--accent-primary-dim)) !important;
}
body.theme-grand-prix-98-dark #sidebar-toggle-btn {
color: var(--header-text) !important;
border-color: var(--header-text) !important;
}
body.theme-grand-prix-98-dark #sidebar-toggle-btn:hover {
color: var(--accent-primary) !important;
border-color: var(--accent-primary) !important;
background-color: rgba(30, 30, 34, 0.1) !important;
}
/* Button borders and states on yellow background */
body.theme-grand-prix-98-dark .titlebar .status-btn,
body.theme-grand-prix-98-dark .titlebar .file-browser-btn,
body.theme-grand-prix-98-dark .titlebar .debug-btn,
body.theme-grand-prix-98-dark .titlebar .settings-btn {
border-color: rgba(30, 30, 34, 0.35) !important;
}
body.theme-grand-prix-98-dark .titlebar .status-btn:hover,
body.theme-grand-prix-98-dark .titlebar .file-browser-btn:hover,
body.theme-grand-prix-98-dark .titlebar .file-browser-btn.active,
body.theme-grand-prix-98-dark .titlebar .debug-btn:hover,
body.theme-grand-prix-98-dark .titlebar .debug-btn.active,
body.theme-grand-prix-98-dark .titlebar .settings-btn:hover {
background-color: rgba(30, 30, 34, 0.1) !important;
border-color: var(--header-text) !important;
}
/* Debug / Files / Settings buttons in Titlebar */
body.theme-grand-prix-98-dark .titlebar .file-browser-btn .ui-icon {
color: var(--header-text) !important; /* Force dark instead of yellow */
}
body.theme-grand-prix-98-dark .titlebar .debug-btn .ui-icon {
color: var(--header-text) !important; /* Force dark instead of yellow */
}
body.theme-grand-prix-98-dark .titlebar .settings-btn .ui-icon {
color: var(--header-text) !important; /* Force dark instead of muted grey */
}
/* Emoji button: --accent-secondary is Namco yellow, same as the yellow footer bg — override
to scarlet so the icon is visible against the dark charcoal input panel background. */
body.theme-grand-prix-98-dark .emoji-trigger-btn:hover {
border-color: var(--accent-primary) !important;
color: var(--accent-primary) !important;
box-shadow: 0 0 8px var(--accent-primary-dim) !important;
}
/* Grand Prix footer overrides for Namco Yellow background */
body.theme-grand-prix-98-dark .panel-footer {
border-top: var(--border-width) solid var(--header-text);
}
body.theme-grand-prix-98-dark .panel-footer .metric-lbl {
color: var(--footer-text) !important;
}
body.theme-grand-prix-98-dark .panel-footer .metric-val {
color: var(--accent-primary) !important;
}
body.theme-grand-prix-98-dark .panel-footer .checkbox-container {
color: var(--footer-text) !important;
}
body.theme-grand-prix-98-dark .panel-footer .checkbox-container input:checked ~ .scroll-lbl {
color: var(--accent-primary) !important;
}
body.theme-grand-prix-98-dark .panel-footer .checkmark {
border-color: var(--checkmark-border) !important;
background-color: var(--checkmark-bg) !important;
}
body.theme-grand-prix-98-dark .panel-footer .checkbox-container input:checked + .checkmark {
background-color: var(--checkmark-checked-bg) !important;
border-color: var(--checkmark-checked-border) !important;
}
body.theme-grand-prix-98-dark .panel-footer .checkbox-container input:checked + .checkmark::after {
color: var(--checkmark-bg) !important;
}
/* ==== css/themes/xross-blue.css ==== */
/* ==========================================================================
Xross Blue (Console/Handheld Wave Theme)
========================================================================== */
body.theme-xross-blue {
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
/* Base Palette */
--bg-darker: #051829;
--bg-main: #0c437a;
--bg-panel: rgba(255, 255, 255, 0.04);
--bg-hover: rgba(255, 255, 255, 0.12);
/* Layout & Glass transparency */
--bg-header: transparent;
--bg-sidebar: rgba(5, 24, 41, 0.35);
--bg-footer: transparent;
--bg-inner: rgba(5, 24, 41, 0.2);
--opacity-header: 0.6;
--opacity-sidebar: 0.5;
--opacity-footer: 0.8;
/* Borders & Glows */
--border-color: rgba(255, 255, 255, 0.12);
--border-glow: rgba(173, 220, 255, 0.3);
/* Accents */
--accent-primary: #addcff; /* Glowing Wave Cyan */
--accent-primary-dim: rgba(173, 220, 255, 0.15);
--accent-warning: #ffd740;
--accent-warning-dim: rgba(255, 215, 64, 0.15);
--accent-secondary: #ffffff; /* Pure white console text */
--accent-secondary-dim: rgba(255, 255, 255, 0.2);
--accent-error: #ff5252;
--accent-error-dim: rgba(255, 82, 82, 0.15);
/* Typography */
--text-primary: #ffffff;
--text-muted: rgba(255, 255, 255, 0.65);
--text-bright: #ffffff;
/* Chat Bubbles (Rounded Pill Style) */
--user-bubble-bg: rgba(173, 220, 255, 0.08);
--user-bubble-border: 1px solid rgba(173, 220, 255, 0.25);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(255, 255, 255, 0.03);
--assistant-bubble-border: 1px solid rgba(255, 255, 255, 0.08);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
/* Buttons & Badges */
--sidebar-tag-bg: rgba(255, 255, 255, 0.15);
--sidebar-tag-color: #ffffff;
--btn-ok-bg: rgba(255, 255, 255, 0.9);
--btn-ok-color: #0c437a;
--btn-ok-border: transparent;
--btn-ok-hover-bg: #ffffff;
--btn-ok-hover-color: #051829;
--btn-cancel-bg: rgba(255, 255, 255, 0.08);
--btn-cancel-color: #ffffff;
--btn-cancel-border: rgba(255, 255, 255, 0.2);
--btn-cancel-hover-bg: rgba(255, 255, 255, 0.15);
--btn-cancel-hover-color: #ffffff;
--arrow-color: white;
--arrow-accent-color: #addcff;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23addcff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Status Indicators */
--indicator-online: #00e676;
--indicator-online-dim: rgba(0, 230, 118, 0.2);
--indicator-offline: #ff5252;
--indicator-offline-dim: rgba(255, 82, 82, 0.2);
--indicator-dormant: #ffd740;
--indicator-dormant-dim: rgba(255, 215, 64, 0.2);
}
/* ── Structural overrides ─────────────────────────────────────────────────── */
/* Rounded Capsule Pill Aesthetics */
body.theme-xross-blue .btn,
body.theme-xross-blue .action-btn,
body.theme-xross-blue .ptt-btn,
body.theme-xross-blue .sidebar-item,
body.theme-xross-blue .status-btn,
body.theme-xross-blue .set-default-btn,
body.theme-xross-blue .emoji-trigger-btn,
body.theme-xross-blue .settings-tab-btn,
body.theme-xross-blue .nav-btn,
body.theme-xross-blue .sidebar-search input,
body.theme-xross-blue .preset-dropdown,
body.theme-xross-blue .input-panel-wrapper,
body.theme-xross-blue .panel-header-btn {
border-radius: 9999px !important;
}
body.theme-xross-blue .message-bubble {
border-radius: 18px !important;
}
body.theme-xross-blue .welcome-box,
body.theme-xross-blue .settings-box,
body.theme-xross-blue .modal-content,
body.theme-xross-blue .note-editor,
body.theme-xross-blue .file-browser-panel,
body.theme-xross-blue .settings-drawer,
body.theme-xross-blue .system-alert-toast {
border-radius: 16px !important;
}
body.theme-xross-blue .system-alert-toast {
border-left-width: 1px !important;
}
/* Glassmorphism blur on background-active structures */
body.theme-xross-blue.has-custom-bg .message-bubble,
body.theme-xross-blue.has-custom-bg .sidebar,
body.theme-xross-blue.has-custom-bg .file-browser-sidebar,
body.theme-xross-blue.has-custom-bg .debug-console,
body.theme-xross-blue.has-custom-bg .titlebar,
body.theme-xross-blue.has-custom-bg .input-panel,
body.theme-xross-blue.has-custom-bg .welcome-box,
body.theme-xross-blue.has-custom-bg .settings-box,
body.theme-xross-blue.has-custom-bg .modal-content,
body.theme-xross-blue.has-custom-bg .settings-drawer,
body.theme-xross-blue.has-custom-bg .system-alert-toast {
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
}
/* Glowing text styling for XMB console titles */
body.theme-xross-blue h1,
body.theme-xross-blue h2,
body.theme-xross-blue h3,
body.theme-xross-blue .app-title,
body.theme-xross-blue .panel-header h2,
body.theme-xross-blue .sidebar-header,
body.theme-xross-blue .sidebar-title {
font-weight: 300 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
text-shadow: 0 0 10px rgba(173, 220, 255, 0.45) !important;
}
/* Translucent Inputs & Dropdowns */
body.theme-xross-blue .sidebar-search input,
body.theme-xross-blue .preset-dropdown {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--text-bright) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
body.theme-xross-blue .sidebar-search input:focus,
body.theme-xross-blue .preset-dropdown:focus,
body.theme-xross-blue .preset-dropdown:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
border-color: var(--accent-primary) !important;
box-shadow: 0 0 8px var(--border-glow) !important;
}
/* Custom Dropdown Option styling inside WebView2 (Solid color override to avoid white-on-white) */
body.theme-xross-blue select option {
background-color: var(--bg-darker) !important;
color: var(--text-primary) !important;
}
/* Glowing scrollbars */
body.theme-xross-blue ::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
body.theme-xross-blue ::-webkit-scrollbar-track {
background: transparent !important;
}
body.theme-xross-blue ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2) !important;
border-radius: 9999px !important;
}
body.theme-xross-blue ::-webkit-scrollbar-thumb:hover {
background: rgba(173, 220, 255, 0.4) !important;
}
/* ==== css/themes/aero-glass.css ==== */
/* ==========================================================================
Aero Glass (Windows Vista / Longhorn-inspired Theme)
========================================================================== */
body.theme-aero-glass {
--font-theme: "Segoe UI", "Plus Jakarta Sans", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
/* Base Palette: Dark Slate Teal-Black */
--bg-darker: #080d12;
--bg-main: #0f161d;
--bg-panel: rgba(16, 26, 36, 0.35); /* Frosted teal-black glass */
--bg-hover: rgba(255, 255, 255, 0.12);
/* Layout & Glass transparency */
--bg-header: transparent;
--bg-sidebar: rgba(12, 20, 28, 0.45);
--bg-footer: transparent;
--bg-inner: rgba(8, 12, 18, 0.2);
--opacity-header: 0.55;
--opacity-sidebar: 0.55;
--opacity-footer: 0.85;
/* Borders & Glows */
--border-color: rgba(255, 255, 255, 0.14); /* Crisp, thin white glass border */
--border-glow: rgba(92, 225, 230, 0.25);
/* Accents: Aero Teal & Vista Orange */
--accent-primary: #5ce1e6; /* Aero Teal / Cyan */
--accent-primary-dim: rgba(92, 225, 230, 0.15);
--accent-warning: #ff8f00; /* Vista Amber / Orange */
--accent-warning-dim: rgba(255, 143, 0, 0.15);
--accent-secondary: #ffffff;
--accent-secondary-dim: rgba(255, 255, 255, 0.2);
--accent-error: #ff4a4a;
--accent-error-dim: rgba(255, 74, 74, 0.15);
/* Typography */
--text-primary: #f0f3f6;
--text-muted: rgba(240, 243, 246, 0.65);
--text-bright: #ffffff;
/* Chat Bubbles (Frosted Glass panels) */
--user-bubble-bg: rgba(92, 225, 230, 0.07);
--user-bubble-border: 1px solid rgba(92, 225, 230, 0.2);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--assistant-bubble-bg: rgba(255, 255, 255, 0.03);
--assistant-bubble-border: 1px solid rgba(255, 255, 255, 0.06);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
/* Buttons & Controls */
--sidebar-tag-bg: rgba(92, 225, 230, 0.15);
--sidebar-tag-color: #ffffff;
--btn-ok-bg: #1bbb0a; /* Classic Windows Start Green */
--btn-ok-color: #ffffff;
--btn-ok-border: #138707;
--btn-ok-hover-bg: #138707;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: rgba(255, 255, 255, 0.08);
--btn-cancel-color: #ffffff;
--btn-cancel-border: rgba(255, 255, 255, 0.18);
--btn-cancel-hover-bg: rgba(255, 255, 255, 0.15);
--btn-cancel-hover-color: #ffffff;
--arrow-color: white;
--arrow-accent-color: #5ce1e6;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ce1e6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Status Indicators */
--indicator-online: #1bbb0a;
--indicator-online-dim: rgba(27, 187, 10, 0.2);
--indicator-offline: #ff4a4a;
--indicator-offline-dim: rgba(255, 74, 74, 0.2);
--indicator-dormant: #ff8f00;
--indicator-dormant-dim: rgba(255, 143, 0, 0.2);
}
/* ── Structural overrides ─────────────────────────────────────────────────── */
/* Rounded Vista Window Styling (Subtler 8px - 10px curves) */
body.theme-aero-glass .btn,
body.theme-aero-glass .action-btn,
body.theme-aero-glass .ptt-btn,
body.theme-aero-glass .sidebar-item,
body.theme-aero-glass .status-btn,
body.theme-aero-glass .set-default-btn,
body.theme-aero-glass .emoji-trigger-btn,
body.theme-aero-glass .settings-tab-btn,
body.theme-aero-glass .nav-btn,
body.theme-aero-glass .sidebar-search input,
body.theme-aero-glass .preset-dropdown,
body.theme-aero-glass .panel-header-btn {
border-radius: 6px !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
body.theme-aero-glass .chat-bubble {
border-radius: 8px !important;
}
body.theme-aero-glass .welcome-box,
body.theme-aero-glass .settings-box,
body.theme-aero-glass .modal-content,
body.theme-aero-glass .note-editor,
body.theme-aero-glass .file-browser-panel,
body.theme-aero-glass .settings-drawer,
body.theme-aero-glass .system-alert-toast {
border-radius: 10px !important;
box-shadow:
0 12px 36px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(255, 255, 255, 0.16) !important;
}
/* Glassmorphism blur on background-active structures */
body.theme-aero-glass.has-custom-bg .message-bubble,
body.theme-aero-glass.has-custom-bg .sidebar,
body.theme-aero-glass.has-custom-bg .file-browser-sidebar,
body.theme-aero-glass.has-custom-bg .debug-console,
body.theme-aero-glass.has-custom-bg .titlebar,
body.theme-aero-glass.has-custom-bg .input-panel,
body.theme-aero-glass.has-custom-bg .welcome-box,
body.theme-aero-glass.has-custom-bg .settings-box,
body.theme-aero-glass.has-custom-bg .modal-content,
body.theme-aero-glass.has-custom-bg .settings-drawer,
body.theme-aero-glass.has-custom-bg .system-alert-toast {
backdrop-filter: blur(16px) !important; /* Slightly stronger Vista-style blur */
-webkit-backdrop-filter: blur(16px) !important;
}
/* Glossy Aero Diagonal Light Beam/Shine Reflections */
body.theme-aero-glass .sidebar,
body.theme-aero-glass .file-browser-sidebar,
body.theme-aero-glass .debug-console,
body.theme-aero-glass .settings-drawer,
body.theme-aero-glass .message-bubble,
body.theme-aero-glass .welcome-box,
body.theme-aero-glass .system-alert-toast {
background-image: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.03) 48%,
rgba(255, 255, 255, 0) 48.5%,
rgba(255, 255, 255, 0) 100%
) !important;
}
/* Flat Glowing text details */
body.theme-aero-glass h1,
body.theme-aero-glass h2,
body.theme-aero-glass h3,
body.theme-aero-glass .app-title,
body.theme-aero-glass .panel-header h2,
body.theme-aero-glass .sidebar-header,
body.theme-aero-glass .sidebar-title {
font-weight: 400 !important;
letter-spacing: 0.03em !important;
text-transform: none !important;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.5) !important;
}
/* Translucent Inputs & Dropdowns */
body.theme-aero-glass .sidebar-search input,
body.theme-aero-glass .preset-dropdown {
background-color: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
color: var(--text-bright) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
body.theme-aero-glass .sidebar-search input:focus,
body.theme-aero-glass .preset-dropdown:focus,
body.theme-aero-glass .preset-dropdown:hover {
background-color: rgba(255, 255, 255, 0.12) !important;
border-color: var(--accent-primary) !important;
box-shadow: 0 0 8px var(--border-glow) !important;
}
/* Custom Dropdown Option styling inside WebView2 (Solid color override to avoid white-on-white) */
body.theme-aero-glass select option {
background-color: #26262a !important;
color: #ffffff !important;
}
/* Glowing scrollbars */
body.theme-aero-glass ::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
body.theme-aero-glass ::-webkit-scrollbar-track {
background: transparent !important;
}
body.theme-aero-glass ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 9999px !important;
}
body.theme-aero-glass ::-webkit-scrollbar-thumb:hover {
background: rgba(92, 225, 230, 0.3) !important;
}
/* ==== css/themes/vanalink.css ==== */
/* ==========================================================================
Vana-Link (Classic PlayOnline-inspired Theme)
========================================================================== */
body.theme-vanalink {
/* Background Gradient */
--bg-gradient: radial-gradient(circle at 50% 15%, #4fa3e3 0%, #1d61b3 45%, #081a38 100%);
/* Shape & Layout - Retro/Millennium Pill Look */
--titlebar-btn-radius: 9999px;
--titlebar-btn-border-width: 2px;
--titlebar-btn-bg: rgba(255, 255, 255, 0.06);
/* Icon Colors - Themed to match PlayOnline aesthetic */
--icon-files: #4fa3e3;
--icon-debug: #addcff;
--icon-settings: #ffd700;
/* Button Gradient & Shape */
--btn-gradient: linear-gradient(to bottom, #4a7ec5 0%, #2d558d 100%);
--btn-border: 1px solid #4a7ec5;
--btn-shadow: none;
--btn-color: #ffffff;
--btn-radius: 9999px;
--btn-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
/* Send Button */
--send-btn-gradient: linear-gradient(to bottom, #4a7ec5 0%, #2d558d 100%);
--send-btn-border: 1px solid var(--border-color);
--send-btn-color: #ffffff;
--font-theme: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
--visualizer-color: #7dbbff;
/* Base Palette */
--bg-darker: #081a38;
--bg-main: #143d75;
--bg-panel: #dce6f0;
--bg-hover: #b8cadd;
/* Layout & Transparency overrides */
--bg-header: transparent;
--bg-sidebar: transparent;
--bg-footer: transparent;
--bg-inner: transparent;
--opacity-header: 1;
--opacity-sidebar: 1;
--opacity-footer: 1;
/* Borders & Glows */
--border-color: #1a2430;
--border-glow: rgba(173, 220, 255, 0.45);
/* Accents */
--accent-primary: #1c5298;
--accent-primary-dim: rgba(28, 82, 152, 0.15);
--accent-secondary: #1c2733;
--accent-secondary-dim: rgba(28, 39, 51, 0.15);
--accent-warning: #f09a1e;
--accent-warning-dim: rgba(240, 154, 30, 0.15);
--accent-error: #d13b3b;
--accent-error-dim: rgba(209, 59, 59, 0.15);
/* Typography */
--text-primary: #1c2733;
--text-muted: #526071;
--text-bright: #ffffff;
/* Chat Bubbles (Rounded Card Style) */
--user-bubble-bg: #1d519b;
--user-bubble-border: 2px solid #0d1e36;
--user-bubble-accent-border: none;
--user-bubble-color: #ffffff;
--user-bubble-time-color: rgba(255, 255, 255, 0.8);
--assistant-bubble-bg: #e5edf6;
--assistant-bubble-border: 2px solid #1c2733;
--assistant-bubble-accent-border: none;
--assistant-bubble-color: #1c2733;
--assistant-bubble-time-color: #526071;
/* Buttons & Badges */
--sidebar-tag-bg: #1d519b;
--sidebar-tag-color: #ffffff;
--btn-ok-bg: #1d519b;
--btn-ok-color: #ffffff;
--btn-ok-border: #0d1e36;
--btn-ok-hover-bg: #2f79d1;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #7d8c9e;
--btn-cancel-color: #ffffff;
--btn-cancel-border: #b0c0d2;
--btn-cancel-hover-bg: linear-gradient(to bottom, #8d9dae 0%, #626e7d 100%);
--btn-cancel-hover-border: #c0d0e2;
--btn-cancel-hover-color: #ffffff;
--arrow-color: #1c2733;
--arrow-accent-color: #1d519b;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2733' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d519b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2733' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* Status Indicators — brighter green for contrast against dark blue titlebar */
--indicator-online: #32cf54;
--indicator-online-dim: rgba(50, 207, 84, 0.25);
--indicator-offline: #bd2626;
--indicator-offline-dim: rgba(189, 38, 38, 0.2);
--indicator-dormant: #e6a117;
--indicator-dormant-dim: rgba(230, 161, 23, 0.2);
/* Sidebar Capsule Items */
--sidebar-item-bg: linear-gradient(180deg, #2b61a7 0%, #153c70 100%);
--sidebar-item-border: 2px solid #0d1e36;
--sidebar-item-radius: 9999px;
--sidebar-item-text: #ffffff;
--sidebar-item-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
--sidebar-item-shadow: 0 4px 6px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.15);
--sidebar-item-hover-bg: linear-gradient(180deg, #3d7ccb 0%, #1c5298 100%);
--sidebar-item-hover-border: #3b76bd;
--sidebar-item-hover-shadow: 0 0 10px rgba(173, 220, 255, 0.6), 0 4px 6px rgba(0, 0, 0, 0.2);
/* Glossy Orbs */
--sidebar-orb-bg: radial-gradient(circle at 35% 35%, #ffffff 0%, #7dbbff 30%, #1c58ad 70%, #08295b 100%);
--sidebar-orb-shadow: 0 0 6px rgba(125, 187, 255, 0.8), inset -1px -1px 2px rgba(0, 0, 0, 0.6);
--sidebar-orb-hover-bg: radial-gradient(circle at 35% 35%, #ffffff 0%, #a6d2ff 30%, #3086ff 70%, #0d4699 100%);
--sidebar-orb-hover-shadow: 0 0 10px rgba(166, 210, 255, 1), 0 0 4px rgba(255, 255, 255, 0.6);
/* Layout Panels & Cards */
--panel-bg: #dce6f0;
--panel-border: 3px solid #1a2430;
--panel-radius: 24px;
--panel-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
--panel-text: #1a2430;
--panel-header-bg: #1c3a6a;
--panel-header-text: #dce6f0;
--panel-footer-bg: #1c3a6a;
--panel-footer-text: #dce6f0;
/* Input Fields & Textarea */
--input-bg: #ffffe8;
--input-border: 2px solid #7d8b9c;
--input-radius: 16px;
--input-text: #1a2430;
--input-bg-focus: #ffffff;
--input-border-focus: #1c5298;
--input-shadow: 0 0 8px rgba(28, 82, 152, 0.4);
/* Sidebar Search Box */
--sidebar-search-bg: rgba(0, 0, 0, 0.25);
--sidebar-search-border: 2px solid #4a7ec5;
--sidebar-search-radius: 9999px;
--sidebar-search-text: #ffffff;
--sidebar-search-placeholder: rgba(255, 255, 255, 0.5);
--sidebar-search-bg-focus: rgba(0, 0, 0, 0.4);
--sidebar-search-border-focus: #3b76bd;
--sidebar-search-shadow: 0 0 8px rgba(173, 220, 255, 0.4);
/* Sidebar Labels & Shadows */
--sidebar-label-text: #e5edf6;
--sidebar-label-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
--sidebar-label-color: #dbe8f7;
--sidebar-label-shadow-global: 0 1px 2px rgba(0, 0, 0, 0.5);
/* Unified Button Hover */
--btn-hover-bg: linear-gradient(to bottom, #5a8fd5 0%, #3d659d 100%);
--btn-hover-border: #add3ff;
--btn-hover-shadow: 0 0 8px rgba(173, 220, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.2);
/* Chat Bubbles */
--user-bubble-gradient: linear-gradient(135deg, #1d519b 0%, #2f79d1 100%);
--bubble-radius: 20px;
--bubble-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
/* Scrollbars */
--scrollbar-thumb: rgba(28, 82, 152, 0.3);
--scrollbar-thumb-hover: rgba(28, 82, 152, 0.5);
/* Schedule Cards */
--schedule-card-bg: rgba(255, 255, 255, 0.03);
--schedule-card-border: rgba(255, 255, 255, 0.08);
--schedule-card-hover-bg: rgba(255, 255, 255, 0.1);
--schedule-filter-border: rgba(255, 255, 255, 0.2);
--schedule-filter-active-bg: var(--accent-primary-dim);
--schedule-card-tag-bg: rgba(28, 82, 152, 0.4);
--schedule-card-tag-border: rgba(255, 255, 255, 0.1);
/* Message Controls & Fork Navigator */
--control-btn-bg: rgba(0, 0, 0, 0.2);
--control-btn-border: 1px solid rgba(255, 255, 255, 0.2);
--control-btn-hover-bg: rgba(255, 255, 255, 0.1);
--control-btn-hover-border: #ffffff;
--fork-nav-bg: rgba(0, 0, 0, 0.3);
--fork-nav-border: rgba(255, 255, 255, 0.1);
/* Debug Console Log Entries */
--log-entry-bg: rgba(0, 0, 0, 0.4);
--log-entry-border: var(--accent-primary);
--log-entry-outbound-bg: var(--accent-primary-dim);
--log-entry-outbound-border: rgba(173, 220, 255, 0.3);
--log-entry-inbound-bg: rgba(0, 255, 102, 0.05);
--log-entry-inbound-border: rgba(0, 255, 102, 0.25);
--log-entry-system-bg: rgba(0, 0, 0, 0.2);
--log-entry-system-border: var(--panel-footer-bg);
/* Notes Editor */
--note-overlay-bg: var(--bg-darker);
--note-editor-bg: var(--debug-console-bg);
--note-editor-text: var(--debug-console-text);
--note-toolbar-bg: var(--panel-footer-bg);
--note-toolbar-border: var(--accent-primary);
--note-tool-btn-color: var(--text-muted);
--note-tool-btn-hover-bg: rgba(28, 82, 152, 0.4);
--note-tool-btn-hover-border: var(--accent-secondary);
--note-tool-sep-bg: #2b3f55;
--note-scope-chip-bg: var(--panel-footer-bg);
--note-scope-chip-border: #2b3f55;
--note-generating-box-bg: var(--panel-footer-bg);
--note-generating-cancel-border: #2b3f55;
--note-action-btn-border: #2b3f55;
--note-action-btn-hover-bg: rgba(28, 82, 152, 0.3);
--note-action-btn-hover-border: var(--accent-secondary);
--note-danger-hover-color: #ff6b6b;
/* Debug Console & Logs */
--debug-console-bg: #0c1c38;
--debug-console-text: #e5edf6;
/* Drawer tab overrides */
--drawer-tab-border-left-width: 3px;
--drawer-tab-text: rgba(255, 255, 255, 0.7);
--drawer-tab-text-active: #ffffff;
--drawer-tab-hover-bg: rgba(255, 255, 255, 0.05);
}
body.theme-vanalink.has-custom-bg {
--bg-header: var(--bg-darker);
--bg-sidebar: var(--bg-darker);
--bg-footer: var(--bg-darker);
--bg-inner: var(--bg-darker);
}
/* ── Structural overrides ─────────────────────────────────────────────────── */
/* Beautiful dynamic gradient background */
body.theme-vanalink {
background: var(--bg-gradient) !important;
}
/* Sidebar navigation buttons (Capsules with glossy indicator) */
body.theme-vanalink .new-chat-item,
body.theme-vanalink .history-toggle,
body.theme-vanalink .schedule-toggle,
body.theme-vanalink .projects-toggle,
body.theme-vanalink .notes-toggle {
background: var(--sidebar-item-bg) !important;
border: var(--sidebar-item-border) !important;
border-radius: var(--sidebar-item-radius) !important;
padding: 8px 36px 8px 16px !important;
margin-bottom: 8px !important;
color: var(--sidebar-item-text) !important;
font-weight: 500 !important;
text-shadow: var(--sidebar-item-text-shadow) !important;
box-shadow: var(--sidebar-item-shadow) !important;
position: relative !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
display: flex !important;
align-items: center !important;
text-align: left !important;
}
body.theme-vanalink .new-chat-item *,
body.theme-vanalink .history-toggle *,
body.theme-vanalink .schedule-toggle *,
body.theme-vanalink .projects-toggle *,
body.theme-vanalink .notes-toggle * {
color: var(--sidebar-item-text) !important;
}
body.theme-vanalink .new-chat-item:hover,
body.theme-vanalink .new-chat-item.active,
body.theme-vanalink .history-toggle:hover,
body.theme-vanalink .schedule-toggle:hover,
body.theme-vanalink .projects-toggle:hover,
body.theme-vanalink .notes-toggle:hover {
background: var(--sidebar-item-hover-bg) !important;
border-color: var(--sidebar-item-hover-border) !important;
box-shadow: var(--sidebar-item-hover-shadow) !important;
}
/* Indent child panels when accordion is open */
body.theme-vanalink .history-list,
body.theme-vanalink .schedule-timeline,
body.theme-vanalink .projects-content,
body.theme-vanalink .notes-content {
padding-left: 15px !important;
padding-right: 4px !important;
box-sizing: border-box !important;
}
/* Glossy blue sphere indicator at the right of sidebar items */
body.theme-vanalink .new-chat-item::after,
body.theme-vanalink .history-toggle::after,
body.theme-vanalink .schedule-toggle::after,
body.theme-vanalink .projects-toggle::after,
body.theme-vanalink .notes-toggle::after {
content: "" !important;
position: absolute !important;
right: 12px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 10px !important;
height: 10px !important;
border-radius: 50% !important;
background: var(--sidebar-orb-bg) !important;
box-shadow: var(--sidebar-orb-shadow) !important;
transition: all 0.2s ease !important;
}
body.theme-vanalink .new-chat-item:hover::after,
body.theme-vanalink .new-chat-item.active::after,
body.theme-vanalink .history-toggle:hover::after,
body.theme-vanalink .schedule-toggle:hover::after,
body.theme-vanalink .projects-toggle:hover::after,
body.theme-vanalink .notes-toggle:hover::after {
background: var(--sidebar-orb-hover-bg) !important;
box-shadow: var(--sidebar-orb-hover-shadow) !important;
}
/* Collapse state overrides */
body.theme-vanalink .sidebar.collapsed .new-chat-item::after,
body.theme-vanalink .sidebar.collapsed .history-toggle::after,
body.theme-vanalink .sidebar.collapsed .schedule-toggle::after,
body.theme-vanalink .sidebar.collapsed .projects-toggle::after,
body.theme-vanalink .sidebar.collapsed .notes-toggle::after {
display: none !important;
}
body.theme-vanalink .sidebar.collapsed .new-chat-item,
body.theme-vanalink .sidebar.collapsed .history-toggle,
body.theme-vanalink .sidebar.collapsed .schedule-toggle,
body.theme-vanalink .sidebar.collapsed .projects-toggle,
body.theme-vanalink .sidebar.collapsed .notes-toggle {
padding: 8px !important;
justify-content: center !important;
}
/* Sidebar search box overrides */
body.theme-vanalink .sidebar-search input {
background-color: var(--sidebar-search-bg) !important;
border: var(--sidebar-search-border) !important;
border-radius: var(--sidebar-search-radius) !important;
color: var(--sidebar-search-text) !important;
padding: 6px 12px 6px 32px !important;
}
body.theme-vanalink .sidebar-search input::placeholder {
color: var(--sidebar-search-placeholder) !important;
}
body.theme-vanalink .sidebar-search input:focus {
background-color: var(--sidebar-search-bg-focus) !important;
border-color: var(--sidebar-search-border-focus) !important;
box-shadow: var(--sidebar-search-shadow) !important;
}
body.theme-vanalink .sidebar-search .search-icon {
color: var(--sidebar-search-text) !important;
}
/* Outer layout panel cards styling */
body.theme-vanalink .welcome-box,
body.theme-vanalink .settings-box,
body.theme-vanalink .modal-content,
body.theme-vanalink .note-editor,
body.theme-vanalink .file-browser-panel,
body.theme-vanalink .settings-drawer,
body.theme-vanalink .system-alert-toast {
background-color: var(--panel-bg) !important;
border: var(--panel-border) !important;
border-radius: var(--panel-radius) !important;
box-shadow: var(--panel-shadow) !important;
color: var(--panel-text) !important;
}
/* Panel header (HOLD TO SPEAK / STOP SPK bar): transparent, flat */
body.theme-vanalink .panel-header {
background: transparent !important;
color: var(--panel-header-text) !important;
display: flex !important;
}
/* Modal header: dark with rounded top corners */
body.theme-vanalink .modal-header {
background: var(--panel-header-bg) !important;
color: var(--panel-header-text) !important;
border-bottom: 2px solid var(--panel-header-bg) !important;
border-top-left-radius: 18px !important;
border-top-right-radius: 18px !important;
padding: 10px 20px !important;
}
body.theme-vanalink .panel-header h2,
body.theme-vanalink .modal-header h3,
body.theme-vanalink .modal-title,
body.theme-vanalink .panel-header-btn {
color: var(--panel-header-text) !important;
font-weight: bold !important;
letter-spacing: 0.05em !important;
}
/* Panel footer: dark with rounded bottom corners */
body.theme-vanalink .panel-footer {
background: var(--panel-footer-bg) !important;
color: var(--panel-footer-text) !important;
border-top: 2px solid var(--panel-footer-bg) !important;
padding: 8px 16px !important;
border-radius: 18px !important;
}
body.theme-vanalink .panel-footer * {
color: var(--panel-footer-text) !important;
}
/* Chat Input Panel Background and Structure */
body.theme-vanalink .input-panel-wrapper,
body.theme-vanalink .input-panel {
background-color: var(--panel-bg) !important;
padding-top: 2px !important;
border-top: var(--panel-border) !important;
color: var(--panel-text) !important;
}
body.theme-vanalink .input-panel textarea {
background-color: var(--input-bg) !important;
border: var(--input-border) !important;
border-radius: var(--input-radius) !important;
color: var(--input-text) !important;
padding: 10px 16px !important;
}
body.theme-vanalink .input-panel textarea:focus {
background-color: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
box-shadow: var(--input-shadow) !important;
outline: none !important;
}
/* Input elements inside settings / modal / browser */
body.theme-vanalink input[type="text"],
body.theme-vanalink input[type="password"],
body.theme-vanalink input[type="number"],
body.theme-vanalink input[type="url"],
body.theme-vanalink input[type="email"],
body.theme-vanalink textarea,
body.theme-vanalink select,
body.theme-vanalink .preset-dropdown {
background-color: var(--input-bg) !important;
border: var(--input-border) !important;
border-radius: var(--input-radius) !important;
color: var(--input-text) !important;
padding: 6px 16px !important;
}
body.theme-vanalink textarea {
/* Textareas need a bit more breathing room and a readable resize handle */
padding: 10px 16px !important;
resize: vertical;
}
body.theme-vanalink textarea::placeholder,
body.theme-vanalink input::placeholder {
color: rgba(28, 39, 51, 0.45) !important;
}
body.theme-vanalink input:focus,
body.theme-vanalink textarea:focus,
body.theme-vanalink select:focus,
body.theme-vanalink .preset-dropdown:focus {
background-color: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
box-shadow: var(--input-shadow) !important;
}
body.theme-vanalink select option {
background-color: var(--panel-bg) !important;
color: var(--panel-text) !important;
}
/* Settings drawer internals */
body.theme-vanalink .settings-drawer h3,
body.theme-vanalink .settings-drawer label,
body.theme-vanalink .settings-drawer span:not(.tb-btn-label):not(.ui-icon),
body.theme-vanalink .settings-drawer p {
color: var(--panel-text) !important;
}
body.theme-vanalink .drawer-tabs {
background-color: var(--panel-footer-bg) !important;
border-right: 2px solid var(--panel-footer-bg) !important;
}
body.theme-vanalink .drawer-tabs .tab-btn {
color: var(--drawer-tab-text) !important;
border-left-width: var(--drawer-tab-border-left-width) !important;
}
body.theme-vanalink .drawer-tabs .tab-btn:hover {
color: var(--drawer-tab-text-active) !important;
background-color: var(--drawer-tab-hover-bg) !important;
}
body.theme-vanalink .drawer-tabs .tab-btn.active {
color: var(--drawer-tab-text-active) !important;
background-color: var(--accent-primary) !important;
border-left-color: var(--accent-secondary) !important;
}
body.theme-vanalink .drawer-content {
background-color: transparent !important;
}
body.theme-vanalink .drawer-content input[type="text"],
body.theme-vanalink .drawer-content input[type="password"],
body.theme-vanalink .drawer-content input[type="number"],
body.theme-vanalink .drawer-content input[type="url"],
body.theme-vanalink .drawer-content input[type="email"],
body.theme-vanalink .drawer-content textarea,
body.theme-vanalink .drawer-content select,
body.theme-vanalink .drawer-content .preset-dropdown,
body.theme-vanalink .drawer-content select option,
body.theme-vanalink .mcp-config-editor {
color: var(--panel-text) !important;
}
/* Specific styling for the MCP config editor textarea */
body.theme-vanalink .mcp-config-editor {
background-color: var(--input-bg) !important;
border: var(--input-border) !important;
border-radius: var(--input-radius) !important;
padding: 12px !important;
}
body.theme-vanalink .mcp-config-editor:focus {
background-color: var(--input-bg-focus) !important;
border-color: var(--input-border-focus) !important;
box-shadow: var(--input-shadow) !important;
}
/* Theming range slider inputs (like Temperature) */
body.theme-vanalink input[type="range"] {
background: #7d8b9c !important;
height: 6px !important;
border-radius: 9999px !important;
}
body.theme-vanalink input[type="range"]::-webkit-slider-thumb {
background: var(--btn-ok-bg) !important;
border: var(--btn-ok-border) !important;
}
body.theme-vanalink input[type="range"]::-moz-range-thumb {
background: var(--btn-ok-bg) !important;
border: var(--btn-ok-border) !important;
}
/* Modal and layout form labels */
body.theme-vanalink .welcome-box *,
body.theme-vanalink .settings-box *,
body.theme-vanalink .modal-content * {
color: var(--panel-text);
}
body.theme-vanalink .welcome-box a,
body.theme-vanalink .modal-content a {
color: var(--accent-primary) !important;
text-decoration: underline !important;
}
/* ==========================================================================
Unified Button System: PlayOnline Blue Gradient & Retro Pill Look
========================================================================== */
body.theme-vanalink .btn,
body.theme-vanalink .action-btn,
body.theme-vanalink .set-default-btn,
body.theme-vanalink .settings-tab-btn,
body.theme-vanalink .nav-btn,
body.theme-vanalink .ptt-btn,
body.theme-vanalink .send-btn,
body.theme-vanalink .emoji-trigger-btn,
body.theme-vanalink .titlebar .set-default-btn,
body.theme-vanalink .titlebar .file-browser-btn,
body.theme-vanalink .titlebar .debug-btn,
body.theme-vanalink .titlebar .settings-btn,
body.theme-vanalink .titlebar .status-btn,
body.theme-vanalink #sidebar-toggle-btn,
body.theme-vanalink .new-chat-item,
body.theme-vanalink .history-toggle,
body.theme-vanalink .schedule-toggle,
body.theme-vanalink .projects-toggle,
body.theme-vanalink .notes-toggle {
background: var(--btn-gradient) !important;
color: var(--btn-color) !important;
border: var(--btn-border) !important;
border-radius: var(--btn-radius) !important;
box-shadow: var(--btn-shadow) !important;
text-shadow: var(--btn-text-shadow) !important;
transition: all 0.2s ease !important;
}
/* Specific sizing overrides */
body.theme-vanalink .ptt-btn {
padding: 4px 14px !important;
font-size: 9px !important;
}
body.theme-vanalink .send-btn {
padding: 10px 18px !important;
font-size: 11px !important;
}
body.theme-vanalink .emoji-trigger-btn {
display: flex !important;
width: 38px !important;
height: 38px !important;
padding: 0 !important;
}
/* Unified Hover State */
body.theme-vanalink .btn:hover,
body.theme-vanalink .action-btn:hover,
body.theme-vanalink .ptt-btn:hover,
body.theme-vanalink .send-btn:hover,
body.theme-vanalink .emoji-trigger-btn:hover,
body.theme-vanalink .titlebar .set-default-btn:hover,
body.theme-vanalink .titlebar .file-browser-btn:hover,
body.theme-vanalink .titlebar .debug-btn:hover,
body.theme-vanalink .titlebar .settings-btn:hover,
body.theme-vanalink .titlebar .status-btn:hover,
body.theme-vanalink #sidebar-toggle-btn:hover,
body.theme-vanalink .new-chat-item:hover,
body.theme-vanalink .history-toggle:hover,
body.theme-vanalink .schedule-toggle:hover,
body.theme-vanalink .projects-toggle:hover,
body.theme-vanalink .notes-toggle:hover {
background: var(--btn-hover-bg) !important;
border-color: var(--btn-hover-border) !important;
box-shadow: var(--btn-hover-shadow) !important;
}
/* Cancel/Close buttons: Neutral Grey Gradient */
body.theme-vanalink .btn-cancel,
body.theme-vanalink .btn.cancel {
background: var(--btn-cancel-bg) !important;
border-color: var(--btn-cancel-border) !important;
}
body.theme-vanalink .btn-cancel:hover,
body.theme-vanalink .btn.cancel:hover {
background: var(--btn-cancel-hover-bg) !important;
border-color: var(--btn-cancel-hover-border) !important;
}
/* Chat bubble styling */
body.theme-vanalink .chat-area,
body.theme-vanalink .feed-container {
background-color: transparent !important;
}
body.theme-vanalink .message-bubble {
border-radius: var(--bubble-radius) !important;
box-shadow: var(--bubble-shadow) !important;
}
body.theme-vanalink .message.user .message-bubble {
background: var(--user-bubble-gradient) !important;
}
body.theme-vanalink .message.assistant .message-bubble {
background: var(--assistant-bubble-bg) !important;
}
/* Titlebar: white text/buttons over the radial gradient */
body.theme-vanalink .titlebar .app-title,
body.theme-vanalink .titlebar .tb-btn-label,
body.theme-vanalink #sidebar-toggle-btn {
color: var(--text-bright) !important;
text-shadow: var(--text-shadow-dark) !important;
}
/* Status buttons */
body.theme-vanalink .titlebar .status-btn {
background: var(--titlebar-btn-bg) !important;
border: var(--titlebar-btn-border-width) solid var(--titlebar-btn-border-color, var(--border-faint)) !important;
color: var(--text-bright) !important;
text-shadow: var(--text-shadow-dark) !important;
border-radius: var(--titlebar-btn-radius) !important;
transition: all 0.2s ease !important;
}
body.theme-vanalink .titlebar .status-btn .status-dot {
background-color: var(--indicator-offline) !important;
box-shadow: 0 0 5px var(--indicator-offline) !important;
}
body.theme-vanalink .titlebar .status-btn.online .status-dot {
background-color: var(--indicator-online) !important;
box-shadow: 0 0 5px var(--indicator-online) !important;
}
body.theme-vanalink .titlebar .status-btn.offline .status-dot {
background-color: var(--indicator-offline) !important;
box-shadow: 0 0 5px var(--indicator-offline) !important;
}
body.theme-vanalink .titlebar .status-btn.dormant .status-dot {
background-color: var(--indicator-dormant) !important;
box-shadow: 0 0 5px var(--indicator-dormant) !important;
}
body.theme-vanalink .titlebar .status-btn .status-icon {
color: inherit !important;
}
body.theme-vanalink .titlebar .status-btn.online {
color: var(--indicator-online) !important;
border-color: var(--indicator-online-dim) !important;
}
body.theme-vanalink .titlebar .status-btn.offline {
color: var(--indicator-offline) !important;
border-color: var(--indicator-offline-dim) !important;
}
body.theme-vanalink .titlebar .status-btn.dormant {
color: var(--indicator-dormant) !important;
border-color: var(--indicator-dormant-dim) !important;
}
/* Themed icon colours */
body.theme-vanalink .titlebar .file-browser-btn .ui-icon {
color: var(--icon-files) !important;
}
body.theme-vanalink .titlebar .debug-btn .ui-icon {
color: var(--icon-debug) !important;
}
body.theme-vanalink .titlebar .settings-btn .ui-icon {
color: var(--icon-settings) !important;
}
/* Sidebar labels */
body.theme-vanalink .sidebar-header,
body.theme-vanalink .sidebar-title,
body.theme-vanalink .chat-group-title,
body.theme-vanalink .sidebar-item-name {
color: var(--sidebar-label-color) !important;
text-shadow: var(--sidebar-label-shadow-global) !important;
}
/* Debug console: solid dark panel */
body.theme-vanalink .debug-console {
background-color: var(--debug-console-bg) !important;
border-left: 2px solid var(--panel-footer-bg) !important;
backdrop-filter: none !important;
}
body.theme-vanalink .debug-console * {
color: var(--debug-console-text) !important;
}
body.theme-vanalink .debug-console ::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2) !important;
}
/* File browser sidebar */
body.theme-vanalink .file-browser-sidebar {
background-color: var(--debug-console-bg) !important;
border-right: 2px solid var(--panel-footer-bg) !important;
}
body.theme-vanalink .file-browser-sidebar * {
color: var(--debug-console-text) !important;
}
/* Scrollbars */
body.theme-vanalink ::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb) !important;
border-radius: 9999px !important;
}
body.theme-vanalink ::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover) !important;
}
/* ──────────────────────────────────────────────────────────────────────────
Vana-Link Readability & Visual Polish Overrides
────────────────────────────────────────────────────────────────────────── */
/* 1. Projects Sidebar Section */
body.theme-vanalink .projects-item-label,
body.theme-vanalink .projects-conv-item-label,
body.theme-vanalink .projects-conv-item {
color: var(--sidebar-label-text) !important;
text-shadow: var(--sidebar-label-shadow) !important;
}
body.theme-vanalink .projects-conv-item.new-chat {
color: var(--accent-secondary) !important;
text-shadow: var(--sidebar-label-shadow) !important;
}
body.theme-vanalink .projects-item-icon {
color: var(--icon-debug) !important;
}
body.theme-vanalink .projects-item-desc {
color: var(--text-muted) !important;
}
body.theme-vanalink .projects-new-btn {
background-color: var(--accent-primary-dim) !important;
color: var(--sidebar-label-text) !important;
border-color: var(--accent-secondary) !important;
}
body.theme-vanalink .projects-new-btn:hover {
background-color: var(--accent-primary) !important;
color: var(--btn-ok-color) !important;
}
body.theme-vanalink .projects-item-row:hover,
body.theme-vanalink .projects-conv-item:hover {
background-color: var(--overlay-light) !important;
}
body.theme-vanalink .projects-item.expanded {
background-color: var(--accent-primary-dim) !important;
border-left-color: var(--accent-secondary) !important;
}
/* 2. Notes Sidebar Section */
body.theme-vanalink .notes-item-title {
color: var(--sidebar-label-text) !important;
text-shadow: var(--sidebar-label-shadow) !important;
}
body.theme-vanalink .notes-item-date {
color: var(--sidebar-label-text) !important;
}
body.theme-vanalink .notes-item.empty {
color: var(--text-muted) !important;
}
body.theme-vanalink .notes-item:hover {
background-color: var(--overlay-light) !important;
}
body.theme-vanalink .notes-item.active {
background-color: var(--accent-primary-dim) !important;
border-left-color: var(--accent-secondary) !important;
}
body.theme-vanalink .notes-new-btn {
background-color: var(--accent-primary-dim) !important;
color: var(--sidebar-label-text) !important;
border-color: var(--accent-secondary) !important;
}
body.theme-vanalink .notes-new-btn:hover {
background-color: var(--accent-primary) !important;
color: var(--btn-ok-color) !important;
}
/* 3. Schedule Sidebar Section */
body.theme-vanalink .schedule-group-header {
color: var(--icon-debug) !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}
body.theme-vanalink .schedule-card-title {
color: var(--sidebar-label-text) !important;
text-shadow: var(--sidebar-label-shadow) !important;
}
body.theme-vanalink .schedule-card-time {
color: var(--text-muted) !important;
}
body.theme-vanalink .schedule-card {
background: var(--schedule-card-bg) !important;
border-color: var(--schedule-card-border) !important;
}
body.theme-vanalink .schedule-card:hover {
background: var(--schedule-card-hover-bg) !important;
border-color: var(--accent-secondary) !important;
}
body.theme-vanalink .schedule-filter-btn,
body.theme-vanalink .schedule-add-btn {
border-color: var(--schedule-filter-border) !important;
color: var(--sidebar-label-text) !important;
}
body.theme-vanalink .schedule-filter-btn.active,
body.theme-vanalink .schedule-filter-btn:hover {
background-color: var(--schedule-filter-active-bg) !important;
border-color: var(--accent-secondary) !important;
color: var(--btn-ok-color) !important;
}
body.theme-vanalink .schedule-add-btn:hover {
border-color: var(--icon-debug) !important;
color: var(--icon-debug) !important;
box-shadow: 0 0 6px var(--glow-blue) !important;
}
body.theme-vanalink .schedule-card-tag {
color: var(--btn-ok-color) !important;
background-color: var(--schedule-card-tag-bg) !important;
border: var(--schedule-card-tag-border) !important;
}
body.theme-vanalink .schedule-item.empty {
color: var(--sidebar-label-text) !important;
text-shadow: var(--sidebar-label-shadow) !important;
}
/* Sidebar search: remove bottom separator line (gradient BG makes it redundant) */
body.theme-vanalink .sidebar-search {
border-bottom: none !important;
}
body.theme-vanalink .message-header {
color: var(--sidebar-label-text) !important;
text-shadow: var(--sidebar-label-shadow) !important;
}
body.theme-vanalink .message.user .message-header {
color: var(--icon-debug) !important;
}
body.theme-vanalink .control-btn-small {
border: var(--control-btn-border) !important;
color: var(--sidebar-label-text) !important;
background-color: var(--control-btn-bg) !important;
}
body.theme-vanalink .control-btn-small:hover {
color: #ffffff !important;
border-color: var(--control-btn-hover-border) !important;
background-color: var(--control-btn-hover-bg) !important;
}
body.theme-vanalink .message-fork-navigator {
background-color: var(--fork-nav-bg) !important;
border-color: var(--fork-nav-border) !important;
color: var(--text-muted) !important;
}
body.theme-vanalink .fork-arrow {
color: var(--text-muted) !important;
}
body.theme-vanalink .fork-arrow:hover {
color: var(--btn-ok-color) !important;
}
body.theme-vanalink .repeat-tts-btn {
color: var(--text-muted) !important;
}
body.theme-vanalink .repeat-tts-btn:hover {
color: var(--btn-ok-color) !important;
}
body.theme-vanalink .edit-message-textarea {
background-color: var(--input-bg) !important;
color: var(--input-text) !important;
border: var(--input-border) !important;
}
/* 5. Tool Permissions Box */
body.theme-vanalink .tool-perm-box {
background-color: var(--panel-bg) !important;
border: var(--panel-border) !important;
color: var(--panel-text) !important;
}
body.theme-vanalink .tool-perm-box * {
color: var(--panel-text);
}
body.theme-vanalink .tool-perm-title,
body.theme-vanalink .tool-perm-icon {
color: var(--accent-primary) !important;
}
body.theme-vanalink .tool-perm-purpose,
body.theme-vanalink .tool-perm-func code,
body.theme-vanalink .tool-perm-args {
background-color: var(--bg-darker) !important;
color: var(--btn-ok-color) !important;
border-color: var(--panel-footer-bg) !important;
}
body.theme-vanalink .tool-perm-purpose *,
body.theme-vanalink .tool-perm-func code *,
body.theme-vanalink .tool-perm-args * {
color: var(--btn-ok-color) !important;
}
/* 6. Debug Console Log Entries */
body.theme-vanalink .log-entry {
background-color: var(--log-entry-bg) !important;
border: var(--log-entry-border) !important;
color: var(--debug-console-text) !important;
}
body.theme-vanalink .log-entry.outbound {
border-color: var(--log-entry-outbound-border) !important;
color: var(--icon-debug) !important;
background-color: var(--log-entry-outbound-bg) !important;
}
body.theme-vanalink .log-entry.inbound {
border-color: var(--log-entry-inbound-border) !important;
color: var(--inbound-green) !important;
background-color: var(--log-entry-inbound-bg) !important;
}
body.theme-vanalink .log-entry.system {
border-color: var(--log-entry-system-border) !important;
color: var(--text-muted) !important;
background-color: var(--log-entry-system-bg) !important;
}
/* 7. History List Item Overrides */
body.theme-vanalink .history-item:not(.new-chat-item) {
color: var(--sidebar-label-text) !important;
text-shadow: var(--sidebar-label-shadow) !important;
background-color: transparent !important;
border: none !important;
border-left: 2px solid transparent !important;
border-radius: 0 !important;
margin-bottom: 0 !important;
padding: 8px 16px !important;
box-shadow: none !important;
}
body.theme-vanalink .history-item:not(.new-chat-item) * {
color: var(--sidebar-label-text) !important;
}
body.theme-vanalink .history-item:not(.new-chat-item):hover {
background-color: var(--overlay-light) !important;
}
body.theme-vanalink .history-item:not(.new-chat-item).active {
background-color: var(--accent-primary-dim) !important;
border-left-color: var(--accent-secondary) !important;
}
body.theme-vanalink .history-item:not(.new-chat-item)::after {
display: none !important;
}
/* Settings drawer header & footer: override --bg-darker with the themed medium blue */
body.theme-vanalink .drawer-header {
background-color: var(--panel-header-bg) !important;
border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}
body.theme-vanalink .drawer-header h2 {
color: var(--sidebar-label-text) !important;
text-shadow: none !important;
}
body.theme-vanalink .drawer-footer {
background-color: var(--panel-footer-bg) !important;
border-top-color: rgba(255, 255, 255, 0.1) !important;
}
/* File Browser Dropdown */
body.theme-vanalink .fb-dropdown {
background-color: var(--panel-bg) !important;
}
/* 9. Notes Editor */
body.theme-vanalink .note-editor-overlay {
background-color: var(--note-overlay-bg) !important;
}
body.theme-vanalink .note-editor-overlay * {
color: var(--note-editor-text) !important;
}
body.theme-vanalink .note-textarea {
background-color: var(--note-editor-bg) !important;
color: var(--note-editor-text) !important;
}
body.theme-vanalink .note-textarea::placeholder {
color: var(--placeholder-light) !important;
}
body.theme-vanalink .note-preview-pane {
background-color: var(--note-editor-bg) !important;
color: var(--note-editor-text) !important;
}
body.theme-vanalink .note-editor-topbar {
background-color: var(--note-toolbar-bg) !important;
border-color: var(--note-toolbar-border) !important;
}
body.theme-vanalink .note-editor-title-input {
color: var(--icon-debug) !important;
}
body.theme-vanalink .note-toolbar {
background-color: var(--note-toolbar-bg) !important;
border-color: var(--note-toolbar-border) !important;
}
body.theme-vanalink .note-tool-btn {
color: var(--note-tool-btn-color) !important;
}
body.theme-vanalink .note-tool-btn:hover {
color: var(--btn-ok-color) !important;
background-color: var(--note-tool-btn-hover-bg) !important;
border-color: var(--note-tool-btn-hover-border) !important;
}
body.theme-vanalink .note-tool-sep {
background-color: var(--note-tool-sep-bg) !important;
}
body.theme-vanalink .note-scope-chip {
background-color: var(--note-scope-chip-bg) !important;
border-color: var(--note-scope-chip-border) !important;
color: var(--text-muted) !important;
}
body.theme-vanalink .note-generating-box {
background-color: var(--note-generating-box-bg) !important;
}
body.theme-vanalink .note-generating-label {
color: var(--icon-debug) !important;
}
body.theme-vanalink .note-generating-cancel {
color: var(--text-muted) !important;
border-color: var(--note-generating-cancel-border) !important;
}
body.theme-vanalink .note-generating-cancel:hover {
color: var(--note-danger-hover-color) !important;
border-color: var(--note-danger-hover-color) !important;
}
body.theme-vanalink .note-action-btn {
color: var(--text-muted) !important;
border-color: var(--note-action-btn-border) !important;
}
body.theme-vanalink .note-action-btn:hover {
color: var(--icon-debug) !important;
background-color: var(--note-action-btn-hover-bg) !important;
border-color: var(--note-action-btn-hover-border) !important;
}
body.theme-vanalink .note-action-btn.danger:hover {
color: var(--note-danger-hover-color) !important;
border-color: var(--note-danger-hover-color) !important;
}
body.theme-vanalink .note-save-status {
color: var(--text-muted) !important;
}
/* ── Tools permission tab ─────────────────────────────────────────────────── */
/* .tools-grid-header and #prompt-tools-list both default to var(--bg-darker)
which is near-black navy in Vana-Link — replace with the light card surface. */
body.theme-vanalink .tools-grid-header {
background-color: var(--panel-header-bg) !important;
color: var(--panel-header-text) !important;
border-color: rgba(255, 255, 255, 0.15) !important;
}
body.theme-vanalink #prompt-tools-list {
background-color: var(--panel-bg) !important;
border-color: var(--border-color) !important;
}
/* Checkboxes: unchecked box must look clearly empty, not filled dark blue.
Use the input cream (#ffffe8) to match the text fields on this theme. */
body.theme-vanalink .settings-drawer .checkmark,
body.theme-vanalink .drawer-content .checkmark {
background-color: var(--input-bg) !important;
border-color: #7d8b9c !important;
}
body.theme-vanalink .settings-drawer .checkbox-container input:checked + .checkmark,
body.theme-vanalink .drawer-content .checkbox-container input:checked + .checkmark {
background-color: var(--btn-ok-bg) !important;
border-color: var(--btn-ok-border) !important;
}
body.theme-vanalink .settings-drawer .checkbox-container input:checked + .checkmark::after,
body.theme-vanalink .drawer-content .checkbox-container input:checked + .checkmark::after {
color: var(--btn-ok-color) !important;
}
/* ==== css/themes/chrono-lcd.css ==== */
/* ==========================================================================
Chrono LCD (Retro Digital Watch-inspired Theme)
========================================================================== */
body.theme-chrono-lcd {
--font-theme: "VT323", "Courier New", Courier, monospace;
--font-theme-code: "VT323", "Courier New", Courier, monospace;
--bg-darker: #0c0d0f; /* Watch outer case (dark steel gray/black) */
--bg-main: #b8c1a9; /* Greenish-gray LCD glass panel */
--bg-panel: #a9b29a; /* Slightly darker LCD glass panel for sidebar/settings */
--bg-hover: #9ca58d; /* Deepened LCD for hovers */
--border-color: #383e32; /* Liquid crystal boundary line color (dark gray-green) */
--border-glow: #1a4cd2; /* Blue border line matching signature quartz look */
--accent-primary: #1a4cd2; /* Signature blue accent */
--accent-primary-dim: rgba(26, 76, 210, 0.15);
--accent-secondary: #c99300; /* Alarm gold/yellow label accent */
--accent-secondary-dim: rgba(201, 147, 0, 0.15);
--accent-warning: #c99300;
--accent-warning-dim: rgba(201, 147, 0, 0.15);
--accent-error: #c9182b; /* Red 'WR' label accent */
--accent-error-dim: rgba(201, 24, 43, 0.15);
--text-primary: #171d15; /* Dark liquid crystal text */
--text-muted: #3d4538; /* Dimmed liquid crystal text */
--text-bright: #050604; /* Solid active liquid crystal text */
--arrow-color: #3d4538;
--arrow-accent-color: #1a4cd2;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171d15' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a4cd2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171d15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
--indicator-online: #1a4cd2; /* Using blue/black lamps to match the monochrome styling */
--indicator-online-dim: rgba(26, 76, 210, 0.2);
--indicator-offline: #c9182b;
--indicator-offline-dim: rgba(201, 24, 43, 0.18);
--indicator-dormant: #c99300;
--indicator-dormant-dim: rgba(201, 147, 0, 0.2);
--user-bubble-bg: rgba(26, 76, 210, 0.08);
--user-bubble-border: 1px solid rgba(26, 76, 210, 0.3);
--user-bubble-accent-border: none;
--user-bubble-color: var(--text-primary);
--user-bubble-time-color: var(--text-muted);
--assistant-bubble-bg: rgba(23, 29, 21, 0.04);
--assistant-bubble-border: 1px solid rgba(56, 62, 50, 0.2);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
--assistant-bubble-time-color: var(--text-muted);
--sidebar-tag-bg: #171d15;
--sidebar-tag-color: #b8c1a9;
--close-btn-bg: #a9b29a;
--close-btn-border: 1px solid #383e32;
--close-btn-color: #171d15;
--close-btn-hover-bg: #c9182b;
--close-btn-hover-border: #c9182b;
--close-btn-hover-color: #ffffff;
--btn-ok-bg: #171d15;
--btn-ok-color: #b8c1a9;
--btn-ok-border: 1px solid #171d15;
--btn-ok-hover-bg: #1a4cd2;
--btn-ok-hover-color: #ffffff;
--btn-ok-hover-border: 1px solid #1a4cd2;
--btn-cancel-bg: #a9b29a;
--btn-cancel-color: #171d15;
--btn-cancel-border: 1px solid #383e32;
--btn-cancel-hover-bg: #9ca58d;
--btn-cancel-hover-color: #050604;
--btn-cancel-hover-border: 1px solid #383e32;
/* Checkbox styling */
--checkmark-bg: #b8c1a9;
--checkmark-border: #383e32;
--checkmark-checked-bg: #171d15;
--checkmark-checked-border: #171d15;
/* Override layouts for flat LCD style */
--bg-header: #0c0d0f;
--bg-sidebar: var(--bg-panel);
--bg-footer: #0c0d0f;
--bg-inner: var(--bg-main);
--ui-opacity: 0.85;
--header-text: #ffffff;
--footer-text: #ffffff;
}
/* ── Structural overrides ─────────────────────────────────────────────────── */
body.theme-chrono-lcd,
body.theme-chrono-lcd * {
border-radius: 0px !important;
}
body.theme-chrono-lcd ::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body.theme-chrono-lcd ::-webkit-scrollbar-track {
background: var(--bg-panel);
}
body.theme-chrono-lcd ::-webkit-scrollbar-thumb {
background: var(--border-color);
border: 2px solid var(--bg-panel);
}
body.theme-chrono-lcd ::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* Casio F-91W screen accent border overlay */
body.theme-chrono-lcd .app-container {
border: 3px double var(--border-color);
margin: 4px;
}
body.theme-chrono-lcd:not(.has-custom-bg) .app-container {
background-color: var(--bg-darker);
}
body.theme-chrono-lcd .workspace-container {
border: 2px solid var(--accent-primary) !important;
position: relative;
}
/* Stylized headings using segmented font with a subtle LCD pixel glow look */
body.theme-chrono-lcd h1,
body.theme-chrono-lcd h2,
body.theme-chrono-lcd h3,
body.theme-chrono-lcd .app-title {
font-family: "VT323", "Courier New", Courier, monospace !important;
font-weight: normal;
text-transform: uppercase;
}
body.theme-chrono-lcd .app-title {
color: var(--accent-secondary) !important;
letter-spacing: 0.1em;
}
/* Force VT323 typography to match digital segmented LCD watchface */
body.theme-chrono-lcd .status-lamp,
body.theme-chrono-lcd .ptt-btn,
body.theme-chrono-lcd .action-btn,
body.theme-chrono-lcd .sidebar-header,
body.theme-chrono-lcd .tab-btn {
font-family: "VT323", "Courier New", Courier, monospace !important;
}
/* Make sure active states glow with the theme's blue/yellow accent */
body.theme-chrono-lcd .tab-btn.active {
border-bottom: 2px solid var(--accent-primary) !important;
}
/* Custom titlebar styling for watchface bezel */
body.theme-chrono-lcd .titlebar {
border-bottom: 2px solid var(--border-color);
}
/* ==== css/themes/tactical.css ==== */
/* ==========================================================================
Tactical Slate Theme — Tactical Tech Hub (JetBrains Mono / BlueprintJS)
========================================================================== */
body.theme-tactical {
--font-theme: "JetBrains Mono", "Courier New", Courier, monospace;
--font-theme-code: "JetBrains Mono", "Courier New", Courier, monospace;
/* ── Backgrounds ── */
--bg-darker: #12141a; /* Darker navy/slate for titlebar, sidebar rail, and footers */
--bg-main: #1a1d24; /* Main canvas background */
--bg-panel: #222630; /* Sidebar history panel, settings, modal box */
--bg-hover: #2d323f; /* Hover states on sidebar items, inputs, and buttons */
--opacity-header: 1;
--opacity-footer: 1;
--border-color: #383e4e; /* Steel grid and section dividers */
--border-glow: #2d7ff9; /* Tactical glowing blue accents */
/* ── Glowing UI Accents ── */
--accent-primary: #2d7ff9; /* Tactical blue */
--accent-primary-dim: rgba(45, 127, 249, 0.15);
--accent-secondary: #00f0ff; /* Precision cyan */
--accent-secondary-dim: rgba(0, 240, 255, 0.15);
--accent-warning: #f59e0b; /* Caution amber */
--accent-warning-dim: rgba(245, 158, 11, 0.15);
--accent-error: #ef4444; /* Alert red */
--accent-error-dim: rgba(239, 68, 68, 0.15);
/* ── Typography ── */
--text-primary: #e1e8ed; /* Clean high-contrast steel-white for readability */
--text-muted: #8a9ba8; /* Secondary labels, timestamps, and muted text */
--text-bright: #ffffff; /* Active tabs, titles, and highlighted values */
/* ── SVG Forms ── */
--arrow-color: #8a9ba8;
--arrow-accent-color: #2d7ff9;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ba8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d7ff9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9ba8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* ── Subsystem Indicators ── */
--indicator-online: #10b981; /* Blueprint green */
--indicator-online-dim: rgba(16, 185, 129, 0.18);
--indicator-offline: #ef4444; /* Blueprint red */
--indicator-offline-dim: rgba(239, 68, 68, 0.18);
--indicator-dormant: #f59e0b; /* Blueprint amber */
--indicator-dormant-dim: rgba(245, 158, 11, 0.18);
/* ── Chat Bubbles ── */
--user-bubble-bg: rgba(45, 127, 249, 0.06);
--user-bubble-border: 1px solid rgba(45, 127, 249, 0.25);
--user-bubble-accent-border: 2px solid var(--accent-primary);
--user-bubble-color: #ffffff;
--assistant-bubble-bg: rgba(138, 155, 168, 0.04);
--assistant-bubble-border: 1px solid rgba(138, 155, 168, 0.18);
--assistant-bubble-accent-border: none;
--assistant-bubble-color: var(--text-primary);
--sidebar-tag-bg: #2d323f;
--sidebar-tag-color: #8a9ba8;
/* ── Buttons ── */
--btn-ok-bg: #2d7ff9;
--btn-ok-color: #ffffff;
--btn-ok-border: #1a62d6;
--btn-ok-hover-bg: #1a62d6;
--btn-ok-hover-color: #ffffff;
--btn-cancel-bg: #222630;
--btn-cancel-color: #8a9ba8;
--btn-cancel-border: #383e4e;
--btn-cancel-hover-bg: #2d323f;
--btn-cancel-hover-color: #e1e8ed;
}
/* ==== css/themes/crystal-palace.css ==== */
/* ==========================================================================
Crystal Palace (Big Board Console)
Named for the NORAD ops-room nickname inside Cheyenne Mountain. Deep
board-blue void, radar-amber key lights, and phosphor-blue vector glow —
built to pair with the "War Room (Vector Earth)" background. Successor to
(and saved-config alias of) the old vcr-eas theme; keeps its blocky
zero-radius OSD bones.
========================================================================== */
body.theme-crystal-palace {
--font-theme: "Share Tech Mono", "Courier New", Courier, monospace;
--font-theme-code: "Share Tech Mono", "Courier New", Courier, monospace;
/* ── Backgrounds — unlit ops room, board-blue depths ── */
--bg-darker: #000508;
--bg-main: #020a14;
--bg-panel: #071523;
--bg-hover: #0e2438;
--border-color: #16324a;
--border-glow: #4fb4ff;
/* ── Glowing UI Accents — radar amber keys, vector-blue readouts ── */
--accent-primary: #ffb000; /* radar amber — key lights, primary highlights */
--accent-primary-dim: rgba(255, 176, 0, 0.15);
--accent-warning: #ffc400;
--accent-warning-dim: rgba(255, 196, 0, 0.15);
--accent-secondary: #4fb4ff; /* big-board vector blue (matches War Room glow) */
--accent-secondary-dim: rgba(79, 180, 255, 0.15);
--accent-error: #ff3b3b;
--accent-error-dim: rgba(255, 59, 59, 0.18);
/* ── Typography ── */
--text-primary: #cfe4f5;
--text-muted: #5c7f9c;
--text-bright: #ffffff;
/* ── SVG Forms ── */
--arrow-color: #5c7f9c;
--arrow-accent-color: #ffb000;
--select-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7f9c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--preset-arrow-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffb000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
--spin-buttons-svg: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c7f9c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 8 12 3 18 8'%3e%3c/polyline%3e%3cpolyline points='6 16 12 21 18 16'%3e%3c/polyline%3e%3c/svg%3e");
/* ── Subsystem Connectivity Lamps — status-board green/red/amber, kept
apart from the amber accent-primary so "dormant" still reads distinct. ── */
--indicator-online: #35ff6e;
--indicator-online-dim: rgba(53, 255, 110, 0.2);
--indicator-offline: #ff3b3b;
--indicator-offline-dim: rgba(255, 59, 59, 0.2);
--indicator-dormant: #ffb000;
--indicator-dormant-dim: rgba(255, 176, 0, 0.2);
/* ── Chat Bubbles — operator amber vs board blue, hard corners ── */
--user-bubble-bg: rgba(255, 176, 0, 0.07);
--user-bubble-border: 1px solid rgba(255, 176, 0, 0.3);
--user-bubble-accent-border: 1px solid rgba(255, 176, 0, 0.3);
--user-bubble-color: var(--text-primary);
--user-bubble-time-color: var(--text-muted);
--assistant-bubble-bg: rgba(79, 180, 255, 0.05);
--assistant-bubble-border: 1px solid rgba(79, 180, 255, 0.22);
--assistant-bubble-accent-border: 1px solid rgba(79, 180, 255, 0.22);
--assistant-bubble-color: var(--text-primary);
--assistant-bubble-time-color: var(--text-muted);
--sidebar-tag-bg: #0e2438;
--sidebar-tag-color: #4fb4ff;
/* ── Action Buttons: amber launch key OK, board-blue Cancel ── */
--btn-ok-bg: #ffb000;
--btn-ok-color: #000000;
--btn-ok-border: #cc8c00;
--btn-ok-hover-bg: #cc8c00;
--btn-ok-hover-color: #000000;
--btn-cancel-bg: #0e2438;
--btn-cancel-color: #cfe4f5;
--btn-cancel-border: #16324a;
--btn-cancel-hover-bg: #16324a;
--btn-cancel-hover-color: #ffffff;
}
/* ── Structural overrides ─────────────────────────────────────────────────── */
/* Sharp / zero-radius rendering — status boards and console bezels have no curves. */
body.theme-crystal-palace,
body.theme-crystal-palace * {
border-radius: 0px !important;
}
body.theme-crystal-palace ::-webkit-scrollbar-thumb {
border-radius: 0px !important;
}
/* Titlebar / app title as a DEFCON-level readout: radar amber, wide tracking,
hard black double-shadow so it stays legible over the vector map the way
burned-in console annunciators do. */
body.theme-crystal-palace .app-title {
color: var(--accent-primary) !important;
text-transform: uppercase;
letter-spacing: 0.12em;
text-shadow:
1px 1px 0 #000,
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000 !important;
}
/* Connectivity lamp blinks like a live channel indicator on the comms rack. */
@keyframes cp-tally-blink {
0%,
49% {
opacity: 1;
}
50%,
100% {
opacity: 0.35;
}
}
body.theme-crystal-palace .status-btn.online .status-dot {
animation: cp-tally-blink 1.6s step-end infinite;
}
/* Push-to-talk button: black/amber hazard stripes while transmitting — the
"positive control" warning tape on every launch console switch cover. */
body.theme-crystal-palace .ptt-btn.active.pressed {
background: repeating-linear-gradient(
135deg,
#000000 0px,
#000000 10px,
var(--accent-warning) 10px,
var(--accent-warning) 20px
) !important;
color: #000000 !important;
text-shadow: none !important;
box-shadow: 0 0 10px var(--accent-primary-dim) !important;
}
/* Send button: flat, blocky console key — no gradients. */
body.theme-crystal-palace .send-btn {
letter-spacing: 0.05em;
}
/* ==== css/base.css ==== */
/* ==========================================================================
base.css — Reset & base element styles.
Load order (handled by the tags in dashboard.html / index.html):
1. fonts.css — @font-face declarations
2. tokens.css — :root design token defaults (NEW)
3. themes/*.css — per-theme variable overrides (NEW)
4. base.css — this file: reset + element defaults
5. titlebar.css … responsive.css — component / layout rules
@font-face declarations live in fonts.css (loaded before this file).
Design tokens (:root) live in tokens.css (loaded before this file).
Per-theme variable overrides live in css/themes/*.css (loaded before this file).
========================================================================== */
/* ── Reset ───────────────────────────────────────────────────────────────── */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-mono);
-webkit-font-smoothing: antialiased;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
background-color: var(--bg-main);
color: var(--text-primary);
display: flex;
flex-direction: column;
border: 1px solid var(--border-color);
}
/* ==== css/titlebar.css ==== */
/* Frameless Window Custom Titlebar */
.titlebar {
height: var(--titlebar-height);
background-color: var(--bg-header);
border-bottom: 1px solid var(--border-color);
display: flex;
justify-content: flex-start;
align-items: center;
user-select: none;
z-index: 1000;
}
.titlebar-drag-region {
display: flex;
align-items: center;
padding-left: 12px;
height: 100%;
flex-grow: 1;
cursor: default;
/* On platforms that support webview drag-regions, saucer maps dragging automatically, but on Windows, we also have draggable titlebars */
}
.app-icon {
font-size: 14px;
color: var(--accent-primary);
margin-right: 8px;
filter: drop-shadow(0 0 4px var(--accent-primary));
}
.app-title {
font-size: 11px;
font-weight: bold;
letter-spacing: 1.5px;
color: var(--text-muted);
}
.titlebar-controls-left {
display: flex;
align-items: center;
/* gap here is the spacing BETWEEN the two groups (status lamps | action buttons);
each group owns its own tight internal gap (.status-indicators / .titlebar-actions = 6px).
margin-left + .titlebar-prompt-slot margin-right form the prompt→status boundary (also 16px). */
gap: 16px;
margin-left: 6px;
margin-right: 15px; /* match the sidebar toggle's 15px left margin for symmetric edges */
flex-shrink: 0;
}
/* Action-button group (FILES / DEBUG / SETTINGS) — a peer group to .status-indicators. */
.titlebar-actions {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.titlebar-prompt-slot {
display: flex;
align-items: center;
justify-content: flex-end;
flex: 1 1 auto;
min-width: 0;
margin-left: 12px;
margin-right: 10px;
}
.preset-container {
display: flex;
align-items: center;
gap: 6px;
font-size: 10px;
width: clamp(170px, 28vw, 300px);
min-width: 150px;
max-width: 100%;
min-height: 0;
}
.preset-dropdown {
background-color: var(--bg-main);
color: var(--accent-primary);
border: 1px solid var(--border-color);
border-radius: 3px;
padding: 2px 24px 2px 8px;
font-size: 10px;
outline: none;
cursor: pointer;
font-weight: bold;
transition: all 0.2s ease;
width: 100%;
min-width: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
appearance: none;
background-image: var(--preset-arrow-svg);
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 10px;
}
.preset-dropdown:focus,
.preset-dropdown:hover {
border-color: var(--accent-primary);
box-shadow: 0 0 6px var(--accent-primary-dim);
}
.set-default-btn {
background: var(--titlebar-btn-bg);
border: var(--titlebar-btn-border-width) solid var(--border-color);
color: var(--text-muted);
border-radius: var(--titlebar-btn-radius);
padding: 2px 6px;
font-size: 10px;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
user-select: none;
}
.set-default-btn:hover {
color: var(--accent-warning);
border-color: var(--accent-warning);
box-shadow: 0 0 6px var(--accent-warning-dim);
}
.status-indicators {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.status-btn {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--titlebar-btn-bg);
border: var(--titlebar-btn-border-width) solid var(--border-color);
border-radius: var(--titlebar-btn-radius);
padding: 2px 8px;
height: 22px;
box-sizing: border-box;
font-size: 9px;
line-height: 1;
font-weight: bold;
color: var(--text-muted);
cursor: pointer;
transition: all 0.2s ease;
}
/* FILES / DEBUG / SETTINGS triggers share the status lamps' flex rhythm so the
whole control row sits on one consistent height/baseline. */
.titlebar-controls-left .file-browser-btn,
.titlebar-controls-left .debug-btn,
.titlebar-controls-left .settings-btn {
display: inline-flex;
align-items: center;
height: 22px;
box-sizing: border-box;
line-height: 1;
}
/* Label text inside the trigger buttons; hidden at narrow widths so the
buttons collapse to icons before the prompt box or status lamps shrink. */
.titlebar-controls-left .tb-btn-label {
margin-left: 5px;
}
.status-btn .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background-color: var(--text-muted);
transition:
background-color 0.2s ease,
box-shadow 0.2s ease;
}
/* Status variants */
.status-btn.online {
color: var(--indicator-online);
border-color: var(--indicator-online-dim);
}
.status-btn.online .status-dot {
background-color: var(--indicator-online);
box-shadow: 0 0 5px var(--indicator-online);
}
.status-btn.offline {
color: var(--indicator-offline);
border-color: var(--indicator-offline-dim);
}
.status-btn.offline .status-dot {
background-color: var(--indicator-offline);
box-shadow: 0 0 5px var(--indicator-offline);
}
.status-btn.dormant {
color: var(--indicator-dormant);
border-color: var(--indicator-dormant-dim);
}
.status-btn.dormant .status-dot {
background-color: var(--indicator-dormant);
box-shadow: 0 0 5px var(--indicator-dormant);
}
.status-btn:hover {
background-color: var(--bg-hover);
}
/* --- Monochrome sprite icons in the titlebar --- */
/* The identifying status icon (server/mic/speaker) shows only in the compact vertical/narrow
rail (see responsive.css), where it replaces the dot; in the full-width bar the dot carries
status, so the icon stays hidden here. It inherits the button's status colour via currentColor. */
.status-btn .status-icon {
display: none;
}
/* STT & TTS read as status-coloured icon TOGGLES at every width (not passive dot+label pills), so
it's obvious they're clickable. SRVR keeps the labeled-pill form — it's a connection status/test,
not a toggle. (At narrow widths responsive.css already collapses all three to circular icons.) */
#status-stt,
#status-tts {
width: 22px;
padding: 0;
border-radius: 50%;
justify-content: center;
}
#status-stt .status-lbl,
#status-tts .status-lbl,
#status-stt .status-dot,
#status-tts .status-dot {
display: none;
}
#status-stt .status-icon,
#status-tts .status-icon {
display: inline-block;
font-size: 13px;
}
/* Trigger-button icons keep the established per-control accents (themeable, all viewport sizes). */
.titlebar-controls-left .file-browser-btn .ui-icon {
color: var(--icon-files);
}
.titlebar-controls-left .debug-btn .ui-icon {
color: var(--icon-debug);
}
.titlebar-controls-left .settings-btn .ui-icon {
color: var(--icon-settings);
}
.titlebar-window-actions {
display: flex;
height: 100%;
}
.win-btn {
background: none;
border: none;
color: var(--text-muted);
width: 44px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 11px;
cursor: pointer;
transition: all 0.15s ease;
}
.win-btn:hover {
background-color: var(--bg-hover);
color: var(--text-bright);
}
.close-btn:hover {
background-color: var(--accent-error) !important;
color: var(--text-bright) !important;
}
/* ==== css/layout.css ==== */
/* App Main Container */
.app-container {
display: flex;
flex-grow: 1;
height: calc(100vh - var(--titlebar-height));
overflow: hidden;
position: relative; /* Absolute context for responsive drawers */
}
/* Sidebar Styling */
.sidebar {
width: 255px;
background-color: var(--bg-sidebar);
border-right: 1px solid var(--border-color);
display: flex;
flex-direction: column;
flex-shrink: 0;
transition: width 0.3s ease;
overflow: hidden;
}
.sidebar-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid var(--border-color);
}
.sidebar-title {
font-size: 10px;
font-weight: bold;
letter-spacing: 1px;
color: var(--text-muted);
flex-grow: 1;
text-align: left;
}
/* Sidebar Collapse Toggle Button */
.sidebar-toggle-btn {
background: none;
border: 1px solid var(--border-color);
/* Accent at rest so this primary nav control stands out (the rotation + outline carry the
open/collapsed state; hover still adds the glow). */
color: var(--accent-primary);
width: 28px;
height: 28px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
font-size: 12px;
flex-shrink: 0;
/* Centres the 28px button on the collapsed-rail icon axis (x≈30), so the toggle
lines up vertically with the mini-sidebar icons below it. */
margin-left: 15px;
}
.sidebar-toggle-btn:hover {
color: var(--accent-primary);
border-color: var(--accent-primary);
box-shadow: 0 0 8px var(--accent-primary-dim);
}
.sidebar-toggle-btn.collapsed {
transform: rotate(90deg);
}
/* Themeable monochrome sprite icons (sidebar). Sized in em so they inherit the host
span's font-size (incl. the collapsed-rail 16px override) and `color` (currentColor),
so every theme's accent/muted color tints them with no per-icon rules. */
.ui-icon {
/* inline-block (not the default inline) so the em size lays out — an inline