:root {
  --background: 240 38% 5%;
  --foreground: 220 35% 97%;
  --primary: 164 91% 58%;
  --primary-foreground: 170 70% 7%;
  --secondary: 322 94% 72%;
  --secondary-foreground: 240 35% 7%;
  --muted: 238 24% 15%;
  --muted-foreground: 230 18% 75%;
  --destructive: 350 91% 63%;
  --destructive-foreground: 0 0% 100%;
  --border: 238 22% 24%;
  --card: 240 30% 9%;
  --sidebar: 240 36% 7%;
  --panel: 240 34% 8%;
  --preview: 240 40% 4%;
  --shadow-sm: 0 8px 22px hsl(240 80% 2% / 0.24);
  --shadow-md: 0 16px 38px hsl(240 80% 2% / 0.34);
  --shadow-lg: 0 28px 80px hsl(240 80% 2% / 0.52);
  --transition-smooth: 220ms cubic-bezier(.2,.8,.2,1);
  --radius-md: 1rem;
  --radius-lg: 1.5rem;
}
* { box-sizing: border-box; }
html, body, #root { min-height: 100%; height: 100%; max-width: 100%; }
html { font-size: 16px; overflow-x: hidden; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  overflow: hidden;
  max-width: 100vw;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(circle at 18% 6%, hsl(var(--primary) / 0.12), transparent 32%), radial-gradient(circle at 88% 12%, hsl(var(--secondary) / 0.13), transparent 34%);
}
button, a, input, select, textarea { transition: var(--transition-smooth); }
button { min-height: 40px; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
button:disabled { cursor: not-allowed; }
.input { width: 100%; min-height: 40px; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: hsl(var(--muted)); color: hsl(var(--foreground)); padding: .7rem .85rem; font-size: max(16px, 1rem); }
.input::placeholder { color: hsl(var(--muted-foreground)); }
.btn-primary, .btn-muted { min-height: 40px; border-radius: var(--radius-md); font-weight: 800; padding: .62rem .85rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-primary { background: linear-gradient(135deg, hsl(var(--primary)), hsl(190 95% 66%)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 28px hsl(var(--primary) / .18); }
.btn-muted { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.btn-primary:hover, .btn-muted:hover { transform: translateY(-1px); }
.card { border: 1px solid hsl(var(--border)); background: linear-gradient(180deg, hsl(var(--card)), hsl(240 30% 7%)); border-radius: var(--radius-lg); padding: .9rem; box-shadow: var(--shadow-sm); }
.feature { min-height: 38px; border-radius: var(--radius-md); border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--muted-foreground)); padding: .55rem; display: flex; align-items: center; gap: .45rem; font-size: .94rem; line-height: 1.35; }
.nebula-logo { background: radial-gradient(circle at 28% 18%, hsl(var(--primary)), transparent 35%), radial-gradient(circle at 74% 76%, hsl(var(--secondary)), transparent 38%), conic-gradient(from 210deg, hsl(240 80% 12%), hsl(164 85% 26%), hsl(322 80% 28%), hsl(240 80% 12%)); color: white; }
.chat-robot-shell { background: radial-gradient(circle at 50% 0%, hsl(var(--primary) / .08), transparent 34%), radial-gradient(circle at 94% 20%, hsl(var(--secondary) / .08), transparent 32%), hsl(var(--background)); }
.robot-float { animation: robotFloat 4s ease-in-out infinite; }
.shimmer { background: linear-gradient(90deg, hsl(var(--muted)), hsl(var(--border)), hsl(var(--muted))); background-size: 200% 100%; animation: shimmer 1.4s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes robotFloat { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }

#root, #root * { min-width: 0; }
p,h1,h2,h3,h4,h5,h6,span,a,li,label,button,input,textarea,select,div { overflow-wrap: anywhere; word-break: break-word; }
pre,code,kbd,samp { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
img,video,canvas,iframe,svg { max-width: 100%; }
[class*="grid"],[class*="flex"] { min-width: 0; }
.whitespace-pre-wrap { overflow-wrap: anywhere; }
.leading-7 { line-height: 1.55 !important; }
.text-2xl { font-size: 1.55rem !important; line-height: 1.2 !important; }
.text-xl { font-size: 1.28rem !important; line-height: 1.32 !important; }
.text-lg { font-size: 1.12rem !important; line-height: 1.45 !important; }
.text-base { font-size: 1rem !important; line-height: 1.48 !important; }
.text-sm { font-size: .92rem !important; line-height: 1.42 !important; }
.text-xs { font-size: .8rem !important; line-height: 1.35 !important; }
.chat-robot-shell main article { width: 100% !important; max-width: 100% !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 1279px) { html { font-size: 15px; } .card { padding: .82rem; } .chat-robot-shell { display: flex !important; flex-direction: column; overflow: auto; } .chat-robot-shell > main { min-height: 82vh; flex: 0 0 auto; } .chat-robot-shell > aside { display: flex !important; border-left: 0; border-top: 1px solid hsl(var(--border)); max-height: none; overflow: visible; } .chat-robot-shell > aside .card img { max-height: 420px; object-fit: contain; } }
@media (max-width: 639px) { html { font-size: 14.5px; } body { overflow: hidden; } .card { padding: .78rem; border-radius: 1.1rem; } .btn-primary,.btn-muted { padding: .55rem .7rem; } .text-2xl { font-size: 1.34rem !important; } .text-xl { font-size: 1.18rem !important; } .text-lg { font-size: 1.04rem !important; } .chat-robot-shell > main { min-height: 86vh; } .chat-robot-shell > aside { padding: .75rem; gap: .75rem; } .chat-robot-shell > aside .card img { max-height: 280px; } }