/* ===================== THEME TOKENS ===================== */
:root{
  --bg: #0b1020;
  --surface: #12172b;
  --surface-2: #171d36;
  --text: #eef1fb;
  --text-dim: #9aa3c4;
  --accent: #8b5cf6;
  --accent-2: #22d3ee;
  --border: rgba(255,255,255,.12);
  --radius: 20px;
  --shadow: 0 10px 40px rgba(0,0,0,.35);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: #000;
  --term-fg: #fff;
  --term-accent: #22d3ee;
  --term-border: rgba(255,255,255,.15);
  --term-radius: 28px;
  --term-ease: ease;
  --term-duration: .5s;
}

[data-theme="aurora"]{
  --bg: #0b0f24;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.09);
  --text: #f3f4ff;
  --text-dim: #a9b0d4;
  --accent: #a78bfa;
  --accent-2: #34d9e8;
  --border: rgba(255,255,255,.14);
  --radius: 24px;
  --shadow: 0 20px 60px rgba(80,40,180,.35);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: rgba(10,12,30,.55);
  --term-fg: #f3f4ff;
  --term-accent: #34d9e8;
  --term-border: rgba(255,255,255,.16);
  --term-radius: 28px;
  --term-ease: cubic-bezier(.22,1,.36,1);
  --term-duration: .65s;
}

[data-theme="brutalist"]{
  --bg: #f2f0e8;
  --surface: #ffffff;
  --surface-2: #ffe14d;
  --text: #0a0a0a;
  --text-dim: #333333;
  --accent: #ff3d00;
  --accent-2: #0033ff;
  --border: #0a0a0a;
  --radius: 0px;
  --shadow: 8px 8px 0 #0a0a0a;
  --font-body: 'Space Mono', monospace;
  --font-display: 'Space Mono', monospace;
  --term-bg: #0a0a0a;
  --term-fg: #ffe14d;
  --term-accent: #ff3d00;
  --term-border: #0a0a0a;
  --term-radius: 0px;
  --term-ease: steps(4);
  --term-duration: .22s;
}

[data-theme="skeuomorphic"]{
  --bg: #d9cdb8;
  --surface: linear-gradient(180deg,#f4ecd8,#e2d3b5);
  --surface-2: linear-gradient(180deg,#fff7e6,#eaddc0);
  --text: #3a2e1f;
  --text-dim: #6b5c46;
  --accent: #b5792c;
  --accent-2: #7a9e6b;
  --border: #c2b085;
  --radius: 16px;
  --shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 18px rgba(60,40,10,.35);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: linear-gradient(180deg,#2b2620,#1a1712);
  --term-fg: #f4ecd8;
  --term-accent: #e0b96f;
  --term-border: #574a35;
  --term-radius: 16px;
  --term-ease: cubic-bezier(.34,1.56,.64,1);
  --term-duration: .5s;
}

[data-theme="glassmorphism"]{
  --bg: #1e2749;
  --surface: rgba(255,255,255,.12);
  --surface-2: rgba(255,255,255,.18);
  --text: #ffffff;
  --text-dim: #cfd6ff;
  --accent: #66e0c3;
  --accent-2: #7aa2ff;
  --border: rgba(255,255,255,.35);
  --radius: 22px;
  --shadow: 0 8px 32px rgba(0,0,0,.25);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: rgba(255,255,255,.12);
  --term-fg: #ffffff;
  --term-accent: #66e0c3;
  --term-border: rgba(255,255,255,.35);
  --term-radius: 22px;
  --term-ease: ease;
  --term-duration: .55s;
}

[data-theme="neumorphism"]{
  --bg: #e6e9ef;
  --surface: #e6e9ef;
  --surface-2: #e6e9ef;
  --text: #2c3142;
  --text-dim: #6b7186;
  --accent: #6c7bff;
  --accent-2: #ff8fab;
  --border: transparent;
  --radius: 24px;
  --shadow: 9px 9px 18px #c3c6cd, -9px -9px 18px #ffffff;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: #e6e9ef;
  --term-fg: #2c3142;
  --term-accent: #6c7bff;
  --term-border: transparent;
  --term-radius: 24px;
  --term-ease: ease;
  --term-duration: .45s;
}

[data-theme="cyberpunk"]{
  --bg: #08060f;
  --surface: rgba(15,10,30,.85);
  --surface-2: rgba(25,15,45,.9);
  --text: #f1f0ff;
  --text-dim: #9a8fd6;
  --accent: #ff2ea6;
  --accent-2: #00f6ff;
  --border: rgba(255,46,166,.45);
  --radius: 6px;
  --shadow: 0 0 24px rgba(0,246,255,.25), 0 0 2px rgba(255,46,166,.6);
  --font-body: 'Space Mono', monospace;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: #05030a;
  --term-fg: #00f6ff;
  --term-accent: #ff2ea6;
  --term-border: rgba(255,46,166,.5);
  --term-radius: 6px;
  --term-ease: steps(6);
  --term-duration: .4s;
}

[data-theme="claymorphism"]{
  --bg: #fbeee6;
  --surface: #fff3ec;
  --surface-2: #ffe3d3;
  --text: #4a2e2b;
  --text-dim: #8a6a63;
  --accent: #ff8a65;
  --accent-2: #6fcf97;
  --border: rgba(74,46,43,.08);
  --radius: 32px;
  --shadow: 0 14px 0 -4px rgba(255,255,255,.7) inset, 0 20px 30px rgba(200,120,90,.25);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: #ffe3d3;
  --term-fg: #4a2e2b;
  --term-accent: #ff8a65;
  --term-border: rgba(74,46,43,.08);
  --term-radius: 32px;
  --term-ease: cubic-bezier(.68,-0.55,.27,1.55);
  --term-duration: .55s;
}

[data-theme="vaporwave"]{
  --bg: #1a0b2e;
  --surface: rgba(255,255,255,.08);
  --surface-2: rgba(255,255,255,.14);
  --text: #ffeaff;
  --text-dim: #d9a9ff;
  --accent: #ff71ce;
  --accent-2: #05ffa1;
  --border: rgba(255,255,255,.25);
  --radius: 2px;
  --shadow: 0 10px 40px rgba(255,113,206,.35);
  --font-body: 'Space Mono', monospace;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: linear-gradient(180deg,#2a1250,#1a0b2e);
  --term-fg: #ffeaff;
  --term-accent: #ff71ce;
  --term-border: rgba(255,255,255,.25);
  --term-radius: 2px;
  --term-ease: ease-in-out;
  --term-duration: .6s;
}

[data-theme="minimal"]{
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f6f6f7;
  --text: #111114;
  --text-dim: #6b6b73;
  --accent: #111114;
  --accent-2: #6b6b73;
  --border: #e4e4e7;
  --radius: 8px;
  --shadow: none;
  --font-body: 'Inter', sans-serif;
  --font-display: 'Inter', sans-serif;
  --term-bg: #ffffff;
  --term-fg: #111114;
  --term-accent: #111114;
  --term-border: #e4e4e7;
  --term-radius: 8px;
  --term-ease: linear;
  --term-duration: .25s;
}

[data-theme="liquidglass"]{
  --bg: #05070d;
  --surface: rgba(255,255,255,.08);
  --surface-2: rgba(255,255,255,.14);
  --text: #f5f7ff;
  --text-dim: #aab3d1;
  --accent: #7dd3fc;
  --accent-2: #c4b5fd;
  --border: rgba(255,255,255,.4);
  --radius: 28px;
  --shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: rgba(255,255,255,.1);
  --term-fg: #f5f7ff;
  --term-accent: #7dd3fc;
  --term-border: rgba(255,255,255,.4);
  --term-radius: 28px;
  --term-ease: cubic-bezier(.16,1,.3,1);
  --term-duration: .6s;
}

[data-theme="bento"]{
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #eef1ff;
  --text: #14151a;
  --text-dim: #5b5f6d;
  --accent: #6366f1;
  --accent-2: #f59e0b;
  --border: #e5e7eb;
  --radius: 28px;
  --shadow: 0 2px 0 #e5e7eb, 0 12px 24px rgba(20,21,26,.08);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: #ffffff;
  --term-fg: #14151a;
  --term-accent: #6366f1;
  --term-border: #e5e7eb;
  --term-radius: 28px;
  --term-ease: cubic-bezier(.22,1,.36,1);
  --term-duration: .45s;
}

[data-theme="dopamine"]{
  --bg: #0d0221;
  --surface: rgba(255,255,255,.08);
  --surface-2: rgba(255,255,255,.14);
  --text: #ffffff;
  --text-dim: #d9c9ff;
  --accent: #ff5cc8;
  --accent-2: #ffb84d;
  --border: rgba(255,255,255,.25);
  --radius: 26px;
  --shadow: 0 20px 60px rgba(255,92,200,.35);
  --font-body: 'Inter', sans-serif;
  --font-display: 'Space Grotesk', sans-serif;
  --term-bg: rgba(255,255,255,.1);
  --term-fg: #ffffff;
  --term-accent: #ff5cc8;
  --term-border: rgba(255,255,255,.3);
  --term-radius: 26px;
  --term-ease: cubic-bezier(.68,-0.55,.27,1.55);
  --term-duration: .5s;
}

/* Appearance mode: a neutral light/dark shell layered on top of whichever theme is active,
   keeping that theme's own accent colors, radius, and font. "Colorful" is each theme's own
   natural (default) palette — no override needed. */
[data-mode="dark"]{
  --bg: #0a0a10;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.1);
  --text: #f2f2f7;
  --text-dim: #a0a0ad;
  --border: rgba(255,255,255,.14);
  --term-bg: rgba(255,255,255,.06);
  --term-fg: #f2f2f7;
  --term-border: rgba(255,255,255,.18);
}
[data-mode="light"]{
  --bg: #f7f7f9;
  --surface: #ffffff;
  --surface-2: #f0f0f3;
  --text: #111114;
  --text-dim: #5b5b66;
  --border: #e3e3e8;
  --term-bg: #ffffff;
  --term-fg: #111114;
  --term-border: #e3e3e8;
}
html,body{ background: var(--bg); color: var(--text); font-family: var(--font-body); scroll-behavior: smooth; transition: background .4s ease, color .4s ease; }
h1,h2,h3, .display{ font-family: var(--font-display); }

/* Aurora animated backdrop */
[data-theme="aurora"] body{
  background:
    radial-gradient(60% 50% at 15% 10%, rgba(167,139,250,.35), transparent 60%),
    radial-gradient(50% 40% at 85% 15%, rgba(52,217,232,.3), transparent 60%),
    radial-gradient(60% 50% at 50% 90%, rgba(236,72,153,.25), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="brutalist"] body{ background: var(--bg); }
[data-theme="skeuomorphic"] body{
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 2px, transparent 2px 6px),
    radial-gradient(120% 80% at 50% -10%, #efe3c9, var(--bg));
}
[data-theme="glassmorphism"] body{
  background:
    radial-gradient(50% 40% at 20% 20%, rgba(122,162,255,.4), transparent 60%),
    radial-gradient(50% 40% at 80% 70%, rgba(102,224,195,.3), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="neumorphism"] body{ background: var(--bg); }
[data-theme="cyberpunk"] body{
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px),
    radial-gradient(60% 40% at 20% 0%, rgba(255,46,166,.25), transparent 60%),
    radial-gradient(60% 40% at 90% 100%, rgba(0,246,255,.2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="claymorphism"] body{ background: var(--bg); }
[data-theme="vaporwave"] body{
  background:
    linear-gradient(180deg, rgba(255,113,206,.25), transparent 40%),
    radial-gradient(70% 50% at 50% 100%, rgba(5,255,161,.2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="minimal"] body{ background: var(--bg); }
[data-theme="liquidglass"] body{
  background:
    radial-gradient(55% 45% at 20% 15%, rgba(125,211,252,.28), transparent 60%),
    radial-gradient(55% 45% at 85% 25%, rgba(196,181,253,.25), transparent 60%),
    radial-gradient(60% 50% at 50% 95%, rgba(255,255,255,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
[data-theme="bento"] body{
  background:
    repeating-linear-gradient(0deg, rgba(20,21,26,.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(20,21,26,.03) 0 1px, transparent 1px 32px),
    var(--bg);
}
[data-theme="dopamine"] body{
  background:
    radial-gradient(50% 40% at 10% 10%, rgba(255,92,200,.4), transparent 60%),
    radial-gradient(50% 40% at 90% 20%, rgba(255,184,77,.35), transparent 60%),
    radial-gradient(55% 45% at 50% 100%, rgba(168,85,247,.35), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* Light/dark appearance modes replace any theme's decorative body gradient with a flat fill,
   since those gradients were tuned to each theme's own default background color. */
[data-mode="dark"] body, [data-mode="light"] body{ background: var(--bg) !important; background-attachment: initial; }

.surface{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.surface-2{ background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
[data-theme="glassmorphism"] .surface, [data-theme="glassmorphism"] .surface-2{ backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
[data-theme="aurora"] .surface, [data-theme="aurora"] .surface-2{ backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
[data-theme="liquidglass"] .surface, [data-theme="liquidglass"] .surface-2{ backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); }
[data-theme="dopamine"] .surface, [data-theme="dopamine"] .surface-2{ backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }

.btn{
  font-family: var(--font-display);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.btn:active{ transform: translateY(0); }
[data-theme="brutalist"] .btn:hover{ transform: translate(-2px,-2px); box-shadow: 10px 10px 0 #0a0a0a; }
[data-theme="brutalist"] .btn:active{ transform: translate(4px,4px); box-shadow: 2px 2px 0 #0a0a0a; }
[data-theme="neumorphism"] .btn:hover{ box-shadow: 6px 6px 14px #c3c6cd, -6px -6px 14px #ffffff; }
[data-theme="neumorphism"] .btn:active{ box-shadow: inset 4px 4px 10px #c3c6cd, inset -4px -4px 10px #ffffff; }
[data-theme="skeuomorphic"] .btn{ background: linear-gradient(180deg,#fff7e6,#d8c39c); }
[data-theme="skeuomorphic"] .btn:active{ box-shadow: inset 0 3px 8px rgba(0,0,0,.35); }
[data-theme="cyberpunk"] .btn:hover{ box-shadow: 0 0 26px rgba(0,246,255,.55), 0 0 10px rgba(255,46,166,.6); }
[data-theme="claymorphism"] .btn:active{ box-shadow: inset 0 6px 12px rgba(74,46,43,.2); transform: translateY(2px); }
[data-theme="vaporwave"] .btn:hover{ box-shadow: 0 0 24px rgba(5,255,161,.5); }
[data-theme="minimal"] .btn{ box-shadow: none; }
[data-theme="minimal"] .btn:hover{ background: var(--surface-2); transform: none; }
[data-theme="liquidglass"] .btn:hover{ box-shadow: 0 0 30px rgba(125,211,252,.4), inset 0 1px 0 rgba(255,255,255,.6); }
[data-theme="bento"] .btn:hover{ box-shadow: 0 4px 0 #e5e7eb, 0 16px 28px rgba(20,21,26,.12); }
[data-theme="dopamine"] .btn:hover{ box-shadow: 0 0 28px rgba(255,92,200,.55); }

.btn-accent{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #0b0f24; border: none; }
[data-theme="brutalist"] .btn-accent{ color:#fff; border: 1px solid var(--border); border-radius:0; }

.pill{ border-radius: 999px; }
[data-theme="brutalist"] .pill{ border-radius: 0; }

.text-dim{ color: var(--text-dim); }

/* Section highlight pulse when the agent focuses a section */
.ui-highlight{ animation: uiHighlight 1.8s ease; }
@keyframes uiHighlight{
  0%{ box-shadow: 0 0 0 0 rgba(139,92,246,.0); }
  15%{ box-shadow: 0 0 0 6px rgba(139,92,246,.45); }
  100%{ box-shadow: 0 0 0 0 rgba(139,92,246,0); }
}

/* Theme switcher buttons */
.theme-btn{ width: clamp(2.4rem, 9vw, 4rem); height: clamp(2.4rem, 9vw, 4rem); padding: 0; }
.theme-icon svg{ width: clamp(1.5rem, 4.4vw, 2.25rem); height: clamp(1.5rem, 4.4vw, 2.25rem); display: block; }
@media (min-width:640px){ .theme-btn span:last-child{ display: block; } }

/* Light / dark / colorful appearance switch */
.appearance-switch{ border-radius: 999px; }
[data-theme="brutalist"] .appearance-switch{ border-radius: 0; }
.appearance-btn{
  border-radius: 999px;
  color: var(--text-dim);
  transition: background .2s ease, color .2s ease;
}
[data-theme="brutalist"] .appearance-btn{ border-radius: 0; }
.appearance-btn-active{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #0b0f24;
}
[data-theme="brutalist"] .appearance-btn-active{ color: #fff; }

/* Chat orb animation */
.orb{
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent));
  filter: blur(0px);
  animation: spin 8s linear infinite, breathe 3.2s ease-in-out infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }
@keyframes breathe{ 0%,100%{ transform: scale(1) rotate(0deg); } 50%{ transform: scale(1.06) rotate(0deg); } }
.orb-core{ background: var(--surface); }

.thinking-dot{ animation: dotPulse 1.2s ease-in-out infinite; }
.thinking-dot:nth-child(2){ animation-delay: .15s; }
.thinking-dot:nth-child(3){ animation-delay: .3s; }
@keyframes dotPulse{ 0%,60%,100%{ opacity:.25; transform: translateY(0);} 30%{ opacity:1; transform: translateY(-3px);} }

/* Terminal-style chat: command-window box, huge text, input XOR output, theme-aware skin */
.terminal{
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  transition:
    top var(--term-duration) var(--term-ease),
    left var(--term-duration) var(--term-ease),
    right var(--term-duration) var(--term-ease),
    bottom var(--term-duration) var(--term-ease),
    width var(--term-duration) var(--term-ease),
    height var(--term-duration) var(--term-ease),
    border-radius var(--term-duration) var(--term-ease);
}
.terminal-text{
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  color: var(--term-fg);
  line-height: 1.05;
  font-size: clamp(1.4rem, 4.2vw, 60px);
  word-break: break-word;
  white-space: pre-wrap;
}
.terminal-reply{ color: var(--term-accent); }
.terminal-cursor{
  display: inline-block;
  width: 0.5ch;
  height: clamp(1.2rem, 3.6vw, 52px);
  background: var(--term-fg);
  animation: blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity: 0; } }
.terminal-dot{ background: var(--term-accent); }
.terminal-hint{
  font-family: 'Space Mono', monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--term-fg);
  opacity: .4;
}

/* Terminal layout modes: full hero, or small docked widget once scrolled */
.terminal.mode-hero{
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  border-radius: var(--term-radius);
  padding: 2.5rem;
  margin-top: 1rem;
}
@media (max-width: 640px){ .terminal.mode-hero{ padding: 1.25rem; } }

.terminal.mode-mini{
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  width: min(22rem, calc(100vw - 2rem));
  height: 16rem;
  border-radius: var(--term-radius);
  padding: 1.25rem;
  z-index: 45;
}
.terminal.mode-mini .terminal-text{ font-size: clamp(1rem, 2.8vw, 1.6rem); }
.terminal.mode-mini .terminal-cursor{ height: 1.4rem; }

/* Per-theme entrance animation when the chat docks into its small widget — each theme feels different */
[data-theme="aurora"] .terminal.mode-mini, [data-theme="aurora"] .terminal.mode-split{ animation: dockAurora .65s cubic-bezier(.22,1,.36,1) both; }
@keyframes dockAurora{ from{ opacity: 0; transform: translateY(30px) scale(.92); filter: blur(8px); } to{ opacity: 1; transform: none; filter: blur(0); } }

[data-theme="brutalist"] .terminal.mode-mini, [data-theme="brutalist"] .terminal.mode-split{ animation: dockBrutalist .22s steps(4) both; }
@keyframes dockBrutalist{ from{ opacity: 0; transform: translate(24px,-24px); } to{ opacity: 1; transform: none; } }

[data-theme="skeuomorphic"] .terminal.mode-mini, [data-theme="skeuomorphic"] .terminal.mode-split{ animation: dockSkeuo .5s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes dockSkeuo{ from{ opacity: 0; transform: perspective(600px) rotateX(25deg) translateY(24px); } to{ opacity: 1; transform: none; } }

[data-theme="glassmorphism"] .terminal.mode-mini, [data-theme="glassmorphism"] .terminal.mode-split{ animation: dockGlass .55s ease both; }
@keyframes dockGlass{ from{ opacity: 0; transform: scale(1.06); } to{ opacity: 1; transform: none; } }

[data-theme="neumorphism"] .terminal.mode-mini, [data-theme="neumorphism"] .terminal.mode-split{ animation: dockNeu .45s ease both; }
@keyframes dockNeu{ from{ opacity: 0; transform: scale(.9); } to{ opacity: 1; transform: scale(1); } }

[data-theme="cyberpunk"] .terminal.mode-mini, [data-theme="cyberpunk"] .terminal.mode-split{ animation: dockCyber .4s steps(6) both; }
@keyframes dockCyber{ 0%{ opacity: 0; transform: translateX(24px) skewX(10deg); } 60%{ opacity: 1; transform: translateX(-4px) skewX(-3deg); } 100%{ opacity: 1; transform: none; } }

[data-theme="claymorphism"] .terminal.mode-mini, [data-theme="claymorphism"] .terminal.mode-split{ animation: dockClay .55s cubic-bezier(.68,-0.55,.27,1.55) both; }
@keyframes dockClay{ from{ opacity: 0; transform: scale(.65); } to{ opacity: 1; transform: scale(1); } }

[data-theme="vaporwave"] .terminal.mode-mini, [data-theme="vaporwave"] .terminal.mode-split{ animation: dockVapor .6s ease-in-out both; }
@keyframes dockVapor{ from{ opacity: 0; transform: translateY(24px); filter: hue-rotate(60deg); } to{ opacity: 1; transform: none; filter: hue-rotate(0deg); } }

[data-theme="minimal"] .terminal.mode-mini, [data-theme="minimal"] .terminal.mode-split{ animation: dockMinimal .25s linear both; }
@keyframes dockMinimal{ from{ opacity: 0; } to{ opacity: 1; } }

[data-theme="liquidglass"] .terminal.mode-mini, [data-theme="liquidglass"] .terminal.mode-split{ animation: dockLiquidGlass .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes dockLiquidGlass{ from{ opacity: 0; transform: scale(.85); filter: blur(10px); } to{ opacity: 1; transform: scale(1); filter: blur(0); } }

[data-theme="bento"] .terminal.mode-mini, [data-theme="bento"] .terminal.mode-split{ animation: dockBento .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes dockBento{ from{ opacity: 0; transform: translateY(16px) scale(.96); } to{ opacity: 1; transform: none; } }

[data-theme="dopamine"] .terminal.mode-mini, [data-theme="dopamine"] .terminal.mode-split{ animation: dockDopamine .5s cubic-bezier(.68,-0.55,.27,1.55) both; }
@keyframes dockDopamine{ from{ opacity: 0; transform: scale(.6) rotate(-4deg); } to{ opacity: 1; transform: scale(1) rotate(0); } }

#hero{ transition: min-height .6s ease; }

/* Split view "fluid content" reveal: whenever a hidden section becomes visible again, it
   animates in using the ACTIVE THEME's own easing/duration tokens (the same ones driving the
   chat's dock animation) — so brutalist snaps in, claymorphism bounces, aurora drifts in blurred,
   etc., automatically, without a bespoke keyframe set per theme. */
.section-reveal{ animation: sectionReveal var(--term-duration) var(--term-ease) both; }
@keyframes sectionReveal{
  from{ opacity: 0; transform: translateY(18px) scale(.98); }
  to{ opacity: 1; transform: none; }
}

/* Split view: chat pinned as a fixed left column; the rest of the page (#page-content)
   shifts right so it's still the real, fully-interactive page, just side-by-side with DH-Tron. */
.terminal.mode-split{
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 26rem;
  border-radius: 0;
  padding: 1.5rem;
  z-index: 46;
}
.terminal.mode-split .terminal-text{ font-size: clamp(1.1rem, 3vw, 2rem); }
@media (max-width: 640px){
  /* Desktop split view is a left-fixed side panel; on mobile there's no room for a side-by-side
     layout, so split becomes a top band (chat) over the scrollable page (below) instead —
     a vertical split rather than horizontal. */
  .terminal.mode-split{
    max-width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: 25vh;
    border-radius: 0 0 var(--term-radius) var(--term-radius);
  }
  .terminal.mode-split .terminal-text{ font-size: clamp(.95rem, 3.2vw, 1.3rem); }

  /* Several themes (and dark mode, on any theme) use a translucent --term-bg for a glass effect
     that reads fine on desktop with a blurred backdrop, but on mobile the docked/split terminal
     sits directly over scrolled page text, and the blur+transparency makes both hard to read.
     --bg is always a solid, theme-matching color, so swap to it here instead of hardcoding a
     replacement per theme. mode-hero is left alone — it overlaps the 3D background, not text. */
  .terminal.mode-mini, .terminal.mode-split{ background: var(--bg); }
}

#page-content{
  transition: margin-left .45s cubic-bezier(.22,1,.36,1), margin-top .45s cubic-bezier(.22,1,.36,1);
}
@media (min-width: 640px){
  body.split-active #page-content{ margin-left: 26rem; }
}
@media (max-width: 640px){
  /* Matches .terminal.mode-split's height above — chat takes the top quarter of the screen,
     the site takes the rest, scrollable underneath it. */
  body.split-active #page-content{ margin-top: 25vh; }
}

/* The docked mini terminal is fixed to the bottom-left and, on narrow screens, nearly full width
   — without this, it sits on top of the footer text once scrolled to the bottom of the page. */
@media (max-width: 640px){
  body.terminal-docked footer{ padding-bottom: 18rem; }
}

/* Mobile nav: the full nav is `hidden md:flex`, so narrow screens get a hamburger button
   (next to the CTA) that opens this dropdown instead. */
.mobile-menu-btn{
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: currentColor;
}
[data-theme="brutalist"] .mobile-menu-btn{ border-radius: 0; }
.mobile-nav-panel{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 0 1rem 1rem;
  font-size: .875rem;
}
.mobile-nav-panel a{
  padding: .65rem .85rem;
  border-radius: var(--radius);
  color: var(--text-dim);
}
.mobile-nav-panel a:hover{ background: var(--surface-2); color: currentColor; }

.terminal-btn-row{
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.split-toggle-btn, .help-toggle-btn{
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--term-bg);
  border: 1px solid var(--term-border);
  color: var(--term-fg);
  opacity: .9;
  transition: opacity .15s ease, transform .15s ease;
}
.split-toggle-btn:hover, .help-toggle-btn:hover{ opacity: 1; transform: scale(1.06); }
[data-theme="brutalist"] .split-toggle-btn, [data-theme="brutalist"] .help-toggle-btn{ border-radius: 0; }

/* Help modal */
.help-modal-backdrop{
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.help-modal{
  width: 100%;
  max-width: 30rem;
  max-height: 85vh;
  overflow-y: auto;
  padding: 1.5rem 1.75rem;
}
.help-close-btn{
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: .6;
  transition: opacity .15s ease;
}
.help-close-btn:hover{ opacity: 1; }
[data-theme="brutalist"] .help-close-btn{ border-radius: 0; }
.help-modal-list dt{ font-weight: 700; margin-top: 1rem; }
.help-modal-list dt:first-child{ margin-top: 0; }
.help-modal-list dd{ color: var(--text-dim); font-size: .875rem; margin-top: .2rem; }
.help-icon-inline{ display: inline-flex; vertical-align: -1px; margin-left: .25rem; opacity: .7; }

/* Ambient 3D background canvas — sits behind all page content, in front of the plain body color */
#bg-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .5;
  transition: opacity .5s ease;
}
/* Everything else needs to explicitly sit above the canvas since it's the first element in body */
header, #hero, #features, #pricing, #testimonials, #contact, main, footer{
  position: relative;
  z-index: 1;
}
/* #chat (the terminal) lives inside #hero, which — like its siblings above — has its own
   z-index:1 stacking context. A fixed-position descendant's z-index is scoped to that context,
   not the page root, so #chat's z-index:45/46 only ever competed against #hero's siblings using
   #hero's z-index (1) — a tie later sections/footer win by DOM order, painting over the docked/
   split terminal entirely. Raise #hero above its siblings whenever the terminal is actually
   floating, so it can escape. */
#hero.hero-elevated{ z-index: 50; }
[data-theme="brutalist"] #bg-canvas{ opacity: .85; }
[data-theme="cyberpunk"] #bg-canvas{ opacity: .7; }
[data-theme="vaporwave"] #bg-canvas{ opacity: .6; }
[data-theme="minimal"] #bg-canvas{ opacity: .12; }
[data-theme="neumorphism"] #bg-canvas{ opacity: .35; }
[data-theme="liquidglass"] #bg-canvas{ opacity: .4; }
[data-theme="bento"] #bg-canvas{ opacity: .3; }
[data-theme="dopamine"] #bg-canvas{ opacity: .65; }

::-webkit-scrollbar{ width: 10px; }
::-webkit-scrollbar-thumb{ background: var(--accent); border-radius: 999px; }