:root{
  --bg:#0b0f1a;
  --card:#11182a;
  --text:#e9eefc;
  --muted:#aab3d6;
  --border:rgba(255,255,255,.08);
  --brand:#6d5efc;
  --shadow: 0 12px 30px rgba(0,0,0,.35);
}

/* ===== Tema claro ===== */

body.light{
  --bg:#f5f6fa;
  --card:#ffffff;
  --text:#1a1a1a;
  --muted:#555;
  --border:rgba(0,0,0,.1);
  --brand:#6d5efc;
  --shadow:0 12px 30px rgba(0,0,0,.15);
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: radial-gradient(1200px 600px at 20% 0%, rgba(109,94,252,.25), transparent 60%),
              radial-gradient(900px 500px at 90% 20%, rgba(0,200,255,.12), transparent 55%),
              var(--bg);
  color:var(--text);
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:18px;
  transition:0.3s;
}

.wrap{
  width:min(760px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
}

.top{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px 18px;
  background: rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}

.avatar{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, var(--brand), rgba(255,255,255,.12));
  font-weight:800;
}

.title h1{
  margin:0;
  font-size:18px;
}

.title p{
  margin:2px 0 0;
  color:var(--muted);
  font-size:13px;
}

.chat{
  height:min(62vh,520px);
  padding:18px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msg{
  max-width:80%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--border);
  line-height:1.35;
  font-size:14px;
  white-space:pre-wrap;
}

.user{
  align-self:flex-end;
  background: rgba(109,94,252,.18);
}

.bot{
  align-self:flex-start;
  background: rgba(255,255,255,.03);
}

.bar{
  display:flex;
  gap:10px;
  padding:14px;
  border-top:1px solid var(--border);
  background: rgba(255,255,255,.02);
}

.bar input{
  flex:1;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  outline:none;
  background: rgba(0,0,0,.2);
  color:var(--text);
}

.bar button{
  padding:12px 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--brand);
  color:white;
  font-weight:700;
  cursor:pointer;
}

.bar button:hover{
  filter:brightness(1.05);
}

.hint{
  padding:10px 14px 14px;
  color:var(--muted);
  font-size:12px;
}

.hint span{
  border:1px solid var(--border);
  padding:4px 8px;
  border-radius:999px;
  margin-right:6px;
  display:inline-block;
}

.btn-ghost{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 14px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  transition:.2s;
  font-weight:600;
}

.btn-ghost{
  background:transparent;
  color:var(--text);
}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand)}