:root{
  --bg:#ffffff; --fg:#000000; --muted:#6b6b6b; --line:#e6e6e6;
  --card:#ffffff; --hover:#f2f2f2; --accent:#000000; --accent-fg:#ffffff;
  --danger:#b00000; --page:#ececed; --radius:18px; --maxw:1180px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0c0c0c; --fg:#ffffff; --muted:#9a9a9a; --line:#242424;
    --card:#0c0c0c; --hover:#181818; --accent:#ffffff; --accent-fg:#000000;
    --danger:#ff6b6b; --page:#000000; --shadow:0 1px 3px rgba(0,0,0,.5); }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
html{scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.35) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(128,128,128,.35);border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(128,128,128,.6);background-clip:padding-box}
body{background:var(--page);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;font-size:15px;line-height:1.45}
#app{min-height:100%}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:14px;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--fg);
  border-radius:999px;padding:9px 16px;transition:background .15s,border-color .15s,opacity .15s}
button:hover{background:var(--hover)}
button.primary{background:#ffffff;color:#000000;border-color:var(--line);font-weight:600}
button.primary:hover{background:var(--hover)}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:var(--hover)}
button:disabled{opacity:.45;cursor:default}
input,textarea{font-family:inherit;font-size:15px;width:100%;background:var(--bg);color:var(--fg);
  border:1px solid var(--line);border-radius:12px;padding:11px 13px;outline:none}
input:focus,textarea:focus{border-color:var(--fg)}
textarea{resize:vertical;min-height:44px}
a{color:inherit}
.muted{color:var(--muted)}
[hidden]{display:none!important}
.hidden{display:none !important}
.row{display:flex;align-items:center;gap:10px}
.spacer{flex:1}
.center{display:flex;align-items:center;justify-content:center}

/* ---------- AUTH ---------- */
.auth{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
.auth .box{width:100%;max-width:360px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:32px 26px;box-shadow:var(--shadow)}
.auth .logo{font-size:30px;font-weight:800;letter-spacing:-1px;text-align:center;margin-bottom:6px}
.auth .sub{text-align:center;color:var(--muted);margin-bottom:24px}
.auth form{display:flex;flex-direction:column;gap:12px}
.auth .switch{text-align:center;margin-top:16px;color:var(--muted)}
.auth .switch b{color:var(--fg);cursor:pointer}
.err{color:var(--danger);font-size:13px;min-height:16px}
.google-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#333;border:1px solid #dadce0;border-radius:8px;padding:10px 16px;font-weight:500;margin-bottom:16px}
.google-btn:hover{background:#f8f9fa;border-color:#c2c8d0}
.google-btn svg{flex:none}
.divider{text-align:center;color:var(--muted);font-size:13px;margin:16px 0;position:relative}
.divider::before{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:var(--line);z-index:0}
.divider::after{content:attr(data-text);position:relative;background:var(--bg);padding:0 8px;z-index:1}

/* ---------- LAYOUT ---------- */
.layout{display:flex;height:100%;width:100%}
.sidebar{display:none}
.shell{display:flex;flex-direction:column;height:100%;flex:1;min-width:0;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--line);background:var(--bg);min-height:56px}
.topbar .title{font-weight:700;font-size:17px}
.topbar > .title{position:absolute;left:50%;transform:translateX(-50%);font-size:22px;font-weight:800;letter-spacing:-.3px;
  max-width:60%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* Safe-area top padding for iPhone notch on the shell topbar */
#topbar{padding-top:calc(12px + env(safe-area-inset-top))}
.view{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
/* Mobile bottom tab bar — Telegram iOS floating capsule, mobile only.
   Detached glass pill with the main tabs + separate round glass button
   (opens the Ещё menu). Theme-aware: light/dark glass. */
.tabbar,.tabbar-more-popup{
  --tb-bg:rgba(248,248,248,.82);
  --tb-bg-solid:#f2f2f2;
  --tb-fg:#0f0f0f;
  --tb-line:rgba(0,0,0,.10);
  --tb-active:#3390EC;
  --tb-active-pill:rgba(0,0,0,.07);
  --tb-press:rgba(0,0,0,.06);
  --tb-shadow:0 10px 34px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: dark){
  .tabbar,.tabbar-more-popup{
    --tb-bg:rgba(28,28,30,.78);
    --tb-bg-solid:#1c1c1e;
    --tb-fg:#ffffff;
    --tb-line:rgba(255,255,255,.08);
    --tb-active:#5EA8EE;
    --tb-active-pill:rgba(255,255,255,.13);
    --tb-press:rgba(255,255,255,.10);
    --tb-shadow:0 10px 34px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3);
  }
}
/* container: transparent strip that holds the pill + the round button */
.tabbar{
  position:fixed;
  left:max(12px, env(safe-area-inset-left));
  right:max(12px, env(safe-area-inset-right));
  bottom:calc(14px + env(safe-area-inset-bottom));
  z-index:50;
  display:none;
  flex-direction:row;
  align-items:stretch;
  gap:10px;
  background:transparent;
  border:none;
  padding:0;
}
/* the floating capsule with tabs */
.tabbar-pill{
  flex:1;
  min-width:0;
  display:flex;
  align-items:stretch;
  justify-content:space-around;
  gap:0;
  padding:5px;
  background:var(--tb-bg);
  backdrop-filter:blur(34px) saturate(1.7);
  -webkit-backdrop-filter:blur(34px) saturate(1.7);
  border:.5px solid var(--tb-line);
  border-radius:999px;
  box-shadow:var(--tb-shadow);
}
.tabbar button{
  border:none;
  border-radius:999px;
  background:transparent;
  padding:5px 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:var(--tb-fg);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.1px;
  position:relative;
  transition:color .15s,background .18s;
  flex:1;
  max-width:110px;
  min-height:50px;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.tabbar button:hover{background:transparent}
/* active tab sits inside its own lighter pill, like Telegram */
.tabbar button.active{color:var(--tb-active);font-weight:600;background:var(--tb-active-pill)}
.tabbar button:active .material-symbols-outlined{transform:scale(.86)}
/* solid (filled) glyphs like Telegram's tab icons */
.tabbar button .material-symbols-outlined{
  font-size:26px;
  line-height:1;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1);
}
.tabbar button.active .material-symbols-outlined{
  animation:tb-bounce .32s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tb-bounce{0%{transform:scale(1)}45%{transform:scale(1.18)}100%{transform:scale(1)}}
.tabbar button > span:not(.nav-badge){display:block;line-height:1.1}
/* Unread badge over the icon's top-right corner, with a cut-out ring like Telegram */
.tabbar .nav-badge{
  position:absolute;top:2px;left:50%;right:auto;margin-left:6px;transform:none;
  border:none;box-shadow:0 0 0 2px var(--tb-bg-solid);
}
/* Detached round glass button — opens the Ещё menu (like Telegram's search circle) */
.tabbar .more-btn{
  flex:none;
  align-self:center;
  width:60px;
  height:60px;
  min-height:0;
  max-width:none;
  padding:0;
  border-radius:50%;
  background:var(--tb-bg);
  backdrop-filter:blur(34px) saturate(1.7);
  -webkit-backdrop-filter:blur(34px) saturate(1.7);
  border:.5px solid var(--tb-line);
  box-shadow:var(--tb-shadow);
  flex-direction:row;
  align-items:center;
  justify-content:center;
  color:var(--tb-fg);
}
.tabbar .more-btn:hover{background:var(--tb-bg)}
.tabbar .more-btn:active{background:var(--tb-bg)}
.tabbar .more-btn .material-symbols-outlined{font-size:26px}
.tabbar .more-btn.active{color:var(--tb-active);background:var(--tb-bg)}
.tabbar .more-btn > span:not(.material-symbols-outlined){display:none}

/* "More" menu — Telegram-style floating glass menu,
   springs out above the round button */
.tabbar-more-popup{
  position:fixed;
  left:auto;right:max(12px, env(safe-area-inset-right));
  bottom:calc(88px + env(safe-area-inset-bottom));
  z-index:55;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  min-width:210px;
  max-width:75vw;
  padding:5px 0;
  background:var(--tb-bg);
  backdrop-filter:blur(34px) saturate(1.7);
  -webkit-backdrop-filter:blur(34px) saturate(1.7);
  border:.5px solid var(--tb-line);
  box-shadow:var(--tb-shadow);
  border-radius:16px;
  transform-origin:bottom right;
  opacity:0;
  transform:scale(.72) translateY(10px);
  pointer-events:none;
  visibility:hidden;
  transition:opacity .16s ease,transform .24s cubic-bezier(.34,1.4,.64,1),visibility 0s linear .25s;
}
.tabbar-more-popup.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;visibility:visible;
  transition:opacity .16s ease,transform .24s cubic-bezier(.34,1.4,.64,1),visibility 0s}
.tabbar-more-popup button{
  border:none;
  border-radius:0;
  background:transparent;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:14px;
  color:var(--tb-fg);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:background .12s;
  -webkit-tap-highlight-color:transparent;
}
.tabbar-more-popup button + button{border-top:.5px solid var(--tb-line)}
.tabbar-more-popup button:hover{background:var(--tb-press)}
.tabbar-more-popup button:active{background:var(--tb-press)}
.tabbar-more-popup button .material-symbols-outlined{font-size:22px;color:var(--tb-inactive)}
.tabbar-more-popup button.active{color:var(--tb-active)}
.tabbar-more-popup button.active .material-symbols-outlined{color:var(--tb-active);font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24}

/* Show tabbar only on mobile (sidebar handles desktop) */
@media (max-width:999px){
  .tabbar{display:flex}
  /* v32q: an open chat owns the whole screen — hide shell chrome under it
     (also works around iOS 27 beta compositing tabbar/topbar above the overlay) */
  body.chat-open-m #topbar{display:none}
  body.chat-open-m .tabbar{display:none}
  body.chat-open-m .tabbar-more-popup{display:none}
}

/* ---------- AVATAR ---------- */
.av{border-radius:50%;background:var(--fg);color:var(--bg);display:flex;align-items:center;justify-content:center;
  font-weight:700;flex:none;overflow:hidden;text-transform:uppercase}
.av img{width:100%;height:100%;object-fit:cover}

/* ---------- FEED ---------- */
.composer{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);margin:12px}
.composer .row-top{display:flex;gap:10px}
.composer textarea{border:none;padding:6px 0;min-height:40px}
.composer .thumbs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0 46px}
.composer .thumb{position:relative;width:76px;height:76px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.composer .thumb img{width:100%;height:100%;object-fit:cover}
.composer .thumb .x{position:absolute;top:2px;right:2px;background:rgba(0,0,0,.6);color:#fff;border:none;
  width:22px;height:22px;border-radius:50%;padding:0;font-size:13px;line-height:22px}
.composer .actions{display:flex;align-items:center;gap:8px;margin-top:10px;padding-left:46px}

.post{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);margin:12px;transition:border-color .15s,box-shadow .15s}
.post .head{display:flex;gap:10px;align-items:center}
.post .who{display:flex;flex-direction:column;line-height:1.2}
.post .who .nm{font-weight:600;cursor:pointer}
.post .who .un{color:var(--muted);font-size:13px;cursor:pointer}
.post .time{color:var(--muted);font-size:12px}
.post .body{margin:8px 0 0 0;white-space:pre-wrap;word-break:break-word}
.post .imgs{margin-top:10px;display:grid;gap:4px;border-radius:12px;overflow:hidden}
.post .imgs.n1{grid-template-columns:1fr}
.post .imgs.n2{grid-template-columns:1fr 1fr}
.post .imgs.n3,.post .imgs.n4{grid-template-columns:1fr 1fr}
.post .imgs img{width:100%;height:100%;max-height:420px;object-fit:cover;cursor:pointer}
.post .foot{display:flex;align-items:center;gap:6px;margin-top:10px;color:var(--muted);flex-wrap:wrap}
.post .foot button{border:none;background:transparent;padding:4px 2px;color:var(--muted);border-radius:8px;display:inline-flex;align-items:center;gap:5px;transition:color .12s,background .12s}
.post .foot button:hover{background:var(--hover);color:var(--fg)}
.post .foot button.liked{color:var(--fg);font-weight:700}
.post .foot .material-symbols-outlined{font-size:19px}

/* ---------- LISTS ---------- */
.list-item{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.list-item:hover{background:var(--hover)}
.list-item .meta{flex:1;min-width:0}
.list-item .meta .t{font-weight:600;display:flex;align-items:center;gap:6px}
.list-item .meta .s{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{font-size:11px;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--muted)}
.section-title{padding:14px 16px 6px;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}

/* ---------- CHATS SEARCH (list-col header) ---------- */
.chats-search{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.chats-search input{background:var(--hover);border:1px solid transparent;border-radius:999px;padding:9px 14px;font-size:14px;width:100%}
.chats-search input:focus{background:var(--bg);border-color:var(--line)}
.chats-section{padding:10px 16px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:600}

/* ---------- CHAT ---------- */
.chatpane{display:flex;flex-direction:column;height:100%;overflow:hidden}
.msgs{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.msg{max-width:80%;padding:8px 12px;border-radius:16px;border:1px solid var(--line);background:var(--card);align-self:flex-start;word-break:break-word}
.msg.mine{align-self:flex-end;background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.msg .a{font-size:12px;color:var(--muted);margin-bottom:2px;font-weight:600}
.msg.mine .a{display:none}
.msg .tm{font-size:10px;opacity:.6;margin-top:2px;text-align:right}
.chat-input{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--bg)}
.chat-input textarea{min-height:42px;max-height:120px}
.notice{padding:12px 16px;text-align:center;color:var(--muted);font-size:13px;border-top:1px solid var(--line)}

/* ---------- PROFILE ---------- */
.profile-head{padding:22px 16px 18px;border-bottom:8px solid var(--page);text-align:center}
.profile-head .av{margin:0 auto 12px}
.profile-head .nm{font-size:22px;font-weight:800}
.profile-head .un{color:var(--muted);margin-top:2px}
.profile-head .bio{margin:12px auto 0;max-width:460px;white-space:pre-wrap}
.profile-head .stats{display:flex;justify-content:center;gap:26px;margin:16px 0 4px}
.profile-head .stats .stat{padding:6px 10px;border-radius:10px;cursor:default;min-width:60px}
.profile-head .stats .stat.clickable{cursor:pointer;transition:background .12s}
.profile-head .stats .stat.clickable:hover{background:var(--hover)}
.profile-head .stats .n{font-weight:800;font-size:17px}
.profile-head .stats .l{color:var(--muted);font-size:12px}
.profile-head .btns{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.linkbox{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px;color:var(--muted);font-size:13px}
.linkbox code{background:var(--hover);padding:3px 8px;border-radius:8px;color:var(--fg)}

/* ---------- MODAL ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal{background:var(--bg);border:1px solid var(--line);border-radius:16px;width:100%;max-width:420px;max-height:90vh;overflow-y:auto;padding:20px;box-shadow:var(--shadow);transition:opacity .15s}
.modal h3{margin:0 0 16px}
.modal .field{margin-bottom:14px}
.modal .field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.modal .foot{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.seg{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.seg button{flex:1;border:none;border-radius:0;background:transparent}
.seg button.active{background:var(--accent);color:var(--accent-fg)}
.avatar-edit{display:flex;align-items:center;gap:14px;margin-bottom:16px}

/* ---------- LIGHTBOX ---------- */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain}

/* ---------- REACTIONS ---------- */
.reacts{display:flex;flex-wrap:wrap;gap:4px}
.reacts:empty{display:none}
.react-chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:2px 8px;font-size:13px;line-height:1.4}
.react-chip.on{border-color:var(--fg);background:var(--hover);font-weight:700}
.msg.mine .react-chip{background:var(--bg);color:var(--fg)}
.msg-foot{margin-top:2px}
.cbtn{border:none;background:transparent;color:var(--muted);padding:2px 4px;font-size:12px;border-radius:8px}
.cbtn:hover{background:var(--hover)}
.msg.mine .cbtn{color:var(--accent-fg);opacity:.85}
.mtext{white-space:pre-wrap;word-break:break-word}

/* ---------- ICONS (Google Material Symbols) ---------- */
.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  font-size:20px;line-height:1;vertical-align:middle;user-select:none;flex:none}
.like.liked .material-symbols-outlined{font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24}

/* ---------- NAV BADGE ---------- */
.nav-badge{background:#ff3b30;color:#fff;font-size:10px;font-weight:700;min-width:16px;height:16px;
  border-radius:999px;display:inline-flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;border:1.5px solid rgba(28,28,30,.92)}

/* ---------- NOTIFICATIONS ---------- */
.notif{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .12s}
.notif:hover{background:var(--hover)}
.notif.unread{background:var(--hover)}
.notif .ni{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center}
.notif .ni .material-symbols-outlined{font-size:18px}
.notif .meta{flex:1;min-width:0}
.notif .meta .t{line-height:1.35}
.notif .meta .s{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif .meta .tm{font-size:12px;margin-top:2px}

/* ---------- CONTEXT MENU ---------- */
.ctx-menu{position:fixed;z-index:400;background:var(--bg);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:6px;min-width:190px;display:flex;flex-direction:column;gap:2px}
.ctx-emojis{display:flex;gap:2px;padding:2px 2px 6px;border-bottom:1px solid var(--line);margin-bottom:4px}
.ctx-emojis button{flex:1;border:none;background:transparent;border-radius:10px;padding:6px 0;font-size:19px}
.ctx-emojis button:hover{background:var(--hover)}
.ctx-item{border:none;background:transparent;border-radius:10px;text-align:left;padding:9px 12px;font-size:14px}
.ctx-item:hover{background:var(--hover)}
.ctx-item.danger{color:var(--danger)}

/* ---------- COMMENTS ---------- */
.cmlist{max-height:52vh;overflow-y:auto;margin-bottom:12px;display:flex;flex-direction:column;gap:12px}
.cm{display:flex;gap:10px;align-items:flex-start}
.cm-body{min-width:0}
.cm-text{white-space:pre-wrap;word-break:break-word;margin-top:1px}
.cm-input{display:flex;gap:8px;align-items:flex-end}
.cm-input textarea{min-height:42px;max-height:120px}

/* ================= DESKTOP ================= */
@media (min-width:1000px){
  /* symmetric 3-column grid: sidebar | content | mirror spacer.
     Content is visually centered on the viewport. */
  .layout{max-width:1200px;margin:0 auto;padding:16px;min-height:100vh;height:auto;
    display:grid;grid-template-columns:208px minmax(0,1fr) 208px;gap:20px;align-items:start}
  /* Chats view: wider layout so two-pane chats aren't cramped */
  body.view-chats .layout{max-width:1400px}
  body.view-chats .shell{max-width:1000px}
  /* sidebar as a compact floating rounded panel, hugging the left */
  .sidebar{display:flex;flex-direction:column;grid-column:1;width:208px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;
    background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
    padding:14px 10px;box-shadow:var(--shadow)}
  .sidebar .brand{font-size:17px;font-weight:800;letter-spacing:-.3px;padding:6px 12px 18px;line-height:1.2;border-bottom:1px solid var(--line);margin-bottom:14px}
  /* v32.7h: main nav is now visually separated from the brand block with a
     divider and a small top offset so it reads as its own group. */
  .sidebar nav{display:flex;flex-direction:column;gap:4px;padding-top:4px}
  .sidebar nav button{display:flex;align-items:center;gap:12px;justify-content:flex-start;
    border:none;border-radius:12px;background:transparent;padding:12px 14px;font-size:15px;color:var(--fg);width:100%}
  .sidebar nav button:hover{background:var(--hover)}
  .sidebar nav button.active{background:var(--accent);color:var(--accent-fg);font-weight:600}
  .sidebar nav .ic{font-size:18px;width:20px;text-align:center}
  .sidebar .me-card{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;cursor:pointer;border:1px solid var(--line)}
  .sidebar .me-card:hover{background:var(--hover)}
  .sidebar .me-card .info{min-width:0;line-height:1.2}
  .sidebar .me-card .info .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sidebar .me-card .info .un{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* main content has NO panel: flush, no border/shadow.
     Content lives in the center grid column and never exceeds 600px. */
  .shell{grid-column:2;justify-self:center;width:100%;max-width:600px;
    border:none;border-radius:0;overflow:visible;box-shadow:none;background:transparent;height:auto;min-height:calc(100vh - 32px)}
  .tabbar{display:none}
  .topbar{background:var(--page);border-bottom:none;padding-left:4px;padding-right:4px}
  .view{overflow:visible;flex:1 1 auto}
  /* .view children fill the shell width (already 600px) */
  .view > .composer{margin-top:14px}
  .notif{border-radius:14px}

  /* chats: two-pane card, Telegram-style */
  body.view-chats .shell{max-width:1180px;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;background:var(--bg);height:calc(100vh - 32px);min-height:0;max-height:calc(100vh - 32px);box-shadow:var(--shadow)}
  body.view-chats .shell > .topbar{background:var(--bg);border-bottom:1px solid var(--line);padding-left:16px;padding-right:16px;flex:none}
  body.view-chats .view{overflow:hidden;flex:1;min-height:0;padding:0}
  .chats-split{display:flex;height:100%;overflow:hidden}
  .chats-split .list-col{width:340px;flex:none;border-right:1px solid var(--line);overflow:hidden;background:var(--card);
    display:flex;flex-direction:column;min-height:0}
  .chats-split .list-col #convList{flex:1;min-height:0;overflow-y:auto}
  .chats-split .chat-col{flex:1;min-width:0;background:var(--bg);display:flex;flex-direction:column;overflow:hidden;min-height:0;position:relative}
  .chats-split .chat-col:empty::before{content:'Выберите чат слева, чтобы начать переписку';
    display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted);font-size:14px;text-align:center;padding:20px}
  .chats-split .chatpane{height:100%;display:flex;flex-direction:column;min-height:0}
  .chats-split .chatpane > .topbar{position:sticky;top:0;background:var(--bg);z-index:5;flex:none;
    border-bottom:1px solid var(--line);padding:10px 16px;min-height:60px}
  .chats-split .chatpane > .topbar > .title{position:static;transform:none;font-size:15px;font-weight:600;text-align:left;max-width:none;pointer-events:auto}
  .chats-split .chatpane .msgs{flex:1;min-height:0;overflow-y:auto;background:var(--bg);padding:16px 20px}
  .chats-split .chatpane .chat-input,
  .chats-split .chatpane .notice{flex:none;border-top:1px solid var(--line);background:var(--bg)}
  .chatpane .topbar #backBtn{display:none}
}

@media (max-width:999px){
  .chats-split{height:100%}
  .chats-split .list-col{height:100%;overflow-y:auto;display:flex;flex-direction:column;min-height:0}
  .chats-split .list-col #convList{flex:1;min-height:0;overflow-y:auto}
  /* Full-screen overlay for open chat on mobile */
  .chats-split .chat-col{position:fixed;inset:0;z-index:100;background:var(--bg);display:none;flex-direction:column;min-height:0}
  .chats-split.chat-open .chat-col{display:flex}
  .chats-split.chat-open .list-col{display:none}
  /* Chatpane fills the overlay */
  .chats-split .chatpane{flex:1;display:flex;flex-direction:column;height:100%;min-height:0}
  .chats-split .chatpane > .topbar{position:sticky;top:0;background:var(--bg);z-index:5;flex:none;
    padding-top:calc(12px + env(safe-area-inset-top));border-bottom:1px solid var(--line);min-height:60px}
  .chats-split .chatpane > .topbar > .who .title{font-size:15px;font-weight:600}
  .chats-split .chatpane > .topbar #backBtn{display:inline-flex}
  .chats-split .chatpane .msgs{flex:1;min-height:0;overflow-y:auto;padding:14px 14px 8px}
  .chats-split .chatpane .chat-input{flex:none;padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .chats-split .chatpane .notice{flex:none;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  /* Lock background scroll while chat is open */
  body:has(.chats-split.chat-open){overflow:hidden}
}

/* ==================== MUSIC TAB ==================== */

/* ==================== MUSIC TAB ==================== */
/* v32.7c: music view is FULL-WIDTH (nav moved into main sidebar via #sidebarExtras). */
.m-layout{display:block;max-width:none;margin:0;padding:14px 22px 140px}
.m-main{min-width:0}
/* v28: music side-bar redesigned as horizontal pill nav */
/* v32.7h: .m-side sits below the main nav inside the sidebar; give it a
   clearer visual break (bigger top margin + thicker divider). */
.m-side{display:flex;flex-direction:column;gap:6px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);position:relative}
.m-side-hdr{padding:0 4px 6px;margin:0;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.m-side-hdr img,.m-side-hdr .m-sc-ph{flex:none;width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--hover);color:var(--fg);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.m-sc-me{display:flex;flex-direction:column;gap:8px;width:100%;padding:10px;border-radius:12px;background:var(--hover);cursor:pointer;transition:background .12s}
.m-sc-me:hover{background:rgba(255,255,255,.08)}
.m-sc-me-row{display:flex;align-items:center;gap:8px;width:100%}
.m-sc-name{flex:1;min-width:0;line-height:1.15}
.m-sc-name>div:first-child{font-size:13px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.m-sc-tag{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sc-stats{display:flex;gap:0;justify-content:space-around;padding-top:6px;border-top:1px solid rgba(255,255,255,.06);width:100%;font-size:11px}
.m-sc-stat{display:flex;flex-direction:column;align-items:center;flex:1;line-height:1.2}
.m-sc-stat-n{font-weight:700;color:var(--fg);font-size:12.5px}
.m-sc-stat-l{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.03em;margin-top:1px}
.m-sc-verified{color:#ff5500;font-size:11px}
.m-sc-unlink{background:transparent;border:none;color:var(--muted);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none}
.m-sc-unlink:hover{background:rgba(255,255,255,.08);color:var(--fg)}
.m-sc-unlink svg{width:14px;height:14px}
.m-sc-connect{width:100%;padding:8px 10px;border:1px dashed var(--line);border-radius:10px;background:transparent;color:var(--fg);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;transition:background .12s,border-color .12s}
.m-sc-connect:hover{background:var(--hover);border-color:var(--fg)}
.m-sc-connect .material-symbols-outlined{font-size:16px}
.m-side .m-nav{display:flex;flex-direction:column;gap:2px}
.m-side .m-nav-item{white-space:nowrap;padding:8px 10px;border:none;border-radius:10px;background:transparent;text-align:left;justify-content:flex-start;font-size:13px;display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--fg);width:100%;transition:background .12s}
.m-side .m-nav-item:hover{background:var(--hover)}
.m-side .m-nav-item.active{background:var(--accent);color:var(--accent-fg);font-weight:600}
.m-side .m-nav-item.active svg{color:var(--accent-fg)}
.m-side .m-nav-item>span{flex:1}
.m-side .m-nav-item svg{width:16px;height:16px;flex:none}
.m-side .m-nav-badge{margin-left:auto;background:var(--hover);color:var(--muted);font-size:10.5px;padding:1px 7px;border-radius:9px;font-weight:600}
.m-side .m-nav-item.active .m-nav-badge{background:rgba(255,255,255,.2);color:var(--accent-fg)}
.m-body{min-width:0}
.m-sc-connect{width:100%;padding:10px 12px;border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--fg);cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;transition:background .12s,border-color .12s}
.m-sc-connect:hover{background:var(--hover);border-color:var(--fg)}
.m-sc-connect .material-symbols-outlined{font-size:18px}
.m-sc-me{display:flex;align-items:center;gap:10px;padding:4px 2px}
.m-sc-me img,.m-sc-me>span{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:var(--hover);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.m-sc-name{flex:1;min-width:0}
.m-sc-name>div:first-child{font-size:13px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-sc-tag{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-sc-unlink{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.m-sc-unlink:hover{background:var(--hover);color:var(--fg)}
.m-sc-unlink svg{width:16px;height:16px}
.m-nav{display:flex;flex-direction:column;gap:2px}
.m-nav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border:none;background:transparent;color:var(--fg);cursor:pointer;border-radius:10px;font-size:13.5px;font-weight:500;text-align:left;transition:background .12s}
.m-nav-item:hover{background:var(--hover)}
.m-nav-item.active{background:var(--hover);font-weight:700}
.m-nav-item svg{width:18px;height:18px;color:var(--muted);flex:none}
.m-nav-item.active svg{color:var(--fg)}
.m-nav-item>span{flex:1}
.m-nav-badge{background:var(--hover);color:var(--muted);font-size:11px;padding:1px 8px;border-radius:10px;font-weight:600}
.m-nav-item.active .m-nav-badge{background:var(--fg);color:var(--bg)}

.m-main{min-width:0}
.m-search-wrap{position:relative;margin:0 0 14px}
.m-search-ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;display:flex}
.m-search-ic svg{width:18px;height:18px}
.m-search{width:100%;padding:12px 14px 12px 42px;border:1px solid var(--line);border-radius:14px;background:var(--card);color:var(--fg);font-size:15px;outline:none;transition:border-color .12s}
.m-search:focus{border-color:var(--fg)}
.m-genres{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.m-chip{padding:7px 13px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);font-size:12.5px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;white-space:nowrap}
.m-chip:hover{background:var(--hover)}
.m-chip.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.m-section{margin:18px 0}
.m-sec-hdr{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 10px;gap:12px}
.m-sec-title{font-size:17px;font-weight:700;color:var(--fg)}
.m-sec-more{background:none;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:0}
.m-sec-more:hover{color:var(--fg)}

.m-carousel{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
/* v28: music card polish */
.m-card{position:relative;background:transparent;cursor:pointer;transition:transform .15s ease,filter .15s ease;padding:6px;border-radius:14px}
.m-card:hover{transform:translateY(-3px);background:var(--hover);filter:brightness(1.05)}
.m-card-art{position:relative;aspect-ratio:1;background:var(--hover);border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.m-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.m-play-fab{position:absolute;right:8px;bottom:8px;width:38px;height:38px;border-radius:50%;background:var(--fg);color:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.35);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.m-play-fab svg{width:16px;height:16px}
.m-card:hover .m-play-fab{opacity:1;transform:translateY(0)}
.m-card-title{margin-top:8px;font-size:13.5px;font-weight:600;color:var(--fg);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.m-card-artist{margin-top:2px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-card.playing .m-card-title{color:var(--accent,var(--fg))}

.m-list{display:flex;flex-direction:column}
.m-row{display:grid;grid-template-columns:32px 44px 1fr auto 32px 46px;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .1s}
.m-row:hover{background:var(--hover)}
.m-row-idx{color:var(--muted);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.m-row-art{width:44px;height:44px;border-radius:8px;background:var(--hover);overflow:hidden;flex:none}
.m-row-art img{width:100%;height:100%;object-fit:cover;display:block}
.m-row-info{min-width:0}
.m-row-title{font-size:13.5px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-row-artist{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.m-row-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}
.m-row-meta svg{width:14px;height:14px;opacity:.7}
.m-row-dur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.m-row.playing{background:var(--hover)}
.m-row.playing .m-row-title{color:var(--fg);font-weight:700}

.m-like{background:none;border:none;padding:6px;border-radius:50%;cursor:pointer;color:var(--muted);display:flex;align-items:center;justify-content:center;transition:color .12s,background .12s;opacity:0}
.m-like svg{width:18px;height:18px}
.m-row:hover .m-like,.m-card:hover .m-like,.m-like.liked{opacity:1}
.m-like:hover{background:var(--hover)}
.m-like.liked{color:#e0245e}
.m-card .m-like{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.55);color:#fff;padding:6px;backdrop-filter:blur(6px)}
.m-card .m-like.liked{color:#ff4d78;background:rgba(0,0,0,.6)}

.m-users{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px}
.m-user{text-align:center;cursor:pointer;padding:6px;border-radius:12px;transition:background .12s}
.m-user:hover{background:var(--hover)}
.m-user-ava{width:96px;height:96px;border-radius:50%;background:var(--hover);margin:0 auto 8px;overflow:hidden;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:28px;color:var(--muted)}
.m-user-ava img{width:100%;height:100%;object-fit:cover;display:block}
.m-user-name{font-size:13px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-verified{color:var(--muted);margin-left:4px;font-size:11px}

.m-back{background:none;border:none;color:var(--muted);cursor:pointer;padding:6px 10px 6px 6px;font-size:13px;display:inline-flex;align-items:center;gap:4px;margin-bottom:10px;border-radius:8px}
.m-back:hover{background:var(--hover);color:var(--fg)}
.m-back svg{width:16px;height:16px}
.m-artist-hdr{display:flex;gap:20px;align-items:flex-end;padding:12px 0 22px;border-bottom:1px solid var(--line);margin-bottom:16px}
.m-artist-ava,.m-pl-cover{width:150px;height:150px;border-radius:12px;overflow:hidden;background:var(--hover);flex:none;display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:700;color:var(--muted)}
.m-artist-ava{border-radius:50%}
.m-artist-ava img,.m-pl-cover img{width:100%;height:100%;object-fit:cover;display:block}
.m-artist-info{flex:1;min-width:0}
.m-artist-name{font-size:32px;font-weight:800;color:var(--fg);line-height:1.1;margin-bottom:6px}
.m-artist-meta{font-size:13px;color:var(--muted)}
.m-artist-desc{margin-top:8px;font-size:13px;color:var(--muted);line-height:1.5;max-height:60px;overflow:hidden}

/* ---- Floating rounded player bar ---- */
/* Player bar: lifted higher, larger square artwork, YT-like round controls */
.m-bar{position:fixed;left:16px;right:16px;bottom:18px;z-index:60;display:none;gap:12px;padding:6px 12px 6px 6px;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 14px 44px rgba(0,0,0,.42),0 3px 10px rgba(0,0,0,.22);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
/* v30: 3-column grid so track info hugs left, controls sit dead-center, volume sticks right */
.m-bar.active{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
.m-bar-left{display:flex;align-items:center;gap:10px;min-width:0;justify-self:start;overflow:hidden}
.m-bar-center{display:flex;align-items:center;gap:4px;justify-self:center}
.m-bar-right{display:flex;align-items:center;gap:6px;justify-self:end;min-width:0}
.m-bar-art{width:44px;height:44px;border-radius:9px;background:#000;overflow:hidden;flex:none;cursor:pointer;position:relative;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.m-bar-art img{width:100%;height:100%;object-fit:cover;display:block}
.m-bar-info{flex:0 1 220px;min-width:0;cursor:pointer;padding-left:2px}
.m-bar-title{font-size:13.5px;font-weight:600;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25}
.m-bar-artist{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
/* v28: compact + always-centered mini-player controls */
.m-bar-like{background:none;border:none;padding:0;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);display:grid;place-items:center;flex:none;transition:color .12s,background .12s,transform .12s;line-height:0}
.m-bar-like svg{width:18px;height:18px;display:block}
.m-bar-like:hover{background:var(--hover);color:var(--fg);transform:scale(1.06)}
.m-bar-like.liked{color:#f0f0f0}
.m-bar-like.liked svg{filter:drop-shadow(0 0 8px rgba(255,255,255,.35))}
.m-bar-ctrls{display:flex;align-items:center;gap:0;flex:none}
.m-bar-spark{background:transparent;border:none;color:#c9c9c9;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .1s,color .1s,transform .1s;flex:none;padding:0;line-height:0}
.m-bar-spark:hover{background:var(--hover);color:#fff;transform:scale(1.06)}
.m-bar-spark svg{width:16px;height:16px;display:block}
.m-bar-btn{background:transparent;border:none;color:#e2e2e2;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .1s,color .1s,transform .1s;flex:none;padding:0;line-height:0}
.m-bar-btn svg{width:18px;height:18px;display:block}
.m-bar-btn:hover{background:var(--hover);color:var(--fg);transform:scale(1.06)}
.m-bar-play{width:36px;height:36px;border-radius:50%;background:var(--fg);color:var(--bg);border:none;cursor:pointer;display:grid;place-items:center;flex:none;transition:transform .1s,box-shadow .12s;box-shadow:0 2px 10px rgba(255,255,255,.12);margin:0 4px;padding:0;line-height:0}
.m-bar-play:hover{transform:scale(1.06);box-shadow:0 4px 14px rgba(255,255,255,.18)}
.m-bar-play svg{width:16px;height:16px;display:block}
/* v30: force geometric centering of every button (SVG + placeholder) across grid cells */
.m-bar > button,.m-bar-ctrls > button,.m-bar-center > button,.m-bar-right > button{display:grid!important;place-items:center!important;padding:0!important;line-height:0!important;align-self:center}
.m-bar > button svg,.m-bar-ctrls > button svg,.m-bar-center > button svg,.m-bar-right > button svg{display:block;margin:0 auto}
/* v25: center every mini-player control svg */
/* v28: legacy override retained (see stronger rule above) */
.m-empty-art{width:100%;height:100%;background:#000;color:#fff;font-weight:800;font-size:18px;letter-spacing:.5px;display:flex;align-items:center;justify-content:center;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.m-card-art .m-empty-art{font-size:26px}
.m-now-art .m-empty-art{font-size:64px}
.m-pl-cover .m-empty-art,.m-artist-ava .m-empty-art{font-size:44px}
/* v22: progress bar is a full-width strip at the very bottom of the mini player */
/* v23: mini-player takes on a color from the cover art via --player-bg */
.m-bar{position:fixed;padding-bottom:10px;background:var(--player-bg,var(--card));color:var(--player-fg,var(--fg));transition:background .3s ease,color .3s ease}
.m-bar-title,.m-bar-artist{color:inherit}
.m-bar-artist{opacity:.75}
.m-bar-btn,.m-bar-spark,.m-bar-like{color:inherit;opacity:.9}
.m-bar-btn:hover,.m-bar-spark:hover,.m-bar-like:hover{background:rgba(255,255,255,.14);opacity:1}
.m-bar[style*='--player-bg'] .m-bar-btn:hover,.m-bar[style*='--player-bg'] .m-bar-spark:hover,.m-bar[style*='--player-bg'] .m-bar-like:hover{background:rgba(0,0,0,.18)}
.m-bar-play{background:var(--player-fg,var(--fg));color:var(--player-bg,var(--bg))}
.m-bar-spacer{display:none}/* v30: superseded by 3-column grid */
.m-bar-times{display:flex;align-items:center;gap:10px;flex:none;margin-left:6px}
.m-bar-time{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:36px;text-align:center;flex:none}
.m-bar-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--line);border-radius:0 0 16px 16px;cursor:pointer;overflow:hidden}
.m-bar-prog::before{content:'';position:absolute;inset:-12px 0 0}
.m-bar-fill{height:100%;background:var(--fg);width:0%;transition:width .1s linear;position:relative}
.m-bar-fill::after{content:'';position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;background:var(--fg);transform:translateY(-50%);opacity:0;transition:opacity .12s}
.m-bar-prog:hover .m-bar-fill::after{opacity:1}
.m-bar-vol{display:flex;align-items:center;gap:6px;color:var(--muted);flex:none}
.m-bar-vol svg{width:18px;height:18px}
.m-bar-vslider{width:80px;accent-color:var(--fg)}

  body.music-active .view{padding-bottom:calc(120px + env(safe-area-inset-bottom))}
.m-bar-btn.active{color:var(--fg);background:var(--hover)}

/* ---- Now Playing side panel ---- */
/* v32.7h: Now-playing side panel — smoother slide-in from the right edge with
   a subtle scale+fade so it feels like it's being pulled onto the screen. */
.m-now{position:fixed;top:14px;bottom:110px;right:-500px;width:440px;max-width:calc(100vw - 28px);background:var(--card);border:1px solid var(--line);border-radius:22px;box-shadow:0 24px 72px rgba(0,0,0,.55);z-index:59;display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateX(24px) scale(.985);transform-origin:right center;pointer-events:none;transition:right .42s cubic-bezier(.22,.85,.28,1.02),opacity .32s ease,transform .42s cubic-bezier(.22,.85,.28,1.02)}
body.now-open .m-now{right:20px;opacity:1;transform:translateX(0) scale(1);pointer-events:auto}
.m-now-close{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.4);border:none;color:#ddd;cursor:pointer;padding:8px;border-radius:50%;display:flex;z-index:2;backdrop-filter:blur(4px)}
.m-now-close:hover{background:rgba(0,0,0,.6);color:#fff}
.m-now-close svg{width:16px;height:16px}
/* v32.7g: Now Playing scroll region is edge-to-edge on the top so the cover art
   touches the sides of the panel (no side padding); horizontal padding starts
   below the cover. */
/* v32.7h: hidden scrollbar in Now Playing (Firefox + WebKit). */
.m-now-scroll{flex:1;overflow-y:auto;padding:0 0 32px;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}
.m-now-scroll::-webkit-scrollbar{width:0;height:0;display:none}
/* v32.7h: safety — hide any leftover "LRCLIB" source tag from older builds. */
.m-now-lyr-src{display:none!important}
.m-now-scroll > .m-now-meta,
.m-now-scroll > .m-now-stats,
.m-now-scroll > .m-now-info,
.m-now-scroll > .m-now-artist-card,
.m-now-scroll > .m-now-related,
.m-now-scroll > .m-now-lyr-card{margin-left:16px;margin-right:16px}
.m-now-scroll > .m-now-meta{margin-top:14px}
.m-now-art{width:100%;aspect-ratio:1;background:var(--hover);border-radius:0;overflow:hidden;margin:0 0 14px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--muted);position:relative}
.m-now-art img{width:100%;height:100%;object-fit:cover;display:block}
.m-now-art-fallback svg{width:80px;height:80px;opacity:.4}
.m-now-meta{flex:none;margin-bottom:14px}
.m-now-title{font-size:19px;font-weight:700;color:var(--fg);line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;letter-spacing:.1px}
.m-now-artist{font-size:13px;color:var(--muted);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-now-user{color:var(--muted);opacity:.75}
.m-now-stats{display:flex;gap:0;flex:none;margin:14px 0 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.m-now-stat{flex:1;text-align:center;position:relative}
.m-now-stat + .m-now-stat::before{content:'';position:absolute;left:0;top:15%;bottom:15%;width:1px;background:var(--line)}
.m-now-stat b{display:block;color:var(--fg);font-size:16px;font-weight:700;letter-spacing:.3px}
.m-now-stat span{display:block;color:var(--muted);font-size:9.5px;text-transform:uppercase;letter-spacing:1.4px;margin-top:2px}
.m-now-info{flex:none;margin-bottom:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.m-now-info-hdr{background:rgba(255,255,255,.02);padding:8px 14px;color:var(--muted);font-size:10px;letter-spacing:2px;text-transform:uppercase;border-bottom:1px solid var(--line)}
.m-now-info-row{display:flex;justify-content:space-between;align-items:center;padding:9px 14px;font-size:12.5px;border-bottom:1px solid rgba(255,255,255,.03)}
.m-now-info-row:last-child{border-bottom:none}
.m-now-info-row > span:first-child{color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;font-size:10.5px}
.m-now-info-row > span:last-child{color:var(--fg);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
/* v32.7g: lyrics card is now tinted with the dominant cover color (--lyr-bg /
   --lyr-fg / --lyr-muted are set by tintLyricsFromArt in app.js). The LRCLIB
   source-tag is removed. Synced lyrics display a rolling 3-line window that
   updates as playback progresses. */
/* v32.7h: bigger lyrics card with smoother tint transition. */
.m-now-lyr-card{flex:none;border-radius:18px;overflow:hidden;background:var(--lyr-bg,rgba(255,255,255,.03));color:var(--lyr-fg,var(--fg));position:relative;transition:background .6s ease,color .6s ease;box-shadow:0 4px 28px rgba(0,0,0,.35);min-height:230px}
.m-now-lyr-card::before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.22));border-radius:inherit}
.m-now-lyr-hdr{display:flex;justify-content:flex-start;align-items:center;padding:14px 20px 4px;position:relative;z-index:1}
.m-now-lyr-hdr > span:first-child{color:var(--lyr-muted,var(--muted));font-size:10px;letter-spacing:2.5px;text-transform:uppercase;opacity:.7}
.m-now-lyrics{padding:10px 20px 24px;position:relative;z-index:1;min-height:190px}
.m-lyr-loading{color:var(--lyr-muted,var(--muted));font-size:12.5px;line-height:1.6;text-align:center;padding:26px 0;opacity:.8}
.m-lyr-plain{color:var(--lyr-fg,var(--fg));font-size:14px;line-height:1.75;white-space:pre-wrap;opacity:.86;max-height:280px;overflow-y:auto;padding-right:6px}
.m-lyr-plain::-webkit-scrollbar{width:5px}
.m-lyr-plain::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px}
/* v32.7h: taller 3-line rolling window with vertical-slide animation between
   lines — old "cur" fades up into "prev" while "next" slides up into "cur". */
.m-lyr-window{display:flex;flex-direction:column;gap:14px;height:190px;justify-content:center;align-items:center;text-align:center;padding:4px 0;perspective:600px}
.m-lyr-w-line{font-size:15px;line-height:1.35;color:var(--lyr-fg,var(--fg));opacity:.35;transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),font-size .5s ease,font-weight .5s ease,filter .5s ease;padding:0 6px;max-width:100%;will-change:transform,opacity;filter:blur(.3px)}
.m-lyr-w-line.cur{opacity:1;font-size:21px;font-weight:800;letter-spacing:.2px;transform:translateY(0) scale(1);filter:blur(0)}
.m-lyr-w-line.prev{opacity:.32;font-size:14px;font-weight:500;transform:translateY(-4px) scale(.95)}
.m-lyr-w-line.next{opacity:.32;font-size:14px;font-weight:500;transform:translateY(4px) scale(.95)}
.m-lyr-w-line.blank{opacity:0}

/* v32.7g: Artist card inside Now Playing — shows if the artist is linked to a
   social-network account. Opens their local profile. */
.m-now-artist-card{margin-top:16px;padding:14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02);display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .12s,border-color .12s}
.m-now-artist-card:hover{background:var(--hover);border-color:var(--muted)}
.m-now-artist-ava{flex:none;width:52px;height:52px;border-radius:50%;background:var(--hover);overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:var(--fg)}
.m-now-artist-ava img{width:100%;height:100%;object-fit:cover;display:block}
.m-now-artist-info{flex:1;min-width:0}
.m-now-artist-info .a-name{font-size:15px;font-weight:700;line-height:1.2;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.m-now-artist-info .a-sub{font-size:11.5px;color:var(--muted);margin-top:3px;text-transform:uppercase;letter-spacing:1.5px}
.m-now-artist-cta{flex:none;font-size:12px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:8px}

/* v32.7g: Related-tracks carousel inside Now Playing panel. */
.m-now-related{margin-top:20px}
.m-now-related-hdr{color:var(--muted);font-size:10px;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:8px;padding-left:2px}
.m-now-related .c-row .m-card{flex:0 0 128px;width:128px;min-width:128px}
.m-now-related .c-row .m-card-title{font-size:12.5px;margin-top:6px}
.m-now-related .c-row .m-card-artist{font-size:11px}

/* ---- Mobile / narrow ---- */
@media (max-width:999px){
  body.view-chats .shell{padding-bottom:0}
  .chats-split.chat-open .chat-col{bottom:0;padding-bottom:0}
  .chats-split.chat-open .composer{margin-bottom:6px}
  /* Mobile: main app sidebar is hidden, so #sidebarExtras isn't visible either.
     Show music sub-nav as a horizontal scrollable pill row INSIDE the music view. */
  .m-layout{padding:10px 12px 220px}
  #sidebarExtras{display:none}
  .m-sc-me{gap:8px}
  .m-sc-me img,.m-sc-me>span{width:28px;height:28px}
  .m-sc-name{max-width:100px}
  .m-artist-hdr{flex-direction:column;align-items:center;text-align:center;gap:12px}
  .m-artist-name{font-size:24px}
  /* v30: on mobile fall back to a flex-wrap layout that keeps controls on their own centered row */
  .m-bar.active{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .m-bar-left{flex:1 1 60%;min-width:0;order:1}
  .m-bar-right{order:2;justify-self:auto;margin-left:auto}
  .m-bar-center{order:3;flex:1 1 100%;justify-content:center;margin-top:2px}
  .m-bar{left:10px;right:10px;bottom:calc(92px + env(safe-area-inset-bottom));border-radius:16px;padding:6px 10px 12px 6px;gap:8px}
  .m-bar-art{width:44px;height:44px;border-radius:9px}
  .m-bar-play{width:44px;height:44px}
  .m-bar-play svg{width:26px;height:26px}
  .m-bar-btn{width:38px;height:38px}
  .m-bar-btn svg{width:26px;height:26px}
  .m-bar-spark{width:36px;height:36px}
  .m-bar-spark svg{width:24px;height:24px}
  .m-bar-like svg{width:24px;height:24px}
  .m-bar-prog{border-radius:0 0 16px 16px}
  .m-bar-info{flex:1;order:1;min-width:0}
  .m-bar-like{order:2}
  .m-bar-times{order:5;flex-basis:100%;min-width:100%;justify-content:space-between;padding:0 2px;margin:2px 0 0}
  .m-bar-ctrls{order:3;margin-left:auto}
  .m-bar-vol,.m-bar-info-btn{display:none}
  body.music-active .view{padding-bottom:calc(175px + env(safe-area-inset-bottom))}
  .m-now{top:0;bottom:0;right:-100%;width:100%;max-width:100%;border-radius:0;padding:14px;padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  body.now-open .m-now{right:0}
  .m-row{grid-template-columns:24px 40px 1fr 28px 42px;gap:8px}
  .m-row-meta{display:none}
}

/* ---- SC connect modal tweak ---- */
.m-sc-modal{max-width:420px;padding:22px}
.m-sc-hero{text-align:center;margin:0 auto 12px;width:64px;height:64px;border-radius:50%;background:var(--hover);display:flex;align-items:center;justify-content:center;color:var(--muted)}
.m-sc-hero svg{width:32px;height:32px}

/* ================= v22 additions ================= */

/* Reactions on posts */
.post .react-bar{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 6px}
.post .react-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:14px;background:var(--hover);border:1px solid var(--line);color:var(--fg);font-size:13px;cursor:pointer;line-height:1;transition:background .12s,border-color .12s,transform .08s}
.post .react-chip .e{font-size:14px}
.post .react-chip .c{font-variant-numeric:tabular-nums;font-size:12px;color:var(--muted)}
.post .react-chip:hover{background:var(--card);transform:translateY(-1px)}
.post .react-chip.mine{border-color:var(--fg);background:var(--card)}
.post .react-chip.mine .c{color:var(--fg);font-weight:700}

/* Repost button state */
.post .foot .rebtn.on{color:var(--fg)}
.post .foot .rebtn.on svg{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}

/* Reaction picker popover */
.react-picker{position:fixed;z-index:9999;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;display:flex;gap:2px;box-shadow:0 12px 32px rgba(0,0,0,.5)}
.react-picker .pick{background:transparent;border:none;border-radius:10px;padding:6px 8px;font-size:22px;line-height:1;cursor:pointer;transition:background .12s,transform .08s}
.react-picker .pick:hover{background:var(--hover);transform:scale(1.15)}

/* Comment replies */
.cm{position:relative}
.cm.reply{margin-left:38px;padding-left:6px;border-left:2px solid var(--line)}
.cm-actions{margin-top:4px}
.cm-reply-btn{background:transparent;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:2px 0}
.cm-reply-btn:hover{color:var(--fg);text-decoration:underline}
.cm-reply-to{font-size:12px;color:var(--muted);margin:2px 0 4px}
.cm-reply-to b{color:var(--fg);font-weight:600}
.cm-reply-ctx:not([hidden]){display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;margin:6px 0 -4px;background:var(--hover);border-radius:10px;font-size:13px;color:var(--muted)}
.cm-reply-ctx button{background:transparent;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:0 4px}
.cm-reply-ctx button:hover{color:var(--fg)}

/* Search tab view */
.search-wrap{padding:16px;max-width:640px;margin:0 auto}
.search-box{position:relative;display:flex;align-items:center;gap:8px;padding:0 12px;background:var(--card);border:1px solid var(--line);border-radius:14px;height:46px}
.search-box .ic{color:var(--muted)}
.search-box input{flex:1;border:none;background:transparent;font-size:15px;padding:8px 0;color:var(--fg);outline:none}
.search-box .clr{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.search-box .clr:hover{background:var(--hover);color:var(--fg)}

/* User list (search results + follow lists) */
.user-list{margin-top:14px;display:flex;flex-direction:column;gap:2px}
.user-list .empty{padding:28px 12px;text-align:center;color:var(--muted)}
.user-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:background .12s}
.user-row:hover{background:var(--hover)}
.user-row .who{min-width:0;flex:1}
.user-row .nm{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row .un{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-row .bio{color:var(--muted);font-size:12.5px;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Follow-list modal specifics */
.user-list.flist{max-height:60vh;overflow-y:auto;margin-top:8px}

@media (max-width:999px){
  .search-wrap{padding:12px}
  .post .foot{flex-wrap:wrap;gap:4px}
}

/* ================= v23 additions ================= */

/* v24 Brand: "безимянный" сверху, "проект." + beta на строке ниже */
.brand-wrap{display:inline-flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1}
.brand-dim{color:var(--muted);font-weight:500;font-size:.85em}
.brand-line2{display:inline-flex;align-items:baseline;gap:8px}
.brand-hi{color:#fff;font-weight:800;letter-spacing:-.01em}
.brand-beta{display:inline-flex;align-items:center;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);padding:1px 5px 2px;border-radius:6px;position:relative;top:-3px}
.auth .logo .brand-wrap{font-size:28px;align-items:center}
.auth .logo .brand-line2{gap:10px}
.sidebar .brand .brand-wrap{font-size:18px}

/* Repost mark on profile */
.post.is-repost{position:relative}
.repost-mark{display:flex;align-items:center;gap:6px;padding:8px 14px 0;color:var(--muted);font-size:12.5px}
.repost-mark .material-symbols-outlined{font-size:16px}
.repost-mark b{color:var(--fg);cursor:pointer;font-weight:600}
.repost-mark b:hover{text-decoration:underline}

/* GIF picker modal */
.gif-search{margin-top:8px}
.gif-search input{width:100%;padding:10px 12px;font-size:15px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--fg);outline:none}
.gif-search input:focus{border-color:var(--fg)}
.gif-grid{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-height:52vh;overflow-y:auto;background:#0a0a0a;padding:6px;border-radius:12px;border:1px solid var(--line)}
.gif-grid .empty{grid-column:1/-1;padding:32px 12px;text-align:center;color:var(--muted)}
.gif-item{position:relative;background:#000;border:none;border-radius:8px;overflow:hidden;padding:0;cursor:pointer;aspect-ratio:1/1;transition:transform .1s}
.gif-item:hover{transform:scale(1.03);outline:2px solid var(--fg)}
.gif-item img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.gif-grid{grid-template-columns:repeat(2,1fr)}}

/* Accent color picker in edit profile */
.accent-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.accent-row input[type=color]{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer}
.accent-swatches{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.accent-swatches .sw{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0;transition:transform .1s,border-color .1s}
.accent-swatches .sw:hover{transform:scale(1.15);border-color:var(--fg)}

/* v24 Site-wide accent theme when viewing a profile with an accent color */
/* Rebind --fg-ish variables so a huge chunk of the UI recolors automatically */
/* v25: DO NOT remap --fg (that made everything unreadable). Instead recolor concrete visible controls. */
body.has-accent .brand-hi{color:var(--accent)!important;text-shadow:0 0 20px var(--accent-soft)}
/* Primary buttons (Редактировать/Подписаться/Отписаться/etc) */
body.has-accent button.primary,
body.has-accent .primary,
body.has-accent .composer .actions .primary{background:#ffffff!important;color:#000000!important;border-color:var(--line)!important;box-shadow:none}
body.has-accent button.primary:hover,body.has-accent .primary:hover{background:var(--hover)!important}
/* Sidebar active tab pill */
body.has-accent .sidebar nav button.active{background:var(--accent)!important;color:var(--accent-fg)!important;border-color:var(--accent)!important}
body.has-accent .tabbar button.active{color:var(--accent)!important;font-weight:500}
body.has-accent .sidebar nav button.active .material-symbols-outlined{color:var(--accent-fg)!important}
/* Bottom me-card avatar ring & border */
body.has-accent .me-card{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-soft)}
body.has-accent .me-card .av,body.has-accent .profile-head .av{box-shadow:0 0 0 3px var(--accent)}
/* Names, links, mentions */
body.has-accent a,
body.has-accent .who .nm,
body.has-accent .post .head .who .nm{color:var(--accent)!important}
/* Likes / repost / reactions accent */
body.has-accent .post .like.liked,
body.has-accent .post .foot .like.liked{color:var(--accent)!important}
body.has-accent .post .foot .rebtn.on,
body.has-accent .post .foot .rebtn:hover{color:var(--accent)!important;background:var(--accent-soft)!important}
body.has-accent .react-chip.mine{border-color:var(--accent)!important;background:var(--accent-soft)!important}
body.has-accent .react-chip.mine .c{color:var(--accent)!important}
/* Profile header */
body.has-accent .profile-head{background:linear-gradient(180deg,var(--accent-soft) 0%,transparent 60%);border-radius:16px;padding-top:22px}
body.has-accent .profile-head .stats .stat.clickable:hover{background:var(--accent-soft)!important}
/* Music side nav */
body.has-accent .m-nav-item.active,
body.has-accent .m-nav-item:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--accent-soft)!important}
/* Comment reply context bar */
body.has-accent .cm-reply-ctx{border-left:3px solid var(--accent)!important}
/* Focused inputs */
body.has-accent input:focus,
body.has-accent textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 2px var(--accent-soft)}
/* Repost mark (badge above reposted post) */
body.has-accent .repost-mark,
body.has-accent .repost-mark b{color:var(--accent)!important}

/* Accent transition */
:root{--accent-transition:color .18s ease,background .18s ease,border-color .18s ease}
.primary,.tabbar button,.sidebar nav button,.brand-hi,a{transition:var(--accent-transition)}

/* v25: inline reactions inside .foot row (like/comment/repost/reactbtn/react-chips all on one line) */

/* Desktop hover effects for posts */
@media (hover:hover){
  .post:hover{border-color:var(--hover)}
  .user-row:hover .nm{color:var(--fg)}
}

/* ================= SPOILER IMAGES ================= */
.img-spoiler{position:relative;overflow:hidden;cursor:pointer;border-radius:12px}
.img-spoiler img{filter:blur(24px) grayscale(.5);transition:filter .35s ease,transform .35s ease;transform:scale(1.05)}
.img-spoiler.revealed img{filter:none;transform:scale(1)}
.spoiler-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:8px;background:rgba(0,0,0,.55);z-index:2;cursor:pointer;transition:opacity .35s ease,background .35s ease}
.spoiler-overlay .material-symbols-outlined{font-size:36px;color:#fff;opacity:.85}
.spoiler-overlay::after{content:'Спойлер';font-size:12px;color:#fff;opacity:.7;font-weight:600;letter-spacing:.3px}
.img-spoiler.revealed .spoiler-overlay{opacity:0;pointer-events:none;background:transparent}

/* Composer thumb spoiler toggle */
.composer .thumb.spoiler{outline:2px solid var(--fg);outline-offset:-2px;position:relative}
.composer .thumb .spoiler-btn{position:absolute;top:2px;left:2px;background:rgba(0,0,0,.6);color:#fff;border:none;
  width:22px;height:22px;border-radius:50%;padding:0;font-size:11px;line-height:22px;display:flex;align-items:center;justify-content:center;z-index:3}
.composer .thumb .spoiler-btn .material-symbols-outlined{font-size:14px}
.composer .thumb .spoiler-btn:hover{background:rgba(0,0,0,.8)}

/* ================= MOBILE ADAPTATION ================= */
/* Ultra-small screens (<360px, iPhone 4S/5 etc) */
@media (max-width:359px){
  .composer,.post{margin:6px 4px;padding:10px 10px;border-radius:12px}
  .composer .actions{padding-left:0;flex-wrap:wrap}
  .composer .actions button{font-size:12px;padding:6px 10px}
  .composer textarea{font-size:14px}
  .topbar{padding:8px 10px;min-height:48px}
  .topbar > .title{font-size:18px;max-width:70%}
  .post .foot{gap:2px}
  .post .foot button{font-size:11px;padding:2px 0}
  .post .imgs{border-radius:8px}
  .profile-head{padding:16px 10px}
  .profile-head .nm{font-size:18px}
  .profile-head .stats{gap:14px}
  .auth .box{padding:20px 14px}
  .auth .logo{font-size:24px}
  .modal{padding:14px;max-width:100%;margin:0 4px;border-radius:14px}
  .search-wrap{padding:8px}
  .chats-search{padding:8px}
  .chats-search input{font-size:13px;padding:7px 10px}
  .cm-input{gap:4px}
  .cm-input .cm-gif-btn{width:32px;height:32px}
  .cm-input .cm-gif-btn .material-symbols-outlined{font-size:18px}
  .m-layout{padding:6px 6px 200px}
  .m-bar{left:6px;right:6px;bottom:calc(86px + env(safe-area-inset-bottom));padding:4px 6px 10px 4px;border-radius:12px}
  .m-bar-art{width:36px;height:36px;border-radius:8px}
  .m-bar-info{flex:1;min-width:0}
  .m-bar-title{font-size:12px}
  .m-bar-artist{font-size:10px}
  .m-bar-play{width:38px;height:38px}
  .m-bar-btn{width:32px;height:32px}
  .m-bar-btn svg{width:22px;height:22px}
  .m-bar-spark{width:30px;height:30px}
  .m-bar-spark svg{width:20px;height:20px}
  .m-side{padding:6px 6px;flex-wrap:nowrap;overflow-x:auto}
  .m-nav-item{padding:6px 8px;font-size:11.5px}
  .m-nav-item>span{font-size:11px}
  .gif-grid{grid-template-columns:repeat(2,1fr)}
  .msg{max-width:90%}
}

/* Small phones (360-399px) */
@media (min-width:360px) and (max-width:399px){
  .composer,.post{margin:8px 6px;padding:12px 12px}
  .topbar > .title{font-size:19px}
  .modal{padding:16px}
  .gif-grid{grid-template-columns:repeat(2,1fr)}
}

/* Medium phones (400-599px) */
@media (min-width:400px) and (max-width:599px){
  .composer,.post{margin:10px 8px}
}

/* Tablets (600-999px) - improve readability */
@media (min-width:600px) and (max-width:999px){
  .layout{max-width:100%;margin:0 auto}
  .shell{max-width:100%}
  .composer,.post{margin:12px 16px}
  .composer .actions{padding-left:46px}
  .topbar{padding:12px 20px}
  .topbar > .title{font-size:22px}
  .view{padding:0 20px}
  .search-wrap{padding:16px 0;max-width:600px;margin:0 auto}
  .modal{max-width:480px}
  .auth .box{max-width:400px}
  .profile-head{padding:24px 20px}
  .profile-head .nm{font-size:24px}
  .m-layout{padding:14px 20px 220px}
  .m-bar{left:16px;right:16px}
  .chats-split .chatpane .msgs{padding:16px 20px}
}

/* Landscape phones */
@media (max-height:480px) and (orientation:landscape){
  .modal{max-height:85vh}
  .cmlist{max-height:40vh}
  .gif-grid{max-height:40vh}
  .topbar{min-height:44px;padding:6px 12px}
  .composer textarea{min-height:32px}
  .profile-head{padding:12px 16px}
  .profile-head .av{margin-bottom:6px}
  .profile-head .nm{font-size:18px}
    .tabbar{bottom:calc(6px + env(safe-area-inset-bottom))}
    .tabbar-pill{padding:3px}
    .tabbar button{padding:2px 8px;max-width:96px;font-size:9px;min-height:38px;gap:1px}
    .tabbar button .material-symbols-outlined{font-size:20px}
    .tabbar .more-btn{width:46px;height:46px}
    .tabbar .more-btn .material-symbols-outlined{font-size:22px}
}

/* Fix bottom tabbar on mobile: ensure content doesn't hide behind it */
@media (max-width:999px){
  .shell{padding-bottom:calc(92px + env(safe-area-inset-bottom))}
  .view{overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* Ensure images in feed don't overflow on small screens */
@media (max-width:480px){
  .post .imgs img{max-height:280px}
  .post .imgs.n3,.post .imgs.n4{grid-template-columns:1fr 1fr}
  .composer .thumb{width:64px;height:64px}
}

/* Mobile composer: fix button overflow (post button going off-screen) */
@media (max-width:599px){
  .composer .actions{
    padding-left:0;
    flex-wrap:wrap;
  }
  .composer .actions .spacer{display:none}
  .composer .actions #submitPost{
    width:100%;
    justify-content:center;
    margin-top:6px;
  }
}

/* Bigger role tags in post headers for better visibility */
.post .who .role-row-inline .role-tag-inline{
  font-size:11px;
  padding:1px 7px 1px 5px;
}
.post .foot .react-bar{display:inline-flex;align-items:center;gap:4px;margin:0 0 0 2px;padding:0;background:transparent;border:none;flex-wrap:wrap}
.post .foot .react-chip{background:var(--card2,#151515);border:1px solid var(--line);color:var(--fg);border-radius:14px;padding:2px 8px;display:inline-flex;align-items:center;gap:4px;font-size:12.5px;cursor:pointer;line-height:1.5;height:26px}
.post .foot .react-chip .e{font-size:14px}
.post .foot .react-chip .c{font-size:11.5px;color:var(--muted);font-weight:600}
.post .foot .react-chip.mine{border-color:var(--fg)}
.post .foot .spacer{flex:1}

/* v25: GIF button in comment composer */
.cm-input{display:flex;align-items:flex-end;gap:6px}
.cm-input .cm-gif-btn{background:transparent;border:1px solid var(--line);color:var(--fg);width:36px;height:36px;border-radius:10px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.cm-input .cm-gif-btn:hover{background:var(--hover)}
.cm-input .cm-gif-btn .material-symbols-outlined{font-size:22px}
.cm-input textarea{flex:1}
.cm .cm-gif{margin:4px 0 2px;max-width:220px}
.cm .cm-gif img{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:#000}
.cm.has-gif .cm-text{display:none}

/* ============================================================ */
/* v30: post embeds (iframes / SoundCloud widget / YouTube)      */
/* ============================================================ */
.post .body a{color:var(--fg);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:2px;word-break:break-word}
.post .body a:hover{text-decoration-color:var(--fg)}
.sc-embed,.yt-embed,.post-embed{margin:10px 0 4px;border-radius:12px;overflow:hidden;background:#0a0a0a;border:1px solid var(--line);max-width:520px}
.sc-embed iframe{width:100%;height:166px;border:0;display:block}
.yt-embed{aspect-ratio:16/9;max-width:560px}
.yt-embed iframe{width:100%;height:100%;border:0;display:block}
.post-embed iframe{width:100%;min-height:160px;border:0;display:block;background:#0a0a0a}
.post-embed iframe[src*="open.spotify.com"]{height:80px}
.post-embed iframe[src*="twitter.com"],.post-embed iframe[src*="platform.twitter"]{min-height:400px}
.post-embed iframe[src*="vimeo.com"],.post-embed iframe[src*="player.vimeo"]{aspect-ratio:16/9;min-height:0;height:auto}
/* composer "embed" button just picks up the ghost-button style already used by Фото/GIF */
#addEmbed .material-symbols-outlined{font-size:20px}

/* ============================================================ */
/* v30: profile music section (visible when user has linked SC)  */
/* ============================================================ */
.prof-music{margin:14px 0 18px}
.prof-music-hdr{display:flex;align-items:center;gap:10px;padding:0 4px 10px}
.prof-music-hdr .prof-music-title{font-weight:700;font-size:15px;color:var(--fg)}
.prof-music-hdr .prof-music-sub{font-size:12px;color:var(--muted)}
.prof-music-hdr .prof-music-sc{margin-left:auto;font-size:12px;color:var(--muted);text-decoration:none;padding:4px 10px;border:1px solid var(--line);border-radius:999px;transition:background .12s,color .12s}
.prof-music-hdr .prof-music-sc:hover{background:var(--hover);color:var(--fg)}
.prof-music-list{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px;overflow:hidden}
.prof-track{display:grid;grid-template-columns:40px 44px 1fr auto;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;cursor:pointer;transition:background .1s}
.prof-track:hover{background:var(--hover)}
.prof-track-idx{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;text-align:center}
.prof-track:hover .prof-track-idx{color:transparent}
.prof-track-art{width:44px;height:44px;border-radius:8px;overflow:hidden;background:#000;position:relative;flex:none}
.prof-track-art img{width:100%;height:100%;object-fit:cover;display:block}
.prof-track-play{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.45);color:#fff}
.prof-track:hover .prof-track-play,.prof-track.playing .prof-track-play{display:flex}
.prof-track-play svg{width:20px;height:20px}
.prof-track-meta{min-width:0;overflow:hidden}
.prof-track-title{font-size:13.5px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-track-sub{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.prof-track-dur{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;padding-left:6px}
.prof-music-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.prof-music-loading{padding:14px;text-align:center;color:var(--muted);font-size:13px}

/* ============================================================ */
/* v30: composer paste hint                                      */
/* ============================================================ */
.composer textarea{transition:box-shadow .12s}
.composer textarea.paste-flash{box-shadow:0 0 0 2px rgba(255,255,255,.25)}

/* embed dialog inside modal */
.embed-dialog textarea{width:100%;min-height:120px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.embed-dialog .hint{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}
.embed-dialog .hint code{background:var(--hover);padding:1px 5px;border-radius:4px;font-size:11.5px}

/* ============================================================ */
/* v31: our own SoundCloud card (replaces SC's iframe widget)    */
/* ============================================================ */
.sc-card{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:8px;margin:10px 0 4px;border-radius:12px;background:linear-gradient(180deg,#151515 0%,#0b0b0b 100%);border:1px solid var(--line);max-width:520px;position:relative;overflow:hidden}
.sc-card-art{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;background:#000;flex:none}
.sc-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.sc-card-art .m-empty-art{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:14px;letter-spacing:.5px;background:#000}
.sc-card-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#fff;border:none;cursor:pointer;opacity:0;transition:opacity .12s;padding:0}
.sc-card-play:hover,.sc-card-track:hover .sc-card-play{opacity:1}
.sc-card-play svg{width:26px;height:26px;filter:drop-shadow(0 1px 4px rgba(0,0,0,.4))}
.sc-card-play[disabled]{cursor:default}
.sc-card-meta{min-width:0;overflow:hidden;cursor:default}
.sc-card-title{font-size:14px;font-weight:600;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.sc-card-sub{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;cursor:pointer}
.sc-card-sub:hover{color:var(--fg);text-decoration:underline;text-underline-offset:2px}
.sc-card-src{font-size:10px;color:var(--muted);letter-spacing:1.5px;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);border-radius:999px;flex:none}
.sc-card-open{width:36px;height:36px;border-radius:50%;background:transparent;color:var(--fg);border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;flex:none;padding:0}
.sc-card-open:hover{background:var(--hover)}
.sc-card-open svg{width:18px;height:18px}
.sc-card-loading{opacity:.6}
.sc-card-err{background:#1a0a0a;border-color:#4a1c1c}
.sc-card-err .sc-card-title{color:#f88}
.sc-card-err .sc-card-sub a{color:#f88;text-decoration:underline}

/* ============================================================ */
/* v31: inline formatting toolbar in the composer                */
/* ============================================================ */

/* ============================================================ */
/* v31: spoiler / hidden text (click to reveal)                  */
/* ============================================================ */
.spoiler{background:var(--fg);color:var(--fg);border-radius:3px;padding:0 2px;cursor:pointer;transition:color .15s;user-select:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.spoiler.shown{background:transparent;color:inherit;user-select:auto}
.post .body code{background:var(--hover);border:1px solid var(--line);padding:1px 5px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}
.post .body b,.post .body strong{font-weight:700}
.post .body i,.post .body em{font-style:italic}
.post .body u{text-decoration:underline;text-underline-offset:2px}

/* ============================================================ */
/* v31: profile "Музыка" is now a collapsible button          */
/* ============================================================ */
.prof-music{margin:14px 0 18px}
.prof-music-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:var(--card);border:1px solid var(--line);border-radius:14px;color:var(--fg);cursor:pointer;font-size:15px;font-weight:600;font-family:inherit;transition:background .12s}
.prof-music-btn:hover{background:var(--hover)}
.prof-music-btn-ic{width:32px;height:32px;border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;flex:none}
.prof-music-btn-ic svg{width:14px;height:14px;margin-left:1px}
.prof-music-btn-t{flex:1;text-align:left}
.prof-music-btn-c{color:var(--muted);font-weight:500;font-size:13px}
.prof-music-btn-chev{color:var(--muted);font-size:14px;transition:transform .15s}
.prof-music.open .prof-music-btn-chev{transform:rotate(180deg)}
.prof-music.open .prof-music-btn{border-radius:14px 14px 0 0;border-bottom-color:transparent}
.prof-music-body{background:var(--card);border:1px solid var(--line);border-top:none;border-radius:0 0 14px 14px;padding:6px;overflow:hidden}
.prof-music-empty{padding:14px;text-align:center;color:var(--muted);font-size:13px}
/* keep existing .prof-track styles (defined in v30) */

/* small: hide v30 sc-embed leftover if any old cached CSS renders it */
.sc-embed{display:none!important}

/* ================= v32: BADGES / ROLES / ADMIN (from coder's archive) ================= */

/* ================= BADGES ================= */
.badge-row{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;flex-wrap:wrap;margin-left:6px}
.badge-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:999px;font-size:11px;font-weight:600;line-height:1.4;box-shadow:0 1px 2px rgba(0,0,0,.15);white-space:nowrap}
.badge-pill .material-symbols-outlined{font-size:13px;line-height:1}
.badge-pill img{width:12px;height:12px;border-radius:50%;object-fit:cover}
.badge-pill .badge-pill-name{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.post .who .badge-pill,.msg .a .badge-pill,.list-item .badge-pill{font-size:10px;padding:1px 6px 1px 5px}
.badge-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-size:9px;font-weight:700;flex:none;line-height:1;overflow:hidden}
.badge-icon .material-symbols-outlined{font-size:14px;line-height:1}
.badge-icon img{width:100%;height:100%;border-radius:50%;object-fit:cover}
:root{--verif-color:#111;--verif-check:#fff}
body{--verif-color:#111;--verif-check:#fff}
@media (prefers-color-scheme: dark){body{--verif-color:#fff;--verif-check:#000}}
body.has-accent{--verif-color:var(--accent);--verif-check:var(--accent-fg,#fff)}
.verif-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:6px;width:18px;height:18px;flex:none;color:var(--verif-color);filter:drop-shadow(0 0 1px rgba(0,0,0,.12))}
.verif-badge svg{display:block;width:18px;height:18px}
.post .who .verif-badge,.profile-head .nm .verif-badge{vertical-align:middle;position:relative;top:-1px}
.profile-head .nm .verif-badge{width:24px;height:24px}
.profile-head .nm .verif-badge svg{width:24px;height:24px}
.msg .a .verif-badge,.cm-head .verif-badge,.list-item .verif-badge,.meta .t .verif-badge,.me-card .info .nm .verif-badge{width:14px;height:14px;margin-left:4px}
.msg .a .verif-badge svg,.cm-head .verif-badge svg,.list-item .verif-badge svg,.meta .t .verif-badge svg,.me-card .info .nm .verif-badge svg{width:14px;height:14px}
.me-card .info .nm{display:flex;align-items:center}
.post .head .badge-row{vertical-align:middle;margin-left:4px}
.profile-head .nm .badge-row{margin-left:6px;vertical-align:middle}
.who .badge-row{display:inline-flex;margin-left:4px;vertical-align:middle}

/* ================= ROLES ================= */
.role-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 10px 2px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;flex:none;border:1.5px solid;white-space:nowrap}
.role-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;justify-content:center}
.profile-head .role-row{margin-top:12px;justify-content:center}
.post .who .role-row,.user-row .who .role-row,.list-item .meta .t .role-row{display:inline-flex;margin-top:0;margin-left:4px;vertical-align:middle}
.role-row-inline{display:inline-flex;flex-wrap:wrap;gap:3px;vertical-align:middle;margin-left:4px}
.role-tag-inline{padding:1px 6px 1px 4px;font-size:11px;font-weight:600;gap:3px}
.role-tag-inline .material-symbols-outlined{font-size:12px!important}

/* Verified post subtle highlight */
.post-verified{
  border-left:3px solid #1d9bf0;
  background:linear-gradient(to right, rgba(29,155,240,.05), transparent min(80px,25%));
  box-shadow:0 0 0 1px rgba(29,155,240,.08) inset;
}
.post-verified .who .nm{color:#1d9bf0}
body.has-accent .post-verified .who .nm{color:var(--accent)!important}
.post-verified .who .nm .verif-badge{
  color:#1d9bf0;
  filter:drop-shadow(0 0 3px rgba(29,155,240,.5));
}
body.has-accent .post-verified .who .nm .verif-badge{
  color:var(--accent);
  filter:drop-shadow(0 0 3px color-mix(in srgb,var(--accent) 50%,transparent));
}

/* Icon picker grid */
.icon-grid{display:flex;flex-wrap:wrap;gap:4px;max-height:140px;overflow-y:auto;padding:4px;background:var(--card);border-radius:10px;border:1px solid var(--line)}
.icon-grid .icon-opt{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:2px solid transparent;border-radius:8px;background:var(--hover);cursor:pointer;color:var(--text);transition:all .15s}
.icon-grid .icon-opt:hover{background:var(--line);transform:scale(1.1)}
.icon-grid .icon-opt.active{border-color:var(--accent,#1d9bf0);background:rgba(29,155,240,.15);color:var(--accent,#1d9bf0)}
.icon-grid .icon-opt .material-symbols-outlined{font-size:20px}
.icon-preview{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:10px;border:1px solid var(--line);flex:none}
.icon-preview .material-symbols-outlined{font-size:24px;color:var(--text)}
.role-tag .material-symbols-outlined{font-size:14px;line-height:1}
.notif .role-tag{display:none}

/* ================= ADMIN PANEL ================= */
.admin-layout{display:flex;height:100%;width:100%}
.admin-sidebar{width:220px;flex:none;background:var(--card);border-right:1px solid var(--line);padding:12px 8px;display:flex;flex-direction:column;overflow-y:auto}
.admin-sidebar .admin-brand{font-weight:800;font-size:16px;padding:8px 12px 16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.admin-sidebar nav{display:flex;flex-direction:column;gap:2px}
.admin-sidebar nav button{display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:transparent;color:var(--fg);border-radius:10px;font-size:14px;cursor:pointer;text-align:left;width:100%}
.admin-sidebar nav button:hover{background:var(--hover)}
.admin-sidebar nav button.active{background:var(--accent);color:var(--accent-fg);font-weight:600}
.admin-sidebar .admin-back{margin-top:auto;padding-top:12px;border-top:1px solid var(--line)}
.admin-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow-y:auto;background:var(--bg)}
.admin-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:12px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.admin-topbar .title{font-weight:700;font-size:17px}
.admin-view{flex:1;padding:20px;overflow-y:auto}
.admin-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:16px}
.admin-card h3{margin:0 0 12px;font-size:15px;font-weight:700}
.admin-card .field{margin-bottom:12px}
.admin-card .field label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.admin-card .field input,.admin-card .field textarea,.admin-card .field select{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);font-size:14px;outline:none}
.admin-card .field input:focus,.admin-card .field textarea:focus{border-color:var(--fg)}
.admin-card .field textarea{min-height:60px;resize:vertical}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th,.admin-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
.admin-table th{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.admin-table tr:hover{background:var(--hover)}
.admin-table .actions{display:flex;gap:4px}
.admin-table .actions button{padding:4px 8px;font-size:12px;border-radius:8px;border:1px solid var(--line);background:transparent;cursor:pointer;color:var(--fg)}
.admin-table .actions button:hover{background:var(--hover)}
.admin-table .actions button.danger{color:var(--danger);border-color:var(--danger)}
.admin-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line)}
.admin-row:last-child{border-bottom:none}
.permission-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.permission-grid label{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:6px 8px;border-radius:8px}
.permission-grid label:hover{background:var(--hover)}
.permission-grid input[type=checkbox]{width:16px;height:16px;accent-color:var(--fg)}
.admin-form-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.admin-badge-preview{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.stat-card .num{font-size:28px;font-weight:800}
.stat-card .lbl{font-size:12px;color:var(--muted);margin-top:4px}
.chart-container{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin-bottom:16px;overflow:hidden}
.chart-container .chart-title{font-size:14px;font-weight:700;margin-bottom:10px}
#adminView .empty{padding:30px 20px;text-align:center;color:var(--muted)}
@media (max-width:999px){
  .admin-layout{flex-direction:column}
  .admin-sidebar{width:100%;border-right:none;border-bottom:1px solid var(--line);padding:8px;flex-direction:row;flex-wrap:wrap;gap:4px}
  .admin-sidebar .admin-brand{display:none}
  .admin-sidebar nav{flex-direction:row;flex-wrap:wrap;gap:2px}
  .admin-sidebar nav button{font-size:12px;padding:6px 10px;white-space:nowrap}
  .admin-sidebar .admin-back{display:none}
  .admin-topbar{padding:10px 14px}
  .admin-view{padding:14px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .permission-grid{grid-template-columns:1fr}
  .admin-table{font-size:12px}
  .admin-table th,.admin-table td{padding:6px 6px}
}
.admin-role-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 2px 2px 6px;border-radius:999px;font-size:12px;font-weight:600;border:1.5px solid;line-height:1.3}
.admin-badge-tag{display:inline-flex;align-items:center;gap:4px;padding:2px 2px 2px 4px;border-radius:999px;font-size:12px;font-weight:500;background:var(--hover);line-height:1.3}
.admin-remove-tag{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:transparent;color:inherit;cursor:pointer;opacity:.5;transition:opacity .12s;padding:0;margin-left:2px}
.admin-remove-tag:hover{opacity:1;background:rgba(255,255,255,.2)}
.admin-remove-tag .material-symbols-outlined{font-size:12px}

/* ================= v32: custom formatting context menu ================= */
.fmt-ctx{position:fixed;z-index:9999;display:flex;gap:2px;padding:4px;background:var(--card,#111);border:1px solid var(--line,#222);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.5);animation:fmtCtxIn .12s ease-out}
@keyframes fmtCtxIn{from{opacity:0;transform:translateY(-4px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.fmt-ctx-btn{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--fg,#eee);border:none;border-radius:8px;font-size:14px;font-family:inherit;cursor:pointer;padding:0;transition:background .12s}
.fmt-ctx-btn:hover{background:var(--hover,#222)}
.fmt-ctx-btn[data-fmt=b]{font-weight:800}
.fmt-ctx-btn[data-fmt=i]{font-style:italic}
.fmt-ctx-btn[data-fmt=s]{text-decoration:line-through}
.fmt-ctx-btn[data-fmt=u]{text-decoration:underline}
.fmt-ctx-btn[data-fmt=c]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}


/* ================= v32.2: admin panel polish ================= */
.admin-layout{background:var(--bg);gap:0}
.admin-sidebar{width:240px;background:var(--card);border-right:1px solid var(--line);padding:16px 10px;gap:2px}
.admin-sidebar .admin-brand{font-weight:800;font-size:15px;letter-spacing:-.2px;padding:4px 12px 14px;border-bottom:1px solid var(--line);margin-bottom:10px;opacity:.85}
.admin-sidebar nav{gap:1px}
.admin-sidebar nav button{padding:9px 12px;border-radius:10px;font-weight:500;transition:background .15s,color .15s}
.admin-sidebar nav button .material-symbols-outlined{font-size:18px;opacity:.75}
.admin-sidebar nav button:hover{background:var(--hover)}
.admin-sidebar nav button.active{background:var(--fg);color:var(--bg);font-weight:600}
.admin-sidebar nav button.active .material-symbols-outlined{opacity:1}
.admin-back{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.admin-back button{width:100%;justify-content:flex-start;gap:8px;font-size:13px;color:var(--muted);padding:9px 12px}
.admin-back button:hover{color:var(--fg)}
.admin-topbar{padding:14px 22px;background:var(--bg);border-bottom:1px solid var(--line)}
.admin-topbar .title{font-size:18px;font-weight:700;letter-spacing:-.2px}
.admin-view{padding:22px;max-width:1100px;margin:0 auto;width:100%}
.admin-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.admin-card h3{margin:0 0 14px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.admin-card .field label{font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
.admin-card .field input,.admin-card .field textarea,.admin-card .field select{padding:10px 12px;border-radius:10px;background:var(--bg);font-size:14px}
.admin-card .field input:focus,.admin-card .field textarea:focus,.admin-card .field select:focus{border-color:var(--fg);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.admin-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;transition:background .15s}
.admin-row:hover{background:var(--hover)}
.admin-row .material-symbols-outlined{font-size:18px;color:var(--muted)}
.admin-table th{padding:12px 12px;background:var(--bg);position:sticky;top:0}
.admin-table td{padding:12px 12px}
.admin-table tbody tr{transition:background .12s}
.admin-table tbody tr:hover{background:var(--hover)}
.admin-table .actions{gap:6px;justify-content:flex-end}
.admin-table .actions button{padding:6px 8px;font-size:12px;border-radius:8px;line-height:1;display:inline-flex;align-items:center}
.admin-table .actions button .material-symbols-outlined{font-size:16px}
.stats-grid{margin-bottom:22px}
.stat-card{padding:18px 16px;border-radius:14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.stat-card .num{font-size:32px;font-weight:800;letter-spacing:-.8px;line-height:1}
.stat-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:8px;font-weight:600}
.permission-grid label{padding:8px 10px;font-size:13px;border:1px solid transparent;transition:background .12s,border-color .12s}
.permission-grid label:hover{background:var(--hover);border-color:var(--line)}
.admin-form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.admin-badge-preview{padding:8px 10px;background:var(--bg);border:1px dashed var(--line);border-radius:10px;margin-top:6px;display:flex;align-items:center;gap:8px}
@media (max-width: 900px){
  .admin-sidebar{width:100%;padding:8px;flex-direction:row;overflow-x:auto}
  .admin-sidebar .admin-brand,.admin-sidebar .admin-back{display:none}
  .admin-sidebar nav{flex-direction:row;flex-wrap:nowrap;gap:4px}
  .admin-view{padding:14px}
  .stat-card .num{font-size:26px}
}

/* ================= v32.3: admin bulk-select + delete ================= */
.admin-bulkbar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--card);border:1px solid var(--line);border-radius:12px;margin-bottom:10px;position:sticky;top:0;z-index:5;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.admin-bulkbar #adminBulkCount{font-weight:600;font-size:13px;margin-right:auto}
.admin-bulkbar button{padding:7px 12px;font-size:13px;border-radius:9px;display:inline-flex;align-items:center;gap:6px}
.admin-bulkbar button .material-symbols-outlined{font-size:16px}
button.danger{background:var(--danger,#d33)!important;color:#fff!important;border:none}
button.danger:hover{filter:brightness(1.1)}
button.danger-ghost{background:transparent;color:var(--danger,#d33)!important;border:1px solid transparent;padding:5px 7px;border-radius:8px;display:inline-flex;align-items:center;line-height:1}
button.danger-ghost:hover{background:rgba(211,51,51,.1)}
button.danger-ghost .material-symbols-outlined{font-size:17px}
.admin-user-pick,#adminUserSelAll{width:16px;height:16px;cursor:pointer;accent-color:var(--danger,#d33)}
.admin-table tbody tr:has(.admin-user-pick:checked){background:rgba(211,51,51,.06)}
.admin-del-user-modal{font-weight:600}

/* ═══════════════════ v32.7: MUSIC HOME (UNTITLED-inspired) ═══════════════════ */
.m-home{padding:0 4px 40px}
.home-greeting{padding:12px 0 18px;margin-bottom:8px}
.home-greeting-time{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-weight:600}
.home-greeting-name{font-weight:900;font-size:32px;letter-spacing:-.02em;color:var(--fg);line-height:1.05}
@media (max-width:700px){.home-greeting-name{font-size:26px}}

.home-section{margin-bottom:32px}
.home-section-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;gap:12px;flex-wrap:wrap}
.home-section-title{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg);font-weight:700}
.home-section-hint{font-size:10.5px;color:var(--muted);letter-spacing:.02em}
.home-section-btn{font-size:11px;color:var(--muted);background:none;border:none;cursor:pointer;letter-spacing:.04em;padding:2px 6px;border-radius:6px;transition:color .12s,background .12s}
.home-section-btn:hover{color:var(--fg);background:var(--hover)}

/* v32.7f: HORIZONTAL SCROLL CAROUSEL wrapped in .c-wrap for arrow-button navigation.
   Bigger covers (180px desktop) so the row fills wider layouts. */
.c-wrap{position:relative}
.c-row{display:flex;flex-direction:row;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:var(--line) transparent;scroll-behavior:smooth}
.c-row::-webkit-scrollbar{height:6px}
.c-row::-webkit-scrollbar-track{background:transparent}
.c-row::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.c-row::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.c-row .m-card{flex:0 0 180px;width:180px;min-width:180px;scroll-snap-align:start}
@media (max-width:1400px){.c-row .m-card{flex:0 0 168px;width:168px;min-width:168px}}
@media (max-width:1100px){.c-row .m-card{flex:0 0 152px;width:152px;min-width:152px}}
@media (max-width:720px){.c-row .m-card{flex:0 0 132px;width:132px;min-width:132px}}
@media (max-width:420px){.c-row .m-card{flex:0 0 116px;width:116px;min-width:116px}.c-row{gap:10px}}
/* Arrow navigation buttons for carousels — hidden on touch, visible on hover desktop. */
/* v32.7g: arrows are always visible (not hover-only) with reduced opacity, brighten
   on hover. Kept hidden on very small screens where touch-scroll is more natural. */
.c-nav{position:absolute;top:calc(50% - 40px);width:38px;height:38px;border-radius:50%;background:rgba(20,20,20,.94);border:1px solid var(--line);color:var(--fg);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.88;transition:opacity .18s,background .18s,transform .12s,box-shadow .18s;z-index:2;padding:0;backdrop-filter:blur(8px);box-shadow:0 4px 14px rgba(0,0,0,.35)}
.c-nav:hover{background:var(--fg);color:var(--bg);transform:scale(1.08);opacity:1;box-shadow:0 6px 18px rgba(0,0,0,.5)}
.c-nav:disabled{opacity:.22 !important;pointer-events:none;box-shadow:none}
.c-nav.prev{left:-8px}
.c-nav.next{right:-8px}
.c-nav svg{width:18px;height:18px}
@media (max-width:640px){.c-nav{display:none}}
.c-row .m-card-art{aspect-ratio:1/1;height:auto;width:100%;border-radius:12px;overflow:hidden;position:relative;background:var(--hover)}
.c-row .m-card-art img{width:100%;height:100%;object-fit:cover;display:block}
.c-row .m-card-title{font-size:14px;font-weight:600;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.c-row .m-card-artist{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;line-height:1.2;cursor:pointer}
.c-row .m-card-artist:hover{color:var(--fg);text-decoration:underline}
.c-row .m-play-fab{position:absolute;bottom:6px;right:6px;width:34px;height:34px;border-radius:50%;background:var(--fg);color:var(--bg);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(4px);transition:opacity .18s,transform .18s;box-shadow:0 6px 14px rgba(0,0,0,.35);padding:0}
.c-row .m-card:hover .m-play-fab{opacity:1;transform:translateY(0)}
.c-row .m-play-fab svg{width:16px;height:16px}
.c-row .m-like{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.5);border:none;color:#fff;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s;cursor:pointer;padding:0;backdrop-filter:blur(6px)}
.c-row .m-card:hover .m-like,.c-row .m-like.liked{opacity:1}
.c-row .m-like.liked{color:#ff5964}
.c-row .m-like svg{width:13px;height:13px}
/* Empty-state message centered inside the row instead of stretching. */
.c-row .empty{padding:24px 12px;color:var(--muted);font-size:13px;flex:1;text-align:center}

/* v32.7f: Full-page artist profile view (opened by openArtist()) */
.m-artist{padding:8px 4px 40px;max-width:100%}
.m-artist-back{background:transparent;border:1px solid var(--line);color:var(--fg);padding:6px 12px 6px 8px;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-size:13px;margin-bottom:16px;transition:background .12s}
.m-artist-back:hover{background:var(--hover)}
.m-artist-back svg{width:16px;height:16px}
.m-artist-hdr{display:flex;gap:24px;align-items:flex-start;padding:14px 4px 20px;border-bottom:1px solid var(--line);margin-bottom:20px}
.m-artist-ava{flex:none;width:160px;height:160px;border-radius:50%;background:var(--hover);display:flex;align-items:center;justify-content:center;font-size:56px;font-weight:700;color:var(--fg);overflow:hidden}
.m-artist-ava img{width:100%;height:100%;object-fit:cover;display:block}
.m-artist-info{flex:1;min-width:0}
.m-artist-name{font-size:32px;font-weight:800;line-height:1.1;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.m-artist-name .m-verified{color:#ff5500;font-size:22px}
.m-artist-tag{font-size:14px;color:var(--muted);margin-top:4px}
.m-artist-stats{display:flex;gap:22px;margin-top:14px;font-size:13.5px;color:var(--muted)}
.m-artist-stats b{color:var(--fg);font-weight:700;font-size:15px;margin-right:4px}
.m-artist-bio{margin-top:14px;font-size:13.5px;color:var(--muted);line-height:1.55;max-width:640px;white-space:pre-wrap}
.m-artist-actions{margin-top:16px;display:flex;gap:10px;align-items:center}
@media (max-width:720px){
  .m-artist-hdr{flex-direction:column;gap:16px;align-items:center;text-align:center}
  .m-artist-ava{width:120px;height:120px;font-size:44px}
  .m-artist-name{font-size:24px;justify-content:center}
  .m-artist-stats{justify-content:center;flex-wrap:wrap;gap:16px}
  .m-artist-actions{justify-content:center}
}

/* ================= v32r: MOTION PACK =================
   Только transform/opacity (не дёргает layout, дружит с GPU).
   Появление элементов — keyframes с backwards, чтобы стартовали
   невидимыми; каскадные задержки капнуты первыми элементами. */
@keyframes v32r-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes v32r-fade{from{opacity:0}to{opacity:1}}
@keyframes v32r-pop{0%{opacity:0;transform:scale(.92)}60%{opacity:1;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes v32r-msg{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes v32r-msg-mine{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
@keyframes v32r-slide-chat{from{opacity:.4;transform:translateX(7%)}to{opacity:1;transform:none}}
@keyframes v32r-heart{0%{transform:scale(1)}35%{transform:scale(1.35)}65%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes v32r-toast{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}

/* Лента: посты всплывают каскадом */
.post{animation:v32r-rise .38s cubic-bezier(.22,.85,.35,1) backwards}
.post:nth-child(2){animation-delay:.04s}
.post:nth-child(3){animation-delay:.08s}
.post:nth-child(4){animation-delay:.12s}
.post:nth-child(5){animation-delay:.16s}
.post:nth-child(6){animation-delay:.2s}
.composer{animation:v32r-rise .32s cubic-bezier(.22,.85,.35,1) backwards}

/* Списки: чаты, поиск людей, подписчики */
.list-item{animation:v32r-rise .3s cubic-bezier(.22,.85,.35,1) backwards}
.list-item:nth-child(2){animation-delay:.03s}
.list-item:nth-child(3){animation-delay:.06s}
.list-item:nth-child(4){animation-delay:.09s}
.list-item:nth-child(5){animation-delay:.12s}
.list-item:nth-child(6){animation-delay:.15s}
.list-item:nth-child(7){animation-delay:.18s}
.list-item:nth-child(8){animation-delay:.21s}

/* Уведомления */
.notif{animation:v32r-rise .3s cubic-bezier(.22,.85,.35,1) backwards}
.notif:nth-child(2){animation-delay:.04s}
.notif:nth-child(3){animation-delay:.08s}
.notif:nth-child(4){animation-delay:.12s}
.notif:nth-child(5){animation-delay:.16s}

/* Сообщения в чате: свои въезжают справа, чужие снизу */
.msg{animation:v32r-msg .24s ease backwards}
.msg.mine{animation:v32r-msg-mine .24s ease backwards}

/* Открытие чата на мобиле: панель въезжает справа (как в Telegram) */
@media (max-width:999px){
  .chats-split.chat-open .chat-col{animation:v32r-slide-chat .3s cubic-bezier(.22,.85,.35,1)}
}

/* Модалки: фон проявляется, карточка выпрыгивает */
.modal-bg{animation:v32r-fade .18s ease}
.modal{animation:v32r-pop .26s cubic-bezier(.34,1.4,.64,1)}

/* Пикер реакций */
.react-picker{animation:v32r-pop .18s cubic-bezier(.34,1.4,.64,1)}

/* Лайк: сердечко пружинит при установке */
.post .foot .like.liked .material-symbols-outlined{animation:v32r-heart .38s cubic-bezier(.34,1.56,.64,1)}
.m-like.liked{animation:v32r-heart .38s cubic-bezier(.34,1.56,.64,1)}

/* Профиль и разделы музыки */
.profile-head{animation:v32r-rise .35s cubic-bezier(.22,.85,.35,1) backwards}
.home-section{animation:v32r-rise .4s cubic-bezier(.22,.85,.35,1) backwards}
.home-section:nth-child(2){animation-delay:.06s}
.home-section:nth-child(3){animation-delay:.12s}
.empty{animation:v32r-fade .35s ease}

/* Тактильный отклик кнопок (transform не ломает layout) */
.primary:active,.ghost:active,.post .foot button:active,.chat-input button:active,.seg button:active{transform:scale(.95)}
.primary,.ghost,.post .foot button,.chat-input button,.seg button{transition:transform .12s ease,background .18s ease,color .18s ease,border-color .18s ease}
.list-item:active{transform:scale(.985)}
.list-item{transition:background .12s ease,transform .12s ease}

/* Бейдж непрочитанного всплывает при появлении */
.nav-badge:not([hidden]){animation:v32r-pop .3s cubic-bezier(.34,1.4,.64,1)}

/* Уважение к reduced-motion: гасим ВСЁ разом */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* ============ v32s: TELEGRAM-STYLE CHAT (без фона-обоев пока) ============ */
/* Пузыри: без рамок, мягкие радиусы с «хвостиком», плотная упаковка */
.msgs{gap:3px;padding:14px 12px 18px}
.msg{border:none;background:var(--card);border-radius:17px;border-bottom-left-radius:6px;
  padding:7px 12px 5px;margin-top:5px;box-shadow:0 1px 2px rgba(0,0,0,.22)}
.msg.mine{border-radius:17px;border-bottom-right-radius:6px}
.msg .a{font-size:13px;font-weight:700;color:var(--fg);margin-bottom:1px}
.msg .tm{font-size:10.5px;opacity:.5;margin-top:1px}
.msg .mtext code{background:rgba(120,120,120,.18);padding:1px 5px;border-radius:6px;font-size:13px}

/* GIF-сообщения */
.msg-gif{display:block;max-width:min(260px,70vw);border-radius:12px;margin:2px 0}

/* Пилюли-даты между днями (как «Сегодня» в TG) */
.msg-date{align-self:center;margin:10px 0 4px;animation:v32r-fade .3s ease}
.msg-date span{background:rgba(120,120,120,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--muted)}

/* Реакции: полупрозрачные пилюли */
.msg .reacts{margin-top:3px}
.msg .react-chip{border:none;background:rgba(120,120,120,.16);padding:3px 10px;font-size:13px;cursor:pointer;transition:transform .1s,background .15s}
.msg .react-chip:active{transform:scale(.92)}
.msg .react-chip.on{background:var(--fg);color:var(--bg);font-weight:700}
.msg.mine .react-chip{background:rgba(0,0,0,.1);color:var(--accent-fg)}
.msg.mine .react-chip.on{background:var(--bg);color:var(--fg)}

/* Комментарии: строка на всю ширину пузыря с разделителем (как в TG-каналах) */
.msg-foot{margin:5px -12px -5px;border-top:.5px solid rgba(120,120,120,.25)}
.cbtn{width:100%;display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--fg);text-align:left}
.cbtn .material-symbols-outlined{font-size:18px}

/* Шапка чата: стеклянная, полупрозрачная */
.chats-split .chatpane > .topbar{background:rgba(12,12,12,.72)!important;backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5)}

/* Поле ввода: пилюля + круглые кнопки GIF / Aa / отправить */
.chat-input{border-top:none;gap:5px;align-items:flex-end;padding-top:8px}
.chat-input textarea{background:var(--hover);border:none;border-radius:21px;padding:10px 14px;min-height:42px;font-size:15px}
.ci-btn{flex:none;width:42px;height:42px;border-radius:50%;border:none;background:transparent;color:var(--muted);
  font-weight:800;font-size:12.5px;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;padding:0;
  transition:transform .12s,color .15s,background .15s}
.ci-btn:hover{color:var(--fg);background:var(--hover)}
.ci-btn:active{transform:scale(.9)}
.chat-input .primary{flex:none;width:42px;height:42px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}

/* ============ v32t: BIG MOBILE PLAYER (перенос дизайна iOS-версии) ============ */
/* На десктопе новые элементы спрятаны — там прежняя боковая панель */
.m-now-head,.m-now-ctrlwrap,#npLike{display:none}
@media (max-width:999px){
  /* Панель = полноэкранный плеер: выезжает снизу, градиент от цвета обложки */
  .m-now{left:0;right:0;top:0;bottom:0;width:100%;max-width:100%;border:none;border-radius:0;
    transform:translateY(103%);opacity:1;pointer-events:none;
    transition:transform .45s cubic-bezier(.22,.85,.28,1.02);
    background:linear-gradient(180deg,var(--player-bg,#1c1c1e) 0%,#0a0a0a 72%)}
  body.now-open .m-now{right:0;transform:translateY(0);pointer-events:auto}
  .m-now-close{display:none}

  /* Шапка: круглая кнопка-свернуть, «ИГРАЕТ СЕЙЧАС», кнопка вниз к инфо */
  .m-now-head{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:3;padding:2px 0 6px}
  .m-now-hbtn{flex:none;width:36px;height:36px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center}
  .m-now-hbtn svg{width:17px!important;height:17px!important;flex:none}
  .m-now-hbtn:active{transform:scale(.92)}
  .m-now-hmid{flex:1;text-align:center;min-width:0}
  .m-now-hlabel{font-size:8px;font-weight:800;letter-spacing:2px;color:rgba(255,255,255,.45);font-family:ui-monospace,SFMono-Regular,monospace}
  .m-now-hartist{font-size:11px;font-weight:600;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}

  /* Большая обложка: почти во всю ширину, дышит (пауза = 0.92) */
  .m-now-art{width:min(100%,360px);margin:14px auto 0;border-radius:18px;overflow:hidden;
    box-shadow:0 24px 56px rgba(0,0,0,.55);
    transform:scale(.92);transition:transform .45s cubic-bezier(.34,1.3,.5,1)}
  body.m-playing .m-now-art{transform:scale(1)}

  /* Название + артист слева, сердечко справа */
  .m-now-meta{display:flex;align-items:center;gap:12px;margin-top:20px;text-align:left}
  .m-now-meta-txt{flex:1;min-width:0}
  .m-now-title{font-size:22px;font-weight:800;line-height:1.2;text-align:left;color:#fff}
  .m-now-artist{font-size:14px;color:rgba(255,255,255,.6);margin-top:3px;text-align:left}
  #npLike{display:flex;flex:none;width:44px;height:44px;border:none;border-radius:50%;background:transparent;color:rgba(255,255,255,.5);align-items:center;justify-content:center;transition:transform .15s,color .15s}
  #npLike svg{width:24px;height:24px}
  #npLike.liked{color:#fff}
  #npLike:active{transform:scale(.85)}

  /* Сик-бар + время */
  .m-now-ctrlwrap{display:block;margin-top:16px}
  .m-now-prog{height:4px;border-radius:2px;background:rgba(255,255,255,.18);position:relative;cursor:pointer}
  .m-now-prog::before{content:'';position:absolute;inset:-10px 0}
  .m-now-fill{position:absolute;left:0;top:0;bottom:0;background:#fff;border-radius:2px;width:0}
  .m-now-times{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;font-weight:600;font-family:ui-monospace,SFMono-Regular,monospace;color:rgba(255,255,255,.45)}

  /* Транспорт 5-в-ряд: радио | назад | БОЛЬШАЯ play | вперёд | повтор */
  .m-now-transport{display:grid;grid-template-columns:repeat(5,1fr);align-items:center;justify-items:center;margin-top:12px}
  .m-now-tbtn{border:none;background:transparent;color:rgba(255,255,255,.5);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:transform .12s,color .15s}
  .m-now-tbtn svg{width:20px;height:20px}
  .m-now-tbtn.m-now-skip{color:#fff;width:56px;height:56px}
  .m-now-tbtn.m-now-skip svg{width:30px;height:30px}
  .m-now-tbtn.active{color:#fff}
  .m-now-tbtn:active{transform:scale(.88)}
  .m-now-play{border:none;width:72px;height:72px;border-radius:50%;background:#fff;color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.4);transition:transform .15s}
  .m-now-play:active{transform:scale(.93)}
  .m-now-play svg{width:28px;height:28px}

  /* Инфо-блоки под плеером читаемы на градиенте */
  .m-now-stats,.m-now-info{color:#fff}

  /* Мини-бар компактнее: только prev/play/next (как в iOS-версии) */
  .m-bar-spark,#mbRepeat{display:none}
}

/* ==================================================================== *
 *  v33: СООБЩЕСТВА BETA — Discord-like UI (ЧБ, PC + смартфон)
 * ==================================================================== */

.beta-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
  margin-left: 8px; color: var(--muted); vertical-align: middle;
}

.cm-loading, .cm-none {
  padding: 18px; color: var(--muted); font-size: 13px; text-align: center;
}

/* ---------- overall 3-column frame ---------- */
.cm-wrap {
  display: grid;
  grid-template-columns: 72px 248px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background: var(--bg);
}

/* ---------- community rail ---------- */
.cm-rail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 0; overflow-y: auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .015);
  scrollbar-width: none;
}
.cm-rail::-webkit-scrollbar { width: 0; display: none; }

.cm-rail-btn {
  position: relative;
  width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 15px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--fg);
  display: grid; place-items: center;
  cursor: pointer; overflow: hidden;
  font-weight: 800; font-size: 15px;
  transition: border-radius .22s ease, transform .18s ease, background .2s ease, border-color .2s ease;
}
.cm-rail-btn img { width: 100%; height: 100%; object-fit: cover; }
.cm-rail-btn:hover { border-radius: 12px; background: rgba(255, 255, 255, .09); transform: translateY(-1px); }
.cm-rail-btn.active {
  border-radius: 12px;
  background: var(--fg); color: var(--bg);
  border-color: var(--fg);
}
.cm-rail-btn.active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 26px; border-radius: 0 4px 4px 0; background: var(--fg);
}
.cm-rail-btn.add { border-style: dashed; color: var(--muted); font-size: 20px; }
.cm-rail-btn.add:hover { color: var(--fg); border-color: var(--fg); }

/* ---------- channel sidebar ---------- */
.cm-side {
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, .01);
}
.cm-side-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 13px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.cm-side-title {
  font-weight: 800; font-size: 14.5px; letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
}
.cm-side-menu {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; padding: 2px; border-radius: 8px;
}
.cm-side-menu:hover { color: var(--fg); background: rgba(255, 255, 255, .07); }

.cm-side-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 10px 8px 14px;
  scrollbar-width: none;
}
.cm-side-scroll::-webkit-scrollbar { width: 0; display: none; }

.cm-group { margin-bottom: 16px; }
.cm-group-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 6px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.cm-add-ch {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; border-radius: 6px; padding: 1px;
}
.cm-add-ch:hover { color: var(--fg); background: rgba(255, 255, 255, .08); }
.cm-add-ch .material-symbols-outlined { font-size: 17px; }

.cm-chan {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; margin-bottom: 2px;
  background: none; border: 0; border-radius: 9px;
  color: var(--muted); cursor: pointer; text-align: left;
  font-size: 13.5px; font-weight: 500;
  transition: background .16s ease, color .16s ease;
}
.cm-chan:hover { background: rgba(255, 255, 255, .06); color: var(--fg); }
.cm-chan.active { background: rgba(255, 255, 255, .11); color: var(--fg); font-weight: 700; }
.cm-chan-hash { opacity: .6; display: grid; place-items: center; font-size: 15px; }
.cm-chan-hash .material-symbols-outlined { font-size: 17px; }
.cm-chan-nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-chan-x {
  opacity: 0; color: var(--muted); display: grid; place-items: center;
  border-radius: 5px; transition: opacity .15s ease;
}
.cm-chan:hover .cm-chan-x { opacity: .75; }
.cm-chan-x:hover { opacity: 1; color: #ff6b6b; }
.cm-chan-x .material-symbols-outlined { font-size: 15px; }
.cm-vc-count {
  font-size: 11px; font-weight: 700; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 6px;
}

.cm-vc-block.joined > .cm-chan {
  background: rgba(255, 255, 255, .13); color: var(--fg); font-weight: 700;
}
.cm-vc-users { padding: 2px 0 6px 26px; display: flex; flex-direction: column; gap: 3px; }
.cm-vc-user {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--muted);
  padding: 3px 6px; border-radius: 7px;
}
.cm-vc-user:hover { background: rgba(255, 255, 255, .05); }
.cm-vc-user .av { flex: 0 0 auto; }
.cm-vc-user .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-vc-user.muted .nm { opacity: .5; }
.cm-vc-user .vc-ic { display: grid; place-items: center; opacity: .7; }
.cm-vc-user .vc-ic .material-symbols-outlined { font-size: 14px; }
.cm-vc-user .vc-ic.screen { color: var(--fg); opacity: 1; }

.cm-member {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 7px; border-radius: 8px;
  font-size: 13px; color: var(--muted); cursor: default;
}
.cm-member:hover { background: rgba(255, 255, 255, .05); color: var(--fg); }
.cm-member .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-role {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--muted);
}

.cm-join-bar { padding: 10px 12px; border-top: 1px solid var(--line); }
.cm-join-bar .btn { width: 100%; justify-content: center; }

/* ---------- voice status bar (bottom of sidebar) ---------- */
.vc-bar {
  border-top: 1px solid var(--line);
  padding: 9px 10px;
  background: rgba(255, 255, 255, .04);
  display: flex; flex-direction: column; gap: 8px;
  animation: vcBarIn .28s cubic-bezier(.22, .85, .28, 1.02);
}
@keyframes vcBarIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.vc-bar-info {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; color: var(--fg); cursor: pointer;
  text-align: left; padding: 0;
}
.vc-bar-info .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
  animation: vcPulse 2s infinite; flex: 0 0 auto;
}
@keyframes vcPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .55); }
  70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.vc-bar-info .t { display: flex; flex-direction: column; min-width: 0; }
.vc-bar-info .t b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-bar-info .t i { font-size: 10.5px; font-style: normal; color: var(--muted); }

.vc-bar-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vc-bar-btns button {
  height: 34px; border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .04);
  color: var(--fg); cursor: pointer;
  display: grid; place-items: center;
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}
.vc-bar-btns button:hover { background: rgba(255, 255, 255, .11); transform: translateY(-1px); }
.vc-bar-btns button .material-symbols-outlined { font-size: 18px; }
.vc-bar-btns button.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.vc-bar-btns button.hang { color: #ff6b6b; }
.vc-bar-btns button.hang:hover { background: #ff6b6b; color: #fff; border-color: #ff6b6b; }

/* ---------- main area ---------- */
.cm-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.cm-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 40px 24px; gap: 6px;
}
.cm-empty-ic {
  width: 68px; height: 68px; border-radius: 20px;
  border: 1px solid var(--line); display: grid; place-items: center;
  margin-bottom: 10px; background: rgba(255, 255, 255, .03);
}
.cm-empty-ic .material-symbols-outlined { font-size: 32px; color: var(--muted); }
.cm-empty h2 { margin: 0; font-size: 19px; font-weight: 800; }
.cm-empty p { margin: 0; color: var(--muted); font-size: 13.5px; max-width: 380px; line-height: 1.55; }
.cm-empty-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; justify-content: center; }

/* ---------- text chat ---------- */
.cm-chat { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.cm-chat-head {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.cm-chat-head .h { color: var(--muted); font-size: 17px; font-weight: 700; }
.cm-chat-head .nm { font-weight: 800; font-size: 15px; }
.cm-chat-head .tp {
  color: var(--muted); font-size: 12.5px;
  padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cm-msgs {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 16px 18px 8px;
  scrollbar-width: none;
}
.cm-msgs::-webkit-scrollbar { width: 0; display: none; }
.cm-empty-msgs { color: var(--muted); font-size: 13px; text-align: center; padding: 40px 0; }

.cm-msg {
  display: flex; gap: 11px; padding: 5px 8px;
  border-radius: 10px; position: relative;
  animation: cmMsgIn .22s ease;
}
@keyframes cmMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.cm-msg:hover { background: rgba(255, 255, 255, .035); }
.cm-msg.grouped { padding-top: 1px; padding-bottom: 1px; }
.cm-msg.grouped .cm-msg-body { margin-left: 49px; }
.cm-msg .av { flex: 0 0 auto; }
.cm-msg-body { flex: 1; min-width: 0; }
.cm-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 1px; }
.cm-msg-head .a { font-weight: 700; font-size: 13.5px; }
.cm-msg-head .t { font-size: 10.5px; color: var(--muted); }
.cm-msg-text {
  font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.cm-msg-text a { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.cm-msg-del {
  position: absolute; top: 4px; right: 6px; opacity: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  color: var(--muted); cursor: pointer; padding: 3px;
  display: grid; place-items: center; transition: opacity .15s ease;
}
.cm-msg:hover .cm-msg-del { opacity: 1; }
.cm-msg-del:hover { color: #ff6b6b; border-color: #ff6b6b; }
.cm-msg-del .material-symbols-outlined { font-size: 15px; }

.cm-compose {
  flex: 0 0 auto; display: flex; gap: 9px; align-items: center;
  padding: 12px 18px 16px;
}
.cm-compose.disabled {
  color: var(--muted); font-size: 13px; justify-content: center;
  padding: 18px; border-top: 1px solid var(--line);
}
.cm-compose input {
  flex: 1; height: 44px; padding: 0 16px;
  border-radius: 13px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05); color: var(--fg);
  font-size: 14px; outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.cm-compose input:focus { border-color: var(--fg); background: rgba(255, 255, 255, .08); }
.cm-send {
  width: 44px; height: 44px; flex: 0 0 auto;
  border-radius: 13px; border: 1px solid var(--line);
  background: var(--fg); color: var(--bg);
  cursor: pointer; display: grid; place-items: center;
  transition: transform .14s ease, opacity .16s ease;
}
.cm-send:hover { transform: translateY(-1px); }
.cm-send:active { transform: scale(.95); }

/* ---------- voice stage (v34: тёмная сцена как в Discord) ---------- */
.vc-stage {
  flex: 1; display: flex; flex-direction: column; min-height: 0;
  padding: 0; gap: 0;
  background: #0b0b0d; color: #fff;
  animation: vcStageIn .3s cubic-bezier(.22, .85, .28, 1.02);
}
@keyframes vcStageIn { from { opacity: 0; transform: scale(.99); } to { opacity: 1; transform: none; } }
/* «На весь экран»: сцена поверх приложения, но НИЖЕ модалок (260) и
   тостов (300) — иначе карточка профиля и уведомления открываются под ней. */
body.vc-fs .vc-stage { position: fixed; inset: 0; z-index: 250; border-radius: 0; }

.vc-head {
  display: flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.vc-head .material-symbols-outlined { font-size: 20px; color: rgba(255, 255, 255, .55); }
.vc-head .nm { font-weight: 800; font-size: 15.5px; color: #fff; }
.vc-head .cnt { margin-left: auto; color: rgba(255, 255, 255, .45); font-size: 12.5px; }
.vc-stage .cm-back { color: #fff; }
.vc-stage .cm-back .material-symbols-outlined { color: #fff; }
.vc-fs-btn .material-symbols-outlined { color: inherit; }
.vc-fs-btn {
  background: none; border: 0; color: rgba(255, 255, 255, .7); cursor: pointer;
  display: grid; place-items: center; padding: 4px; border-radius: 9px; flex: 0 0 auto;
}
.vc-fs-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.vc-fs-btn .material-symbols-outlined { font-size: 21px; }

.vc-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; padding: 12px; }
.vc-focus { flex: 1; display: flex; min-height: 0; min-width: 0; }
.vc-focus .vc-share { flex: 1; }

/* screen shares (демки) */
.vc-shares {
  flex: 1; min-height: 0; min-width: 0;
  display: grid; grid-template-columns: 1fr; gap: 10px;
}
.vc-shares.multi { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.vc-share {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .09); background: #000;
  min-height: 0; min-width: 0; cursor: pointer;
  transition: border-color .2s ease;
}
.vc-share:hover { border-color: rgba(255, 255, 255, .32); }
.vc-share video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vc-share-cap {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
  padding: 5px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .72); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .16);
  font-size: 11.5px; font-weight: 600; color: #fff;
}
.vc-share-cap span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-share-cap .material-symbols-outlined { font-size: 15px; }
.vc-share-btns {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: flex; gap: 6px;
  opacity: 0; transition: opacity .15s ease;
}
.vc-share:hover .vc-share-btns, .vc-share:focus-within .vc-share-btns { opacity: 1; }
.vc-share-btns button {
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .66); color: #fff; cursor: pointer;
  display: grid; place-items: center; backdrop-filter: blur(6px);
  padding: 0;
}
.vc-share-btns button:hover { background: rgba(0, 0, 0, .85); border-color: rgba(255, 255, 255, .4); }
.vc-share-btns .material-symbols-outlined { font-size: 18px; }

/* participant tiles — заполняют сцену как в Discord */
.vc-tiles {
  flex: 1; min-height: 0; min-width: 0;
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  grid-auto-rows: 1fr;
  overflow-y: auto;
  scrollbar-width: none;
}
.vc-tiles::-webkit-scrollbar { width: 0; display: none; }
.vc-tiles.n1 { grid-template-columns: 1fr; }

.vc-tile {
  position: relative;
  border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px;
  background: #17171a;
  display: flex; align-items: center; justify-content: center;
  min-height: 150px; min-width: 0; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.vc-tile:hover { background: #1c1c20; }
.vc-tile .vc-ring {
  border-radius: 50%; padding: 4px;
  border: 3px solid transparent;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.vc-tile.speaking { border-color: rgba(74, 222, 128, .65); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .45); }
.vc-tile.speaking .vc-ring {
  border-color: #4ade80;
  box-shadow: 0 0 0 4px rgba(74, 222, 128, .14);
  transform: scale(1.03);
}
.vc-tile.muted .vc-ring { opacity: .55; }
.vc-cap {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
  padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px; font-weight: 600; color: #fff;
}
.vc-cap .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-cap .ic { display: grid; place-items: center; color: rgba(255, 255, 255, .75); }
.vc-cap .ic .material-symbols-outlined { font-size: 14px; }
.vc-cap .ic.scr { color: #4ade80; }

/* нижняя полоска участников, когда идёт демка */
.vc-strip {
  flex: 0 0 auto; display: flex; gap: 8px;
  padding: 0 12px 6px; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none;
}
.vc-strip::-webkit-scrollbar { height: 0; display: none; }
.vc-strip .vc-tile.small {
  flex: 0 0 auto; width: 136px; height: 80px; min-height: 80px; border-radius: 11px;
}
.vc-strip .vc-tile.small .vc-ring { padding: 2px; border-width: 2px; }
.vc-strip .vc-tile.small .vc-cap {
  left: 6px; bottom: 6px; padding: 2px 7px; font-size: 10.5px; max-width: calc(100% - 12px);
}
.vc-strip .vc-share.small { flex: 0 0 auto; width: 136px; height: 80px; border-radius: 11px; }
.vc-strip .vc-share.small .vc-share-cap { left: 6px; bottom: 6px; padding: 2px 7px; font-size: 10px; }

/* панель управления в сцене (как у Discord — по центру снизу) */
.vc-controls {
  flex: 0 0 auto; display: flex; justify-content: center; gap: 12px;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
}
.vc-controls button {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background .16s ease, transform .12s ease, border-color .16s ease;
}
.vc-controls button:hover { background: rgba(255, 255, 255, .17); transform: translateY(-1px); }
.vc-controls button .material-symbols-outlined { font-size: 22px; }
.vc-controls button.on { background: #fff; color: #000; border-color: #fff; }
.vc-controls button.on.scr { background: #23a55a; border-color: #23a55a; color: #fff; }
.vc-controls button.hang { background: #da373c; border-color: #da373c; }
.vc-controls button.hang:hover { background: #f23f45; border-color: #f23f45; }

/* ---------- modals ---------- */
.cm-modal-back {
  position: fixed; inset: 0; z-index: 260;
  background: rgba(0, 0, 0, .66); backdrop-filter: blur(5px);
  display: grid; place-items: center; padding: 20px;
  animation: cmBackIn .2s ease;
}
@keyframes cmBackIn { from { opacity: 0; } to { opacity: 1; } }
.cm-modal {
  width: 100%; max-width: 440px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7);
  animation: cmModalIn .28s cubic-bezier(.22, .85, .28, 1.02);
}
@keyframes cmModalIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cm-modal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
  font-weight: 800; font-size: 15px;
}
.cm-modal-h .x {
  background: none; border: 0; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; border-radius: 8px; padding: 3px;
}
.cm-modal-h .x:hover { color: var(--fg); background: rgba(255, 255, 255, .09); }
.cm-modal-b { padding: 18px; max-height: 70vh; overflow-y: auto; }

.cm-l {
  display: block; font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); margin: 12px 0 6px;
}
.cm-l:first-child { margin-top: 0; }
.cm-modal-b input[type="text"], .cm-modal-b input:not([type]) {
  width: 100%; height: 42px; padding: 0 14px;
  border-radius: 11px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05); color: var(--fg);
  font-size: 14px; outline: none;
}
.cm-modal-b input:focus { border-color: var(--fg); }
.cm-check {
  display: flex; align-items: center; gap: 9px;
  margin-top: 14px; font-size: 13px; color: var(--muted); cursor: pointer;
}
.cm-check input { width: 17px; height: 17px; accent-color: #fff; }
.cm-modal-actions {
  display: flex; gap: 9px; margin-top: 20px; flex-wrap: wrap;
}
.cm-modal-actions .btn { flex: 1; justify-content: center; min-width: 130px; }
.btn.danger { color: #ff6b6b; border-color: rgba(255, 107, 107, .45); }
.btn.danger:hover { background: #ff6b6b; color: #fff; border-color: #ff6b6b; }
.btn.small { height: 32px; padding: 0 13px; font-size: 12.5px; flex: 0 0 auto; min-width: 0; }

.cm-info p { margin: 0 0 14px; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.cm-info-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px;
}
.cm-info-row span { color: var(--muted); }
.cm-info-row b.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; user-select: all;
}

.cm-disc { display: flex; flex-direction: column; gap: 8px; }
.cm-disc-row {
  display: flex; align-items: center; gap: 11px;
  padding: 10px; border: 1px solid var(--line); border-radius: 13px;
}
.cm-disc-row img, .cm-disc-row .ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 13px;
  object-fit: cover; display: grid; place-items: center;
  background: rgba(255, 255, 255, .07); font-weight: 800; font-size: 14px;
}
.cm-disc-row .i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cm-disc-row .i b { font-size: 13.5px; }
.cm-disc-row .i i, .cm-disc-row .i u {
  font-style: normal; text-decoration: none;
  font-size: 11.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ==================== MOBILE (смартфон) ==================== */
@media (max-width: 900px) {
  .cm-wrap { grid-template-columns: 60px minmax(0, 1fr); }
  .cm-side { position: relative; }
  /* On phones the channel list and the content area swap via a body class. */
  body.cm-content-open .cm-side { display: none; }
  body:not(.cm-content-open) .cm-main { display: none; }
  .cm-rail-btn { width: 40px; height: 40px; flex-basis: 40px; border-radius: 13px; }
  .cm-rail-btn.active::before { left: -10px; height: 22px; }
  .vc-shares.multi { grid-template-columns: 1fr; }
  .vc-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 8px; }
  .cm-msgs { padding: 12px 12px 6px; }
  .cm-compose { padding: 10px 12px 14px; }
  .cm-chat-head { padding: 11px 13px; }
  .cm-chat-head .tp { display: none; }
}

@media (max-width: 560px) {
  .cm-wrap { grid-template-columns: 52px minmax(0, 1fr); }
  .cm-modal { max-width: 100%; border-radius: 18px; }
  .cm-modal-actions .btn { min-width: 0; }
}

/* v33: nav beta marker + mobile back button inside Сообщества */
.nav-beta {
  margin-left: 7px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 4px;
  color: var(--muted);
  line-height: 1.4;
}

.cm-back {
  display: none;
  background: none;
  border: 0;
  color: var(--fg);
  cursor: pointer;
  place-items: center;
  border-radius: 9px;
  padding: 3px;
  margin-right: 2px;
  flex: 0 0 auto;
}
.cm-back:hover { background: rgba(255, 255, 255, .09); }
.cm-back .material-symbols-outlined { font-size: 20px; }

@media (max-width: 900px) {
  .cm-back { display: grid; }
}

/* v33.1: always-visible Сообщества actions in the topbar */
.cm-top-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 2;
}
.cm-top-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.cm-top-actions .btn .material-symbols-outlined { font-size: 17px; }
.cm-top-actions .btn.primary {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}

/* On phones keep the icons but drop the labels so both buttons always fit. */
@media (max-width: 560px) {
  .cm-top-actions .btn span { display: none; }
  .cm-top-actions .btn { padding: 0 11px; }
}

/* The rail "+" gets a subtle pulse while the user has no communities yet. */
body.cm-content-open .cm-rail-btn.add:only-child,
.cm-rail-btn.add:only-child {
  animation: cmAddPulse 2.4s ease-in-out infinite;
  border-color: rgba(255, 255, 255, .45);
  color: var(--fg);
}
@keyframes cmAddPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .18); }
  50% { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* v33.2: harden the post action row so buttons never stack vertically.
   .post .foot uses flex-wrap:wrap, so any rule that lets a button grow to a
   full line pushes the whole row into a vertical stack. */
.post .foot > button,
.post .foot > .like,
.post .foot > .cbtn,
.post .foot > .rebtn,
.post .foot > .reactbtn {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0;
  display: inline-flex !important;
  align-items: center;
}
.post .foot {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
}

/* =====================================================================
   v33.3 — СООБЩЕСТВА layout fixes
   The desktop shell is capped at 600px with height:auto (tuned for the feed).
   Chats opt out via body.view-chats; communities needs the same treatment or
   the three-column grid collapses into a small floating box.
   ===================================================================== */
@media (min-width: 901px) {
  body.view-communities .shell {
    max-width: 1480px;
    height: calc(100vh - 32px);
    min-height: 0;
    max-height: calc(100vh - 32px);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
    box-shadow: var(--shadow);
  }
  body.view-communities .shell > .topbar {
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding-left: 16px;
    padding-right: 16px;
    flex: none;
  }
  body.view-communities .view {
    overflow: hidden;
    flex: 1;
    min-height: 0;
    padding: 0;
  }
}

/* Collapse the channel sidebar while it has nothing in it (empty state),
   instead of leaving a dead 248px slab. */
.cm-wrap { grid-template-columns: 72px auto minmax(0, 1fr); }
.cm-side { width: 248px; box-sizing: border-box; }
.cm-side:empty { width: 0; border-right: none; overflow: hidden; }

/* The beta chip was spilling outside the sidebar button. */
.sidebar nav button { min-width: 0; }
.sidebar nav button .nav-beta { margin-left: auto; flex: 0 0 auto; }
.nav-beta {
  flex: 0 0 auto;
  font-size: 8.5px;
  padding: 1px 4px;
  line-height: 1.5;
}

/* Empty-state buttons glued icon to label. */
.cm-empty .btn,
.cm-empty .primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.cm-empty .btn .material-symbols-outlined,
.cm-empty .primary .material-symbols-outlined { font-size: 18px; }

/* =====================================================================
   v34 — СООБЩЕСТВА: аналог Discord-серверов.
   1) Телефон: полноэкранное приложение (список каналов ↔ контент),
      контент открывается на весь экран без топбара и таббара.
   2) ПК: шире рабочая область, крупнее каналы и текст.
   3) Карточка пользователя + кликабельные участники.
   ===================================================================== */

/* ---- кликабельность ---- */
.cm-member { cursor: pointer; }
.cm-vc-user { cursor: pointer; }
.cm-msg .av { cursor: pointer; }
.cm-msg-head .a { cursor: pointer; }
.cm-msg-head .a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- карточка пользователя ---- */
.cm-ucard {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 5px; padding: 10px 0 2px;
}
.cm-ucard .av { margin-bottom: 8px; }
.cm-ucard-nm {
  font-weight: 800; font-size: 17px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
}
.cm-ucard-un { color: var(--muted); font-size: 13px; }
.cm-modal-actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.cm-modal-actions .btn .material-symbols-outlined { font-size: 18px; }

/* ---- ПК: просторнее ---- */
@media (min-width: 901px) {
  body.view-communities .layout { max-width: 1720px; }
  body.view-communities .shell { max-width: 1600px; }
  .cm-side { width: 264px; }
  .cm-chan { font-size: 14px; padding: 8px 9px; }
  .cm-member { font-size: 13.5px; padding: 6px 8px; }
  .cm-vc-user { font-size: 13px; }
  .cm-msg-text { font-size: 14.5px; }
}

/* ---- Телефон: настоящий полноэкранный режим ---- */
@media (max-width: 900px) {
  body.view-communities { height: 100dvh; overflow: hidden; }
  body.view-communities #app { height: 100%; }
  body.view-communities .layout { height: 100%; }
  body.view-communities .shell { height: 100%; padding-bottom: 0; }
  body.view-communities .view { padding: 0; overflow: hidden; }
  body.view-communities .cm-wrap { height: 100%; grid-template-columns: 64px minmax(0, 1fr); }
  body.view-communities .cm-side { width: auto; }

  /* контент (чат/войс) — на весь экран, как отдельный экран приложения.
     Исключение — пустое состояние (.cm-empty-state): там навигация обязана
     остаться, иначе пользователь без сообществ запирается в тупике. */
  body.view-communities.cm-content-open:not(.cm-empty-state) .shell > .topbar { display: none; }
  body.view-communities.cm-content-open:not(.cm-empty-state) .tabbar,
  body.view-communities.cm-content-open:not(.cm-empty-state) .tabbar-more-popup { display: none; }
  body.view-communities.cm-content-open:not(.cm-empty-state) .cm-wrap { grid-template-columns: minmax(0, 1fr); }
  body.view-communities.cm-content-open:not(.cm-empty-state) .cm-rail { display: none; }

  /* список каналов — не прятать хвост (включая voice-бар и «Вступить»)
     под плавающим таббаром */
  body.view-communities:not(.cm-content-open) .cm-side {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }
  body.view-communities:not(.cm-content-open) .cm-rail {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }
  body.view-communities.cm-empty-state .cm-empty {
    padding-bottom: calc(104px + env(safe-area-inset-bottom));
  }

  /* крупнее элементы под палец */
  body.view-communities .cm-chan { padding: 11px 10px; font-size: 14.5px; border-radius: 11px; }
  body.view-communities .cm-member { padding: 8px; font-size: 14px; }
  body.view-communities .cm-vc-user { padding: 6px; font-size: 13.5px; }
  body.view-communities .cm-rail-btn { width: 44px; height: 44px; flex-basis: 44px; }

  /* свои шапки экранов учитывают вырез экрана (топбар скрыт) */
  body.view-communities.cm-content-open .cm-chat-head {
    padding-top: calc(11px + env(safe-area-inset-top));
  }
  body.view-communities.cm-content-open .vc-head {
    padding-top: calc(13px + env(safe-area-inset-top));
  }
  body.view-communities .cm-compose { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); }

  /* войс-сцена на телефоне */
  .vc-body { padding: 8px; }
  .vc-controls { gap: 14px; }
  .vc-controls button { width: 56px; height: 56px; }
  .vc-strip { padding: 0 8px 4px; }
  .vc-strip .vc-tile.small, .vc-strip .vc-share.small { width: 116px; height: 68px; min-height: 68px; }
  .vc-share-btns { opacity: 1; }
}

/* ---- глобальный индикатор звонка (виден вне вкладки Сообщества) ---- */
#vcPill {
  position: fixed; z-index: 210;
  right: 18px; bottom: 18px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: rgba(17, 17, 19, .92); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  color: #fff;
  animation: vcBarIn .28s cubic-bezier(.22, .85, .28, 1.02);
}
.vp-open {
  display: flex; align-items: center; gap: 9px;
  background: none; border: 0; color: #fff; cursor: pointer;
  text-align: left; padding: 2px 4px; min-width: 0;
}
.vp-open .dot {
  width: 9px; height: 9px; border-radius: 50%; background: #4ade80;
  animation: vcPulse 2s infinite; flex: 0 0 auto;
}
.vp-open .t { display: flex; flex-direction: column; min-width: 0; max-width: 190px; }
.vp-open .t b { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-open .t i { font-size: 10.5px; font-style: normal; color: rgba(255, 255, 255, .55); }
.vp-btn {
  width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .07); color: #fff; cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.vp-btn:hover { background: rgba(255, 255, 255, .15); }
.vp-btn .material-symbols-outlined { font-size: 18px; }
.vp-btn.on { background: #fff; color: #000; border-color: #fff; }
.vp-btn.hang { background: #da373c; border-color: #da373c; }
.vp-btn.hang:hover { background: #f23f45; }
@media (max-width: 900px) {
  /* на телефоне — узкая полоса сверху, как зелёная плашка звонка в Discord */
  #vcPill {
    left: 10px; right: 10px; bottom: auto;
    top: calc(8px + env(safe-area-inset-top));
  }
  .vp-open { flex: 1; }
  .vp-open .t { max-width: none; flex: 1; }
}