/* =========================================================================
   Jarvis Themes V1 (+ V89 Scene-Assets für Halloween-Pilot)
   Load order: style.css → design.css → themes.css
   Applied via [data-theme=…] on <html>, plus [data-pattern], [data-button],
   [data-font], [data-effects] on <body>.
   ========================================================================= */

/* =========================================================================
   V89 THEME SCENES: echte SVG-Illustrationen als Vollbild-Hintergrund
   Layering:
     - html[data-theme=X] → SVG als background-image (fixed)
     - #app, main, #auth-screen → transparent damit Szene durchscheint
     - Cards/Sidebar → semi-transparent + backdrop-blur
   ========================================================================= */

/* Alle Scene-Themes: BG-Layer + Verdunkelung */
html[data-theme="halloween"]  { background: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.7)), url('/theme-assets/halloween/scene.svg?v=3')  center/cover no-repeat fixed, #050301 !important; }
html[data-theme="blood-moon"] { background: linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.7)), url('/theme-assets/blood-moon/scene.svg?v=1') center/cover no-repeat fixed, #050000 !important; }
html[data-theme="ghost"]      { background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.7)), url('/theme-assets/ghost/scene.svg?v=1')      center/cover no-repeat fixed, #08080c !important; }
html[data-theme="haunted"]    { background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.6)), url('/theme-assets/haunted/scene.svg?v=1')    center/cover no-repeat fixed, #020604 !important; }
html[data-theme="witch-hour"] { background: linear-gradient(rgba(10,0,20,.55),rgba(10,0,20,.7)), url('/theme-assets/witch-hour/scene.svg?v=1') center/cover no-repeat fixed, #0a0018 !important; }
html[data-theme="cyberpunk"]  { background: linear-gradient(rgba(0,0,20,.45),rgba(0,0,10,.6)), url('/theme-assets/cyberpunk/scene.svg?v=1') center/cover no-repeat fixed, #0a001a !important; }
html[data-theme="vaporwave"]  { background: linear-gradient(rgba(10,0,30,.5),rgba(10,0,30,.65)), url('/theme-assets/vaporwave/scene.svg?v=1') center/cover no-repeat fixed, #150525 !important; }
html[data-theme="sunset"]     { background: linear-gradient(rgba(20,5,15,.5),rgba(20,5,15,.65)), url('/theme-assets/sunset/scene.svg?v=1')  center/cover no-repeat fixed, #1a0810 !important; }
html[data-theme="nordic"]     { background: linear-gradient(rgba(5,10,20,.55),rgba(5,10,20,.7)), url('/theme-assets/nordic/scene.svg?v=1')  center/cover no-repeat fixed, #0a1424 !important; }
html[data-theme="miami"]      { background: linear-gradient(rgba(5,15,25,.5), rgba(5,15,25,.65)), url('/theme-assets/miami/scene.svg?v=1')  center/cover no-repeat fixed, #0a1a24 !important; }

/* Alle Scene-Themes: gemeinsame Overrides */
html[data-theme="halloween"] body,  html[data-theme="blood-moon"] body,
html[data-theme="ghost"] body,      html[data-theme="haunted"] body,
html[data-theme="witch-hour"] body, html[data-theme="cyberpunk"] body,
html[data-theme="vaporwave"] body,  html[data-theme="sunset"] body,
html[data-theme="nordic"] body,     html[data-theme="miami"] body {
  background: transparent !important;
}
html[data-theme="halloween"] #app, html[data-theme="halloween"] .workspace, html[data-theme="halloween"] main, html[data-theme="halloween"] #auth-screen, html[data-theme="halloween"] .content-view,
html[data-theme="blood-moon"] #app, html[data-theme="blood-moon"] .workspace, html[data-theme="blood-moon"] main, html[data-theme="blood-moon"] #auth-screen, html[data-theme="blood-moon"] .content-view,
html[data-theme="ghost"] #app, html[data-theme="ghost"] .workspace, html[data-theme="ghost"] main, html[data-theme="ghost"] #auth-screen, html[data-theme="ghost"] .content-view,
html[data-theme="haunted"] #app, html[data-theme="haunted"] .workspace, html[data-theme="haunted"] main, html[data-theme="haunted"] #auth-screen, html[data-theme="haunted"] .content-view,
html[data-theme="witch-hour"] #app, html[data-theme="witch-hour"] .workspace, html[data-theme="witch-hour"] main, html[data-theme="witch-hour"] #auth-screen, html[data-theme="witch-hour"] .content-view,
html[data-theme="cyberpunk"] #app, html[data-theme="cyberpunk"] .workspace, html[data-theme="cyberpunk"] main, html[data-theme="cyberpunk"] #auth-screen, html[data-theme="cyberpunk"] .content-view,
html[data-theme="vaporwave"] #app, html[data-theme="vaporwave"] .workspace, html[data-theme="vaporwave"] main, html[data-theme="vaporwave"] #auth-screen, html[data-theme="vaporwave"] .content-view,
html[data-theme="sunset"] #app, html[data-theme="sunset"] .workspace, html[data-theme="sunset"] main, html[data-theme="sunset"] #auth-screen, html[data-theme="sunset"] .content-view,
html[data-theme="nordic"] #app, html[data-theme="nordic"] .workspace, html[data-theme="nordic"] main, html[data-theme="nordic"] #auth-screen, html[data-theme="nordic"] .content-view,
html[data-theme="miami"] #app, html[data-theme="miami"] .workspace, html[data-theme="miami"] main, html[data-theme="miami"] #auth-screen, html[data-theme="miami"] .content-view {
  background-color: transparent !important;
}
/* Alte Emoji-Effekte auf body::before/::after ausschalten für alle Scene-Themes */
html[data-theme="halloween"] body::before, html[data-theme="halloween"] body::after,
html[data-theme="blood-moon"] body::before, html[data-theme="blood-moon"] body::after,
html[data-theme="ghost"] body::before, html[data-theme="ghost"] body::after,
html[data-theme="haunted"] body::before, html[data-theme="haunted"] body::after,
html[data-theme="witch-hour"] body::before, html[data-theme="witch-hour"] body::after,
html[data-theme="cyberpunk"] body::before, html[data-theme="cyberpunk"] body::after,
html[data-theme="vaporwave"] body::before, html[data-theme="vaporwave"] body::after,
html[data-theme="sunset"] body::before, html[data-theme="sunset"] body::after,
html[data-theme="nordic"] body::before, html[data-theme="nordic"] body::after,
html[data-theme="miami"] body::before, html[data-theme="miami"] body::after {
  content: none !important;
  background: none !important;
  animation: none !important;
}
/* Glass-Look für Cards damit Scene durchscheint */
html[data-theme="halloween"] .sidebar, html[data-theme="halloween"] .workspace > header, html[data-theme="halloween"] .dash-card, html[data-theme="halloween"] .suggestion-card, html[data-theme="halloween"] .message-form, html[data-theme="halloween"] .primary-nav button, html[data-theme="halloween"] .conversation-search,
html[data-theme="blood-moon"] .sidebar, html[data-theme="blood-moon"] .workspace > header, html[data-theme="blood-moon"] .dash-card, html[data-theme="blood-moon"] .suggestion-card, html[data-theme="blood-moon"] .message-form, html[data-theme="blood-moon"] .primary-nav button, html[data-theme="blood-moon"] .conversation-search,
html[data-theme="ghost"] .sidebar, html[data-theme="ghost"] .workspace > header, html[data-theme="ghost"] .dash-card, html[data-theme="ghost"] .suggestion-card, html[data-theme="ghost"] .message-form, html[data-theme="ghost"] .primary-nav button, html[data-theme="ghost"] .conversation-search,
html[data-theme="haunted"] .sidebar, html[data-theme="haunted"] .workspace > header, html[data-theme="haunted"] .dash-card, html[data-theme="haunted"] .suggestion-card, html[data-theme="haunted"] .message-form, html[data-theme="haunted"] .primary-nav button, html[data-theme="haunted"] .conversation-search,
html[data-theme="witch-hour"] .sidebar, html[data-theme="witch-hour"] .workspace > header, html[data-theme="witch-hour"] .dash-card, html[data-theme="witch-hour"] .suggestion-card, html[data-theme="witch-hour"] .message-form, html[data-theme="witch-hour"] .primary-nav button, html[data-theme="witch-hour"] .conversation-search,
html[data-theme="cyberpunk"] .sidebar, html[data-theme="cyberpunk"] .workspace > header, html[data-theme="cyberpunk"] .dash-card, html[data-theme="cyberpunk"] .suggestion-card, html[data-theme="cyberpunk"] .message-form, html[data-theme="cyberpunk"] .primary-nav button, html[data-theme="cyberpunk"] .conversation-search,
html[data-theme="vaporwave"] .sidebar, html[data-theme="vaporwave"] .workspace > header, html[data-theme="vaporwave"] .dash-card, html[data-theme="vaporwave"] .suggestion-card, html[data-theme="vaporwave"] .message-form, html[data-theme="vaporwave"] .primary-nav button, html[data-theme="vaporwave"] .conversation-search,
html[data-theme="sunset"] .sidebar, html[data-theme="sunset"] .workspace > header, html[data-theme="sunset"] .dash-card, html[data-theme="sunset"] .suggestion-card, html[data-theme="sunset"] .message-form, html[data-theme="sunset"] .primary-nav button, html[data-theme="sunset"] .conversation-search,
html[data-theme="nordic"] .sidebar, html[data-theme="nordic"] .workspace > header, html[data-theme="nordic"] .dash-card, html[data-theme="nordic"] .suggestion-card, html[data-theme="nordic"] .message-form, html[data-theme="nordic"] .primary-nav button, html[data-theme="nordic"] .conversation-search,
html[data-theme="miami"] .sidebar, html[data-theme="miami"] .workspace > header, html[data-theme="miami"] .dash-card, html[data-theme="miami"] .suggestion-card, html[data-theme="miami"] .message-form, html[data-theme="miami"] .primary-nav button, html[data-theme="miami"] .conversation-search {
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  background-color: rgba(10, 10, 15, 0.68) !important;
}
/* Effekt-Off: alle Scene-Bilder verstecken */
body[data-fx-level="off"] html[data-theme="halloween"], body[data-fx-level="off"] html[data-theme="blood-moon"], body[data-fx-level="off"] html[data-theme="ghost"], body[data-fx-level="off"] html[data-theme="haunted"], body[data-fx-level="off"] html[data-theme="witch-hour"], body[data-fx-level="off"] html[data-theme="cyberpunk"], body[data-fx-level="off"] html[data-theme="vaporwave"], body[data-fx-level="off"] html[data-theme="sunset"], body[data-fx-level="off"] html[data-theme="nordic"], body[data-fx-level="off"] html[data-theme="miami"] {
  background-image: none !important;
  background: var(--bg) !important;
}


/* ------------------ Google fonts for optional font styles ---------------- */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600&family=Orbitron:wght@500;700&display=swap');

/* ============================================================
   THEMES  (all override the base tokens from design.css)
   ============================================================ */

/* Per-account light surface for Mike's admin account. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#ffffff; --bg-2:#f7f7f7; --panel:#ffffff; --elevated:#f8f8f8; --raised:#eeeeee;
  --border:#dedede; --border-strong:#c8c8c8;
  --text:#111111; --text-2:#4b4b4b; --muted:#747474; --muted-2:#999999;
  --accent:#111111; --accent-2:#333333; --accent-soft:rgba(0,0,0,.08); --accent-glow:rgba(0,0,0,.16);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 6px 20px rgba(0,0,0,.08); --shadow-lg:0 24px 60px rgba(0,0,0,.12);
}
:root[data-theme="light"] body,:root[data-theme="light"] #app,:root[data-theme="light"] .workspace { background:var(--bg) !important; color:var(--text) !important; }
:root[data-theme="light"] .sidebar { background:#ffffff !important; border-color:#dedede !important; color:#111111 !important; }
:root[data-theme="light"] .sidebar-brand strong,:root[data-theme="light"] .primary-nav button,:root[data-theme="light"] .category-link,:root[data-theme="light"] .conversation-link { color:#222222 !important; }
:root[data-theme="light"] .sidebar-brand span:not(.mark),:root[data-theme="light"] .sidebar-label,:root[data-theme="light"] .sidebar-foot { color:#777777 !important; }
:root[data-theme="light"] .new-chat-button,:root[data-theme="light"] .conversation-search { background:#f7f7f7 !important; border-color:#dedede !important; color:#111111 !important; }
:root[data-theme="light"] .conversation-search input { color:#111111 !important; }
:root[data-theme="light"] .primary-nav button.active,:root[data-theme="light"] .primary-nav button:hover,:root[data-theme="light"] .category-link:hover,:root[data-theme="light"] .category-link.active,:root[data-theme="light"] .conversation-link:hover,:root[data-theme="light"] .conversation-link.active { background:#eeeeee !important; color:#111111 !important; }

/* ============  DUNKEL  ============ */
:root[data-theme="midnight"] { /* default from design.css already matches */ }

:root[data-theme="charcoal"] {
  --bg:#161514; --bg-2:#1a1918; --panel:#1e1d1b; --elevated:#242220; --raised:#2b2926;
  --border:#3a3835; --border-strong:#4a4744;
  --text:#f2efe9; --text-2:#c8c3ba; --muted:#8a8580; --muted-2:#5f5b56;
  --accent:#f5f0e6; --accent-2:#dcd6c9; --accent-soft:rgba(245,240,230,.10); --accent-glow:rgba(245,240,230,.22);
}
:root[data-theme="deep-space"] {
  --bg:#050a1a; --bg-2:#080e22; --panel:#0d132a; --elevated:#121a35; --raised:#1a2445;
  --border:#1f2c50; --border-strong:#2d3d68;
  --text:#e8ecff; --text-2:#a8b3dc; --muted:#6674a4; --muted-2:#4a5580;
  --accent:#5b8dff; --accent-2:#4a7ce8; --accent-soft:rgba(91,141,255,.14); --accent-glow:rgba(91,141,255,.34);
}
:root[data-theme="obsidian"] {
  --bg:#050a08; --bg-2:#080e0b; --panel:#0c1410; --elevated:#111c16; --raised:#17281f;
  --border:#1e3327; --border-strong:#2a4534;
  --text:#e8f0ea; --text-2:#a8c0af; --muted:#6a8474; --muted-2:#4a5f52;
  --accent:#50c878; --accent-2:#3faa63; --accent-soft:rgba(80,200,120,.12); --accent-glow:rgba(80,200,120,.30);
}

/* ============  GRUSELIG  ============ */
:root[data-theme="halloween"] {
  --bg:#0d0806; --bg-2:#120a06; --panel:#180c07; --elevated:#1e100a; --raised:#28160d;
  --border:#3a1e10; --border-strong:#4d2814;
  --text:#f2e6d8; --text-2:#c0a48a; --muted:#8a6e58; --muted-2:#5a4635;
  --accent:#ff8c1a; --accent-2:#e6741a; --accent-soft:rgba(255,140,26,.14); --accent-glow:rgba(255,140,26,.40);
}
:root[data-theme="blood-moon"] {
  --bg:#0a0000; --bg-2:#100404; --panel:#170606; --elevated:#1e0a0a; --raised:#2b0f0f;
  --border:#3d1414; --border-strong:#5a1c1c;
  --text:#f5e5e5; --text-2:#c9a0a0; --muted:#8a6060; --muted-2:#5c4040;
  --accent:#e63946; --accent-2:#c1121f; --accent-soft:rgba(230,57,70,.14); --accent-glow:rgba(230,57,70,.45);
}
:root[data-theme="haunted"] {
  --bg:#020604; --bg-2:#040a06; --panel:#061008; --elevated:#0a1a0e; --raised:#0f2814;
  --border:#164020; --border-strong:#1e5828;
  --text:#c8ffd8; --text-2:#7ad898; --muted:#4a9060; --muted-2:#2e5a3c;
  --accent:#00ff77; --accent-2:#00cc5c; --accent-soft:rgba(0,255,119,.12); --accent-glow:rgba(0,255,119,.35);
  --font-sans: 'JetBrains Mono', 'Inter', system-ui, sans-serif;
}
:root[data-theme="ghost"] {
  --bg:#161620; --bg-2:#1c1c28; --panel:#22222f; --elevated:#2a2a38; --raised:#333344;
  --border:#3a3a4a; --border-strong:#4d4d60;
  --text:#f0f0f5; --text-2:#c8c8d5; --muted:#8a8aa0; --muted-2:#606078;
  --accent:#e8e8f2; --accent-2:#c8c8d8; --accent-soft:rgba(232,232,242,.10); --accent-glow:rgba(232,232,242,.25);
}
:root[data-theme="witch-hour"] {
  --bg:#0d0018; --bg-2:#120022; --panel:#180a2e; --elevated:#20143a; --raised:#2c1f4e;
  --border:#3d2864; --border-strong:#523682;
  --text:#f0e5ff; --text-2:#c8b0e0; --muted:#8a70a8; --muted-2:#5c4d70;
  --accent:#a020f0; --accent-2:#40e0d0; --accent-soft:rgba(160,32,240,.14); --accent-glow:rgba(160,32,240,.45);
}

/* ============  EDEL  ============ */
:root[data-theme="rose-gold"] {
  --bg:#140a0e; --bg-2:#180d10; --panel:#1e1116; --elevated:#26161c; --raised:#301c23;
  --border:#3d232c; --border-strong:#553040;
  --text:#f5e8ea; --text-2:#d1b0b8; --muted:#946e78; --muted-2:#634850;
  --accent:#e8a99a; --accent-2:#d18a7a; --accent-soft:rgba(232,169,154,.14); --accent-glow:rgba(232,169,154,.34);
}
:root[data-theme="emerald"] {
  --bg:#040e08; --bg-2:#06120b; --panel:#0a1a10; --elevated:#0f2418; --raised:#173323;
  --border:#1f4630; --border-strong:#2a603f;
  --text:#e8f5eb; --text-2:#a8d0b5; --muted:#6a9578; --muted-2:#446554;
  --accent:#f4c95d; --accent-2:#e0b247; --accent-soft:rgba(244,201,93,.12); --accent-glow:rgba(244,201,93,.30);
}
:root[data-theme="sapphire"] {
  --bg:#04081c; --bg-2:#060c26; --panel:#0a1230; --elevated:#101a40; --raised:#182655;
  --border:#22346a; --border-strong:#324890;
  --text:#e8eeff; --text-2:#a5b6dc; --muted:#6878a4; --muted-2:#4a5680;
  --accent:#4a90e2; --accent-2:#3d7ac8; --accent-soft:rgba(74,144,226,.14); --accent-glow:rgba(74,144,226,.34);
}
:root[data-theme="amber-warm"] {
  --bg:#100e0b; --bg-2:#14120f; --panel:#191612; --elevated:#1f1b16; --raised:#27221c;
  --border:#2c2721; --border-strong:#3a342b;
  --text:#ecebe7; --text-2:#b8b4ab; --muted:#7a7367; --muted-2:#5a5449;
  --accent:#f0b775; --accent-2:#e0a25e; --accent-soft:rgba(240,183,117,.14); --accent-glow:rgba(240,183,117,.35);
}
:root[data-theme="champagne"] {
  --bg:#141210; --bg-2:#181614; --panel:#1e1c19; --elevated:#25231f; --raised:#2f2c27;
  --border:#3a362f; --border-strong:#4e483e;
  --text:#f7f2e5; --text-2:#d0c9b7; --muted:#948a72; --muted-2:#645e4e;
  --accent:#f7e7ce; --accent-2:#e5cfa8; --accent-soft:rgba(247,231,206,.12); --accent-glow:rgba(247,231,206,.30);
}

/* ============  BUNT  ============ */
:root[data-theme="cyberpunk"] {
  --bg:#0a001a; --bg-2:#0e0022; --panel:#14002e; --elevated:#1a0040; --raised:#25015c;
  --border:#3a0e78; --border-strong:#5220a0;
  --text:#e8ffff; --text-2:#a0e0f0; --muted:#7080b8; --muted-2:#4c5a90;
  --accent:#ff0080; --accent-2:#00ffe0; --accent-soft:rgba(255,0,128,.16); --accent-glow:rgba(255,0,128,.45);
}
:root[data-theme="vaporwave"] {
  --bg:#150525; --bg-2:#1a0830; --panel:#22103e; --elevated:#2c184c; --raised:#382464;
  --border:#4d3080; --border-strong:#6544a8;
  --text:#f8e8ff; --text-2:#c8a5df; --muted:#8a70a8; --muted-2:#605078;
  --accent:#ff77cc; --accent-2:#77e5ff; --accent-soft:rgba(255,119,204,.14); --accent-glow:rgba(255,119,204,.42);
}
:root[data-theme="sunset"] {
  --bg:#1a0810; --bg-2:#200a15; --panel:#28101c; --elevated:#331624; --raised:#421c30;
  --border:#5a2740; --border-strong:#78345a;
  --text:#fff0e5; --text-2:#e0b8a5; --muted:#a88075; --muted-2:#785848;
  --accent:#ff6b35; --accent-2:#f7c15c; --accent-soft:rgba(255,107,53,.14); --accent-glow:rgba(255,107,53,.40);
}
:root[data-theme="nordic"] {
  --bg:#0a1424; --bg-2:#0e192e; --panel:#131f38; --elevated:#1a2846; --raised:#233458;
  --border:#2c4270; --border-strong:#3d5892;
  --text:#e8f0fa; --text-2:#a8bcd8; --muted:#6c85a8; --muted-2:#4a5f80;
  --accent:#8ec5fc; --accent-2:#e0c3fc; --accent-soft:rgba(142,197,252,.14); --accent-glow:rgba(142,197,252,.38);
}
:root[data-theme="miami"] {
  --bg:#0a1a24; --bg-2:#0e2030; --panel:#132840; --elevated:#193050; --raised:#243c66;
  --border:#2d5080; --border-strong:#3f6ba8;
  --text:#e8faff; --text-2:#a5cfe0; --muted:#6c96a8; --muted-2:#4a6a80;
  --accent:#ff4da6; --accent-2:#00e5ff; --accent-soft:rgba(255,77,166,.14); --accent-glow:rgba(255,77,166,.40);
}

/* ============================================================
   PATTERNS  (data-pattern on body)
   ============================================================ */
body[data-pattern="dots"] {
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    var(--pattern-below, none) !important;
  background-size: 22px 22px, auto !important;
}
body[data-pattern="grid"] {
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) !important;
  background-size: 40px 40px, 40px 40px !important;
}
body[data-pattern="noise"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2' seed='7'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .12 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .45; mix-blend-mode: overlay;
}
body[data-pattern="circuit"] {
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
    radial-gradient(circle at 20% 30%, var(--accent-soft), transparent 40%),
    radial-gradient(circle at 80% 70%, var(--accent-soft), transparent 40%) !important;
  background-size: 60px 60px, 60px 60px, auto, auto !important;
}

/* ============================================================
   BUTTON STYLES  (data-button on body)
   ============================================================ */
body[data-button="sharp"] button,
body[data-button="sharp"] .primary-button,
body[data-button="sharp"] .secondary-button,
body[data-button="sharp"] .dash-quick-btn,
body[data-button="sharp"] .suggestion-card {
  border-radius: 0 !important;
}
body[data-button="pill"] button,
body[data-button="pill"] .primary-button,
body[data-button="pill"] .secondary-button {
  border-radius: 999px !important;
}
body[data-button="glass"] button,
body[data-button="glass"] .primary-button,
body[data-button="glass"] .secondary-button,
body[data-button="glass"] .dash-quick-btn,
body[data-button="glass"] .suggestion-card,
body[data-button="glass"] .dash-card {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(14px) saturate(160%);
  border-color: rgba(255,255,255,.12) !important;
}
body[data-button="retro"] button,
body[data-button="retro"] .primary-button,
body[data-button="retro"] .secondary-button,
body[data-button="retro"] .dash-quick-btn {
  border-radius: 4px !important;
  box-shadow: 3px 3px 0 var(--accent) !important;
  transform: none !important;
  transition: transform 100ms ease-out, box-shadow 100ms ease-out !important;
}
body[data-button="retro"] button:hover,
body[data-button="retro"] .primary-button:hover {
  transform: translate(-1px,-1px) !important;
  box-shadow: 5px 5px 0 var(--accent) !important;
}

/* ============================================================
   FONTS  (data-font on body)
   ============================================================ */
body[data-font="scifi"], body[data-font="scifi"] * { font-family: 'Orbitron', 'JetBrains Mono', monospace !important; }
body[data-font="scifi"] h1, body[data-font="scifi"] h2, body[data-font="scifi"] .dash-hero-greet,
body[data-font="scifi"] .empty-state h2 { letter-spacing: .06em !important; }

body[data-font="classic"], body[data-font="classic"] * { font-family: 'Instrument Serif', Georgia, serif !important; }
body[data-font="classic"] h1, body[data-font="classic"] h2 { letter-spacing: -.02em !important; }

body[data-font="hand"], body[data-font="hand"] * { font-family: 'Caveat', cursive !important; }
body[data-font="hand"] h1, body[data-font="hand"] h2 { letter-spacing: 0 !important; }

/* ============================================================
   EFFECT LAYERS  (only when data-effects="on" AND matching theme)
   ============================================================ */

/* Layer container – lives above bg, below content */
body::before, body::after { will-change: transform, opacity; }

/* Bats, blood drops, ghosts, snow etc. are now driven by the JS canvas
   particle system (much smoother & performant). The CSS below only
   handles static frame decorations (moon, sun, aurora, static overlay). */

/* --- HAUNTED: static + glitch --- */
html[data-theme="haunted"][data-effects="on"] body::after,
html[data-theme="haunted"] body[data-effects="on"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='3' seed='11'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 1  0 0 0 0 0.4  0 0 0 .15 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .3; mix-blend-mode: screen;
  animation: static-shift .12s steps(4) infinite;
}
@keyframes static-shift {
  0%   { background-position: 0 0; }
  100% { background-position: 20px 30px; }
}
html[data-theme="haunted"] .message.assistant strong,
html[data-theme="haunted"] h1, html[data-theme="haunted"] h2 {
  animation: text-glitch 6s infinite;
}
@keyframes text-glitch {
  0%, 92%, 100% { transform: none; text-shadow: none; }
  93% { transform: translate(1px, -1px); text-shadow: 2px 0 0 #ff0055, -2px 0 0 #00ffee; }
  94% { transform: translate(-1px, 1px); }
  95% { transform: none; }
}

/* Ghost blobs (as gentle background gradient — particles handled by canvas) */
html[data-theme="ghost"][data-effects="on"] body::before {
  content: ""; position: fixed; left: -100px; top: 20%;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,232,242,.20), transparent 65%);
  filter: blur(30px); pointer-events: none; z-index: 0;
  animation: ghost-drift 24s ease-in-out infinite;
}
html[data-theme="ghost"][data-effects="on"] body::after {
  content: ""; position: fixed; right: -100px; top: 55%;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,200,220,.18), transparent 65%);
  filter: blur(40px); pointer-events: none; z-index: 0;
  animation: ghost-drift 32s ease-in-out infinite reverse;
}
@keyframes ghost-drift {
  0%,100% { transform: translate(0,0);          opacity: .6; }
  50%     { transform: translate(60vw, -20vh); opacity: 1;  }
}

/* --- CYBERPUNK: scanlines --- */
html[data-theme="cyberpunk"][data-effects="on"] body::after,
html[data-theme="cyberpunk"] body[data-effects="on"]::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.15) 0, rgba(0,0,0,.15) 2px, transparent 2px, transparent 4px);
  opacity: .5;
  animation: scan-move 8s linear infinite;
}
@keyframes scan-move { to { background-position: 0 100vh; } }

/* --- VAPORWAVE: retro grid --- */
html[data-theme="vaporwave"][data-effects="on"] body::before,
html[data-theme="vaporwave"] body[data-effects="on"]::before {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 45vh;
  background:
    linear-gradient(180deg, transparent, rgba(255,119,204,.14)),
    repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(119,229,255,.28) 40px, rgba(119,229,255,.28) 41px),
    repeating-linear-gradient(0deg,  transparent 0, transparent 40px, rgba(119,229,255,.28) 40px, rgba(119,229,255,.28) 41px);
  transform: perspective(400px) rotateX(65deg); transform-origin: bottom;
  pointer-events: none; z-index: 0; opacity: .55;
}

/* --- SUNSET: warm rays --- */
html[data-theme="sunset"][data-effects="on"] body::before,
html[data-theme="sunset"] body[data-effects="on"]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255,107,53,.28), transparent 55%),
    radial-gradient(ellipse at 20% 100%, rgba(247,193,92,.20), transparent 60%);
  animation: sunset-breathe 8s ease-in-out infinite alternate;
}
@keyframes sunset-breathe {
  0%   { opacity: .7; }
  100% { opacity: 1; }
}

/* Snow is now particle-based (see themes.js) */

/* --- MIAMI: gentle floating dots --- */
html[data-theme="miami"][data-effects="on"] body::before,
html[data-theme="miami"] body[data-effects="on"]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,77,166,.14), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,229,255,.14), transparent 40%);
  animation: miami-shift 20s ease-in-out infinite alternate;
}
@keyframes miami-shift {
  0%   { transform: translate(0,0); }
  100% { transform: translate(-4%, 3%); }
}

/* When effects OFF – suppress everything */
body[data-effects="off"]::before,
body[data-effects="off"]::after { display: none !important; }

/* ============================================================
   SETTINGS APPEARANCE PANEL UI
   ============================================================ */
.theme-cats {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 0 8px;
}
.theme-cat {
  padding: 8px 14px;
  background: var(--elevated);
  border: 1px solid var(--border);
  color: var(--text-2);
  border-radius: 999px;
  font: 500 12px/1 var(--font-sans);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.theme-cat:hover { border-color: var(--border-strong); color: var(--text); }
.theme-cat.is-active {
  background: var(--text) !important;
  color: var(--bg) !important;
  border-color: var(--text) !important;
}

/* ==================================================================
   DISCORD-SHOP / WARZONE STYLE BUNDLE CARDS — portrait, atmospheric
   Reference: Discord Bundle Shop + 21st.dev / Aceternity animated UIs
   ================================================================== */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  perspective: 1000px;
}

.theme-card {
  --tier-color: #b0b0b0;
  --tier-glow: rgba(176,176,176,.4);
  --mx: 50%; --my: 50%;
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 0;
  padding: 0;
  background: linear-gradient(160deg, rgba(20,20,24,.95), rgba(8,8,10,.98));
  border: 2px solid transparent;
  border-radius: 14px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transform-style: preserve-3d;
  transition: box-shadow .35s ease, border-color .35s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  isolation: isolate;
  aspect-ratio: 3/4.2;
}

/* Tier accent color mapping */
.theme-tier-common    { --tier-color: #a8a8a8; --tier-glow: rgba(200,200,200,.35); }
.theme-tier-rare      { --tier-color: #4a90e2; --tier-glow: rgba(74,144,226,.5); }
.theme-tier-epic      { --tier-color: #a855f7; --tier-glow: rgba(168,85,247,.55); }
.theme-tier-legendary { --tier-color: #f0b775; --tier-glow: rgba(240,183,117,.65); }
.theme-tier-mythic    { --tier-color: #ff2d75; --tier-glow: rgba(255,45,117,.7);  }

/* Idle glow — subtle for high tiers */
.theme-tier-rare      { box-shadow: 0 0 12px rgba(74,144,226,.15); }
.theme-tier-epic      { box-shadow: 0 0 14px rgba(168,85,247,.18); }
.theme-tier-legendary { box-shadow: 0 0 20px rgba(240,183,117,.25); animation: tier-pulse-leg 3s ease-in-out infinite; }
.theme-tier-mythic    { animation: tier-pulse-myth 2.5s ease-in-out infinite; }

@keyframes tier-pulse-leg {
  0%,100% { box-shadow: 0 0 20px rgba(240,183,117,.25); }
  50%     { box-shadow: 0 0 34px rgba(240,183,117,.55); }
}
@keyframes tier-pulse-myth {
  0%   { box-shadow: 0 0 20px rgba(255,45,117,.35);  border-color: #ff2d75; }
  33%  { box-shadow: 0 0 34px rgba(64,224,208,.5);   border-color: #40e0d0; }
  66%  { box-shadow: 0 0 30px rgba(255,193,60,.45);  border-color: #ffc13c; }
  100% { box-shadow: 0 0 20px rgba(255,45,117,.35);  border-color: #ff2d75; }
}

/* Frame corners (like Warzone rarity frames) */
.theme-frame {
  position: absolute; inset: -2px; border-radius: 12px;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--tier-color) 0%, transparent 15%),
    linear-gradient(-135deg, var(--tier-color) 0%, transparent 15%),
    linear-gradient(45deg, var(--tier-color) 0%, transparent 15%),
    linear-gradient(-45deg, var(--tier-color) 0%, transparent 15%);
  background-size: 22px 22px, 22px 22px, 22px 22px, 22px 22px;
  background-position: top left, top right, bottom left, bottom right;
  background-repeat: no-repeat;
  opacity: .8;
  mask: linear-gradient(black, black), linear-gradient(black, black);
  mask-composite: exclude;
}

/* Rotating shine — sweeps across on hover */
.theme-shine {
  position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.15) 50%, transparent 60%);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 6;
}
.theme-card:hover .theme-shine {
  opacity: 1;
  animation: shine-sweep 1.2s ease-out;
}
@keyframes shine-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Rotating border beam (21st.dev/Aceternity style) — visible on high tiers */
.theme-beam {
  position: absolute; inset: -2px;
  border-radius: 14px;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0%, var(--tier-color) 15%, transparent 30%, transparent 70%, var(--tier-color) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  animation: beam-rotate 3.5s linear infinite;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
  z-index: 5;
}
.theme-tier-legendary .theme-beam, .theme-tier-mythic .theme-beam,
.theme-tier-epic .theme-beam { opacity: .9; }
.theme-card:hover .theme-beam { opacity: 1 !important; animation-duration: 1.8s; }
@keyframes beam-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Cursor spotlight overlay inside swatch */
.tp-spotlight {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  background: radial-gradient(220px 220px at var(--mx) var(--my), rgba(255,255,255,.15), transparent 50%);
  opacity: 0; transition: opacity .3s;
}
.theme-card:hover .tp-spotlight { opacity: 1; }

/* Swatch — the big atmospheric preview area (Discord Bundle style) */
.theme-swatch {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  border-radius: 12px 12px 0 0;
  border: 0;
  overflow: hidden;
  z-index: 2;
  min-height: 200px;
}

/* Tier badge — top-left, small chip */
.theme-tier-badge {
  position: absolute; top: 10px; left: 10px;
  padding: 3px 8px;
  background: var(--tier-color);
  color: #0a0a0a;
  font: 800 9px/1 var(--font-sans);
  letter-spacing: .12em;
  border-radius: 3px;
  z-index: 7;
  box-shadow: 0 0 12px var(--tier-glow), 0 2px 6px rgba(0,0,0,.5);
  text-transform: uppercase;
}
.theme-tier-mythic .theme-tier-badge {
  background: linear-gradient(90deg, #ff2d75, #40e0d0, #ffc13c);
  background-size: 200% 100%;
  animation: mythic-shine 2s linear infinite;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
@keyframes mythic-shine {
  from { background-position: 0 0; }
  to   { background-position: 200% 0; }
}

/* Info row at bottom of card */
.theme-info {
  position: relative; z-index: 3;
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.85));
  border-top: 1px solid rgba(255,255,255,.06);
}
.theme-info strong { display: block; font: 700 14px var(--font-sans); color: var(--text); }
.theme-info small  { display: block; font: 400 11px var(--font-sans); color: rgba(255,255,255,.6); margin-top: 3px; }

/* Select hint - slides in on hover from bottom, replaces info gradient */
.theme-select-hint {
  position: absolute; left: 10px; right: 10px; bottom: 62px;
  padding: 8px 8px;
  background: var(--tier-color);
  color: #0a0a0a;
  font: 800 11px/1 var(--font-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 6px;
  text-align: center;
  transform: translateY(200%);
  opacity: 0;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  z-index: 7;
  pointer-events: none;
  box-shadow: 0 6px 20px var(--tier-glow);
}
.theme-card:hover .theme-select-hint,
.theme-card.previewing .theme-select-hint { transform: none; opacity: 1; }

/* Active state — Warzone equipped ring */
.theme-card.is-active {
  border-color: var(--tier-color) !important;
  box-shadow:
    0 0 0 3px rgba(0,0,0,.4),
    0 0 0 5px var(--tier-color),
    0 0 30px var(--tier-glow) !important;
}
.theme-card.is-active .theme-tier-badge::before {
  content: "✓ "; font-weight: 900;
}

/* Previewing state (during hover-preview) */
.theme-card.previewing {
  box-shadow: 0 0 40px var(--tier-glow), 0 0 0 2px var(--tier-color) !important;
}

/* Legendary + mythic get chromatic aberration on hover */
.theme-tier-legendary:hover .theme-info strong {
  text-shadow: 1px 0 0 rgba(240,183,117,.5), -1px 0 0 rgba(64,224,208,.5);
}
.theme-tier-mythic:hover .theme-info strong {
  animation: rgb-drift 2s ease-in-out infinite;
}

/* ================================================================
   LIVE ANIMATED THEME PREVIEWS — Discord-Shop atmospheric portraits
   Each preview has multi-layer depth: background, mid-fog, central
   figure, foreground particles. Cursor spotlight follows mouse.
   ================================================================ */
.theme-swatch { position: relative; overflow: hidden; }
.theme-swatch::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
}

/* Big central emoji/figure — hero of the preview */
.p-emoji-lg, .p-pumpkin, .p-crystal, .p-palm, .p-ghost-fig, .p-ghost-g, .p-cy-em {
  position: absolute;
  left: 50%; top: 45%;
  transform: translate(-50%,-50%);
  font-size: 72px;
  z-index: 3;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.7));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1);
}
.theme-card:hover .p-emoji-lg,
.theme-card:hover .p-pumpkin,
.theme-card:hover .p-crystal,
.theme-card:hover .p-palm,
.theme-card:hover .p-ghost-fig,
.theme-card:hover .p-ghost-g,
.theme-card:hover .p-cy-em {
  transform: translate(-50%,-50%) scale(1.15) rotate(-4deg);
}

/* Reusable stars */
.p-star {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  width: 3px; height: 3px; background: #fff; border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  animation: p-twinkle 2.4s ease-in-out infinite;
  animation-delay: var(--d, 0s);
}
.p-star.p-blue { background: #8ec5fc; box-shadow: 0 0 8px #8ec5fc; }
@keyframes p-twinkle { 0%,100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.4); } }

/* ============ DUNKEL ============ */
.tp-midnight { background: radial-gradient(ellipse at 50% 100%, #101012, #000); }

.tp-charcoal { background: linear-gradient(160deg, #2a2a2c, #141416); }
.p-emb {
  position: absolute; left: var(--x); bottom: 0;
  width: 3px; height: 3px; background: #f0e0c0; border-radius: 50%;
  box-shadow: 0 0 6px #f0b775;
  animation: p-ember 3s ease-in infinite;
  animation-delay: var(--d, 0s);
}
@keyframes p-ember {
  0%   { bottom: -5%; opacity: 0; transform: scale(.6); }
  20%  { opacity: 1; }
  100% { bottom: 100%; opacity: 0; transform: scale(1.2) translateX(10px); }
}
.p-emb.p-amb { background: #f0b775; box-shadow: 0 0 10px #f0b775; }

.tp-deep-space { background: radial-gradient(ellipse at 30% 30%, #1a2450, #050a1a 60%, #000); }
.p-planet {
  position: absolute; right: 12px; top: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5b8dff, #1a3070);
  box-shadow: 0 0 14px rgba(91,141,255,.5);
  animation: p-planet 6s linear infinite;
}
@keyframes p-planet { to { transform: rotate(360deg); } }

.tp-obsidian { background: linear-gradient(160deg, #0a1a12, #000); }
.p-em-g {
  position: absolute; left: var(--x); bottom: 0;
  width: 3px; height: 3px; background: #50c878; border-radius: 50%;
  box-shadow: 0 0 8px #50c878;
  animation: p-ember 3s ease-in infinite;
  animation-delay: var(--d, 0s);
}

/* Fog layer — bottom-anchored atmospheric mist */
.p-fog {
  position: absolute; left: -20%; right: -20%; bottom: -10%;
  height: 60%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.14), transparent 70%);
  filter: blur(14px);
  z-index: 1;
  animation: p-fog-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}
.p-fog.p-fog-red    { background: radial-gradient(ellipse at 50% 100%, rgba(230,57,70,.18), transparent 70%); }
.p-fog.p-fog-purple { background: radial-gradient(ellipse at 50% 100%, rgba(160,32,240,.20), transparent 70%); }
@keyframes p-fog-drift {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}

/* Meteor — diagonal streak (21st.dev style) */
.p-meteor {
  position: absolute; top: -10px; left: var(--l, 40%);
  width: 3px; height: 3px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 8px 2px #fff;
  animation: p-meteor 3s cubic-bezier(.4,0,.6,1) infinite;
  animation-delay: var(--d, 0s);
}
.p-meteor::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 60px; height: 1px;
  background: linear-gradient(90deg, #fff, transparent);
  transform: translate(-100%, 0);
}
@keyframes p-meteor {
  0%   { transform: translate(0, 0)   rotate(215deg); opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translate(-140px, 140px) rotate(215deg); opacity: 0; }
}

/* TV scan-line (haunted) */
.p-tv-scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: rgba(0,255,119,.5);
  box-shadow: 0 0 10px rgba(0,255,119,.5);
  z-index: 4;
  animation: p-tv-scan 3s linear infinite;
}
@keyframes p-tv-scan {
  0%   { top: -3%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 103%; opacity: 0; }
}

/* Extra bat variant for halloween */
.p-bat-3 { top: 15%; opacity: .6; }

/* Ghost extra blob */
.p-blob-3 {
  position: absolute; width: 50px; height: 50px;
  top: 40%; left: 40%;
  background: radial-gradient(circle, rgba(255,255,255,.3), transparent 65%);
  border-radius: 50%; filter: blur(6px);
  animation: p-blob-drift 5s ease-in-out infinite;
}

/* ============ HALLOWEEN ============ */
.tp-halloween {
  background:
    radial-gradient(ellipse at 20% 20%, rgba(255,140,26,.15), transparent 40%),
    radial-gradient(ellipse at 50% 100%, #1a0f08, #0d0806);
}
.p-moon-hw {
  position: absolute; top: 15px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ffc571, #ff8c1a 60%, #b34d00);
  box-shadow: 0 0 30px rgba(255,140,26,.7);
  animation: p-hw-moon 2s ease-in-out infinite;
  z-index: 2;
}
@keyframes p-hw-moon { 0%,100% { transform: scale(1); box-shadow: 0 0 20px rgba(255,140,26,.7); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,140,26,.9); } }
.p-bat {
  position: absolute; top: 30%; left: -15%;
  width: 14px; height: 14px;
  font-size: 14px; line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255,140,26,.4));
  animation: p-bat-fly 4s linear infinite;
  animation-delay: var(--d, 0s);
}
.p-bat::before { content: "🦇"; }
.p-bat-2 { top: 55%; }
@keyframes p-bat-fly {
  0% { left: -15%; transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-6px) rotate(5deg); }
  100% { left: 115%; transform: translateY(0) rotate(-5deg); }
}
.p-pumpkin {
  filter: drop-shadow(0 0 20px rgba(255,140,26,.7)) drop-shadow(0 6px 14px rgba(0,0,0,.7));
  animation: p-pumpkin-glow 2s ease-in-out infinite;
}
@keyframes p-pumpkin-glow {
  0%,100% { filter: drop-shadow(0 0 8px rgba(255,140,26,.5)); }
  50%     { filter: drop-shadow(0 0 16px rgba(255,140,26,.9)); }
}

/* ============ BLOOD MOON ============ */
.tp-blood-moon { background: radial-gradient(ellipse at 50% 100%, #200000, #060000); }
.p-moon-bl {
  position: absolute; top: 15px; right: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #ff5a5a, #a00 60%, #4a0000);
  box-shadow: 0 0 30px rgba(230,57,70,.7);
  animation: p-bl-heartbeat 1.2s ease-in-out infinite;
  z-index: 2;
}
@keyframes p-bl-heartbeat {
  0%,60%,100% { transform: scale(1);   box-shadow: 0 0 20px rgba(230,57,70,.7); }
  15%         { transform: scale(1.12); box-shadow: 0 0 34px rgba(230,57,70,1);  }
  30%         { transform: scale(1);   }
  45%         { transform: scale(1.08); box-shadow: 0 0 26px rgba(230,57,70,.9); }
}
.p-drop {
  position: absolute; top: -8px; left: var(--x, 50%);
  width: 3px; height: 12px;
  background: linear-gradient(180deg, transparent, #a00 60%, transparent);
  border-radius: 0 0 3px 3px;
  box-shadow: 0 0 6px rgba(255,0,0,.5);
  animation: p-drip 3s ease-in infinite;
  animation-delay: var(--d, 0s);
}
@keyframes p-drip {
  0% { top: -12px; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ============ HAUNTED ============ */
.tp-haunted { background: linear-gradient(180deg, #061008, #020604); }
.p-static {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.2  0 0 0 0 1  0 0 0 0 0.4  0 0 0 .3 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: .4;
  animation: p-static-shift .08s steps(4) infinite;
}
@keyframes p-static-shift {
  0% { background-position: 0 0; }
  100% { background-position: 15px 20px; }
}
.p-matrix {
  position: absolute; top: 6px; left: 8px;
  color: #00ff77; opacity: .8;
  font: 700 8px/1.2 monospace;
  text-shadow: 0 0 4px #00ff77;
  animation: p-matrix-flick .8s steps(2) infinite;
}
@keyframes p-matrix-flick {
  0%,100% { opacity: .8; }
  50%     { opacity: 1; }
}
.p-ghost-g {
  position: absolute; right: 8px; bottom: 4px;
  font-size: 20px; color: #00ff77;
  filter: drop-shadow(0 0 6px #00ff77);
  animation: p-haunt-glitch 3s infinite;
}
@keyframes p-haunt-glitch {
  0%,92%,100% { transform: none; }
  93% { transform: translate(2px,-1px); }
  94% { transform: translate(-2px,1px); }
  95% { transform: none; }
}

/* ============ GHOST ============ */
.tp-ghost { background: linear-gradient(180deg, #22222f, #12121a); }
.p-blob {
  position: absolute; border-radius: 50%;
  filter: blur(8px);
}
.p-blob-1 {
  width: 60px; height: 60px; top: 20%; left: 10%;
  background: radial-gradient(circle, rgba(232,232,242,.5), transparent 65%);
  animation: p-blob-drift 6s ease-in-out infinite;
}
.p-blob-2 {
  width: 80px; height: 80px; bottom: 5%; right: 5%;
  background: radial-gradient(circle, rgba(200,200,220,.4), transparent 65%);
  animation: p-blob-drift 8s ease-in-out infinite reverse;
}
@keyframes p-blob-drift {
  0%,100% { transform: translate(0,0); }
  50%     { transform: translate(20px, -10px); }
}
.p-ghost-fig {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 30px; opacity: .6;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.5));
  animation: p-ghost-float 3.5s ease-in-out infinite;
}
@keyframes p-ghost-float {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .5; }
  50%     { transform: translate(-50%, -60%) scale(1.05); opacity: .9; }
}

/* ============ WITCH HOUR ============ */
.tp-witch-hour {
  background: radial-gradient(ellipse at 50% 60%, #2a0a4a, #100022 70%, #0a0018);
}
.p-crystal {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 30px;
  filter: drop-shadow(0 0 14px rgba(160,32,240,.7));
  animation: p-crystal-pulse 2.5s ease-in-out infinite;
}
@keyframes p-crystal-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); filter: drop-shadow(0 0 14px rgba(160,32,240,.7)); }
  50%     { transform: translate(-50%,-50%) scale(1.1); filter: drop-shadow(0 0 24px rgba(64,224,208,.9)); }
}
.p-spark {
  position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px;
  transform-origin: 0 0;
  transform: rotate(var(--a, 0deg)) translate(35px, 0) rotate(calc(-1 * var(--a, 0deg)));
  animation: p-spark-orbit 4s linear infinite;
}
.p-spark::before {
  content: "✦"; color: #40e0d0;
  font-size: 10px;
  filter: drop-shadow(0 0 4px #40e0d0);
  animation: p-spark-blink 1.5s ease-in-out infinite;
}
@keyframes p-spark-orbit {
  from { transform: rotate(var(--a)) translate(35px, 0) rotate(calc(-1 * var(--a))); }
  to   { transform: rotate(calc(var(--a) + 360deg)) translate(35px, 0) rotate(calc(-1 * (var(--a) + 360deg))); }
}
@keyframes p-spark-blink {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

/* ============ EDEL / FANCY ============ */
.tp-rose-gold  { background: linear-gradient(160deg, #1a0e14, #3d1e28); }
.tp-emerald    { background: radial-gradient(ellipse at 50% 60%, #1a4a30, #0a1a12); }
.tp-sapphire   { background: linear-gradient(160deg, #101a40, #050e2c); }
.tp-amber-warm { background: radial-gradient(ellipse at 50% 60%, #3a2820, #100e0b 70%); }
.tp-champagne  { background: linear-gradient(160deg, #2a2622, #141210); }

.p-shim {
  position: absolute; left: var(--x); top: 40%;
  width: 8px; height: 2px;
  border-radius: 2px;
  filter: blur(1px);
  animation: p-shim 2.5s linear infinite;
  animation-delay: var(--d, 0s);
}
.p-shim.p-rg { background: #e8a99a; box-shadow: 0 0 8px #e8a99a; }
.p-shim.p-em { background: #50c878; box-shadow: 0 0 8px #50c878; }
.p-shim.p-sa { background: #8ec5fc; box-shadow: 0 0 8px #8ec5fc; }
@keyframes p-shim {
  0%   { transform: translateY(0)    scale(1);   opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateY(-40px) scale(1.5); opacity: 0; }
}
.p-emoji-lg {
  position: absolute; top: 8px; right: 10px;
  font-size: 24px;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.3));
  animation: p-emoji-bob 3s ease-in-out infinite;
}
@keyframes p-emoji-bob {
  0%,100% { transform: translateY(0) rotate(-3deg); }
  50%     { transform: translateY(-4px) rotate(3deg); }
}
.p-amber-orb {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, #f0b775, transparent 65%);
  box-shadow: 0 0 30px rgba(240,183,117,.6);
  animation: p-amber-pulse 2.5s ease-in-out infinite;
}
@keyframes p-amber-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50%     { transform: translate(-50%,-50%) scale(1.2); }
}
.p-bub {
  position: absolute; bottom: 0; left: var(--x, 50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(247,231,206,.7);
  box-shadow: 0 0 4px rgba(247,231,206,.6);
  animation: p-bubble 3.5s ease-in infinite;
  animation-delay: var(--d, 0s);
}
@keyframes p-bubble {
  0%   { bottom: -10%; opacity: 0; }
  20%  { opacity: .9; }
  100% { bottom: 110%; opacity: 0; }
}

/* ============ CYBERPUNK ============ */
.tp-cyberpunk {
  background: linear-gradient(160deg, #1a0033, #0a001a);
}
.p-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.4) 0, rgba(0,0,0,.4) 1px, transparent 1px, transparent 3px);
  animation: p-scan-move 2s linear infinite;
}
@keyframes p-scan-move { to { background-position: 0 20px; } }
.p-cy-tri {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 0; height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid rgba(255,0,128,.4);
  filter: drop-shadow(0 0 10px #ff0080);
  animation: p-cy-tri-glow 1.5s ease-in-out infinite;
}
@keyframes p-cy-tri-glow {
  0%,100% { filter: drop-shadow(0 0 10px #ff0080); }
  50%     { filter: drop-shadow(0 0 20px #00ffe0); }
}
.p-cy-line {
  position: absolute; left: 0; right: 0; top: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffe0, transparent);
  box-shadow: 0 0 12px #00ffe0;
  animation: p-cy-line 3s ease-in-out infinite;
}
@keyframes p-cy-line {
  0%,100% { top: 20%; opacity: .5; }
  50%     { top: 75%; opacity: 1;  }
}
.p-cy-em {
  color: #ff0080;
  text-shadow: 2px 0 0 #00ffe0, -2px 0 0 #ff0080;
  animation: p-cy-glitch 3s infinite;
}
@keyframes p-cy-glitch {
  0%,92%,100% { transform: none; }
  93% { transform: translate(2px,-1px); }
  95% { transform: translate(-2px,1px); }
}

/* ============ VAPORWAVE ============ */
.tp-vaporwave { background: linear-gradient(180deg, #2b0a3d 0%, #ff77cc 100%); overflow: hidden; }
.p-vw-grid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent 15px, rgba(119,229,255,.4) 15px, rgba(119,229,255,.4) 16px),
    repeating-linear-gradient(0deg,  transparent 0, transparent 15px, rgba(119,229,255,.4) 15px, rgba(119,229,255,.4) 16px);
  transform: perspective(200px) rotateX(65deg);
  transform-origin: bottom;
  animation: p-vw-grid-move 4s linear infinite;
}
@keyframes p-vw-grid-move {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 30px, 0 0; }
}
.p-vw-sun {
  position: absolute; top: 12%; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 60px; border-radius: 50%;
  background:
    linear-gradient(180deg, #ff77cc 0%, #ff77cc 40%, transparent 40%, transparent 45%, #ff77cc 45%, #ff77cc 55%, transparent 55%, transparent 65%, #ff77cc 65%, #ff77cc 75%, transparent 75%);
  box-shadow: 0 0 40px rgba(255,119,204,.7);
  animation: p-vw-sun 3s ease-in-out infinite;
}
@keyframes p-vw-sun {
  0%,100% { box-shadow: 0 0 40px rgba(255,119,204,.7); }
  50%     { box-shadow: 0 0 60px rgba(255,119,204,1); }
}

/* ============ SUNSET ============ */
.tp-sunset { background: radial-gradient(ellipse at 50% 100%, #ff6b35, #2a0a2a 80%); }
.p-sunset-sun {
  position: absolute; bottom: 20%; left: 50%;
  transform: translateX(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, #f7c15c, #ff6b35);
  box-shadow: 0 0 30px rgba(255,107,53,.7);
  animation: p-sunset-wander 6s ease-in-out infinite;
}
@keyframes p-sunset-wander {
  0%,100% { transform: translateX(-70%) scale(1); }
  50%     { transform: translateX(-30%) scale(1.1); }
}
.p-sunset-rays {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, rgba(247,193,92,.15) 100%);
  animation: p-sunset-glow 3s ease-in-out infinite alternate;
}
@keyframes p-sunset-glow {
  from { opacity: .6; }
  to   { opacity: 1; }
}
.p-palm {
  position: absolute; bottom: 4px; right: 8px;
  font-size: 24px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,.5));
}
.p-palm-m { right: auto; left: 8px; }

/* ============ NORDIC ============ */
.tp-nordic { background: linear-gradient(180deg, #0a1424, #1a2846); }
.p-aurora {
  position: absolute; left: 0; right: 0; top: 0; height: 60%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(142,197,252,.5) 30%, rgba(224,195,252,.4) 60%, transparent 100%);
  filter: blur(14px);
  animation: p-aurora-wave 5s ease-in-out infinite alternate;
}
@keyframes p-aurora-wave {
  0%   { transform: translateX(-15%); opacity: .7; }
  100% { transform: translateX(15%);  opacity: 1; }
}
.p-snow {
  position: absolute; top: -6px; left: var(--x, 50%);
  color: #fff; font-size: 10px;
  text-shadow: 0 0 4px #8ec5fc;
  animation: p-snow-fall 3.5s linear infinite;
  animation-delay: var(--d, 0s);
}
.p-snow::before { content: "❄"; }
@keyframes p-snow-fall {
  0%   { top: -8%; transform: translateX(0)  rotate(0);   }
  100% { top: 110%; transform: translateX(6px) rotate(360deg); }
}

/* ============ MIAMI ============ */
.tp-miami { background: linear-gradient(180deg, #0a1e2a, #1a3550); overflow: hidden; }
.p-miami-grid {
  position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
  background:
    linear-gradient(0deg, rgba(255,77,166,.35), transparent 60%),
    repeating-linear-gradient(90deg, transparent 0, transparent 22px, rgba(0,229,255,.5) 22px, rgba(0,229,255,.5) 23px);
  transform: perspective(180px) rotateX(55deg);
  transform-origin: bottom;
  animation: p-miami-neon 2s ease-in-out infinite;
}
@keyframes p-miami-neon {
  0%,100% { filter: hue-rotate(0deg) brightness(1); }
  50%     { filter: hue-rotate(20deg) brightness(1.2); }
}

.pattern-grid, .button-grid, .font-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px;
}
.chip-card {
  display: grid; gap: 6px; justify-items: center;
  padding: 10px;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-2);
  font: 500 12px var(--font-sans);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.chip-card:hover { border-color: var(--border-strong); color: var(--text); }
.chip-card.is-active {
  border-color: var(--text) !important;
  color: var(--text) !important;
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.chip-preview {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  font: 500 13px var(--font-sans);
  color: var(--text);
}
/* =========================================================================
   UNIVERSAL EFFECTS (all themes, when data-effects="on")
   Inspired by Discord Nitro, iMessage, YouTube, Duolingo, Linear
   ========================================================================= */

/* Message pop-in is now driven by IntersectionObserver — see .jarvis-revealed */
@keyframes msg-pop-in {
  0%   { transform: translateY(8px) scale(.96); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
body[data-effects="on"] .message.jarvis-revealed:not(.jarvis-pop-done) {
  animation: msg-pop-in .35s cubic-bezier(.34,1.56,.64,1) both;
}

/* --- Button ripple (click) --- */
body[data-effects="on"] button:not(.dash-quick-plus):not(.chip-card):active {
  transform: scale(.96) !important;
  transition: transform .1s ease-out;
}

/* --- Send-button lift-off animation --- */
body[data-effects="on"] .send-button:active svg,
body[data-effects="on"] .message-form > button:last-child:active svg {
  animation: send-shoot .5s ease-out;
}
@keyframes send-shoot {
  0%   { transform: translate(0,0) rotate(0); }
  40%  { transform: translate(3px,-3px) rotate(10deg); }
  100% { transform: translate(0,0) rotate(0); }
}

/* --- Icon hover bounce (like Duolingo) --- */
body[data-effects="on"] .primary-nav button:hover > span:first-child,
body[data-effects="on"] .primary-nav button:hover > .ic {
  animation: icon-bounce .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes icon-bounce {
  0%   { transform: none; }
  30%  { transform: translateY(-3px) scale(1.08); }
  60%  { transform: translateY(1px)  scale(.98); }
  100% { transform: none; }
}

/* --- Typing dots (thinking indicator) --- */
.working-message .typing-dots {
  display: inline-flex; gap: 4px; align-items: center;
}
.working-message .typing-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-2);
  animation: typing-bounce 1.2s ease-in-out infinite;
}
.working-message .typing-dots i:nth-child(2) { animation-delay: .15s; }
.working-message .typing-dots i:nth-child(3) { animation-delay: .30s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: .5; }
  30%           { transform: translateY(-6px); opacity: 1;  }
}

/* --- Card lift on hover (Linear-style) --- */
body[data-effects="on"] .dash-card,
body[data-effects="on"] .suggestion-card,
body[data-effects="on"] .dash-hero-widget,
body[data-effects="on"] .dash-quick-btn {
  will-change: transform;
}

/* --- New-message ping in sidebar --- */
body[data-effects="on"] .primary-nav button small:not([hidden]) {
  animation: badge-ping 2s ease-out infinite;
}
@keyframes badge-ping {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 0 0 6px transparent; }
}

/* --- Cursor trail glow (subtle, follows mouse) --- */
body[data-effects="on"]::after {
  content: none;
}
.cursor-trail {
  position: fixed; top: 0; left: 0; z-index: 9998;
  width: 24px; height: 24px; border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, var(--accent-glow), transparent 60%);
  opacity: 0; transition: opacity .3s;
  mix-blend-mode: screen;
}
body[data-effects="on"] .cursor-trail { opacity: 1; }

/* =========================================================================
   THEME-SPECIFIC EXTRAS — layered on top of the base bat/drops/etc.
   ========================================================================= */

/* --- HALLOWEEN extras: pumpkin corners + text glow + fog --- */
html[data-theme="halloween"][data-effects="on"] body {
  animation: pumpkin-flicker 3s ease-in-out infinite;
}
@keyframes pumpkin-flicker {
  0%, 100% { box-shadow: inset 0 0 100px rgba(255,140,26,.05); }
  50%      { box-shadow: inset 0 0 140px rgba(255,140,26,.10); }
}
html[data-theme="halloween"] h1,
html[data-theme="halloween"] h2,
html[data-theme="halloween"] .dash-hero-greet,
html[data-theme="halloween"] .empty-state h2 {
  text-shadow: 0 0 8px rgba(255,140,26,.4), 0 0 24px rgba(255,140,26,.2);
}
html[data-theme="halloween"][data-effects="on"] .conversation-wrap::before {
  content: "🕷"; position: fixed; top: 40px; right: 60px;
  font-size: 20px; opacity: .6; pointer-events: none; z-index: 0;
  animation: spider-dangle 6s ease-in-out infinite;
}
@keyframes spider-dangle {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(20px) rotate(8deg); }
}

/* --- BLOOD MOON extras: heartbeat pulse + moon --- */
html[data-theme="blood-moon"][data-effects="on"] body {
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 60%, 100% { box-shadow: inset 0 0 0 rgba(230,57,70,0); }
  20%           { box-shadow: inset 0 0 80px rgba(230,57,70,.15); }
  40%           { box-shadow: inset 0 0 40px rgba(230,57,70,.08); }
}
html[data-theme="blood-moon"][data-effects="on"] .workspace::before {
  content: ""; position: fixed; top: 40px; right: 40px;
  width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle, #a00, #4a0000);
  box-shadow: 0 0 40px rgba(230,57,70,.6), 0 0 80px rgba(230,57,70,.3);
  pointer-events: none; z-index: 0; opacity: .7;
  animation: moon-throb 4s ease-in-out infinite;
}
@keyframes moon-throb {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 40px rgba(230,57,70,.5); }
  50%      { transform: scale(1.05); box-shadow: 0 0 60px rgba(230,57,70,.7); }
}
html[data-theme="blood-moon"] .message.user > div { border-color: rgba(230,57,70,.3); }

/* --- HAUNTED extras: CRT tear line + occasional flicker --- */
html[data-theme="haunted"][data-effects="on"] body {
  animation: crt-flicker 8s infinite;
}
@keyframes crt-flicker {
  0%, 92%, 100% { filter: none; }
  93% { filter: brightness(1.2) contrast(1.1); }
  94% { filter: brightness(.7); }
  95% { filter: none; }
}
html[data-theme="haunted"][data-effects="on"] .workspace::before {
  content: ""; position: fixed; left: 0; right: 0;
  height: 2px; background: rgba(0,255,119,.35);
  box-shadow: 0 0 8px rgba(0,255,119,.5);
  pointer-events: none; z-index: 9997;
  animation: crt-tear 5s linear infinite;
}
@keyframes crt-tear {
  0%   { top: -5%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}
html[data-theme="haunted"] input,
html[data-theme="haunted"] textarea,
html[data-theme="haunted"] .message > div {
  text-shadow: 0 0 4px rgba(0,255,119,.4);
}

/* --- GHOST extras: floating orb + breath animation --- */
html[data-theme="ghost"][data-effects="on"] .dash-card,
html[data-theme="ghost"][data-effects="on"] .suggestion-card {
  animation: ghost-breath 4s ease-in-out infinite;
}
@keyframes ghost-breath {
  0%, 100% { opacity: 1;   transform: none; }
  50%      { opacity: .92; transform: translateY(-1px); }
}
html[data-theme="ghost"][data-effects="on"] .conversation-wrap::before {
  content: "👻";
  position: fixed; top: 60%; left: -40px;
  font-size: 32px; opacity: .35;
  pointer-events: none; z-index: 0;
  animation: ghost-cross 25s linear infinite;
}
@keyframes ghost-cross {
  0%   { transform: translate(0,0)      scale(.8); opacity: 0; }
  10%  { opacity: .5; }
  50%  { transform: translate(50vw,-40vh) scale(1.1); }
  90%  { opacity: .3; }
  100% { transform: translate(120vw,20vh) scale(.7); opacity: 0; }
}

/* --- WITCH HOUR extras: magic aura around cards + trail --- */
html[data-theme="witch-hour"][data-effects="on"] .dash-card:hover,
html[data-theme="witch-hour"][data-effects="on"] .suggestion-card:hover,
html[data-theme="witch-hour"][data-effects="on"] button.primary-button:hover {
  box-shadow: 0 0 30px rgba(160,32,240,.5), 0 0 60px rgba(64,224,208,.3) !important;
  animation: witch-aura 1.5s ease-in-out infinite;
}
@keyframes witch-aura {
  0%, 100% { filter: hue-rotate(0deg); }
  50%      { filter: hue-rotate(20deg); }
}
html[data-theme="witch-hour"] .cursor-trail {
  background: radial-gradient(circle, rgba(160,32,240,.6), rgba(64,224,208,.3), transparent 65%);
  width: 40px; height: 40px;
}

/* --- CYBERPUNK extras: RGB-split on hover + terminal cursor --- */
html[data-theme="cyberpunk"][data-effects="on"] .dash-hero-greet,
html[data-theme="cyberpunk"][data-effects="on"] .empty-state h2 {
  text-shadow:
    2px 0 0 rgba(255,0,128,.6),
    -2px 0 0 rgba(0,255,224,.6);
  animation: rgb-drift 4s ease-in-out infinite;
}
@keyframes rgb-drift {
  0%, 100% { text-shadow: 2px 0 0 rgba(255,0,128,.6), -2px 0 0 rgba(0,255,224,.6); }
  50%      { text-shadow: -2px 0 0 rgba(255,0,128,.6), 2px 0 0 rgba(0,255,224,.6); }
}
html[data-theme="cyberpunk"][data-effects="on"] .dash-card,
html[data-theme="cyberpunk"][data-effects="on"] .suggestion-card {
  border-color: var(--accent) !important;
  box-shadow:
    inset 0 0 20px rgba(255,0,128,.08),
    0 0 20px rgba(255,0,128,.15) !important;
}
html[data-theme="cyberpunk"] button:hover {
  animation: cyber-glitch .3s ease-out;
}
@keyframes cyber-glitch {
  0%   { transform: none; }
  20%  { transform: translate(2px, -1px); text-shadow: 2px 0 0 #ff0080; }
  40%  { transform: translate(-2px, 1px); text-shadow: -2px 0 0 #00ffe0; }
  60%  { transform: translate(1px, 0);   text-shadow: none; }
  100% { transform: none; }
}

/* --- VAPORWAVE extras: sun + horizon --- */
html[data-theme="vaporwave"][data-effects="on"] .workspace::before {
  content: ""; position: fixed;
  top: 12vh; left: 50%; transform: translateX(-50%);
  width: 180px; height: 180px; border-radius: 50%;
  background: linear-gradient(180deg, #ff77cc 0%, #ff77cc 40%, transparent 40%, transparent 45%, #ff77cc 45%, #ff77cc 55%, transparent 55%, transparent 65%, #ff77cc 65%, #ff77cc 75%, transparent 75%);
  box-shadow: 0 0 80px rgba(255,119,204,.4);
  pointer-events: none; z-index: 0; opacity: .35;
  animation: vw-sun-glow 4s ease-in-out infinite;
}
@keyframes vw-sun-glow {
  0%, 100% { box-shadow: 0 0 60px rgba(255,119,204,.4); }
  50%      { box-shadow: 0 0 100px rgba(255,119,204,.6); }
}

/* --- SUNSET extras: birds + wandering sun --- */
html[data-theme="sunset"][data-effects="on"] .workspace::before {
  content: "";
  position: fixed; top: 8vh; right: 15vw;
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, #f7c15c 0%, #ff6b35 60%, transparent 75%);
  box-shadow: 0 0 80px rgba(255,107,53,.5);
  pointer-events: none; z-index: 0;
  animation: sun-wander 60s ease-in-out infinite;
}
@keyframes sun-wander {
  0%, 100% { transform: translate(0,0); }
  50%      { transform: translate(-30vw, 5vh); }
}

/* --- NORDIC extras: aurora at top --- */
html[data-theme="nordic"][data-effects="on"] .workspace::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; height: 40vh;
  background:
    linear-gradient(180deg, rgba(142,197,252,.20), transparent 70%),
    linear-gradient(90deg,
      transparent 0%, rgba(142,197,252,.30) 20%,
      rgba(224,195,252,.25) 45%,
      rgba(126,255,214,.20) 70%,
      transparent 100%);
  filter: blur(30px);
  pointer-events: none; z-index: 0;
  animation: aurora-wave 12s ease-in-out infinite alternate;
}
@keyframes aurora-wave {
  0%   { transform: translateX(-5%); opacity: .7; }
  100% { transform: translateX(5%);  opacity: 1; }
}

/* --- MIAMI extras: neon horizon --- */
html[data-theme="miami"][data-effects="on"] .workspace::before {
  content: ""; position: fixed;
  bottom: 0; left: 0; right: 0; height: 20vh;
  background:
    linear-gradient(0deg, rgba(255,77,166,.4), transparent),
    repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(0,229,255,.3) 60px, rgba(0,229,255,.3) 62px);
  transform: perspective(300px) rotateX(50deg);
  transform-origin: bottom;
  pointer-events: none; z-index: 0;
  animation: miami-neon 3s ease-in-out infinite;
}
@keyframes miami-neon {
  0%, 100% { filter: hue-rotate(0deg) brightness(1); }
  50%      { filter: hue-rotate(15deg) brightness(1.15); }
}

/* Confetti now runs on the canvas particle system (themes.js) */

/* Reduced motion — suppress all decorative animations */
@media (prefers-reduced-motion: reduce) {
  body::before, body::after,
  html[data-theme] body::before,
  html[data-theme] body::after,
  .workspace::before, .workspace::after,
  .jarvis-fx-canvas { display: none !important; animation: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* Ripple element (JS-inserted on button click) */
.ripple-fx {
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: ripple-grow .6s ease-out;
  pointer-events: none;
}
@keyframes ripple-grow {
  to { transform: scale(4); opacity: 0; }
}

/* Canvas layer — above all UI, below dialogs. pointer-events:none keeps clicks alive. */
.jarvis-fx-canvas { z-index: 9997 !important; pointer-events: none !important; }
dialog { z-index: 10000 !important; }

/* Boot splash — subtle 900ms fade-in with logo glow */
html.jarvis-booting body { animation: jarvis-boot-fade .9s ease-out; }
@keyframes jarvis-boot-fade {
  0%  { opacity: 0; transform: scale(.98); filter: blur(6px); }
  60% { opacity: 1; filter: blur(0); }
  100%{ opacity: 1; transform: none; }
}
html.jarvis-booting .welcome-mark { animation: jarvis-boot-glow .9s ease-out; }
@keyframes jarvis-boot-glow {
  0%  { box-shadow: 0 0 0 rgba(255,255,255,0); transform: scale(.7); }
  60% { box-shadow: 0 0 80px var(--accent-glow); transform: scale(1.1); }
  100%{ box-shadow: 0 0 40px var(--accent-glow); transform: scale(1); }
}

/* Card-reveal on scroll — start slightly translated, fade to place */
.jarvis-reveal-init {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.jarvis-revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Theme cross-fade veil overlay */
.jarvis-theme-veil {
  position: fixed; inset: 0; z-index: 9996;
  background: currentColor;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease-out;
}
.jarvis-theme-veil.jarvis-veiling { opacity: .35; }

/* Global smooth color transitions when theme swaps */
html { transition: background-color .3s ease-out; }
body { transition: background-color .3s ease-out, color .3s ease-out; }
.dash-card, .suggestion-card, .dash-hero-widget, .primary-nav button,
.message-form, .sidebar, .workspace > header, .content-view {
  transition:
    background-color .3s ease-out,
    color .3s ease-out,
    border-color .3s ease-out,
    box-shadow var(--dur) var(--ease-out);
}

/* Effect levels: dezent = weaker glow/particles; episch = stronger */
body[data-fx-level="off"] .jarvis-fx-canvas { display: none !important; }
body[data-fx-level="off"] .cursor-trail { display: none !important; }
body[data-fx-level="off"] * { animation: none !important; }

body[data-fx-level="soft"] .jarvis-fx-canvas { opacity: .5; }
body[data-fx-level="epic"] .jarvis-fx-canvas { opacity: 1; filter: saturate(1.15); }

/* Theme-hover live preview overlay for cards */
.theme-card:hover { transform: translateY(-3px) scale(1.02); }
.theme-card.previewing { box-shadow: 0 0 0 2px var(--text), 0 0 30px var(--accent-glow); }

/* Toast pop-in */
@keyframes jarvis-toast-in {
  0%   { transform: translateY(-20px) scale(.9); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* Spooky cursor for scary themes (halloween/blood-moon/haunted/witch-hour) */
body.jarvis-cursor-spooky {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='4' fill='%23fff' opacity='.9'/><circle cx='12' cy='12' r='9' fill='none' stroke='%23fff' opacity='.5'/></svg>") 12 12, auto;
}
body.jarvis-cursor-spooky button,
body.jarvis-cursor-spooky a,
body.jarvis-cursor-spooky [role="button"],
body.jarvis-cursor-spooky input,
body.jarvis-cursor-spooky select {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='6' fill='%23fff'/><circle cx='12' cy='12' r='11' fill='none' stroke='%23fff' stroke-width='2'/></svg>") 12 12, pointer;
}

/* Pattern previews */
.chip-pattern-none { }
.chip-pattern-dots { background-image: radial-gradient(rgba(255,255,255,.4) 1px, transparent 1px); background-size: 6px 6px; }
.chip-pattern-grid { background-image: linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size: 8px 8px; }
.chip-pattern-noise { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/></svg>"); }
.chip-pattern-circuit { background: repeating-linear-gradient(90deg, transparent 0, transparent 6px, rgba(255,255,255,.2) 6px, rgba(255,255,255,.2) 7px), repeating-linear-gradient(0deg, transparent 0, transparent 6px, rgba(255,255,255,.2) 6px, rgba(255,255,255,.2) 7px); }
/* Button previews */
.chip-button-rounded { border-radius: 10px; }
.chip-button-sharp   { border-radius: 0; }
.chip-button-pill    { border-radius: 999px; }
.chip-button-glass   { background: rgba(255,255,255,.06); backdrop-filter: blur(6px); border-color: rgba(255,255,255,.14); }
.chip-button-retro   { border-radius: 4px; box-shadow: 3px 3px 0 var(--accent); }
/* Font previews */
.chip-font-modern  { font-family: var(--font-sans); }
.chip-font-scifi   { font-family: 'Orbitron', monospace; letter-spacing: .06em; }
.chip-font-classic { font-family: 'Instrument Serif', serif; }
.chip-font-hand    { font-family: 'Caveat', cursive; font-size: 18px; }