:root {
  --background: 216 40% 98%;
  --foreground: 222 47% 11%;
  --primary: 174 84% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 244 77% 63%;
  --secondary-foreground: 0 0% 100%;
  --muted: 216 18% 91%;
  --muted-foreground: 218 12% 42%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 22% 86%;
  --card: 0 0% 100%;
  --shadow-sm: 0 8px 22px rgba(15, 23, 42, .06);
  --shadow-md: 0 18px 45px rgba(15, 23, 42, .10);
  --shadow-lg: 0 30px 90px rgba(15, 23, 42, .18);
  --transition-fast: 150ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 32px;
}
.dark {
  --background: 222 47% 7%;
  --foreground: 210 40% 96%;
  --primary: 172 78% 46%;
  --primary-foreground: 222 47% 8%;
  --secondary: 250 86% 70%;
  --secondary-foreground: 222 47% 8%;
  --muted: 222 32% 15%;
  --muted-foreground: 215 18% 70%;
  --destructive: 0 74% 58%;
  --destructive-foreground: 0 0% 100%;
  --border: 222 24% 20%;
  --card: 222 38% 11%;
}
* { box-sizing: border-box; }
html { background: hsl(var(--background)); color: hsl(var(--foreground)); }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at top left, hsl(var(--primary) / .18), transparent 30%), radial-gradient(circle at top right, hsl(var(--secondary) / .15), transparent 34%), hsl(var(--background)); }
button, input, textarea, select { font: inherit; }
input, textarea, select { font-size: max(16px, 1rem); }
button { min-height: 44px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
.glass { background: hsl(var(--card) / .78); backdrop-filter: blur(22px); border: 1px solid hsl(var(--border) / .72); box-shadow: var(--shadow-sm); }
.chat-bg { background-image: radial-gradient(hsl(var(--foreground) / .055) 1px, transparent 1px); background-size: 22px 22px; }
.bubble-in { border-radius: 24px 24px 24px 8px; }
.bubble-out { border-radius: 24px 24px 8px 24px; }
.animate-pop { animation: pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.safe-bottom { padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
.safe-top { padding-top: env(safe-area-inset-top); }
.focus-ring:focus { outline: 3px solid hsl(var(--primary) / .28); outline-offset: 2px; }