/* ScaryChat — тёмный мессенджер. Цвета задаются темой из app.js через CSS-переменные. */
:root{
  --side:#17212b;--rail:#0e1621;--chat:#0e1621;--head:#17212b;--in:#182533;--out:#2b5278;
  --text:#f5f5f5;--muted:#7d8e9f;--hover:#202b36;--active:#2b5278;--input:#242f3d;
  --accent:#5eb5f7;--border:#101921;--danger:#ef5b5b;--ok:#4fbf67;--wall:none;--fs:15px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--chat);color:var(--text);font:14px/1.38 "Segoe UI",Roboto,"Open Sans","Helvetica Neue","Noto Color Emoji",system-ui,-apple-system,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input,textarea{font:inherit;color:var(--text)}
[hidden]{display:none!important}
.ic{width:24px;height:24px;flex:none;display:block}
i[data-i]{display:contents}
.muted{color:var(--muted)}
.center{text-align:center}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 35%,transparent);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.icbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:background .15s,color .15s;flex:none}
.icbtn:hover{background:var(--hover);color:var(--text)}
.badge{min-width:22px;height:22px;padding:0 7px;border-radius:11px;background:var(--accent);color:#fff;font-size:12.5px;font-weight:600;display:inline-grid;place-items:center;font-variant-numeric:tabular-nums}

/* ---------- avatars ---------- */
.ava-wrap{position:relative;flex:none;border-radius:50%;line-height:0}
.ava{border-radius:50%;object-fit:cover;display:grid;place-items:center;color:#fff;font-weight:600;background:var(--input);line-height:1;user-select:none}
.ava.saved{background:linear-gradient(#72d5fd,#2a9ef1)}
.ava.saved .ic{width:52%;height:52%}
.dot{position:absolute;right:1px;bottom:1px;width:14px;height:14px;border-radius:50%;background:#4fce5d;border:2.5px solid var(--side)}
.ava-wrap.ring{padding:3px;background:linear-gradient(135deg,var(--accent),#5ad69b)}
.ava-wrap.ring.seen{background:color-mix(in srgb,var(--muted) 60%,transparent)}
.ava-wrap.ring .ava{box-shadow:0 0 0 2.5px var(--side)}

/* ---------- auth ---------- */
.auth{position:fixed;inset:0;display:grid;place-items:center;background:var(--chat);padding:24px 16px;overflow:auto}
.auth::before{content:"";position:fixed;inset:0;background:var(--wall);pointer-events:none}
.auth-card{position:relative;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.auth .logo{width:116px;height:116px;margin-bottom:8px;filter:drop-shadow(0 10px 30px color-mix(in srgb,var(--accent) 40%,transparent))}
.auth h1{margin:0;font-size:30px;letter-spacing:-.01em}
.auth .sub{margin:0;color:var(--muted)}
.tabs{display:flex;background:var(--input);border-radius:12px;padding:4px;width:100%;margin:18px 0 10px}
.tabs button{flex:1;padding:9px;border-radius:9px;font-weight:600;color:var(--muted)}
.tabs .on{background:var(--side);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.25)}
#authForm{width:100%;display:flex;flex-direction:column;gap:12px;text-align:left}
.err{color:var(--danger);min-height:18px;margin:0;font-size:13.5px}

/* ---------- form fields ---------- */
.fld{display:flex;flex-direction:column;gap:5px}
.fld>span{font-size:13px;color:var(--muted);font-weight:600}
.fld input,.fld textarea{background:var(--input);border:2px solid transparent;border-radius:10px;padding:10px 12px;outline:0;width:100%;resize:none}
.fld input:focus,.fld textarea:focus{border-color:var(--accent)}
.at-in{display:flex;align-items:center;gap:2px;background:var(--input);border:2px solid transparent;border-radius:10px;padding:0 12px}
.at-in:focus-within{border-color:var(--accent)}
.at-in b{color:var(--muted);font-weight:500}
.fld .at-in input{background:none;border:0;padding:10px 0;border-radius:0}
.hint{font-size:12.5px;color:var(--muted);min-height:16px}
.hint.ok{color:var(--ok)}.hint.bad{color:var(--danger)}
.btn{height:44px;border-radius:10px;font-weight:600;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:filter .15s,background .15s}
.btn.primary{background:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{color:var(--accent)}
.btn.ghost:hover{background:var(--hover)}
.btn.danger{color:var(--danger)}
.btn.danger:hover{background:color-mix(in srgb,var(--danger) 12%,transparent)}
.btn:disabled{opacity:.6;cursor:default}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:76px minmax(300px,410px) 1fr;height:100%;height:100dvh}
.rail{background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:8px 0;overflow-y:auto;scrollbar-width:none}
.rail .menu{margin-bottom:6px}
.folder{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;color:var(--muted);font-size:11.5px;font-weight:500;position:relative;text-align:center;line-height:1.15;transition:background .15s,color .15s}
.folder:hover{background:var(--hover);color:var(--text)}
.folder.on{color:var(--accent)}
.folder .ic{width:28px;height:28px}
.folder .badge{position:absolute;top:4px;right:10px;min-width:20px;height:20px;font-size:11.5px;padding:0 5px;border:2px solid var(--rail)}
.rail .grow{flex:1;min-height:10px}

.sidebar{background:var(--side);display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--border);position:relative}
.side-top{display:flex;align-items:center;gap:8px;padding:10px 12px 8px}
.side-top .menu{display:none}
.search{flex:1;display:flex;align-items:center;gap:8px;background:var(--input);border-radius:22px;padding:0 6px 0 14px;height:42px;color:var(--muted);border:2px solid transparent;min-width:0;transition:border-color .15s}
.search:focus-within{border-color:var(--accent);color:var(--accent)}
.search input{flex:1;background:none;border:0;outline:0;min-width:0;height:100%}
.search input::placeholder{color:var(--muted)}
.search .ic{width:20px;height:20px}
.s-clear{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}

.stories{display:flex;gap:10px;padding:6px 12px 10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--border);flex:none}
.stories::-webkit-scrollbar{display:none}
.story{display:flex;flex-direction:column;align-items:center;gap:5px;width:66px;flex:none;font-size:12px;color:var(--muted);position:relative}
.story>span{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story .add{position:absolute;right:2px;top:40px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;border:2.5px solid var(--side)}
.story .add .ic{width:14px;height:14px;stroke-width:3}

.list{flex:1;overflow-y:auto;padding:4px 6px 12px}
.ci{display:flex;gap:11px;padding:8px 9px;border-radius:12px;cursor:pointer;align-items:center;transition:background .12s}
.ci:hover{background:var(--hover)}
.ci.on{background:var(--active);color:#fff}
.ci.on .ci-last,.ci.on .ci-time,.ci.on .ci-last .hl{color:rgba(255,255,255,.78)}
.ci.on .badge{background:#fff;color:var(--active)}
.ci.on .dot{border-color:var(--active)}
.ci-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ci-row{display:flex;align-items:center;gap:6px;min-width:0}
.ci-name{flex:1;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-time{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:2px;font-variant-numeric:tabular-nums}
.ci-last{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-last .hl{color:var(--accent)}
.chk{display:inline-flex;color:var(--accent)}
.chk .ic{width:17px;height:17px}
.sec{padding:10px 12px 6px;font-size:13.5px;color:var(--muted);font-weight:600}
.list-empty{padding:40px 24px;text-align:center;color:var(--muted);line-height:1.5}
.list-empty.small{padding:14px 24px}
mark{background:none;color:var(--accent);font-weight:600}

/* ---------- chat ---------- */
.chat{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--chat);overflow:hidden}
.chat::before{content:"";position:absolute;inset:0;background:var(--wall);pointer-events:none}
.empty{margin:auto;position:relative}
.empty span{background:rgba(0,0,0,.32);padding:6px 14px;border-radius:16px;font-size:14px;font-weight:500;color:#fff}
.chat-inner{display:flex;flex-direction:column;height:100%;position:relative;min-height:0}
.chat-head{display:flex;align-items:center;gap:4px;padding:6px 10px 6px 14px;background:var(--head);border-bottom:1px solid var(--border);min-height:58px;z-index:3;flex:none}
.chat-head .back{display:none}
.ch-title{flex:1;min-width:0;cursor:pointer;display:flex;gap:12px;align-items:center}
.ch-txt{min-width:0;display:flex;flex-direction:column}
.ch-txt b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-txt small{color:var(--muted);font-size:13.5px}
.ch-txt small.on{color:var(--accent)}

.messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:10px 0 6px;display:flex;flex-direction:column;position:relative;overscroll-behavior:contain}
.mlist{width:100%;max-width:780px;margin:auto auto 0;padding:0 16px;display:flex;flex-direction:column;gap:2px}
.day{align-self:center;margin:10px 0 6px;position:sticky;top:2px;z-index:2;background:rgba(0,0,0,.32);color:#fff;padding:3px 11px;border-radius:13px;font-size:13px;font-weight:500;backdrop-filter:blur(6px)}
.m-empty{display:grid;place-items:center;flex:1;min-height:50vh}
.m-empty>div{background:rgba(0,0,0,.3);color:#fff;border-radius:18px;padding:18px 22px;max-width:300px;text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center;backdrop-filter:blur(6px)}
.m-empty span{font-size:13.5px;opacity:.85}
.wave-hi{font-size:64px;line-height:1;margin-top:6px;transition:transform .2s}
.wave-hi:hover{transform:rotate(-14deg) scale(1.08)}

.msg{display:flex;padding:1px 0;animation:msgin .18s ease-out}
.msg.out{justify-content:flex-end}
@keyframes msgin{from{opacity:0;transform:translateY(6px)}}
.bubble{max-width:min(500px,80%);background:var(--in);border-radius:16px;padding:6px 10px 7px;position:relative;font-size:var(--fs);overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.12);min-width:64px}
.out .bubble{background:var(--out)}
.in .bubble{border-bottom-left-radius:5px}
.out .bubble{border-bottom-right-radius:5px}
.text{white-space:pre-wrap}
.text a{color:var(--accent);text-decoration:none}
.text a:hover{text-decoration:underline}
.out .text a{color:inherit;text-decoration:underline}
.text .pad{display:inline-block;width:46px;height:1px}
.out .text .pad{width:64px}
.meta{position:absolute;right:9px;bottom:5px;font-size:12px;color:color-mix(in srgb,var(--text) 50%,transparent);display:flex;align-items:center;gap:2px;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}
.meta .chk{color:inherit}
.meta .chk.read{color:var(--accent)}
.out .meta .chk.read{color:color-mix(in srgb,var(--accent) 55%,#fff)}
.meta .chk .ic{width:16px;height:16px}
.flash .bubble{animation:flash 1.2s}
@keyframes flash{30%{filter:brightness(1.6)}}

.t-photo .bubble,.t-gif .bubble,.t-video .bubble{padding:3px}
.t-photo .text,.t-gif .text,.t-video .text{padding:4px 7px 3px}
.t-photo .quote,.t-gif .quote,.t-video .quote{margin:3px 3px 4px}
.media{position:relative;border-radius:13px;overflow:hidden;max-width:100%;background:rgba(0,0,0,.25);cursor:pointer}
.media img,.media video{display:block;width:100%;height:100%;object-fit:cover}
.media video{cursor:default;background:#000}
.bare .bubble{background:none;box-shadow:none;padding:0}
.bare .media{border-radius:16px}
.bare .meta{background:rgba(0,0,0,.45);color:#fff;padding:2px 7px;border-radius:10px;right:8px;bottom:8px}
.bare .meta .chk.read{color:#fff}
.t-video.bare .meta{top:8px;bottom:auto}
.gif-tag{position:absolute;left:8px;top:8px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;font-weight:700;padding:1px 6px;border-radius:6px;letter-spacing:.04em}

.jumbo .bubble{background:none;box-shadow:none;padding:0 2px 20px}
.jumbo .text{font-size:56px;line-height:1.1}
.jumbo .text .pad{display:none}
.jumbo .meta{background:rgba(0,0,0,.35);color:#fff;padding:1px 7px;border-radius:10px;right:0;bottom:0}

.quote{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);border-radius:5px 7px 7px 5px;padding:3px 8px;margin-bottom:4px;cursor:pointer;font-size:13.5px;display:flex;flex-direction:column;min-width:0}
.out .quote{border-color:color-mix(in srgb,var(--text) 80%,transparent);background:color-mix(in srgb,var(--text) 10%,transparent)}
.quote b{color:var(--accent);font-weight:600}
.out .quote b{color:var(--text)}
.quote span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.85}

.voice{display:flex;align-items:center;gap:10px;min-width:230px;padding:2px 0 14px}
.vplay{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;transition:transform .12s}
.vplay:active{transform:scale(.94)}
.vplay .ic{width:22px;height:22px}
.out .vplay{background:color-mix(in srgb,var(--text) 92%,transparent);color:var(--out)}
.vbody{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.wave{display:flex;align-items:center;gap:2px;height:26px;cursor:pointer}
.wave i{flex:1;max-width:3px;min-width:2px;border-radius:2px;background:color-mix(in srgb,var(--accent) 40%,transparent);min-height:3px}
.wave i.on{background:var(--accent)}
.out .wave i{background:color-mix(in srgb,var(--text) 35%,transparent)}
.out .wave i.on{background:var(--text)}
.vdur{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.out .vdur{color:color-mix(in srgb,var(--text) 60%,transparent)}

.callmsg{display:flex;align-items:center;gap:12px;padding:2px 0 14px;min-width:210px}
.callmsg .cm-ic{color:var(--ok)}
.callmsg .cm-ic.miss{color:var(--danger)}
.callmsg .cm-ic .ic{width:20px;height:20px}
.callmsg b{display:block;font-weight:600}
.callmsg span{font-size:13px;color:color-mix(in srgb,var(--text) 55%,transparent)}
.callmsg .icbtn{margin-left:auto;color:var(--accent)}
.out .callmsg .icbtn{color:var(--text)}

/* ---------- composer ---------- */
.compose-wrap{width:100%;max-width:780px;margin:0 auto;padding:4px 16px 14px;position:relative;z-index:3;flex:none}
.composer{display:flex;align-items:flex-end;gap:8px}
.cbox{flex:1;display:flex;align-items:flex-end;background:var(--head);border-radius:16px;padding:5px;min-width:0;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.reply-bar:not([hidden])+.composer .cbox{border-top-left-radius:0;border-top-right-radius:0}
.cbox textarea{flex:1;background:none;border:0;outline:0;resize:none;max-height:180px;padding:9px 4px;line-height:1.35;font-size:var(--fs);min-width:0}
.cbox textarea::placeholder{color:var(--muted)}
.sendbtn{width:52px;height:52px;border-radius:50%;background:var(--head);color:var(--accent);display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:background .15s,color .15s,transform .12s}
.sendbtn:active{transform:scale(.93)}
.sendbtn.send,.sendbtn.rec-on{background:var(--accent);color:#fff}
.reply-bar{display:flex;align-items:center;gap:12px;background:var(--head);padding:6px 6px 4px 16px;border-radius:16px 16px 0 0;margin-right:60px;color:var(--accent)}
.rb-txt{flex:1;min-width:0;display:flex;flex-direction:column;border-left:2px solid var(--accent);padding-left:9px;font-size:13.5px}
.rb-txt b{color:var(--accent)}
.rb-txt span{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec{flex:1;display:flex;align-items:center;gap:12px;background:var(--head);border-radius:16px;height:52px;padding:0 8px 0 18px;min-width:0}
.reddot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.25}}
.rec b{font-variant-numeric:tabular-nums;font-weight:600}
.rec-lvl{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:2px;height:28px;overflow:hidden;min-width:0}
.rec-lvl i{width:3px;flex:none;border-radius:2px;background:var(--accent);min-height:3px}
.rec-cancel{color:var(--accent);font-weight:600;padding:8px 12px;border-radius:10px}
.rec-cancel:hover{background:var(--hover)}
.uploading{display:flex;align-items:center;gap:8px;margin:0 auto 8px;width:max-content;background:rgba(0,0,0,.4);color:#fff;font-size:13px;padding:5px 12px;border-radius:14px}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.emoji-panel{position:absolute;bottom:calc(100% - 2px);right:76px;width:min(390px,calc(100vw - 24px));height:min(400px,60dvh);background:var(--head);border-radius:16px;box-shadow:0 10px 36px rgba(0,0,0,.45);display:flex;flex-direction:column;overflow:hidden;animation:pop .15s ease-out;transform-origin:bottom right}
.ep-tabs{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--border)}
.ep-tabs button{padding:6px 14px;border-radius:14px;color:var(--muted);font-weight:600}
.ep-tabs button.on{background:var(--hover);color:var(--accent)}
.ep-body{flex:1;overflow-y:auto;padding:4px 8px 10px}
.ep-cat{font-size:12.5px;color:var(--muted);font-weight:600;padding:10px 4px 4px;position:sticky;top:-4px;background:var(--head);z-index:1}
.ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
.ep-grid button{font-size:27px;height:44px;border-radius:10px;line-height:1;transition:transform .1s}
.ep-grid button:hover{background:var(--hover);transform:scale(1.12)}
.gif-up{width:100%;margin:6px 0 8px}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.gif-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;background:var(--input)}
.gif-grid img:hover{opacity:.85}

/* ---------- overlays ---------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;animation:fade .15s}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
@keyframes slide{from{transform:translateX(-100%)}}
.drawer{position:fixed;left:0;top:0;bottom:0;width:300px;max-width:85vw;background:var(--side);z-index:51;display:flex;flex-direction:column;animation:slide .2s ease-out;box-shadow:4px 0 30px rgba(0,0,0,.4);padding-top:env(safe-area-inset-top,0px)}
.dr-head{padding:22px 22px 14px;display:flex;flex-direction:column;gap:3px}
.dr-head .ava-wrap{margin-bottom:12px;cursor:pointer}
.dr-head b{font-size:15.5px}
.dr-head span{color:var(--accent);font-size:13.5px}
.dr-list{padding:6px 0;border-top:1px solid var(--border)}
.dr-item{display:flex;align-items:center;gap:24px;padding:11px 22px;width:100%;text-align:left;font-weight:500}
.dr-item:hover{background:var(--hover)}
.dr-item .ic{color:var(--muted)}
.dr-item.danger,.dr-item.danger .ic{color:var(--danger)}
.switch{margin-left:auto;width:34px;height:14px;border-radius:7px;background:color-mix(in srgb,var(--muted) 60%,transparent);position:relative;flex:none}
.switch::after{content:"";position:absolute;top:-3px;left:-2px;width:20px;height:20px;border-radius:50%;background:#e8e8e8;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.switch.on{background:color-mix(in srgb,var(--accent) 55%,transparent)}
.switch.on::after{left:16px;background:var(--accent)}
.dr-foot{margin-top:auto;padding:16px 22px calc(16px + env(safe-area-inset-bottom,0px));font-size:12.5px;color:var(--muted)}

.modal{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--side);border-radius:16px;box-shadow:0 12px 44px rgba(0,0,0,.5);animation:mpop .18s ease-out}
.modal.wide{width:min(520px,calc(100vw - 24px))}
@keyframes mpop{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}}
.m-head{display:flex;align-items:center;gap:8px;padding:12px 8px 4px 22px;font-size:17px;font-weight:600;position:sticky;top:0;background:var(--side);z-index:2}
.m-head span{flex:1}
.m-body{padding:8px 22px 22px;display:flex;flex-direction:column;gap:14px}
.m-actions{display:flex;justify-content:flex-end;gap:6px}
.m-text{margin:0;line-height:1.5}

.pf-top,.up-top{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 0 6px;text-align:center}
.pf-top b,.up-top b{font-size:19px;margin-top:8px}
.up-top small{color:var(--muted)}
.up-top small.on{color:var(--accent)}
.pf-ava{position:relative;cursor:pointer;border-radius:50%}
.pf-cam{position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.42);display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .15s}
.pf-ava:hover .pf-cam,.pf-ava.busy .pf-cam{opacity:1}
.pf-cam .ic{width:34px;height:34px}
.pf-link{font-size:13px;color:var(--muted);text-align:center}
.pf-link a{color:var(--accent);cursor:pointer}
.up-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.up-actions button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;border-radius:12px;background:var(--input);font-size:12.5px;font-weight:600;color:var(--accent)}
.up-actions button:hover{background:var(--hover)}
.up-rows{display:flex;flex-direction:column;gap:2px}
.up-row{display:flex;gap:20px;padding:9px 8px;align-items:center;border-radius:10px}
.up-row[data-a]{cursor:pointer}
.up-row[data-a]:hover{background:var(--hover)}
.up-row>.ic{color:var(--muted)}
.up-row div{display:flex;flex-direction:column;min-width:0}
.up-row b{font-weight:500;overflow-wrap:anywhere}
.up-row small{color:var(--muted);font-size:13px}

.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.th{border-radius:14px;overflow:hidden;border:2px solid transparent;cursor:pointer;text-align:left;background:var(--input)}
.th.on{border-color:var(--accent)}
.th-prev{height:76px;padding:10px;display:flex;flex-direction:column;gap:5px;justify-content:flex-end}
.th-prev i{display:block;height:13px;border-radius:7px;width:62%}
.th-prev i:last-child{align-self:flex-end;width:48%}
.th span{display:block;padding:7px 10px;font-size:13px;font-weight:600}
.swatches{display:flex;flex-wrap:wrap;gap:12px}
.sw{width:34px;height:34px;border-radius:50%;position:relative;display:grid;place-items:center;color:#fff;font-size:12px}
.sw.on{box-shadow:0 0 0 2px var(--side),0 0 0 4px var(--text)}
.sw.auto{background:conic-gradient(#5eb5f7,#a98bff,#ff6b8b,#ffb547,#4fd18b,#5eb5f7)}
.walls{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.wall{aspect-ratio:3/4;border-radius:10px;border:2px solid transparent;cursor:pointer}
.wall.on{border-color:var(--accent)}
.set-row{display:flex;align-items:center;gap:12px;font-weight:500}
.set-row input[type=range]{flex:1;accent-color:var(--accent)}
.set-row.click{cursor:pointer;padding:6px 0}
.h3{font-size:13.5px;font-weight:600;color:var(--accent);margin:4px 0 -4px}
.viewers{display:flex;flex-direction:column;gap:4px}
.viewers .ci{padding:6px}

.ctx{position:fixed;z-index:90;background:var(--head);border-radius:12px;padding:6px 0;min-width:200px;box-shadow:0 8px 28px rgba(0,0,0,.45);animation:pop .12s ease-out}
.ctx button{display:flex;gap:16px;align-items:center;width:100%;padding:9px 18px;font-weight:500;text-align:left}
.ctx button:hover{background:var(--hover)}
.ctx .ic{width:20px;height:20px;color:var(--muted)}
.ctx .danger,.ctx .danger .ic{color:var(--danger)}

.lb{position:fixed;inset:0;z-index:85;background:rgba(0,0,0,.92);display:grid;place-items:center;cursor:zoom-out;animation:fade .15s}
.lb img{max-width:96vw;max-height:94dvh;object-fit:contain}
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(20,24,30,.94);color:#fff;padding:10px 18px;border-radius:12px;z-index:100;font-size:14px;max-width:calc(100vw - 32px);box-shadow:0 6px 20px rgba(0,0,0,.35);animation:fade .15s}

/* ---------- stories viewer ---------- */
.sv{position:fixed;inset:0;z-index:70;background:#000;display:grid;place-items:center;animation:fade .15s}
.sv-stage{position:relative;width:min(100vw,calc(100dvh * 9 / 16));height:100dvh;background:#111;overflow:hidden;color:#fff}
@media (min-width:700px){.sv-stage{height:min(92dvh,880px);width:min(100vw,calc(min(92dvh,880px) * 9 / 16));border-radius:16px}}
.sv-media img,.sv-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sv-bars{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));left:8px;right:8px;display:flex;gap:4px;z-index:3}
.sv-bars i{flex:1;height:3px;background:rgba(255,255,255,.3);border-radius:2px;overflow:hidden}
.sv-bars b{display:block;height:100%;background:#fff;width:0}
.sv-head{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));left:12px;right:6px;display:flex;align-items:center;gap:10px;z-index:3;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sv-who{flex:1;display:flex;flex-direction:column;min-width:0}
.sv-who small{opacity:.75}
.sv-head .icbtn{color:#fff}
.sv-head .icbtn:hover{background:rgba(255,255,255,.15)}
.sv-nav{position:absolute;inset:0;display:flex;z-index:2}
.sv-nav div{flex:1}
.sv-nav div:first-child{flex:.6}
.sv-cap{position:absolute;left:0;right:0;bottom:84px;text-align:center;padding:0 20px;z-index:3;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.8);pointer-events:none}
.sv-foot{position:absolute;bottom:0;left:0;right:0;padding:16px 14px calc(16px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;align-items:center;gap:10px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.sv-foot button{display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;padding:8px 12px;border-radius:20px;background:rgba(255,255,255,.14)}
.sv-foot button:hover{background:rgba(255,255,255,.24)}
.sv-foot .ic{width:20px;height:20px}
.sv-foot .grow{flex:1}

/* ---------- call ---------- */
.call{position:fixed;inset:0;z-index:80;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--accent) 38%,#0a1018),#04060a 70%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(64px + env(safe-area-inset-top,0px)) 20px calc(44px + env(safe-area-inset-bottom,0px));animation:fade .2s}
#rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;opacity:0;pointer-events:none}
#lv{position:absolute;right:16px;top:calc(16px + env(safe-area-inset-top,0px));width:min(30vw,210px);border-radius:14px;z-index:2;transform:scaleX(-1);background:#111;box-shadow:0 4px 20px rgba(0,0,0,.5);display:none}
.call.vid #rv{opacity:1}
.call.vid #lv{display:block}
.call.vid .call-ava{display:none}
.call.vid .call-info{background:rgba(0,0,0,.35);padding:8px 16px;border-radius:16px;backdrop-filter:blur(8px)}
.call-info{text-align:center;z-index:1;display:flex;flex-direction:column;align-items:center}
.call-ava{margin-bottom:18px;border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.25)}70%{box-shadow:0 0 0 26px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.call.live .call-ava{animation:none}
.call-info h2{margin:0;font-size:26px;font-weight:600}
.call-info p{margin:6px 0 0;opacity:.8;font-variant-numeric:tabular-nums}
.call-btns{display:flex;gap:30px;z-index:1}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:13px;color:#fff}
.cbtn i{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(10px);transition:transform .12s}
.cbtn:active i{transform:scale(.93)}
.cbtn .ic{width:28px;height:28px}
.cbtn.red i{background:#ef4b4b}
.cbtn.green i{background:#3fbf5f;animation:pulse 1.6s infinite}
.cbtn.off i{background:#fff;color:#111}

/* ---------- premium, stickers, contacts, stories v2 ---------- */
.nm{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%}
.nm>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-p{display:inline-grid;place-items:center;flex:none;line-height:0}
.badge-p .vf{width:1.05em;height:1.05em}
.badge-p img{width:1.3em;height:1.3em;object-fit:contain}
.badge-p.click{cursor:pointer;border-radius:6px;padding:2px}
.badge-p.click:hover{background:var(--hover)}
.prem-line{display:flex;align-items:center;gap:8px;justify-content:center;font-size:13px;color:var(--accent);font-weight:600}
.bot-tag{font-size:11px;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);padding:1px 6px;border-radius:6px;flex:none}
.t-sticker .bubble{background:none;box-shadow:none;padding:0 0 22px}
.t-sticker .meta{background:rgba(0,0,0,.4);color:#fff;padding:1px 7px;border-radius:10px;right:0;bottom:0}
.t-sticker .meta .chk.read{color:#fff}
.sticker{width:170px;height:170px;object-fit:contain;display:block}
.jumbo-anim{width:110px;height:110px;object-fit:contain;display:block}
.st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:4px}
.st-grid button{aspect-ratio:1;border-radius:12px;padding:6px;transition:background .12s,transform .12s}
.st-grid button:hover{background:var(--hover);transform:scale(1.06)}
.st-grid img{width:100%;height:100%;object-fit:contain}
.st-lock{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:18px 10px;color:var(--muted)}
.st-lock img{width:84px;height:84px}
.st-lock b{color:var(--text);font-size:15px}
.es-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:4px;max-height:330px;overflow-y:auto}
.es-grid button{aspect-ratio:1;border-radius:10px;padding:6px;display:grid;place-items:center}
.es-grid button:hover,.es-grid button.on{background:var(--hover)}
.es-grid button.on{box-shadow:inset 0 0 0 2px var(--accent)}
.es-grid img{width:100%;height:100%;object-fit:contain}
.es-grid .vf{width:28px;height:28px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 14px;border-radius:18px;background:var(--input);font-weight:600;font-size:13.5px;color:var(--muted);border:2px solid transparent}
.chip.on{color:var(--accent);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.adm-row{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px}
.adm-row:hover{background:var(--hover)}
.adm-row .ci-body{gap:1px}
.adm-row small{color:var(--muted);font-size:12.5px}
.adm-found{min-height:20px;font-size:13px}
.story-prev{border-radius:14px;overflow:hidden;background:#000;max-height:46dvh;display:grid;place-items:center}
.story-prev img,.story-prev video{max-width:100%;max-height:46dvh;display:block}
.st-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.st-thumb{position:relative;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--input);cursor:pointer}
.st-thumb img,.st-thumb video{width:100%;height:100%;object-fit:cover;display:block}
.st-thumb small{position:absolute;left:6px;bottom:5px;color:#fff;font-size:11.5px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.8);display:flex;align-items:center;gap:3px}
.st-thumb small .ic{width:13px;height:13px}
.st-thumb .pin{position:absolute;right:6px;top:6px;background:var(--accent);color:#fff;border-radius:6px;font-size:10.5px;font-weight:700;padding:1px 5px}
.sv-foot .liked{background:rgba(255,80,110,.35)}
.sv-foot .liked .ic{color:#ff5b7f;fill:#ff5b7f}
.sv-meta{font-size:12px;opacity:.75}
.up-btn{width:100%}
.call-flags{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:10px}
.call-flag{display:inline-flex;align-items:center;gap:6px;background:rgba(239,75,75,.85);color:#fff;font-size:13px;font-weight:600;padding:5px 12px;border-radius:14px}
.call-flag .ic{width:16px;height:16px}
.call-flag.info{background:rgba(255,255,255,.2)}
.call-btns{flex-wrap:wrap;justify-content:center}
.call.vid #lv.screen{transform:none}
.q-row{display:flex;gap:8px;flex-wrap:wrap}

/* call: video layout, minimize, top bar */
.call.rvid #rv{opacity:1}
.call.rscreen #rv{object-fit:contain}
.call.lvid #lv{display:block}
.call.rvid .call-ava{display:none}
.call.rvid .call-info{background:rgba(0,0,0,.4);padding:8px 18px;border-radius:16px;backdrop-filter:blur(8px)}
.call.rvid .call-info h2{font-size:18px}
.call:not(.rvid).lvid #lv{width:min(44vw,320px)}
.call-min{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));top:calc(14px + env(safe-area-inset-top,0px));z-index:3;color:#fff;background:rgba(255,255,255,.14);width:44px;height:44px}
.call-min:hover{background:rgba(255,255,255,.26);color:#fff}
.cbtn.on i{background:var(--accent)}
.callbar{position:fixed;top:0;left:0;right:0;z-index:40;height:38px;display:flex;align-items:center;gap:10px;padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px));background:linear-gradient(90deg,#2aa651,#38c264);color:#fff;cursor:pointer;font-size:13.5px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.callbar b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.callbar #cbTime{font-variant-numeric:tabular-nums;opacity:.9}
.cb-hint{flex:1;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.4s infinite;flex:none}
.cb-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);color:#fff;flex:none}
.cb-btn .ic{width:17px;height:17px}
.cb-btn.off{background:#fff;color:#1e8a40}
.cb-btn.red{background:#e53e3e}
body.has-callbar .app{height:calc(100dvh - 38px);margin-top:38px}
@media (max-width:760px){.cb-hint{display:none}.callbar{justify-content:flex-start}.callbar #cbTime{flex:1}body.has-callbar .chat{top:38px}}

/* story viewers list */
.sv-idx{font-weight:400;opacity:.75}
.sv-views-btn{gap:8px!important;white-space:nowrap}
.sv-stack{display:flex}
.sv-stack .ava-wrap{margin-left:-9px;border:2px solid #111;border-radius:50%}
.sv-stack .ava-wrap:first-child{margin-left:0}
.sv-hearts{font-weight:600}
.sv-viewers{position:absolute;left:50%;bottom:76px;transform:translateX(-50%);width:min(92%,330px);max-height:52%;overflow-y:auto;z-index:5;background:rgba(36,40,48,.97);border-radius:12px;padding:6px 0;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:pop .15s ease-out}
.sv-vrow{display:flex;align-items:center;gap:12px;padding:6px 14px;cursor:pointer}
.sv-vrow:hover{background:rgba(255,255,255,.07)}
.sv-vtxt{flex:1;min-width:0;display:flex;flex-direction:column}
.sv-vtxt b{font-weight:500;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-vtxt small{display:flex;align-items:center;gap:4px;font-size:12.5px;opacity:.6}
.sv-vtxt small .ic{width:14px;height:14px;color:#5eb5f7}
.sv-vrx{width:24px;height:24px;flex:none}
.sv-vempty{margin:10px 14px;opacity:.7;font-size:13.5px}
/* message reactions */
.rx-row{display:flex;flex-wrap:wrap;gap:4px;margin:4px 0 14px}
.t-photo .rx-row,.t-gif .rx-row,.t-video .rx-row{margin:4px 6px 18px}
.bare .rx-row,.t-sticker .rx-row,.jumbo .rx-row{margin:4px 0 22px}
.rx-chip{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 8px 0 5px;border-radius:14px;background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--text);font-size:13px;font-weight:600;transition:transform .1s}
.rx-chip img{width:20px;height:20px}
.rx-chip.mine{background:var(--accent);color:#fff}
.out .rx-chip{background:color-mix(in srgb,var(--text) 16%,transparent)}
.out .rx-chip.mine{background:color-mix(in srgb,var(--text) 90%,transparent);color:var(--out)}
.rx-chip:active{transform:scale(.92)}
.ctx-rx{display:flex;gap:2px;padding:4px 8px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.ctx-rx button{width:34px;height:34px;padding:3px;border-radius:50%;display:grid;place-items:center}
.ctx-rx button:hover{background:var(--hover);transform:scale(1.15)}
.ctx-rx img{width:100%;height:100%}
.ctx-rx .ic{width:18px;height:18px;color:var(--muted)}
.rx-hint{font-size:12px;color:var(--muted);padding:0 4px 6px}
/* share sound choice */
.sh-snd{display:flex;flex-direction:column;gap:8px}
.sh-snd select{background:var(--input);color:var(--text);border:2px solid transparent;border-radius:10px;padding:8px 10px;font:inherit;max-width:100%}
.sh-note{font-size:12.5px;line-height:1.45;color:#ffcf66;background:rgba(255,190,60,.1);border-radius:10px;padding:8px 10px}

/* admin panel v2 */
.adm-tabs{display:flex;gap:6px;flex-wrap:wrap}
.adm-target{display:flex;gap:8px;align-items:center}
.adm-target .at-in{flex:1}
.adm-target .at-in input:disabled{opacity:.4}
.fx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}
.fx{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:12px;background:var(--input);font-size:12.5px;font-weight:600;transition:transform .12s,background .12s}
.fx span{font-size:28px;line-height:1}
.fx:hover{background:var(--hover);transform:translateY(-2px)}
.fx-emoji{display:flex;flex-wrap:wrap;gap:4px}
.fx-emoji button{width:44px;height:44px;border-radius:10px;padding:5px;border:2px solid transparent}
.fx-emoji button.on{border-color:var(--accent);background:var(--hover)}
.fx-emoji img{width:100%;height:100%}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.stat{background:var(--input);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:2px}
.stat b{font-size:24px;font-variant-numeric:tabular-nums;color:var(--accent)}
.stat span{font-size:12.5px;color:var(--muted)}
.title-chip{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:8px;background:linear-gradient(90deg,#f5a623,#ff5b7f);color:#fff;vertical-align:middle;margin:2px 0}
.announce{position:fixed;top:0;left:0;right:0;z-index:45;min-height:36px;display:flex;align-items:center;gap:10px;padding:6px max(14px,env(safe-area-inset-right,0px)) 6px max(14px,env(safe-area-inset-left,0px));background:linear-gradient(90deg,#7a5cff,#ff5b7f);color:#fff;font-size:13.5px;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.announce b{flex:1;font-weight:600;min-width:0;overflow-wrap:anywhere}
.announce button{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.2);color:#fff;flex:none}
.announce button .ic{width:15px;height:15px}
body.has-announce .app{height:calc(100dvh - 36px);margin-top:36px}
body.has-announce.has-callbar .callbar{top:36px}
body.has-announce.has-callbar .app{height:calc(100dvh - 74px);margin-top:74px}
/* эффекты */
.fx-layer{position:fixed;inset:0;z-index:200;pointer-events:none}
.fx-confetti canvas{width:100%;height:100%}
.fx-rain img{position:absolute;top:-80px;animation:fxfall linear forwards}
@keyframes fxfall{to{transform:translateY(calc(100vh + 120px)) rotate(25deg)}}
.fx-ghost{pointer-events:auto;background:rgba(0,0,0,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;animation:fxboo .35s cubic-bezier(.2,1.6,.4,1)}
.fx-ghost img{width:min(55vw,360px)}
.fx-ghost b{font-size:clamp(40px,9vw,96px);color:#fff;letter-spacing:.04em;text-shadow:0 0 30px #a98bff}
@keyframes fxboo{from{transform:scale(.2);opacity:0}}
body.fx-shake{animation:fxshake .12s linear 10}
@keyframes fxshake{25%{transform:translate(-8px,4px) rotate(-.6deg)}50%{transform:translate(7px,-5px) rotate(.5deg)}75%{transform:translate(-5px,-3px)}}
body.fx-flip{transform:rotate(180deg);transition:transform .8s}
body{transition:transform .8s,filter .5s}
body.fx-disco{animation:fxdisco 1s linear infinite}
@keyframes fxdisco{from{filter:hue-rotate(0) saturate(2)}to{filter:hue-rotate(360deg) saturate(2)}}
body.fx-blur{filter:blur(6px)}
body.fx-tiny{transform:scale(.55)}

/* call: hide panel, volume */
.call-ui{position:absolute;left:calc(66px + env(safe-area-inset-left,0px));top:calc(14px + env(safe-area-inset-top,0px));z-index:3;color:#fff;background:rgba(255,255,255,.14);height:44px;border-radius:22px;padding:0 14px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.call-ui .ic{width:20px;height:20px}
.call-ui:hover{background:rgba(255,255,255,.26)}
.call-info,.call-btns,.call-min,.call-full,#lv{transition:opacity .2s}
.call.ui-hidden .call-info,.call.ui-hidden .call-btns,.call.ui-hidden .call-min,.call.ui-hidden .call-full,.call.ui-hidden .vol-pop{opacity:0;pointer-events:none}
.call.ui-hidden .call-ui{opacity:.35}
.call.ui-hidden .call-ui:hover{opacity:1}
.vol-pop{position:absolute;bottom:calc(150px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);z-index:4;background:rgba(18,24,32,.94);border-radius:16px;padding:16px 18px;width:min(340px,calc(100vw - 32px));display:flex;flex-direction:column;gap:14px;backdrop-filter:blur(12px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.vol-row{display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.vol-row div{display:flex;align-items:center;gap:10px}
.vol-row input{flex:1;accent-color:var(--accent)}
.vol-row b{width:44px;text-align:right;font-variant-numeric:tabular-nums}

/* call: mute badge, fullscreen, share dialog */
.call-ava{position:relative}
.pm-badge{position:absolute;right:2px;bottom:2px;width:40px;height:40px;border-radius:50%;background:#ef4b4b;color:#fff;display:grid;place-items:center;border:3px solid #0a1018;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.pm-badge .ic{width:20px;height:20px}
.call.rvid #rv{pointer-events:auto}
.call-full{position:absolute;right:calc(14px + env(safe-area-inset-right,0px));top:calc(14px + env(safe-area-inset-top,0px));z-index:3;color:#fff;background:rgba(255,255,255,.14);width:44px;height:44px}
.call-full:hover{background:rgba(255,255,255,.26);color:#fff}
.call.lvid .call-full{right:calc(min(30vw,210px) + 30px)}
.call-flag{font-size:14px;padding:7px 14px}
.call-flag.mine{background:rgba(255,255,255,.92);color:#b42318}
.call:fullscreen{padding-top:24px}
.sh-modal{background:#1e2733;color:#e9edf2}
.modal.sh-modal{width:min(640px,calc(100vw - 24px))}
.sh-modal .m-body{gap:16px;padding:20px 22px}
.sh-head b{font-size:18px}
.sh-preview{display:flex;align-items:center;gap:14px;padding:18px;border-radius:12px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,#16202b),#141b24);border:2px solid var(--accent)}
.sh-preview .ic{width:44px;height:44px;color:var(--accent);flex:none}
.sh-preview span{font-size:14px;line-height:1.45}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sh-row>span{font-weight:600;color:#aeb8c4}
.sh-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.sh-foot .grow{flex:1}
.sh-btn{font-weight:700;letter-spacing:.03em;font-size:13.5px}

/* send-image dialog */
.sd-prev{display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border-radius:12px;overflow:hidden;max-height:52dvh;overflow-y:auto}
.sd-prev.one{grid-template-columns:1fr}
.sd-item{position:relative;background:#000;border-radius:10px;overflow:hidden;display:grid;place-items:center;min-height:90px}
.sd-item img,.sd-item video{max-width:100%;max-height:48dvh;display:block;object-fit:contain}
.sd-prev:not(.one) .sd-item img,.sd-prev:not(.one) .sd-item video{width:100%;height:140px;object-fit:cover}
.sd-item .sd-x{position:absolute;right:6px;top:6px;width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center}
.sd-item .sd-x .ic{width:16px;height:16px}
.sd-item .sd-name{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;padding:2px 7px;border-radius:8px;max-width:calc(100% - 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-cap{display:flex;align-items:flex-end;gap:6px;border-bottom:2px solid var(--accent);padding-bottom:4px}
.sd-cap textarea{flex:1;background:none;border:0;outline:0;resize:none;font-size:15px;padding:6px 2px;max-height:120px}
.sd-cap-l{font-size:13px;color:var(--accent);font-weight:600}
.sd-actions{display:flex;align-items:center;gap:6px}
.sd-actions .grow{flex:1}
.filemsg{display:flex;align-items:center;gap:12px;padding:2px 0 16px;min-width:230px;color:inherit;text-decoration:none}
.filemsg .fi{width:46px;height:46px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.out .filemsg .fi{background:color-mix(in srgb,var(--text) 92%,transparent);color:var(--out)}
.filemsg b{display:block;font-weight:600;overflow-wrap:anywhere}
.filemsg small{color:color-mix(in srgb,var(--text) 55%,transparent)}
.react-pop{position:absolute;bottom:72px;left:12px;right:12px;z-index:4;background:rgba(20,26,34,.94);border-radius:16px;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:2px;max-height:40%;overflow-y:auto;backdrop-filter:blur(10px)}
.react-pop button{aspect-ratio:1;border-radius:10px;padding:4px}
.react-pop button:hover{background:rgba(255,255,255,.12)}
.react-pop img{width:100%;height:100%;object-fit:contain}
.sv-foot .rx img{width:24px;height:24px}
.viewers .rx-img{width:26px;height:26px;flex:none}

/* service messages, forwarded, selection */
.svc-row{justify-content:center;padding:6px 0}
.svc{display:inline-flex;align-items:center;gap:6px;background:rgba(0,0,0,.32);color:#fff;padding:4px 12px;border-radius:14px;font-size:13.5px;font-weight:500;cursor:pointer;max-width:90%;backdrop-filter:blur(6px)}
.svc .ic{width:14px;height:14px;flex:none}
.fwd{font-size:13.5px;color:var(--accent);margin-bottom:3px}
.out .fwd{color:color-mix(in srgb,var(--text) 80%,var(--accent))}
.fwd b{font-weight:600}
.t-photo .fwd,.t-gif .fwd,.t-video .fwd,.t-sticker .fwd{padding:4px 7px 0}
.pinmark{display:inline-flex;margin-right:3px}
.pinmark .ic{width:13px;height:13px}
.selbar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--head);border-bottom:1px solid var(--border);z-index:4;flex:none}
.selbar .btn{height:36px;font-size:13px;letter-spacing:.03em;padding:0 14px}
.selbar .btn b{margin-left:6px;font-weight:700;opacity:.85}
.selecting .msg:not(.svc-row){cursor:pointer;position:relative;padding-right:36px;border-radius:8px}
.selecting .msg:not(.svc-row)::after{content:"";position:absolute;right:6px;bottom:8px;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--text) 45%,transparent);box-sizing:border-box}
.selecting .msg.sel{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.selecting .msg.sel::after{border:0;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.selecting .msg *{pointer-events:none}

/* pinned message bar, edit, delete */
.pinbar{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;background:var(--head);border-bottom:1px solid var(--border);z-index:2;flex:none;position:relative}
.pb-txt{flex:1;min-width:0;display:flex;flex-direction:column;border-left:2px solid var(--accent);padding-left:10px;cursor:pointer;font-size:13.5px}
.pb-txt b{color:var(--accent);font-weight:600}
.pb-txt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta .ed{margin-right:3px;font-style:italic}
.del-opts{display:flex;flex-direction:column;gap:6px}
.del-opts .btn{justify-content:flex-start}
.chk-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:500}
.chk-row input{width:18px;height:18px;accent-color:var(--accent)}
.stk-big{width:200px;height:200px;margin:0 auto;display:grid;place-items:center}
.stk-big img,.stk-big .tgs{width:200px;height:200px;object-fit:contain}
.sticker,.t-sticker .tgs{cursor:pointer}
.call-end-dur{font-size:15px}

/* tgs stickers & settings */
.tgs{width:100%;height:100%;display:grid;place-items:center;color:var(--muted);font-size:12px}
.tgs.sticker{width:170px;height:170px}
.tgs svg{display:block}
.st-grid .tgs{width:100%;aspect-ratio:1}
.st-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--accent);font-size:12px;font-weight:600;border:2px dashed color-mix(in srgb,var(--accent) 45%,transparent)}
.st-item{position:relative;aspect-ratio:1;border-radius:12px;background:var(--input);padding:6px}
.st-del{position:absolute;top:4px;right:4px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:grid;place-items:center;opacity:0;transition:opacity .15s}
.st-item:hover .st-del,.st-del:focus-visible{opacity:1}
@media (hover:none){.st-del{opacity:1}}
.st-del .ic{width:14px;height:14px}
.snd-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.snd{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;background:var(--input);cursor:pointer;border:2px solid transparent;font-weight:500}
.snd.on{border-color:var(--accent)}
.snd span{flex:1}
.snd-play{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.snd-play .ic{width:15px;height:15px}
.snd-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--muted);flex:none}
.snd.on .snd-radio{border:5px solid var(--accent)}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{display:none}
  .side-top{padding-top:calc(10px + env(safe-area-inset-top,0px))}
  .side-top .menu{display:grid}
  .sidebar{border-right:0}
  .chat{position:fixed;inset:0;transform:translateX(100%);transition:transform .22s ease-out;z-index:10;visibility:hidden}
  .app.show-chat .chat{transform:none;visibility:visible}
  .chat-head{padding-top:calc(6px + env(safe-area-inset-top,0px));padding-left:4px}
  .chat-head .back{display:grid}
  .bubble{max-width:86%}
  .mlist{padding:0 8px}
  .compose-wrap{padding:4px 8px calc(8px + env(safe-area-inset-bottom,0px))}
  .emoji-panel{right:8px;left:8px;width:auto}
  .reply-bar{margin-right:60px}
  #infoBtn{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}