/* ==========================================================================
   SAVANTI AI — Liquid Glass full re-skin · Savanti Intelligent Investment Suite
   Applies the Savanti Liquid Glass design system across every webui surface.
   Loaded LAST in index.html so it wins the cascade over the base styles.

   Discipline (from the design system — do not violate):
   · glass lives on the nav/surface layer ONLY — never glass-on-glass
   · exactly one electric-blue tint per view; everything else neutral
   · Instrument Serif for display + hero numbers · mono uppercase labels
   · radius family 4/8/10/14 · 1px ice hairlines · tabular-nums
   · semantic tones = text + ~10% fill + ~40% border, never large fills
   ©2026 Savanti Investments, Inc. · www.savanti.investments
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");

@property --sv-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ==========================================================================
   1 · TOKENS
   ========================================================================== */
:root {
  color-scheme: dark;

  --sv-surface: 6 7 13;
  --sv-surface2: 8 10 20;
  --sv-panelsolid: 12 17 32;
  --sv-edge: 36 44 63;
  --sv-edge2: 50 59 81;
  --sv-ink: 233 237 255;
  --sv-muted: 154 166 204;
  --sv-faint: 110 120 158;
  --sv-accent: 8 71 247;      /* Electric Blue — the one tint */
  --sv-royal: 0 51 255;
  --sv-deep: 10 38 128;
  --sv-info: 91 138 255;
  --sv-ice: 184 208 255;      /* emphasis tier: values, links, key data */
  --sv-pos: 55 226 168;
  --sv-neg: 255 107 122;
  --sv-warn: 255 194 71;

  --sv-panel: rgba(255, 255, 255, 0.045);
  --sv-panel2: rgba(255, 255, 255, 0.07);
  --sv-glass-a: rgba(255, 255, 255, 0.055);
  --sv-glass-b: rgba(9, 12, 24, 0.44);
  --sv-glass-border: rgba(184, 208, 255, 0.14);
  --sv-glass-inset: rgba(255, 255, 255, 0.09);
  --sv-glass-shadow: rgba(0, 0, 0, 0.45);
  --sv-chroma-glint: rgba(232, 240, 255, 0.95);

  --sv-canvas-glow1: rgba(8, 71, 247, 0.16);
  --sv-canvas-glow2: rgba(10, 38, 128, 0.22);

  --sv-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sv-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --sv-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;
  --sv-track-label: 0.08em;
  --sv-track-eyebrow: 0.14em;
  --sv-blur: 18px;

  /* glass recipes (referenced everywhere; keep these the single source) */
  --sv-glass-nav:
    linear-gradient(180deg, var(--sv-glass-a) 0%, var(--sv-glass-b) 100%),
    rgba(8, 10, 20, 0.55);
  --sv-glass-card:
    linear-gradient(180deg, var(--sv-glass-a) 0%, var(--sv-glass-b) 100%),
    rgba(10, 14, 26, 0.4);
  --sv-glass-modal:
    linear-gradient(180deg, var(--sv-glass-a) 0%, var(--sv-glass-b) 100%),
    rgba(9, 12, 24, 0.78);
}

/* ==========================================================================
   2 · BASE VARIABLE REMAP — dark (default)
   ========================================================================== */
:root {
  --color-background: rgb(var(--sv-surface));
  --color-text: rgb(var(--sv-ink));
  --color-text-muted: rgb(var(--sv-muted));
  --color-primary: rgb(var(--sv-muted));
  --color-secondary: rgb(var(--sv-faint));
  --color-accent: rgb(var(--sv-accent));
  --color-message-bg: #0e1426;
  --color-highlight: rgb(var(--sv-accent));
  --color-message-text: rgb(var(--sv-ink));
  --color-panel: #0a0e1a;
  --color-border: var(--sv-glass-border);
  --color-input: rgba(255, 255, 255, 0.035);
  --color-input-focus: rgba(255, 255, 255, 0.055);
  --color-chat-background: transparent;
  --color-error-text: rgb(var(--sv-neg));
  --color-warning-text: rgb(var(--sv-warn));
  --color-table-row: rgba(255, 255, 255, 0.03);

  --color-primary-filter: invert(86%) sepia(11%) saturate(760%)
    hue-rotate(191deg) brightness(97%) contrast(94%);

  --font-family-main: var(--sv-font-sans);
  --font-family-display: var(--sv-font-serif);
  --border-radius: 14px;
  --border-radius-sm: 8px;
}

/* ==========================================================================
   3 · LIGHT MODE (gallery / frost)
   ========================================================================== */
.light-mode {
  color-scheme: light;

  --sv-surface: 244 246 250;
  --sv-surface2: 255 255 255;
  --sv-panelsolid: 255 255 255;
  --sv-edge: 210 220 240;
  --sv-edge2: 184 198 226;
  --sv-ink: 10 15 30;
  --sv-muted: 90 100 120;
  --sv-faint: 138 148 168;
  --sv-ice: 10 38 128;
  --sv-pos: 13 158 111;
  --sv-neg: 217 69 89;
  --sv-warn: 176 122 10;

  --sv-panel: rgba(8, 71, 247, 0.05);
  --sv-panel2: rgba(8, 71, 247, 0.08);
  --sv-glass-a: rgba(255, 255, 255, 0.72);
  --sv-glass-b: rgba(244, 246, 250, 0.6);
  --sv-glass-border: rgba(8, 71, 247, 0.13);
  --sv-glass-inset: rgba(255, 255, 255, 0.85);
  --sv-glass-shadow: rgba(10, 15, 30, 0.1);
  --sv-canvas-glow1: rgba(8, 71, 247, 0.07);
  --sv-canvas-glow2: rgba(10, 38, 128, 0.05);

  --sv-glass-nav:
    linear-gradient(180deg, var(--sv-glass-a) 0%, var(--sv-glass-b) 100%),
    rgba(255, 255, 255, 0.55);
  --sv-glass-card:
    linear-gradient(180deg, var(--sv-glass-a) 0%, var(--sv-glass-b) 100%),
    rgba(255, 255, 255, 0.5);
  --sv-glass-modal:
    linear-gradient(180deg, var(--sv-glass-a) 0%, var(--sv-glass-b) 100%),
    rgba(255, 255, 255, 0.85);

  --color-background: #f4f6fa;
  --color-text: rgb(var(--sv-ink));
  --color-text-muted: rgb(var(--sv-muted));
  --color-primary: rgb(var(--sv-muted));
  --color-secondary: rgb(var(--sv-faint));
  --color-accent: rgb(var(--sv-accent));
  --color-message-bg: #ffffff;
  --color-message-text: rgb(var(--sv-ink));
  --color-panel: #eef2fb;
  --color-border: rgba(8, 71, 247, 0.14);
  --color-input: rgba(8, 71, 247, 0.045);
  --color-input-focus: #ffffff;
  --color-chat-background: transparent;
  --color-error-text: rgb(var(--sv-neg));
  --color-warning-text: rgb(var(--sv-warn));
  --color-table-row: rgba(8, 71, 247, 0.035);

  --color-primary-filter: invert(38%) sepia(12%) saturate(680%)
    hue-rotate(182deg) brightness(92%) contrast(88%);
}

/* ==========================================================================
   4 · AMBIENT GROUND — near-black navy, electric glow, ghosted S watermark
   ========================================================================== */
body {
  font-family: var(--sv-font-sans);
  letter-spacing: 0.1px;
  background-color: rgb(var(--sv-surface));
  background-image:
    radial-gradient(120% 80% at 78% -8%, var(--sv-canvas-glow1) 0%, transparent 52%),
    radial-gradient(90% 70% at 12% 108%, var(--sv-canvas-glow2) 0%, transparent 55%),
    linear-gradient(180deg, rgb(var(--sv-surface2)) 0%, rgb(var(--sv-surface)) 60%);
  background-attachment: fixed;
}

body::after {
  content: "";
  position: fixed;
  top: -9vmax;
  right: -7vmax;
  width: 52vmax;
  height: 52vmax;
  z-index: 0;
  pointer-events: none;
  opacity: 0.1;
  background: linear-gradient(155deg, rgb(var(--sv-ice) / 0.7),
    rgb(var(--sv-accent) / 0.45) 55%, rgb(var(--sv-deep) / 0.35));
  -webkit-mask: url("/public/savanti-mark-mono.svg") center / contain no-repeat;
  mask: url("/public/savanti-mark-mono.svg") center / contain no-repeat;
}
.light-mode body::after { opacity: 0.06; }

.container { position: relative; z-index: 1; }
#right-panel { background: transparent; }

/* welcome screen: let the ambient show through; re-point its watermark at the S */
.welcome-container { background: transparent !important; }
.welcome-container::before {
  background-image: url("/public/savanti-icon-light.svg") !important;
  background-position: 88% -4% !important;
  background-size: min(58vw, 760px) auto !important;
  opacity: 0.12 !important;
}
.light-mode .welcome-container::before { filter: none !important; opacity: 0.06 !important; }

::selection { background: rgb(var(--sv-accent) / 0.4); color: #fff; }

:focus-visible {
  outline: 2px solid rgb(var(--sv-accent) / 0.7);
  outline-offset: 2px;
}

a { color: rgb(var(--sv-ice)); }
a:hover { color: rgb(var(--sv-info)); }

/* scrollbars — cool hairline */
body *::-webkit-scrollbar { width: 8px; height: 8px; }
body *::-webkit-scrollbar-thumb {
  background-color: rgb(var(--sv-edge2) / 0.9);
  border-radius: 8px;
}
body *::-webkit-scrollbar-thumb:hover { background-color: rgb(var(--sv-ice) / 0.4); }
body *::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   5 · GLASS LAYER — sidebar, modals, chat shelf, welcome cards (ONLY here)
   ========================================================================== */

/* --- left sidebar: the nav pane of the suite --- */
#left-panel {
  background: var(--sv-glass-nav);
  -webkit-backdrop-filter: blur(var(--sv-blur)) saturate(138%);
  backdrop-filter: blur(var(--sv-blur)) saturate(138%);
  border-right: 1px solid var(--sv-glass-border);
  box-shadow: inset 0 1px 0 var(--sv-glass-inset);
}
#left-panel .left-panel-top,
#left-panel .left-panel-bottom,
#left-panel .sidebar-header-panel { background: transparent; }

/* --- modal system (new + legacy) --- */
.modal-inner,
.modal-content,
.modal-container {
  background: var(--sv-glass-modal) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: var(--sv-r-lg, 14px) !important;
  box-shadow: inset 0 1px 0 var(--sv-glass-inset), 0 24px 70px var(--sv-glass-shadow) !important;
}
/* children of glass stay flat — no second backdrop-filter */
.modal-inner .modal-header,
.modal-inner .modal-scroll,
.modal-content .modal-header { background: transparent !important; }

.modal-overlay,
.modal-backdrop,
.confirm-dialog-backdrop {
  background: rgba(3, 4, 9, 0.6) !important;
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.light-mode .modal-overlay,
.light-mode .modal-backdrop,
.light-mode .confirm-dialog-backdrop { background: rgba(20, 30, 60, 0.28) !important; }

.confirm-dialog {
  background: var(--sv-glass-modal) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 14px !important;
}

.modal-header { border-bottom: 1px solid var(--sv-glass-border) !important; }
.modal-header h2, .modal-title {
  font-family: var(--sv-font-serif);
  font-weight: 400;
  letter-spacing: 0.2px;
}

/* --- chat composer shelf (bottom bar) --- */
#input-section {
  background: var(--sv-glass-card);
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border-top: 1px solid var(--sv-glass-border);
  box-shadow: inset 0 1px 0 var(--sv-glass-inset);
}
.welcome-composer .input-row {
  background: var(--sv-glass-card) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border: 1px solid var(--sv-glass-border);
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 var(--sv-glass-inset), 0 12px 36px var(--sv-glass-shadow);
}

/* --- welcome cards + banners --- */
.welcome-action-card,
.welcome-banner,
.welcome-panel-card,
.welcome-system-card {
  background: var(--sv-glass-card) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 var(--sv-glass-inset), 0 10px 30px var(--sv-glass-shadow) !important;
}
.welcome-action-card { transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.welcome-action-card:hover {
  transform: translateY(-2px);
  border-color: rgb(var(--sv-accent) / 0.55) !important;
  box-shadow: inset 0 1px 0 var(--sv-glass-inset), 0 14px 40px var(--sv-glass-shadow),
    0 0 0 1px rgb(var(--sv-accent) / 0.2) !important;
}
.welcome-action-icon { color: rgb(var(--sv-ice)) !important; }
.welcome-banner-cta,
.welcome-banner-html .btn,
.welcome-banner-html button {
  background: linear-gradient(180deg, rgb(var(--sv-accent)), rgb(var(--sv-royal))) !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   6 · TYPOGRAPHY — serif display, mono eyebrows, tabular numbers
   ========================================================================== */
.welcome-hero h1 {
  font-family: var(--sv-font-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 4.6vw, 3.6rem) !important;
  line-height: 1.04 !important;
  letter-spacing: 0.2px;
  background: linear-gradient(120deg, rgb(var(--sv-ink)), rgb(var(--sv-ice)) 72%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.welcome-hero p strong { color: rgb(var(--sv-ice)); font-weight: 600; }

/* uppercase mono eyebrows for section labels */
.welcome-quick-section h2,
.settings-pane .section-title,
.settings-section-title,
.scheduler-detail-title,
.data-table th {
  font-family: var(--sv-font-mono);
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: var(--sv-track-eyebrow) !important;
  color: rgb(var(--sv-faint)) !important;
}

/* numbers are always tabular */
#time-date, .kvps-val, .data-table td, .message-temp,
.scheduler-container, .toast__message, code, pre {
  font-variant-numeric: tabular-nums;
}

/* clock: mono, faint, precise */
#time-date-container { font-family: var(--sv-font-mono); }
#time-date { color: rgb(var(--sv-muted)); letter-spacing: 0.04em; }

/* ==========================================================================
   7 · CONTROLS — flat fills on glass; one electric primary
   ========================================================================== */

/* text inputs / selects / textareas — standalone fields get the glass chrome.
   NOTE: input[type="search"] is intentionally excluded — search inputs live
   inside styled field wrappers (.settings-search, .skills-search, .mcp-search …)
   so styling the bare input would draw a box-within-a-box. */
input[type="text"], input[type="password"], input[type="number"],
input[type="email"], input[type="url"], input[type="tel"],
input[type="datetime-local"], input[type="date"], input[type="time"],
textarea, select, .masked-text-input {
  background-color: var(--color-input) !important;
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 8px !important;
  color: var(--color-text) !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus,
input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus,
textarea:focus, select:focus, .masked-text-input:focus {
  background-color: var(--color-input-focus) !important;
  border-color: rgb(var(--sv-accent) / 0.6) !important;
  box-shadow: 0 0 0 3px rgb(var(--sv-accent) / 0.15) !important;
  outline: none !important;
}
::placeholder { color: rgb(var(--sv-faint)) !important; }

/* --- Search fields: the WRAPPER is the field; the inner input is chromeless.
   Fixes the "square within the line" doubled-box on every search shell. --- */
.settings-search, .skills-search, .mcp-search, .mcp-internal-search,
.mcp-tool-search, .plugins-toolbar-search, .file-search-shell {
  background-color: var(--color-input) !important;
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 8px !important;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.settings-search:focus-within, .skills-search:focus-within, .mcp-search:focus-within,
.mcp-internal-search:focus-within, .mcp-tool-search:focus-within,
.plugins-toolbar-search:focus-within, .file-search-shell:focus-within {
  border-color: rgb(var(--sv-accent) / 0.6) !important;
  background-color: var(--color-input-focus) !important;
  box-shadow: 0 0 0 3px rgb(var(--sv-accent) / 0.15) !important;
}
input[type="search"],
.settings-search input, .skills-search input, .mcp-search input,
.mcp-internal-search input, .mcp-tool-search input,
.plugins-toolbar-search input, .plugins-search-input,
.file-search-shell input, .file-search-input {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* primary action — the one tinted control */
.btn-ok, .btn.primary, .welcome-banner-cta {
  background: linear-gradient(180deg, rgb(var(--sv-accent)), rgb(var(--sv-royal))) !important;
  border: 1px solid rgb(var(--sv-accent) / 0.7) !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 500;
  letter-spacing: var(--sv-track-label);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgb(var(--sv-accent) / 0.3);
}
.btn-ok:hover, .btn.primary:hover {
  background: linear-gradient(180deg, rgb(var(--sv-info)), rgb(var(--sv-accent))) !important;
}

/* neutral + destructive buttons: quiet hairline ghosts */
.btn, .btn-cancel, .btn-field, .btn-upload, .button, .text-button {
  border-radius: 8px;
}
.btn-cancel {
  background: var(--sv-panel) !important;
  border: 1px solid var(--sv-glass-border) !important;
  color: var(--color-text) !important;
}
.btn-cancel:hover { background: var(--sv-panel2) !important; border-color: rgb(var(--sv-neg) / 0.4) !important; color: rgb(var(--sv-neg)) !important; }

/* icon buttons */
.btn-icon, .btn-icon-action, .btn-action, .btn-action-header {
  border-radius: 8px !important;
  color: rgb(var(--sv-muted));
}
.btn-icon:hover, .btn-icon-action:hover, .btn-action:hover {
  background: var(--sv-panel2) !important;
  color: rgb(var(--sv-ice)) !important;
}
#chat-nav-buttons .btn-icon-action {
  background: rgb(var(--sv-panelsolid) / 0.9);
  border: 1px solid var(--sv-glass-border) !important;
}

/* switches — electric when on (both .switch and .toggle/.toggler patterns) */
.switch input:checked + .slider,
.switch input:checked + span,
.toggle input:checked + .toggler {
  background-color: rgb(var(--sv-accent)) !important;
  border-color: rgb(var(--sv-accent)) !important;
}
.slider, .toggler { transition: background-color 0.2s ease; }

/* range sliders */
input[type="range"] { accent-color: rgb(var(--sv-accent)); }
input[type="checkbox"], input[type="radio"] { accent-color: rgb(var(--sv-accent)); }

/* ==========================================================================
   8 · SIDEBAR CONTENT — chats, tasks, preferences
   ========================================================================== */
.chat-list-button, .chat-container {
  border-radius: 8px !important;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.chat-list-button:hover, .chat-container:hover { background: var(--sv-panel2) !important; }
.chat-list-button.selected, .chat-list-button.active,
.chat-container.chat-selected {
  background: rgb(var(--sv-accent) / 0.16) !important;
  border-color: rgb(var(--sv-accent) / 0.45) !important;
  color: rgb(var(--sv-ink)) !important;
}
.chat-container.chat-selected .chat-name { color: rgb(var(--sv-ink)) !important; }

/* sidebar section headings → eyebrows */
.left-panel-top h3, .left-panel-bottom h3,
#left-panel h4, .sidebar-section-title {
  font-family: var(--sv-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--sv-track-eyebrow);
  font-size: 0.7rem;
  color: rgb(var(--sv-faint));
}

/* version stamp */
#version-info, .version-info {
  font-family: var(--sv-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgb(var(--sv-faint));
}

/* ==========================================================================
   9 · CHAT MESSAGES — the room where it happens
   ========================================================================== */
#chat-history { padding-top: var(--spacing-md); }

/* --- user message: smoked-glass bubble, electric hairline, right side --- */
.message-user .message-text {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(9, 12, 24, 0.5)),
    rgb(var(--sv-deep) / 0.2) !important;
  border: 1px solid rgb(var(--sv-accent) / 0.35) !important;
  border-radius: 14px 14px 4px 14px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.light-mode .message-user .message-text {
  background: rgb(var(--sv-accent) / 0.07) !important;
}
.message-user .message-user-heading {
  font-family: var(--sv-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--sv-track-label);
  font-size: 0.66rem !important;
  color: rgb(var(--sv-faint));
}

/* --- agent / tool / util blocks: flat panel, ice left rail --- */
.message-agent, .message-agent-response, .message-agent-delegation,
.message-tool, .message-info, .message-util, .message-default {
  background: var(--sv-panel) !important;
  border: 1px solid rgb(var(--sv-edge) / 0.55) !important;
  border-left: 2px solid rgb(var(--sv-edge2)) !important;
  border-radius: 4px 10px 10px 4px !important;
  padding: var(--spacing-sm);
}
.message-agent-response {
  border-left-color: rgb(var(--sv-accent) / 0.8) !important;
  opacity: 1 !important;
}
.message-util { border-left-color: rgb(var(--sv-faint) / 0.6) !important; }
.message-tool { border-left-color: rgb(var(--sv-info) / 0.7) !important; }

/* headings inside messages → mono eyebrows */
.msg-heading h4 {
  font-family: var(--sv-font-mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: var(--sv-track-eyebrow);
  color: rgb(var(--sv-faint)) !important;
}
.message-agent-response .msg-heading h4 { color: rgb(var(--sv-ice)) !important; }

/* --- semantic states: text + 10% fill + 40% border --- */
.message-warning {
  background: rgb(var(--sv-warn) / 0.08) !important;
  border: 1px solid rgb(var(--sv-warn) / 0.35) !important;
  border-left: 2px solid rgb(var(--sv-warn)) !important;
  border-radius: 4px 10px 10px 4px !important;
}
.message-warning .msg-heading h4 { color: rgb(var(--sv-warn)) !important; }
.message-error {
  background: rgb(var(--sv-neg) / 0.08) !important;
  border: 1px solid rgb(var(--sv-neg) / 0.35) !important;
  border-left: 2px solid rgb(var(--sv-neg)) !important;
  border-radius: 4px 10px 10px 4px !important;
}
.message-error .msg-heading h4 { color: rgb(var(--sv-neg)) !important; }

/* --- kvps: mono keys, ice values --- */
.kvps-key {
  font-family: var(--sv-font-mono) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase;
  letter-spacing: var(--sv-track-label);
  color: rgb(var(--sv-faint)) !important;
}
.kvps-val, .kvps-valp { color: rgb(var(--sv-muted)) !important; }
.msg-kvps tr { border-bottom: 1px solid rgb(var(--sv-edge) / 0.4); }

/* --- code + terminal --- */
.message-body .code-block-wrapper,
.message-body pre {
  background: rgb(4 6 12 / 0.85) !important;
  border: 1px solid rgb(var(--sv-edge) / 0.6) !important;
  border-radius: 10px !important;
}
.message-code-exe .message-body {
  background: rgb(4 6 12 / 0.9) !important;
  border: 1px solid rgb(var(--sv-edge) / 0.6) !important;
  border-radius: 10px !important;
}
.message-code-exe .msg-content, .message-code-exe .msg-content pre {
  color: rgb(var(--sv-pos)) !important;
  font-family: var(--sv-font-mono) !important;
}

/* markdown display headings inside responses → editorial serif */
.message-agent-response .message-body h1,
.message-agent-response .message-body h2,
.message-agent-response .message-body h3 {
  font-family: var(--sv-font-serif);
  font-weight: 400;
  letter-spacing: 0.2px;
  color: rgb(var(--sv-ink));
}

/* send button — the composer's one tinted action */
#send-button, .chat-button {
  border-radius: 10px !important;
}
#send-button {
  background: linear-gradient(180deg, rgb(var(--sv-accent)), rgb(var(--sv-royal))) !important;
  border: 1px solid rgb(var(--sv-accent) / 0.7) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 6px 18px rgb(var(--sv-accent) / 0.3);
}
#send-button:hover {
  background: linear-gradient(180deg, rgb(var(--sv-info)), rgb(var(--sv-accent))) !important;
}

/* markdown tables inside responses */
.message-body .message-markdown-table-wrap table { border-color: rgb(var(--sv-edge) / 0.6) !important; }
.message-body table th {
  font-family: var(--sv-font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: var(--sv-track-label);
  color: rgb(var(--sv-faint));
  border-bottom: 1px solid rgb(var(--sv-edge2)) !important;
}
.message-body table td { border-color: rgb(var(--sv-edge) / 0.4) !important; }

/* ==========================================================================
   10 · SETTINGS — glass shell, flat panes, electric active nav
   ========================================================================== */
.settings-modal .modal-header { border-bottom: 1px solid var(--sv-glass-border); }
.settings-nav-group, .settings-tabs { background: transparent !important; }

.settings-tab, .settings-nav-item, .settings-tab-button {
  border-radius: 8px !important;
  color: rgb(var(--sv-muted));
}
.settings-tab:hover, .settings-nav-item:hover { background: var(--sv-panel2) !important; }
.settings-tab.active, .settings-nav-item.active,
.settings-tab[aria-selected="true"] {
  background: rgb(var(--sv-accent) / 0.16) !important;
  color: rgb(var(--sv-ink)) !important;
  box-shadow: inset 0 0 0 1px rgb(var(--sv-accent) / 0.45);
}

.settings-pane .section,
.settings-advanced-section {
  background: var(--sv-panel) !important;
  border: 1px solid rgb(var(--sv-edge) / 0.55) !important;
  border-radius: 10px !important;
}
.settings-pane .section-title {
  font-family: var(--sv-font-serif) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  color: rgb(var(--sv-ink)) !important;
}
.field { border-bottom: 1px solid rgb(var(--sv-edge) / 0.35); }
.field-title { color: rgb(var(--sv-ink)) !important; }
.field-description { color: rgb(var(--sv-faint)) !important; }

/* ==========================================================================
   11 · TABLES (data-table system: files, memory, backups…)
   ========================================================================== */
.data-table-container, .data-table-container-standalone {
  border: 1px solid rgb(var(--sv-edge) / 0.55) !important;
  border-radius: 10px !important;
  background: var(--sv-panel) !important;
}
.data-table th {
  background: rgb(var(--sv-panelsolid) / 0.8) !important;
  border-bottom: 1px solid rgb(var(--sv-edge2)) !important;
}
.data-table td { border-color: rgb(var(--sv-edge) / 0.35) !important; }
.data-table tbody tr:hover { background: var(--sv-panel2) !important; }
.data-status-bar {
  font-family: var(--sv-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: rgb(var(--sv-faint)) !important;
}

/* ==========================================================================
   12 · SCHEDULER — status chips use the semantic recipe
   ========================================================================== */
.scheduler-status-idle, .scheduler-status-running,
.scheduler-status-disabled, .scheduler-status-error, .scheduler-status-selected {
  border-radius: 999px !important;
  font-family: var(--sv-font-mono);
  font-size: 0.66rem !important;
  text-transform: uppercase;
  letter-spacing: var(--sv-track-label);
}
.scheduler-status-running {
  color: rgb(var(--sv-pos)) !important;
  background: rgb(var(--sv-pos) / 0.1) !important;
  border: 1px solid rgb(var(--sv-pos) / 0.4) !important;
}
.scheduler-status-idle {
  color: rgb(var(--sv-muted)) !important;
  background: var(--sv-panel) !important;
  border: 1px solid rgb(var(--sv-edge2)) !important;
}
.scheduler-status-error {
  color: rgb(var(--sv-neg)) !important;
  background: rgb(var(--sv-neg) / 0.1) !important;
  border: 1px solid rgb(var(--sv-neg) / 0.4) !important;
}
.scheduler-status-disabled {
  color: rgb(var(--sv-faint)) !important;
  background: transparent !important;
  border: 1px dashed rgb(var(--sv-edge2)) !important; /* dashed = pending/inactive */
}
.scheduler-todo-item {
  background: var(--sv-panel) !important;
  border: 1px solid rgb(var(--sv-edge) / 0.5) !important;
  border-radius: 8px !important;
}

/* ==========================================================================
   13 · TOASTS + NOTIFICATIONS — solid panel (overlay tier), semantic rail
   ========================================================================== */
#toast, .notification-toast {
  background: rgb(var(--sv-panelsolid)) !important;
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 10px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5) !important;
}
#toast.toast--success { border-left: 2px solid rgb(var(--sv-pos)) !important; }
#toast.toast--error { border-left: 2px solid rgb(var(--sv-neg)) !important; }
#toast.toast--info { border-left: 2px solid rgb(var(--sv-info)) !important; }
.toast__title { font-family: var(--sv-font-mono); text-transform: uppercase; letter-spacing: var(--sv-track-label); font-size: 0.7rem; }

.notification-toggle.has-unread .notification-badge {
  background: rgb(var(--sv-accent)) !important;
}
.notification-toggle {
  background: var(--sv-panel) !important;
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 8px !important;
  color: rgb(var(--sv-muted)) !important;
}
.notification-toggle:hover { background: var(--sv-panel2) !important; color: rgb(var(--sv-ice)) !important; }

/* ==========================================================================
   14 · TOOLTIPS + DROPDOWNS + MENUS — solid overlay tier
   ========================================================================== */
.tooltip, [data-tippy-root] .tippy-box, .dropdown-menu, .chat-more-panel,
.context-menu {
  background: rgb(var(--sv-panelsolid)) !important;
  border: 1px solid var(--sv-glass-border) !important;
  border-radius: 10px !important;
  color: var(--color-text) !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

/* progress bar → electric shimmer */
#progress-bar-box, .progress-bar {
  background: rgb(var(--sv-accent) / 0.12) !important;
}
#progress-bar-h, .progress-bar-fill {
  background: linear-gradient(90deg, rgb(var(--sv-accent)), rgb(var(--sv-info))) !important;
}

/* ==========================================================================
   15 · ACCESSIBILITY FALLBACKS — always shipped with glass
   ========================================================================== */
@media (prefers-reduced-transparency: reduce) {
  #left-panel, .modal-inner, .modal-content, .modal-container, .confirm-dialog,
  #input-section, .welcome-composer .input-row, .welcome-action-card,
  .welcome-banner, .welcome-panel-card, .welcome-system-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgb(var(--sv-panelsolid)) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-action-card { transition: none; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
@media (prefers-contrast: more) {
  :root, .light-mode {
    --sv-glass-border: rgba(184, 208, 255, 0.34);
    --sv-muted: 192 202 232;
  }
  a { text-decoration: underline; }
}