:root{
  --bg:#0f1115; --panel:#171a21; --panel-2:#1f242e;
  --me:#2563eb; --bot:#232834; --text:#e7eaf0; --muted:#8b93a3;
  --line:#2a303c; --accent:#3b82f6;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  display:flex; flex-direction:column;
  height:100dvh; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;
  background:var(--panel); border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
#bar .title{font-weight:600; letter-spacing:.2px}
#gear{
  background:none; border:none; color:var(--muted);
  font-size:20px; padding:6px; cursor:pointer; line-height:1;
}
#log{
  flex:1 1 auto; overflow-y:auto; padding:14px 12px 6px;
  display:flex; flex-direction:column; gap:8px;
  -webkit-overflow-scrolling:touch;
}
.msg{
  max-width:82%; padding:9px 13px; border-radius:16px;
  white-space:pre-wrap; word-wrap:break-word; overflow-wrap:anywhere;
}
.msg.me{align-self:flex-end; background:var(--me); color:#fff; border-bottom-right-radius:5px}
.msg.bot{align-self:flex-start; background:var(--bot); border-bottom-left-radius:5px}
.msg.sys{align-self:center; background:none; color:var(--muted); font-size:13px; text-align:center; max-width:90%}
.msg.err{align-self:center; background:#3a1d20; color:#ffb4b4; font-size:14px; max-width:90%}
.typing{align-self:flex-start; color:var(--muted); font-size:14px; padding:4px 13px}
#composer{
  flex:0 0 auto; display:flex; gap:8px; align-items:flex-end;
  padding:8px 10px calc(env(safe-area-inset-bottom) + 8px);
  background:var(--panel); border-top:1px solid var(--line);
}
#input{
  flex:1; resize:none; max-height:140px;
  background:var(--panel-2); color:var(--text);
  border:1px solid var(--line); border-radius:18px;
  padding:10px 14px; font:inherit; outline:none;
}
#input:focus{border-color:var(--accent)}
#send{
  flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:var(--me); color:#fff; border:none; font-size:20px;
  cursor:pointer; display:grid; place-items:center;
}
#send:disabled{opacity:.4}
dialog{
  border:none; border-radius:16px; background:var(--panel); color:var(--text);
  padding:0; width:min(92vw,420px);
}
dialog::backdrop{background:rgba(0,0,0,.55)}
.settings-form{display:flex; flex-direction:column; gap:14px; padding:20px}
.settings-form h2{margin:0; font-size:18px}
.settings-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted)}
.settings-form input{
  background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; color:var(--text); font:inherit; outline:none;
}
.settings-form input:focus{border-color:var(--accent)}
.settings-actions{display:flex; gap:10px; justify-content:flex-end}
.settings-form button{
  padding:9px 16px; border-radius:10px; border:none; font:inherit;
  background:var(--me); color:#fff; cursor:pointer;
}
.settings-form button.ghost{background:var(--panel-2); color:var(--text)}
.settings-form button.danger{background:none; color:#ff8b8b; border:1px solid #4a2226}