/*!
 * SmartChat — switchable themes (theme.css)
 * Two independent axes:
 *   data-scheme = vibrant | slate | navy | mono   (which color identity)
 *   data-mode   = light | dark                    (light or dark surface)
 * Set on <html>. Defaults: scheme=vibrant, mode=light.
 * Loaded on every console page AFTER the page's own <style> so tokens win.
 */

/* ============================================================
   DEFAULTS (vibrant / light) — also the base every scheme inherits
   ============================================================ */
:root {
  --bg:#eef1fb; --panel:#ffffff; --panel2:#fbfcfd;
  --ink:#1c1a33; --muted:#5d5a82; --dim:#9b98bd;
  --glass:rgba(255,255,255,.66); --card:rgba(255,255,255,.74);
  --line:rgba(120,110,200,.16); --line2:rgba(120,110,200,.26);
  --c1:#7c3aed; --c2:#ec4899; --c3:#06b6d4; --c4:#f59e0b; --c5:#10b981; --c6:#6366f1;
  --accent:#7c3aed; --accent-soft:#f3eefe;
  --good:#10b981; --good-bg:#ecfdf5; --warn:#f59e0b; --warn-bg:#fffbeb; --bad:#ef4444; --info:#06b6d4; --info-bg:#ecfeff;
  --grad-primary:linear-gradient(135deg,#7c3aed,#ec4899);
  --sidebar:transparent; --sidebar-fg:var(--muted); --sidebar-active-bg:var(--grad-primary); --sidebar-active-fg:#fff;
  --blob1:radial-gradient(circle,#c084fc,#7c3aed); --blob2:radial-gradient(circle,#f9a8d4,#06b6d4); --blob-op:.4;
  --radius:16px; --shadow-card:0 10px 30px rgba(40,30,90,.08);
}

/* ---------- VIBRANT (explicit, same as defaults) ---------- */
:root[data-scheme="vibrant"][data-mode="light"]{ /* inherits defaults */ }
:root[data-scheme="vibrant"][data-mode="dark"]{
  --bg:#0e0b1e; --panel:#1a1530; --panel2:#15102b; --ink:#f0ecff; --muted:#a9a3cf; --dim:#6f6a96;
  --glass:rgba(34,28,60,.66); --card:rgba(38,31,66,.72); --line:rgba(160,150,230,.14); --line2:rgba(160,150,230,.24);
  --c1:#9d6bff; --c2:#f472b6; --c3:#22d3ee; --accent:#9d6bff; --accent-soft:rgba(157,107,255,.14);
  --good:#34d399; --good-bg:rgba(52,211,153,.12); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --bad:#f87171; --info:#22d3ee; --info-bg:rgba(34,211,238,.12);
  --grad-primary:linear-gradient(135deg,#9d6bff,#f472b6); --sidebar-active-bg:var(--grad-primary);
  --blob1:radial-gradient(circle,#6d28d9,#4c1d95); --blob2:radial-gradient(circle,#be185d,#0e7490); --blob-op:.5;
  --shadow-card:0 10px 30px rgba(0,0,0,.4);
}

/* ---------- SLATE PROFESSIONAL ---------- */
:root[data-scheme="slate"][data-mode="light"]{
  --bg:#f7f8fa; --panel:#ffffff; --panel2:#fbfcfd; --ink:#0f172a; --muted:#64748b; --dim:#94a3b8;
  --glass:#ffffff; --card:#ffffff; --line:#e2e8f0; --line2:#cbd5e1;
  --c1:#4f46e5; --c2:#6366f1; --c3:#0ea5e9; --accent:#4f46e5; --accent-soft:#eef2ff;
  --good:#059669; --good-bg:#ecfdf5; --warn:#d97706; --warn-bg:#fffbeb; --bad:#dc2626; --info:#0284c7; --info-bg:#f0f9ff;
  --grad-primary:#4f46e5;
  --sidebar:#0f172a; --sidebar-fg:#cbd5e1; --sidebar-active-bg:#1e293b; --sidebar-active-fg:#ffffff;
  --blob-op:0; --shadow-card:0 1px 3px rgba(15,23,42,.08);
}
:root[data-scheme="slate"][data-mode="dark"]{
  --bg:#0b1120; --panel:#111827; --panel2:#0f1626; --ink:#e2e8f0; --muted:#94a3b8; --dim:#64748b;
  --glass:#111827; --card:#111827; --line:#1f2937; --line2:#334155;
  --c1:#818cf8; --c2:#a5b4fc; --c3:#38bdf8; --accent:#818cf8; --accent-soft:rgba(129,140,248,.14);
  --good:#34d399; --good-bg:rgba(52,211,153,.12); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --bad:#f87171; --info:#38bdf8; --info-bg:rgba(56,189,248,.12);
  --grad-primary:#818cf8;
  --sidebar:#060912; --sidebar-fg:#94a3b8; --sidebar-active-bg:#1e293b; --sidebar-active-fg:#ffffff;
  --blob-op:0; --shadow-card:0 1px 3px rgba(0,0,0,.5);
}

/* ---------- CORPORATE NAVY ---------- */
:root[data-scheme="navy"][data-mode="light"]{
  --bg:#eef1f5; --panel:#ffffff; --panel2:#f6f8fb; --ink:#0b2447; --muted:#56708e; --dim:#8aa0b8;
  --glass:#ffffff; --card:#ffffff; --line:#dde5ee; --line2:#c3d0de;
  --c1:#0e7490; --c2:#0891b2; --c3:#0284c7; --accent:#0e7490; --accent-soft:#ecfeff;
  --good:#0f766e; --good-bg:#f0fdfa; --warn:#b45309; --warn-bg:#fffbeb; --bad:#b91c1c; --info:#0e7490; --info-bg:#ecfeff;
  --grad-primary:#0e7490;
  --sidebar:#0b2447; --sidebar-fg:#a9bdd6; --sidebar-active-bg:#163a63; --sidebar-active-fg:#ffffff;
  --blob-op:0; --shadow-card:0 1px 3px rgba(11,36,71,.1);
}
:root[data-scheme="navy"][data-mode="dark"]{
  --bg:#071324; --panel:#0c1f38; --panel2:#0a1a30; --ink:#dce8f5; --muted:#8aa0b8; --dim:#566f8c;
  --glass:#0c1f38; --card:#0c1f38; --line:#143052; --line2:#1d4068;
  --c1:#22d3ee; --c2:#38bdf8; --c3:#7dd3fc; --accent:#22d3ee; --accent-soft:rgba(34,211,238,.12);
  --good:#2dd4bf; --good-bg:rgba(45,212,191,.12); --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --bad:#f87171; --info:#22d3ee; --info-bg:rgba(34,211,238,.12);
  --grad-primary:#22d3ee;
  --sidebar:#040d1a; --sidebar-fg:#8aa0b8; --sidebar-active-bg:#143052; --sidebar-active-fg:#ffffff;
  --blob-op:0; --shadow-card:0 1px 3px rgba(0,0,0,.5);
}

/* ---------- REFINED MONO ---------- */
:root[data-scheme="mono"][data-mode="light"]{
  --bg:#fafafa; --panel:#ffffff; --panel2:#fcfcfc; --ink:#18181b; --muted:#71717a; --dim:#a1a1aa;
  --glass:#ffffff; --card:#ffffff; --line:#ececee; --line2:#dcdce0;
  --c1:#3f6fb5; --c2:#5b82c2; --c3:#6b7280; --accent:#3f6fb5; --accent-soft:#eff3f9;
  --good:#3f7d54; --good-bg:#f1f7f3; --warn:#9a6a2e; --warn-bg:#faf6ef; --bad:#b54141; --info:#3f6fb5; --info-bg:#eff3f9;
  --grad-primary:#3f6fb5;
  --sidebar:#ffffff; --sidebar-fg:#52525b; --sidebar-active-bg:#f4f4f5; --sidebar-active-fg:#18181b;
  --sidebar-border:1px solid #ececee; --blob-op:0; --shadow-card:none;
}
:root[data-scheme="mono"][data-mode="dark"]{
  --bg:#0c0c0d; --panel:#161618; --panel2:#121214; --ink:#e4e4e7; --muted:#a1a1aa; --dim:#71717a;
  --glass:#161618; --card:#161618; --line:#27272a; --line2:#3f3f46;
  --c1:#6b9bd8; --c2:#7da3dd; --c3:#9ca3af; --accent:#6b9bd8; --accent-soft:rgba(107,155,216,.14);
  --good:#5fa876; --good-bg:rgba(95,168,118,.12); --warn:#c79454; --warn-bg:rgba(199,148,84,.12); --bad:#d06666; --info:#6b9bd8; --info-bg:rgba(107,155,216,.12);
  --grad-primary:#6b9bd8;
  --sidebar:#0a0a0b; --sidebar-fg:#a1a1aa; --sidebar-active-bg:#1f1f23; --sidebar-active-fg:#fafafa;
  --sidebar-border:1px solid #27272a; --blob-op:0; --shadow-card:none;
}

/* ============================================================
   Shared behaviour
   ============================================================ */
html[data-mode] body, html[data-mode] body * {
  transition: background-color .25s ease, border-color .25s ease, color .2s ease;
}

/* Ambient blobs respect the scheme (vibrant shows them; corporate hides via --blob-op:0) */
:root body::before, :root body::after { opacity: var(--blob-op, .4) !important; }

/* Dark-mode surface coercion for inputs/tables/hardcoded white cards */
html[data-mode="dark"] body { background: var(--bg) !important; color: var(--ink); }
html[data-mode="dark"] input, html[data-mode="dark"] select, html[data-mode="dark"] textarea {
  background: var(--panel2) !important; color: var(--ink) !important; border-color: var(--line2) !important;
}
html[data-mode="dark"] input::placeholder, html[data-mode="dark"] textarea::placeholder { color: var(--dim) !important; }
html[data-mode="dark"] th { color: var(--dim) !important; }
html[data-mode="dark"] [style*="background:#fff"],
html[data-mode="dark"] [style*="background: #fff"],
html[data-mode="dark"] [style*="background:#ffffff"] { background: var(--card) !important; color: var(--ink); }

/* ---- Sidebar theme picker (injected by theme-toggle.js) ---- */
.sc-theme-panel { margin-top:8px; padding:10px; border:1px solid var(--line2); border-radius:11px; background:var(--glass); }
.sc-theme-panel .lbl { font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:800; color:var(--dim); margin-bottom:8px; }
.sc-scheme-row { display:flex; gap:6px; margin-bottom:8px; }
.sc-scheme { flex:1; height:30px; border-radius:8px; cursor:pointer; border:2px solid transparent; position:relative; }
.sc-scheme[data-on="1"] { border-color: var(--accent); }
.sc-scheme .sw { position:absolute; inset:4px; border-radius:5px; }
.sc-mode-row { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--sidebar-fg,var(--muted)); cursor:pointer; }
.sc-mode-row .tk { margin-left:auto; width:34px; height:18px; border-radius:18px; background:var(--line2); position:relative; transition:.2s; }
.sc-mode-row .kn { position:absolute; top:2px; left:2px; width:14px; height:14px; border-radius:50%; background:var(--accent); transition:.2s; }
html[data-mode="dark"] .sc-mode-row .kn { left:18px; }
