:root {
  --background: 222 47% 8%;
  --foreground: 218 45% 96%;
  --primary: 258 92% 68%;
  --primary-foreground: 0 0% 100%;
  --secondary: 202 42% 18%;
  --secondary-foreground: 218 45% 96%;
  --muted: 222 30% 15%;
  --muted-foreground: 218 16% 72%;
  --destructive: 0 72% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 28% 22%;
  --card: 222 42% 11%;
  --shadow-sm: 0 8px 20px hsl(222 47% 2% / 0.22);
  --shadow-md: 0 16px 38px hsl(252 84% 38% / 0.24);
  --shadow-lg: 0 28px 70px hsl(222 47% 2% / 0.34);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(0.22, 1, 0.36, 1);
  --spring: 520ms cubic-bezier(.16, 1.25, .32, 1);
  --radius-sm: 0.75rem;
  --radius-md: 1.1rem;
  --radius-lg: 1.6rem;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: #050711;
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 18% 12%, rgba(124, 58, 237, 0.18), transparent 30%), radial-gradient(circle at 86% 18%, rgba(34, 211, 238, 0.12), transparent 28%), linear-gradient(135deg, #050711 0%, #090b16 52%, #070b18 100%);
  color: hsl(var(--foreground));
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.026) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.026) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
}

button,
a,
textarea {
  transition: transform var(--spring), box-shadow var(--transition-smooth), border-color var(--transition-fast), background-color var(--transition-fast), opacity var(--transition-fast), color var(--transition-fast), filter var(--transition-fast);
}

textarea,
input,
select { font-size: max(16px, 1rem); }

button:hover:not(:disabled) { transform: translateY(-2px); }
button:active:not(:disabled) { transform: translateY(0) scale(.985); }

::selection { background: hsl(var(--primary) / 0.28); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgba(8, 10, 16, 0.5); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #7c3aed, #22d3ee); border-radius: 999px; border: 2px solid #0d1017; }

.app-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, transparent 15%, rgba(124,58,237,.045), transparent 48%, rgba(34,211,238,.035), transparent 82%);
  background-size: 220% 220%;
  animation: gradientDrift 16s ease-in-out infinite;
}

.cursor-aura {
  position: fixed;
  z-index: 0;
  width: 22rem;
  height: 22rem;
  pointer-events: none;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(124,58,237,.13), rgba(34,211,238,.045) 42%, transparent 70%);
  filter: blur(18px);
  transform: translate(-50%, -50%);
  transition: left 90ms linear, top 90ms linear, opacity 220ms ease;
  opacity: .75;
}

.particle-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .38;
  background-image: radial-gradient(circle, rgba(255,255,255,.16) 1px, transparent 1px), radial-gradient(circle, rgba(34,211,238,.22) 1px, transparent 1px);
  background-size: 90px 90px, 140px 140px;
  animation: particleFloat 22s linear infinite;
}

.glass-panel {
  background: linear-gradient(145deg, rgba(18, 23, 38, 0.72), rgba(10, 13, 24, 0.56));
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(22px);
}

.sidebar-shell { box-shadow: 28px 0 90px rgba(0,0,0,.24), inset -1px 0 0 rgba(255,255,255,.04); }
.premium-button { background: linear-gradient(135deg, #8b5cf6, #6366f1 48%, #22d3ee); box-shadow: 0 18px 45px rgba(76,29,149,.34); }
.premium-button:hover { filter: brightness(1.06); box-shadow: 0 24px 55px rgba(124,58,237,.34); }
.active-chat-card, .sidebar-action, .suggestion-card, .message-bubble, .composer { will-change: transform; }
.active-chat-card:hover, .suggestion-card:hover, .message-bubble:hover, .composer:focus-within { transform: translateY(-3px); }
.mode-pill.is-active { box-shadow: 0 10px 34px rgba(124,58,237,.18), inset 0 1px 0 rgba(255,255,255,.08); }

.avatar-glow {
  position: relative;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.38), 0 0 24px rgba(124, 58, 237, 0.55), 0 0 48px rgba(34, 211, 238, 0.18);
  animation: pulseGlow 3.4s ease-in-out infinite;
}

.avatar-glow::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  background: conic-gradient(from 180deg, rgba(124,58,237,.0), rgba(124,58,237,.42), rgba(34,211,238,.34), rgba(124,58,237,.0));
  filter: blur(14px);
  opacity: .5;
  z-index: -1;
}

.hero-card { animation: pageRise 600ms cubic-bezier(.16, 1, .3, 1) both; }
.page-rise { animation: pageRise 520ms cubic-bezier(.16, 1, .3, 1) both; }
.message-enter { animation: messageIn 440ms cubic-bezier(.16,1,.3,1) both; }
.suggestion-card { animation: messageIn 520ms cubic-bezier(.16,1,.3,1) both; }
.toast-in { animation: toastIn 260ms ease both; }
.float-orb { animation: floatOrb 8s ease-in-out infinite; }
.slow-spin { animation: slowSpin 22s linear infinite; }
.typing-dot { animation: typingDot 1.1s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
.loading-bubble { position: relative; overflow: hidden; }
.loading-bubble::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); transform: translateX(-100%); animation: shimmer 1.8s ease-in-out infinite; }
.assistant-stream { animation: messageIn 440ms cubic-bezier(.16,1,.3,1) both, subtleReveal 900ms ease both; }

@keyframes pageRise { from { opacity: 0; transform: translateY(12px) scale(.992); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes messageIn { from { opacity: 0; transform: translateY(14px) scale(.985); filter: blur(4px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes subtleReveal { from { clip-path: inset(0 0 12% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pulseGlow { 0%,100% { filter: saturate(1); transform: translateZ(0) scale(1); } 50% { filter: saturate(1.18); transform: translateZ(0) scale(1.018); } }
@keyframes floatOrb { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-18px,0); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes gradientDrift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes particleFloat { from { background-position: 0 0, 0 0; } to { background-position: 90px 180px, -140px 140px; } }
@keyframes typingDot { 0%,80%,100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes shimmer { to { transform: translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .cursor-aura { display: none; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}