:root{--a:#A12A1F;--s1:#F5F5F7;--s2:#F8F9FB;--tx:#1D1D1F;--tx2:#6E6E73;--bd:#E5E5EA;--err:#C0392B;--e:cubic-bezier(.2,.7,.2,1);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Arial,sans-serif;color:var(--tx)}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--s1)}button,textarea,input{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--a);outline-offset:2px}
.card{background:#fff;border-radius:26px;box-shadow:0 2px 6px rgba(0,0,0,.06),0 16px 48px rgba(0,0,0,.12);display:flex;flex-direction:column;overflow:hidden}
.ch{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;gap:8px}.ch b{display:block;font-size:16px}.ch small{color:var(--tx2);font-size:12px}
.banner{font-size:13px;padding:0 16px;background:var(--s1);color:var(--tx2);max-height:0;overflow:hidden;transition:all .25s var(--e)}.banner.show{max-height:60px;padding:8px 16px}.banner.err{background:#FBEAE8;color:var(--err)}
.msgs{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:8px;min-height:0}
.m{max-width:80%;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;animation:in .22s var(--e)}
.me{align-self:flex-end;background:linear-gradient(135deg,#B83226,#8E2519);color:#fff;border-bottom-right-radius:6px}.them{align-self:flex-start;background:var(--s1);border-bottom-left-radius:6px}
.st{align-self:flex-end;font-size:11px;color:var(--tx2);margin-top:-4px}.st.f{color:var(--err)}.st button{color:var(--err);text-decoration:underline;font-size:11px}
.dots{align-self:flex-start;background:var(--s1);border-radius:18px;padding:12px 14px;display:flex;gap:4px}.dots i{width:6px;height:6px;border-radius:50%;background:#9a9aa0;animation:bl 1.2s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.empty{margin:auto;color:var(--tx2);font-size:14px;text-align:center}
.compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--bd);align-items:flex-end;padding-bottom:max(12px,env(safe-area-inset-bottom))}
.compose textarea{flex:1;resize:none;border:1px solid var(--bd);border-radius:16px;padding:12px 14px;max-height:96px;min-height:44px;font-size:16px;background:var(--s2)}
.send{width:44px;height:44px;border-radius:14px;background:var(--a);color:#fff;font-size:20px;transition:transform .15s,opacity .2s}.send:active{transform:scale(.94)}.send:disabled{opacity:.35;cursor:default}
.btn{min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--bd);background:#fff;font-size:14px}.btn.p{background:var(--a);color:#fff;border-color:var(--a)}.btn:disabled{opacity:.4}
.badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#1D1D1F;color:#fff;font-size:12px;line-height:20px;text-align:center}
.spin{display:inline-block;width:10px;height:10px;border:2px solid var(--tx2);border-top-color:transparent;border-radius:50%;animation:sp .8s linear infinite;vertical-align:-1px;margin-right:4px}
@keyframes in{from{opacity:0;transform:translateY(6px)}}@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}