*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:16px/1.4 -apple-system,Segoe UI,Roboto,sans-serif;background:#f1f5f9;color:#0f172a}
.app{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:720px;margin:0 auto;background:#fff}
header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #e2e8f0}
.ttl{flex:1;display:flex;align-items:center;gap:8px}
.badge{background:#fef3c7;color:#92400e;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:700}
.back{color:#1d4ed8;text-decoration:none;font-size:14px;white-space:nowrap}
.reset{background:#fff;border:1px solid #cbd5e1;border-radius:999px;padding:6px 12px;font-size:14px;cursor:pointer}
.note{background:#fffbeb;color:#78350f;font-size:13px;padding:8px 14px;border-bottom:1px solid #fde68a}
main{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px}
.b{max-width:85%;padding:9px 13px;border-radius:16px;white-space:pre-wrap;word-wrap:break-word}
.b.bot{background:#f1f5f9;align-self:flex-start;border-bottom-left-radius:4px}
.b.me{background:#1d4ed8;color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.b.sys{background:#fffbeb;color:#78350f;align-self:center;font-size:14px}
.chips{display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 8px}
.chips button{background:#fff;border:1px solid #cbd5e1;border-radius:999px;padding:7px 12px;font-size:14px;cursor:pointer}
form{display:flex;gap:8px;padding:10px 14px calc(10px + env(safe-area-inset-bottom));border-top:1px solid #e2e8f0}
textarea{flex:1;resize:none;border:1px solid #cbd5e1;border-radius:14px;padding:10px 12px;font:inherit;max-height:120px}
#send{background:#1d4ed8;color:#fff;border:0;border-radius:14px;padding:0 16px;font-size:15px;cursor:pointer}
#send:disabled{opacity:.5}