html,body{height:100%}body{overflow:hidden}.app{position:relative;height:100dvh;max-width:480px;margin:0 auto;overflow:hidden;display:flex;flex-direction:column}@media(min-width:520px){.app{box-shadow:0 0 0 1px var(--line),0 0 120px #06f3}}.head{flex:none;padding:max(18px,env(safe-area-inset-top)) 18px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(0,102,255,.18),transparent)}.head .row{display:flex;align-items:center;justify-content:space-between}.head .mark{height:26px;width:auto}.head .live{font-size:11px}.head h1{margin:12px 0 0;font-size:17px;font-weight:800;font-style:italic;line-height:1.25}.head h1.swap{animation:fade-up .5s ease}.me{display:flex;align-items:center;gap:10px;margin:12px 0 0;padding:8px 12px 8px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:14px}.me .avatar{font-size:15px}.me .dot{font-size:14px;margin-left:6px}.me small{display:block;color:var(--muted);font-size:12px}.me b{color:var(--c)}.body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 16px 8px;position:relative}.hero{text-align:center;padding:18px 12px 22px}.hero .tv{width:76px;height:76px;margin:0 auto 14px;border-radius:22px;display:grid;place-items:center;font-size:36px;background:linear-gradient(150deg,var(--brand),#0040b8);box-shadow:0 10px 40px var(--brand-glow)}.hero h2{margin:0 0 6px;font-size:20px;font-weight:900;font-style:italic}.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.45}.section-label{margin:6px 4px 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.item{--c: #6ea8ff;display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--surface);animation:fade-up .35s ease both}.item .avatar{font-size:14px}.item .dot{margin-top:6px;font-size:11px}.item .name{font-size:12.5px;font-weight:800;color:var(--c)}.item .you{margin-left:6px;padding:1px 6px;border-radius:6px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;vertical-align:1px}.item .text{font-size:15px;line-height:1.35;overflow-wrap:anywhere}.item.mine{background:color-mix(in srgb,var(--brand) 18%,transparent);box-shadow:inset 0 0 0 1px #3d8bff59}.item .status{margin-top:4px;font-size:12px;color:var(--muted)}.item .status.ok{color:var(--ok)}.item .status.wait{color:var(--warn)}.empty-own{text-align:center;color:var(--muted);font-size:14px;padding:18px;border:1px dashed var(--line);border-radius:14px}.new-pill{position:sticky;bottom:4px;display:block;margin:8px auto 0;padding:8px 14px;border:0;border-radius:999px;background:var(--brand);color:#fff;font-size:13px;font-weight:700;box-shadow:0 6px 20px var(--brand-glow)}.new-pill[hidden]{display:none}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}}.composer{flex:none;padding:10px 12px max(12px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#060a1feb;backdrop-filter:blur(12px)}.reacts{display:flex;justify-content:space-between;gap:6px;margin-bottom:10px}.reacts[hidden]{display:none}.reacts button{position:relative;flex:1;height:44px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:22px;line-height:1;transition:transform .1s;-webkit-tap-highlight-color:transparent}.reacts button:active{transform:scale(.88);background:var(--surface-2)}.reacts button img{width:26px;height:26px;margin:auto;pointer-events:none}.pop{position:absolute;left:50%;bottom:60%;width:26px;height:26px;pointer-events:none;animation:pop .9s ease-out forwards}@keyframes pop{0%{transform:translate(-50%) scale(.6);opacity:1}to{transform:translate(calc(-50% + var(--x)),-90px) scale(1.3);opacity:0}}form{display:flex;align-items:flex-end;gap:8px}.field{position:relative;flex:1}textarea{display:block;width:100%;resize:none;max-height:120px;padding:12px 14px;border-radius:18px;border:1px solid var(--line);background:var(--surface);font-size:16px;line-height:1.35;outline:none;transition:border-color .15s}textarea:focus{border-color:var(--brand-2)}textarea::placeholder{color:#6b77a3}.count{position:absolute;right:12px;top:-20px;font-size:12px;color:var(--muted)}.count.max{color:var(--danger)}.count[hidden]{display:none}.send{flex:none;width:48px;height:48px;border-radius:50%;border:0;background:var(--brand);color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 6px 20px var(--brand-glow);transition:transform .1s,opacity .15s}.send:active{transform:scale(.92)}.send:disabled{opacity:.4;box-shadow:none}.send svg{width:22px;height:22px}.paused{display:none;text-align:center;padding:14px;border-radius:16px;background:var(--surface);color:var(--muted);font-size:14px;font-weight:600}.app.is-paused .paused{display:block}.app.is-paused form,.app.is-paused .reacts{display:none}.toast{position:absolute;left:50%;bottom:150px;z-index:5;transform:translate(-50%,20px);padding:10px 16px;border-radius:999px;background:#fff;color:#0a1230;font-size:14px;font-weight:700;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;white-space:nowrap}.toast.on{opacity:1;transform:translate(-50%)}