:root{
  --font-ui: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-brand: 'Unbounded', 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  --bg:#0a0a12;--s1:rgba(18,18,28,.72);--s2:rgba(28,28,42,.6);--s3:rgba(40,40,58,.64);
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);
  --a1:#76a7ff;--a2:#9d8cff;--a3:#64f0c4;--a4:#ffcb76;--a5:#ff8b6b;
  --text:#f6f7fb;--muted:rgba(230,233,245,.52);
  --out-bg:rgba(101,127,255,.22);--out-border:rgba(166,185,255,.24);--in-bg:rgba(255,255,255,.08);
  --pro:#f5c518;--pro2:#ff8c00;
  --glass:blur(28px) saturate(165%);
  --glass-shadow:0 24px 60px rgba(0,0,0,.34);
  --bg-orb-1:rgba(118,167,255,.22);
  --bg-orb-2:rgba(157,140,255,.18);
  --bg-orb-3:rgba(100,240,196,.12);
  --glass-fill:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));
  --glass-edge:rgba(255,255,255,.18);
  --glass-inner:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.03);
  --msg-font-size:13.5px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{
  font-family:var(--font-ui);
  background:
    radial-gradient(circle at top left,var(--bg-orb-1),transparent 34%),
    radial-gradient(circle at top right,var(--bg-orb-2),transparent 32%),
    radial-gradient(circle at bottom center,var(--bg-orb-3),transparent 38%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 34%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    linear-gradient(115deg,rgba(255,255,255,.045),transparent 18%,transparent 82%,rgba(255,255,255,.028)),
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.08),transparent 18%),
    radial-gradient(circle at 78% 72%,rgba(255,255,255,.05),transparent 20%);
  pointer-events:none;
  mix-blend-mode:screen;
}
body.auth-visible #app{filter:blur(18px) saturate(.8);transform:scale(.985);transform-origin:center;pointer-events:none;user-select:none}
body.auth-visible .bnav{pointer-events:none;opacity:.2}

/* ─── AUTH ─────────────────────────────────── */
#auth{position:fixed;inset:0;background:rgba(5,10,16,.7);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;overflow-y:auto;backdrop-filter:blur(28px) saturate(150%)}
#auth::before{content:'';position:fixed;inset:0;background:radial-gradient(circle at 50% 50%,rgba(90,198,255,.12),transparent 32%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0));pointer-events:none}
.auth-card{position:relative;background:var(--s1);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--border2);box-shadow:var(--glass-shadow);border-radius:30px;padding:38px 34px;width:min(460px,100%);max-width:100%;margin:auto}
.auth-logo{font-family:'Unbounded',sans-serif;font-weight:800;font-size:36px;letter-spacing:-2px;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;margin-bottom:4px}
.auth-tag{text-align:center;color:var(--muted);font-size:12px;margin-bottom:22px}
.auth-tabs{display:flex;background:rgba(255,255,255,.06);backdrop-filter:var(--glass);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:4px;margin-bottom:20px}
.auth-tab{flex:1;padding:11px 8px;text-align:center;font-size:13px;font-weight:700;cursor:pointer;border-radius:12px;color:var(--muted);transition:all .2s}
.auth-tab.active{background:rgba(255,255,255,.14);color:var(--text);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.fl{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.fi{width:100%;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:15px;padding:12px 14px;color:var(--text);font-family:'Manrope',sans-serif;font-size:14px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s;margin-bottom:12px;backdrop-filter:blur(18px)}
.fi:hover{background:rgba(255,255,255,.1)}
.fi:focus{border-color:var(--a1)}.fi::placeholder{color:var(--muted)}.fi.err{border-color:var(--a2)}.fi.ok{border-color:var(--a3)}
.nick-wrap{position:relative;margin-bottom:12px}.nick-wrap .fi{margin-bottom:0;padding-right:38px}
.nick-st{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:14px}
.nick-hint{font-size:11px;margin-top:4px;margin-bottom:8px;padding-left:2px}
.nick-hint.taken{color:var(--a2)}.nick-hint.free{color:var(--a3)}.nick-hint.checking{color:var(--muted)}
.abtn{width:100%;padding:13px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;border-radius:16px;color:#fff;font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:transform .15s,box-shadow .2s;margin-top:4px;box-shadow:0 18px 36px rgba(87,110,255,.24)}
.abtn:hover{transform:translateY(-1px) scale(1.01);box-shadow:0 20px 42px rgba(87,110,255,.32)}.abtn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.aerr{color:var(--a2);font-size:12px;text-align:center;margin-top:8px;min-height:16px;line-height:1.5}
.auth-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:12px}
.auth-link-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 11px;border-radius:12px;border:1px solid var(--border2);
  background:rgba(255,255,255,.08);backdrop-filter:blur(18px);
  color:var(--text);text-decoration:none;font-size:12px;font-weight:700;cursor:pointer;
}
.auth-link-btn:hover{background:rgba(255,255,255,.12)}
a,button,.inst-btn,.auth-link-btn,.bnav-item,.ci,.feed-action,.feed-action-btn,.feed-author,.back-btn,.ch-act,.logout-btn{touch-action:manipulation}

/* ─── INSTALL PAGE ───────────────────────── */
.install-page{position:fixed;inset:0;z-index:1200;display:none;overflow:auto;padding:22px 14px 28px;background:
  radial-gradient(circle at 12% 10%,rgba(118,167,255,.24),transparent 32%),
  radial-gradient(circle at 88% 16%,rgba(157,140,255,.2),transparent 28%),
  radial-gradient(circle at 50% 96%,rgba(100,240,196,.13),transparent 34%),
  linear-gradient(180deg,#070b13,#0f1724)}
.install-wrap{max-width:1100px;margin:0 auto}
.inst-hero{border:1px solid rgba(255,255,255,.14);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));backdrop-filter:blur(20px) saturate(160%);padding:18px;box-shadow:0 24px 54px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.15)}
.inst-title{font-family:var(--font-brand);font-size:28px;letter-spacing:-1px}
.inst-sub{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55}
.inst-cta{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px}
.inst-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none}
.inst-btn.s{background:rgba(255,255,255,.11);font-weight:700}
.inst-note{margin-top:10px;font-size:13px;color:var(--muted)}
.inst-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.inst-card{border:1px solid rgba(255,255,255,.13);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));padding:14px;backdrop-filter:blur(18px)}
.inst-card h3{font-size:17px;margin-bottom:8px}
.inst-card p{font-size:13px;color:var(--muted);line-height:1.5}
.inst-steps{margin-top:8px;padding-left:18px;color:var(--muted);font-size:13px;line-height:1.5}
.inst-status{margin-top:8px;font-size:12px;color:var(--muted)}
.inst-close{position:sticky;top:8px;margin-left:auto;width:34px;height:34px;border-radius:12px;border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);cursor:pointer;color:var(--text)}
.inst-wide{grid-column:1 / -1}
.inst-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
@media (max-width:420px){
  .inst-cta,.inst-actions{display:grid;grid-template-columns:1fr;gap:8px}
  .inst-btn{width:100%}
}
@media (max-width:860px){.inst-grid{grid-template-columns:1fr}.inst-title{font-size:24px}}
.ui-icon{display:inline-flex;align-items:center;justify-content:center;line-height:0;color:inherit;flex-shrink:0}
.ui-icon svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ui-icon.sm svg{width:16px;height:16px}
.ui-icon.xs svg{width:14px;height:14px}
.ui-icon.nav svg{width:18px;height:18px}
.feed-action-btn .ui-icon svg{width:20px;height:20px}
.ctx-icon .ui-icon svg{width:18px;height:18px}
.other-btn .ui-icon,
.other-link-btn .ui-icon,
.chat-tool-btn .ui-icon,
.file-quick-btn .ui-icon{margin-right:6px}
.other-link-btn{gap:6px}
.ci-badges{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:4px}
.ci-badge{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:4px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);
  color:var(--muted);font-size:10px;font-weight:800;
}
.ci-badge.active{color:var(--text);border-color:rgba(255,255,255,.2)}
.ci-badge.pin{color:var(--a4)}
.ci-badge.mute{color:var(--a2)}
.media-loading,
.feed-media-loading,
.story-media-loading,
.pp-post-media.loading{
  position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:8px;color:rgba(255,255,255,.72);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
}
.media-loading{min-height:140px;padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.12)}
.feed-media-shell{position:absolute;inset:0}
.feed-media-loading,
.story-media-loading{position:absolute;inset:0}
.pp-post-media.loading{min-height:180px;border-radius:16px}
.media-spinner{
  width:26px;height:26px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);border-top-color:var(--a1);
  animation:spin .9s linear infinite;
}
.media-loading-note{font-size:11px;font-weight:700;letter-spacing:.2px}
.media-error-note{font-size:11px;color:var(--a5);text-align:center;line-height:1.5;padding:0 14px}
.chat-tool-list,
.saved-list{display:flex;flex-direction:column;gap:8px}
.chat-tool-btn,
.saved-item{
  width:100%;padding:11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.07);color:var(--text);font-size:13px;font-weight:700;
}
.chat-tool-btn{cursor:pointer;text-align:left}
.chat-tool-btn:hover,
.saved-item:hover{background:rgba(255,255,255,.11)}
.chat-tool-sub,
.saved-sub{display:block;margin-top:4px;color:var(--muted);font-size:11px;font-weight:600;line-height:1.45}
.saved-item{cursor:pointer}
.saved-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.saved-title{font-size:13px;font-weight:800}
.saved-meta{font-size:10px;color:var(--muted);font-weight:700}
.chat-search-results{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow:auto}
.chat-search-empty{padding:18px 10px;text-align:center;color:var(--muted);font-size:12px;line-height:1.55}
.chat-search-item{
  padding:10px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);cursor:pointer;
}
.chat-search-item:hover{background:rgba(255,255,255,.11)}
.chat-search-name{font-size:11px;font-weight:800;color:var(--a1);margin-bottom:4px}
.chat-search-text{font-size:12px;line-height:1.5}
.file-chip{
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:10px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
}
.file-chip-copy{min-width:0}
.file-chip-title{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-chip-sub{font-size:10px;color:var(--muted);margin-top:2px}
.file-quick-btn{
  width:32px;height:32px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.file-quick-btn:hover{background:rgba(255,255,255,.14)}

/* ─── CALL PANEL ───────────────────────── */
.call-panel{position:fixed;left:10px;right:10px;top:calc(10px + env(safe-area-inset-top));z-index:1500;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:linear-gradient(180deg,rgba(10,18,30,.96),rgba(12,22,36,.9));backdrop-filter:blur(18px);box-shadow:0 16px 40px rgba(0,0,0,.35);padding:12px}
.call-panel-title{font-family:var(--font-brand);font-size:14px;font-weight:700}
.call-panel-sub{margin-top:2px;font-size:12px;color:var(--muted)}
.call-panel-actions{display:flex;gap:8px;margin-top:10px}
.call-panel-btn{flex:1;border:none;border-radius:12px;padding:10px 11px;color:#fff;font-weight:700;cursor:pointer;background:linear-gradient(135deg,var(--a1),var(--a2))}
.call-panel-btn.secondary{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.18)}
.call-panel-btn.danger{background:linear-gradient(135deg,#ef4444,#dc2626)}
.call-video-wrap{position:fixed;inset:0;z-index:1490;background:#0b1018}
.call-video-remote{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#06090f}
.call-video-local{position:absolute;right:10px;bottom:82px;width:min(34vw,180px);height:min(24vw,130px);border-radius:14px;border:1px solid rgba(255,255,255,.26);background:#0d1118;object-fit:cover;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.call-video-local.front{transform:scaleX(-1)}
.call-video-local.local-blur{filter:blur(2.2px) saturate(1.06)}
.call-video-controls{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px;z-index:2;flex-wrap:wrap;justify-content:center}
.call-video-btn{min-width:38px;height:38px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(18,25,36,.66);color:#fff;font-size:12px;font-weight:700;cursor:pointer;backdrop-filter:blur(12px)}
.call-video-btn:hover{background:rgba(255,255,255,.18)}
.call-video-btn.soon{position:relative;opacity:.7;cursor:not-allowed}
.call-video-btn.soon::after{
  content:'Скоро...';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;letter-spacing:.2px;
  background:rgba(8,12,20,.58);border-radius:inherit;color:#fff;
}
@keyframes callEmojiFloat{0%{opacity:0;transform:translate(-50%,8px) scale(.9)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-110px) scale(1.2)}}
.call-emoji-rx{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-size:42px;z-index:3;pointer-events:none;animation:callEmojiFloatRx 1.2s ease forwards}
@keyframes callEmojiFloatRx{0%{opacity:0;transform:translate(-50%,20px) scale(.8)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-80px) scale(1.15)}}
@media (max-width:640px){
  .call-video-local{width:min(42vw,180px);height:auto;aspect-ratio:16/9;object-fit:contain;background:#0a0f16}
}

/* ─── APP ──────────────────────────────────── */
#app{display:none;width:100%;min-height:100vh;height:100dvh}

/* ─── PRO BADGE ────────────────────────────── */
.pro-badge{display:inline-flex;align-items:center;gap:2px;background:linear-gradient(135deg,var(--pro),var(--pro2));border-radius:4px;padding:1px 5px;font-size:9px;font-weight:800;color:#000;font-family:'Unbounded',sans-serif;vertical-align:middle;letter-spacing:.3px}

/* ─── SIDEBAR ──────────────────────────────── */
.sidebar{width:295px;min-width:295px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04)),var(--s1);backdrop-filter:blur(32px) saturate(175%);-webkit-backdrop-filter:blur(32px) saturate(175%);border-right:1px solid var(--glass-edge);display:flex;flex-direction:column;height:100dvh;box-shadow:var(--glass-inner),inset -1px 0 0 rgba(255,255,255,.03)}
.logo{padding:16px 14px 12px;display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.logo-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--a1),var(--a2));display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:800;font-size:10px;color:#fff;flex-shrink:0}
.logo-text{font-family:'Unbounded',sans-serif;font-weight:800;font-size:16px;letter-spacing:-1.5px;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.me-area{margin-left:auto;display:flex;align-items:center;gap:6px}
.me-av-btn{width:32px;height:32px;border-radius:50%;cursor:pointer;overflow:hidden;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.18);flex-shrink:0;transition:transform .2s,box-shadow .2s}
.me-av-btn:hover{transform:scale(1.06);box-shadow:0 12px 22px rgba(0,0,0,.25)}
.logout-btn{width:28px;height:28px;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:12px;transition:all .2s;backdrop-filter:blur(18px)}
.logout-btn:hover{color:var(--text);border-color:var(--border2);background:rgba(255,255,255,.1)}
.stabs{display:flex;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0;overflow-x:auto}
.stabs::-webkit-scrollbar{display:none}
.stab{flex:1;min-width:0;padding:9px 3px;font-size:9px;font-weight:700;text-align:center;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .2s;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.stab.active{color:var(--text);border-bottom-color:rgba(255,255,255,.65)}
.stab.pro-tab{color:var(--pro)}
.stab.pro-tab.active{color:var(--pro);border-bottom-color:var(--pro)}
.sbar{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}
.sbar input{width:100%;background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:18px;padding:11px 13px;color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:border-color .2s,background .2s,transform .2s;backdrop-filter:blur(24px);box-shadow:var(--glass-inner)}
.sbar input:hover{transform:translateY(-1px)}
.sbar input:focus{border-color:var(--a1)}.sbar input::placeholder{color:var(--muted)}
.new-btn{margin:10px 12px 8px;padding:12px 13px;background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:20px;color:var(--text);font-size:12px;font-weight:800;cursor:pointer;text-align:center;transition:all .2s;flex-shrink:0;backdrop-filter:blur(24px);box-shadow:var(--glass-inner),0 14px 28px rgba(0,0,0,.12)}
.new-btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.08));transform:translateY(-1px)}
.list{flex:1;overflow-y:auto;min-height:0;padding-bottom:26px;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}
.list::-webkit-scrollbar{width:3px}.list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.ci{display:flex;align-items:center;gap:10px;padding:12px 13px;cursor:pointer;transition:background .15s,transform .15s,border-color .15s; border:1px solid transparent;border-radius:20px;margin:4px 8px}
.ci:hover{background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));transform:translateY(-1px);border-color:rgba(255,255,255,.08);box-shadow:var(--glass-inner)}
.ci.active{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.16);box-shadow:var(--glass-inner),0 16px 32px rgba(0,0,0,.12);padding-left:13px}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Unbounded',sans-serif;flex-shrink:0;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.ci-info{flex:1;min-width:0}
.ci-name{font-weight:600;font-size:13px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.ci-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-time{font-size:10px;color:var(--muted);flex-shrink:0}
.type-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:4px}
.tb-group{background:rgba(68,255,187,.1);color:var(--a3);border:1px solid rgba(68,255,187,.2)}
.tb-channel{background:rgba(255,170,68,.1);color:var(--a4);border:1px solid rgba(255,170,68,.2)}
.tb-secret{background:rgba(110,68,255,.14);color:#d7cbff;border:1px solid rgba(110,68,255,.35)}
.user-card{display:flex;align-items:center;gap:10px;padding:11px 12px;margin:6px 8px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.04));backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.actn{padding:8px 11px;border:none;border-radius:12px;color:#fff;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:transform .15s,box-shadow .15s}
.actn:hover{transform:scale(1.05)}.actn.primary{background:linear-gradient(135deg,var(--a1),var(--a2))}
.actn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);color:var(--text)}
.esearch{padding:18px;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}

/* ─── MAIN ─────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;background:transparent;min-width:0}
.ch{padding:15px 18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),var(--s1);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px;flex-shrink:0;box-shadow:var(--glass-inner)}
.ch-av{border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;transition:transform .2s}
.ch-av:hover{transform:scale(1.06)}.ch-av img{width:100%;height:100%;object-fit:cover}
.ch-info{flex:1;min-width:0;cursor:pointer}
.ch-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:13px;letter-spacing:-.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub{font-size:11px;color:var(--muted);margin-top:1px}
.ch-acts{display:flex;gap:5px}
.ch-act{width:32px;height:32px;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:13px;transition:all .2s;backdrop-filter:blur(18px)}
.ch-act:hover{background:rgba(255,255,255,.12);color:var(--text);border-color:var(--border2)}
.ch-act.secure-on{background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.45);color:#9bf6c8}
.ch-act.secure-on:hover{background:rgba(34,197,94,.26);border-color:rgba(34,197,94,.62);color:#d9ffe9}
.pinned-bar{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.pinned-mark{width:28px;height:28px;border-radius:12px;background:linear-gradient(135deg,var(--a1),var(--a2));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 10px 20px rgba(87,110,255,.2)}
.pinned-copy{flex:1;min-width:0;cursor:pointer}
.pinned-label{font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--a1);margin-bottom:3px}
.pinned-text{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinned-close{width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;flex-shrink:0}
.pinned-close:hover{color:var(--text);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08))}
.msgs{flex:1;overflow-y:auto;padding:22px 18px 28px;display:flex;flex-direction:column;gap:10px;min-height:0;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;background:
  radial-gradient(circle at 20% 10%,rgba(255,255,255,.04),transparent 20%),
  radial-gradient(circle at 80% 78%,rgba(255,255,255,.03),transparent 20%)}
.msgs::-webkit-scrollbar{width:4px}.msgs::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.date-sep{text-align:center;font-size:10px;color:var(--muted);padding:4px 0;text-transform:uppercase;letter-spacing:.5px;position:relative}
.date-sep::before,.date-sep::after{content:'';position:absolute;top:50%;width:36%;height:1px;background:var(--border)}
.date-sep::before{left:0}.date-sep::after{right:0}
.mrow{display:flex;align-items:flex-end;gap:6px;animation:pop .2s ease}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.mrow.out{flex-direction:row-reverse}
.mwrap{display:flex;flex-direction:column;max-width:min(430px,72vw)}
.mwrap.out{align-items:flex-end}.mwrap.in{align-items:flex-start}
.msg-av{border-radius:50%;flex-shrink:0;overflow:hidden;cursor:pointer;transition:transform .15s}
.msg-av:hover{transform:scale(1.1)}.msg-av img{width:100%;height:100%;object-fit:cover}
.msender{font-size:10px;color:var(--a1);margin-bottom:2px;padding-left:3px;font-weight:700;cursor:pointer}
.msender:hover{text-decoration:underline}
.bbl{padding:11px 15px;border-radius:24px;font-size:var(--msg-font-size);line-height:1.55;word-break:break-word;backdrop-filter:blur(28px) saturate(165%);box-shadow:var(--glass-inner),0 18px 34px rgba(0,0,0,.1);position:relative;overflow:hidden}
.bbl::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 45%);pointer-events:none}
.mrow.in .bbl{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:9px}
.mrow.out .bbl{background:linear-gradient(135deg,rgba(120,152,255,.26),rgba(255,255,255,.12));border:1px solid rgba(174,194,255,.22);border-bottom-right-radius:9px}
.mtime{font-size:10px;color:var(--muted);margin-top:3px;display:flex;align-items:center;gap:3px}
.mrow.out .mtime{justify-content:flex-end}.tick{color:var(--a1);font-size:11px}
.edited-mark{font-size:10px;color:var(--muted);opacity:.9}
.img-bbl{max-width:min(220px,58vw);border-radius:22px;overflow:hidden;cursor:zoom-in;border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 30px rgba(0,0,0,.16)}.img-bbl img{width:100%;display:block}
.iarea{padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)),var(--s1);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:stretch;gap:8px;flex-shrink:0;box-shadow:var(--glass-inner)}
.ia-tools{display:flex;align-items:center;gap:7px;overflow-x:auto;padding-bottom:1px}
.ia-tools::-webkit-scrollbar{display:none}
.ia-compose{display:flex;align-items:flex-end;gap:8px;width:100%}
.ibt{width:40px;height:40px;background:var(--glass-fill);border:1px solid var(--glass-edge);border-radius:16px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:15px;transition:all .2s;flex-shrink:0;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.ibt:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));color:var(--text);border-color:rgba(255,255,255,.2)}
.ibt.recording{background:rgba(255,68,136,.15);border-color:var(--a2);color:var(--a2);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.minput{flex:1;width:100%;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.15);border-radius:22px;padding:12px 15px;color:var(--text);font-family:'Manrope',sans-serif;font-size:13.5px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s;resize:none;max-height:120px;line-height:1.5;backdrop-filter:blur(28px);box-shadow:var(--glass-inner)}
.minput:focus{border-color:var(--a1)}.minput::placeholder{color:var(--muted)}
.sendbtn{width:42px;height:42px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;border-radius:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:16px;transition:transform .15s,box-shadow .2s;flex-shrink:0;box-shadow:0 18px 34px rgba(87,110,255,.28), inset 0 1px 0 rgba(255,255,255,.24)}
.sendbtn:hover{transform:translateY(-1px) scale(1.03);box-shadow:0 18px 34px rgba(87,110,255,.36)}.sendbtn:active{transform:scale(.95)}
.ro-banner{padding:11px;background:rgba(255,170,68,.06);border-top:1px solid rgba(255,170,68,.18);text-align:center;font-size:12px;color:var(--a4);flex-shrink:0}
.empty-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--muted)}
.empty-icon{width:68px;height:68px;background:linear-gradient(135deg,var(--a1),var(--a2));border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 18px 36px rgba(87,110,255,.24)}
.empty-title{font-family:'Unbounded',sans-serif;font-weight:700;font-size:17px;color:var(--text);letter-spacing:-1px}
.empty-sub{font-size:13px;text-align:center;max-width:220px;line-height:1.6}

/* ─── VOICE MESSAGE ──────────────────────────── */
.voice-bbl{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:22px;min-width:200px;cursor:pointer;backdrop-filter:blur(24px);box-shadow:var(--glass-inner)}
.mrow.in .voice-bbl{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.12);border-bottom-left-radius:8px}
.mrow.out .voice-bbl{background:linear-gradient(135deg,rgba(120,152,255,.26),rgba(255,255,255,.1));border:1px solid rgba(174,194,255,.22);border-bottom-right-radius:8px}
.vplay{width:30px;height:30px;border-radius:50%;background:var(--a1);border:none;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;cursor:pointer;flex-shrink:0;transition:transform .15s}
.vplay:hover{transform:scale(1.1)}
.vwave{flex:1;height:28px;display:flex;align-items:center;gap:1.5px}
.vbar{width:3px;border-radius:2px;background:rgba(255,255,255,.25);transition:background .2s;flex-shrink:0}
.vbar.active{background:var(--a1)}
.vdur{font-size:10px;color:var(--muted);flex-shrink:0}
.rec-indicator{display:flex;align-items:center;gap:8px;padding:8px 13px;background:rgba(255,68,136,.08);border-top:1px solid rgba(255,68,136,.2);flex-shrink:0}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--a2);animation:pulse 1s infinite;flex-shrink:0}
.rec-timer{font-size:13px;font-weight:600;color:var(--a2)}
.rec-cancel{margin-left:auto;font-size:11px;color:var(--muted);cursor:pointer;padding:3px 8px;border:1px solid var(--border);border-radius:6px;transition:color .2s}
.rec-cancel:hover{color:var(--a2)}

/* ─── STORIES ROW ────────────────────────────── */
.stories-row{padding:12px 12px 10px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0;overflow-x:auto;display:flex;gap:12px;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent)}
.stories-row::-webkit-scrollbar{display:none}
.story-item{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;flex-shrink:0}
.story-ring{width:54px;height:54px;border-radius:50%;padding:2px;background:linear-gradient(135deg,var(--a1),var(--a2));flex-shrink:0;box-shadow:0 14px 28px rgba(0,0,0,.14)}
.story-ring.seen{background:var(--border2)}
.story-ring.pro-ring{background:linear-gradient(135deg,var(--pro),var(--pro2))}
.story-inner{width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.14);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:800;font-size:12px;backdrop-filter:blur(18px)}
.story-inner img{width:100%;height:100%;object-fit:cover}
.story-add{width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;flex-shrink:0;transition:border-color .2s,transform .2s;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.story-add:hover{border-color:var(--a1)}
.story-name{font-size:9px;color:var(--muted);max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}

/* ─── STORY VIEWER ───────────────────────────── */
.story-viewer{position:fixed;inset:0;background:#000;z-index:500;display:flex;flex-direction:column}
.sv-top{position:absolute;top:0;left:0;right:0;z-index:10;padding:12px 14px 0}
.sv-bars{display:flex;gap:3px;margin-bottom:10px}
.sv-bar{flex:1;height:2px;background:rgba(255,255,255,.25);border-radius:1px;overflow:hidden}
.sv-bar-fill{height:100%;background:#fff;width:0%;transition:width linear}
.sv-hdr{display:flex;align-items:center;gap:9px}
.sv-av{width:32px;height:32px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.5)}
.sv-av img{width:100%;height:100%;object-fit:cover}
.sv-name{font-weight:700;font-size:13px;flex:1}
.sv-time{font-size:11px;color:rgba(255,255,255,.6)}
.sv-close{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#fff}
.sv-media{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden}
.sv-media img,.sv-media video{max-width:100%;max-height:100%;object-fit:cover}
/* Square story format - face centered */
.story-viewer .feed-media{width:100%;height:100%;object-fit:cover;object-position:center top}
.sv-tap-left{position:absolute;left:0;top:0;bottom:0;width:35%;cursor:pointer}
.sv-tap-right{position:absolute;right:0;top:0;bottom:0;width:35%;cursor:pointer}

/* ─── PRO PROMO ──────────────────────────────── */
.pro-promo{margin:10px;background:linear-gradient(135deg,rgba(245,197,24,.12),rgba(255,140,0,.06),rgba(255,255,255,.05));border:1px solid rgba(245,197,24,.25);border-radius:24px;padding:16px;text-align:center;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.pro-promo-icon{font-size:28px;margin-bottom:6px}
.pro-promo-title{font-family:'Unbounded',sans-serif;font-weight:800;font-size:14px;background:linear-gradient(135deg,var(--pro),var(--pro2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.pro-promo-sub{font-size:11px;color:var(--muted);margin-bottom:10px;line-height:1.5}
.pro-promo-btn{display:inline-block;padding:8px 18px;background:linear-gradient(135deg,var(--pro),var(--pro2));border:none;border-radius:9px;color:#000;font-family:'Unbounded',sans-serif;font-weight:800;font-size:11px;cursor:pointer;transition:transform .15s}
.pro-promo-btn:hover{transform:scale(1.04)}

/* ─── ЛЕНТА С ПОСТАМИ ────────────────────────────── */
.feed-wrap{flex:1;overflow-y:auto;scroll-snap-type:y mandatory;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;touch-action:pan-y}
.feed-wrap::-webkit-scrollbar{display:none}
.feed-item{flex-shrink:0;height:100dvh;scroll-snap-align:start;position:relative;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.feed-media{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.feed-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 45%,transparent 75%);z-index:1;pointer-events:none}
.feed-bottom{position:absolute;bottom:0;left:0;right:76px;padding:16px 14px 22px;z-index:2}
.feed-author{display:flex;align-items:center;gap:8px;margin-bottom:8px;cursor:pointer;padding:8px 10px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));backdrop-filter:blur(20px);width:max-content;max-width:100%;border:1px solid rgba(255,255,255,.14)}
.feed-author-av{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1px solid rgba(255,255,255,.6);flex-shrink:0}
.feed-author-name{font-weight:700;font-size:14px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.feed-desc{font-size:13px;line-height:1.5;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.6)}
.feed-right{position:absolute;right:10px;bottom:70px;display:flex;flex-direction:column;gap:16px;align-items:center;z-index:2}
.feed-action{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.feed-action-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06));backdrop-filter:blur(24px) saturate(170%);display:flex;align-items:center;justify-content:center;font-size:20px;transition:transform .15s,background .2s;border:1px solid rgba(255,255,255,.16);color:#fff;box-shadow:var(--glass-inner)}
.feed-action-btn:hover,.feed-action-btn.liked{background:rgba(255,68,136,.3);transform:scale(1.1)}
.feed-action-cnt{font-size:11px;font-weight:700;color:rgba(255,255,255,.8)}
.feed-upload-btn{position:fixed;bottom:90px;right:16px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;cursor:pointer;box-shadow:0 16px 30px rgba(110,68,255,.38), inset 0 1px 0 rgba(255,255,255,.22);z-index:10;transition:transform .15s}
.feed-upload-btn:hover{transform:scale(1.08)}
.feed-sound-btn{position:absolute;top:14px;right:14px;z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(255,255,255,.08));color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;backdrop-filter:blur(18px);box-shadow:var(--glass-inner)}
.feed-sound-btn:hover{transform:scale(1.05)}
.feed-hint{position:absolute;top:14px;left:14px;z-index:3;padding:8px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.14);font-size:11px;font-weight:700;color:#fff;backdrop-filter:blur(18px)}
.feed-locked{position:absolute;inset:0;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;z-index:5}
.feed-lock-icon{font-size:40px}
.feed-lock-text{font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px;text-align:center;padding:0 30px}
.feed-lock-sub{font-size:13px;color:var(--muted);text-align:center;padding:0 30px;line-height:1.5}

/* ─── PRO MODAL ──────────────────────────────── */
.pro-modal-hero{background:linear-gradient(135deg,#1a0d3d,#2d0d1a,#1a1a0d);border-radius:16px;padding:20px;text-align:center;margin-bottom:16px;position:relative;overflow:hidden}
.pro-modal-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(245,197,24,.1),transparent 50%),radial-gradient(circle at 70% 80%,rgba(255,140,0,.08),transparent 50%)}
.pro-stars{font-size:28px;margin-bottom:8px;position:relative}
.pro-modal-title{font-family:'Unbounded',sans-serif;font-weight:800;font-size:20px;background:linear-gradient(135deg,var(--pro),var(--pro2),#fff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;position:relative}
.pro-modal-price{font-family:'Unbounded',sans-serif;font-weight:700;font-size:28px;color:var(--pro);margin:6px 0 2px;position:relative}
.pro-modal-period{font-size:11px;color:var(--muted);position:relative}
.pro-feature{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.pro-feature:last-child{border-bottom:none}
.pro-feature-icon{font-size:18px;flex-shrink:0;margin-top:1px}
.pro-feature-text{flex:1}
.pro-feature-name{font-weight:700;font-size:13px;margin-bottom:2px}
.pro-feature-desc{font-size:11px;color:var(--muted);line-height:1.4}
.pro-qr-wrap{background:var(--s2);border:1px solid var(--border);border-radius:14px;padding:16px;text-align:center;margin:14px 0}
.pro-qr-title{font-weight:700;font-size:13px;margin-bottom:4px}
.pro-qr-sub{font-size:11px;color:var(--muted);margin-bottom:12px;line-height:1.5}
.pro-qr-img{width:160px;height:160px;background:var(--s3);border-radius:10px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);overflow:hidden}
.pro-qr-img img{width:100%;height:100%;object-fit:cover}
.pro-steps{text-align:left;font-size:11px;color:var(--muted);line-height:1.8;padding:0 6px}
.pro-paid-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--pro),var(--pro2));border:none;border-radius:12px;color:#000;font-family:'Unbounded',sans-serif;font-weight:800;font-size:13px;cursor:pointer;transition:transform .15s,box-shadow .2s;margin-top:10px}
.pro-paid-btn:hover{transform:scale(1.02);box-shadow:0 6px 24px rgba(245,197,24,.4)}
.paid-msg-input{width:100%;background:var(--s2);border:1px solid var(--border);border-radius:11px;padding:10px 13px;color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:border-color .2s;margin-top:8px;resize:none}
.paid-msg-input:focus{border-color:var(--pro)}

/* ─── COMMENTS ───────────────────────────────── */
.comments-sheet{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:600;display:flex;align-items:flex-end}
.comments-body{background:var(--s1);border-radius:22px 22px 0 0;width:100%;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
.comments-hdr{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;flex-shrink:0}
.comments-hdr h3{font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;flex:1}
.comments-list{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.comments-list::-webkit-scrollbar{width:3px}
.comment-item{display:flex;gap:9px;align-items:flex-start}
.comment-text{flex:1;font-size:13px;line-height:1.5}
.comment-author{font-weight:700;font-size:11px;color:var(--a1);margin-bottom:2px}
.comment-time{font-size:10px;color:var(--muted);margin-top:2px}
.comments-input-row{padding:10px 12px;border-top:1px solid var(--border);display:flex;gap:8px;flex-shrink:0}
.comments-input-row input{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:9px 12px;color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.comments-input-row input:focus{border-color:var(--a1)}
.comments-input-row button{padding:9px 14px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;border-radius:9px;color:#fff;font-size:12px;font-weight:600;cursor:pointer}

/* ─── MODALS ─────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(8,10,18,.48);display:flex;align-items:center;justify-content:center;z-index:300;backdrop-filter:blur(18px) saturate(150%);padding:16px}
.modal{background:var(--s1);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border:1px solid var(--border2);box-shadow:var(--glass-shadow);border-radius:28px;width:100%;overflow:hidden;max-height:90vh;display:flex;flex-direction:column}
.modal.sm{max-width:360px}.modal.md{max-width:450px}.modal.lg{max-width:540px}
.mhdr{padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:9px;flex-shrink:0}
.mhdr h3{font-family:'Unbounded',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.5px;flex:1}
.mclose{width:30px;height:30px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:15px;transition:all .2s;flex-shrink:0}
.mclose:hover{color:var(--text);border-color:var(--border2);background:rgba(255,255,255,.12)}
.mbody{padding:18px 20px;overflow-y:auto;flex:1}
.mbody::-webkit-scrollbar{width:3px}.mbody::-webkit-scrollbar-thumb{background:var(--border)}
.mfoot{padding:12px 20px;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:7px;flex-shrink:0}
.mbtn{flex:1;padding:11px 12px;border-radius:14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;cursor:pointer;transition:all .2s}
.mbtn.cancel{background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--muted)}.mbtn.cancel:hover{color:var(--text);background:rgba(255,255,255,.12)}
.mbtn.ok{background:linear-gradient(135deg,var(--a1),var(--a2));border:none;color:#fff;box-shadow:0 16px 30px rgba(87,110,255,.24)}.mbtn.ok:hover{transform:translateY(-1px)}

/* avatar picker */
.av-picker{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:14px;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:20px;backdrop-filter:blur(18px)}
.av-prev{width:64px;height:64px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 24px rgba(0,0,0,.18)}
.av-prev img{width:100%;height:100%;object-fit:cover}
.av-prev-letter{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:800;font-size:17px}
.av-pick-btn{padding:8px 13px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;color:var(--text);font-size:12px;font-weight:700;cursor:pointer;transition:all .2s}
.av-pick-btn:hover{background:rgba(255,255,255,.15)}.av-pick-info{font-size:11px;color:var(--muted);margin-top:5px}

/* member list */
.mrow2{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04)}
.mrow2:last-child{border-bottom:none}
.mrole{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;margin-left:auto}
.mrole.admin{background:rgba(110,68,255,.15);color:var(--a1);border:1px solid rgba(110,68,255,.25)}
.mrole.member{background:rgba(255,255,255,.05);color:var(--muted);border:1px solid var(--border)}
.mkick{padding:3px 8px;background:rgba(255,68,136,.1);border:1px solid rgba(255,68,136,.25);border-radius:6px;color:var(--a2);font-size:11px;cursor:pointer;margin-left:4px;transition:all .2s}
.mkick:hover{background:rgba(255,68,136,.2)}
.add-row{display:flex;gap:7px;margin-top:10px}
.add-row input{flex:1;background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:8px 11px;color:var(--text);font-family:'Manrope',sans-serif;font-size:13px;outline:none;transition:border-color .2s}
.add-row input:focus{border-color:var(--a1)}
.add-row button{padding:8px 13px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;border-radius:8px;color:#fff;font-size:12px;font-weight:600;cursor:pointer}

/* PROFILE PANEL */
.pp{position:fixed;top:0;right:0;bottom:0;width:326px;background:var(--s1);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);border-left:1px solid var(--border);box-shadow:-18px 0 48px rgba(0,0,0,.22);z-index:200;transform:translateX(100%);transition:transform .27s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.pp.open{transform:translateX(0)}
.pp-head{padding:16px 16px 14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}
.pp-close{width:30px;height:30px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:14px;transition:all .2s}
.pp-close:hover{color:var(--text);background:rgba(255,255,255,.12)}
.pp-body{flex:1;overflow-y:auto;padding:22px 18px}
.pp-body::-webkit-scrollbar{width:3px}.pp-body::-webkit-scrollbar-thumb{background:var(--border)}
.pp-wall{position:relative;height:118px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.24);background:#fff;margin-bottom:14px;box-shadow:0 10px 24px rgba(0,0,0,.12);cursor:crosshair}
.pp-wall.blocked{cursor:not-allowed;filter:saturate(.82) brightness(.96)}
.pp-wall-top{position:absolute;left:8px;top:8px;z-index:3;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.72);color:#fff;font-size:10px;font-weight:700;pointer-events:none}
.pp-wall-tip{position:absolute;right:8px;bottom:8px;z-index:3;padding:4px 8px;border-radius:999px;background:rgba(20,20,20,.72);color:#fff;font-size:10px;font-weight:700;pointer-events:none}
.pp-wall-svg{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2}
.pp-wall-path{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:stroke}
.pp-wall-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#777;font-size:12px;font-weight:700;z-index:1;pointer-events:none}
.wall-tooltip{position:fixed;z-index:1200;padding:6px 9px;border-radius:10px;background:rgba(0,0,0,.78);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:11px;font-weight:700;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s}
.wall-tooltip.show{opacity:1;transform:translateY(0)}
.wall-paint-wrap{display:flex;flex-direction:column;gap:10px}
.wall-paint-canvas-wrap{background:#fff;border-radius:14px;border:1px solid rgba(255,255,255,.16);padding:8px}
.wall-paint-canvas{width:100%;height:220px;display:block;background:#fff;border-radius:9px;touch-action:none;cursor:crosshair}
.wall-paint-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.wall-color{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.2);cursor:pointer}
.wall-color.active{outline:2px solid var(--a1)}
.wall-size{width:110px}
.wall-clear-btn{padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:var(--text);font-size:11px;font-weight:700;cursor:pointer}
.pp-av{width:84px;height:84px;border-radius:50%;margin:0 auto 14px;overflow:hidden;border:1px solid rgba(255,255,255,.18);box-shadow:0 16px 30px rgba(0,0,0,.2)}
.pp-av img{width:100%;height:100%;object-fit:cover}
.pp-av-l{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-weight:800;font-size:20px}
.pp-name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:16px;text-align:center;letter-spacing:-.5px}
.pp-nick{font-size:12px;color:var(--a1);text-align:center;margin-top:2px;font-weight:700}
.pp-status{font-size:12px;color:var(--text);text-align:center;margin-top:8px;padding:7px 11px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.pp-bio{font-size:12px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.6;padding:0 6px}
.pp-online{font-size:11px;margin-top:2px;text-align:center}
.pp-online.on{color:var(--a3)}.pp-online.off{color:var(--muted)}
.pp-acts{display:flex;gap:7px;margin-top:12px}
.pp-act{flex:1;padding:11px 10px;border-radius:14px;font-family:'Manrope',sans-serif;font-weight:700;font-size:12px;cursor:pointer;text-align:center;transition:all .2s;border:none;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.pp-act.p{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff}
.pp-act.s{background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--muted)}.pp-act.s:hover{color:var(--text);background:rgba(255,255,255,.12)}
.pp-div{height:1px;background:var(--border);margin:13px 0}
.pp-fl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.pp-val{font-size:13px;color:var(--text)}
.pp-stat{display:flex;gap:8px;margin:12px 0}
.pp-stat-item{text-align:center;flex:1;background:rgba(255,255,255,.07);border:1px solid var(--border);border-radius:16px;padding:11px 6px;backdrop-filter:blur(18px)}
.pp-stat-n{font-family:'Unbounded',sans-serif;font-weight:700;font-size:15px}
.pp-stat-l{font-size:9px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.4px}
.pp-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:9px}
.pp-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);font-size:11px;color:var(--text);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-chip.link{text-decoration:none;color:var(--a1)}
.pp-progress{margin-top:10px;padding:9px 10px;border-radius:13px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.pp-progress-top{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--muted);margin-bottom:7px}
.pp-progress-track{height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.pp-progress-track span{display:block;height:100%;border-radius:999px;background:linear-gradient(135deg,var(--a1),var(--a2))}
.pp-posts-wrap{margin-top:12px;padding:12px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px)}
.pp-posts-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px}
.pp-posts-title{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.pp-posts-add{padding:7px 11px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-size:11px;font-weight:800;cursor:pointer}
.pp-posts-list{display:flex;flex-direction:column;gap:9px}
.pp-post-item{padding:9px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.pp-post-media{width:100%;max-height:170px;border-radius:11px;overflow:hidden;background:#000;margin-bottom:7px}
.pp-post-media img,.pp-post-media video{width:100%;height:100%;object-fit:cover;display:block}
.pp-post-caption{font-size:12px;line-height:1.5;color:var(--text);word-break:break-word}
.pp-post-meta{margin-top:5px;font-size:10px;color:var(--muted)}
.pp-post-actions{display:flex;gap:7px;margin-top:7px}
.pp-post-btn{flex:1;padding:7px 9px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:var(--text);font-size:11px;font-weight:700;cursor:pointer}
.pp-post-btn.danger{border-color:rgba(255,68,136,.28);color:var(--a2);background:rgba(255,68,136,.08)}
.pp-posts-empty{font-size:12px;color:var(--muted);text-align:center;padding:12px}
.rating-panel{margin-top:12px;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(20px);box-shadow:var(--glass-inner)}
.rating-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:6px}
.rating-sub{font-size:11px;color:var(--muted);line-height:1.5}
.rating-stars{display:flex;gap:8px;margin-top:12px}
.rating-star{flex:1;min-width:0;height:38px;border:none;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);color:var(--muted);font-size:15px;font-weight:800;cursor:pointer;transition:all .18s;backdrop-filter:blur(18px)}
.rating-star:hover{transform:translateY(-1px);color:var(--text);border-color:rgba(255,255,255,.2)}
.rating-star.active{background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;border-color:transparent;box-shadow:0 12px 24px rgba(87,110,255,.22)}
.rating-note{font-size:11px;color:var(--muted);margin-top:10px}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:rgba(18,18,28,.8);backdrop-filter:blur(18px);border:1px solid var(--border2);border-left:3px solid var(--a1);border-radius:16px;padding:10px 14px;font-size:13px;animation:tin .3s ease;z-index:999;max-width:250px;pointer-events:none;box-shadow:0 18px 36px rgba(0,0,0,.2)}
.toast-name{font-weight:700;margin-bottom:2px;color:var(--a1);font-size:11px}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.94);display:flex;align-items:center;justify-content:center;z-index:1000;cursor:zoom-out}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:10px}
#fileInput,#avInput,#avInputGrp,#storyInput,#feedInput,#videoInput,#fileAttachInput{display:none}
.lock-pip{position:absolute;top:-2px;right:-2px;font-size:8px;background:var(--s1);border-radius:50%;line-height:1;pointer-events:none}
/* === ADDITIONS === */
/* #20 prevent iOS zoom */
input,textarea,select{font-size:16px!important}
/* #2 unread badge */
.unread-dot{min-width:18px;height:18px;border-radius:9px;background:var(--a1);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
/* #16 message context menu */
.msg-ctx{position:fixed;background:var(--s1);border:1px solid var(--border2);border-radius:14px;padding:5px;display:flex;flex-direction:column;gap:1px;box-shadow:0 8px 32px rgba(0,0,0,.65);z-index:900;min-width:190px;animation:pop .15s ease}
.msg-ctx-item{display:flex;align-items:center;gap:10px;padding:9px 14px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:500;transition:background .15s;white-space:nowrap}
.msg-ctx-item:hover{background:var(--s2)}
.msg-ctx-item.danger{color:var(--a2)}
.msg-ctx-sep{height:1px;background:var(--border);margin:3px 0}
/* #15 poll vote button */
.poll-vote-btn{display:block;width:100%;margin-top:8px;padding:8px;background:linear-gradient(135deg,var(--a1),var(--a2));border:none;border-radius:9px;color:#fff;font-family:'Unbounded',sans-serif;font-weight:700;font-size:12px;cursor:pointer;transition:transform .15s}
.poll-vote-btn:hover{transform:scale(1.02)}
/* #4 feed sound button */
.feed-sound-btn{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:rgba(0,0,0,.55);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;z-index:5;color:#fff}
/* #12 story viewer full screen fix */
.story-viewer{position:fixed;inset:0;background:#000;z-index:500;display:flex;flex-direction:column;overflow:hidden}
.sv-media{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:0}
.sv-media img,.sv-media video{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;display:block}
/* #9 feed letterbox */
.feed-item{flex-shrink:0;height:100dvh;scroll-snap-align:start;position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:pan-y}
.feed-media{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* #19 theme toggle */
[data-theme="purple"]{--a1:#76a7ff;--a2:#9d8cff;--bg:#0a0a12;--s1:rgba(18,18,28,.72);--s2:rgba(28,28,42,.6);--s3:rgba(40,40,58,.64);--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.14);--text:#f6f7fb;--muted:rgba(230,233,245,.52);--out-bg:rgba(101,127,255,.22);--out-border:rgba(166,185,255,.24);--in-bg:rgba(255,255,255,.08);--bg-orb-1:rgba(118,167,255,.22);--bg-orb-2:rgba(157,140,255,.18);--bg-orb-3:rgba(100,240,196,.12)}
[data-theme="ocean"]{--a1:#64c7ff;--a2:#58e0df;--bg:#071119;--s1:rgba(10,24,34,.74);--s2:rgba(14,35,48,.62);--s3:rgba(18,45,62,.64);--out-bg:rgba(89,184,255,.22);--out-border:rgba(131,226,255,.26);--bg-orb-1:rgba(100,199,255,.22);--bg-orb-2:rgba(88,224,223,.18);--bg-orb-3:rgba(154,255,236,.12)}
[data-theme="forest"]{--a1:#6ddca4;--a2:#9ef1c8;--bg:#08120d;--s1:rgba(12,27,19,.74);--s2:rgba(17,39,29,.62);--s3:rgba(23,52,39,.64);--out-bg:rgba(68,188,128,.22);--out-border:rgba(126,239,177,.26);--bg-orb-1:rgba(109,220,164,.18);--bg-orb-2:rgba(158,241,200,.14);--bg-orb-3:rgba(115,255,189,.1)}
[data-theme="fire"]{--a1:#ff9c6b;--a2:#ff6d86;--bg:#130907;--s1:rgba(36,16,12,.74);--s2:rgba(49,22,17,.62);--s3:rgba(62,29,22,.66);--out-bg:rgba(255,123,82,.22);--out-border:rgba(255,160,124,.24);--bg-orb-1:rgba(255,156,107,.22);--bg-orb-2:rgba(255,109,134,.18);--bg-orb-3:rgba(255,198,117,.1)}
[data-theme="black"]{--a1:#f2f4f8;--a2:#9ea5b3;--bg:#040404;--s1:rgba(12,12,12,.78);--s2:rgba(22,22,22,.68);--s3:rgba(34,34,34,.72);--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);--text:#fafafa;--muted:rgba(255,255,255,.46);--out-bg:rgba(255,255,255,.12);--out-border:rgba(255,255,255,.18);--in-bg:rgba(255,255,255,.06);--bg-orb-1:rgba(255,255,255,.08);--bg-orb-2:rgba(255,255,255,.05);--bg-orb-3:rgba(255,255,255,.03)}
[data-theme="white"]{--a1:#111111;--a2:#5a5a5a;--bg:#edf1f7;--s1:rgba(255,255,255,.68);--s2:rgba(255,255,255,.58);--s3:rgba(248,249,252,.78);--border:rgba(17,24,39,.08);--border2:rgba(17,24,39,.14);--text:#101418;--muted:rgba(16,20,24,.46);--out-bg:rgba(17,17,17,.08);--out-border:rgba(17,17,17,.12);--in-bg:rgba(255,255,255,.56);--bg-orb-1:rgba(255,255,255,.72);--bg-orb-2:rgba(182,189,199,.26);--bg-orb-3:rgba(255,255,255,.52)}

.settings-card{padding:14px 16px;border-radius:20px;background:rgba(255,255,255,.07);border:1px solid var(--border);backdrop-filter:blur(20px);margin-top:12px}
.settings-title-row{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
.settings-row+.settings-row{border-top:1px solid rgba(255,255,255,.06)}
.settings-copy{flex:1;min-width:0}
.settings-title{font-size:13px;font-weight:700;color:var(--text)}
.settings-sub{font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}
.lang-select{width:150px;background:rgba(255,255,255,.08);border:1px solid var(--border);border-radius:12px;padding:10px 12px;color:var(--text);font-family:var(--font-ui);font-size:12px;outline:none}
.lang-select:focus{border-color:var(--a1)}
.chat-ad-banner{margin:10px 12px 0;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,rgba(245,197,24,.1),rgba(118,167,255,.12),rgba(255,255,255,.05));border:1px solid rgba(245,197,24,.2);display:flex;align-items:center;gap:10px;cursor:pointer;backdrop-filter:blur(18px);box-shadow:var(--glass-inner)}
.chat-ad-banner:hover{transform:translateY(-1px)}
.chat-ad-banner.fade-swap{transition:opacity .6s ease,transform .3s ease}
.chat-ad-icon{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--pro),var(--pro2));display:flex;align-items:center;justify-content:center;color:#000;font-size:18px;font-weight:800;flex-shrink:0}
.chat-ad-copy{flex:1;min-width:0}
.chat-ad-title{font-size:12px;font-weight:800;color:var(--text)}
.chat-ad-sub{font-size:11px;color:var(--muted);line-height:1.45;margin-top:2px}
.chat-ad-cta{padding:7px 11px;border:none;border-radius:10px;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;font-size:11px;font-weight:800;cursor:pointer;flex-shrink:0}
.chat-ad-media{width:72px;height:72px;border-radius:13px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:#000;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.chat-ad-media img,.chat-ad-media video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
.chat-ad-test-note{font-size:10px;color:var(--a4);line-height:1.35;margin-top:4px;opacity:.95}
.typing-indicator{padding:8px 14px 0;display:flex;align-items:center;gap:8px;min-height:28px;color:var(--muted);font-size:11px}
.typing-indicator.hidden{display:none}
.typing-avatar{width:20px;height:20px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:800;border:1px solid rgba(255,255,255,.14);flex-shrink:0}
.typing-dots{display:inline-flex;align-items:center;gap:3px}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:typingBounce 1s infinite}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-3px);opacity:1}}
.theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.theme-option{position:relative;padding:12px;border-radius:18px;border:1px solid var(--border);background:rgba(255,255,255,.06);cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s;overflow:hidden}
.theme-option:hover{transform:translateY(-1px);border-color:var(--border2);box-shadow:0 14px 24px rgba(0,0,0,.12)}
.theme-option.active{border-color:var(--a1);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 18px 34px rgba(0,0,0,.16)}
.theme-option-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.theme-option-name{font-size:12px;font-weight:800}
.theme-option-badge{font-size:10px;font-weight:700;color:var(--muted)}
.theme-option-swatches{display:flex;gap:6px;margin-top:12px}
.theme-option-swatches span{width:26px;height:26px;border-radius:999px;border:1px solid rgba(255,255,255,.18);display:block}
.theme-option.active::after{content:'✓';position:absolute;top:12px;right:12px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--text)}
body.compact-ui .ci{padding:9px 10px;margin:3px 7px}
body.compact-ui .msgs{padding:14px 12px 18px;gap:7px}
body.compact-ui .bbl{padding:9px 12px}
body.compact-ui .mrow{margin-bottom:2px}
body.compact-ui .iarea{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}
body.compact-ui .minput{padding:9px 12px}
body[data-bubble="soft"] .bbl{border-radius:17px}
body[data-bubble="soft"] .mrow.in .bbl{border-bottom-left-radius:8px}
body[data-bubble="soft"] .mrow.out .bbl{border-bottom-right-radius:8px}
body[data-bubble="square"] .bbl{border-radius:12px}
body[data-bubble="square"] .mrow.in .bbl{border-bottom-left-radius:4px}
body[data-bubble="square"] .mrow.out .bbl{border-bottom-right-radius:4px}
/* Loading skeleton */
.loading-msg{text-align:center;padding:24px;color:var(--muted);font-size:13px;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:1}}
/* Toggle switch */
.tog{position:relative;width:44px;height:24px;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-slider{position:absolute;inset:0;background:var(--border2);border-radius:12px;cursor:pointer;transition:.3s}
.tog-slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s}
.tog input:checked+.tog-slider{background:var(--a1)}
.tog input:checked+.tog-slider:before{transform:translateX(20px)}


/* BACK BTN */
.back-btn{display:none;width:30px;height:30px;background:var(--s2);border:1px solid var(--border);border-radius:8px;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);font-size:19px;flex-shrink:0;transition:all .2s}

/* BOTTOM NAV */
.bnav{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(12,18,24,.78);backdrop-filter:blur(24px) saturate(155%);border-top:1px solid var(--border);z-index:50;height:calc(62px + env(safe-area-inset-bottom))}
.bnav-items{display:flex;height:100%;padding-bottom:env(safe-area-inset-bottom)}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px 0 8px;cursor:pointer;color:var(--muted);font-size:8px;font-weight:700;gap:2px;transition:color .2s;text-transform:uppercase;letter-spacing:.3px}
.bnav-item.active{color:var(--a1)}.bnav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:0;line-height:0;letter-spacing:0}
.bnav-item.pro-nav{color:var(--pro)}.bnav-item.pro-nav.active{color:var(--pro)}

/* ─── PAYMENT TAB ────────────────────────────── */
.pay-wrap{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:14px}
.pay-wrap::-webkit-scrollbar{width:3px}
.pay-hero{background:linear-gradient(135deg,rgba(68,255,187,.12),rgba(255,255,255,.06),rgba(255,140,0,.08));border:1px solid rgba(255,255,255,.14);border-radius:26px;padding:20px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(26px);box-shadow:var(--glass-inner)}
.pay-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0%,rgba(68,255,187,.07),transparent 60%)}
.pay-hero-icon{font-size:32px;margin-bottom:8px;position:relative}
.pay-hero-title{font-family:'Unbounded',sans-serif;font-weight:800;font-size:18px;margin-bottom:5px;position:relative}
.pay-hero-sub{font-size:12px;color:var(--muted);line-height:1.6;position:relative}
.pay-phone-card{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.pay-phone-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.pay-phone-num{font-family:'Unbounded',sans-serif;font-weight:800;font-size:22px;letter-spacing:1px;color:var(--a3);margin-bottom:6px;cursor:pointer;transition:opacity .2s;display:flex;align-items:center;gap:8px}
.pay-phone-num:hover{opacity:.8}
.pay-phone-copy{font-size:11px;color:var(--muted)}
.pay-phone-sbp{display:inline-flex;align-items:center;gap:5px;background:rgba(68,255,187,.08);border:1px solid rgba(68,255,187,.2);border-radius:7px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--a3);margin-top:8px}
.pay-steps{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:14px;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.pay-step{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:13px;line-height:1.5}
.pay-step:last-child{border-bottom:none}
.pay-step-n{width:22px;height:22px;border-radius:50%;background:rgba(110,68,255,.2);border:1px solid rgba(110,68,255,.3);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--a1);flex-shrink:0;margin-top:1px}
.pay-form{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.pay-form-title{font-weight:700;font-size:14px;margin-bottom:2px}
.pay-upload-area{border:1px dashed rgba(255,255,255,.22);border-radius:18px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02))}
.pay-upload-area:hover{border-color:var(--a1);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.pay-upload-area.has-file{border-color:var(--a3);border-style:solid;background:rgba(68,255,187,.04)}
.pay-upload-preview{max-width:100%;max-height:180px;border-radius:8px;display:block;margin:0 auto}
.pay-submit-btn{width:100%;padding:13px;background:linear-gradient(135deg,var(--a3),#00cc88);border:none;border-radius:12px;color:#000;font-family:'Unbounded',sans-serif;font-weight:800;font-size:13px;cursor:pointer;transition:transform .15s,box-shadow .2s}
.pay-submit-btn:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(68,255,187,.3)}
.pay-submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.pay-notice{background:linear-gradient(180deg,rgba(255,170,68,.1),rgba(255,255,255,.04));border:1px solid rgba(255,170,68,.24);border-radius:18px;padding:11px 13px;font-size:12px;color:var(--a4);line-height:1.6;text-align:center;backdrop-filter:blur(18px)}
.pay-success{background:linear-gradient(180deg,rgba(68,255,187,.1),rgba(255,255,255,.04));border:1px solid rgba(68,255,187,.24);border-radius:18px;padding:18px;text-align:center;backdrop-filter:blur(18px)}
.other-top-card{border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:14px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));backdrop-filter:blur(20px)}
.other-top-head{display:flex;align-items:center;gap:10px}
.other-avatar{width:44px;height:44px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid rgba(255,255,255,.16)}
.other-top-main{flex:1;min-width:0}
.other-top-title{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.other-top-sub{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.other-status-pill{font-size:10px;font-weight:700;padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:var(--muted)}
.other-status-pill.pro{color:#000;background:rgba(245,197,24,.9);border-color:rgba(245,197,24,.9)}
.other-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.other-btn{padding:10px 11px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;text-align:center}
.other-btn:hover{background:rgba(255,255,255,.12)}
.other-section-title{font-size:11px;font-weight:800;letter-spacing:.45px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.other-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.other-tile{border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:10px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))}
.other-tile-title{font-size:12px;font-weight:700}
.other-tile-sub{font-size:11px;color:var(--muted);line-height:1.5;margin-top:3px}
.other-link-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:var(--text);font-size:12px;font-weight:700;text-decoration:none;cursor:pointer}
.other-link-btn:hover{background:rgba(255,255,255,.13)}
.other-link-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

/* ─── ADMIN PANEL ────────────────────────────── */
.admin-req{background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:12px;margin-bottom:10px;backdrop-filter:blur(20px);box-shadow:var(--glass-inner)}
.admin-req-hdr{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.admin-req-nick{font-weight:700;font-size:13px}
.admin-req-time{font-size:10px;color:var(--muted);margin-left:auto}
.admin-req-screen{max-width:100%;border-radius:8px;cursor:zoom-in;margin:6px 0}
.admin-req-acts{display:flex;gap:6px}
.admin-approve{flex:1;padding:8px;background:linear-gradient(135deg,var(--a3),#00cc88);border:none;border-radius:8px;color:#000;font-weight:700;font-size:12px;cursor:pointer}
.admin-reject{flex:1;padding:8px;background:rgba(255,68,136,.1);border:1px solid rgba(255,68,136,.25);border-radius:8px;color:var(--a2);font-weight:700;font-size:12px;cursor:pointer}

/* ─── REACTIONS ──────────────────────────────── */
.react-bar{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px}
.react-chip{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:3px 9px;font-size:12px;cursor:pointer;transition:all .15s;user-select:none;backdrop-filter:blur(18px)}
.react-chip:hover{border-color:var(--a1);background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.07))}
.react-chip.mine{background:linear-gradient(180deg,rgba(120,152,255,.22),rgba(255,255,255,.08));border-color:rgba(174,194,255,.22)}
.react-chip-cnt{font-size:11px;color:var(--muted)}
.react-picker{position:absolute;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05)),var(--s1);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:8px;display:flex;gap:4px;box-shadow:0 18px 36px rgba(0,0,0,.18);z-index:100;animation:pop .15s ease;backdrop-filter:blur(24px)}
.react-emoji{font-size:20px;cursor:pointer;padding:3px 5px;border-radius:8px;transition:transform .1s}
.react-emoji:hover{transform:scale(1.3)}
.msg-react-btn{opacity:0;font-size:13px;cursor:pointer;padding:2px 5px;transition:opacity .2s;color:var(--muted)}
.mwrap:hover .msg-react-btn{opacity:1}
.msg-more-btn{
  font-size:13px;cursor:pointer;padding:3px 7px;border-radius:6px;
  color:var(--muted);transition:all .15s;font-weight:700;letter-spacing:1px;
  opacity:0;user-select:none;flex-shrink:0;
}
.mwrap:hover .msg-more-btn{opacity:1}
@media(max-width:900px){.msg-more-btn{opacity:.5}} /* всегда видна на мобильном */
.msg-more-btn:hover,.msg-more-btn:active{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));color:var(--text);opacity:1}
/* Затемнение фона под меню */
.msg-ctx-backdrop{position:fixed;inset:0;z-index:889;background:rgba(0,0,0,.3)}
/* Меню — снизу экрана как bottom sheet */
.msg-ctx{
  position:fixed;bottom:0;left:0;right:0;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)),var(--s1);border:1px solid rgba(255,255,255,.14);
  border-radius:20px 20px 0 0;
  padding:8px 6px 24px;
  display:flex;flex-direction:column;gap:2px;
  box-shadow:0 -8px 40px rgba(0,0,0,.3);
  z-index:890;
  animation:slideUp .22s cubic-bezier(.4,0,.2,1);
  max-height:70vh;overflow-y:auto;
  backdrop-filter:blur(28px) saturate(170%);
}
@media(min-width:600px){
  .msg-ctx{
    position:fixed;bottom:auto;left:auto;right:auto;
    border-radius:14px;
    padding:5px;
    min-width:210px;
    max-height:none;
    animation:pop .15s ease;
  }
}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.msg-ctx-handle{width:36px;height:4px;background:var(--border2);border-radius:2px;margin:4px auto 10px;flex-shrink:0}
.msg-ctx-item{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-radius:11px;
  cursor:pointer;font-size:14px;font-weight:500;
  transition:background .12s;white-space:nowrap;
}
.msg-ctx-item:hover,.msg-ctx-item:active{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))}
.msg-ctx-item.danger{color:var(--a2)}
.msg-ctx-item .ctx-icon{font-size:18px;width:24px;text-align:center;flex-shrink:0}
.msg-ctx-item .ctx-locked{font-size:11px;margin-left:auto;opacity:.5}
.msg-ctx-sep{height:1px;background:var(--border);margin:4px 10px}

/* ─── POLLS ──────────────────────────────────── */
.poll-bbl{background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:13px;min-width:220px;backdrop-filter:blur(22px);box-shadow:var(--glass-inner)}
.mrow.out .poll-bbl{background:linear-gradient(135deg,rgba(120,152,255,.24),rgba(255,255,255,.08));border-color:rgba(174,194,255,.22)}
.poll-q{font-weight:700;font-size:13px;margin-bottom:10px}
.poll-opt{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;border:1px solid var(--border);margin-bottom:5px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.poll-opt:hover{border-color:var(--a1)}.poll-opt.voted{border-color:var(--a1);background:rgba(110,68,255,.08)}
.poll-opt.pending{border-color:var(--a1);background:rgba(110,68,255,.06)}
.poll-fill{position:absolute;left:0;top:0;bottom:0;background:rgba(110,68,255,.12);transition:width .4s ease;z-index:0}
.poll-opt-text{position:relative;z-index:1;font-size:13px;flex:1}
.poll-opt-pct{position:relative;z-index:1;font-size:11px;font-weight:700;color:var(--a1)}
.poll-total{font-size:10px;color:var(--muted);margin-top:6px;text-align:right}

/* ─── FOLDERS ────────────────────────────────── */
.folders-row{display:flex;gap:6px;padding:9px 10px;overflow-x:auto;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(255,255,255,.04),transparent)}
.folders-row::-webkit-scrollbar{display:none}
.folder-chip{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;border:1px solid rgba(255,255,255,.14);color:var(--muted);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.04));backdrop-filter:blur(18px)}
.folder-chip.active{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border-color:rgba(255,255,255,.18);color:var(--text)}
.folder-chip:hover{border-color:rgba(255,255,255,.18);color:var(--text)}

/* ─── VANISH MESSAGES ────────────────────────── */
.bbl.vanish{border-style:dashed;opacity:.85}
.vanish-timer{font-size:9px;color:var(--a2);margin-top:2px}

/* RESPONSIVE */
/* Narrow desktop: sidebar shrinks, main always usable */
@media(max-width:1100px){.sidebar{width:200px;min-width:180px}}
@media(max-width:900px){.sidebar{width:245px;min-width:245px}.mwrap{max-width:min(360px,75vw)}.pp{width:280px}}
@media(max-width:900px){.stabs{display:none!important}}
@media(min-width:601px) and (max-width:900px){
  #app{height:100vh;padding-bottom:calc(62px + env(safe-area-inset-bottom))}
  .bnav{display:block}
  .bnav-item{font-size:9px;padding:7px 0 10px}
  .bnav-icon{font-size:12px}
  .sidebar,.main{height:100%;min-height:0}
  .pp{bottom:calc(62px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(72px + env(safe-area-inset-bottom))}
}
/* FIX #13: very narrow windows - sidebar collapses fully */
@media(max-width:700px) and (min-width:601px){
  .sidebar{width:56px;min-width:56px}
  .sidebar .ci-info,.sidebar .ci-time,.sidebar .sbar,.sidebar .new-btn,.sidebar .stabs,.sidebar .stories-row,.sidebar .unread-dot{display:none!important}
  .sidebar .ci{padding:5px;justify-content:center}
  .sidebar .av{flex-shrink:0}
  .bnav{display:none}
}
@media(max-width:600px){
  .auth-card{padding:24px 16px;border-radius:18px}
  #auth{padding:14px}
  .auth-tabs{margin-bottom:18px}
  .auth-tab{padding:10px 6px}
  .fi{font-size:16px}

  /* App layout */
  #app{position:fixed;inset:0;overflow:hidden}

  /* Sidebar - full screen on mobile */
  .sidebar{
    position:fixed;top:0;left:0;right:0;bottom:0;
    width:100%;min-width:unset;z-index:10;
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    padding-bottom:calc(68px + env(safe-area-inset-bottom));
    display:flex;flex-direction:column;
  }
  .sidebar.slide-out{transform:translateX(-100%)}

  /* Main panel - full screen, slides in from right */
  .main{
    position:fixed;top:0;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));
    z-index:20;
    transform:translateX(100%);
    transition:transform .28s cubic-bezier(.4,0,.2,1);
    background:var(--bg);
    overflow:hidden;display:flex;flex-direction:column;
  }
  .main.slide-in{transform:translateX(0)}

  /* Feed full screen on mobile - overrides main */
  .main.feed-mode{
    transform:translateX(0) !important;
    z-index:30;
  }
  .sidebar.feed-mode{transform:translateX(-100%) !important}

  /* Profile panel */
  .pp{width:100%;z-index:250}

  /* Back button */
  .back-btn{display:flex}

  /* Bottom nav */
  .bnav{display:block}

  /* Messages */
  .ch{padding:calc(9px + env(safe-area-inset-top)) 11px 9px;gap:8px}
  .logo{padding:calc(9px + env(safe-area-inset-top)) 10px 10px}
  .msgs{padding:11px 10px}
  .mwrap{max-width:82vw}
  .bbl{font-size:13px}
  .iarea{padding:7px 9px;gap:6px}
  .ia-tools{gap:6px}
  .ia-compose{gap:6px}
  .minput{font-size:16px;padding:9px 11px}
  .sendbtn{width:36px;height:36px}
  .ibt{width:34px;height:34px}

  /* Toast above bottom nav */
  .toast{bottom:calc(72px + env(safe-area-inset-bottom));right:8px;left:8px;max-width:unset}
  .img-bbl{max-width:63vw}
  .stab{font-size:9px;padding:8px 2px}

  /* Feed height */
  .feed-item{height:calc(100dvh - 62px - env(safe-area-inset-bottom));scroll-snap-align:start}
  .feed-wrap{height:calc(100dvh - 62px - env(safe-area-inset-bottom))}

  /* Pay/PRO tab full screen on mobile */
  .pay-wrap{padding:14px 12px}

  /* Overlay/modal on mobile */
  .overlay{padding:8px;align-items:flex-end}
  .modal{border-radius:18px 18px 0 0;max-height:95vh}
  .modal.sm,.modal.md,.modal.lg{max-width:100%}
  .other-actions{grid-template-columns:1fr}
  .other-grid{grid-template-columns:1fr}
}

/* Цитата ответа внутри пузыря */
.reply-quote{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-left:3px solid var(--a1);border-radius:14px;padding:7px 10px;margin-bottom:6px;cursor:pointer;max-width:100%;backdrop-filter:blur(20px);box-shadow:var(--glass-inner)}
.reply-quote-sender{font-size:11px;font-weight:700;color:var(--a1);margin-bottom:2px}
.reply-quote-text{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
/* Панель «Отвечаем на:» над инпутом */
.reply-bar{display:flex;align-items:center;gap:8px;padding:9px 13px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));border-top:1px solid rgba(255,255,255,.08);font-size:12px;flex-shrink:0;backdrop-filter:blur(22px)}
.reply-bar-left{border-left:3px solid var(--a1);padding:3px 8px;flex:1;min-width:0}
.reply-bar-sender{font-weight:700;color:var(--a1);font-size:11px;display:flex;align-items:center;gap:6px}
.reply-bar-text{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-bar-close{width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;flex-shrink:0;color:var(--muted);border:1px solid rgba(255,255,255,.12)}
.reply-bar-close:hover{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));color:var(--text)}
/* Панель редактирования над инпутом */
.edit-bar{display:flex;align-items:center;gap:8px;padding:9px 13px;background:linear-gradient(180deg,rgba(120,152,255,.18),rgba(255,255,255,.05));border-top:1px solid rgba(174,194,255,.22);font-size:12px;flex-shrink:0;backdrop-filter:blur(22px)}
.edit-bar-text{flex:1;color:var(--muted)}
.edit-bar span{color:var(--a1);font-weight:700}

/* ─── CLEAN VISUAL STYLE ─────────────────────── */
body.clean-ui{
  --bg:#0f131a;
  --s1:rgba(19,25,36,.9);
  --s2:rgba(26,34,46,.85);
  --s3:rgba(33,43,58,.82);
  --border:rgba(255,255,255,.12);
  --border2:rgba(255,255,255,.18);
  --a1:#5f9ad7;
  --a2:#6f90c2;
  --a3:#55b486;
  --a4:#d0a36a;
  --a5:#d17964;
  --glass:blur(12px) saturate(112%);
  --glass-shadow:0 10px 26px rgba(0,0,0,.24);
  --bg-orb-1:transparent;
  --bg-orb-2:transparent;
  --bg-orb-3:transparent;
  --glass-fill:rgba(255,255,255,.06);
  --glass-edge:rgba(255,255,255,.14);
  --glass-inner:none;
}
body.clean-ui{background:var(--bg)}
body.clean-ui::before{display:none}
body.clean-ui .sidebar,
body.clean-ui .ch,
body.clean-ui .iarea,
body.clean-ui .auth-card,
body.clean-ui .pro-promo,
body.clean-ui .pay-hero,
body.clean-ui .pay-phone-card,
body.clean-ui .pay-steps,
body.clean-ui .pay-form,
body.clean-ui .admin-req,
body.clean-ui .inst-hero,
body.clean-ui .inst-card,
body.clean-ui .call-panel,
body.clean-ui .ci.active,
body.clean-ui .pinned-bar,
body.clean-ui .story-ring{
  box-shadow:none!important;
}
body.clean-ui .abtn,
body.clean-ui .sendbtn,
body.clean-ui .call-panel-btn,
body.clean-ui .actn.primary,
body.clean-ui .pay-submit-btn,
body.clean-ui .inst-btn,
body.clean-ui .new-btn{
  background:#4d78aa!important;
}
body.clean-ui .pro-badge{background:#e1b75a}
body.clean-ui .mrow.out .bbl{background:rgba(95,136,190,.24);border-color:rgba(147,183,230,.28)}
body.clean-ui .mrow.in .bbl{background:rgba(255,255,255,.09)}

/* ═══════════════════════════════════════════════════════════
   ASSIST: иконки-глифы, переключатель режимов, тема режима B
   ═══════════════════════════════════════════════════════════ */
.gi{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex:none}

/* Переключатель режимов (экран входа/регистрации) */
.mode-switch{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.05);border:1px solid var(--border);border-radius:16px;padding:5px;margin-bottom:10px}
.mode-seg{flex:1 1 0;min-width:0;padding:9px 10px;border:none;background:transparent;color:var(--muted);font-family:var(--font-ui);font-size:13px;font-weight:700;border-radius:12px;cursor:pointer;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mode-seg.active{background:var(--glass-fill);color:var(--text);box-shadow:var(--glass-inner),0 8px 18px rgba(0,0,0,.18)}
.mode-rename-btn{flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--muted);border-radius:11px;cursor:pointer;transition:all .2s}
.mode-rename-btn:hover{color:var(--text);background:rgba(255,255,255,.08)}
.mode-rename-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode-rename{display:flex;gap:8px;margin-bottom:10px}
.mode-rename .fi{margin-bottom:0}
.mode-ok{flex:none;padding:0 16px;border:1px solid var(--glass-edge);background:var(--glass-fill);color:var(--text);font-weight:700;border-radius:14px;cursor:pointer;font-size:13px}
.mode-hint{font-size:11px;color:var(--muted);text-align:center;line-height:1.5;margin-bottom:18px}

/* Иконка поиска в боковом поиске */
.sbar{position:relative}
.sbar-icon{position:absolute;left:24px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;z-index:1}
.sbar input{padding-left:36px!important}
.empty-icon .gi{stroke:#fff}
.new-btn .gi,.logout-btn .gi,.inst-close .gi,.pp-close .gi,.ch-act .gi{flex:none}

/* ═══ РЕЖИМ B — другой облик (своя палитра) ═══ */
body.mode-b{
  --a1:#ff4d5e;--a2:#ff7a5c;--a3:#ff9f7a;--a4:#ffd166;--a5:#ff8b6b;
  --out-bg:rgba(255,77,94,.20);--out-border:rgba(255,150,140,.28);
  --bg-orb-1:rgba(255,77,94,.20);
  --bg-orb-2:rgba(255,99,99,.15);
  --bg-orb-3:rgba(255,140,110,.10);
}
body.mode-b .auth-logo,body.mode-b .splash-brand,body.mode-b .logo-text{font-family:var(--font-brand)}

/* Режим B: перекрасить плоские кнопки/пузыри clean-ui в зелёный */
body.clean-ui.mode-b .abtn,
body.clean-ui.mode-b .sendbtn,
body.clean-ui.mode-b .call-panel-btn,
body.clean-ui.mode-b .actn.primary,
body.clean-ui.mode-b .pay-submit-btn,
body.clean-ui.mode-b .inst-btn,
body.clean-ui.mode-b .new-btn{background:#e23b4e!important}
body.clean-ui.mode-b .mrow.out .bbl{background:rgba(255,77,94,.22)!important;border-color:rgba(255,150,140,.28)!important}

/* Звонки: иконочные контролы видео + панель */
.call-video-btn{width:40px;min-width:40px;height:40px;padding:0;display:flex;align-items:center;justify-content:center}
.call-video-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;display:block}
.call-video-btn.active{background:var(--a1);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.call-panel-btn{display:flex;align-items:center;justify-content:center;gap:7px}

/* ═══════════════════════════════════════════════════════════
   ASSIST FEATURES — оформление, замок, удобство
   ═══════════════════════════════════════════════════════════ */
/* Панель оформления */
.assist-accent-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.assist-accent{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:0 4px 10px rgba(0,0,0,.25);position:relative;transition:transform .15s}
.assist-accent:hover{transform:scale(1.08)}
.assist-accent.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--text)}
.assist-accent-custom{display:inline-flex;align-items:center;justify-content:center;background:conic-gradient(from 0deg,#ff5d8f,#ffce6a,#3ddc97,#5fd0e6,#76a7ff,#9d8cff,#ff5d8f);overflow:hidden}
.assist-accent-custom input[type=color]{opacity:0;width:30px;height:30px;border:none;cursor:pointer}
.assist-seg-row{display:flex;gap:6px;flex-wrap:wrap}
.assist-seg{flex:1 1 auto;min-width:64px;padding:9px 10px;border-radius:12px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--muted);font-family:var(--font-ui);font-size:12.5px;font-weight:700;cursor:pointer;transition:all .18s}
.assist-seg:hover{color:var(--text);border-color:var(--border2)}
.assist-seg.active{background:var(--glass-fill);color:var(--text);border-color:transparent;box-shadow:var(--glass-inner)}
.assist-toggle-list{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.assist-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 2px;border-bottom:1px solid rgba(255,255,255,.05);cursor:pointer}
.assist-toggle:last-child{border-bottom:none}
.assist-toggle-txt{display:flex;flex-direction:column;gap:2px}
.assist-toggle-txt b{font-size:13px;font-weight:600;color:var(--text)}
.assist-toggle-txt i{font-size:11px;font-style:normal;color:var(--muted);line-height:1.4}
.assist-toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid var(--border2);position:relative;cursor:pointer;flex:none;transition:background .2s}
.assist-toggle input[type=checkbox]::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.assist-toggle input[type=checkbox]:checked{background:linear-gradient(135deg,var(--a1),var(--a2))}
.assist-toggle input[type=checkbox]:checked::after{transform:translateX(18px)}
.assist-sec-divider{margin:18px 0 8px;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.assist-note{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:10px}

/* Замок устройства */
.assist-lock{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(8,8,16,.86);backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%)}
.assist-lock-card{width:min(360px,100%);background:var(--s1);border:1px solid var(--border2);border-radius:26px;padding:30px 26px;text-align:center;box-shadow:var(--glass-shadow)}
.assist-lock-mark{width:54px;height:54px;margin:0 auto 12px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-weight:800;font-size:20px;color:#fff;background:linear-gradient(135deg,var(--a1),var(--a2))}
.assist-lock-title{font-family:var(--font-brand);font-weight:800;font-size:22px;letter-spacing:-1px;background:linear-gradient(135deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.assist-lock-sub{font-size:12px;color:var(--muted);margin-bottom:18px}
.assist-lock-err{font-size:12px;color:var(--a5);min-height:16px;margin-top:8px}

/* Тёплый фильтр (ночной свет) */
#assistWarmOverlay{position:fixed;inset:0;z-index:99990;pointer-events:none;background:rgba(255,170,80,.10);mix-blend-mode:multiply}

/* Спокойный фон — меньше свечения */
body.calm-bg{--bg-orb-1:rgba(118,167,255,.05);--bg-orb-2:rgba(157,140,255,.04);--bg-orb-3:rgba(100,240,196,.03)}

/* Меньше анимаций */
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.05s!important}

/* Приватный экран / скрытые превью */
body.privacy-blur .msgs{filter:blur(9px);transition:filter .18s}
body.privacy-blur .msgs:hover{filter:none}
body.list-blur .ci-info{filter:blur(5px);transition:filter .15s}
body.list-blur .ci:hover .ci-info,body.list-blur .ci.active .ci-info{filter:none}

/* Кнопка «вниз» */
.assist-scrollbtn{position:fixed;right:18px;bottom:96px;width:42px;height:42px;border-radius:50%;border:1px solid var(--border2);background:var(--s1);backdrop-filter:blur(18px);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 12px 28px rgba(0,0,0,.32);opacity:0;transform:translateY(8px) scale(.9);pointer-events:none;transition:all .18s;z-index:900}
.assist-scrollbtn.show{opacity:1;transform:none;pointer-events:auto}
.assist-scrollbtn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Быстрые ответы / клавиши */
.assist-chips{display:flex;flex-direction:column;gap:8px}
.assist-chip{text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);font-size:13.5px;cursor:pointer;transition:all .15s}
.assist-chip:hover{border-color:var(--a1);background:rgba(255,255,255,.09)}
.assist-keys{display:flex;flex-direction:column;gap:8px}
.assist-key-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--text)}
.assist-key-row kbd{flex:none;min-width:96px;text-align:center;padding:6px 8px;border-radius:9px;border:1px solid var(--border2);background:rgba(255,255,255,.06);font-family:var(--font-brand);font-size:11.5px;color:var(--muted)}

/* Drag & drop подсветка */
body.assist-dragging::after{content:'Отпустите файл — отправлю в открытый чат';position:fixed;inset:14px;z-index:99980;border:2px dashed var(--a1);border-radius:24px;display:flex;align-items:center;justify-content:center;font-family:var(--font-brand);font-weight:700;font-size:15px;color:var(--text);background:rgba(10,12,22,.55);backdrop-filter:blur(6px);pointer-events:none}

/* Выбранный акцент перекрывает плоский clean-ui (кнопки/пузыри следуют акценту) */
body.assist-accent-on.clean-ui .abtn,
body.assist-accent-on.clean-ui .sendbtn,
body.assist-accent-on.clean-ui .call-panel-btn,
body.assist-accent-on.clean-ui .actn.primary,
body.assist-accent-on.clean-ui .pay-submit-btn,
body.assist-accent-on.clean-ui .inst-btn,
body.assist-accent-on.clean-ui .new-btn{background:linear-gradient(135deg,var(--a1),var(--a2))!important}
body.assist-accent-on.clean-ui .mrow.out .bbl{background:var(--out-bg)!important;border-color:var(--out-border)!important}

/* «Показать пароль и код» на экране входа */
.pw-show{display:flex;align-items:center;gap:8px;margin:-2px 0 12px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
.pw-show input{width:16px;height:16px;accent-color:var(--a1);cursor:pointer;flex:none}

/* Единый стиль кнопок FiRE Portal: чёрный фон, белый текст, оранжевая обводка */
.fire-portal-btn{
  width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#000;color:#fff;border:2px solid #ff5a26;border-radius:12px;
  padding:13px 16px;font-family:inherit;font-size:14px;font-weight:600;
  text-decoration:none;cursor:pointer;transition:.15s}
.fire-portal-btn:hover{background:#111;border-color:#ff7a4d}
.fire-portal-logo{width:22px;height:22px;border-radius:5px;object-fit:cover;flex:none}