:root{color-scheme:light;--bg:#f3f5fa;--panel:#fff;--card:#f7f8fc;--line:#dfe3ec;--ink:#171c2b;--ink2:#454e66;--ink3:#69728a;--accent:#4457f3;--accent-soft:rgba(68,87,243,.12);--warn:#9a6400;--warn-s:rgba(214,150,30,.16)}
@media (prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0e1320;--panel:#151b2b;--card:#1a2133;--line:#283149;--ink:#e9edf5;--ink2:#b3bccd;--ink3:#7f8aa1;--accent:#7b86ff;--accent-soft:rgba(123,134,255,.16);--warn:#e9b44c;--warn-s:rgba(233,180,76,.16)}}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:640px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;gap:14px;min-height:100vh}
.mark{width:40px;height:40px}
h1{font-size:24px;line-height:1.25;margin:0;text-wrap:balance}
.note{color:var(--ink2);margin:0}
.acts{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.top{display:flex;align-items:center;gap:10px}
.top h1{font-size:20px}
.pill{margin-left:auto;font-size:13px;font-weight:600;border-radius:999px;padding:3px 11px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.pill.off{background:var(--warn-s);color:var(--warn)}
.convo{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto;padding:4px 0}
.msg{max-width:88%;border-radius:14px;padding:10px 13px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--accent-soft)}
.msg.it{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.msg.wait{color:var(--ink3);font-style:italic}
.talk{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 4px;position:sticky;bottom:0;background:var(--bg)}
.talkbtn{width:96px;height:96px;border-radius:50%;border:0;background:var(--accent);color:#fff;font:inherit;font-weight:700;font-size:17px;cursor:pointer;box-shadow:0 0 0 6px var(--accent-soft)}
.talkbtn.on{background:#c0392b;box-shadow:0 0 0 10px rgba(192,57,43,.18)}
.talkbtn:disabled{opacity:.5}
.hint{font-size:14px;color:var(--ink3);text-align:center}
.typerow{display:flex;gap:8px;width:100%}
.typerow input{flex:1;min-width:0;min-height:44px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:0 16px;font:inherit}