:root {
  --background: 0 0% 100%;
  --foreground: 222 30% 10%;
  --primary: 357 86% 52%;
  --primary-foreground: 0 0% 100%;
  --secondary: 8 100% 96%;
  --secondary-foreground: 357 70% 28%;
  --muted: 220 18% 94%;
  --muted-foreground: 224 11% 42%;
  --destructive: 0 84% 48%;
  --border: 220 18% 88%;
  --card: 0 0% 100%;
  --shadow-sm: 0 6px 18px hsl(357 86% 22% / 0.08);
  --shadow-md: 0 14px 36px hsl(357 86% 22% / 0.16);
  --shadow-lg: 0 24px 70px hsl(357 86% 22% / 0.22);
  --transition-fast: 150ms ease;
  --transition-smooth: 320ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 0.75rem;
  --radius-md: 1.15rem;
  --radius-lg: 1.6rem;
}

.dark {
  --background: 225 24% 8%;
  --foreground: 0 0% 98%;
  --primary: 357 88% 58%;
  --primary-foreground: 0 0% 100%;
  --secondary: 357 36% 18%;
  --secondary-foreground: 0 0% 98%;
  --muted: 225 18% 15%;
  --muted-foreground: 220 12% 70%;
  --destructive: 0 86% 62%;
  --border: 225 16% 22%;
  --card: 225 22% 11%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: hsl(var(--background)); }
button, input, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.animate-loadbar { animation: loadbar 2.1s var(--transition-smooth) forwards; transform-origin: left; }
.animate-pop { animation: pop 520ms var(--transition-smooth) both; }
.animate-rise { animation: rise 260ms var(--transition-smooth) both; }
.animate-message { animation: message 220ms var(--transition-smooth) both; }
.animate-float { animation: float 2.5s ease-in-out infinite; }
.animate-pulse-dot { animation: pulseDot 1.2s ease-in-out infinite; }
.typing-dot { animation: typing 900ms ease-in-out infinite; }
.delay-150 { animation-delay: 150ms; }
.delay-300 { animation-delay: 300ms; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

@keyframes loadbar { from { width: 0%; } 65% { width: 78%; } to { width: 100%; } }
@keyframes pop { from { opacity: 0; transform: scale(.92) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes message { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulseDot { 0%, 100% { box-shadow: 0 0 0 0 hsl(142 70% 45% / .45); } 50% { box-shadow: 0 0 0 7px hsl(142 70% 45% / 0); } }
@keyframes typing { 0%, 80%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-5px); opacity: 1; } }

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