:root{--bg:#e6ebee;--panel:#fff;--pane2:#f4f4f5;--line:#dadce0;--tx:#000;--mut:#707579;--acc:#3390ec;--acc2:#2a7fd4;--accs:#e8f2fd;--in:#fff;--out:#eeffde;--outm:#4fae4e;--fic:#4fae4e;--ficx:#fff;--chat:#c5d49a;--hov:#f4f4f5;--sel:#3390ec;--seltx:#fff;--sh:0 1px 2px rgba(16,35,47,.15);--r:15px;--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.035' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M70 15l10 10-10 10-10-10z'/%3E%3Cpath d='M100 70c5-8 15-8 15 0s-15 15-15 15-15-7-15-15 10-8 15 0z'/%3E%3Cpath d='M15 80h20v20H15z' transform='rotate(15 25 90)'/%3E%3Cpath d='M55 95l6-12 6 12z'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3C/g%3E%3C/svg%3E");--grad:linear-gradient(135deg,#dbddbb 0%,#6ba587 35%,#d5d88d 65%,#88b884 100%)}
[data-theme=dark]{--bg:#0f0f0f;--panel:#212121;--pane2:#181818;--line:#303030;--tx:#fff;--mut:#aaaaaa;--acc:#8774e1;--acc2:#7664d0;--accs:#2b2a3a;--in:#212121;--out:#766ac8;--outm:#fff;--fic:#fff;--ficx:#766ac8;--chat:#0f0f0f;--hov:#2c2c2c;--sel:#766ac8;--seltx:#fff;--sh:0 1px 2px rgba(0,0,0,.35);--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M70 15l10 10-10 10-10-10z'/%3E%3Cpath d='M100 70c5-8 15-8 15 0s-15 15-15 15-15-7-15-15 10-8 15 0z'/%3E%3Cpath d='M15 80h20v20H15z' transform='rotate(15 25 90)'/%3E%3Cpath d='M55 95l6-12 6 12z'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3C/g%3E%3C/svg%3E");--grad:linear-gradient(135deg,#1a1d2e 0%,#2a2340 40%,#1b2b30 75%,#16161c 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0f0f0f;--panel:#212121;--pane2:#181818;--line:#303030;--tx:#fff;--mut:#aaaaaa;--acc:#8774e1;--acc2:#7664d0;--accs:#2b2a3a;--in:#212121;--out:#766ac8;--outm:#fff;--fic:#fff;--ficx:#766ac8;--chat:#0f0f0f;--hov:#2c2c2c;--sel:#766ac8;--seltx:#fff;--sh:0 1px 2px rgba(0,0,0,.35);--pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.035' stroke-width='2'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M70 15l10 10-10 10-10-10z'/%3E%3Cpath d='M100 70c5-8 15-8 15 0s-15 15-15 15-15-7-15-15 10-8 15 0z'/%3E%3Cpath d='M15 80h20v20H15z' transform='rotate(15 25 90)'/%3E%3Cpath d='M55 95l6-12 6 12z'/%3E%3Ccircle cx='60' cy='60' r='3'/%3E%3C/g%3E%3C/svg%3E");--grad:linear-gradient(135deg,#1a1d2e 0%,#2a2340 40%,#1b2b30 75%,#16161c 100%)}}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font:13.5px/1.55 Tahoma,"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--tx);-webkit-tap-highlight-color:transparent;overflow:hidden}
button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#app{height:100dvh;display:flex}
.shell{display:flex;width:100%;height:100%;max-width:1400px;margin:auto;background:var(--panel);box-shadow:0 0 0 1px var(--line)}
.side{width:340px;flex:none;display:flex;flex-direction:column;border-left:1px solid var(--line);background:var(--panel);min-width:0}
.main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--chat);position:relative}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--mut);gap:10px}.empty svg{width:64px;height:64px;stroke-width:1.2;opacity:.5}
.empty span{background:var(--panel);padding:4px 12px;border-radius:20px;font-size:12px}
@media (max-width:760px){.side{width:100%;border:0}.main{display:none}.shell.open .side{display:none}.shell.open .main{display:flex}.back{display:flex!important}}
.hd{display:flex;align-items:center;gap:8px;padding:8px 10px;min-height:54px;border-bottom:1px solid var(--line);background:var(--panel)}
.hd .tt{flex:1;min-width:0}.hd .tt b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hd .tt small{display:block;font-size:11.5px;color:var(--mut)}.hd .tt small.on{color:var(--acc)}
.ib{width:36px;height:36px;border-radius:50%;border:0;background:none;display:flex;align-items:center;justify-content:center;color:var(--mut);transition:background .15s,color .15s}
.ib:hover{background:var(--hov);color:var(--tx)}.back{display:none}
.brand{font-weight:bold;font-size:16px;flex:1;color:var(--tx)}
.search{padding:6px 10px 8px;background:var(--panel)}.search label{display:flex;align-items:center;gap:6px;background:var(--hov);border-radius:20px;padding:0 12px;color:var(--mut)}
.search svg{width:16px;height:16px}.search input{border:0;background:none;outline:0;padding:7px 0;width:100%}
.list{flex:1;overflow-y:auto}
.row{display:flex;gap:10px;align-items:center;padding:8px 10px;margin:0 6px;border-radius:12px;cursor:pointer;transition:background .12s}
.row:hover{background:var(--hov)}.row.sel{background:var(--sel)}
.row .mid{flex:1;min-width:0}.row .l1,.row .l2{display:flex;align-items:center;gap:6px}
.row .nm{flex:1;font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .tm{font-size:11px;color:var(--mut);direction:ltr}
.row .pv{flex:1;color:var(--mut);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.row .pv b{color:var(--acc);font-weight:normal}
.badge{background:var(--acc);color:#fff;border-radius:11px;font-size:11px;min-width:20px;height:20px;padding:0 6px;display:flex;align-items:center;justify-content:center;font-weight:bold}
.av{width:46px;height:46px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:17px;flex:none;position:relative;user-select:none}
.av.sm{width:38px;height:38px;font-size:15px}.av.xs{width:30px;height:30px;font-size:13px}
.av.on::after{content:"";position:absolute;bottom:1px;left:1px;width:11px;height:11px;border-radius:50%;background:#22c55e;border:2px solid var(--panel)}
.c0{background:linear-gradient(135deg,#ff8a65,#e9573f)}.c1{background:linear-gradient(135deg,#ffc35a,#f09819)}.c2{background:linear-gradient(135deg,#9575cd,#6a4fb3)}.c3{background:linear-gradient(135deg,#4fc3f7,#2b8fd6)}
.c4{background:linear-gradient(135deg,#4db6ac,#21867a)}.c5{background:linear-gradient(135deg,#f06292,#d63c6b)}.c6{background:linear-gradient(135deg,#7986cb,#4756b0)}.c7{background:linear-gradient(135deg,#81c784,#43a047)}
.fab{position:absolute;bottom:16px;left:16px;width:52px;height:52px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.2);transition:transform .15s}
.fab:hover{transform:scale(1.06)}.sidewrap{position:relative;flex:1;display:flex;flex-direction:column;min-height:0}
.msgs{flex:1;overflow-y:auto;padding:10px 4% 6px;display:flex;flex-direction:column}
.day{align-self:center;background:var(--panel);color:var(--mut);font-size:11.5px;padding:2px 12px;border-radius:12px;margin:10px 0 6px;box-shadow:var(--sh);position:sticky;top:4px;z-index:1}
.b{max-width:min(78%,520px);align-self:flex-start;background:var(--in);padding:5px 9px 4px;border-radius:var(--r);margin-top:2px;box-shadow:var(--sh);position:relative;word-wrap:break-word;overflow-wrap:anywhere;animation:pop .18s ease-out}
.b.me{align-self:flex-end;background:var(--out)}.b.first{margin-top:8px}
.b.tail:not(.me){border-bottom-right-radius:4px}.b.tail.me{border-bottom-left-radius:4px}
.b.tail:not(.me)::before{content:"";position:absolute;bottom:0;right:-6px;width:10px;height:12px;background:var(--in);clip-path:polygon(0 0,0 100%,100% 100%)}
.b.tail.me::before{content:"";position:absolute;bottom:0;left:-6px;width:10px;height:12px;background:var(--out);clip-path:polygon(100% 0,0 100%,100% 100%)}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.b .who{font-size:12px;font-weight:bold;margin-bottom:1px}.b .tx{white-space:pre-wrap}.b a{color:var(--acc)}
.meta{float:left;display:flex;align-items:center;gap:3px;font-size:10.5px;color:var(--mut);direction:ltr;margin:6px 8px 0 0;line-height:1}.meta svg{width:15px;height:15px;stroke-width:2.2}.meta .rd{color:#34b7f1}
.b.img{padding:3px}.b.img img{display:block;max-width:100%;width:320px;max-height:340px;object-fit:cover;border-radius:11px;cursor:zoom-in;background:var(--hov);min-height:80px}
.b.img .meta{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.45);color:#fff;padding:3px 6px;border-radius:8px;margin:0}
.fc{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit!important;padding:3px 0;min-width:200px}
.fi{width:42px;height:42px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.fc .fn{font-weight:bold;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;text-align:right}.fc .fs{font-size:11.5px;color:var(--mut);direction:ltr;text-align:right}.fc .meta{margin-top:2px}
.vp{display:flex;align-items:center;gap:8px;min-width:220px;padding:2px 0}.vp .pl{width:38px;height:38px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center}
.vp .pl svg{fill:currentColor;stroke:none}.vp .tr{flex:1;height:4px;border-radius:2px;background:var(--line);position:relative;cursor:pointer;direction:ltr}.vp .tr i{position:absolute;inset:0 auto 0 0;background:var(--acc);border-radius:2px;width:0}
.vp .du{font-size:11px;color:var(--mut);direction:ltr;min-width:34px}
.typing{font-size:11.5px;color:var(--acc)}
.comp{display:flex;align-items:flex-end;gap:6px;padding:6px 4% 8px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.inbox{flex:1;display:flex;align-items:flex-end;background:var(--panel);border-radius:22px;box-shadow:var(--sh);padding:2px 4px}
.inbox textarea{flex:1;border:0;outline:0;background:none;resize:none;padding:9px 6px;max-height:140px;min-height:40px;line-height:1.5}
.send{width:44px;height:44px;border-radius:50%;border:0;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:var(--sh);transition:transform .12s,background .15s}
.send:active{transform:scale(.92)}.send.rec{background:#e5484d;animation:pulse 1.2s infinite}@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(229,72,77,.15)}}
.prog{height:3px;background:var(--acc);width:0;transition:width .2s;position:absolute;top:54px;right:0}
.recbar{flex:1;display:flex;align-items:center;gap:8px;color:#e5484d;padding:0 10px;font-size:13px;direction:ltr;justify-content:flex-end}.recbar i{width:9px;height:9px;border-radius:50%;background:#e5484d;animation:pulse 1s infinite}
.more{align-self:center;border:0;background:var(--panel);color:var(--acc);padding:4px 14px;border-radius:14px;margin:6px;box-shadow:var(--sh);font-size:12px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:20;display:flex;align-items:center;justify-content:center;animation:fade .15s}.lb img{max-width:94vw;max-height:86vh;border-radius:6px}
.lb .x{position:absolute;top:12px;left:12px;color:#fff}.lb .dl{position:absolute;top:12px;left:56px;color:#fff}.lb .ib:hover{background:rgba(255,255,255,.12)}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;inset:0;background:rgba(10,15,20,.45);display:flex;align-items:flex-end;justify-content:center;z-index:10;animation:fade .15s}
.sheet>div{background:var(--panel);width:100%;max-width:440px;border-radius:18px 18px 0 0;padding:14px;max-height:86dvh;overflow:auto;display:flex;flex-direction:column;gap:8px;animation:up .2s ease-out}
@media (min-width:761px){.sheet{align-items:center}.sheet>div{border-radius:18px}}@keyframes up{from{transform:translateY(30px);opacity:.5}}
.sheet h3{margin:2px 0;font-size:15px}.sheet h4{margin:8px 0 0;font-size:12.5px;color:var(--mut);font-weight:normal}
.fld{border:1px solid var(--line);background:var(--pane2);border-radius:11px;padding:9px 12px;width:100%;outline:0;transition:border-color .15s}.fld:focus{border-color:var(--acc)}
.btn{border:0;border-radius:11px;padding:10px 14px;background:var(--acc);color:#fff;font-weight:bold;transition:background .15s}.btn:hover{background:var(--acc2)}
.btn.g{background:var(--hov);color:var(--tx);font-weight:normal}.btn.s{padding:5px 10px;font-size:12px}.btn.d{background:none;color:#e5484d}
.chk{display:flex;gap:10px;align-items:center;padding:6px 4px;border-radius:10px;cursor:pointer}.chk:hover{background:var(--hov)}.chk input{accent-color:var(--acc);width:17px;height:17px}
.code{direction:ltr;font-family:ui-monospace,monospace;background:var(--accs);color:var(--acc);padding:10px;border-radius:10px;user-select:all;text-align:center;font-size:15px}
.msg{font-size:12.5px;min-height:1.2em;color:#e5484d}.msg.ok{color:var(--acc)}
.auth{margin:auto;width:100%;max-width:370px;padding:20px}
.card{background:var(--panel);border-radius:20px;padding:26px 22px;box-shadow:0 10px 40px rgba(16,24,40,.08);display:flex;flex-direction:column;gap:10px;animation:up .25s ease-out}
.logo{width:68px;height:68px;border-radius:20px;background:linear-gradient(135deg,#3dbca9,#21867a);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 4px;box-shadow:0 8px 20px rgba(42,157,143,.35)}
.logo svg{width:36px;height:36px}.card h1{text-align:center;font-size:19px;margin:0}.card p{text-align:center;color:var(--mut);margin:0 0 8px;font-size:12.5px}
.lnk{background:none;border:0;color:var(--acc);font-size:12.5px;padding:4px}
.foot{text-align:center;color:var(--mut);font-size:11px;margin-top:14px;display:flex;justify-content:center;gap:6px;align-items:center}.foot svg{width:13px;height:13px}
.authbg{display:flex;width:100%;background:radial-gradient(circle at 20% 0%,var(--accs),transparent 50%),var(--bg)}
.mem{display:flex;align-items:center;gap:10px;padding:5px 2px}.mem small{color:var(--mut)}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.c0t{color:#e9573f}.c1t{color:#e08a00}.c2t{color:#7c5cc4}.c3t{color:#2b8fd6}.c4t{color:#21867a}.c5t{color:#d63c6b}.c6t{color:#4756b0}.c7t{color:#43a047}
.mem .mid{flex:1}

.main{background:var(--pat),var(--grad);background-size:300px 300px,cover}
.row.sel{background:var(--sel);color:var(--seltx)}.row.sel .pv,.row.sel .tm,.row.sel .pv b{color:rgba(255,255,255,.85)}.row.sel .badge{background:#fff;color:var(--sel)}
.badge{border-radius:12px;height:22px;min-width:22px;font-size:12px}
.row{margin:0 6px;border-radius:10px;padding:7px 9px}.av{width:48px;height:48px}
.c0{background:linear-gradient(#ff885e,#ff516a)}.c1{background:linear-gradient(#ffcd6a,#ffa85c)}.c2{background:linear-gradient(#82b1ff,#665fff)}.c3{background:linear-gradient(#a0de7e,#54cb68)}
.c4{background:linear-gradient(#53edd6,#28c9b7)}.c5{background:linear-gradient(#72d5fd,#2a9ef1)}.c6{background:linear-gradient(#e0a2f3,#d669ed)}.c7{background:linear-gradient(#ffaa8f,#ff7a5c)}
.main>.hd{background:var(--panel);box-shadow:0 1px 2px rgba(0,0,0,.06);border:0}
.b{border-radius:15px;padding:5px 9px 5px;box-shadow:0 1px 2px rgba(16,35,47,.15)}
.b.tail:not(.me){border-bottom-right-radius:0}.b.tail.me{border-bottom-left-radius:0}
.b.tail:not(.me)::before{right:-8px;width:9px;height:17px;clip-path:path('M0 0 C0 10 3 14 9 17 L0 17 Z')}
.b.tail.me::before{left:-8px;width:9px;height:17px;clip-path:path('M9 0 C9 10 6 14 0 17 L9 17 Z')}
.b.me .meta,.b.me .meta .rd{color:var(--outm)}.b.img .meta,.b.img .meta .rd{color:#fff}
.meta{font-size:11px;margin:8px 10px -2px 0}.b .who{font-size:13px}
.day{background:rgba(0,0,0,.22);color:#fff;font-weight:bold;font-size:12px;box-shadow:none}
.comp{padding:6px 3% 10px}.inbox{border-radius:16px;box-shadow:0 1px 2px rgba(16,35,47,.15);padding:2px}
.send{width:46px;height:46px;background:var(--panel);color:var(--acc);box-shadow:0 1px 2px rgba(16,35,47,.15)}.send.rec{color:#fff}
.inbox .ib{color:var(--mut)}.inbox .ib:hover{color:var(--acc);background:none}
.fi{background:var(--acc)}.b.me .fi,.b.me .vp .pl{background:#4fae4e}[data-theme=dark] .b.me .fi,[data-theme=dark] .b.me .vp .pl{background:#fff;color:#766ac8}
.b.me .fs,.b.me .vp .du{color:var(--outm)}.b.me .vp .tr i{background:var(--outm)}
.empty span{background:rgba(0,0,0,.22);color:#fff}
.emo{display:grid;grid-template-columns:repeat(8,1fr);gap:2px}.emo button{border:0;background:none;font-size:22px;padding:4px;border-radius:8px}.emo button:hover{background:var(--hov)}
.fab{background:var(--acc)}.btn{background:var(--acc)}.logo{background:linear-gradient(135deg,#5eb5f7,#3390ec)}
.b a{color:var(--acc)}.b.me a{color:#3a8e26}

.ctxov{position:fixed;inset:0;z-index:30}.ctx{position:fixed;background:var(--panel);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.2);padding:5px;min-width:150px;display:flex;flex-direction:column;animation:fade .12s}
.ctx button,.ctx a{display:flex;align-items:center;gap:12px;border:0;background:none;padding:8px 12px;border-radius:8px;text-align:right;color:var(--tx);text-decoration:none;font-size:13.5px}
.ctx button:hover,.ctx a:hover{background:var(--hov)}.ctx svg{width:18px;height:18px;color:var(--mut)}.ctx .del,.ctx .del svg{color:#e53935}
.b{-webkit-user-select:text;-webkit-touch-callout:none}
.fwd{font-size:12px;color:var(--acc);margin-bottom:2px}.b.me .fwd{color:var(--outm)}.b.img .fwd{padding:3px 6px 0}
.b.me .fi,.b.me .vp .pl,[data-theme=dark] .b.me .fi,[data-theme=dark] .b.me .vp .pl{background:var(--fic);color:var(--ficx)}
.b{-webkit-touch-callout:none}.b.press{-webkit-user-select:none;user-select:none;transform:scale(.98);transition:transform .2s}@media (pointer:coarse){.b{-webkit-user-select:none;user-select:none}}.ctx{-webkit-user-select:none;user-select:none}