/* Phone-first. One column, safe-area aware, no framework. */
:root{
  --paper:#f4f7f8; --card:#fff; --ink:#101820; --muted:#5c6a75;
  --line:#dbe3e8; --accent:#0b6f6a; --user:#0b6f6a; --err:#a3341f;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0d1418; --card:#141d23; --ink:#e6edf1; --muted:#93a4b0;
    --line:#243139; --accent:#4fd0c6; --user:#14312f; --err:#e39383;
  }
}
*{box-sizing:border-box}
/* An ID selector beats the UA sheet's `[hidden]{display:none}`, so #composer's
   own `display:flex` was winning and the composer showed while still
   connecting. Keep this above the component rules. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#bar{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--line); background:var(--card);
}
.who{display:flex; flex-direction:column; min-width:0}
.who strong{font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.path{font-size:11px; color:var(--muted); font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.path.ok{color:var(--accent)}
#model{
  font:inherit; font-size:14px; max-width:48%; padding:6px 8px;
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:8px;
}

#log{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px; -webkit-overflow-scrolling:touch}
.msg{max-width:86%; padding:10px 14px; border-radius:16px; white-space:pre-wrap; word-wrap:break-word}
.msg.user{align-self:flex-end; background:var(--user); color:#fff; border-bottom-right-radius:5px}
@media (prefers-color-scheme:dark){ .msg.user{color:var(--ink)} }
.msg.assistant{align-self:flex-start; background:var(--card); border:1px solid var(--line); border-bottom-left-radius:5px}
.msg.streaming::after{content:"▌"; opacity:.5}
.msg.err{color:var(--err)}

.status{margin:auto; text-align:center; padding:24px; max-width:32rem}
.status p{margin:0 0 6px}
.sub{font-size:14px; color:var(--muted); line-height:1.6}
.fail-title{font-size:17px; font-weight:600; color:var(--err); margin-bottom:10px}
.spinner{
  width:26px; height:26px; margin:0 auto 18px;
  border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .spinner{animation:none} }

#composer{
  display:flex; gap:8px; align-items:flex-end;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line); background:var(--card);
}
#input{
  flex:1; font:inherit; resize:none; max-height:140px;
  padding:10px 14px; border:1px solid var(--line); border-radius:20px;
  background:var(--paper); color:var(--ink);
}
#input:focus{outline:2px solid var(--accent); outline-offset:-1px}
#send{
  flex:none; width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:var(--accent); color:var(--card); font-size:19px; line-height:1;
}
#send:disabled{opacity:.45}
#send:focus-visible{outline:2px solid var(--ink); outline-offset:2px}