/* One phone-width column: header, scrolling middle, talk bar pinned at the bottom. */
:root{
  --bg:#EEF1F2; --surface:#FFFFFF; --sunk:#E2E7E9; --fg:#162120; --muted:#55615F; --line:#D0D8DA;
  --accent:#0B7A75; --accent-ink:#FFFFFF; --soft:#D9EEEB; --warn:#A8481A; --warn-soft:#F8E3D6; --rec:#C7473B;
  --display:"Bricolage Grotesque", "Avenir Next", "Segoe UI", sans-serif;
  --body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#101615; --surface:#19211F; --sunk:#0B100F; --fg:#E6EDEC; --muted:#9AA9A6; --line:#2A3634;
    --accent:#4CC5BC; --accent-ink:#06201E; --soft:#163331; --warn:#F2A26C; --warn-soft:#3A2418; --rec:#F07A6E;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{height:100%; margin:0}
body{background:var(--bg); color:var(--fg); font-family:var(--body); font-size:16px; line-height:1.45; padding-top:env(safe-area-inset-top,0px)}
button,input{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:8px}
.sr{position:absolute; left:-9999px}
[hidden]{display:none !important}
.app{max-width:480px; margin:0 auto; height:100%; display:flex; flex-direction:column; padding-inline:16px}
header{display:flex; align-items:center; justify-content:space-between; gap:12px; padding-block:12px 8px}
.brand{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; cursor:pointer}
.brand b{font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:-0.3px}
.mark{width:34px; height:34px; border-radius:12px; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center}
.head-actions{display:flex; gap:8px}
.ghost{background:transparent; border:1px solid var(--line); border-radius:999px; padding:8px 12px; min-height:40px; cursor:pointer; font-size:14px}
.ghost:hover{background:var(--surface)}
main{flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:20px; padding-block:6px 20px; min-height:0}
.thread{display:flex; flex-direction:column; gap:8px}
.msg{max-width:86%; padding:10px 14px; border-radius:18px; overflow-wrap:anywhere}
.msg.you{align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:6px}
.msg.hippo{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:6px; display:flex; flex-direction:column; gap:8px}
.msg.hippo p{margin:0}
.msg.error{border-color:var(--warn)}
.quote{border-left:3px solid var(--accent); background:var(--soft); padding:8px 12px; border-radius:0 10px 10px 0; font-size:15px}
.quote small{display:block; color:var(--muted); font-size:13px}
.note{font-size:13px; color:var(--muted); margin:0}
h2{font-family:var(--display); font-size:15px; font-weight:600; margin:0; color:var(--muted)}
section{display:flex; flex-direction:column; gap:10px}
.rows{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.row{display:flex; align-items:center; gap:12px; padding:12px 14px; border-top:1px solid var(--line); min-height:52px}
.row:first-child{border-top:0}
.row .txt{flex:1; min-width:0; overflow-wrap:anywhere}
.row .sub{display:block; font-size:13px; color:var(--muted)}
.row input[type=checkbox]{width:22px; height:22px; accent-color:var(--accent); flex:none}
.row.done .txt{text-decoration:line-through; color:var(--muted)}
.chip{font-size:12px; font-weight:700; padding:4px 9px; border-radius:999px; background:var(--soft); white-space:nowrap}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.x{background:none; border:0; color:var(--muted); width:36px; height:36px; border-radius:10px; cursor:pointer; flex:none}
.x:hover{background:var(--sunk)}
.grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.space{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:6px; min-height:92px}
.space:hover{border-color:var(--accent)}
.space .nm{font-family:var(--display); font-weight:600; font-size:18px; line-height:1.15; overflow-wrap:anywhere}
.space .meta{font-size:13px; color:var(--muted)}
.empty{color:var(--muted); font-size:15px; padding:14px; background:var(--surface); border:1px dashed var(--line); border-radius:16px}
.where{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:4px 12px; padding:12px 14px; border-top:1px solid var(--line)}
.where:first-child{border-top:0}
.where b,.where span{overflow-wrap:anywhere}
.where small{grid-column:1 / -1; color:var(--muted); font-size:13px}
.notes p{margin:0; padding:12px 14px; border-top:1px solid var(--line)}
.notes p:first-child{border-top:0}
.notes small{display:block; color:var(--muted); font-size:13px}
.title{display:flex; align-items:center; gap:10px}
.title h1{font-family:var(--display); font-size:28px; margin:0; letter-spacing:-0.4px; overflow-wrap:anywhere}
.back{width:44px; height:44px; border-radius:14px; border:1px solid var(--line); background:var(--surface); cursor:pointer; display:grid; place-items:center; flex:none}
.actions{display:flex; gap:8px; flex-wrap:wrap}
.danger{color:var(--warn); border-color:var(--warn)}
.signin{display:flex; flex-direction:column; gap:14px; padding-top:24px}
.signin h1{font-family:var(--display); font-size:32px; margin:0; letter-spacing:-0.5px}
.signin p{margin:0; color:var(--muted)}
.signin input{height:54px; border-radius:16px; border:1px solid var(--line); background:var(--surface); padding:0 16px; font-size:17px}
.primary{height:54px; border-radius:16px; border:0; background:var(--accent); color:var(--accent-ink); font-weight:700; cursor:pointer; font-size:17px}
footer{padding-block:10px calc(12px + env(safe-area-inset-bottom,0px)); display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); background:var(--bg)}
.live{margin:0; font-size:16px; color:var(--muted); min-height:1.45em; overflow-wrap:anywhere}
.talk-row{display:flex; gap:10px}
.talk{flex:1; height:64px; border-radius:22px; border:0; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:18px; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer}
.talk[aria-pressed="true"]{background:var(--rec); color:#fff}
.talk[disabled]{opacity:.6; cursor:wait}
.speak{width:64px; height:64px; border-radius:22px; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; cursor:pointer; flex:none}
.speak[aria-pressed="true"]{background:var(--soft); border-color:var(--accent)}
form{display:flex; gap:8px}
form input{flex:1; min-width:0; height:46px; border-radius:14px; border:1px solid var(--line); background:var(--surface); padding:0 14px}
form input::placeholder{color:var(--muted)}
.send{height:46px; padding:0 16px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font-weight:700; cursor:pointer}
.dots::after{content:"…"; animation:blink 1.2s steps(3) infinite}
@keyframes blink{0%{opacity:.2}50%{opacity:1}100%{opacity:.2}}
@media (prefers-reduced-motion: reduce){.dots::after{animation:none}}