:root{
  --ground:#F7F6F3; --surface:#FFFFFF; --ink:#1A1D26; --ink-soft:#5A5F70;
  --ink-faint:#8A8F9E; --rule:#E2E0DA; --accent:#2A3A6B; --accent-soft:#E7EAF3;
  --ok:#2F6B45; --risk:#A32C2C; --risk-soft:#F6E4E2;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#14161C; --surface:#1C1F28; --ink:#ECEDF1; --ink-soft:#A0A5B5;
    --ink-faint:#767C8D; --rule:#2C3140; --accent:#93A5E0; --accent-soft:#232943;
    --ok:#74C293; --risk:#E48276; --risk-soft:#37201F;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.55;display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.bar{
  display:flex;align-items:center;gap:12px;padding:12px 16px;
  padding-top:calc(12px + env(safe-area-inset-top));
  background:var(--surface);border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:5;
}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:50% 22%;flex:none}
.who{display:flex;flex-direction:column;line-height:1.25;flex:1;min-width:0}
.who strong{font-family:var(--serif);font-size:19px;font-weight:500}
.tag{font-size:11.5px;color:var(--ink-faint);letter-spacing:.03em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-faint);flex:none}
.dot.ok{background:var(--ok)}
.dot.bad{background:var(--risk)}

main{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:14px}
.msg{max-width:46rem;width:100%;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.msg p{margin:0}
.msg.you{align-self:flex-end;align-items:flex-end}
.msg.you p{
  background:var(--accent);color:#fff;padding:10px 14px;border-radius:14px 14px 3px 14px;
  max-width:88%;
}
.msg.amara p{
  background:var(--surface);border:1px solid var(--rule);padding:12px 15px;
  border-radius:14px 14px 14px 3px;max-width:92%;
}
.msg.escalated p{background:var(--risk-soft);border-color:var(--risk);color:var(--ink)}
.msg.error p{background:var(--risk-soft);border-color:var(--risk)}
.msg .meta{font-size:11px;color:var(--ink-faint);padding-left:4px;letter-spacing:.02em}

.typing{display:inline-flex;gap:4px;align-items:center;padding:4px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);animation:b 1.2s infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes b{0%,60%,100%{opacity:.28}30%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}}

.chips{display:flex;gap:8px;overflow-x:auto;padding:6px 16px 10px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips button{
  flex:none;font:inherit;font-size:13.5px;padding:8px 13px;border-radius:999px;
  border:1px solid var(--rule);background:var(--surface);color:var(--ink-soft);cursor:pointer;
}
.chips button:hover{border-color:var(--accent);color:var(--accent)}
.chips[hidden]{display:none}

.composer{
  display:flex;gap:9px;padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:var(--surface);border-top:1px solid var(--rule);
}
.composer input{
  flex:1;font:inherit;padding:12px 15px;border-radius:999px;
  border:1px solid var(--rule);background:var(--ground);color:var(--ink);min-width:0;
}
.composer input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.composer button{
  flex:none;width:46px;border:0;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;cursor:pointer;
}
.composer button:disabled{opacity:.45;cursor:default}