/* Padiem Chat — Extensible 4-Theme Token System
 * data-theme="light" | "dark" | "cinematic" | "padiem-home"
 * Single DOM/runtime; theme values via CSS custom properties only.
 * NEW_THEME_ADDITION != OLD_THEME_REPLACEMENT
 */

/* ---- shared token defaults (fallback = light tokens, overridden per theme) ---- */
:root {
  /* populated per theme; keep declarations here minimal so data-theme wins */
}

/* #6100: input borders have their own floor. The shared --line doubles as
   the card hairline the connection screen is being rebuilt on, so its
   value stays put; input controls take --input-border-strong instead,
   defined per theme to clear the 3:1 non-text floor against each theme's
   own fill (numbers: padiem-reports/2026-10-29). */
/* ---- LIGHT — historical Phase 1 restrained light/violet (PR #714, 6c9f1a4) ---- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f8fb;
  --page-bg: #f8f8fb;
  --panel: #ffffff;
  --sidebar: #f1f1f5;
  --sidebar-text: #19191d;
  --text: #19191d;
  --muted: #6f7079;
  --line: #e3e3e9;
  --input-border-strong: #767e8a;
  --accent: #6557e8;
  --accent-contrast: #ffffff;
  --accent-soft: #efedff;
  --accent-strong: #5546d6;
  --gold: #b8923a;
  --gold-soft: rgba(184,146,58,.10);
  --blue: #6557e8;
  --danger: #b3261e;
  --success: #1a6b3a;
  --success-surface: rgba(34, 158, 94, 0.08);
  --success-border: rgba(34, 158, 94, 0.18);
  --danger-surface: rgba(220, 62, 62, 0.07);
  --danger-border: rgba(220, 62, 62, 0.16);
  --shadow: 0 14px 36px rgba(30,28,54,.08);
  --radius-md: 16px;
  --font-body: Pretendard, "Noto Sans KR", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: Pretendard, "Noto Sans KR", ui-sans-serif;
  --font-label: Inter, Pretendard, system-ui, sans-serif;
  --card-bg: #ffffff;
  --card-border: #e3e3e9;
  --card-shadow: 0 3px 10px rgba(33,33,49,.04);
  --composer-bg: #ffffff;
  --composer-border: #e3e3e9;
  --composer-shadow: 0 14px 36px rgba(30,28,54,.08);
  --user-bubble-bg: #6557e8;
  --user-bubble-text: #ffffff;
  --user-bubble-border: transparent;
  --assistant-surface-bg: #ffffff;
  --assistant-surface-border: #e3e3e9;
  --input-text: #19191d;
  --placeholder: #9b9ca5;
  --focus-ring: rgba(101,87,232,.24);
  --topbar-bg: rgba(248,248,251,.86);
  --glass: rgba(255,255,255,.72);
}

html[data-theme="light"] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  display: none;
}
html[data-theme="light"] .app-shell::before { display: none; }
html[data-theme="light"] .sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="light"] .brand { color: var(--text); letter-spacing: -.02em; font-weight: 750; }
html[data-theme="light"] .brand-mark,
html[data-theme="light"] .assistant-avatar {
  background: linear-gradient(135deg, #7768ee, #4f40ce);
  border: none;
  box-shadow: 0 6px 18px rgba(85,70,214,.18);
}
html[data-theme="light"] .brand-mark::after,
html[data-theme="light"] .assistant-avatar::after { display: none; }
html[data-theme="light"] .new-chat {
  background: #fff; border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 3px 10px rgba(33,33,49,.03);
}
html[data-theme="light"] .topbar {
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}
html[data-theme="light"] .model-pill,
html[data-theme="light"] .login-button {
  background: rgba(255,255,255,.78);
  border: 1px solid var(--line);
  color: #50515a;
}
html[data-theme="light"] .eyebrow { color: var(--accent); letter-spacing: .13em; }
html[data-theme="light"] .eyebrow::before { background: var(--accent); box-shadow: none; }
html[data-theme="light"] .empty-state h1 { color: var(--text); text-shadow: none; }
html[data-theme="light"] .empty-copy { color: var(--muted); }
html[data-theme="light"] .starter {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
}
html[data-theme="light"] .starter strong { color: var(--text); }
html[data-theme="light"] .starter small { color: var(--muted); }
html[data-theme="light"] .starter-icon {
  background: #f3f2f8; border: none; color: #6b6b7a;
}
html[data-theme="light"] .composer { background: var(--composer-bg); border: 1px solid var(--composer-border); box-shadow: var(--composer-shadow); }
html[data-theme="light"] .composer-wrap { background: linear-gradient(to bottom, transparent, var(--bg) 28%, var(--bg)) !important; }
html[data-theme="light"] .composer-note { color: var(--muted) !important; }
/* LIGHT chat-state — override dark cinematic chat selectors (padiem-editorial/rich) */
html[data-theme="light"] .app-shell[data-state="chat"] .message-bubble { background: var(--user-bubble-bg) !important; color: var(--user-bubble-text) !important; border-color: var(--user-bubble-border) !important; box-shadow: 0 2px 10px rgba(101,87,232,.06) !important; backdrop-filter: none !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .assistant-avatar { background: linear-gradient(135deg, #7768ee, #4f40ce) !important; border: none !important; color: #fff !important; box-shadow: 0 6px 18px rgba(85,70,214,.12) !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .assistant-meta { color: var(--muted) !important; }
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .demo-label { background: var(--accent-soft) !important; border-color: var(--line) !important; color: var(--muted) !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .assistant-content { color: #1e1e22 !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .assistant-message::before { background: linear-gradient(to bottom, rgba(101,87,232,.18), rgba(0,0,0,.04), transparent) !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .composer { background: var(--composer-bg) !important; border-color: var(--composer-border) !important; box-shadow: var(--composer-shadow) !important; backdrop-filter: none !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .composer-wrap { background: linear-gradient(to bottom, transparent, var(--bg) 28%, var(--bg)) !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .composer textarea { color: var(--input-text) !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .composer textarea::placeholder { color: var(--placeholder) !important; }
html[data-theme="light"] .app-shell[data-state="chat"] .composer-note { color: var(--muted) !important; }
/* LIGHT refinement — subtle hierarchy, pearl cues */
html[data-theme="light"] .sidebar { background: linear-gradient(180deg, #f1f1f5 0%, #ececf1 100%); border-right-color: #e0e0e6; }
html[data-theme="light"] .starter { background: linear-gradient(180deg, #ffffff 0%, #fcfcfe 100%); border-color: #e6e6eb; box-shadow: 0 2px 10px rgba(101,87,232,.05), 0 1px 3px rgba(30,28,54,.04); }
html[data-theme="light"] .starter:hover { border-color: rgba(101,87,232,.16); box-shadow: 0 4px 16px rgba(101,87,232,.09); }
html[data-theme="light"] .starter-icon { background: linear-gradient(180deg, #f3f2f8, #eceaf6); border: 1px solid rgba(101,87,232,.10); }
html[data-theme="light"] .empty-state h1 { letter-spacing: -.03em; }
html[data-theme="light"] .eyebrow { letter-spacing: .14em; }
html[data-theme="light"] .sidebar-footer { border-top: 1px solid rgba(101,87,232,.06); }
html[data-theme="light"] .composer textarea { color: var(--input-text); }
html[data-theme="light"] .composer textarea::placeholder { color: var(--placeholder); }
html[data-theme="light"] .message-bubble {
  background: var(--user-bubble-bg); color: var(--user-bubble-text);
  border-color: var(--user-bubble-border);
}
html[data-theme="light"] .assistant-content { color: #1e1e22; }
html[data-theme="light"] .source-card,
html[data-theme="light"] .rich-block,
html[data-theme="light"] .output-card {
  background: #fff !important; border-color: var(--line) !important; color: var(--text) !important;
}

/* ---- DARK — clean neutral charcoal utility mode (#1273) ----
 * Flat, low-chroma surfaces: solid panels, no radial atmosphere, no glow,
 * no glass blur, restrained shadows. Readability-first, chrome-last. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131417;
  --page-bg: #131417;
  --panel: #1a1b1f;
  --sidebar: #101114;
  --text: #e9eaec;
  --muted: rgba(255,255,255,.56);
  --line: rgba(255,255,255,.10);
  --input-border-strong: rgba(255,255,255,.45);
  --accent: #9fc0dd;
  --accent-contrast: #131417;
  --accent-soft: rgba(159,192,221,.08);
  --accent-strong: #cfe0ee;
  --gold: #c9b28a;
  --gold-soft: rgba(201,178,138,.07);
  --blue: #9fc0dd;
  --danger: #ff9d9d;
  --success: #8be9a8;
  --success-surface: rgba(34, 158, 94, 0.08);
  --success-border: rgba(34, 158, 94, 0.18);
  --danger-surface: rgba(220, 62, 62, 0.07);
  --danger-border: rgba(220, 62, 62, 0.16);
  --shadow: 0 10px 28px rgba(0,0,0,.28);
  --card-bg: #181a1e;
  --card-border: rgba(255,255,255,.09);
  --composer-bg: #17181c;
  --composer-border: rgba(255,255,255,.12);
  --user-bubble-bg: #1c1e22;
  --user-bubble-text: #f2f3f4;
  --assistant-surface-bg: #181a1e;
  --focus-ring: rgba(159,192,221,.32);
  --topbar-bg: rgba(19,20,23,.92);
  /* utility-only tokens — flat surface discipline, intentionally absent from CINEMATIC */
  --utility-surface: #1a1b1f;
  --utility-edge: rgba(255,255,255,.12);
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}
html[data-theme="dark"] body::before {
  box-shadow: none;
  background: none;
}
html[data-theme="dark"] body::after { opacity: .03; }
html[data-theme="dark"] .app-shell::before {
  background: var(--line);
  opacity: 1;
  box-shadow: none;
}
html[data-theme="dark"] .sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--utility-edge);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .brand { color: #f4f5f6; }
html[data-theme="dark"] .brand-mark,
html[data-theme="dark"] .assistant-avatar {
  background: var(--utility-surface);
  border-color: var(--utility-edge);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .brand-mark::after,
html[data-theme="dark"] .assistant-avatar::after { display: none; }
html[data-theme="dark"] .new-chat {
  background: #1b1d21; border-color: var(--utility-edge); color: rgba(255,255,255,.88);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--utility-edge);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .model-pill,
html[data-theme="dark"] .login-button {
  background: #1b1d21; border-color: var(--utility-edge); color: rgba(255,255,255,.76);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .eyebrow { color: rgba(255,255,255,.62); }
html[data-theme="dark"] .eyebrow::before { background: var(--accent); box-shadow: none; }
html[data-theme="dark"] .preview-dot { background: var(--accent); box-shadow: none; }
html[data-theme="dark"] .empty-state h1 { color: #f6f7f8; text-shadow: none; }
html[data-theme="dark"] .empty-copy { color: rgba(255,255,255,.60); }
html[data-theme="dark"] .starter {
  background: var(--card-bg);
  border-color: var(--card-border);
  color: rgba(255,255,255,.88);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .starter:not(:disabled):hover {
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 2px 8px rgba(0,0,0,.20);
}
html[data-theme="dark"] .message-bubble {
  background: var(--user-bubble-bg); color: rgba(255,255,255,.92); border-color: var(--card-border);
  box-shadow: none;
  backdrop-filter: none;
}
html[data-theme="dark"] .composer {
  background: var(--composer-bg); border-color: var(--composer-border);
  box-shadow: 0 2px 14px rgba(0,0,0,.24);
  backdrop-filter: none;
}
html[data-theme="dark"] .composer-wrap { background: linear-gradient(to bottom, transparent, rgba(19,20,23,.92) 34%, #131417 76%) !important; }
html[data-theme="dark"] .composer-note { color: rgba(255,255,255,.42) !important; }
html[data-theme="dark"] .composer textarea { color: #f2f3f4; }
html[data-theme="dark"] .composer textarea::placeholder { color: rgba(255,255,255,.40); }

/* ---- CINEMATIC — filmic atmospheric mode (#1273) ----
 * Deep blue-black canvas, strong spatial gradients, glass depth, blue/gold
 * halo accents. Carries unique --film-* tokens that DARK never shares. */
html[data-theme="cinematic"] {
  color-scheme: dark;
  --bg: #04070d;
  --page-bg: #04070d;
  --panel: rgba(10,14,22,.72);
  --sidebar: rgba(6,9,15,.88);
  --text: #f7f8fa;
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.14);
  --input-border-strong: rgba(255,255,255,.45);
  --accent: #88c9ff;
  --accent-contrast: #04070d;
  --accent-soft: rgba(136,201,255,.10);
  --accent-strong: #d7ebfa;
  --gold: #efc984;
  --gold-soft: rgba(239,201,132,.14);
  --blue: #88c9ff;
  --danger: #ff9d9d;
  --success: #8be9a8;
  --success-surface: rgba(34, 158, 94, 0.08);
  --success-border: rgba(34, 158, 94, 0.18);
  --danger-surface: rgba(220, 62, 62, 0.07);
  --danger-border: rgba(220, 62, 62, 0.16);
  --shadow: 0 24px 80px rgba(0,0,0,.42);
  --card-bg: rgba(8,12,19,.52);
  --card-border: rgba(136,201,255,.16);
  --composer-bg: rgba(10,14,22,.68);
  --composer-border: rgba(136,201,255,.22);
  --user-bubble-bg: rgba(255,255,255,.085);
  --user-bubble-text: rgba(255,255,255,.92);
  --assistant-surface-bg: rgba(255,255,255,.045);
  --focus-ring: rgba(136,201,255,.70);
  --topbar-bg: linear-gradient(180deg, rgba(7,11,19,.72), rgba(6,9,15,.14));
  /* filmic-only tokens — intentionally absent from DARK */
  --film-blue-glow: rgba(108,190,255,.16);
  --film-gold-glow: rgba(239,201,132,.10);
  --film-edge: rgba(136,201,255,.18);
  --film-vignette: inset 0 0 280px 110px rgba(0,0,0,.72);
  --film-grain: .22;
}

html[data-theme="cinematic"] body {
  background:
    radial-gradient(circle at 72% 26%, rgba(108,190,255,.22), transparent 26%),
    radial-gradient(circle at 16% 76%, rgba(239,201,132,.15), transparent 28%),
    radial-gradient(circle at 50% 50%, rgba(225,241,255,.05), transparent 42%),
    linear-gradient(135deg, #05080f 0%, #0a0f18 46%, #030509 100%);
}
html[data-theme="cinematic"] body::before {
  box-shadow: var(--film-vignette);
  background:
    linear-gradient(180deg, rgba(0,0,0,.24), rgba(0,0,0,.02) 42%, rgba(0,0,0,.45)),
    radial-gradient(circle at 18% 52%, rgba(255,255,255,.018), transparent 40%),
    radial-gradient(circle at 82% 48%, rgba(255,255,255,.012), transparent 38%);
}
html[data-theme="cinematic"] body::after { opacity: var(--film-grain); }
html[data-theme="cinematic"] .app-shell::before {
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.96), var(--gold));
  opacity: .42;
  box-shadow: 0 0 16px var(--film-blue-glow), 0 0 22px var(--film-gold-glow);
}
html[data-theme="cinematic"] .sidebar {
  background: linear-gradient(180deg, rgba(7,11,19,.93), rgba(5,8,14,.86)), rgba(4,7,12,.9);
  border-right-color: var(--film-edge);
  box-shadow: 22px 0 70px rgba(0,0,0,.28), inset -1px 0 0 rgba(136,201,255,.14), 10px 0 48px rgba(91,166,230,.08);
}
html[data-theme="cinematic"] .brand { color: #fff; }
html[data-theme="cinematic"] .brand-mark,
html[data-theme="cinematic"] .assistant-avatar {
  background: linear-gradient(145deg, rgba(210,235,255,.14), rgba(255,255,255,.04)), rgba(8,12,20,.78);
  border-color: var(--film-edge);
  box-shadow: 0 10px 26px rgba(0,0,0,.34), 0 0 18px var(--film-blue-glow);
}
html[data-theme="cinematic"] .new-chat {
  background: linear-gradient(145deg, rgba(200,230,255,.10), rgba(255,255,255,.04)), rgba(8,12,20,.7);
  border-color: var(--film-edge); color: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
}
html[data-theme="cinematic"] .topbar {
  background: var(--topbar-bg);
  border-bottom-color: var(--film-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 30px rgba(25,83,126,.12);
}
html[data-theme="cinematic"] .model-pill,
html[data-theme="cinematic"] .login-button {
  background: rgba(10,16,26,.7); border-color: var(--film-edge); color: rgba(215,235,250,.86);
  backdrop-filter: blur(14px);
}
html[data-theme="cinematic"] .eyebrow { color: rgba(214,235,250,.92); }
html[data-theme="cinematic"] .eyebrow::before { background: var(--accent); box-shadow: 0 0 14px rgba(136,201,255,.6); }
html[data-theme="cinematic"] .preview-dot { box-shadow: 0 0 14px rgba(136,201,255,.66); }
html[data-theme="cinematic"] .empty-state h1 { color: #fff; text-shadow: 0 16px 36px rgba(0,0,0,.5), 0 0 32px var(--film-blue-glow); letter-spacing: -.04em; }
html[data-theme="cinematic"] .empty-copy { color: rgba(255,255,255,.66); }
html[data-theme="cinematic"] .starter {
  background: linear-gradient(145deg, rgba(224,242,255,.10), rgba(255,255,255,.024)), rgba(7,11,18,.62);
  border-color: var(--film-edge);
  color: rgba(248,250,253,.94);
  box-shadow: 0 0 26px var(--film-blue-glow), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}
html[data-theme="cinematic"] .starter:not(:disabled):hover {
  border-color: rgba(239,201,132,.34);
  background: linear-gradient(145deg, rgba(255,240,214,.10), rgba(255,255,255,.04)), rgba(11,14,22,.7);
  box-shadow: 0 0 30px var(--film-gold-glow), 0 18px 46px rgba(0,0,0,.3);
}
html[data-theme="cinematic"] .message-bubble {
  background: rgba(255,255,255,.085); color: rgba(255,255,255,.92); border-color: var(--film-edge);
  box-shadow: 0 0 18px var(--film-blue-glow), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(14px);
}
html[data-theme="cinematic"] .composer {
  background: linear-gradient(145deg, rgba(18,30,46,.8), rgba(8,11,17,.76));
  border-color: var(--composer-border);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 40px var(--film-blue-glow), 0 18px 44px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="cinematic"] .composer-wrap { background: linear-gradient(to bottom, transparent, rgba(4,7,13,.86) 34%, #04070d 76%) !important; }
html[data-theme="cinematic"] .composer-note { color: rgba(255,255,255,.38) !important; }

/* ---- PADIEM HOME — homepage continuity (padiem.net: cool gray/blue-gray atmospheric) ---- */
html[data-theme="padiem-home"] {
  color-scheme: light;
  --bg: #e6e9ee;
  --page-bg: #e6e9ee;
  --panel: rgba(255,255,255,.72);
  --sidebar: rgba(255,255,255,.62);
  --text: #1a2230;
  --muted: #5a6578;
  --line: rgba(26,34,48,.12);
  --input-border-strong: #767e8a;
  --accent: #3a7bd5;
  --accent-contrast: #0b0f14;
  --accent-soft: rgba(58,123,213,.10);
  --accent-strong: #2a5fa8;
  --gold: #c9a85c;
  --gold-soft: rgba(201,168,92,.12);
  --blue: #5aa0e6;
  --danger: #b3261e;
  --success: #14532d;
  --success-surface: rgba(34, 158, 94, 0.08);
  --success-border: rgba(34, 158, 94, 0.18);
  --danger-surface: rgba(220, 62, 62, 0.07);
  --danger-border: rgba(220, 62, 62, 0.16);
  --shadow: 0 18px 50px rgba(26,34,48,.10);
  --card-bg: rgba(255,255,255,.68);
  --card-border: rgba(26,34,48,.10);
  --composer-bg: rgba(255,255,255,.82);
  --composer-border: rgba(26,34,48,.13);
  --user-bubble-bg: #1a2230;
  --user-bubble-text: #ffffff;
  --assistant-surface-bg: rgba(255,255,255,.62);
  --focus-ring: rgba(58,123,213,.28);
  --topbar-bg: rgba(255,255,255,.55);
}

html[data-theme="padiem-home"] body {
  background:
    radial-gradient(circle at 64% 46%, rgba(90,160,230,.14), transparent 24%),
    radial-gradient(circle at 40% 52%, rgba(201,168,92,.09), transparent 26%),
    radial-gradient(circle at 72% 38%, rgba(90,160,230,.08), transparent 30%),
    radial-gradient(circle at 28% 62%, rgba(201,168,92,.05), transparent 34%),
    linear-gradient(135deg, #d2d8e4 0%, #e0e5ec 26%, #eef1f4 52%, #d5dbe6 100%);
  color: var(--text);
}
html[data-theme="padiem-home"] body::before {
  box-shadow: inset 0 0 180px 60px rgba(26,34,48,.06);
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%, rgba(26,34,48,.04)),
    radial-gradient(circle at 18% 50%, rgba(90,160,230,.06), transparent 36%);
}
html[data-theme="padiem-home"] body::after {
  opacity: .10;
  background-image:
    linear-gradient(rgba(26,34,48,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,34,48,.04) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px;
}
html[data-theme="padiem-home"] .app-shell::before {
  background: linear-gradient(90deg, #5aa0e6, rgba(26,34,48,.18), #c9a85c);
  opacity: .32;
}
html[data-theme="padiem-home"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,252,255,.58));
  border-right: 1px solid rgba(26,34,48,.08);
  border-top: 1px solid rgba(255,255,255,.6);
  box-shadow: 14px 0 44px rgba(26,34,48,.08), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: blur(20px) saturate(110%);
}
html[data-theme="padiem-home"] .brand { color: #1a2230; letter-spacing: .02em; font-weight: 600; }
html[data-theme="padiem-home"] .brand-mark,
html[data-theme="padiem-home"] .assistant-avatar {
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(26,34,48,.12);
  color: #1a2230;
  box-shadow: 0 6px 18px rgba(26,34,48,.08);
}
html[data-theme="padiem-home"] .brand-mark::after,
html[data-theme="padiem-home"] .assistant-avatar::after {
  background: rgba(90,160,230,.28);
}
html[data-theme="padiem-home"] .new-chat {
  background: rgba(255,255,255,.72); border-color: rgba(26,34,48,.12); color: #1a2230;
  box-shadow: 0 3px 10px rgba(26,34,48,.05);
  backdrop-filter: blur(12px);
}
html[data-theme="padiem-home"] .topbar {
  background: linear-gradient(180deg, rgba(255,255,255,.68), rgba(250,252,255,.45));
  border-bottom: 1px solid rgba(26,34,48,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 18px rgba(26,34,48,.06);
  backdrop-filter: blur(20px) saturate(115%);
}
html[data-theme="padiem-home"] .model-pill,
html[data-theme="padiem-home"] .login-button {
  background: rgba(255,255,255,.68); border-color: rgba(26,34,48,.12); color: #2a3446;
}
html[data-theme="padiem-home"] .eyebrow { color: #3a7bd5; letter-spacing: .14em; }
html[data-theme="padiem-home"] .eyebrow::before { background: #3a7bd5; box-shadow: 0 0 10px rgba(58,123,213,.32); }
html[data-theme="padiem-home"] .empty-state h1 { color: #1a2230; text-shadow: 0 6px 18px rgba(26,34,48,.08); }
html[data-theme="padiem-home"] .empty-copy { color: #5a6578; }
html[data-theme="padiem-home"] .starter {
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(250,252,255,.68));
  border: 1px solid rgba(26,34,48,.08);
  border-top: 1px solid rgba(255,255,255,.85);
  color: #1a2230;
  box-shadow: 0 10px 28px rgba(26,34,48,.07), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
}
html[data-theme="padiem-home"] .starter strong { color: #1a2230; }
html[data-theme="padiem-home"] .starter small { color: #5a6578; }
html[data-theme="padiem-home"] .starter-icon {
  background: rgba(26,34,48,.06); border: 1px solid rgba(26,34,48,.08); color: #3a4a62;
}
html[data-theme="padiem-home"] .message-bubble {
  background: var(--user-bubble-bg); color: var(--user-bubble-text);
  border-color: transparent;
  box-shadow: 0 4px 16px rgba(26,34,48,.10);
}
html[data-theme="padiem-home"] .assistant-content { color: #1e2a3a; }
html[data-theme="padiem-home"] .assistant-meta { color: #5a6578; }
html[data-theme="padiem-home"] .composer { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,252,255,.78)); border-color: rgba(26,34,48,.10); border-top: 1px solid rgba(255,255,255,.9); box-shadow: 0 14px 40px rgba(26,34,48,.09), inset 0 1px 0 rgba(255,255,255,.85); backdrop-filter: blur(18px); }
html[data-theme="padiem-home"] .composer-wrap { background: linear-gradient(to bottom, transparent, rgba(230,233,238,.84) 32%, var(--bg) 78%) !important; }
html[data-theme="padiem-home"] .composer-note { color: var(--muted) !important; }
/* PADIEM_HOME chat-state — override dark cinematic chat selectors */
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .message-bubble { background: var(--user-bubble-bg) !important; color: var(--user-bubble-text) !important; border-color: transparent !important; box-shadow: 0 4px 16px rgba(26,34,48,.10) !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .assistant-avatar { background: rgba(255,255,255,.72) !important; border: 1px solid rgba(26,34,48,.12) !important; color: #1a2230 !important; box-shadow: 0 6px 18px rgba(26,34,48,.08) !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .assistant-meta { color: var(--muted) !important; }
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .demo-label { background: rgba(255,255,255,.62) !important; border-color: rgba(26,34,48,.10) !important; color: var(--muted) !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .assistant-content { color: #1e2a3a !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .assistant-message::before { background: linear-gradient(to bottom, rgba(26,34,48,.12), rgba(26,34,48,.04), transparent) !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .composer { background: linear-gradient(180deg, rgba(255,255,255,.88), rgba(250,252,255,.78)) !important; border-color: rgba(26,34,48,.10) !important; box-shadow: 0 14px 40px rgba(26,34,48,.09), inset 0 1px 0 rgba(255,255,255,.85) !important; backdrop-filter: blur(18px) !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .composer-wrap { background: linear-gradient(to bottom, transparent, rgba(230,233,238,.84) 32%, var(--bg) 78%) !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .composer textarea { color: #1a2230 !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .composer textarea::placeholder { color: #7a869a !important; }
html[data-theme="padiem-home"] .app-shell[data-state="chat"] .composer-note { color: var(--muted) !important; }
/* Bright chat — assistant answer subtree.
   .rich-response (and answer-action / reference-note) hold an
   !important near-white color from padiem-surfaces.css, loaded via @import
   in padiem-cinematic-chat.css, so the parent .assistant-content alone was
   insufficient — the actual paragraph and button text stayed near-white on
   bright pages. Override the descendant that owns the visible glyphs with
   bright-theme tokens, scoped to active chat so DARK / CINEMATIC remain
   untouched. */
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-paragraph,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-heading,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-list,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-quote,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-source,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response a,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .answer-action,
html[data-theme="light"] .app-shell:is([data-state="chat"],[data-state="claw"]) .reference-note { color: #1e1e22 !important; }
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-paragraph,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-heading,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-list,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-quote,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response .rich-response-source,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .assistant-content .rich-response a,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .answer-action,
html[data-theme="padiem-home"] .app-shell:is([data-state="chat"],[data-state="claw"]) .reference-note { color: #1e2a3a !important; }
html[data-theme="padiem-home"] .composer textarea { color: #1a2230; }
html[data-theme="padiem-home"] .composer textarea::placeholder { color: #7a869a; }
html[data-theme="padiem-home"] .source-card,
html[data-theme="padiem-home"] .rich-block,
html[data-theme="padiem-home"] .output-card {
  background: rgba(255,255,255,.62) !important; border-color: rgba(26,34,48,.10) !important; color: #1a2230 !important;
  backdrop-filter: blur(10px);
}

/* ---- theme picker ---- */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  backdrop-filter: blur(12px);
}
.theme-picker-label {
  margin-right: 2px;
  padding-left: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.theme-option {
  min-width: 44px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.theme-option:hover { background: var(--accent-soft); color: var(--text); }
.theme-option[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
html[data-theme="light"] .theme-option[aria-pressed="true"] { background: var(--accent); color: #fff; }
html[data-theme="dark"] .theme-option[aria-pressed="true"] { background: #fff; color: #131417; border-color: #fff; box-shadow: none; }
html[data-theme="cinematic"] .theme-option[aria-pressed="true"] {
  background: linear-gradient(145deg, #eaf5ff, #bfe0ff);
  color: #04070d;
  border-color: rgba(136,201,255,.55);
  box-shadow: 0 0 16px rgba(136,201,255,.28);
}
html[data-theme="padiem-home"] .theme-option[aria-pressed="true"] { background: #1a2230; color: #fff; border-color: #1a2230; }
.theme-option:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

@media (max-width: 920px) {
  .theme-picker { gap: 4px; padding: 3px; }
  .theme-picker-label { display: none; }
  .theme-option { min-width: 44px; min-height: 36px; padding: 0 8px; font-size: 11px; }
}
@media (max-width: 620px) {
  .theme-picker { gap: 3px; }
  .theme-option { min-width: 40px; min-height: 36px; font-size: 10px; }
}
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; gap: 8px; min-height: auto; padding-block: 8px; }
  .theme-picker { order: 10; width: 100%; justify-content: space-between; gap: 4px; padding: 4px; }
  .theme-picker .theme-option { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 6px; }
}

/* ---- extensibility marker ---- */
/* Adding a new theme requires only:
 * 1) html[data-theme="new-name"] { --bg: ...; --text: ...; ... }
 * 2) optional per-theme surface overrides
 * No DOM duplication, no JS logic fork.
 */