:root {
  --background: 228 54% 5%;
  --foreground: 210 36% 96%;
  --primary: 199 100% 68%;
  --primary-foreground: 224 58% 7%;
  --secondary: 236 28% 24%;
  --secondary-foreground: 210 36% 96%;
  --muted: 226 22% 18%;
  --muted-foreground: 218 16% 70%;
  --destructive: 354 92% 66%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 36% 28%;
  --card: 226 42% 10%;
  --shadow-sm: 0 10px 28px hsl(220 70% 2% / 0.25);
  --shadow-md: 0 16px 44px hsl(205 100% 45% / 0.14);
  --shadow-lg: 0 24px 90px hsl(210 100% 55% / 0.2), 0 16px 60px hsl(240 80% 2% / 0.65);
  --transition-fast: 140ms cubic-bezier(.2,.8,.2,1);
  --transition-smooth: 280ms cubic-bezier(.2,.8,.2,1);
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
}

.dark {
  --background: 228 54% 5%;
  --foreground: 210 36% 96%;
  --primary: 199 100% 68%;
  --secondary: 236 28% 24%;
  --muted: 226 22% 18%;
  --destructive: 354 92% 66%;
  --border: 215 36% 28%;
  --card: 226 42% 10%;
}

* { box-sizing: border-box; }
html, body, #root { min-height: 100%; margin: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

.space-scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 70% 8%, hsl(199 100% 68% / 0.18), transparent 22rem),
    radial-gradient(circle at 18% 18%, hsl(250 100% 72% / 0.12), transparent 18rem),
    linear-gradient(180deg, hsl(229 58% 7%), hsl(228 58% 4%) 62%, hsl(222 60% 3%));
}
.space-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, hsl(210 100% 92% / 0.8) 0 1px, transparent 1px),
    radial-gradient(circle, hsl(199 100% 68% / 0.45) 0 1px, transparent 1px);
  background-size: 90px 90px, 140px 140px;
  animation: drift 24s linear infinite;
  opacity: 0.45;
}
.moon-glow {
  position: absolute;
  right: clamp(24px, 11vw, 160px);
  top: 44px;
  width: clamp(110px, 18vw, 210px);
  height: clamp(110px, 18vw, 210px);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 30%, hsl(0 0% 100%), hsl(205 100% 88%) 35%, hsl(199 100% 68% / 0.2) 58%, transparent 70%);
  filter: blur(0.2px);
  box-shadow: 0 0 90px hsl(199 100% 78% / 0.42), 0 0 180px hsl(199 100% 68% / 0.18);
  opacity: 0.68;
}
.particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: hsl(var(--primary));
  box-shadow: 0 0 20px hsl(var(--primary));
  opacity: .38;
  animation: floaty 8s ease-in-out infinite;
}
.p1 { left: 10%; top: 28%; }
.p2 { right: 18%; bottom: 32%; animation-delay: -2s; }
.p3 { left: 34%; bottom: 18%; animation-delay: -4s; }
.p4 { right: 42%; top: 18%; animation-delay: -6s; }

.custom-scroll::-webkit-scrollbar { width: 8px; }
.custom-scroll::-webkit-scrollbar-thumb { background: hsl(var(--primary) / .25); border-radius: 999px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }

.avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  border: 1px solid hsl(var(--primary) / .28);
  color: hsl(var(--primary));
  background: hsl(var(--card) / .72);
  box-shadow: 0 0 22px hsl(var(--primary) / .13);
  backdrop-filter: blur(18px);
}
.user-avatar { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.moon-bubble {
  border: 1px solid hsl(var(--border));
  background: linear-gradient(135deg, hsl(var(--card) / .86), hsl(220 45% 13% / .72));
}
.user-bubble {
  border: 1px solid hsl(var(--primary) / .38);
  background: linear-gradient(135deg, hsl(var(--primary) / .28), hsl(236 70% 35% / .28));
}
.message-row { animation: popIn var(--transition-smooth) both; }

.pressable { transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast), opacity var(--transition-fast); }
.pressable:active { transform: scale(.94); }
.pressable:hover { border-color: hsl(var(--primary) / .45); }
.neon-icon { box-shadow: inset 0 0 18px hsl(var(--primary) / .08), 0 0 22px hsl(var(--primary) / .12); }
.stop-button {
  border: 1px solid hsl(var(--destructive) / .5);
  background: hsl(var(--destructive) / .16);
  color: hsl(var(--destructive-foreground));
  box-shadow: 0 0 22px hsl(var(--destructive) / .28), inset 0 0 18px hsl(var(--destructive) / .08);
  animation: fadeIn var(--transition-smooth) both;
}
.stop-button:hover { background: hsl(var(--destructive) / .24); border-color: hsl(var(--destructive) / .75); }

.typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: hsl(var(--primary));
  animation: typing 1s infinite ease-in-out;
}
.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }

.sheet-enter { animation: slideUp var(--transition-smooth) both; }
.sidebar-enter { animation: slideInLeft var(--transition-smooth) both; }
.sidebar-chat {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / .14);
  padding: 8px 8px 8px 12px;
  color: hsl(var(--foreground));
}
.sidebar-chat.active {
  border-color: hsl(var(--primary) / .48);
  background: hsl(var(--primary) / .12);
  box-shadow: 0 0 26px hsl(var(--primary) / .14);
}
.tool-card {
  display: flex;
  min-height: 92px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / .18);
  color: hsl(var(--foreground));
}
.tool-card:hover { background: hsl(var(--primary) / .08); box-shadow: 0 0 30px hsl(var(--primary) / .1); }
.setting-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--secondary) / .18);
  padding: 14px;
}
.toggle {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  padding: 3px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  transition: background var(--transition-fast);
}
.toggle span {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: hsl(var(--foreground));
  transition: transform var(--transition-fast);
}
.toggle.on { background: hsl(var(--primary) / .32); border-color: hsl(var(--primary) / .45); }
.toggle.on span { transform: translateX(20px); background: hsl(var(--primary)); box-shadow: 0 0 16px hsl(var(--primary) / .55); }
.lock-panel {
  position: absolute;
  inset: 84px 12px 96px;
  z-index: 20;
  display: grid;
  place-content: center;
  gap: 14px;
  text-align: center;
  border-radius: calc(var(--radius-lg) + 16px);
  border: 1px solid hsl(var(--primary) / .32);
  background: linear-gradient(135deg, hsl(var(--card) / .9), hsl(228 70% 5% / .84));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(22px);
  animation: fadeIn var(--transition-smooth) both;
}
.lock-panel h2 { font-size: clamp(1.6rem, 5vw, 2.8rem); font-weight: 800; }
.premium-card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--primary) / .28);
  background: hsl(var(--secondary) / .16);
  padding: 16px;
}
.premium-button {
  border-radius: 18px;
  border: 1px solid hsl(var(--primary) / .45);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  padding: 12px 16px;
  font-weight: 800;
  box-shadow: 0 0 30px hsl(var(--primary) / .28);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.premium-button:active { transform: scale(.96); }
.premium-mini {
  border-radius: 14px;
  border: 1px solid hsl(var(--primary) / .32);
  background: hsl(var(--card) / .58);
  padding: 8px;
  color: hsl(var(--primary));
  font-size: 12px;
  font-weight: 700;
}

@keyframes drift { from { transform: translateY(0); } to { transform: translateY(90px); } }
@keyframes floaty { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(18px,-24px,0); } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes typing { 0%,80%,100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes slideInLeft { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}