/* Layout: one-screen phone app — partner header, scrolling chat, docked round talk button */
:root{
  --bg:#f2f5f1; --surface:#ffffff; --fg:#1b221f; --muted:#5d6a63; --line:#dbe2dc;
  --accent:#2f6f5e; --accent-2:#e3efe9; --accent-fg:#ffffff; --me:#2f6f5e; --me-fg:#ffffff;
  --tip:#9a4a24; --tip-bg:#fbefe7; --danger:#b23b2e;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121715; --surface:#1b2220; --fg:#e6ece8; --muted:#97a59d; --line:#2a3430;
  --accent:#6cc3a6; --accent-2:#20302a; --accent-fg:#0d1915; --me:#2c5c4e; --me-fg:#eef6f2;
  --tip:#f0a982; --tip-bg:#33241c; --danger:#f08a7e; color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.app{height:100%;display:flex;flex-direction:column;max-width:680px;margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(10px + var(--safe-t)) 16px 10px;border-bottom:1px solid var(--line);background:var(--bg)}
.partner{display:flex;align-items:center;gap:10px;background:none;border:0;padding:4px;cursor:pointer;text-align:left;min-width:0}
.avatar{width:42px;height:42px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-family:var(--display);font-size:1.25rem;font-weight:600;flex:none;transition:box-shadow .2s}
.speaking .avatar{box-shadow:0 0 0 4px var(--accent-2),0 0 0 7px color-mix(in srgb,var(--accent) 35%,transparent);animation:talkglow 1s ease-in-out infinite alternate}
@keyframes talkglow{to{box-shadow:0 0 0 4px var(--accent-2),0 0 0 11px color-mix(in srgb,var(--accent) 15%,transparent)}}
.pinfo{display:flex;flex-direction:column;min-width:0}
.pinfo b{font-family:var(--display);font-size:1.15rem;font-weight:600;letter-spacing:.01em}
.pinfo small{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbtns{display:flex;gap:6px}
.icon-btn{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.icon-btn svg{width:20px;height:20px}

.chat{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.empty{margin:auto;text-align:center;max-width:36ch;padding-block:20px}
.empty h1{font-family:var(--display);font-weight:600;font-size:2.2rem;margin:0 0 8px;letter-spacing:-.01em}
.empty p{color:var(--muted);margin:0}
.topics{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;font-size:.92rem;cursor:pointer}
.chip:active{background:var(--accent-2)}

.msg{display:flex;flex-direction:column;max-width:86%;gap:4px}
.msg.ai{align-self:flex-start}
.msg.me{align-self:flex-end;align-items:flex-end}
.bubble{padding:10px 14px;border-radius:18px;overflow-wrap:anywhere;white-space:pre-wrap}
.ai .bubble{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:6px}
.me .bubble{background:var(--me);color:var(--me-fg);border-bottom-right-radius:6px}
.ai.hidden-text .bubble{color:transparent;text-shadow:0 0 9px var(--muted);user-select:none;cursor:pointer}
.ai.pending .bubble{color:var(--muted)}
.tools{display:flex;gap:4px;flex-wrap:wrap}
.tools button{background:none;border:0;color:var(--muted);font-size:.78rem;padding:4px 6px;border-radius:8px;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
.tools button svg{width:14px;height:14px}
.tools button:active{background:var(--accent-2)}
.tip{background:var(--tip-bg);color:var(--tip);font-size:.86rem;padding:6px 10px;border-radius:10px;max-width:100%}
.bg{font-size:.9rem;color:var(--muted);padding:2px 6px;border-left:2px solid var(--line)}
.err-line{align-self:center;color:var(--danger);font-size:.88rem;text-align:center;max-width:40ch}

.dock{border-top:1px solid var(--line);padding:10px 16px calc(14px + var(--safe-b));display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.status{text-align:center;font-size:.86rem;color:var(--muted);min-height:1.2em}
.status.err{color:var(--danger)}
.live{text-align:center;font-size:.95rem;font-style:italic;color:var(--fg);opacity:.8;max-height:3em;overflow:hidden}
.row{display:flex;align-items:center;justify-content:center;gap:28px}
.side-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.side-btn svg{width:22px;height:22px}
.side-btn[aria-pressed="true"]{color:var(--accent);border-color:var(--accent);background:var(--accent-2)}
.talk{width:80px;height:80px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;cursor:pointer;position:relative;transition:transform .12s;touch-action:manipulation}
.talk:active{transform:scale(.95)}
.talk svg{width:34px;height:34px;grid-area:1/1}
.talk .i-stop,.talk .dots{display:none}
.talk.listening{animation:pulse 1.3s infinite}
.talk.listening .i-mic{display:none}.talk.listening .i-stop{display:block}
.talk.thinking .i-mic{display:none}.talk.thinking .dots{display:flex}
.talk.speaking .i-mic{display:none}.talk.speaking .i-stop{display:block}
.dots{gap:5px;grid-area:1/1}
.dots i{width:8px;height:8px;border-radius:50%;background:currentColor;animation:dot 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}70%{box-shadow:0 0 0 22px transparent}100%{box-shadow:0 0 0 0 transparent}}

.typebar{display:flex;gap:8px;align-items:flex-end}
.typebar textarea{flex:1;min-width:0;resize:none;font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px 12px;max-height:120px}
.send{width:44px;height:44px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;cursor:pointer;flex:none}
.send svg{width:20px;height:20px}

.sheet-bg{position:fixed;inset:0;background:rgb(0 0 0 / .35);z-index:9}
.sheet{position:fixed;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:var(--surface);border-radius:20px 20px 0 0;padding:16px 16px calc(24px + var(--safe-b));z-index:10;max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.sheet-head{display:flex;justify-content:space-between;align-items:center}
.sheet h2{font-family:var(--display);margin:0;font-size:1.4rem}
.field{display:flex;flex-direction:column;gap:8px}
.lbl{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:flex;justify-content:space-between}
.hint{color:var(--muted);font-size:.8rem}
.field input[type=text]{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.field input[type=range]{width:100%;accent-color:var(--accent)}
.partners{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.partners button,.seg button{border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:8px 10px;cursor:pointer;text-align:left}
.partners button b{display:block;font-family:var(--display);font-size:1.02rem}
.partners button small{color:var(--muted);font-size:.75rem}
.partners button[aria-pressed="true"],.seg button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-2);box-shadow:inset 0 0 0 1px var(--accent)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{flex:1;text-align:center;min-width:64px}
.toggle{display:flex;gap:10px;align-items:center;cursor:pointer}
.toggle input{width:20px;height:20px;accent-color:var(--accent);flex:none}
.about{color:var(--muted);font-size:.8rem;margin:0}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.talk.listening{outline:3px solid var(--accent);outline-offset:4px}}

/* account & history */
.account{border-top:1px solid var(--line);padding-top:16px}
.acc-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.acc-name small{color:var(--muted)}
.acc-btn{font:inherit;font-size:.92rem;border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:10px;padding:9px 14px;cursor:pointer;text-decoration:none;text-align:center}
.acc-btn.danger{color:var(--danger)}
.pwbox summary{cursor:pointer;color:var(--accent);font-size:.92rem;padding:4px 0}
.pwform{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pwform input{font:inherit;color:var(--fg);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.hlist{display:flex;flex-direction:column}
.hitem{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding:10px 0}
.hitem:first-child{border-top:0}
.hopen{flex:1;min-width:0;background:none;border:0;text-align:left;cursor:pointer;padding:4px 0;display:flex;flex-direction:column;gap:2px}
.hopen b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hopen small{color:var(--muted);font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hitem.current .hopen b{color:var(--accent)}
.hdel{background:none;border:0;color:var(--muted);padding:8px;cursor:pointer;border-radius:8px}
.hdel svg{width:18px;height:18px}