:root {
  --background: 247 38% 8%;
  --foreground: 222 42% 94%;
  --primary: 263 76% 78%;
  --primary-foreground: 252 42% 10%;
  --secondary: 188 58% 72%;
  --secondary-foreground: 215 38% 9%;
  --muted: 240 18% 68%;
  --muted-foreground: 240 18% 78%;
  --destructive: 354 72% 66%;
  --destructive-foreground: 0 0% 100%;
  --border: 246 30% 31%;
  --card: 246 34% 14%;
  --shadow-sm: 0 8px 24px rgba(5, 8, 22, 0.18);
  --shadow-md: 0 18px 48px rgba(5, 8, 22, 0.28);
  --shadow-lg: 0 28px 80px rgba(5, 8, 22, 0.42);
  --transition-fast: 160ms ease;
  --transition-smooth: 360ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 30px;
}

.dark {
  --background: 247 38% 8%;
  --foreground: 222 42% 94%;
  --primary: 263 76% 78%;
  --primary-foreground: 252 42% 10%;
  --secondary: 188 58% 72%;
  --secondary-foreground: 215 38% 9%;
  --muted: 240 18% 68%;
  --muted-foreground: 240 18% 78%;
  --destructive: 354 72% 66%;
  --destructive-foreground: 0 0% 100%;
  --border: 246 30% 31%;
  --card: 246 34% 14%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: hsl(var(--foreground));
  background:
    radial-gradient(circle at 18% 8%, hsla(263, 76%, 64%, .32), transparent 30%),
    radial-gradient(circle at 86% 22%, hsla(188, 58%, 60%, .22), transparent 28%),
    linear-gradient(145deg, hsl(247 38% 8%), hsl(230 42% 7%) 48%, hsl(264 36% 11%));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, textarea, select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.glass {
  background: linear-gradient(135deg, hsla(var(--card), .74), hsla(var(--card), .42));
  border: 1px solid hsla(var(--border), .58);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

.soft-input {
  width: 100%;
  color: hsl(var(--foreground));
  background: hsla(var(--background), .34);
  border: 1px solid hsla(var(--border), .58);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.soft-input:focus {
  border-color: hsla(var(--primary), .75);
  box-shadow: 0 0 0 4px hsla(var(--primary), .14);
  background: hsla(var(--background), .5);
}

.chat-scroll::-webkit-scrollbar { width: 8px; }
.chat-scroll::-webkit-scrollbar-thumb { background: hsla(var(--primary), .24); border-radius: 999px; }
.chat-scroll::-webkit-scrollbar-track { background: transparent; }

.float-in { animation: floatIn .46s var(--transition-smooth) both; }
.fade-in { animation: fadeIn .32s ease both; }

@keyframes floatIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: hsl(var(--primary));
  animation: typing 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typing {
  0%, 80%, 100% { transform: translateY(0); opacity: .35; }
  40% { transform: translateY(-5px); opacity: 1; }
}