*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#101418;color:#e9eef2;display:flex;flex-direction:column}
.hidden{display:none!important}
.card{margin:auto;padding:28px 22px;width:min(420px,100%);text-align:center}
.hero{width:min(220px,60vw);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px #1f8a5b,0 10px 40px #0008}
h1{margin:16px 0 2px;font-size:2rem;letter-spacing:.5px}
.tag{margin:0 0 20px;color:#9fb0bb}
.stack{display:flex;flex-direction:column;gap:10px;text-align:left;margin-top:18px}
label{font-weight:600}
input,textarea{font:inherit;color:inherit;background:#1a2128;border:1px solid #2c3640;border-radius:12px;padding:12px 14px;width:100%}
input:focus,textarea:focus{outline:2px solid #1f8a5b;border-color:transparent}
button{font:inherit;font-weight:600;background:#1f8a5b;color:#fff;border:0;border-radius:12px;padding:12px 16px;cursor:pointer}
button:disabled{opacity:.6}
.err{color:#ff8a80;min-height:1.2em;margin:0}
#chat{display:flex;flex-direction:column;height:100dvh;max-width:820px;width:100%;margin:0 auto}
.bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #232c34;background:#141a20;padding-top:max(10px,env(safe-area-inset-top))}
.mini{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px #1f8a5b}
.who{flex:1;display:flex;flex-direction:column;min-width:0}
.who small{color:#8fa1ad;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link{background:none;color:#8fd3b0;padding:6px;font-weight:500;font-size:.9rem}
#log{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.row{display:flex;gap:8px;align-items:flex-end;max-width:88%}
.row.me{align-self:flex-end;flex-direction:row-reverse}
.row img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}
.bubble{background:#1d252d;border-radius:16px;padding:8px 12px;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere}
.row.bot .bubble{background:#173b2c}
.row.me .bubble{background:#2a4a7a}
.name{display:block;font-size:.78rem;color:#9fb0bb;margin-bottom:2px}
.row.bot .name{color:#8fd3b0}
.time{font-size:.7rem;color:#7d8d98;margin-left:6px}
.notice{align-self:center;font-size:.8rem;color:#8fa1ad;background:#161c22;padding:3px 10px;border-radius:10px}
.typing{padding:2px 16px 6px;color:#8fd3b0;font-size:.85rem;font-style:italic}
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid #232c34;background:#141a20;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.composer textarea{resize:none;max-height:140px}