:root{
  --bg:#0b0d10;
  --panel:#0f1318;
  --text:#e8eef6;
  --muted:#99a3b3;
  --line:rgba(255,255,255,.08);
  --radius:16px;
  --accent:#37b4ff;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.wrap{
  max-width: 860px;
  margin: 0 auto;
  padding: 18px;
  height: 100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.top{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 16px;
}
.top h1{margin:0;font-size:18px}
.sub{margin-top:4px;color:var(--muted);font-size:13px}

.chat{
  flex:1;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msg{
  max-width: 78%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  line-height:1.25;
  white-space:pre-wrap;
}

.me{
  align-self:flex-end;
  background: rgba(55,180,255,.12);
  border-color: rgba(55,180,255,.25);
}

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

.bar{
  display:flex;
  gap:10px;
}

.bar input{
  flex:1;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  outline:none;
}

.bar button{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(55,180,255,.35);
  background: rgba(55,180,255,.15);
  color:var(--text);
}