/* ── Base ───────────────────────────────────────────────── */
textarea, input, button { font-size: 16px; }
html { background: var(--bg-base); }
html, body { height: 100%; margin: 0; padding: 0; overscroll-behavior: none; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

:root {
  --app-height: 100vh;
  --pad-xs: 0.375rem;
  --pad-sm: 0.5rem;
  --pad-md: 0.75rem;
  --pad-lg: 1rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-full: 9999px;
  --sidebar-width: 280px;

  /* Theme colors — defaults to Sith */
  --bg-base: #0a0a0f;
  --bg-grad-1: rgba(220,38,38,0.20);
  --bg-grad-2: rgba(249,115,22,0.15);
  --bg-grad-3: rgba(127,29,29,0.18);
  --accent-1: #dc2626;
  --accent-2: #991b1b;
  --accent-gradient: linear-gradient(135deg, #dc2626, #991b1b);
  --accent-shadow: rgba(220,38,38,0.3);
  --accent-glow: rgba(220,38,38,0.15);
  --accent-glow-strong: rgba(220,38,38,0.35);
  --glass-bg: rgba(10,10,15,0.7);
  --glass-bg-light: rgba(20,15,18,0.55);
  --glass-border: rgba(220,38,38,0.08);
  --glass-border-light: rgba(220,38,38,0.15);
  --particle-1: #dc2626;
  --particle-2: #f97316;
  --link-color: #f97316;
  --code-bg: rgba(80,30,30,0.7);
  --code-block-bg: rgba(10,10,10,0.9);
  --success-color: #f59e0b;
  --connected-color: #34d399;
  --error-color: #f87171;
}
@supports (height: 100dvh) { :root { --app-height: 100dvh; } }

/* ── Theme: Ocean ──────────────────────────────────────── */
[data-theme="ocean"] {
  --bg-base: #0a0f1a;
  --bg-grad-1: rgba(14,165,233,0.18);
  --bg-grad-2: rgba(6,182,212,0.12);
  --bg-grad-3: rgba(3,105,161,0.15);
  --accent-1: #0ea5e9;
  --accent-2: #0369a1;
  --accent-gradient: linear-gradient(135deg, #0ea5e9, #0369a1);
  --accent-shadow: rgba(14,165,233,0.3);
  --accent-glow: rgba(14,165,233,0.15);
  --accent-glow-strong: rgba(14,165,233,0.35);
  --glass-bg: rgba(10,15,26,0.7);
  --glass-bg-light: rgba(15,20,30,0.55);
  --glass-border: rgba(14,165,233,0.08);
  --glass-border-light: rgba(14,165,233,0.15);
  --particle-1: #0ea5e9;
  --particle-2: #06b6d4;
  --link-color: #38bdf8;
  --code-bg: rgba(20,40,60,0.7);
  --code-block-bg: rgba(5,10,20,0.9);
  --success-color: #38bdf8;
}

/* ── Theme: Emerald ────────────────────────────────────── */
[data-theme="emerald"] {
  --bg-base: #0a0f0a;
  --bg-grad-1: rgba(16,185,129,0.18);
  --bg-grad-2: rgba(52,211,153,0.12);
  --bg-grad-3: rgba(4,120,87,0.15);
  --accent-1: #10b981;
  --accent-2: #047857;
  --accent-gradient: linear-gradient(135deg, #10b981, #047857);
  --accent-shadow: rgba(16,185,129,0.3);
  --accent-glow: rgba(16,185,129,0.15);
  --accent-glow-strong: rgba(16,185,129,0.35);
  --glass-bg: rgba(10,15,10,0.7);
  --glass-bg-light: rgba(15,22,15,0.55);
  --glass-border: rgba(16,185,129,0.08);
  --glass-border-light: rgba(16,185,129,0.15);
  --particle-1: #10b981;
  --particle-2: #a3e635;
  --link-color: #34d399;
  --code-bg: rgba(20,50,30,0.7);
  --code-block-bg: rgba(5,15,5,0.9);
  --success-color: #a3e635;
}

/* ── Theme: Sunset ─────────────────────────────────────── */
[data-theme="sunset"] {
  --bg-base: #0f0a0a;
  --bg-grad-1: rgba(249,115,22,0.18);
  --bg-grad-2: rgba(251,191,36,0.12);
  --bg-grad-3: rgba(194,65,12,0.15);
  --accent-1: #f97316;
  --accent-2: #c2410c;
  --accent-gradient: linear-gradient(135deg, #f97316, #c2410c);
  --accent-shadow: rgba(249,115,22,0.3);
  --accent-glow: rgba(249,115,22,0.15);
  --accent-glow-strong: rgba(249,115,22,0.35);
  --glass-bg: rgba(15,10,10,0.7);
  --glass-bg-light: rgba(22,15,12,0.55);
  --glass-border: rgba(249,115,22,0.08);
  --glass-border-light: rgba(249,115,22,0.15);
  --particle-1: #f97316;
  --particle-2: #fbbf24;
  --link-color: #fb923c;
  --code-bg: rgba(50,30,15,0.7);
  --code-block-bg: rgba(15,8,5,0.9);
  --success-color: #fbbf24;
}

/* ── Theme: Phantom ────────────────────────────────────── */
[data-theme="phantom"] {
  --bg-base: #0c0a10;
  --bg-grad-1: rgba(139,92,246,0.18);
  --bg-grad-2: rgba(167,139,250,0.12);
  --bg-grad-3: rgba(91,33,182,0.15);
  --accent-1: #8b5cf6;
  --accent-2: #5b21b6;
  --accent-gradient: linear-gradient(135deg, #8b5cf6, #5b21b6);
  --accent-shadow: rgba(139,92,246,0.3);
  --accent-glow: rgba(139,92,246,0.15);
  --accent-glow-strong: rgba(139,92,246,0.35);
  --glass-bg: rgba(12,10,16,0.7);
  --glass-bg-light: rgba(18,15,25,0.55);
  --glass-border: rgba(139,92,246,0.08);
  --glass-border-light: rgba(139,92,246,0.15);
  --particle-1: #8b5cf6;
  --particle-2: #6366f1;
  --link-color: #a78bfa;
  --code-bg: rgba(35,20,60,0.7);
  --code-block-bg: rgba(10,5,20,0.9);
  --success-color: #a78bfa;
}

/* ── Focus ring ────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--accent-1); outline-offset: 2px; }
input:focus-visible, textarea:focus-visible { outline: none; }

/* ── Animated gradient background ──────────────────────── */
#bgGradient {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, var(--bg-grad-1) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 80% 20%, var(--bg-grad-2) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 60% 80%, var(--bg-grad-3) 0%, transparent 50%),
    var(--bg-base);
  animation: gradientShift 20s ease-in-out infinite alternate;
}
@keyframes gradientShift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%; }
  50%  { background-position: 30% 20%, 70% 40%, 80% 60%; }
  100% { background-position: 10% 50%, 90% 10%, 40% 80%; }
}

/* ── Animations ────────────────────────────────────────── */
@keyframes bubbleIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.95); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.01); }
  80%  { transform: translateY(1px) scale(0.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dotWave {
  0%,100% { transform: translateY(0); opacity: 0.3; }
  50%     { transform: translateY(-6px); opacity: 1; }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow); }
  50%     { box-shadow: 0 0 0 4px var(--accent-glow-strong), 0 0 35px var(--accent-glow); }
}
@keyframes stopPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-shadow); }
  50%     { box-shadow: 0 0 0 6px transparent; }
}
@keyframes fadeInPreview {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* ── Scrollbar ─────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-thumb { background: var(--glass-border-light); border-radius: 3px; }

/* ── Accessibility ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}