/* ═══ BASE ═══ */
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{height:100%;margin:0;padding:0;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Inter',system-ui,sans-serif;color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}
.m-text,#msgInp,input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
html{height:100%;background:var(--bg)}
body::before{content:'';position:fixed;inset:-50px;background-image:var(--bg-gradient);pointer-events:none;z-index:0}

/* SVG icon helper */
.ic{width:20px;height:20px;display:inline-flex;flex-shrink:0}
.ic svg{width:100%;height:100%}
.m-fwd{font-size:.72rem;color:var(--accent);margin-bottom:4px;padding-bottom:4px;border-bottom:1px solid var(--glass-border)}
.m-edited{font-style:italic;opacity:.7;cursor:help}

/* Toggle switch */
.toggle-wrap{position:relative;display:inline-block;width:44px;height:26px}
.toggle-wrap input{display:none}
.toggle-slider{position:absolute;inset:0;background:var(--glass-bg3);border-radius:13px;cursor:pointer;transition:.2s}
.toggle-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle-wrap input:checked+.toggle-slider{background:var(--accent)}
.toggle-wrap input:checked+.toggle-slider::before{transform:translateX(18px)}

/* Verified badge */
.verified-badge{display:inline-flex;vertical-align:middle;margin-left:3px;flex-shrink:0}
.verified-badge .ic{width:16px;height:16px}
.ci-name .verified-badge .ic{width:14px;height:14px}
.ch-name .verified-badge .ic{width:14px;height:14px}
.tg-prof-top .verified-badge .ic{width:20px;height:20px}
.post-name .verified-badge .ic{width:14px;height:14px}
.m-read{color:var(--text2);display:inline-flex;margin-left:3px;transition:color .2s}
.m-read.read{color:var(--accent);filter:brightness(1.2)}
.m-read .ic,.m-read .ic-sm{width:22px!important;height:22px!important}
.m-read svg{width:22px;height:22px}

/* ═══ ANIMATIONS ═══ */

/* Chat list items — stagger fade in (only on first load) */
.ci-anim .ci{animation:ciIn .3s ease both}
@keyframes ciIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

/* Open chat — slide in from right */
.main{transition:none}
#chatView{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.chat-enter .msgs{animation:chatSlideIn .3s ease both}
@keyframes chatSlideIn{from{opacity:0}to{opacity:1}}
/* scroll/reveal handled via visibility in JS */

/* Message bubbles — fade up (only for new messages via .m-anim) */
@keyframes msgIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.m-anim{animation:msgIn .2s ease both}
.m-img-anim{animation:imgIn .3s cubic-bezier(.4,0,.2,1) both}
@keyframes imgIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}

/* Sheet backdrop — fade */
.sheet{transition:background .2s ease,visibility 0s .2s}
.sheet.show{transition:background .2s ease,visibility 0s}

/* Context menu — scale from origin */
.ctx{transform-origin:bottom center;animation:none}
.ctx.show{animation:ctxPop .2s cubic-bezier(.32,1.5,.6,1) both}
@keyframes ctxPop{from{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:none}}

/* FAB — bounce in */
.fab{animation:fabIn .4s cubic-bezier(.34,1.56,.64,1) .2s both}
@keyframes fabIn{from{opacity:0;transform:scale(0) rotate(-90deg)}to{opacity:1;transform:none}}

/* Badge pulse — only on first appear via .ci-anim */
.ci-anim .ci-badge{animation:badgePop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{from{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}

/* Online dot — no animation (re-renders too often) */

/* Typing indicator bounce */
.td{animation:bounce .6s ease infinite}
.td:nth-child(2){animation-delay:.1s}
.td:nth-child(3){animation-delay:.2s}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-4px)}}

/* Toast slide down */
.toast.show{animation:toastIn .25s ease both}
@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-16px)}to{opacity:1;transform:translateX(-50%)}}

/* Notification banner slide */
@keyframes notifSlide{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes notifOut{from{transform:translateY(0);opacity:1}to{transform:translateY(-100%);opacity:0}}

/* Avatar hover glow */
.ci-av{transition:transform .15s ease}
.ci:active .ci-av{transform:scale(.92)}

/* Send button pulse on tap */
.send-btn:active{animation:sendPulse .15s ease}
@keyframes sendPulse{50%{transform:scale(.85)}100%{transform:scale(1)}}

/* Folder tab underline slide */
.folder-tab{position:relative;transition:color .15s ease}

/* Pull-to-refresh spinner */
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* Swipe reply indicator */
@keyframes replyHint{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* Stagger delay helper — JS adds --ci-i variable */
.ci-anim .ci:nth-child(1){animation-delay:0s}
.ci-anim .ci:nth-child(2){animation-delay:.03s}
.ci-anim .ci:nth-child(3){animation-delay:.06s}
.ci-anim .ci:nth-child(4){animation-delay:.09s}
.ci-anim .ci:nth-child(5){animation-delay:.12s}
.ci-anim .ci:nth-child(6){animation-delay:.15s}
.ci-anim .ci:nth-child(7){animation-delay:.18s}
.ci-anim .ci:nth-child(8){animation-delay:.21s}
.ci-anim .ci:nth-child(9){animation-delay:.24s}
.ci-anim .ci:nth-child(10){animation-delay:.27s}

/* ═══ NO SELECT ═══ */
.ci,.ctx-i,.sheet-btn,.sbtn,.fab,.ch-btn,.inp-btn,.send-btn,.folder-tab,.rec-btn,.side-title,.ci-name,.ci-pre,.ci-time,.m-time,.m-name,.sheet-title,.sheet-cancel,.tg-prof-row-label,.tg-prof-row-val,.set-ico{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

.ic-xs{width:12px;height:12px}.ic-sm{width:16px;height:16px}.ic-sm svg{width:100%;height:100%}
.ic-lg{width:24px;height:24px}.ic-lg svg{width:100%;height:100%}

/* ═══ AUTH ═══ */
.auth{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--bg)}
.auth::before{content:'';position:absolute;inset:0;background-image:var(--bg-gradient)}
.auth.hidden{display:none}
.auth-c{width:100%;max-width:340px;text-align:center;position:relative;z-index:1}
.auth-logo{width:68px;height:68px;border-radius:20px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:14px}
.auth-logo svg{width:32px;height:32px;color:var(--accent)}
.auth-c h1{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.auth-c p{font-size:.72rem;color:var(--text2);margin-bottom:18px}
.auth-tabs{display:flex;border-radius:12px;padding:3px;margin-bottom:14px}
.at{flex:1;padding:7px;text-align:center;font-size:.76rem;font-weight:600;border-radius:10px;cursor:pointer;color:var(--text2);transition:.2s}
.at.active{background:var(--glass-bg3);color:var(--text)}
.af{width:100%;padding:12px 14px;border-radius:12px;color:var(--text);font-size:.88rem;font-family:inherit;outline:none;margin-bottom:8px;background:var(--input-bg);border:1px solid var(--glass-border);transition:.2s}
.af:focus{border-color:var(--accent-border);box-shadow:0 0 0 3px rgba(91,154,255,.06)}
.af::placeholder{color:var(--text3)}
.ab{width:100%;padding:12px;color:#fff;border:none;border-radius:12px;font-size:.9rem;font-weight:600;font-family:inherit;cursor:pointer;margin-top:4px;transition:.12s;background:var(--accent);box-shadow:0 2px 12px rgba(91,154,255,.2)}
.ab:active{transform:scale(.97)}.ab:disabled{opacity:.3}
.ae{color:var(--red);font-size:.68rem;margin-top:5px;min-height:16px}
.auth-extra{display:none}

/* ═══ APP LAYOUT ═══ */
.app{display:none;position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;z-index:1;flex-direction:row}
.app.visible{display:flex}

/* ═══ SIDEBAR ═══ */
.side{width:340px;min-width:340px;display:flex;flex-direction:column;border-right:1px solid var(--glass-border);transition:transform .3s cubic-bezier(.25,1,.5,1);background:var(--glass-bg);backdrop-filter:blur(var(--blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);box-shadow:var(--glass-shadow)}
.side-top{padding:10px 12px 8px;flex-shrink:0;z-index:3;position:relative;border-bottom:1px solid var(--glass-border)}
.side-h{display:flex;align-items:center;gap:8px}
.side-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;overflow:hidden;flex-shrink:0}
.side-title{flex:1;font-size:1.6rem;font-weight:700;letter-spacing:-.02em}
.side-acts{display:flex;gap:4px}
.sbtn{width:36px;height:36px;border-radius:50%;color:var(--accent);font-size:1rem;display:flex;align-items:center;justify-content:center}
.ssearch{width:100%;padding:10px 12px 10px 36px;border-radius:12px;color:var(--text);font-size:.95rem;font-family:inherit;outline:none;margin:8px 0;background:var(--input-bg);border:1px solid var(--glass-border);transition:.2s}
.ssearch:focus{border-color:var(--accent-border)}
.ssearch::placeholder{color:var(--text3)}
.search-wrap{position:relative}
.search-wrap .ic{position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none}

.list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}.list::-webkit-scrollbar{display:none}
.ci{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;border-radius:14px;margin:2px 0;transition:.12s;border-bottom:1px solid var(--glass-border)}
.ci:active{background:var(--glass-bg2);transform:scale(.98)}
.ci.active{background:var(--glass-bg2);border:1px solid var(--glass-border)}
.ci-av{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0;position:relative;overflow:visible;color:#fff;font-weight:600;letter-spacing:.5px}
.ci-av img{border-radius:50%;width:100%;height:100%;object-fit:cover}
.ci-dot{position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2.5px solid var(--bg);z-index:2;box-shadow:0 0 0 1px rgba(91,154,255,.3)}
.ci-body{flex:1;min-width:0}.ci-name{font-size:1rem;font-weight:600}.ci-pre{font-size:.85rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ci-typing{color:var(--accent)}
.ci-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
.ci-time{font-size:.75rem;color:var(--text3)}
.ci-badge{background:var(--accent);color:#fff;font-size:.7rem;font-weight:700;min-width:22px;height:22px;border-radius:11px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.ci-empty{padding:40px;text-align:center;color:var(--text3);font-size:.78rem}

/* ═══ MAIN AREA ═══ */
.main{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0;height:100%;overflow:hidden}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;opacity:.3}
.empty .ic{width:48px;height:48px}.empty-t{font-size:.78rem;color:var(--text3)}

/* ═══ CHAT HEADER ═══ */
.ch{padding:6px 10px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--glass-border);flex-shrink:0;z-index:10;background:var(--glass-bg);backdrop-filter:blur(var(--blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5)}
.ch-back{display:none;width:28px;height:28px;border:none;background:none;color:var(--accent);cursor:pointer;padding:0}
.ch-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;background:var(--glass-bg2);overflow:hidden;flex-shrink:0}
.ch-info{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;min-width:0;overflow:hidden}
.ch-info-text{text-align:center;min-width:0;overflow:hidden}.ch-name{font-size:1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch-stat{font-size:.75rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-btn{width:32px;height:32px;border-radius:50%;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* ═══ NOW PLAYING BAR ═══ */
.np{display:none;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid var(--glass-border);flex-shrink:0;background:var(--accent-bg)}
.np.show{display:flex}
.np-play{width:26px;height:26px;border-radius:50%;color:var(--accent);display:flex;align-items:center;justify-content:center}
.np-play .ic{width:14px;height:14px}
.np-wave{flex:1;display:flex;align-items:center;gap:1px;height:18px;overflow:hidden}
.np-bar{width:2px;border-radius:1px;background:var(--accent);opacity:.35;transition:height .1s}
.np-wave.playing .np-bar{animation:wave .5s ease-in-out infinite alternate}
.np-bar:nth-child(2n){animation-delay:.06s!important}.np-bar:nth-child(3n){animation-delay:.12s!important}.np-bar:nth-child(5n){animation-delay:.18s!important}
@keyframes wave{0%{height:3px;opacity:.2}100%{height:14px;opacity:.6}}
.np-time{font-size:.62rem;color:var(--text2);min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.np-vol{display:flex;align-items:center;gap:4px}
.np-vol input[type=range]{-webkit-appearance:none;width:50px;height:3px;border-radius:2px;background:var(--glass-bg3);outline:none;cursor:pointer}
.np-vol input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.2)}
.np-vol .ic{width:14px;height:14px;color:var(--text2);cursor:pointer}
.np-close{width:22px;height:22px;border:none;background:none;color:var(--text3);cursor:pointer;display:flex;align-items:center;justify-content:center}.np-close .ic{width:14px;height:14px}

/* Pin bar */
.pin-bar{display:none;align-items:center;gap:6px;padding:5px 12px;border-bottom:1px solid var(--glass-border);flex-shrink:0;font-size:.68rem;color:var(--text2);cursor:pointer;background:var(--glass-bg)}
.pin-bar.show{display:flex}
.pin-bar .ic{width:14px;height:14px;color:var(--accent)}
.pin-bar-text{flex:1}
.pin-bar-close{background:none;border:none;color:var(--text3);cursor:pointer;padding:2px}
.pin-bar-close .ic{width:14px;height:14px}

/* Search in chat */
.ch-search{padding:5px 12px;border-bottom:1px solid var(--glass-border);display:none;flex-shrink:0}
.ch-search.show{display:flex;align-items:center;gap:8px}
.ch-search input{flex:1;padding:5px 10px;border-radius:8px;color:var(--text);font-size:.76rem;font-family:inherit;outline:none;background:var(--input-bg);border:1px solid var(--glass-border)}
.search-nav{display:flex;align-items:center;gap:4px;flex-shrink:0}
.search-nav-btn{width:30px;height:30px;border-radius:50%;border:none;background:var(--glass-bg2);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.search-nav-btn:active{opacity:.6}
.m-highlight{background:rgba(var(--accent-rgb,59,130,246),.25);border-radius:8px;transition:background .5s}
.m-highlight-active{background:rgba(var(--accent-rgb,59,130,246),.45)}

/* ═══ MESSAGES ═══ */
.msgs{flex:1 1 0;overflow-y:auto;padding:6px 10px;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch;min-height:0}.msgs::-webkit-scrollbar{display:none}
.md{text-align:center;margin:6px 0}.md span{font-size:.58rem;color:var(--text3);font-weight:500}
.date-sep{text-align:center;margin:12px 0 8px;position:relative}
.date-sep span{display:inline-block;padding:4px 14px;border-radius:10px;font-size:.7rem;font-weight:600;color:var(--text2);background:var(--glass-bg,rgba(255,255,255,.06));backdrop-filter:blur(10px);letter-spacing:.02em}
.has-wallpaper .date-sep span{background:rgba(0,0,0,.35);color:rgba(255,255,255,.8)}
.new-msgs-divider{display:flex;align-items:center;gap:10px;margin:8px 0;padding:0 4px}
.new-msgs-divider::before,.new-msgs-divider::after{content:'';flex:1;height:1px;background:var(--accent)}
.new-msgs-divider span{font-size:.62rem;font-weight:600;color:var(--accent);white-space:nowrap;text-transform:uppercase;letter-spacing:.03em}
.m{max-width:85%;padding:10px 14px;border-radius:18px;font-size:1rem;line-height:1.45;word-wrap:break-word;position:relative}
@keyframes mIn{0%{opacity:0;transform:translateY(3px)}100%{opacity:1;transform:none}}
.m-in{background:var(--msg-in-bg);border:1px solid var(--msg-in-border);align-self:flex-start;border-bottom-left-radius:4px}
.m-out{background:var(--msg-out-bg);border:1px solid var(--msg-out-border);align-self:flex-end;border-bottom-right-radius:4px}
.has-wallpaper .m-in,.has-wallpaper .m-in .m-text{background:var(--wp-in-bg)!important;border-color:var(--wp-in-border);color:#fff!important}
.has-wallpaper .m-in .m-time,.has-wallpaper .m-in .m-edited{color:rgba(255,255,255,.7)!important}
.has-wallpaper .m-in .m-sender{color:var(--accent)!important}
.has-wallpaper .m-out,.has-wallpaper .m-out .m-text{background:var(--wp-out-bg)!important;border-color:var(--wp-out-border);color:#fff!important}
.has-wallpaper .m-out .m-time,.has-wallpaper .m-out .m-sender,.has-wallpaper .m-out .m-edited{color:rgba(255,255,255,.7)!important}
.has-wallpaper .m-link{color:#90c4ff!important}
.m-sys{align-self:center;background:none;color:var(--text3);font-size:.62rem;padding:3px 0;border:none}
.grp-row{display:flex;align-items:flex-end;gap:8px;align-self:flex-start;max-width:85%}
.grp-av{width:32px;height:32px;min-width:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;overflow:hidden;flex-shrink:0}
.grp-row .m-in{align-self:auto;max-width:100%}
.m-sender{font-size:.82rem;font-weight:700;margin-bottom:3px;color:var(--accent)}
.m-time{font-size:.82rem;opacity:.7;margin-top:3px;display:flex;align-items:center;gap:6px}
.m-out .m-time{justify-content:flex-end}
.m-read{display:inline-flex}.m-read .ic{width:12px;height:12px;color:var(--text3)}.m-read.seen .ic{color:var(--accent)}
.m-edited{font-style:italic;opacity:.5;font-size:.48rem}
.m-reply{font-size:.66rem;padding:3px 7px;background:var(--glass-bg2);border-left:2px solid var(--accent);border-radius:4px;margin-bottom:3px;color:var(--text2)}
.m-reactions{display:flex;gap:2px;margin-top:2px;flex-wrap:wrap}
.m-react{font-size:.64rem;background:var(--glass-bg2);border:1px solid var(--glass-border);border-radius:8px;padding:1px 5px;cursor:pointer}
.m-img{max-width:200px;max-height:240px;border-radius:10px;display:block;margin-bottom:2px;cursor:pointer}
.m-video{max-width:200px;border-radius:10px;margin-bottom:2px}
.m-file{display:flex;align-items:center;gap:6px;padding:3px 0;cursor:pointer}
.m-file .ic{color:var(--accent)}
.m-file-name{font-size:.7rem;font-weight:600}.m-file-size{font-size:.54rem;color:var(--text2)}
.m-link{color:var(--accent)}
.m-voice{display:flex;align-items:center;gap:5px;min-width:120px}
.v-play{width:26px;height:26px;border-radius:50%;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0}.v-play .ic{width:12px;height:12px}
.v-wave{flex:1;display:flex;align-items:center;gap:1px;height:18px;overflow:hidden}
.v-bar{width:2px;border-radius:1px;background:var(--accent);opacity:.3}
.v-dur{font-size:.54rem;color:var(--text2);flex-shrink:0}

.typing-ind{align-self:flex-start;background:var(--msg-in-bg);border:1px solid var(--msg-in-border);border-radius:16px;padding:7px 11px;display:none;gap:4px;align-items:center}
.typing-ind.show{display:inline-flex}
.td{width:4px;height:4px;border-radius:50%;background:var(--text3);animation:tb 1s infinite}.td:nth-child(2){animation-delay:.15s}.td:nth-child(3){animation-delay:.3s}
@keyframes tb{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-3px)}}

/* Reply bar */
.reply-bar{padding:5px 12px;border-top:1px solid var(--glass-border);display:none;align-items:center;gap:6px;font-size:.7rem;color:var(--text2);flex-shrink:0;background:var(--glass-bg)}
.reply-bar.show{display:flex}
.reply-bar .ic{width:14px;height:14px;color:var(--accent)}
.reply-bar-close{background:none;border:none;color:var(--text3);cursor:pointer}.reply-bar-close .ic{width:14px;height:14px}

/* Rec bar */
.rec-bar{display:none;align-items:center;gap:7px;padding:7px 12px;border-top:1px solid var(--glass-border);flex-shrink:0;background:rgba(248,113,113,.04)}
.rec-bar.show{display:flex}
.rec-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:rdp .8s infinite}
@keyframes rdp{0%,100%{opacity:1}50%{opacity:.15}}
.rec-time{font-size:.72rem;font-weight:600;color:var(--red);min-width:32px;font-variant-numeric:tabular-nums}
.rec-wave-live{display:flex;align-items:center;gap:1px;flex:1;height:22px;overflow:hidden}
.rec-wave-bar{width:2px;border-radius:1px;background:var(--red);opacity:.45;transition:height .08s}
.rec-cancel{background:none;border:none;color:var(--text3);font-size:.72rem;cursor:pointer;padding:3px 6px}
.rec-send{background:var(--accent);color:#fff;padding:4px 12px;border:none;border-radius:8px;font-size:.72rem;font-weight:600;cursor:pointer}

/* ═══ INPUT BAR ═══ */
.inp{padding:4px 8px;padding-bottom:calc(4px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:6px;flex-shrink:0;background:var(--bg);border-top:1px solid var(--glass-border);overflow:visible}
.inp-btn{width:38px;height:38px;min-height:38px;border-radius:50%;color:var(--accent);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--glass-bg2);border:1px solid var(--glass-border)}
.inp-btn .ic{width:18px;height:18px}
.inp-w{flex:1;min-width:0}
.inp-f{width:100%;padding:8px 14px;border-radius:18px;color:var(--text);font-size:1rem;font-family:inherit;outline:none;overflow-y:auto;max-height:100px;min-height:38px;line-height:1.35;background:var(--input-bg);border:1px solid var(--glass-border);transition:.2s;word-break:break-word;-webkit-user-select:text;user-select:text}
.inp-f:empty::before{content:attr(data-placeholder);color:var(--text3);pointer-events:none}
.inp-f:focus{border-color:var(--accent-border)}
.send-btn{width:38px;height:38px;min-height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--accent);border:none;cursor:pointer;transition:.12s;box-shadow:0 2px 6px rgba(91,154,255,.25)}
.send-btn:active{transform:scale(.9)}
.send-btn .ic{width:18px;height:18px}
.rec-btn{width:38px;height:38px;min-height:38px;border-radius:50%;color:var(--text2);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;cursor:pointer;position:relative;overflow:visible;z-index:1}
.rec-btn .ic{width:16px;height:16px}
.rec-btn.recording{color:var(--red)}
.rec-btn.recording::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--red);animation:recRing 1.2s ease-out infinite}
@keyframes recRing{0%{transform:scale(.7);opacity:1}100%{transform:scale(1.4);opacity:0}}

/* ═══ SHEETS ═══ */
.sheet{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:800;display:none;align-items:flex-end;justify-content:center}
.sheet.show{display:flex}
.sheet.sheet-center{align-items:center}
.sheet-c{background:var(--sheet-bg);backdrop-filter:blur(var(--blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);border:1px solid var(--glass-border);border-bottom:none;border-radius:16px 16px 0 0;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;will-change:transform}
.sheet.show .sheet-c{animation:su .3s cubic-bezier(.25,1,.5,1)}
.sheet-center .sheet-c{border-radius:16px;border-bottom:1px solid var(--glass-border);max-height:90vh;overflow-y:auto;background:var(--bg);backdrop-filter:blur(var(--blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5)}
.sheet-center.show .sheet-c{animation:scIn .25s ease}
@keyframes su{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
@keyframes scIn{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
.sheet-h{width:28px;height:3px;border-radius:2px;background:var(--glass-bg3);margin:7px auto 3px}
.sheet-title{padding:12px 16px;font-size:1.1rem;font-weight:700;text-align:center;border-bottom:1px solid var(--glass-border)}
.si{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;font-size:.82rem;border-bottom:1px solid var(--glass-border);transition:.12s}
.si:active{background:var(--glass-bg2)}
.si-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.si-icon .ic{width:18px;height:18px}
.si-text{flex:1}.si-sub{font-size:.62rem;color:var(--text2);margin-top:1px}
.si-chevron{color:var(--text3)}
.si-chevron .ic{width:14px;height:14px}
.sheet-cancel{padding:14px;text-align:center;color:var(--accent);font-size:1rem;font-weight:600;cursor:pointer}.sheet-cancel:active{opacity:.5}
.sheet-field{width:calc(100% - 28px);margin:8px 14px;padding:9px 12px;background:var(--input-bg);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font-size:.82rem;font-family:inherit;outline:none;transition:.2s}
.sheet-field:focus{border-color:var(--accent-border)}
.sheet-field::placeholder{color:var(--text3)}
.sheet-btn{width:calc(100% - 28px);margin:0 14px 10px;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit;transition:.12s}
.sheet-btn:active{transform:scale(.97)}.sheet-btn:disabled{opacity:.3}
.sheet-btn.red{background:var(--red)}

.user-item{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;border-bottom:1px solid var(--glass-border);transition:.12s}
.user-item:active{background:var(--glass-bg2)}.user-item.selected{background:var(--accent-bg)}
.ui-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;background:var(--glass-bg2);overflow:hidden}
.ui-name{font-size:.82rem;font-weight:600}.ui-user{font-size:.62rem;color:var(--text2)}
.ui-check{color:var(--accent);display:none}.ui-check .ic{width:18px;height:18px}
.user-item.selected .ui-check{display:flex}
.ui-badge{font-size:.5rem;color:var(--orange);font-weight:600}
.emoji-grid{display:flex;flex-wrap:wrap;gap:2px;padding:8px;justify-content:center}
.emoji-grid button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;border-radius:8px;border:none;background:none}.emoji-grid button:active{background:var(--glass-bg2)}

/* CTX */
.ctx{position:fixed;background:var(--sheet-bg);backdrop-filter:blur(var(--blur)) saturate(1.5);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.5);border:1px solid var(--glass-border-hi);border-radius:12px;padding:3px;z-index:600;min-width:160px;box-shadow:0 10px 40px rgba(0,0,0,.3);display:none;overflow:hidden}
.ctx.show{display:block}
.ctx-i{display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;font-size:.95rem;color:var(--text);border:none;background:none;width:100%;font-family:inherit;text-align:left;border-radius:10px;transition:.08s}
.ctx-i:active{background:var(--glass-bg2)}.ctx-i.red{color:var(--red)}
.ctx-i .ic{width:16px;height:16px}

/* ═══ PROFILE (Telegram style) ═══ */
.tg-prof-top{text-align:center;padding:20px 16px 14px}
.tg-prof-av{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#fff;margin:0 auto;letter-spacing:1px;border:3px solid var(--accent);box-shadow:0 4px 16px rgba(91,154,255,.2)}
.tg-prof-av-img{width:90px;height:90px;border-radius:50%;object-fit:cover;display:block;margin:0 auto;border:3px solid var(--accent);box-shadow:0 4px 16px rgba(91,154,255,.2)}
.tg-prof-name{font-size:1.15rem;font-weight:700;margin-top:10px;letter-spacing:-.01em;color:var(--text)}
.tg-prof-sub{font-size:.72rem;margin-top:2px}.tg-prof-sub.on{color:var(--accent)}.tg-prof-sub:not(.on){color:var(--text3)}
.tg-prof-status{font-size:.72rem;color:var(--text2);margin-top:4px;font-style:italic;max-width:200px;margin-left:auto;margin-right:auto}

.tg-prof-actions{display:flex;justify-content:center;gap:4px;padding:12px 16px;border-bottom:1px solid var(--glass-border)}
.tg-prof-act{display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:6px 14px;border-radius:10px;transition:.12s}
.tg-prof-act:active{background:var(--accent-bg);transform:scale(.95)}
.tg-prof-act-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border)}
.tg-prof-act-icon .ic{width:20px;height:20px}
.tg-prof-act-label{font-size:.6rem;color:var(--accent);font-weight:500}

.tg-prof-info{border-top:1px solid var(--glass-border)}
.tg-prof-row{padding:10px 16px;cursor:pointer;border-bottom:1px solid var(--glass-border);transition:.08s}
.tg-prof-row:last-child{border-bottom:none}
.tg-prof-row:active{background:var(--glass-bg2)}
.tg-prof-row-val{font-size:.85rem;line-height:1.4;word-break:break-word;color:var(--text)}
.tg-prof-row-label{font-size:.65rem;color:var(--text3);margin-top:1px}
.tg-prof-danger{color:var(--red);font-size:.85rem;font-weight:500}

.prof-av-sm{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0;overflow:hidden;background:var(--glass-bg2)}
.prof-note{font-size:.78rem;padding:8px 10px;background:var(--input-bg);border:1px solid var(--glass-border);border-radius:8px;min-height:36px;outline:none;line-height:1.4;color:var(--text);word-break:break-word}
.prof-note:empty::before{content:attr(data-placeholder);color:var(--text3)}
.prof-note:focus{border-color:var(--accent-border)}
.prof-note-save{display:block;width:calc(100% - 32px);margin:8px 16px 10px;padding:8px;font-size:.75rem;font-weight:600;background:var(--accent);color:#fff;border:none;border-radius:8px;cursor:pointer;text-align:center}
.prof-note-save:active{transform:scale(.97)}

/* ═══ SETTINGS ═══ */
.set-profile{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;border-bottom:1px solid var(--glass-border);transition:.12s}
.set-profile:active{background:var(--glass-bg2)}
.set-av{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;flex-shrink:0;overflow:hidden;background:var(--glass-bg2);border:2px solid var(--accent)}
.set-info{flex:1;min-width:0}
.set-name{font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.set-sub{font-size:.72rem;color:var(--text2);margin-top:1px}
.si-icon{border-radius:10px;padding:2px}
.set-ico{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.set-ico .ic{width:16px;height:16px}

/* ═══ CHANNEL POSTS ═══ */
.m-post{max-width:100%!important;width:100%;margin:6px 0;padding:14px 16px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px}
.post-reactions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.post-react-add{width:32px;height:28px;border-radius:14px;background:var(--glass-bg2);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;color:var(--text3)}
.post-react-add:active{background:var(--glass-bg3)}
.post-footer{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:.75rem;color:var(--text3)}
.post-views{display:flex;align-items:center;gap:4px}
.post-views .ic-sm{width:14px;height:14px;opacity:.6}

/* My Profile edit */
.my-prof-header{display:flex;flex-direction:column;align-items:center;padding:20px 16px 12px;gap:10px}
.my-prof-av-wrap{position:relative;cursor:pointer;width:100px;height:100px}
.my-prof-av-img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent)}
.my-prof-av{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#fff;font-weight:600;border:3px solid var(--accent)}
.my-prof-av-edit{position:absolute;bottom:2px;right:2px;width:30px;height:30px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2.5px solid var(--bg);color:#fff}
.my-prof-av-edit .ic-sm{width:14px;height:14px}
.my-prof-emoji-btn{padding:6px 18px;border-radius:20px;background:var(--glass-bg2);border:1px solid var(--glass-border);color:var(--text);font-size:.85rem;font-family:inherit;cursor:pointer;transition:.12s}
.my-prof-emoji-btn:active{transform:scale(.95)}
.my-prof-fields{padding:4px 16px}
.my-prof-field{padding:14px 0;border-bottom:1px solid var(--glass-border)}
.my-prof-field:last-child{border-bottom:none}
.my-prof-field label{display:block;font-size:.7rem;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.my-prof-field input{width:100%;padding:4px 0;background:none;border:none;color:var(--text);font-size:1rem;font-family:inherit;outline:none}
.my-prof-field input::placeholder{color:var(--text3)}
.my-prof-val{font-size:1rem;color:var(--text);cursor:pointer}
.my-prof-save{padding:12px 16px}

/* Profile channel card */
.prof-channel-card{padding:8px 16px}
.prof-ch-inner{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:14px;cursor:pointer;transition:.12s}
.prof-ch-inner:active{transform:scale(.98);background:var(--glass-bg2)}
.prof-ch-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;flex-shrink:0}
.prof-ch-info{flex:1;min-width:0}
.prof-ch-name{font-size:.95rem;font-weight:600;display:flex;align-items:center;gap:2px}
.prof-ch-sub{font-size:.75rem;color:var(--text3);margin-top:1px}

/* Subscribe bar */
.subscribe-bar{display:flex;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--glass-border);flex-shrink:0}
.subscribe-btn{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:14px;font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:.12s}
.subscribe-btn:active{transform:scale(.97)}

/* Multi-select */
.multi-bar{display:flex;align-items:center;gap:8px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--glass-border);flex-shrink:0}
.multi-btn{width:40px;height:40px;border-radius:50%;background:var(--glass-bg2);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer}
.multi-btn.red{color:var(--red)}
.multi-btn:active{transform:scale(.9)}
.m.m-selected{background:var(--accent-bg)!important;border:1px solid var(--accent)!important;border-radius:16px}
.post-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.post-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;background:var(--accent-bg);flex-shrink:0}
.post-info{display:flex;flex-direction:column}
.post-name{font-size:.8rem;font-weight:700;color:var(--text)}
.post-time{font-size:.6rem;color:var(--text3)}
.post-text{font-size:.88rem;line-height:1.55;color:var(--text);white-space:pre-wrap;word-break:break-word}
.m-post .m-img{border-radius:8px;margin-top:4px}
.m-post .m-reactions{margin-top:6px}

/* ═══ IN-APP NOTIFICATION ═══ */
.notif-toast{position:fixed;top:calc(10px + env(safe-area-inset-top));left:10px;right:10px;z-index:9999;display:none;align-items:center;gap:10px;padding:10px 14px;background:var(--bg);border:1px solid var(--glass-border);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.25);cursor:pointer;pointer-events:auto;opacity:0;will-change:transform,opacity}
.notif-toast.show{display:flex;animation:notifIn .3s ease forwards}
.notif-toast.hide{display:flex;animation:notifOut .3s ease forwards}
@keyframes notifIn{0%{opacity:0;transform:translateY(-30px)}100%{opacity:1;transform:translateY(0)}}
@keyframes notifOut{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-30px)}}
.notif-toast-av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;color:#fff;font-weight:600}
.notif-toast-body{flex:1;min-width:0}
.notif-toast-name{font-size:.78rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-toast-text{font-size:.7rem;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.notif-toast-time{font-size:.58rem;color:var(--text3);flex-shrink:0}

/* ═══ FOLDER TABS ═══ */
/* ═══ FAB ═══ */
.fab{display:none;position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));right:20px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 16px rgba(91,154,255,.4),0 2px 6px rgba(0,0,0,.3);z-index:50;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease}
.fab:active{transform:scale(.9);box-shadow:0 2px 8px rgba(91,154,255,.3)}
.fab svg{pointer-events:none}
@media(max-width:768px){.fab{display:flex}.hide-mob{display:none!important}}

/* ═══ BOLT GLOW ═══ */
.bolt-glow{animation:boltGlow 2s ease-in-out infinite}
@keyframes boltGlow{0%,100%{filter:drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 8px rgba(91,154,255,.3))}50%{filter:drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 16px rgba(91,154,255,.5))}}

/* ═══ PULL TO REFRESH ═══ */
.ptr{text-align:center;padding:0;height:0;overflow:hidden;transition:height .2s ease;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:.7rem}
.ptr-spinner{width:18px;height:18px;border:2px solid var(--glass-border);border-top-color:var(--accent);border-radius:50%;display:inline-block;margin-right:6px}
.ptr-spinner.spin{animation:ptrSpin .6s linear infinite}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

.folder-tabs{display:flex;gap:0;padding:0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-shrink:0;border-bottom:1px solid var(--glass-border)}
.folder-tabs::-webkit-scrollbar{display:none}
.folder-tab{padding:10px 14px;font-size:.85rem;font-weight:600;color:var(--text3);white-space:nowrap;cursor:pointer;border-bottom:2px solid transparent;transition:.15s}
.folder-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.folder-tab:active{opacity:.7}

/* ═══ POLLS ═══ */
.poll-q{font-size:.85rem;font-weight:700;margin-bottom:8px}
.poll-opt{position:relative;padding:8px 10px;margin:3px 0;border-radius:8px;background:var(--glass-bg2);border:1px solid var(--glass-border);cursor:pointer;display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:.15s}
.poll-opt:active{transform:scale(.98)}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:var(--accent-bg);border-radius:8px;transition:width .4s ease}
.poll-text{position:relative;font-size:.78rem;z-index:1}
.poll-pct{position:relative;font-size:.68rem;font-weight:600;color:var(--accent);z-index:1}
.poll-total{font-size:.62rem;color:var(--text3);margin-top:5px;text-align:right}

/* ═══ SEND ANIMATION ═══ */
/* msgSend removed — using msgIn from animations block */

/* ═══ RECORDING INDICATOR ═══ */
.rec-ind{display:flex;align-items:center;gap:5px;font-size:.68rem;color:var(--red)}
.rec-dot{width:6px;height:6px;border-radius:50%;background:var(--red);animation:recPulse 1s infinite}
@keyframes recPulse{0%,100%{opacity:1}50%{opacity:.3}}

.gm-chips{display:flex;flex-wrap:wrap;gap:4px;padding:6px 12px}
.gm-chip{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-border);border-radius:16px;font-size:.68rem;font-weight:500;cursor:pointer;transition:.1s}
.gm-chip:active{transform:scale(.95)}

.inp-readonly{justify-content:center;align-items:center;gap:8px;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}

/* Toggle */
.toggle{width:40px;height:22px;border-radius:11px;background:var(--glass-bg3);border:1px solid var(--glass-border);position:relative;cursor:pointer;transition:.3s;flex-shrink:0}
.toggle.on{background:rgba(52,211,153,.3);border-color:rgba(52,211,153,.25)}
.toggle::after{content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text);transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}.toggle.on::after{left:20px}

/* Toast */
.toast{position:fixed;top:calc(44px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);background:var(--sheet-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);padding:10px 20px;border-radius:12px;font-size:.9rem;z-index:999;display:none;box-shadow:0 6px 24px rgba(0,0,0,.15)}.toast.show{display:block;animation:toastIn .25s ease both}

/* ═══ MOBILE ═══ */
@media(max-width:768px){
  .side{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;width:100%;min-width:0;background:var(--bg)}
  .side.hidden{transform:translateX(-100%);pointer-events:none}
  #chatView{position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;background:var(--bg);box-shadow:-4px 0 24px rgba(0,0,0,.15)}
  .ch-back{display:flex}.m{max-width:92%}
  .ctx{top:auto!important;bottom:0!important;left:0!important;right:0;width:100%;max-width:100%;border-radius:14px 14px 0 0;padding:5px 0;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))}
  .ctx::before{content:'';display:block;width:28px;height:3px;border-radius:2px;background:var(--glass-bg3);margin:4px auto 5px}
  .ctx-i{padding:12px 16px;font-size:.88rem}
  .m-img{max-width:60vw;max-height:200px}.m-video{max-width:60vw}
}
@supports(padding-top:env(safe-area-inset-top)){
  .side-top{padding-top:calc(10px + env(safe-area-inset-top))}
  .ch{padding-top:calc(6px + env(safe-area-inset-top))}
  .auth{padding-top:env(safe-area-inset-top)}
  .sheet-c{padding-bottom:env(safe-area-inset-bottom)}
}
html.standalone .side-top{padding-top:calc(14px + env(safe-area-inset-top,20px))}
html.standalone .ch{padding-top:calc(8px + env(safe-area-inset-top,20px))}
html.standalone .auth{padding-top:calc(20px + env(safe-area-inset-top,20px))}

/* Upload progress bar */
.upload-bar{display:none;padding:8px 16px;background:var(--bg);border-top:1px solid var(--glass-border)}
.upload-info{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.75rem}
.upload-name{flex:1;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upload-size{color:var(--text2);flex-shrink:0}
.upload-pct{color:var(--accent);font-weight:600;flex-shrink:0;min-width:32px;text-align:right}
.upload-track{height:4px;border-radius:2px;background:var(--glass-bg);overflow:hidden}
.upload-fill{height:100%;border-radius:2px;background:var(--accent);transition:width .2s ease;width:0}

/* Scroll-to-bottom button */
.scroll-down-btn{position:absolute;right:16px;bottom:70px;width:40px;height:40px;border-radius:50%;background:var(--glass-bg);backdrop-filter:blur(20px);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:scale(.8) translateY(10px);transition:all .2s ease;z-index:5;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.scroll-down-btn.show{opacity:1;transform:scale(1) translateY(0)}
.scroll-down-btn svg{width:20px;height:20px;color:var(--text)}
.scroll-badge{position:absolute;top:-6px;right:-6px;background:var(--accent);color:#fff;font-size:.6rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}

/* Big emoji */
.m-emoji-big{font-size:2.8rem;line-height:1.2;letter-spacing:2px}
.m-emoji-big~.m-time{margin-top:4px}

/* Double-tap heart */
.dbl-heart{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);font-size:3rem;animation:heartPop .6s ease forwards;pointer-events:none;z-index:10;filter:drop-shadow(0 2px 8px rgba(255,0,0,.4))}
@keyframes heartPop{0%{transform:translate(-50%,-50%) scale(0);opacity:1}50%{transform:translate(-50%,-50%) scale(1.3);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}

/* Viewer counter */
.viewer-counter{position:fixed;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:rgba(0,0,0,.6);backdrop-filter:blur(10px);color:#fff;font-size:.8rem;font-weight:600;padding:6px 16px;border-radius:20px;z-index:10002}

/* Reply thumbnail */
.reply-thumb{width:32px;height:32px;border-radius:4px;object-fit:cover;vertical-align:middle;margin-left:6px}