:root {
  color-scheme: dark;
  --bg: #070b18;
  --panel: rgba(15, 23, 42, .74);
  --line: rgba(148, 163, 184, .22);
  --text: #f8fafc;
  --muted: #94a3b8;
  --brand: #8b5cf6;
  --brand-2: #06b6d4;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background: radial-gradient(circle at top left, rgba(139, 92, 246, .34), transparent 32rem), radial-gradient(circle at bottom right, rgba(6, 182, 212, .22), transparent 30rem), var(--bg);
}
.app-shell { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 22px; width: min(1440px, 100%); min-height: 100vh; padding: 22px; margin: 0 auto; }
.glass { border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 80px rgba(0,0,0,.35); backdrop-filter: blur(22px); }
.sidebar { border-radius: 30px; padding: 28px; }
.brand-mark { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 24px; font-weight: 900; letter-spacing: -.06em; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-top: 24px; font-size: 32px; letter-spacing: -.04em; }
h2 { font-size: clamp(28px, 4vw, 56px); letter-spacing: -.06em; margin-bottom: 0; }
p { color: var(--muted); line-height: 1.65; }
.status-grid { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.status-grid span { color: var(--muted); }
.status-grid strong { color: #e0f2fe; }
.workspace { display: grid; grid-template-rows: auto 1fr auto; border-radius: 30px; overflow: hidden; }
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 34px; border-bottom: 1px solid var(--line); }
.eyebrow { color: #c4b5fd; text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 800; }
.messages { overflow: auto; padding: 28px 34px; }
.message { display: flex; gap: 14px; margin-bottom: 18px; }
.message.user { flex-direction: row-reverse; }
.avatar { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 14px; background: linear-gradient(135deg, var(--brand), var(--brand-2)); font-weight: 800; }
.user .avatar { background: #1e293b; }
.bubble { max-width: 850px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 22px; background: rgba(2, 6, 23, .48); }
.bubble h3 { margin-bottom: 8px; }
.bubble ul { padding-left: 20px; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 22px; border-top: 1px solid var(--line); }
textarea { width: 100%; resize: vertical; min-height: 64px; border: 1px solid var(--line); border-radius: 20px; padding: 16px; color: var(--text); background: rgba(2, 6, 23, .62); outline: none; }
button { border: 0; border-radius: 18px; padding: 14px 22px; color: white; font-weight: 800; cursor: pointer; background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.voice-controls { display: flex; gap: 10px; }
.voice-controls button { width: 52px; height: 52px; padding: 0; }
.ghost { margin-top: 26px; width: 100%; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.hidden { display: none; }
@media (max-width: 860px) { .app-shell { grid-template-columns: 1fr; padding: 12px; } .sidebar { display: none; } .hero, .messages { padding: 22px; } .composer { grid-template-columns: 1fr; } }