html,body{width:100%;max-width:100%;overflow-x:hidden;}
.screen{width:100%;max-width:100%;overflow-x:hidden;}
:root { --bg:#f6f7fb; --card:#fff; --ink:#1a1c22; --sub:#8b90a0; --line:#e9ebf2; --brand:#ff5c8a; --me:#ffe3ec; --bot:#fff; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font:15px/1.55 -apple-system,"Segoe UI",system-ui,"PingFang SC","Microsoft YaHei",sans-serif; }
body { display:flex; }
.screen { flex:1; display:flex; flex-direction:column; height:100dvh; height:var(--app-h,100dvh); }
.hidden { display:none !important; }
header { display:flex; align-items:center; gap:8px; padding:14px 16px; padding-top:calc(14px + env(safe-area-inset-top)); background:rgba(255,255,255,.9); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); font-weight:600; position:sticky; top:0; z-index:5; }
header span { flex:1; }
.who { flex:1; display:flex; flex-direction:column; line-height:1.2; }
.who small { color:var(--sub); font-weight:400; font-size:12px; }
.icon { border:0; background:transparent; font-size:22px; color:var(--ink); width:36px; height:36px; border-radius:18px; }
button { font:inherit; border-radius:12px; border:0; background:var(--brand); color:#fff; padding:11px 16px; font-weight:600; }
button.ghost { background:#eef0f7; color:#4a4f60; }
button.small { padding:8px 12px; font-size:13px; }
#auth { padding:0 24px; justify-content:center; align-items:stretch; gap:10px; max-width:420px; margin:0 auto; width:100%; }
#auth .logo { font-size:48px; text-align:center; }
#auth h1 { margin:0; font-size:26px; text-align:center; }
#auth .sub { margin:0 0 12px; color:var(--sub); text-align:center; }
#auth input { padding:13px 14px; border-radius:12px; border:1px solid var(--line); background:var(--card); font-size:15px; }
.row { display:flex; gap:10px; }
.row button { flex:1; }
.msg { color:var(--brand); text-align:center; font-size:13px; min-height:18px; }
#convs { flex:1; overflow:auto; }
.conv { display:flex; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line); align-items:center; }
.conv:active { background:#eef0f7; }
.ava { width:44px; height:44px; border-radius:14px; background:#fff; display:flex; align-items:center; justify-content:center; font-size:22px; border:1px solid var(--line); }
.conv .t { flex:1; min-width:0; }
.conv .t b { display:block; font-size:15px; }
.conv .t small { color:var(--sub); display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge { background:var(--brand); color:#fff; border-radius:10px; padding:1px 7px; font-size:12px; }
#msgs { flex:1; overflow:auto; padding:14px 12px 6px; display:flex; flex-direction:column; gap:10px; }
.m { max-width:82%; display:flex; gap:8px; align-items:flex-end; }
.m .av { width:34px; height:34px; border-radius:12px; background:#eef0f7; display:flex; align-items:center; justify-content:center; font-size:15px; flex:0 0 auto; overflow:hidden; }
.m .b { padding:9px 12px; border-radius:16px; background:var(--bot); border:1px solid var(--line); white-space:pre-wrap; word-break:break-word; }
.panel { position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--line); border-radius:18px 18px 0 0; box-shadow:0 -8px 30px rgba(0,0,0,.12); padding:12px 12px calc(12px + env(safe-area-inset-bottom)); z-index:20; max-height:52vh; display:flex; flex-direction:column; }
.panel-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.panel-head b { flex:1; }
.grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; overflow:auto; }
.grid .st { background:#f6f7fb; border-radius:12px; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.grid .st img { width:100%; height:100%; object-fit:contain; }
.hint { color:var(--sub); font-size:11px; text-align:center; margin-top:8px; }
.m.me { align-self:flex-end; flex-direction:row-reverse; }
.m.me .b { background:var(--me); border-color:#ffd0de; }
.m img { max-width:100%; border-radius:12px; display:block; }
.m .meta { font-size:11px; color:var(--sub); margin-top:4px; }
.typing { height:18px; padding:0 18px; color:var(--sub); font-size:12px; }
.composer { display:flex; gap:8px; padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.95); border-top:1px solid var(--line); align-items:flex-end; }
.composer textarea { flex:1; resize:none; max-height:120px; padding:11px 12px; border-radius:14px; border:1px solid var(--line); font:inherit; background:#fff; }
footer { padding:10px 16px calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); text-align:center; }

.update { display:flex; align-items:center; gap:10px; padding:10px 16px; background:#fff3d6; border-bottom:1px solid #ffe2a8; font-size:13px; color:#7a5a00; }
.update span { flex:1; }

.collect-btn { position:fixed; z-index:30; background:#1a1c22; color:#fff; border-radius:14px; padding:8px 12px; font-size:13px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.collect-btn.hidden { display:none; }

.av img { width:100%; height:100%; object-fit:cover; }

header .grow { flex:1; }
.av-btn { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.av-btn img { width:30px; height:30px; border-radius:50%; object-fit:cover; }

#splash { position:fixed; inset:0; background:#fff; display:flex; align-items:center; justify-content:center; z-index:999; transition:opacity .25s ease; }
#splash img { width:108px; height:108px; border-radius:24px; }
#splash.hide { opacity:0; pointer-events:none; }

#convSkeleton { padding:6px 0; }
#convSkeleton.hide { display:none; }
.sk { height:52px; margin:10px 16px; border-radius:14px; background:linear-gradient(90deg,#eef0f7 25%,#f7f8fc 37%,#eef0f7 63%); background-size:400% 100%; animation:sk 1.2s ease infinite; }
@keyframes sk { 0% { background-position:100% 50%; } 100% { background-position:0 50%; } }

.netbar { padding:8px 16px; background:#fff3d6; color:#7a5a00; font-size:12px; text-align:center; }
.netbar.hidden { display:none; }

.modal { position:fixed; inset:0; background:rgba(20,22,30,.35); display:flex; align-items:flex-end; z-index:50; }
.modal.hidden { display:none; }
.sheet { width:100%; background:#fff; border-radius:18px 18px 0 0; padding:20px 18px calc(20px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:12px; }
.sheet h3 { margin:0; font-size:18px; }
.sheet input { padding:12px 14px; border-radius:12px; border:1px solid var(--line); font:inherit; }
.hintline { color:var(--sub); font-size:12px; }


.m.pending .b { opacity:.55; }
.m.failed .b { border-color:#ffb3c1; }
.failnote { color:#ff5c8a; font-size:11px; margin-top:4px; }


.ava img { width:100%; height:100%; object-fit:cover; border-radius:14px; }


audio { max-width:220px; height:36px; }