/* ============================================
   THEME SYSTEM

   How it works:
   - :root in app.css defines the default theme (Midnight)
   - Each [data-theme] block overrides ONLY the color variables
   - Starfield bg stays black (#000), stars stay white across all dark themes
   - Daylight (light mode) hides starfield entirely
   - JS sets data-theme on <html> and saves to localStorage
   ============================================ */

/* â"€â"€ Midnight (Default) â"€â"€
   Values live in :root in app.css. This block is a reference only. */
:root[data-theme="midnight"] {
  /* All defaults â€" no overrides needed */
}

/* â"€â"€ Daylight (Light Mode) â"€â"€
   Warm light theme â€" soft white, washed red accent */
:root[data-theme="daylight"] {
  --bg: #f1efe9;
  --bg-secondary: rgba(252, 249, 244, 0.95);
  --bg-input: rgba(0, 0, 0, 0.03);
  --accent: #c84b4b;
  --accent-hover: #a93d3d;
  --accent-secondary: #e06060;
  --text: #1a1a1a;
  --text-muted: #737373;
  --text-dim: #a3a3a3;
  --text-inverse: #f8f5f1;
  --border: rgba(0, 0, 0, 0.08);

  --accent-05: rgba(200, 75, 75, 0.05);
  --accent-10: rgba(200, 75, 75, 0.1);
  --accent-15: rgba(200, 75, 75, 0.15);
  --accent-20: rgba(200, 75, 75, 0.2);
  --accent-30: rgba(200, 75, 75, 0.3);
  --accent-40: rgba(200, 75, 75, 0.4);
  --accent-50: rgba(200, 75, 75, 0.5);

  --error-10: rgba(220, 38, 38, 0.08);
  --error-20: rgba(220, 38, 38, 0.12);
  --error-30: rgba(220, 38, 38, 0.2);
  --success-20: rgba(22, 163, 74, 0.1);

  --user-bubble: rgba(200, 75, 75, 0.33);
  --user-accent: rgba(200, 75, 75, 0.38);
  --user-accent-hover: rgba(200, 75, 75, 0.25);
  --assistant-bubble: rgba(0, 0, 0, 0.11);

  --success: #16a34a;
  --warning: #d97706;
  --info: #2563eb;
  --recording: #dc2626;
  --error: #dc2626;
  --neutral: #737373;

  --star-color: #fff;

  --syntax-keyword: #7c3aed;
  --syntax-string: #16a34a;
  --syntax-comment: #a3a3a3;
  --syntax-number: #c84b4b;

  --black-20: rgba(0, 0, 0, 0.06);
  --black-40: rgba(0, 0, 0, 0.1);
}

/* â"€â"€ Ember â"€â"€
   Deep fire theme â€" dark navy base, crimson surfaces, amber/yellow accents
   Palette: #03071e #370617 #6a040f #9d0208 #d00000 #dc2f02 #e85d04 #f48c06 #faa307 #ffba08 */
:root[data-theme="ember"] {
  --bg: #03071e;
  --bg-secondary: rgba(55, 6, 23, 0.95);
  --bg-input: rgba(106, 4, 15, 0.3);
  --accent: #f48c06;
  --accent-hover: #faa307;
  --accent-secondary: #ffba08;
  --text: #fce8d0;
  --text-muted: #c8906a;
  --text-dim: #8a5a3a;
  --text-inverse: #03071e;
  --border: rgba(244, 140, 6, 0.15);

  --accent-05: rgba(244, 140, 6, 0.05);
  --accent-10: rgba(244, 140, 6, 0.1);
  --accent-15: rgba(244, 140, 6, 0.15);
  --accent-20: rgba(244, 140, 6, 0.2);
  --accent-30: rgba(244, 140, 6, 0.3);
  --accent-40: rgba(244, 140, 6, 0.4);
  --accent-50: rgba(244, 140, 6, 0.5);

  --error-10: rgba(208, 0, 0, 0.15);
  --error-20: rgba(208, 0, 0, 0.25);
  --error-30: rgba(208, 0, 0, 0.35);
  --success-20: rgba(74, 222, 128, 0.2);

  --user-bubble: rgba(157, 2, 8, 0.3);
  --user-accent: #9d0208;
  --user-accent-hover: #6a040f;
  --assistant-bubble: rgba(46, 33, 33, 0.98);

  --success: #4ade80;
  --warning: #ffba08;
  --info: #60a5fa;
  --recording: #d00000;
  --error: #d00000;
  --neutral: #8a5a3a;

  --star-color: #f48c06;

  --syntax-keyword: #faa307;
  --syntax-string: #ffba08;
  --syntax-comment: #6a040f;
  --syntax-number: #e85d04;
}

/* â"€â"€ Forest â"€â"€
   Deep earthy dark theme â€" dark woodland greens, muted sage accents
   Palette: #dad7cd #a3b18a #588157 #3a5a40 #344e41 */
:root[data-theme="forest"] {
  --bg: #131813;
  --bg-secondary: rgba(34, 44, 34, 0.95);
  --bg-input: rgba(52, 78, 65, 0.25);
  --accent: #a3b18a;
  --accent-hover: #dad7cd;
  --accent-secondary: #588157;
  --text: #dad7cd;
  --text-muted: #8a9a7a;
  --text-dim: #5a6e4a;
  --text-inverse: #1a1f1a;
  --border: rgba(163, 177, 138, 0.15);

  --accent-05: rgba(163, 177, 138, 0.05);
  --accent-10: rgba(163, 177, 138, 0.1);
  --accent-15: rgba(163, 177, 138, 0.15);
  --accent-20: rgba(163, 177, 138, 0.2);
  --accent-30: rgba(163, 177, 138, 0.3);
  --accent-40: rgba(163, 177, 138, 0.4);
  --accent-50: rgba(163, 177, 138, 0.5);

  --error-10: rgba(239, 68, 68, 0.1);
  --error-20: rgba(239, 68, 68, 0.2);
  --error-30: rgba(239, 68, 68, 0.3);
  --success-20: rgba(88, 129, 87, 0.25);

  --user-bubble: rgba(58, 90, 64, 0.3);
  --user-accent: #3a5a40;
  --user-accent-hover: #344e41;
  --assistant-bubble: rgb(69 52 33 / 65%);

  --success: #a3b18a;
  --warning: #d4a746;
  --info: #60a5fa;
  --recording: #ff3366;
  --error: #ef4444;
  --neutral: #6b7280;

  --star-color: #a3b18a;

  --syntax-keyword: #dad7cd;
  --syntax-string: #a3b18a;
  --syntax-comment: #3a5a40;
  --syntax-number: #588157;
}

/* â"€â"€ Noir â"€â"€
   Monochrome grayscale â€" no color accent */
:root[data-theme="noir"] {
  --bg: #000;
  --bg-secondary: rgba(20, 20, 20, 0.95);
  --bg-input: rgba(30, 30, 30, 0.8);
  --accent: #a0a0a0;
  --accent-hover: #c0c0c0;
  --accent-secondary: #808080;
  --text: #e8e8e8;
  --text-muted: #909090;
  --text-dim: #707070;
  --text-inverse: #0a0a0a;
  --border: var(--accent-15);

  --accent-05: rgba(160, 160, 160, 0.05);
  --accent-10: rgba(160, 160, 160, 0.1);
  --accent-15: rgba(160, 160, 160, 0.15);
  --accent-20: rgba(160, 160, 160, 0.2);
  --accent-30: rgba(160, 160, 160, 0.3);
  --accent-40: rgba(160, 160, 160, 0.4);
  --accent-50: rgba(160, 160, 160, 0.5);

  --error-10: rgba(239, 68, 68, 0.1);
  --error-20: rgba(239, 68, 68, 0.2);
  --error-30: rgba(239, 68, 68, 0.3);
  --success-20: rgba(74, 222, 128, 0.2);

  --user-bubble: rgb(182 182 182 / 69%);
  --user-accent: #404040;
  --user-accent-hover: #333333;
  --assistant-bubble: #212324cf;

  --success: #4ade80;
  --warning: #fbbf24;
  --info: #60a5fa;
  --recording: #ff3366;
  --error: #ef4444;
  --neutral: #6b7280;

  --star-color: #fff;

  --syntax-keyword: #b0b0b0;
  --syntax-string: #909090;
  --syntax-comment: #505050;
  --syntax-number: #c0c0c0;
}

/* ============================================
   DAYLIGHT (LIGHT MODE) OVERRIDES
   These need component-level selectors since
   light mode changes more than just colors.
   ============================================ */

/* Hide starfield in light themes */
:root[data-theme="daylight"] #stars,
:root[data-theme="forest"] #stars {
  display: none;
}

/* Light mode needs opaque .app background */
:root[data-theme="daylight"] .app {
  background: var(--bg);
}

/* Message bubbles need subtle borders in light mode */
:root[data-theme="daylight"] .assistant-message .message-content {
  border: 1px solid var(--border);
}

:root[data-theme="daylight"] .user-message .message-content {
  border: 1px solid rgba(200, 75, 75, 0.1);
}

/* Override the hardcoded purple border on user bubbles */
:root[data-theme="daylight"] .message.user {
  border-color: rgba(200, 75, 75, 0.12);
}

/* Panels need subtle shadow instead of glow */
:root[data-theme="daylight"] .settings-panel,
:root[data-theme="daylight"] .panel,
:root[data-theme="daylight"] .dev-panel {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  border-color: rgba(0, 0, 0, 0.1);
}

/* Input fields need visible borders */
:root[data-theme="daylight"] .setting-input,
:root[data-theme="daylight"] .setting-select,
:root[data-theme="daylight"] #messageInput {
  border-color: rgba(0, 0, 0, 0.1);
}

/* Header â€" barely-there warm tint */
:root[data-theme="daylight"] .main-header {
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid var(--border);
}

/* Model selector chevron — dark stroke for light backgrounds */
:root[data-theme="daylight"] .model-selector {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Code blocks â€" subtle warm gray */
:root[data-theme="daylight"] pre,
:root[data-theme="daylight"] code {
  background: rgba(0, 0, 0, 0.035);
}

:root[data-theme="daylight"] pre {
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ============================================
   EMBER OVERRIDES â€" Rising ember sparks
   ============================================ */
:root[data-theme="ember"] .star {
  animation: ember-rise var(--duration) linear infinite !important;
  animation-duration: calc(var(--duration) * 4) !important;
}

@keyframes ember-rise {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
  5% {
    opacity: var(--opacity);
    transform: translateY(-10px) translateX(2px) scale(1);
  }
  25% {
    opacity: var(--opacity);
    transform: translateY(-50px) translateX(8px) scale(0.9);
  }
  50% {
    opacity: calc(var(--opacity) * 0.7);
    transform: translateY(-100px) translateX(-3px) scale(0.7);
  }
  75% {
    opacity: calc(var(--opacity) * 0.3);
    transform: translateY(-150px) translateX(10px) scale(0.4);
  }
  95% {
    opacity: 0;
    transform: translateY(-180px) translateX(5px) scale(0.2);
  }
  100% {
    opacity: 0;
    transform: translateY(0) translateX(0) scale(0.8);
  }
}

/* ============================================
   EMBER (DARK MODE) OVERRIDES
   Ember uses a non-black bg, so starfield stars
   need to be amber-tinted (handled via --star-color)
   ============================================ */

/* ============================================
   THEME PICKER â€" Visual theme selector
   Replaces the plain <select> dropdown
   ============================================ */

.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.theme-picker-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px 5px 6px;
  border-radius: 8px;
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  user-select: none;
}

.theme-picker-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.theme-picker-item.active {
  border-color: var(--accent);
  background: var(--accent-10);
}

.theme-picker-item[data-premium-locked="true"] {
  opacity: 0.45;
  cursor: default;
}

.theme-picker-item[data-premium-locked="true"]:hover {
  background: rgba(255, 255, 255, 0.04);
}

.theme-picker-swatch {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-picker-name {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.theme-picker-item.active .theme-picker-name {
  color: var(--text);
  font-weight: 600;
}

.theme-picker-lock {
  font-size: 0.6rem;
  opacity: 0.6;
}


/* ============================================
   PHOSPHOR
   CRT terminal aesthetic â€" near-black base, neon green accent,
   animated film grain overlay replacing the starfield
   ============================================ */
:root[data-theme="phosphor"] {
  --bg: #0a0a0f;
  --bg-secondary: rgba(10, 18, 10, 0.97);
  --bg-input: rgba(0, 30, 0, 0.6);
  --accent: #39ff14;
  --accent-hover: #57ff3a;
  --accent-secondary: #00c800;
  --text: #d4f0c8;
  --text-muted: #7ab868;
  --text-dim: #4a7a3a;
  --text-inverse: #0a0a0f;
  --border: rgba(57, 255, 20, 0.12);

  --accent-05: rgba(57, 255, 20, 0.05);
  --accent-10: rgba(57, 255, 20, 0.1);
  --accent-15: rgba(57, 255, 20, 0.15);
  --accent-20: rgba(57, 255, 20, 0.2);
  --accent-30: rgba(57, 255, 20, 0.3);
  --accent-40: rgba(57, 255, 20, 0.4);
  --accent-50: rgba(57, 255, 20, 0.5);

  --error-10: rgba(255, 68, 68, 0.1);
  --error-20: rgba(255, 68, 68, 0.2);
  --error-30: rgba(255, 68, 68, 0.3);
  --success-20: rgba(57, 255, 20, 0.2);

  --user-bubble: rgba(0, 60, 0, 0.5);
  --user-accent: #004d00;
  --user-accent-hover: #003300;
  --assistant-bubble: rgba(10, 22, 10, 0.95);

  --success: #39ff14;
  --warning: #fbbf24;
  --info: #60a5fa;
  --recording: #ff4444;
  --error: #ff4444;
  --neutral: #4a7a3a;

  --star-color: transparent;

  --syntax-keyword: #57ff3a;
  --syntax-string: #a8ff80;
  --syntax-comment: #3a5a2a;
  --syntax-number: #39ff14;
}

/* Phosphor: hide stars, add grain overlay */
:root[data-theme="phosphor"] #stars {
  display: none;
}

:root[data-theme="phosphor"] body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 250px 250px;
  animation: phosphor-grain 0.4s steps(1) infinite;
}

@keyframes phosphor-grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -2%); }
  20%  { transform: translate(2%, 4%); }
  30%  { transform: translate(-4%, 1%); }
  40%  { transform: translate(3%, -3%); }
  50%  { transform: translate(-1%, 4%); }
  60%  { transform: translate(4%, 2%); }
  70%  { transform: translate(-2%, -4%); }
  80%  { transform: translate(3%, 3%); }
  90%  { transform: translate(-3%, 1%); }
  100% { transform: translate(1%, -2%); }
}

/* Phosphor: scanline effect on top of grain */
:root[data-theme="phosphor"] .app::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  animation: phosphor-lines 0.15s linear infinite;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.10) 3px,
    rgba(0, 0, 0, 0.10) 4px
  );
}

/* Phosphor: subtle green glow on panels */
:root[data-theme="phosphor"] .settings-panel,
:root[data-theme="phosphor"] .panel {
  box-shadow: 0 0 30px rgba(57, 255, 20, 0.04);
}

/* Respect reduced motion for grain */
@keyframes phosphor-lines {
  from { background-position: 0 0; }
  to   { background-position: 0 4px; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="phosphor"] body::after {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="phosphor"] .app::before {
    animation: none;
  }
}


/* ============================================
   DUSK
   The moment between day and night â€"
   deep indigo base, rose/coral accent, soft lavender stars
   ============================================ */
:root[data-theme="dusk"] {
  --bg: #0e0818;
  --bg-secondary: rgba(18, 8, 28, 0.97);
  --bg-input: rgba(30, 10, 35, 0.6);
  --accent: #ff6b6b;
  --accent-hover: #ff8e8e;
  --accent-secondary: #e8435a;
  --text: #fce8e2;
  --text-muted: #c89090;
  --text-dim: #7a5060;
  --text-inverse: #0e0818;
  --border: rgba(255, 107, 107, 0.15);

  --accent-05: rgba(255, 107, 107, 0.05);
  --accent-10: rgba(255, 107, 107, 0.1);
  --accent-15: rgba(255, 107, 107, 0.15);
  --accent-20: rgba(255, 107, 107, 0.2);
  --accent-30: rgba(255, 107, 107, 0.3);
  --accent-40: rgba(255, 107, 107, 0.4);
  --accent-50: rgba(255, 107, 107, 0.5);

  --error-10: rgba(239, 68, 68, 0.1);
  --error-20: rgba(239, 68, 68, 0.2);
  --error-30: rgba(239, 68, 68, 0.3);
  --success-20: rgba(74, 222, 128, 0.15);

  --user-bubble: rgba(255, 107, 107, 0.18);
  --user-accent: #8a2040;
  --user-accent-hover: #6a1030;
  --assistant-bubble: rgb(18 8 30 / 95%);

  --success: #4ade80;
  --warning: #fbbf24;
  --info: #60a5fa;
  --recording: #ef4444;
  --error: #ef4444;
  --neutral: #7a5060;

  --star-color: rgba(255, 180, 160, 0.8);

  --syntax-keyword: #ff6b6b;
  --syntax-string: #ffb3b3;
  --syntax-comment: #5a3050;
  --syntax-number: #e8435a;
}


/* ============================================
   SLATE
   Brutalist focus mode â€" cool blue-gray matte,
   no stars, no particles, no distractions
   ============================================ */
:root[data-theme="slate"] {
  --bg: #0f1318;
  --bg-secondary: rgba(16, 22, 32, 0.97);
  --bg-input: rgba(20, 30, 44, 0.7);
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-secondary: #2563eb;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --text-inverse: #0f1318;
  --border: rgba(59, 130, 246, 0.15);

  --accent-05: rgba(59, 130, 246, 0.05);
  --accent-10: rgba(59, 130, 246, 0.1);
  --accent-15: rgba(59, 130, 246, 0.15);
  --accent-20: rgba(59, 130, 246, 0.2);
  --accent-30: rgba(59, 130, 246, 0.3);
  --accent-40: rgba(59, 130, 246, 0.4);
  --accent-50: rgba(59, 130, 246, 0.5);

  --error-10: rgba(239, 68, 68, 0.1);
  --error-20: rgba(239, 68, 68, 0.2);
  --error-30: rgba(239, 68, 68, 0.3);
  --success-20: rgba(74, 222, 128, 0.15);

  --user-bubble: rgba(30, 58, 120, 0.35);
  --user-accent: #1e3a78;
  --user-accent-hover: #152d60;
  --assistant-bubble: rgb(33 43 58 / 95%);

  --success: #4ade80;
  --warning: #fbbf24;
  --info: #60a5fa;
  --recording: #ef4444;
  --error: #ef4444;
  --neutral: #64748b;

  --star-color: transparent;

  --syntax-keyword: #60a5fa;
  --syntax-string: #86efac;
  --syntax-comment: #475569;
  --syntax-number: #93c5fd;
}

/* Slate: hide stars â€" pure matte surface */
:root[data-theme="slate"] #stars {
  display: none;
}

/* Slate: kill all transitions â€" sharp and immediate */
:root[data-theme="slate"] * {
  transition-duration: 0.08s !important;
}


/* ============================================
   PER-THEME ASSISTANT BUBBLE TEXT COLORS
   ============================================ */

:root[data-theme="forest"] .assistant-message .message-content {
  color: #e6dfc6;
}

:root[data-theme="dusk"] .assistant-message .message-content {
  color: #e8d9fb;
}

:root[data-theme="slate"] .assistant-message .message-content {
  color: #dde6f3;
}


/* ============================================
   NOIR - Film grain overlay
   Classic black & white film stock texture
   ============================================ */
:root[data-theme="noir"] body::after {
  content: '';
  position: fixed;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.24;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n' x='0' y='0'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='1'/></svg>");
  background-size: 200px 200px;
  animation: noir-grain-live 0.18s steps(1) infinite;
    mix-blend-mode: screen;
}

@keyframes noir-grain-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1%, 2%); }
  100% { transform: translate(2%, -1%); }
}

@keyframes noir-grain-live {
  0%   { transform: translate(0%, 0%); }
  10%  { transform: translate(-0.8%, -0.5%); }
  20%  { transform: translate(0.6%, 0.9%); }
  30%  { transform: translate(-0.5%, 0.7%); }
  40%  { transform: translate(0.9%, -0.6%); }
  50%  { transform: translate(-0.7%, 0.8%); }
  60%  { transform: translate(0.5%, -0.9%); }
  70%  { transform: translate(-0.9%, 0.5%); }
  80%  { transform: translate(0.7%, 0.6%); }
  90%  { transform: translate(-0.6%, -0.8%); }
  100% { transform: translate(0.8%, 0.4%); }
}

@keyframes noir-grain-live {
  0%   { transform: translate(0%, 0%); }
  10%  { transform: translate(-0.8%, -0.5%); }
  20%  { transform: translate(0.6%, 0.9%); }
  30%  { transform: translate(-0.5%, 0.7%); }
  40%  { transform: translate(0.9%, -0.6%); }
  50%  { transform: translate(-0.7%, 0.8%); }
  60%  { transform: translate(0.5%, -0.9%); }
  70%  { transform: translate(-0.9%, 0.5%); }
  80%  { transform: translate(0.7%, 0.6%); }
  90%  { transform: translate(-0.6%, -0.8%); }
  100% { transform: translate(0.8%, 0.4%); }
}

@keyframes noir-grain {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-4%, -2%); }
  20%  { transform: translate(3%, 5%); }
  30%  { transform: translate(-5%, 2%); }
  40%  { transform: translate(4%, -4%); }
  50%  { transform: translate(-2%, 5%); }
  60%  { transform: translate(5%, 1%); }
  70%  { transform: translate(-3%, -5%); }
  80%  { transform: translate(4%, 4%); }
  90%  { transform: translate(-4%, 2%); }
  100% { transform: translate(2%, -3%); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="noir"] body::after {
    animation: none;
  }
}


/* ============================================
   SESSION SWITCHER BAR - match theme base bg, no effects
   ============================================ */
@media (max-width: 1023px) {
  .split-primary-header {
    border-top: 1px solid var(--border) !important;
  }
}

.split-primary-header,
.split-secondary-header {
  background: transparent !important;
  position: relative;
  z-index: 2;
}


/* ============================================
   NOIR - Vintage film effects
   Stars hidden. Grain stays. Adding:
   vignette + vertical scratches + dust specks
   ============================================ */

/* Hide stars - grain is the texture */
:root[data-theme="noir"] #stars {
  display: none;
}

/* Vignette - dark edges, classic film framing */
:root[data-theme="noir"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(
    ellipse at 50% 45%,
    transparent 38%,
    rgba(0, 0, 0, 0.45) 75%,
    rgba(0, 0, 0, 0.75) 100%
  );
}

  12%  { opacity: 1; }
  13%  { opacity: 0; }
  27%  { opacity: 0; }
  28%  { opacity: 1; background-position: 32% 0, 71% 0, 88% 0; }
  41%  { opacity: 1; }
  42%  { opacity: 0; }
  55%  { opacity: 0; }
  56%  { opacity: 1; background-position: 9% 0, 54% 0, 76% 0; }
  69%  { opacity: 1; }
  70%  { opacity: 0; }
  83%  { opacity: 0; }
  84%  { opacity: 1; background-position: 22% 0, 68% 0, 84% 0; }
  100% { opacity: 1; }
}

  100% { transform: translateY(-400px); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="noir"] body::before {
    animation: none;
  }
}


/* Noir - full grayscale + contrast, classic B&W film */
:root[data-theme="noir"] .app {
  filter: grayscale(100%) contrast(1.05);
}


/* Noir - header sits above grain layer */
:root[data-theme="noir"] .header {
  position: relative;
  z-index: 2;
  isolation: isolate;
  background: var(--bg);
}

:root[data-theme="noir"] .bottom-dock {
  position: relative;
  z-index: 2;
  background: var(--bg);
}


/* Phosphor - CRT sweep beam traveling down the screen */
:root[data-theme="phosphor"] .app::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: -420px;
  height: 420px;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(57, 255, 20, 0.02) 20%,
    rgba(57, 255, 20, 0.04) 50%,
    rgba(57, 255, 20, 0.02) 80%,
    transparent
  );
  animation: phosphor-sweep 6s linear infinite;
}

@keyframes phosphor-sweep {
  from { transform: translateY(0); }
  to   { transform: translateY(calc(100vh + 420px)); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="phosphor"] .app::after {
    animation: none;
  }
}


/* Phosphor - RGB chromatic aberration split (real channel separation via SVG filters) */
:root[data-theme="phosphor"] .app {
  animation:
    phosphor-rgb-a 20s steps(1) infinite,
    phosphor-rgb-b 27s steps(1) infinite;
}

@keyframes phosphor-rgb-a {
  0%, 94%, 96%, 100% { filter: none; transform: none; }
  95%  { filter: url(#ca-lg); transform: skewX(-2deg) scaleX(1.015); }
}
  89%  { filter: url(#ca-md); transform: skewX(-2deg) scaleX(1.015); }
  90%  { filter: url(#ca-sm); transform: skewX(1.5deg) scaleX(0.99); }
  91%  { filter: none; transform: none; }
}
  89%  { filter: url(#ca-md); }
  90%  { filter: url(#ca-sm); }
  91%  { filter: none; }
}
  86%  { filter: url(#ca-md); }
  87%  { filter: url(#ca-sm); }
  88%  { filter: none; }
  89%  { filter: url(#ca-lg); }
  90%  { filter: url(#ca-sm); }
  91%  { filter: none; }
}

@keyframes phosphor-rgb-b {
  0%, 87%, 89%, 100% { filter: none; transform: none; }
  88%  { filter: url(#ca-md); transform: skewX(2deg) scaleX(0.988); }
}
  83%  { filter: url(#ca-lg); transform: skewX(2.5deg) scaleX(0.985); }
  84%  { filter: url(#ca-md); transform: skewX(-1deg) scaleX(1.01); }
  85%  { filter: none; transform: none; }
}
  83%  { filter: url(#ca-lg); }
  84%  { filter: url(#ca-md); }
  85%  { filter: none; }
}
  79%  { filter: url(#ca-lg); }
  80%  { filter: url(#ca-sm); }
  81%  { filter: none; }
  82%  { filter: url(#ca-md); }
  83%  { filter: url(#ca-lg); }
  84%  { filter: none; }
}

@keyframes phosphor-distort-a {
  0%, 88%, 100% { transform: none; }
  89%  { transform: skewX(-2deg) scaleX(1.015); }
  90%  { transform: skewX(1.5deg) scaleX(0.99); }
  91%  { transform: none; }
}

@keyframes phosphor-distort-b {
  0%, 82%, 100% { transform: none; }
  83%  { transform: skewX(2.5deg) scaleX(0.985); }
  84%  { transform: skewX(-1deg) scaleX(1.01); }
  85%  { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="phosphor"] .app {
    animation: none;
  }
}


/* ============================================
   DUSK - City lights coming on, last warmth at the horizon
   ============================================ */

/* Multi-zone sky gradient - navy top, plum mid, amber glow at horizon */
:root[data-theme="dusk"] #stars {
  background: linear-gradient(
    to bottom,
    #08050f 0%,
    #0e0818 15%,
    #180830 35%,
    #2a0830 55%,
    #3a0828 72%,
    #4a1020 88%,
    #3a1218 100%
  );
}

/* Amber horizon glow - warmth rising from below */
:root[data-theme="dusk"] #stars::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 35%;
  background: linear-gradient(
    to top,
    rgba(200, 40, 80, 0.22) 0%,
    rgba(160, 30, 60, 0.12) 40%,
    transparent 100%
  );
  pointer-events: none;
}

/* City lights - warm white stars clustered toward lower half */
:root[data-theme="dusk"] .star {
  background: rgba(255, 180, 160, 0.9) !important;
  box-shadow: 0 0 4px 2px rgba(255, 100, 120, 0.25);
}

/* Fade out stars in upper 40% - sky is still dark up top, lights are below */
:root[data-theme="dusk"] .star {
  opacity: calc(var(--opacity) * (1 - (var(--top, 50) / 100) * 0.6));
}

/* Sparse - only every 4th star visible */
:root[data-theme="dusk"] #stars .star:not(:nth-child(4n)) {
  display: none;
}

/* Subtle warm vignette framing the scene */
:root[data-theme="dusk"] body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 40%,
    rgba(10, 8, 20, 0.4) 80%,
    rgba(8, 5, 15, 0.65) 100%
  );
}

/* Assistant bubble text - warm off-white */
:root[data-theme="dusk"] .assistant-message .message-content {
  color: #f2d8e0;
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme="dusk"] .star {
    animation: none !important;
    opacity: 0.3;
  }
}


/* Noir - links: bright white + underline since grayscale kills color */
:root[data-theme="noir"] .app a {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
}

:root[data-theme="noir"] .app a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.9);
}

/* Noir - wordmark: force pure white since parent grayscale kills color */
:root[data-theme="noir"] .header-wordmark {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}