/* Light theme defaults */
:root{
  /* surfaces */
  --bg:#f8fafc;         /* slate-50 */
  --panel:#ffffff;      /* white */
  --bot:#f1f5f9;        /* slate-100 */
  --user:#2563eb;       /* blue-600 */
  /* text */
  --text:#0f172a;       /* slate-900 */
  --muted:#475569;      /* slate-600 */
  /* accents */
  --accent:#22c55e;     /* green-500 */
  --warn:#b45309;       /* amber-700 */
  --error:#b91c1c;      /* red-700 */
}
/* Dark theme overrides (html has class="dark") */
.dark:root{
  --bg:#0f172a;         /* slate-900 */
  --panel:#111827;      /* gray-900 */
  --bot:#1f2937;        /* gray-800 */
  --user:#2563eb;       /* blue-600 */
  --text:#e5e7eb;       /* gray-200 */
  --muted:#9ca3af;      /* gray-400 */
  --accent:#22c55e;     /* green-500 */
  --warn:#f59e0b;       /* amber-500 */
  --error:#ef4444;      /* red-500 */
}
html,body{height:100%;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
}
.chat{
  width:min(920px,100%);min-height:420px;background:var(--panel);
  border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  display:flex;flex-direction:column;overflow:hidden;margin-inline:auto;
}
.stream{
  flex:1;overflow:auto;padding:18px;scroll-behavior:smooth;
  /* subtle panel texture in both themes */
  background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));
  max-height:min(86vh,780px);
}
.row{display:flex;margin:10px 0;gap:10px;}
.row.bot{justify-content:flex-start;}
.row.user{justify-content:flex-end;}
.bubble{
  max-width:70%;padding:10px 14px;border-radius:12px;
  white-space:pre-wrap;word-wrap:break-word;
  color:var(--text);
}
.bot .bubble{background:var(--bot);}
/* Ensure readable text on the user's blue bubble in light mode (and dark) */
.user .bubble{background:var(--user); color:#ffffff;}
/* Optional: links inside user's bubble stay readable */
.user .bubble a{ color:#e0f2fe; text-decoration:underline; }      /* light cyan-100 */
.dark .user .bubble a{ color:#bfdbfe; }                            /* blue-200 */
.muted{color:var(--muted);font-size:.92em;}
.typing{display:inline-block;min-width:42px;}
.dot{
  width:6px;height:6px;margin:0 2px;display:inline-block;border-radius:50%;
  background:#9ca3af;opacity:.6;animation:bounce 1.1s infinite ease-in-out;
}
.dot:nth-child(2){animation-delay:.15s;}
.dot:nth-child(3){animation-delay:.3s;}
@keyframes bounce{0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}
.inputbar{
  display:flex;gap:10px;padding:12px;
  background:rgba(0,0,0,.03);
  border-top:1px solid rgba(15,23,42,.08); /* slate-900 @ 8% */
}
.dark .inputbar{
  background:rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.05);
}
.text{
  flex:1;background:#ffffff;color:var(--text);border:1px solid #e2e8f0; /* slate-200 */
  border-radius:10px;padding:12px 14px;outline:none;
}
.dark .text{
  background:#0b1020;border:1px solid #2a3550;
}
.btn{
  background:var(--accent);color:#052e16;border:0;border-radius:10px;
  padding:12px 16px;font-weight:600;cursor:pointer;
}
.btn[disabled]{opacity:.6;cursor:not-allowed;}
.toolbar{display:flex;gap:8px;align-items:center;margin-top:6px;}
.link{color:#2563eb;cursor:pointer;text-decoration:underline;} /* blue-600 in light */
.dark .link{color:#93c5fd;} /* blue-300 in dark */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:#0b3b17;color:#86efac;font-size:.82em;margin-left:6px;}
.error{color:var(--error);}
.warn{color:var(--warn);}
.summary{
  background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
  padding:12px;margin-top:8px;font-size:.95em;
}
.dark .summary{
  background:#0c1224;border:1px solid #2a3550;
}
code.kv{background:#e2e8f0;color:#0f172a;padding:1px 6px;border-radius:6px;}
.dark code.kv{background:#111827;color:#e5e7eb;}