/* Surface tokens: keep in sync with web/scripts/themeContrast.js + tests/test_theme_contrast.py */

body[data-vpos-style="kobold-corporate"] {
  --bg: #0f171d;
  --bg-2: #111c24;
  --panel: #111c24;
  --panel-strong: #0f171d;
  --panel-soft: #202b34;
  --panel-glass: #354d73;
  --text: #f2f6fb;
  --muted: #b9c3cf;
  --line: rgba(164, 184, 210, 0.18);
  --line-strong: rgba(93, 130, 180, 0.72);
  --accent: #34d6c0;
  --accent-rgb: 52, 214, 192;
  --accent-2: #ff6868;
  --accent-2-rgb: 255, 104, 104;
  --radius: 0;
  --radius-sm: 0;
  --shadow: none;
  --shadow-soft: none;
  background: var(--bg);
  font-family: Arial, Helvetica, sans-serif;
}

/* Suppress default ambient layers for every preset except the active vPOS theme. */
body[data-vpos-style]:not([data-vpos-style="vpos-current"])::before,
body[data-vpos-style]:not([data-vpos-style="vpos-current"])::after {
  display: none;
}

body[data-vpos-style]:not([data-vpos-style="vpos-current"]) input,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) select,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) textarea {
  background: var(--field-bg, var(--panel));
  border-color: var(--line);
  color: var(--field-fg, var(--text));
}

body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .panel,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .settings-card,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .conversation-panel,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .editor-panel,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .modal-card,
body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .composer-field {
  background: var(--panel);
}

body[data-vpos-style="kobold-corporate"] .appbar {
  background: #354d73;
  border-bottom-color: #23384f;
}

body[data-vpos-style="kobold-corporate"] .brand-identity {
  background: transparent;
  border: 0;
  color: #f2f6fb;
}

body[data-vpos-style="kobold-corporate"] .message {
  border: 0;
  border-radius: 12px;
}

body[data-vpos-style="kobold-corporate"] .message.assistant {
  background: #222d36;
}

body[data-vpos-style="kobold-corporate"] .message.user {
  background: #007c69;
}

body[data-vpos-style="kobold-corporate"] .speaker {
  color: #ff6868;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
}

body[data-vpos-style="messenger-clean"] {
  --bg: #eef2f7;
  --bg-2: #f8fafc;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #f1f5f9;
  --panel-glass: rgba(255, 255, 255, 0.94);
  --text: #111827;
  --muted: #5f6b7a;
  --line: rgba(15, 23, 42, 0.12);
  --line-strong: rgba(37, 99, 235, 0.45);
  --accent: #2563eb;
  --accent-rgb: 37, 99, 235;
  --accent-2: #14b8a6;
  --accent-2-rgb: 20, 184, 166;
  --radius: 8px;
  --radius-sm: 8px;
  --radius-composer: 8px;
  --composer-segment-border: rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, #f8fafc, #e8eef7);
}

body[data-vpos-style="messenger-clean"] .message,
body[data-vpos-style="messenger-night"] .message,
body[data-vpos-style="messenger-pastel"] .message {
  border: 0;
  border-radius: 18px;
}

body[data-vpos-style="messenger-clean"] .message.user {
  background: #2563eb;
  color: #ffffff;
}

body[data-vpos-style="messenger-clean"] .message.assistant {
  background: #ffffff;
}

body[data-vpos-style="messenger-night"] {
  --bg: #07111f;
  --bg-2: #0c1728;
  --panel: #111c2f;
  --panel-strong: #0a1220;
  --panel-soft: #17233a;
  --panel-glass: rgba(11, 18, 32, 0.94);
  --text: #edf6ff;
  --muted: #9fb0c7;
  --line: rgba(148, 163, 184, 0.16);
  --line-strong: rgba(56, 189, 248, 0.50);
  --accent: #38bdf8;
  --accent-rgb: 56, 189, 248;
  --accent-2: #818cf8;
  --accent-2-rgb: 129, 140, 248;
  --radius: 8px;
  --radius-sm: 8px;
  --radius-composer: 8px;
  --composer-segment-border: rgba(148, 163, 184, 0.18);
  background: #07111f;
}

body[data-vpos-style="messenger-night"] .message.user {
  background: #0ea5e9;
  color: #ffffff;
}

body[data-vpos-style="messenger-night"] .message.assistant {
  background: #1f2937;
}

body[data-vpos-style="messenger-pastel"] {
  --bg: #fff7fb;
  --bg-2: #eef6ff;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-strong: #ffffff;
  --panel-soft: #fff0f8;
  --panel-glass: rgba(255, 255, 255, 0.92);
  --text: #272033;
  --muted: #776b86;
  --line: rgba(88, 69, 110, 0.15);
  --line-strong: rgba(244, 114, 182, 0.52);
  --accent: #db2777;
  --accent-rgb: 219, 39, 119;
  --accent-2: #60a5fa;
  --accent-2-rgb: 96, 165, 250;
  --radius: 8px;
  --radius-sm: 8px;
  --radius-composer: 8px;
  --composer-segment-border: rgba(88, 69, 110, 0.14);
  background: linear-gradient(135deg, #fff7fb, #eef6ff);
}

body[data-vpos-style="messenger-pastel"] .message.user {
  background: #f9a8d4;
  color: #301525;
}

body[data-vpos-style="messenger-pastel"] .message.assistant {
  background: #dbeafe;
  color: #172554;
}

body[data-vpos-style="comic-quest"] {
  --bg: #fff15a;
  --bg-2: #4cc9f0;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-soft: #ffe45c;
  --panel-glass: #ffffff;
  --text: #101014;
  --muted: #31313a;
  --line: #101014;
  --line-strong: #101014;
  --accent: #ff3864;
  --accent-rgb: 255, 56, 100;
  --accent-2: #2563eb;
  --accent-2-rgb: 37, 99, 235;
  --radius: 0;
  --radius-sm: 0;
  --shadow: 6px 6px 0 #101014;
  --shadow-soft: 4px 4px 0 #101014;
  background: #fff15a;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
}

body[data-vpos-style="comic-quest"] .panel,
body[data-vpos-style="comic-quest"] .settings-card,
body[data-vpos-style="comic-quest"] .message,
body[data-vpos-style="comic-quest"] .composer-field,
body[data-vpos-style="comic-quest"] button,
body[data-vpos-style="comic-quest"] input,
body[data-vpos-style="comic-quest"] select,
body[data-vpos-style="comic-quest"] textarea {
  border: 3px solid #101014;
  box-shadow: var(--shadow-soft);
}

body[data-vpos-style="comic-quest"] .message.user {
  background: #4cc9f0;
}

body[data-vpos-style="comic-quest"] .message.assistant {
  background: #ffffff;
}

body[data-vpos-style="forge-reality"] {
  --bg: #0f0f0f;
  --bg-2: #1b1b1b;
  --panel: #171717;
  --panel-strong: #101010;
  --panel-soft: #242424;
  --panel-glass: #151515;
  --text: #f3f0e8;
  --muted: #aaa49a;
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(217, 35, 35, 0.74);
  --accent: #d92323;
  --accent-rgb: 217, 35, 35;
  --accent-2: #f3f0e8;
  --accent-2-rgb: 243, 240, 232;
  --radius: 0;
  --radius-sm: 0;
  background:
    linear-gradient(135deg, rgba(217, 35, 35, 0.18) 0 12%, transparent 12% 100%),
    linear-gradient(180deg, #0f0f0f, #1b1b1b);
}

body[data-vpos-style="forge-reality"] button,
body[data-vpos-style="forge-reality"] .message.user {
  background: #d92323;
  color: #ffffff;
}

body[data-vpos-style="forge-reality"] .panel,
body[data-vpos-style="forge-reality"] .settings-card,
body[data-vpos-style="forge-reality"] .composer-field {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

body[data-vpos-style="tavern-tales"] {
  --bg: #24140c;
  --bg-2: #3a2114;
  --panel: #f2dfb8;
  --panel-strong: #3a2114;
  --panel-soft: #ead0a0;
  --panel-glass: #4a2a18;
  --text: #26170f;
  --muted: #6f4f34;
  --line: rgba(80, 45, 24, 0.36);
  --line-strong: rgba(216, 155, 61, 0.72);
  --accent: #b86b25;
  --accent-rgb: 184, 107, 37;
  --accent-2: #4f7d3a;
  --accent-2-rgb: 79, 125, 58;
  --radius: 8px;
  --radius-sm: 8px;
  background: linear-gradient(180deg, #24140c, #3a2114);
}

body[data-vpos-style]:not([data-vpos-style="vpos-current"]) .message {
  color: var(--text);
}

body[data-vpos-style="messenger-clean"] .message.user,
body[data-vpos-style="messenger-night"] .message.user,
body[data-vpos-style="forge-reality"] .message.user {
  color: #ffffff;
}

body[data-vpos-style="comic-quest"] .message.user {
  color: #101014;
}

body[data-vpos-style="messenger-pastel"] .message.user {
  color: #301525;
}

body[data-vpos-style="tavern-tales"] .appbar,
body[data-vpos-style="tavern-tales"] .global-prompt-bar,
body[data-vpos-style="tavern-tales"] .flyout,
body[data-vpos-style="tavern-tales"] .appbar-quick-sheet,
body[data-vpos-style="tavern-tales"] .chat-tools-panel {
  color: #f8e9c9;
}

body[data-vpos-style="tavern-tales"] .message.user {
  background: #d89b3d;
}

body[data-vpos-style="tavern-tales"] .message.assistant {
  background: #f4dfb2;
}

body[data-vpos-style="tavern-tales"] input,
body[data-vpos-style="tavern-tales"] select,
body[data-vpos-style="tavern-tales"] textarea {
  background: #fff3d2;
  color: #26170f;
}

body[data-vpos-style="tavern-tales"] input:focus,
body[data-vpos-style="tavern-tales"] select:focus,
body[data-vpos-style="tavern-tales"] textarea:focus {
  background: #fff8e8;
}

body[data-vpos-style="paper-desk"] {
  --bg: #fbfaf5;
  --bg-2: #ede4d0;
  --panel: #fffdf7;
  --panel-strong: #fffdf7;
  --panel-soft: #f2ead8;
  --panel-glass: rgba(255, 253, 247, 0.94);
  --text: #252018;
  --muted: #6b6254;
  --line: rgba(70, 58, 40, 0.18);
  --line-strong: rgba(47, 95, 143, 0.44);
  --accent: #2f5f8f;
  --accent-rgb: 47, 95, 143;
  --accent-2: #8a5a2f;
  --accent-2-rgb: 138, 90, 47;
  --radius: 4px;
  --radius-sm: 4px;
  background:
    linear-gradient(rgba(47, 95, 143, 0.07) 1px, transparent 1px),
    #fbfaf5;
  background-size: 100% 28px;
}

body[data-vpos-style="paper-desk"] .message.user {
  background: #d7e8f7;
}

body[data-vpos-style="paper-desk"] .message.assistant {
  background: #fffdf7;
}

body[data-vpos-style="terminal-green"] {
  --bg: #020602;
  --bg-2: #061008;
  --panel: #030903;
  --panel-strong: #010401;
  --panel-soft: #07170b;
  --panel-glass: rgba(1, 4, 1, 0.96);
  --text: #b8ffcf;
  --muted: #6fe394;
  --line: rgba(57, 255, 136, 0.28);
  --line-strong: rgba(57, 255, 136, 0.72);
  --accent: #39ff88;
  --accent-rgb: 57, 255, 136;
  --accent-2: #b8ffcf;
  --accent-2-rgb: 184, 255, 207;
  --radius: 0;
  --radius-sm: 0;
  background: #020602;
  font-family: var(--mono);
}

body[data-vpos-style="terminal-green"] .message,
body[data-vpos-style="terminal-green"] input,
body[data-vpos-style="terminal-green"] select,
body[data-vpos-style="terminal-green"] textarea {
  background: #010401;
  color: #b8ffcf;
}

body[data-vpos-style="soft-studio"] {
  --bg: #f4f1ea;
  --bg-2: #e4ece8;
  --panel: #ffffff;
  --panel-strong: #fffdf9;
  --panel-soft: #edf5f1;
  --panel-glass: rgba(255, 255, 255, 0.92);
  --text: #1f2a2b;
  --muted: #647273;
  --line: rgba(31, 42, 43, 0.13);
  --line-strong: rgba(47, 111, 115, 0.44);
  --accent: #2f6f73;
  --accent-rgb: 47, 111, 115;
  --accent-2: #c77966;
  --accent-2-rgb: 199, 121, 102;
  --radius: 8px;
  --radius-sm: 8px;
  --radius-composer: 8px;
  --composer-segment-border: rgba(31, 42, 43, 0.12);
  background: linear-gradient(135deg, #f4f1ea, #e4ece8);
}

body[data-vpos-style="soft-studio"] .message.user {
  background: #d8ebe7;
}

body[data-vpos-style="soft-studio"] .message.assistant {
  background: #ffffff;
}

body[data-vpos-style="messenger-clean"] button:not(.composer-integrated-btn),
body[data-vpos-style="messenger-night"] button:not(.composer-integrated-btn),
body[data-vpos-style="messenger-pastel"] button:not(.composer-integrated-btn),
body[data-vpos-style="paper-desk"] button:not(.composer-integrated-btn),
body[data-vpos-style="soft-studio"] button:not(.composer-integrated-btn) {
  border-radius: var(--radius-sm);
  letter-spacing: 0;
  text-transform: none;
}

/* =============================================================================
   ICON COLOR POP — theme-specific overrides for icons.css --icon-* tokens
   Glyphs stay in scripts/icons.js; tune hue and glow here per preset.
   ============================================================================= */

body[data-vpos-style="kobold-corporate"] {
  --icon-nav: #ff6868;
  --icon-nav-hover: #34d6c0;
  --icon-send: #34d6c0;
  --icon-glow: 0 0 10px rgba(255, 104, 104, 0.35);
  --icon-glow-strong: 0 0 14px rgba(52, 214, 192, 0.42);
}

body[data-vpos-style="comic-quest"] {
  --icon-nav: #2563eb;
  --icon-nav-hover: #ff3864;
  --icon-card: #ff3864;
  --icon-send: #4cc9f0;
  --icon-glow: 0 0 0 2px #101014, 0 0 12px rgba(255, 56, 100, 0.4);
  --icon-glow-strong: 0 0 0 2px #101014, 0 0 16px rgba(37, 99, 235, 0.45);
}

body[data-vpos-style="forge-reality"] {
  --icon-nav: #f3f0e8;
  --icon-nav-hover: #d92323;
  --icon-card: #d92323;
  --icon-send: #f3f0e8;
  --icon-glow: 0 0 12px rgba(217, 35, 35, 0.45);
  --icon-glow-strong: 0 0 18px rgba(243, 240, 232, 0.28);
}

body[data-vpos-style="tavern-tales"] {
  --icon-nav: #4f7d3a;
  --icon-nav-hover: #d89b3d;
  --icon-card: #b86b25;
  --icon-send: #4f7d3a;
  --icon-glow: 0 0 10px rgba(216, 155, 61, 0.38);
  --icon-glow-strong: 0 0 14px rgba(79, 125, 58, 0.42);
}

body[data-vpos-style="terminal-green"] {
  --icon-nav: #33ff99;
  --icon-nav-hover: #00ff66;
  --icon-card: #33ff99;
  --icon-send: #00ff66;
  --icon-glow: 0 0 12px rgba(51, 255, 153, 0.35);
  --icon-glow-strong: 0 0 16px rgba(0, 255, 102, 0.45);
}

body[data-vpos-style="messenger-clean"],
body[data-vpos-style="messenger-night"],
body[data-vpos-style="messenger-pastel"],
body[data-vpos-style="paper-desk"],
body[data-vpos-style="soft-studio"] {
  --icon-glow: none;
  --icon-glow-strong: none;
}

body[data-vpos-style="messenger-clean"] {
  --icon-nav: #2563eb;
  --icon-nav-hover: #1d4ed8;
  --icon-send: #16a34a;
}

body[data-vpos-style="messenger-night"] {
  --icon-nav: #60a5fa;
  --icon-nav-hover: #93c5fd;
  --icon-send: #4ade80;
}

body[data-vpos-style="messenger-pastel"] {
  --icon-nav: #7c3aed;
  --icon-nav-hover: #a855f7;
  --icon-send: #059669;
}

body[data-vpos-style="paper-desk"] {
  --icon-nav: #b45309;
  --icon-nav-hover: #92400e;
  --icon-send: #15803d;
}

body[data-vpos-style="soft-studio"] {
  --icon-nav: #0f766e;
  --icon-nav-hover: #115e59;
  --icon-send: #047857;
}