:root {
  color-scheme: dark;
  --bg: #070a12;
  --panel: rgba(16, 22, 38, .78);
  --panel-strong: rgba(22, 30, 52, .92);
  --border: rgba(160, 185, 255, .18);
  --text: #eef4ff;
  --muted: #9aa8c7;
  --accent: #6ee7f9;
  --accent2: #a78bfa;
  --danger: #fca5a5;
  --ok: #86efac;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 10% 10%, rgba(103, 232, 249, .22), transparent 28rem),
    radial-gradient(circle at 90% 0%, rgba(167, 139, 250, .20), transparent 30rem),
    linear-gradient(135deg, #050713 0%, #0b1020 45%, #090b12 100%);
}
.shell { width: min(1180px, calc(100% - 28px)); margin: 0 auto; padding: 28px 0 40px; }
.hero { display: grid; grid-template-columns: 1fr minmax(240px, 360px); gap: 18px; align-items: end; margin-bottom: 18px; }
.eyebrow { margin: 0 0 8px; color: var(--accent); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
h1 { margin: 0; font-size: clamp(34px, 6vw, 64px); letter-spacing: -.06em; line-height: .94; }
.subtitle { color: var(--muted); font-size: 16px; max-width: 720px; }
.status-card, .chat-card, .context-card {
  border: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(20px);
  border-radius: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.status-card { padding: 18px; color: var(--muted); font-size: 13px; white-space: pre-line; }
.chat-card { padding: 16px; min-height: 590px; display: flex; flex-direction: column; }
.toolbar { display:flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip { border: 1px solid var(--border); background: rgba(255,255,255,.05); color: var(--text); border-radius: 999px; padding: 9px 12px; cursor: pointer; }
.chip:hover { border-color: rgba(110,231,249,.55); background: rgba(110,231,249,.1); }
.messages { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px; padding: 8px 4px 14px; }
.msg { max-width: 88%; padding: 14px 16px; border-radius: 20px; line-height: 1.56; }
.msg.user { align-self: flex-end; white-space: pre-wrap; background: linear-gradient(135deg, rgba(110,231,249,.28), rgba(167,139,250,.23)); border: 1px solid rgba(110,231,249,.3); }
.msg.bot { align-self: flex-start; background: var(--panel-strong); border: 1px solid var(--border); }
.meta { margin-top: 10px; color: var(--muted); font-size: 12px; border-top: 1px solid rgba(255,255,255,.07); padding-top: 8px; }
.answer { display: grid; gap: 10px; }
.answer p { margin: 0; color: #dce6ff; }
.section-title { margin-top: 4px; color: var(--accent); font-weight: 900; letter-spacing: -.01em; font-size: 15px; }
.answer-item, .evidence-item, .notice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.answer-item .num {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  border-radius: 999px;
  color: #061018;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  font-weight: 900;
  font-size: 12px;
}
.evidence-item { grid-template-columns: 10px 1fr; color: #cdd8f6; background: rgba(110,231,249,.045); }
.evidence-item .dot { width: 7px; height: 7px; margin-top: 9px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 18px rgba(110,231,249,.8); }
.notice { grid-template-columns: 1fr; border-color: rgba(252,165,165,.25); background: rgba(252,165,165,.08); color: #ffe1e1; }
.table-wrap { overflow-x: auto; border: 1px solid rgba(110,231,249,.18); border-radius: 16px; background: rgba(3,8,18,.35); }
.answer table { width: 100%; border-collapse: collapse; min-width: 520px; font-size: 13px; }
.answer th, .answer td { padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; }
.answer th { color: #061018; background: linear-gradient(135deg, rgba(110,231,249,.95), rgba(167,139,250,.88)); font-weight: 900; }
.answer tr:last-child td { border-bottom: 0; }
.answer td { color: #e7eeff; }
.mini-heading { color: #dbeafe; font-weight: 800; margin-top: 2px; }
.quote { padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 10px; background: rgba(110,231,249,.06); color: #d7f7ff; }
.answer code { padding: 2px 6px; border-radius: 7px; background: rgba(255,255,255,.09); color: #fff; }
.answer strong { color: #fff; }
.composer { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--border); border-radius: 22px; }
textarea { width: 100%; resize: none; border: 0; outline: 0; color: var(--text); background: transparent; font: inherit; line-height: 1.5; }
.composer-side { display:flex; flex-direction: column; align-items: stretch; gap: 8px; }
.toggle { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; justify-content: center; }
button[type="submit"] { border: 0; color: #061018; background: linear-gradient(135deg, var(--accent), var(--accent2)); font-weight: 800; border-radius: 16px; padding: 0 20px; cursor: pointer; min-height: 46px; }
button:disabled { opacity: .55; cursor: wait; }
.context-card { margin-top: 18px; padding: 18px; }
.context-header { display:flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.context-header h2 { margin: 0; font-size: 18px; }
.context-header span { color: var(--muted); font-size: 13px; }
pre { margin: 0; white-space: pre-wrap; word-break: break-word; color: #cdd8f6; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.07); border-radius: 18px; padding: 14px; max-height: 420px; overflow: auto; }
.ok { color: var(--ok); } .warn { color: var(--danger); }
@media (max-width: 800px) { .hero { grid-template-columns: 1fr; } .msg { max-width: 96%; } .composer { grid-template-columns: 1fr; } .composer-side { flex-direction: row; justify-content: space-between; } }