/* ============================================================================
   redesign.css — v139 «Serious Dark»
   Подключается ПОСЛЕ style.css и settings.css, поэтому переопределяет их.
   Что внутри:
     1. Типографика (Inter + шкала размеров, трекинг, табличные цифры)
     2. Motion-кнопки (.mbtn: rotate / shake / morph) — порт framer-motion на CSS
     3. Tilt-card + карточка профиля
     4. Color picker (.cpk)
     5. Select / dropdown (.fsel)
     6. Мессенджер (message-scroller: маски, автоскролл-пилюля, пузыри)
     7. Сообщества (.cm-*)
     8. Общая полировка: кнопки, поля, модалки, чаты, таббар
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0. ТОКЕНЫ
   ------------------------------------------------------------------------- */
:root{
  --font-ui:'Inter','Inter var','SF Pro Text',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-num:'Inter','SF Pro Text',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* поверхности */
  --s-1:rgba(255,255,255,.035);
  --s-2:rgba(255,255,255,.055);
  --s-3:rgba(255,255,255,.085);
  --ln-1:rgba(255,255,255,.06);
  --ln-2:rgba(255,255,255,.10);
  --ln-3:rgba(255,255,255,.16);

  /* тени */
  --el-1:0 1px 2px rgba(0,0,0,.4);
  --el-2:0 10px 30px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.35);
  --el-3:0 26px 70px rgba(0,0,0,.62),0 4px 14px rgba(0,0,0,.45);

  /* движение */
  --spring:cubic-bezier(.34,1.42,.5,1);
  --spring-soft:cubic-bezier(.22,1,.36,1);
  --ease-ui:cubic-bezier(.25,.8,.35,1);

  /* акценты */
  --ok:#66d19e;
  --warn:#e3a35c;
  --bad:#f87171;

  /* пузыри мессенджера — монохром, «серьёзно» */
  --msg-in-bg:linear-gradient(180deg,#232328 0%,#1b1b1f 100%);
  --msg-out-bg:linear-gradient(180deg,#fafafa 0%,#eaeaec 100%);
  --radius:20px;
}

/* ---------------------------------------------------------------------------
   1. ТИПОГРАФИКА
   ------------------------------------------------------------------------- */
body{
  font-family:var(--font-ui);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv05' 1,'cv08' 1,'ss01' 1,'tnum' 0;
}
h1,h2,h3,h4,.topbar .title,.auth .logo,.profile-head .nm,.st-card-h,.modal h3{
  font-family:var(--font-ui);
  letter-spacing:-.025em;
  font-weight:680;
}
.topbar > .title{font-size:20px;font-weight:700;letter-spacing:-.03em}
.topbar .title{font-size:16.5px;letter-spacing:-.02em}
.muted,.st-row-s,.msg-meta,.tm{letter-spacing:-.005em}
.msg .mtext,.post-text,.cm-msg-text{font-size:14.8px;line-height:1.52;letter-spacing:-.008em}
/* цифры — табличные, чтобы счётчики не «прыгали» */
.profile-head .stats .n,.msg-meta,.tm,.st-foot,.cc,.badge-count,.cm-vc-count{
  font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1
}
code,pre,kbd{font-family:'SF Mono',Menlo,Consolas,'Roboto Mono',monospace;font-size:12.5px;letter-spacing:0}

/* ---------------------------------------------------------------------------
   2. MOTION-КНОПКИ  (.mbtn)
   Порт трёх React-компонентов на чистый CSS: rotate / shake / morph
   ------------------------------------------------------------------------- */
.mbtn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:36px;padding:0 24px;
  border-radius:40px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.05);
  color:#fff;
  font-family:var(--font-ui);font-size:13px;font-weight:500;letter-spacing:-.015em;
  cursor:pointer;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,transform .18s var(--spring),box-shadow .2s ease;
}
.mbtn:hover{background:rgba(255,255,255,.06);transform:scale(1.02)}
.mbtn:active{transform:scale(.96)}
.mbtn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.mbtn:disabled{opacity:.45;cursor:default;transform:none}

.mbtn .mb-ic{position:relative;width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex:none;
  /* если шрифт иконок не загрузился (оффлайн) — лигатура не разъезжается по кнопке */
  overflow:clip;overflow-clip-margin:3px}
.mbtn .mb-ic .material-symbols-outlined{
  font-size:16px;width:16px;height:16px;line-height:16px;display:block;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 20;
}
.mbtn .mb-tx{margin-left:10px;display:inline-block}
.mbtn.mb-icon .mb-tx{display:none}
.mbtn.mb-icon{padding:0;width:36px}

/* --- вариант 1: rotate (Settings) --- */
.mbtn-rotate .mb-i1{transition:transform .45s var(--spring)}
.mbtn-rotate:hover .mb-i1{transform:rotate(180deg)}

/* --- вариант 2: shake (Delete) --- */
@keyframes mbShake{
  0%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-2px) rotate(-10deg)}
  50%{transform:translateY(0) rotate(10deg)}
  75%{transform:translateY(-2px) rotate(-10deg)}
  100%{transform:translateY(0) rotate(0)}
}
.mbtn-shake:hover .mb-i1{animation:mbShake .4s ease}
.mbtn-danger,.mbtn-danger .mb-tx{color:#f87171}
.mbtn-danger .mb-ic{color:#f87171}
.mbtn-danger:hover{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.24)}

/* --- вариант 3: morph (Search ⇄ X) --- */
.mbtn-morph .mb-i1,.mbtn-morph .mb-i2{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transition:transform .22s cubic-bezier(.2,1.6,.4,1),opacity .16s ease;
}
.mbtn-morph .mb-i2{opacity:0;transform:scale(.5)}
.mbtn-morph:hover .mb-i1{opacity:0;transform:scale(.5)}
.mbtn-morph:hover .mb-i2{opacity:1;transform:scale(1)}

/* --- заполненный (главное действие) --- */
.mbtn-primary{background:#fff;border-color:transparent;color:#0a0a0b;font-weight:600}
.mbtn-primary .mb-ic{color:#0a0a0b}
.mbtn-primary:hover{background:#f1f1f1}
.mbtn-ok{color:var(--ok)}
.mbtn-ok .mb-ic{color:var(--ok)}

/* «стеклянный» ряд кнопок */
.mbtn-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------------------------------------------------------------------------
   3. TILT-CARD + КАРТОЧКА ПРОФИЛЯ
   ------------------------------------------------------------------------- */
.tilt-card{
  position:relative;
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(0) rotateY(0);
  transition:transform .55s var(--spring-soft),box-shadow .4s ease;
  will-change:transform;
}
.tilt-card.is-tilting{transition:transform .06s linear}
.tilt-glare{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.10),transparent 46%);
  opacity:0;transition:opacity .35s ease;
}
.tilt-card.is-tilting .tilt-glare{opacity:1}

/* --- шапка профиля --- */
.profile-head{padding:22px 16px 6px;border-bottom:none;text-align:center}
.profile-head .ph-main{
  position:relative;max-width:580px;margin:0 auto;
  padding:30px 26px 24px;
  border-radius:26px;
  background:
    radial-gradient(120% 120% at 50% -20%,color-mix(in srgb,var(--pc,#ffffff) 16%,transparent) 0%,transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  border:1px solid var(--ln-2);
  box-shadow:var(--el-3),inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
.profile-head .ph-main::after{
  content:'';position:absolute;left:50%;top:-40%;width:340px;height:340px;transform:translateX(-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--pc,#ffffff) 20%,transparent) 0%,transparent 68%);
  filter:blur(18px);pointer-events:none;opacity:.65;
}
.profile-head .ph-main > *{position:relative;z-index:2}
.profile-head .prof-av-wrap{transform:translateZ(42px);margin-bottom:14px}
.profile-head .prof-av-wrap .av{
  box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 40px rgba(0,0,0,.55);
  border-radius:50%;
}
.profile-head .nm{
  transform:translateZ(30px);
  font-size:23px;font-weight:720;letter-spacing:-.035em;line-height:1.2;
  display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;
}
.profile-head .un{transform:translateZ(24px);color:var(--muted);font-size:13.5px;margin-top:4px;letter-spacing:-.01em}
.profile-head .bio{
  transform:translateZ(18px);
  margin:14px auto 0;max-width:46ch;font-size:14.2px;line-height:1.55;color:rgba(255,255,255,.82);
}
.profile-head .prof-presence{transform:translateZ(16px);margin-top:12px}

/* статистика — стеклянные чипы */
.profile-head .stats{
  transform:translateZ(22px);
  display:flex;justify-content:center;gap:8px;margin:18px auto 2px;max-width:420px;
}
.profile-head .stats .stat{
  flex:1;min-width:0;padding:10px 8px;border-radius:16px;
  background:var(--s-1);border:1px solid var(--ln-1);
  transition:background .18s ease,transform .2s var(--spring),border-color .18s ease;
}
.profile-head .stats .stat.clickable:hover{background:var(--s-2);border-color:var(--ln-2);transform:translateY(-2px)}
.profile-head .stats .n{font-size:18px;font-weight:700;letter-spacing:-.03em}
.profile-head .stats .l{font-size:11.5px;color:var(--muted);margin-top:2px;letter-spacing:.01em}

.profile-head .btns{transform:translateZ(26px);gap:8px;margin-top:18px}
.profile-head .linkbox{transform:translateZ(14px);margin-top:14px;font-size:12.5px}
.profile-head .linkbox code{background:var(--s-2);border:1px solid var(--ln-1);border-radius:9px;padding:4px 9px}
.profile-head .prof-links{transform:translateZ(14px);margin-top:14px}
.prof-link{
  border-radius:999px;background:var(--s-1);border:1px solid var(--ln-1);
  transition:background .16s ease,transform .18s var(--spring),border-color .16s ease;
}
.prof-link:hover{background:var(--s-2);border-color:var(--ln-2);transform:translateY(-1px)}

/* мини-карточка пользователя (наведение в сообществе) тоже получает tilt */
.cm-upop{border-radius:22px;border:1px solid var(--ln-2);box-shadow:var(--el-3)}

@media (hover:none){
  .tilt-card{transform:none!important}
  .tilt-glare{display:none}
}

/* ---------------------------------------------------------------------------
   4. COLOR PICKER (.cpk)
   ------------------------------------------------------------------------- */
.cpk{display:inline-flex;align-items:center;vertical-align:middle}
.cpk-trigger{
  display:inline-flex;align-items:center;gap:9px;
  height:38px;padding:4px 12px 4px 4px;
  border-radius:13px;
  background:var(--s-1);border:1px solid var(--ln-2);color:var(--fg);
  font-family:var(--font-ui);font-size:12.5px;font-weight:500;letter-spacing:.01em;
  cursor:pointer;
  transition:background .16s ease,border-color .16s ease,transform .18s var(--spring);
}
.cpk-trigger:hover{background:var(--s-2);border-color:var(--ln-3)}
.cpk-trigger:active{transform:scale(.97)}
.cpk-sw{
  width:28px;height:28px;border-radius:9px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 2px 8px rgba(0,0,0,.45);
  background-image:linear-gradient(45deg,#2a2a2e 25%,transparent 25%),linear-gradient(-45deg,#2a2a2e 25%,transparent 25%),
                   linear-gradient(45deg,transparent 75%,#2a2a2e 75%),linear-gradient(-45deg,transparent 75%,#2a2a2e 75%);
  background-size:8px 8px;background-position:0 0,0 4px,4px -4px,-4px 0;
  position:relative;overflow:hidden;
}
.cpk-sw i{position:absolute;inset:0;display:block;background:var(--c,#fff)}
.cpk-hex{font-variant-numeric:tabular-nums;text-transform:uppercase;color:rgba(255,255,255,.78)}

@keyframes cpkIn{from{opacity:0;transform:translateY(-6px) scale(.96)}to{opacity:1;transform:none}}
.cpk-pop{
  position:fixed;z-index:1200;width:252px;padding:12px;
  border-radius:20px;
  background:rgba(20,20,23,.92);
  backdrop-filter:blur(26px) saturate(1.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid var(--ln-2);
  box-shadow:var(--el-3);
  animation:cpkIn .16s var(--ease-ui) both;
  transform-origin:top left;
}
.cpk-sv{
  position:relative;height:148px;border-radius:14px;cursor:crosshair;
  background:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,var(--hue,#f00));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  touch-action:none;
}
.cpk-knob{
  position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.55);
  transform:translate(-50%,-50%);pointer-events:none;
}
.cpk-hue{
  position:relative;height:12px;margin-top:12px;border-radius:999px;cursor:pointer;touch-action:none;
  background:linear-gradient(90deg,#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.cpk-hue .cpk-knob{top:50%;width:16px;height:16px;background:var(--c,#fff)}
.cpk-row{display:flex;align-items:center;gap:8px;margin-top:12px}
.cpk-inp{
  flex:1;min-width:0;height:34px;padding:0 10px;border-radius:11px;
  background:var(--s-1);border:1px solid var(--ln-2);color:var(--fg);
  font-family:'SF Mono',Menlo,Consolas,monospace;font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em;outline:none;
}
.cpk-inp:focus{border-color:rgba(255,255,255,.34);box-shadow:0 0 0 3px rgba(255,255,255,.07)}
.cpk-mini{
  width:34px;height:34px;flex:none;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--s-1);border:1px solid var(--ln-2);color:var(--fg);cursor:pointer;
  transition:background .15s ease,transform .18s var(--spring);
}
.cpk-mini:hover{background:var(--s-2)}
.cpk-mini:active{transform:scale(.94)}
.cpk-mini .material-symbols-outlined{font-size:17px}
.cpk-presets{display:grid;grid-template-columns:repeat(9,1fr);gap:6px;margin-top:12px}
.cpk-preset{
  aspect-ratio:1;border-radius:7px;border:none;padding:0;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:transform .16s var(--spring),box-shadow .16s ease;
}
.cpk-preset:hover{transform:scale(1.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.cpk-preset.on{box-shadow:inset 0 0 0 2px #fff}

/* прячем нативный color input, но оставляем его в DOM — старый код читает .value */
input[type="color"].cpk-native{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
  margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;opacity:0;pointer-events:none;
}

/* ---------------------------------------------------------------------------
   5. SELECT / DROPDOWN (.fsel)
   ------------------------------------------------------------------------- */
.fsel{position:relative;display:inline-flex;min-width:0;max-width:100%}
.fsel.fsel-block{display:flex;width:100%}
.fsel-btn{
  display:inline-flex;align-items:center;gap:10px;width:100%;min-width:168px;
  height:40px;padding:0 12px;
  border-radius:13px;
  background:var(--s-1);border:1px solid var(--ln-2);color:var(--fg);
  font-family:var(--font-ui);font-size:13.5px;font-weight:500;letter-spacing:-.01em;
  cursor:pointer;text-align:left;
  transition:background .16s ease,border-color .16s ease,box-shadow .2s ease,transform .18s var(--spring);
}
.fsel-btn:hover{background:var(--s-2);border-color:var(--ln-3)}
.fsel-btn:active{transform:scale(.985)}
.fsel.open .fsel-btn{background:var(--s-2);border-color:rgba(255,255,255,.28);box-shadow:0 0 0 4px rgba(255,255,255,.06)}
.fsel-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fsel-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--dot,transparent);display:none}
.fsel-dot[style*="--dot"]{display:block}
.fsel-chev{
  flex:none;display:flex;color:rgba(255,255,255,.55);
  transition:transform .28s var(--spring),color .16s ease;
}
.fsel-chev .material-symbols-outlined{font-size:18px}
.fsel.open .fsel-chev{transform:rotate(180deg);color:#fff}

@keyframes fselIn{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fselInUp{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.fsel-pop{
  position:fixed;z-index:1200;
  max-height:min(52vh,340px);overflow:auto;overscroll-behavior:contain;
  padding:6px;border-radius:18px;
  background:rgba(20,20,23,.94);
  backdrop-filter:blur(28px) saturate(1.5);-webkit-backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid var(--ln-2);box-shadow:var(--el-3);
  transform-origin:top center;animation:fselIn .17s var(--ease-ui) both;
}
.fsel-pop.up{transform-origin:bottom center;animation-name:fselInUp}
.fsel-pop::-webkit-scrollbar{width:6px}
.fsel-pop::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.fsel-opt{
  display:flex;align-items:center;gap:10px;
  min-height:38px;padding:8px 10px;border-radius:12px;
  font-size:13.5px;letter-spacing:-.01em;color:rgba(255,255,255,.86);
  cursor:pointer;transition:background .12s ease,color .12s ease;
}
.fsel-opt:hover,.fsel-opt.hl{background:rgba(255,255,255,.07);color:#fff}
.fsel-opt.on{color:#fff;font-weight:550}
.fsel-opt .fsel-check{
  margin-left:auto;flex:none;display:flex;opacity:0;transform:scale(.6);
  transition:opacity .16s ease,transform .2s var(--spring);
}
.fsel-opt .fsel-check .material-symbols-outlined{font-size:17px}
.fsel-opt.on .fsel-check{opacity:1;transform:scale(1)}
.fsel-opt[aria-disabled="true"]{opacity:.4;pointer-events:none}
.fsel-group{padding:10px 10px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
select.fsel-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0;pointer-events:none;clip:rect(0 0 0 0)}

/* ---------------------------------------------------------------------------
   6. МЕССЕНДЖЕР — message scroller
   ------------------------------------------------------------------------- */
.chatpane{position:relative}
.msgs{padding:20px 20px 14px;gap:2px;scroll-behavior:smooth}

/* мягкие маски сверху/снизу ленты сообщений */
/* !important — в style.css есть .chatpane > *{position:relative;z-index:1} */
.msgs-fade{position:absolute!important;left:0;right:0;height:56px;pointer-events:none;z-index:4!important;opacity:0;transition:opacity .3s ease}
.msgs-fade.top{background:linear-gradient(to bottom,rgba(8,8,10,.92),rgba(8,8,10,0))}
.msgs-fade.bot{background:linear-gradient(to top,rgba(8,8,10,.75),rgba(8,8,10,0))}
.msgs-fade.show{opacity:1}

/* пилюля «вниз» + счётчик новых */
.msg-jump{
  position:absolute!important;right:20px;z-index:6!important;
  display:inline-flex;align-items:center;gap:8px;
  height:40px;padding:0 8px 0 14px;
  border-radius:999px;
  background:rgba(22,22,25,.86);
  backdrop-filter:blur(22px) saturate(1.5);-webkit-backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--ln-2);color:#fff;
  font-size:12.5px;font-weight:550;letter-spacing:-.01em;
  box-shadow:var(--el-2);
  opacity:0;transform:translateY(14px) scale(.92);pointer-events:none;
  transition:opacity .24s var(--ease-ui),transform .32s var(--spring),background .16s ease;
}
.msg-jump.show{opacity:1;transform:none;pointer-events:auto}
.msg-jump:hover{background:rgba(32,32,36,.92)}
.msg-jump:active{transform:scale(.95)}
.msg-jump .material-symbols-outlined{font-size:19px}
.msg-jump .mj-n{
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:#fff;color:#0a0a0b;font-size:11.5px;font-weight:700;
  display:none;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;
}
.msg-jump.has-new .mj-n{display:inline-flex}

/* пузыри — в этой версии .msg это СТРОКА, а пузырь — вложенный .bubble */
.msg{transition:transform .16s var(--spring)}
.msg:hover{filter:none}
.msg > .bubble{
  padding:8px 13px 6px;
  border-radius:20px;
  border:1px solid var(--ln-1);
  background:var(--msg-in-bg)!important;
  color:#ececee!important;
  box-shadow:0 1px 2px rgba(0,0,0,.30)!important;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.msg:not(.mine) > .bubble{border-bottom-left-radius:8px}
.msg:not(.mine):hover > .bubble{border-color:var(--ln-2)}
.msg.mine > .bubble{
  background:var(--msg-out-bg)!important;
  color:#141417!important;
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;border-bottom-right-radius:8px;border-bottom-left-radius:20px;
}
.msg.same:not(.mine) > .bubble{border-bottom-left-radius:20px}
.msg.same.mine > .bubble{border-bottom-right-radius:20px}
.msg.msg-gif-only > .bubble,.msg.photo-only > .bubble{
  border:none!important;box-shadow:none!important;background:transparent!important;padding:0}

/* имя автора / ссылки / время — контраст разный для своих и чужих пузырей */
.msg:not(.mine) .a{font-size:12.5px;font-weight:640;letter-spacing:-.01em;color:rgba(255,255,255,.74);margin-bottom:2px}
.msg.mine .a{font-size:12.5px;font-weight:640;letter-spacing:-.01em;color:rgba(20,20,23,.62)}
.msg:not(.mine) .a.clickable:hover{color:#fff;text-decoration:none}
.msg:not(.mine) .mtext a{color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.4)}
.msg.mine .mtext a{color:#141417;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(20,20,23,.42)}
.msg-meta{font-size:11px;letter-spacing:0}
.msg:not(.mine) .tm{color:rgba(255,255,255,.55);opacity:1}
.msg.mine .tm{color:rgba(20,20,23,.55);opacity:1}
.msg:not(.mine) .ticks.read{color:#fff;opacity:.9}
.msg.mine .ticks{color:rgba(20,20,23,.5)}
.msg.mine .ticks.read{color:rgba(20,20,23,.85)}

/* дата — липкая стеклянная пилюля */
.msg-date{position:sticky;top:6px;z-index:5;display:flex;justify-content:center;margin:14px 0 6px;pointer-events:none}
.msg-date span{
  padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.02em;
  color:rgba(255,255,255,.75);
  background:rgba(18,18,21,.78);border:1px solid var(--ln-1);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--el-1);
}

/* действия у сообщения */
.msg-acts{transition:opacity .18s ease,transform .22s var(--spring)}
.msg-act{
  border-radius:10px;background:rgba(20,20,23,.8);border:1px solid var(--ln-1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:background .15s ease,transform .18s var(--spring);
}
.msg-act:hover{background:rgba(38,38,42,.92);transform:scale(1.06)}

/* индикатор «печатает» */
.typing-lbl:not([hidden]){display:inline-flex;align-items:center;gap:5px}
.typing-lbl::after{
  content:'';width:22px;height:6px;
  background:radial-gradient(circle 3px at 3px 3px,currentColor 92%,transparent) 0 0/9px 6px repeat-x;
  opacity:.65;animation:typingPulse 1.15s ease-in-out infinite;
}
@keyframes typingPulse{0%,100%{opacity:.28}50%{opacity:.85}}

/* композер */
.chat-input{
  padding:12px 14px 14px;
  background:rgba(14,14,17,.86);
  border-top:1px solid var(--ln-1);
}
.chat-input textarea{
  border-radius:20px;background:var(--s-1);border:1px solid var(--ln-2);
  font-size:14.6px;letter-spacing:-.008em;
}
.chat-input textarea:focus{
  background:var(--s-2);border-color:rgba(255,255,255,.30);
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
}
.chat-input button:hover{transform:scale(1.06)}
#sendBtn{background:#fff;color:#0a0a0b;border:none}
#sendBtn:hover{background:#f1f1f1;filter:none;transform:scale(1.06)}
.ci-btn{background:var(--s-1);border:1px solid var(--ln-1)}
.ci-btn:hover{background:var(--s-2)}

/* список диалогов */
.chat-item{border-radius:16px;padding:10px 12px;transition:background .16s ease,transform .2s var(--spring)}
.chat-item:hover{background:var(--s-1);transform:translateX(2px)}
.chat-item.active{background:var(--s-2);box-shadow:inset 0 0 0 1px var(--ln-2)}
.chats-search input{border-radius:14px;background:var(--s-1);border:1px solid var(--ln-1);height:40px}
.chats-search input:focus{background:var(--s-2);border-color:var(--ln-3);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.chats-section{font-size:11px;letter-spacing:.07em;font-weight:650;color:rgba(255,255,255,.42)}

/* ---------------------------------------------------------------------------
   7. СООБЩЕСТВА
   ------------------------------------------------------------------------- */
.cm-side{border-right:1px solid var(--ln-1)}
.cm-side-title{font-size:15px;font-weight:700;letter-spacing:-.025em}
.cm-sec-h,.cm-group-h{font-size:11px;letter-spacing:.07em;font-weight:650;color:rgba(255,255,255,.40);text-transform:uppercase}
.cm-chan{
  position:relative;border-radius:12px;padding:8px 10px;margin:1px 6px;
  transition:background .15s ease,transform .18s var(--spring),color .15s ease;
}
.cm-chan:hover{background:var(--s-1);transform:translateX(2px)}
.cm-chan.on,.cm-chan.active{background:var(--s-2);color:#fff}
.cm-chan.on::before,.cm-chan.active::before{
  content:'';position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:99px;background:#fff;
}
.cm-chan-hash{opacity:.5}
.cm-chan-nm{font-size:13.8px;letter-spacing:-.012em}
.cm-comm-head{
  padding:14px 14px 12px;border-bottom:1px solid var(--ln-1);
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);
}
.cm-chat-head{border-bottom:1px solid var(--ln-1);backdrop-filter:blur(18px)}
.cm-msgs{padding:16px 18px 10px;scroll-behavior:smooth}
.cm-msg{border-radius:14px;padding:6px 10px;transition:background .14s ease}
.cm-msg:hover{background:var(--s-1)}
.cm-msg-head b,.cm-msg-head .nm{font-weight:640;letter-spacing:-.015em}
.cm-msg-text{font-size:14.6px;line-height:1.52}
.cm-member{
  border-radius:12px;padding:6px 8px;
  transition:background .14s ease,transform .18s var(--spring);
}
.cm-member:hover{background:var(--s-1);transform:translateX(2px)}
.cm-role-chip{
  border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.01em;
  padding:2px 9px;border:1px solid currentColor;background:rgba(255,255,255,.04);
}
.cm-compose{
  border-radius:20px;background:var(--s-1);border:1px solid var(--ln-2);
  transition:border-color .2s ease,background .2s ease,box-shadow .25s ease;
}
.cm-compose:focus-within{background:var(--s-2);border-color:rgba(255,255,255,.28);box-shadow:0 0 0 4px rgba(255,255,255,.05)}
.cm-send{border-radius:50%;background:#fff;color:#0a0a0b;border:none}
.cm-send:hover{background:#f1f1f1;transform:scale(1.06)}
.cm-ic,.cm-plus{border-radius:12px;transition:background .15s ease,transform .18s var(--spring)}
.cm-ic:hover,.cm-plus:hover{background:var(--s-2);transform:scale(1.05)}
.cm-disc-row,.cm-info-row{border-radius:16px;border:1px solid var(--ln-1);background:var(--s-1);transition:background .16s ease,transform .2s var(--spring),border-color .16s}
.cm-disc-row:hover{background:var(--s-2);border-color:var(--ln-2);transform:translateY(-2px)}
.cm-modal{border-radius:24px;border:1px solid var(--ln-2);box-shadow:var(--el-3)}
.cm-modal-h{font-weight:680;letter-spacing:-.025em}
.cm-perm{border-radius:12px;border:1px solid var(--ln-1);background:var(--s-1)}
.cm-ucard{border-radius:16px;transition:background .15s ease,transform .2s var(--spring)}
.cm-ucard:hover{background:var(--s-1);transform:translateY(-2px)}
.cm-ucard-nm{font-weight:620;letter-spacing:-.02em}

/* ---------------------------------------------------------------------------
   8. ОБЩАЯ ПОЛИРОВКА
   ------------------------------------------------------------------------- */
button{
  font-family:var(--font-ui);font-weight:500;letter-spacing:-.012em;
  border-radius:999px;border:1px solid var(--ln-1);background:var(--s-1);
  transition:background .15s ease,border-color .15s ease,transform .18s var(--spring),box-shadow .2s ease;
}
button:hover{background:var(--s-2);border-color:var(--ln-2)}
button:active{transform:scale(.97)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.16)}
button.primary{background:#fff;color:#0a0a0b;border-color:transparent;font-weight:600}
button.primary:hover{background:#f1f1f1}
button.ghost{background:transparent;border-color:transparent}
button.ghost:hover{background:var(--s-1)}
/* ghost-кнопки, превращённые в motion-кнопки, всё равно остаются пилюлями */
button.ghost.mbtn{background:var(--s-1);border:1px solid var(--ln-1)}
button.ghost.mbtn:hover{background:var(--s-2)}
button.ghost.mbtn.mbtn-danger:hover{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.24)}

input,textarea{
  border-radius:13px;background:var(--s-1);border:1px solid var(--ln-2);
  font-size:14.6px;letter-spacing:-.008em;
  transition:border-color .16s ease,box-shadow .22s ease,background .16s ease;
}
input:focus,textarea:focus{background:var(--s-2);border-color:rgba(255,255,255,.30);box-shadow:0 0 0 4px rgba(255,255,255,.06)}

.modal{border-radius:24px;border:1px solid var(--ln-2);box-shadow:var(--el-3);padding:22px}
.modal h3{font-size:18px;letter-spacing:-.03em;margin-bottom:18px}
.modal .field label{font-size:12.5px;letter-spacing:.005em;color:rgba(255,255,255,.6);font-weight:550}
.modal-bg{background:rgba(0,0,0,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}

.st-card{border-radius:22px;border:1px solid var(--ln-1);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.st-card-h{font-size:14px;letter-spacing:-.015em;border-bottom:1px solid var(--ln-1)}
.st-row{border-bottom:1px solid var(--ln-1)}
.st-row-t{font-size:14.4px;font-weight:520;letter-spacing:-.012em}
.st-row-s{font-size:12.4px;color:rgba(255,255,255,.55)}

.topbar{background:rgba(10,10,12,.78);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border-bottom:1px solid var(--ln-1)}
.tabbar-pill{border:.5px solid var(--ln-2)}
.post{transition:background .16s ease}
.empty{color:rgba(255,255,255,.45);letter-spacing:-.01em}

/* уважение к «уменьшить движение» */
@media (prefers-reduced-motion:reduce){
  .mbtn,.mbtn *,.tilt-card,.msg,.msg-jump,.fsel-pop,.cpk-pop{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .tilt-card{transform:none!important}
}
body.ui-reduce-motion .tilt-card{transform:none!important}

/* мобильные уточнения */
@media (max-width:640px){
  .profile-head{padding:14px 12px 4px}
  .profile-head .ph-main{padding:24px 18px 20px;border-radius:22px}
  .profile-head .nm{font-size:21px}
  .profile-head .stats{gap:6px}
  .msgs{padding:16px 12px 10px}
  .msg-jump{right:12px}
  .mbtn{padding:0 18px}
  .cpk-pop{width:calc(100vw - 32px);max-width:280px}
}

/* ==========================================================================
 * 9. НАВИГАЦИЯ — анимировано всё, а не только отдельные кнопки
 * ========================================================================== */

.sidebar nav,
.tabbar-pill,
.seg { position: relative; }

/* Подвижная подложка активного пункта (её ставит ui-kit) */
.nav-ind {
  position: absolute; left: 0; top: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  border-radius: 12px;
  background: rgba(255,255,255,.075);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.32);
  transition: transform .19s var(--spring-soft),
              width .19s var(--spring-soft),
              height .19s var(--spring-soft),
              opacity .14s linear;
}
.nav-ind.on { opacity: 1; }

.sidebar nav.has-ind > button,
.tabbar-pill.has-ind > button,
.seg.has-ind > button { position: relative; z-index: 1; }

.sidebar nav.has-ind > button.active,
.tabbar-pill.has-ind > button.active,
.seg.has-ind > button.active { background: transparent !important; }

/* Иконки и подписи живут */
.sidebar nav button,
.tabbar-pill button {
  transition: color .18s var(--ease-ui), transform .18s var(--spring);
}
.sidebar nav button:active,
.tabbar-pill button:active { transform: scale(.965); }

.sidebar nav button .material-symbols-outlined,
.tabbar-pill button .material-symbols-outlined {
  transition: transform .22s var(--spring), font-variation-settings .2s var(--ease-ui), opacity .2s var(--ease-ui);
  will-change: transform;
}
.sidebar nav button:hover .material-symbols-outlined,
.tabbar-pill button:hover .material-symbols-outlined { transform: translateY(-1px) scale(1.07); }

.sidebar nav button.active .material-symbols-outlined,
.tabbar-pill button.active .material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500;
  animation: navPop .34s var(--spring);
}
@keyframes navPop {
  0%   { transform: scale(.84); }
  55%  { transform: scale(1.13); }
  100% { transform: scale(1); }
}

.tabbar-pill button .lbl,
.tabbar-pill button span:not(.material-symbols-outlined):not(.nav-badge) {
  transition: opacity .18s var(--ease-ui), transform .18s var(--spring);
}
.tabbar-pill button:not(.active) span:not(.material-symbols-outlined):not(.nav-badge) { opacity: .62; }

/* Счётчик уведомлений */
.nav-badge {
  animation: badgePop .38s var(--spring);
  box-shadow: 0 0 0 2px var(--bg), 0 0 12px rgba(239,68,68,.5);
  transition: transform .2s var(--spring);
}
@keyframes badgePop {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
button:hover > .nav-badge { transform: scale(1.12); }

/* Кнопка «ещё» */
.more-btn .material-symbols-outlined { transition: transform .26s var(--spring); }
.more-btn:hover .material-symbols-outlined { transform: rotate(90deg); }
.more-btn:active .material-symbols-outlined { transform: rotate(90deg) scale(.9); }

/* Верхняя панель */
.topbar { transition: background .25s var(--ease-ui), border-color .25s var(--ease-ui); }
.topbar button, .topbar .icon-btn {
  transition: background .16s var(--ease-ui), transform .16s var(--spring), color .16s var(--ease-ui);
}
.topbar button:hover, .topbar .icon-btn:hover { transform: translateY(-1px); }
.topbar button:active, .topbar .icon-btn:active { transform: scale(.94); }

/* ==========================================================================
 * 10. СООБЩЕСТВА — воздух, структура, спокойные поверхности
 * ========================================================================== */

#cmSide {
  width: 268px; min-width: 268px;
  background: linear-gradient(180deg, #101014 0%, #0c0c0f 100%);
  border-right: 1px solid var(--ln-1);
  display: flex; flex-direction: column;
}
.cm-side-head {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--ln-1);
  background: rgba(255,255,255,.015);
}
.cm-side-title {
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  width: 100%; min-height: 40px; padding: 0 10px;
  border-radius: 12px; gap: 10px;
  transition: background .16s var(--ease-ui), transform .16s var(--spring);
}
.cm-side-title:hover { background: rgba(255,255,255,.06); }
.cm-side-title:active { transform: scale(.985); }

.cm-side-scroll { padding: 10px 10px 16px; display: flex; flex-direction: column; gap: 16px; }

/* Заголовки секций */
.cm-group { display: flex; flex-direction: column; gap: 3px; }
.cm-sec {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px 4px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: #7c7c86;
  transition: color .16s var(--ease-ui);
}
.cm-sec:hover { color: #b6b6c0; }

/* Строка канала */
.cm-chan {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  min-height: 36px; padding: 0 10px;
  border-radius: 10px;
  color: #9a9aa4; font-size: 14.5px; font-weight: 500;
  cursor: pointer;
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui), transform .15s var(--spring);
}
.cm-chan::before {
  content: ''; position: absolute; left: -6px; top: 50%;
  width: 3px; height: 0; border-radius: 0 3px 3px 0;
  background: #fff; transform: translateY(-50%);
  transition: height .2s var(--spring);
}
.cm-chan:hover { background: rgba(255,255,255,.05); color: #dcdce2; transform: translateX(2px); }
.cm-chan.active {
  background: rgba(255,255,255,.085);
  color: #fff; font-weight: 600;
}
.cm-chan.active::before { height: 18px; }
.cm-chan-hash { opacity: .5; font-size: 16px; flex: none; transition: opacity .15s var(--ease-ui); }
.cm-chan:hover .cm-chan-hash, .cm-chan.active .cm-chan-hash { opacity: .85; }
.cm-chan-nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-chan-x {
  opacity: 0; flex: none;
  transition: opacity .15s var(--ease-ui), transform .15s var(--spring), color .15s var(--ease-ui);
}
.cm-chan:hover .cm-chan-x { opacity: .55; }
.cm-chan-x:hover { opacity: 1 !important; color: var(--bad); transform: scale(1.15); }

.cm-add-ch {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 0 10px; margin-top: 2px;
  border-radius: 10px;
  font-size: 13px; color: #6e6e78;
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui);
}
.cm-add-ch:hover { background: rgba(255,255,255,.05); color: #d2d2d8; }

/* Голосовой канал */
.cm-vc-block {
  border-radius: 12px;
  padding: 2px;
  transition: background .22s var(--ease-ui), box-shadow .22s var(--ease-ui);
}
.cm-vc-block.joined {
  background: rgba(94,234,212,.05);
  box-shadow: inset 0 0 0 1px rgba(94,234,212,.16);
}
.cm-vc-count {
  font-size: 11.5px; font-weight: 650; color: #6e6e78;
  padding: 1px 7px; border-radius: 99px;
  background: rgba(255,255,255,.06);
  transition: color .16s var(--ease-ui), background .16s var(--ease-ui);
}
.cm-vc-block.joined .cm-vc-count { color: #5eead4; background: rgba(94,234,212,.12); }
.cm-vc-watch {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: #f0abfc;
  background: rgba(240,171,252,.12);
  padding: 1px 7px; border-radius: 99px;
}

.cm-vc-users { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 4px 6px; }
.cm-vc-user {
  display: flex; align-items: center; gap: 8px;
  min-height: 30px; padding: 0 8px;
  border-radius: 9px;
  font-size: 13.5px; color: #b4b4be;
  cursor: pointer;
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui), opacity .18s var(--ease-ui);
}
.cm-vc-user:hover { background: rgba(255,255,255,.05); color: #fff; }
.cm-vc-user img, .cm-vc-user .avatar {
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(94,234,212,.55);
  transition: box-shadow .22s var(--ease-ui), opacity .2s var(--ease-ui), filter .2s var(--ease-ui);
}
.cm-vc-user.speaking img, .cm-vc-user.speaking .avatar {
  box-shadow: 0 0 0 2px rgba(94,234,212,.85), 0 0 12px rgba(94,234,212,.35);
}
.cm-vc-user.muted { color: #74747e; }
.cm-vc-user.muted img, .cm-vc-user.muted .avatar { opacity: .55; filter: grayscale(.35); }
.cm-vc-user .vc-ic {
  font-size: 15px; opacity: .8; flex: none;
  transition: color .2s var(--ease-ui), opacity .2s var(--ease-ui), transform .22s var(--spring);
}
.cm-vc-user.muted .vc-ic { color: var(--bad); }
.cm-vc-user .vc-ic.screen { color: #5eead4; animation: icIn .26s var(--spring); }
@keyframes icIn { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: .85; } }

/* Нижняя плашка голоса */
#cmVoiceBar:empty { display: none; }
.vc-bar {
  margin: 8px; padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(94,234,212,.09), rgba(94,234,212,.04));
  box-shadow: inset 0 0 0 1px rgba(94,234,212,.18);
  animation: vcBarIn .28s var(--spring-soft);
}
@keyframes vcBarIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vc-bar-info .t { font-size: 13px; font-weight: 600; color: #eafffb; }
.vc-bar-info .dot { box-shadow: 0 0 10px rgba(94,234,212,.8); }
@keyframes vcDot { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.vc-bar-btns button {
  width: 34px; height: 34px; border-radius: 10px;
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui), transform .15s var(--spring);
}
.vc-bar-btns button:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
.vc-bar-btns button:active { transform: scale(.9); }
.vc-bar-btns button.hang:hover { background: rgba(239,68,68,.18); color: #fca5a5; }

/* Участники */
#cmMembers {
  width: 248px; min-width: 248px;
  background: linear-gradient(180deg, #0f0f13, #0c0c0f);
  border-left: 1px solid var(--ln-1);
}
.cm-members-head {
  padding: 14px 14px 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #7c7c86;
}
.cm-members-list { padding: 0 8px 16px; display: flex; flex-direction: column; gap: 2px; }
.cm-member {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 10px;
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s var(--ease-ui), transform .15s var(--spring);
}
.cm-member:hover { background: rgba(255,255,255,.055); transform: translateX(2px); }
.cm-member .nm { font-size: 14px; font-weight: 550; color: #dcdce2; }
.cm-member .cm-role {
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 99px;
  background: rgba(255,255,255,.07);
}

/* Лента сообщений сообщества */
.cm-msgs { padding: 12px 8px 8px; scroll-behavior: smooth; }
.cm-msg {
  position: relative;
  padding: 6px 14px;
  border-radius: 12px;
  transition: background .14s var(--ease-ui);
}
.cm-msg:hover { background: rgba(255,255,255,.035); }
.cm-msg-text { font-size: 15px; line-height: 1.55; color: #e6e6ea; }
.cm-empty-msgs {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 48px 20px; text-align: center;
  color: #6e6e78; font-size: 14px;
  animation: fadeUp .35s var(--spring-soft);
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Поле ввода */
.cm-compose { padding: 10px 14px 14px; }
.cm-compose-row {
  border-radius: 16px;
  background: #17171c;
  box-shadow: inset 0 0 0 1px var(--ln-2);
  padding: 4px 6px 4px 4px;
  min-height: 46px;
  transition: box-shadow .18s var(--ease-ui), background .18s var(--ease-ui);
}
.cm-compose-row:focus-within {
  background: #1b1b21;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 0 3px rgba(255,255,255,.05);
}
#cmInput { font-size: 15px; line-height: 1.45; }
.cm-ic {
  width: 36px; height: 36px; border-radius: 11px;
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui), transform .18s var(--spring);
}
.cm-ic:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.cm-ic:active { transform: scale(.9); }
.cm-plus:hover .material-symbols-outlined { transform: rotate(90deg); }
.cm-plus .material-symbols-outlined { transition: transform .24s var(--spring); }
.cm-compose-hint { font-size: 11.5px; color: #62626c; padding: 6px 6px 0; }

/* Плавающая пилюля звонка */
#vcPill {
  border-radius: 16px;
  background: rgba(18,18,21,.92);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.5), inset 0 0 0 1px rgba(94,234,212,.2);
  animation: vcBarIn .3s var(--spring-soft);
}
#vcPill .vp-btn {
  width: 34px; height: 34px; border-radius: 10px;
  transition: background .15s var(--ease-ui), transform .15s var(--spring), color .15s var(--ease-ui);
}
#vcPill .vp-btn:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
#vcPill .vp-btn.hang:hover { background: rgba(239,68,68,.2); color: #fca5a5; }

/* Сцена звонка */
.vc-tile {
  border-radius: 16px;
  transition: box-shadow .22s var(--ease-ui), transform .22s var(--spring);
}
.vc-tile .vc-ring { transition: opacity .2s var(--ease-ui), box-shadow .2s var(--ease-ui); }
.vc-controls button {
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui), transform .16s var(--spring);
}
.vc-controls button:hover { transform: translateY(-2px); }
.vc-controls button:active { transform: scale(.92); }

/* ==========================================================================
 * 11. ЛЕНТА — карточки постов
 * ========================================================================== */

.post {
  border-radius: 18px;
  background: linear-gradient(180deg, #121216, #0f0f13);
  box-shadow: inset 0 0 0 1px var(--ln-1), 0 1px 2px rgba(0,0,0,.3);
  padding: 16px 18px;
  transition: box-shadow .22s var(--ease-ui), transform .22s var(--spring-soft), background .22s var(--ease-ui);
}
.post:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px var(--ln-2), 0 12px 28px rgba(0,0,0,.34);
}
.post .head { gap: 12px; align-items: flex-start; }
.post .head .avatar, .post .head img {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
  transition: box-shadow .2s var(--ease-ui), transform .2s var(--spring);
}
.post .head:hover .avatar, .post .head:hover img { box-shadow: 0 0 0 2px rgba(255,255,255,.16); }
.post .who .nm { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.post .who .un, .post .time, .post .views { font-size: 12.5px; color: #74747e; }
.post .post-text, .post .body { font-size: 15.5px; line-height: 1.62; color: #e8e8ec; }
.post .imgs img { border-radius: 14px; transition: transform .3s var(--spring-soft), filter .3s var(--ease-ui); }
.post .imgs img:hover { filter: brightness(1.06); }

.post .foot { gap: 6px; padding-top: 4px; }
.post .foot > button, .post .foot .like, .post .foot .cbtn, .post .foot .rebtn, .post .foot .reactbtn {
  height: 34px; padding: 0 12px;
  border-radius: 99px;
  font-size: 13px; font-weight: 550; color: #8e8e98;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s var(--ease-ui), color .15s var(--ease-ui), transform .16s var(--spring);
}
.post .foot > button:hover, .post .foot .like:hover, .post .foot .cbtn:hover,
.post .foot .rebtn:hover, .post .foot .reactbtn:hover {
  background: rgba(255,255,255,.07); color: #f2f2f5; transform: translateY(-1px);
}
.post .foot > button:active { transform: scale(.94); }
.post .foot .like.on, .post .foot .like.liked { color: #f87171; }
.post .foot .like.on .material-symbols-outlined,
.post .foot .like.liked .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  animation: likePop .4s var(--spring);
}
@keyframes likePop {
  0% { transform: scale(.7); }
  50% { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.post .foot .rebtn:hover { color: #5eead4; }

.pin-badge, .repost-mark {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 2px 9px; border-radius: 99px;
  background: rgba(255,255,255,.06); color: #9a9aa4;
}
.post-pinned { box-shadow: inset 0 0 0 1px rgba(250,204,21,.22), 0 1px 2px rgba(0,0,0,.3); }

/* ==========================================================================
 * 12. ПЛЕЕР СОВМЕСТНОГО ПРОСМОТРА
 * ========================================================================== */

.wt-stage { border-radius: 18px; overflow: hidden; background: #000; }
.wt-top {
  background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(0,0,0,0));
  padding: 14px 18px 26px;
  transition: opacity .22s var(--ease-ui), transform .22s var(--ease-ui);
}
.wt-h1 { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; }
.wt-h2 { font-size: 12px; color: rgba(255,255,255,.62); }

.wt-ctl {
  background: linear-gradient(0deg, rgba(0,0,0,.86) 10%, rgba(0,0,0,.5) 60%, rgba(0,0,0,0));
  padding: 26px 16px 12px;
  transition: opacity .22s var(--ease-ui), transform .22s var(--ease-ui);
}

.wt-seek {
  position: relative;
  height: 16px; display: flex; align-items: center;
  cursor: pointer;
}
.wt-seek::before {
  content: ''; position: absolute; left: 0; right: 0;
  height: 4px; border-radius: 99px;
  background: rgba(255,255,255,.22);
  transition: height .16s var(--ease-ui);
}
.wt-seek:hover::before { height: 7px; }
.wt-buffered, .wt-fill, .wt-hover {
  position: absolute; left: 0; height: 4px; border-radius: 99px;
  transition: height .16s var(--ease-ui);
}
.wt-seek:hover .wt-buffered,
.wt-seek:hover .wt-fill,
.wt-seek:hover .wt-hover { height: 7px; }
.wt-buffered { background: rgba(255,255,255,.3); }
.wt-hover { background: rgba(255,255,255,.16); width: 0; pointer-events: none; }
.wt-fill { background: linear-gradient(90deg, #fff, #d6d6de); box-shadow: 0 0 12px rgba(255,255,255,.28); }
.wt-knob {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.55);
  transform: translate(-50%, 0) scale(0);
  transition: transform .18s var(--spring);
}
.wt-seek:hover .wt-knob { transform: translate(-50%, 0) scale(1); }

.wt-time { font-size: 12px; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.72); }
.wt-crow { gap: 4px; padding-top: 6px; }
.wt-crow button {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: transparent;
  transition: background .15s var(--ease-ui), transform .16s var(--spring);
}
.wt-crow button:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); }
.wt-crow button:active { transform: scale(.9); }
#wtPlay { background: rgba(255,255,255,.12); }
#wtPlay:hover { background: rgba(255,255,255,.2); }
#wtBack10:hover .material-symbols-outlined { animation: spinBack .4s var(--ease-ui); }
#wtFwd10:hover .material-symbols-outlined { animation: spinFwd .4s var(--ease-ui); }
@keyframes spinBack { from { transform: rotate(0); } to { transform: rotate(-45deg); } }
@keyframes spinFwd { from { transform: rotate(0); } to { transform: rotate(45deg); } }

.wt-volwrap { display: flex; align-items: center; gap: 4px; }
.wt-volwrap .wt-vol {
  width: 0; opacity: 0; padding: 0;
  transition: width .22s var(--spring-soft), opacity .18s var(--ease-ui);
}
.wt-volwrap:hover .wt-vol, .wt-volwrap:focus-within .wt-vol { width: 78px; opacity: 1; }
input.wt-vol { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 99px; background: rgba(255,255,255,.28); }
input.wt-vol::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.5);
  transition: transform .15s var(--spring);
}
input.wt-vol::-webkit-slider-thumb:hover { transform: scale(1.2); }

.wt-title { font-size: 13px; font-weight: 550; color: rgba(255,255,255,.86); }
.wt-watchers, .wt-q {
  display: inline-flex; align-items: center; gap: 5px;
  height: 28px; padding: 0 10px;
  border-radius: 99px;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.82);
  transition: background .15s var(--ease-ui), transform .15s var(--spring);
}
.wt-watchers:hover, .wt-q:hover { background: rgba(255,255,255,.18); transform: translateY(-1px); }
.wt-ctl .danger, #wtEndBtn {
  background: rgba(239,68,68,.16); color: #fca5a5;
  border-radius: 99px; height: 32px; padding: 0 14px;
  transition: background .15s var(--ease-ui), transform .15s var(--spring);
}
.wt-ctl .danger:hover, #wtEndBtn:hover { background: rgba(239,68,68,.28); color: #fff; transform: translateY(-1px); }
.wt-buffer, .wt-spin { animation: fadeIn .2s var(--ease-ui); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ==========================================================================
 * 13. СЕГМЕНТЫ / ТАБЫ — быстрая анимация (без затягивания)
 * ========================================================================== */

.seg {
  display: inline-flex; gap: 2px;
  padding: 4px; border-radius: 14px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 0 0 1px var(--ln-1);
}
.seg > button {
  height: 32px; padding: 0 14px;
  border-radius: 10px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -.005em;
  color: #8e8e98; background: transparent;
  transition: color .15s var(--ease-ui), transform .15s var(--spring);
}
.seg > button:hover { color: #d8d8de; }
.seg > button.active { color: #fff; }
.seg > button:active { transform: scale(.96); }
.seg .nav-ind {
  border-radius: 10px;
  background: rgba(255,255,255,.1);
  transition: transform .16s var(--spring-soft), width .16s var(--spring-soft), height .16s var(--spring-soft), opacity .12s linear;
}

/* ==========================================================================
 * 14. МОБИЛЬНЫЕ УСТРОЙСТВА
 * ========================================================================== */

@media (max-width: 900px) {
  #cmSide { width: 240px; min-width: 240px; }
  #cmMembers { width: 216px; min-width: 216px; }
}

@media (max-width: 640px) {
  #cmSide {
    width: 100%; min-width: 0;
    border-right: none;
  }
  .cm-side-head { padding: 12px 12px 8px; }
  .cm-side-scroll { padding: 8px 8px 90px; gap: 14px; }
  .cm-chan { min-height: 44px; font-size: 15.5px; border-radius: 12px; }
  .cm-vc-user { min-height: 38px; font-size: 14.5px; }
  .cm-add-ch { min-height: 40px; }
  .cm-member { min-height: 48px; }
  .cm-msgs { padding: 10px 4px 6px; }
  .cm-msg { padding: 6px 10px; }
  .cm-msg-text { font-size: 15.5px; }
  .cm-compose { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  .cm-compose-row { min-height: 48px; border-radius: 18px; }
  .cm-ic { width: 40px; height: 40px; }
  .cm-compose-hint { display: none; }

  .post { border-radius: 16px; padding: 14px; }
  .post:hover { transform: none; }
  .post .post-text, .post .body { font-size: 15.5px; }
  .post .foot { gap: 2px; }
  .post .foot > button, .post .foot .like, .post .foot .cbtn,
  .post .foot .rebtn, .post .foot .reactbtn { height: 38px; padding: 0 10px; }
  .post .foot > button:hover { transform: none; }

  .seg { width: 100%; display: flex; }
  .seg > button { flex: 1; padding: 0 8px; height: 36px; }

  .wt-ctl { padding: 20px 10px 10px; }
  .wt-crow button { width: 42px; height: 42px; }
  .wt-crow .wt-title { display: none; }
  .wt-volwrap .wt-vol { display: none; }
  .wt-top { padding: 10px 12px 22px; }

  .vc-bar { margin: 6px; }
  #vcPill { left: 10px; right: 10px; bottom: calc(76px + env(safe-area-inset-bottom)); }
}

@media (max-width: 430px) {
  .cm-members-list { padding: 0 6px 12px; }
  .post { padding: 12px; }
  .post .who .nm { font-size: 14.5px; }
}

/* Уважаем настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  .nav-ind, .cm-chan, .cm-member, .post, .wt-crow button { transition: none !important; }
  .nav-badge, .vc-bar, #vcPill, .cm-empty-msgs { animation: none !important; }
}
body.ui-reduce-motion .nav-ind { transition: none !important; }

/* ==========================================================================
 * 15. ТОЧЕЧНЫЕ ПЕРЕОПРЕДЕЛЕНИЯ БАЗОВЫХ ПРАВИЛ
 * Старые селекторы из style.css били по новому оформлению — гасим точечно.
 * ========================================================================== */

.post .pin-badge,
.post .repost-mark {
  display: inline-flex; width: auto; align-self: flex-start;
  margin-bottom: 10px; padding: 3px 10px; border-radius: 99px;
  font-size: 11.5px; font-weight: 600;
}
.post.post-pinned { border-style: solid; border-color: rgba(250,204,21,.32); }
.post.post-pinned .pin-badge { color: #fde68a; background: rgba(250,204,21,.12); }
.post { border-color: var(--ln-1); }
.post:hover { border-color: var(--ln-2); }

.seg { border: 1px solid var(--ln-1); box-shadow: none; align-items: center; }
.seg > button { flex: 0 0 auto; border-radius: 10px; }
@media (max-width: 640px) { .seg > button { flex: 1 1 0; } }

/* Плеер: ряд контролов не должен расползаться от длинного названия ролика */
.wt-ctl .wt-crow { flex-wrap: nowrap; overflow: hidden; }
.wt-crow > button,
.wt-crow > .wt-watchers,
.wt-crow > .wt-volwrap { flex: none; }
.wt-crow .wt-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wt-crow button .material-symbols-outlined { font-size: 20px; line-height: 1; }
.wt-ctl button.danger, button#wtEndBtn {
  background: rgba(239,68,68,.16) !important;
  color: #fca5a5 !important;
  border: 0 !important; box-shadow: none !important;
  width: auto; white-space: nowrap;
}
.wt-ctl button.danger:hover, button#wtEndBtn:hover {
  background: rgba(239,68,68,.3) !important; color: #fff !important;
}

/* ============================================================================
   16. ИСПРАВЛЕНИЯ ПО ОТЗЫВУ (v141)
   Активная кнопка в баре, поле ввода в сообществах, участники,
   настройки на телефонах, срезанные боковые панели.
   ========================================================================== */

/* --- 16.1 Активный пункт: акцентная пилюля + читаемый текст -------------
   Было: индикатор серый, а текст оставался --accent-fg (чёрный) → чёрное
   на тёмном. Стало: ездящая пилюля окрашена в --accent, текст поверх неё. */
.sidebar nav.has-ind > button { position: relative; z-index: 1; }
.sidebar nav.has-ind > .nav-ind {
  background: var(--accent, #fff);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.sidebar nav.has-ind > button.active,
body.has-accent .sidebar nav.has-ind > button.active {
  background: transparent !important;
  color: var(--accent-fg, #000) !important;
  font-weight: 700;
}
.sidebar nav.has-ind > button.active .material-symbols-outlined,
body.has-accent .sidebar nav.has-ind > button.active .material-symbols-outlined {
  color: var(--accent-fg, #000) !important;
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.sidebar nav.has-ind > button.active .nav-badge {
  background: var(--accent-fg, #000);
  color: var(--accent, #fff);
}
.sidebar nav.has-ind > button.active .nav-beta { color: var(--accent-fg, #000); opacity: .55; }
/* Мобильный бар: полупрозрачная пилюля, белый текст. */
.tabbar-pill.has-ind > .nav-ind {
  background: var(--tb-active-pill, rgba(255, 255, 255, .18));
  box-shadow: none;
}
.tabbar-pill.has-ind > button.active {
  background: transparent !important;
  color: var(--tb-active, #fff) !important;
}

/* --- 16.2 Поле ввода в сообществах ------------------------------------------
   Секция 6 делала карточкой сам контейнер .cm-compose, а внутри него уже
   есть своя карточка .cm-compose-row → двойная рамка и сбитая геометрия. */
.cm-compose {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  box-sizing: border-box;
  flex-direction: column;
  align-items: stretch;
  gap: 0 !important;
}
.cm-compose-row {
  box-sizing: border-box;
  max-width: 100%;
  border-radius: 18px;
  background: var(--s-1, rgba(255, 255, 255, .045));
  border: 1px solid var(--ln-2, rgba(255, 255, 255, .08));
  box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
  transition: border-color .18s var(--ease-ui), background .18s var(--ease-ui), box-shadow .22s var(--ease-ui);
}
.cm-compose:focus-within .cm-compose-row {
  border-color: rgba(255, 255, 255, .18);
  background: var(--s-2, rgba(255, 255, 255, .07));
  box-shadow: 0 6px 22px rgba(0, 0, 0, .38);
}
.cm-compose-row textarea,
#cmInput {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.45;
}
/* Подсказка «Enter — отправить» больше не режется пополам (было height:14px). */
.cm-compose-hint {
  height: 0;
  min-height: 0;
  padding: 0 10px;
  font-size: 11px;
  line-height: 1.3;
  overflow: hidden;
  transition: height .18s var(--ease-ui), opacity .18s ease, padding .18s var(--ease-ui);
}
.cm-compose:focus-within .cm-compose-hint {
  height: auto !important;
  min-height: 18px;
  padding: 6px 10px 0;
  opacity: .58;
}

/* --- 16.3 Участники: кликабельность и карточка поверх всего ------------- */
.cm-members-list .cm-member { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cm-members-list .cm-member:active { transform: scale(.985); }
.cm-upop {
  z-index: 1300 !important;
  max-width: calc(100vw - 20px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .62), 0 0 0 1px rgba(255, 255, 255, .07);
}
.cm-upop .cm-upop-actions button { cursor: pointer; }

/* На телефоне панели участников не было вовсе (display:none) — теперь она
   открывается как шторка кнопкой в шапке канала. */
.cm-mem-btn {
  margin-left: auto;
  width: 36px; height: 36px;
  display: none;
  align-items: center; justify-content: center;
  border: 0; border-radius: 12px;
  background: var(--s-1, rgba(255, 255, 255, .05));
  color: var(--fg);
  cursor: pointer;
  transition: background .16s var(--ease-ui), transform .16s var(--spring);
}
.cm-mem-btn:hover { background: var(--s-2, rgba(255, 255, 255, .09)); }
.cm-mem-btn:active { transform: scale(.92); }
.cm-mem-btn .material-symbols-outlined { font-size: 21px; }

@media (max-width: 900px) {
  .cm-mem-btn { display: inline-flex; }
  body.cm-members-open::before {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    z-index: 318;
    animation: shdFade .2s ease both;
  }
  body.cm-members-open .cm-members-panel,
  body.cm-members-open #cmMembers {
    display: flex !important;
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 86vw);
    z-index: 319;
    padding: calc(14px + env(safe-area-inset-top)) 12px calc(14px + env(safe-area-inset-bottom));
    background: #101014;
    border-left: 1px solid var(--ln-2, rgba(255, 255, 255, .08));
    box-shadow: -24px 0 60px rgba(0, 0, 0, .6);
    animation: memSheet .26s var(--spring-soft) both;
  }
  body.cm-members-open .cm-members-list .cm-member { min-height: 48px; }
}
@keyframes memSheet { from { transform: translateX(102%); } to { transform: translateX(0); } }
@keyframes shdFade { from { opacity: 0; } to { opacity: 1; } }

/* --- 16.4 Настройки на телефонах --------------------------------------------
   Селекты превращаются в .fsel (шире стандартных) и вылезали из строки.
   На узком экране такие строки переносят управление на вторую строку. */
@media (max-width: 640px) {
  .settings-wrap {
    padding: 12px 12px calc(112px + env(safe-area-inset-bottom));
    gap: 14px;
  }
  .st-card { border-radius: 18px; }
  .st-card-h { padding: 12px 14px; }
  .st-row { padding: 12px 14px; gap: 10px; min-height: 54px; }
  .st-row-t { font-size: 14.5px; }
  .st-row-s { font-size: 12.5px; }

  .st-row:has(.fsel), .st-row:has(select), .st-row:has(.cpk), .st-row:has(input[type="range"]) {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .st-row:has(.fsel) .st-row-txt,
  .st-row:has(select) .st-row-txt,
  .st-row:has(.cpk) .st-row-txt,
  .st-row:has(input[type="range"]) .st-row-txt { flex: 1 1 100%; }
  .st-row:has(.fsel) .st-row-ctl,
  .st-row:has(select) .st-row-ctl,
  .st-row:has(.cpk) .st-row-ctl,
  .st-row:has(input[type="range"]) .st-row-ctl {
    flex: 1 1 100%;
    width: 100%;
    margin-top: 2px;
  }
  .st-row .fsel, .st-row .fsel-btn, .st-row .st-select, .st-row select,
  .st-row .cpk, .st-row .cpk-btn, .st-row input[type="range"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .fsel-pop { max-width: calc(100vw - 26px); }
  .fsel-btn { height: 42px; }
  .st-row-ctl > .material-symbols-outlined { font-size: 21px; }

  /* Модалки (оформление профиля, редактор профиля) тоже сжимаются. */
  .ap-row { flex-wrap: wrap; gap: 8px; align-items: flex-start; }
  .ap-row > span:first-child { flex: 1 1 100%; }
  .ap-ctl { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .ap-row input[type="range"] { width: 100%; }
}
/* Самые узкие экраны (iPhone SE / mini) */
@media (max-width: 400px) {
  .settings-wrap { padding-left: 10px; padding-right: 10px; }
  .st-row { padding: 11px 12px; }
  .st-card-h { font-size: 13.5px; }
}

/* --- 16.5 Боковые панели и попапы не срезаются ----------------------- */
.sidebar { overflow: visible; }
.sidebar nav { overflow: visible; }
.sidebar nav.has-ind > .nav-ind { max-width: 100%; }
.tabbar-more-popup { max-width: min(280px, calc(100vw - 24px)); }
.cm-wrap, .cm-chat, .cm-main { min-width: 0; }
#cmSide { min-width: 0; }
@media (max-width: 1180px) and (min-width: 901px) {
  #cmSide { width: 232px; min-width: 232px; }
  #cmMembers { width: 208px; min-width: 208px; }
  .cm-members-list .cm-member .nm { font-size: 13px; }
}

/* ============================================================================
   17. НАВБАР НА ПК: СВОЯ АНИМАЦИЯ У КАЖДОГО ПУНКТА (v141)
   ui-kit проставляет data-navfx="<иконка>", каждый ключ — своё движение.
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  .sidebar nav > button,
  #bugReportBtn {
    overflow: hidden;
    transition: background .16s var(--ease-ui), color .16s var(--ease-ui), transform .2s var(--spring);
  }
  .sidebar nav > button > .material-symbols-outlined {
    display: inline-flex;
    will-change: transform;
    transition: transform .26s var(--spring), color .16s ease;
  }
  /* Общий блик, пробегающий по кнопке */
  .sidebar nav > button::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, .13) 50%, transparent 66%);
    background-size: 240% 100%;
    background-position: 150% 0;
    opacity: 0;
  }
  .sidebar nav > button:hover::after { opacity: 1; animation: navSheen .6s var(--ease-ui) both; }
  .sidebar nav > button:hover { transform: translateX(2px); }
  .sidebar nav > button.active:hover { transform: none; }
  @keyframes navSheen { from { background-position: 150% 0; } to { background-position: -70% 0; } }

  /* Лента — домик подпрыгивает */
  [data-navfx="home"]:hover > .material-symbols-outlined { animation: fxHome .5s var(--spring) both; }
  @keyframes fxHome {
    0% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-5px) scale(1.1); }
    68% { transform: translateY(1px) scale(.97); }
    100% { transform: translateY(0) scale(1); }
  }
  /* Поиск — лупа поворачивается и приближается */
  [data-navfx="search"]:hover > .material-symbols-outlined { animation: fxSearch .62s var(--ease-ui) both; }
  @keyframes fxSearch {
    0% { transform: rotate(0) scale(1); }
    30% { transform: rotate(-20deg) scale(1.14); }
    62% { transform: rotate(13deg) scale(1.14); }
    100% { transform: rotate(0) scale(1); }
  }
  /* Чаты — пузырёк вскакивает */
  [data-navfx="chat_bubble"]:hover > .material-symbols-outlined { animation: fxChat .52s var(--spring) both; }
  @keyframes fxChat {
    0% { transform: scale(1) rotate(0); }
    42% { transform: scale(1.2) rotate(-9deg); }
    72% { transform: scale(.95) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
  }
  /* Музыка — эквалайзер пульсирует по вертикали */
  [data-navfx="graphic_eq"]:hover > .material-symbols-outlined { animation: fxEq .72s ease-in-out both; }
  @keyframes fxEq {
    0%, 100% { transform: scaleY(1); }
    22% { transform: scaleY(1.4) scaleX(.94); }
    48% { transform: scaleY(.7) scaleX(1.06); }
    74% { transform: scaleY(1.22) scaleX(.97); }
  }
  /* Уведомления — колокольчик звонит */
  [data-navfx="notifications"]:hover > .material-symbols-outlined {
    transform-origin: 50% 14%;
    animation: fxBell .66s var(--ease-ui) both;
  }
  @keyframes fxBell {
    0% { transform: rotate(0); }
    18% { transform: rotate(17deg); }
    38% { transform: rotate(-14deg); }
    56% { transform: rotate(10deg); }
    74% { transform: rotate(-6deg); }
    100% { transform: rotate(0); }
  }
  [data-navfx="notifications"]:hover .nav-badge { animation: badgePop .42s var(--spring) both; }
  /* Настройки — шестерёнка крутится на половину оборота */
  [data-navfx="settings"]:hover > .material-symbols-outlined {
    transform: rotate(180deg);
    transition: transform .42s var(--spring);
  }
  /* Админка — щит вспыхивает */
  [data-navfx="admin_panel_settings"]:hover > .material-symbols-outlined { animation: fxShield .58s var(--spring) both; }
  @keyframes fxShield {
    0% { transform: scale(1); filter: none; }
    45% { transform: scale(1.18); filter: drop-shadow(0 0 9px rgba(255, 255, 255, .6)); }
    100% { transform: scale(1); filter: none; }
  }
  /* Профиль — кивок */
  [data-navfx="person"]:hover > .material-symbols-outlined { animation: fxPerson .5s var(--spring) both; }
  @keyframes fxPerson {
    0% { transform: translateY(0) scale(1); }
    36% { transform: translateY(-3px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
  }
  /* Сообщества / группы — разъезжаются в стороны */
  [data-navfx="groups"]:hover > .material-symbols-outlined,
  [data-navfx="diversity_3"]:hover > .material-symbols-outlined,
  [data-navfx="forum"]:hover > .material-symbols-outlined { animation: fxGroups .55s var(--spring) both; }
  @keyframes fxGroups {
    0% { transform: scale(1) translateX(0); letter-spacing: 0; }
    45% { transform: scale(1.14) translateX(-1px); }
    100% { transform: scale(1) translateX(0); }
  }
  /* Закладки — переворот */
  [data-navfx="bookmark"]:hover > .material-symbols-outlined,
  [data-navfx="bookmarks"]:hover > .material-symbols-outlined { animation: fxFlip .55s var(--ease-ui) both; }
  @keyframes fxFlip {
    0% { transform: rotateY(0) scale(1); }
    50% { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(360deg) scale(1); }
  }
  /* Обзор / компас — полный оборот */
  [data-navfx="explore"]:hover > .material-symbols-outlined,
  [data-navfx="travel_explore"]:hover > .material-symbols-outlined { animation: fxSpin .62s var(--ease-ui) both; }
  @keyframes fxSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
  /* Видео / активности — кнопка play толкается вправо */
  [data-navfx="play_circle"]:hover > .material-symbols-outlined,
  [data-navfx="smart_display"]:hover > .material-symbols-outlined,
  [data-navfx="movie"]:hover > .material-symbols-outlined { animation: fxPlay .5s var(--spring) both; }
  @keyframes fxPlay {
    0% { transform: translateX(0) scale(1); }
    40% { transform: translateX(3px) scale(1.14); }
    100% { transform: translateX(0) scale(1); }
  }
  /* Баг-репорт — жук убегает */
  [data-navfx="bug_report"]:hover > .material-symbols-outlined { animation: fxBug .62s ease-in-out both; }
  @keyframes fxBug {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-2px) rotate(-9deg); }
    45% { transform: translateX(2px) rotate(9deg); }
    70% { transform: translateX(-2px) rotate(-5deg); }
  }
  /* Почта / сообщения — конверт приоткрывается */
  [data-navfx="mail"]:hover > .material-symbols-outlined,
  [data-navfx="drafts"]:hover > .material-symbols-outlined { animation: fxMail .55s var(--spring) both; }
  @keyframes fxMail {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-3px) scale(1.1) rotate(-4deg); }
    100% { transform: translateY(0) scale(1); }
  }
  /* Всё остальное — аккуратный подъём с пружиной */
  [data-navfx="default"]:hover > .material-symbols-outlined { animation: fxLift .48s var(--spring) both; }
  @keyframes fxLift {
    0% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-4px) scale(1.12); }
    100% { transform: translateY(0) scale(1); }
  }
  /* Кнопка «Ещё» и баг-репорт в боковой панели */
  #bugReportBtn:hover { background: var(--s-2, rgba(255, 255, 255, .08)); transform: translateX(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar nav > button:hover > .material-symbols-outlined,
  .sidebar nav > button:hover::after { animation: none !important; }
}

/* ============================================================================
   18. ШЕЙДЕРНЫЕ ФОНЫ КАРТОЧКИ ПРОФИЛЯ (v141)
   Рисуются shaders.js (WebGL), 24 пресета, выбор — в «Оформлении профиля».
   ========================================================================== */
.sn-shader {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  animation: shdIn .55s var(--ease-ui) forwards;
}
@keyframes shdIn { to { opacity: 1; } }
.has-shader { position: relative; isolation: isolate; overflow: hidden; }
.has-shader.shader-css { background-size: cover; background-position: center; }
.has-shader::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .5) 60%, rgba(0, 0, 0, .68) 100%);
  z-index: 0;
  pointer-events: none;
}
.has-shader > *:not(.sn-shader) { position: relative; z-index: 1; }
.profile-head.has-shader { border-color: rgba(255, 255, 255, .14); }
.profile-head.has-shader .ph-name,
.profile-head.has-shader .ph-user { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }
.cm-upop.has-shader .cm-upop-bg { display: none; }

/* --- выбор шейдера --- */
.shd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 8px;
  max-height: 330px;
  overflow: auto;
  padding: 2px;
  scrollbar-width: thin;
}
.shd-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  text-align: left;
  border-radius: 12px;
  transition: transform .18s var(--spring);
}
.shd-tile:hover { transform: translateY(-2px); }
.shd-tile:active { transform: scale(.97); }
.shd-prev {
  display: block;
  width: 100%;
  height: 60px;
  border-radius: 11px;
  background: #101014 center/cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  transition: box-shadow .18s var(--ease-ui);
}
.shd-tile.shd-none .shd-prev {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .05) 0 6px, transparent 6px 12px), #0e0e12;
}
.shd-tile:hover .shd-prev { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.shd-tile.on .shd-prev { box-shadow: 0 0 0 2px var(--accent, #fff), 0 8px 20px rgba(0, 0, 0, .45); }
.shd-name {
  min-width: 0;
  font-size: 11px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shd-tile.on .shd-name { color: var(--fg); }
@media (max-width: 640px) {
  .shd-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: 250px; }
  .shd-prev { height: 52px; }
}

/* ============================================================================
 * 19. v142 — ПЛЕЕР: точка на шкале и панель управления
 * В v140 я задал .wt-knob { transform: translate(-50%, 0) } и тем самым стёр
 * вертикальное центрирование translateY(-50%) из базового style.css —
 * точка уехала под дорожку. Возвращаем её на ось.
 * ========================================================================== */

.wt-knob {
  left: auto;
  right: -6px;
  top: 50%;
  transform: translateY(-50%) scale(0);
}
.wt-seek:hover .wt-knob,
.wt-seek:focus-within .wt-knob,
.wt-seek.dragging .wt-knob { transform: translateY(-50%) scale(1); }

/* Дорожка, буфер и заливка — строго по одной горизонтали */
.wt-seek::before,
.wt-buffered,
.wt-fill,
.wt-hover {
  top: 50%;
  transform: translateY(-50%);
}

/* Панель управления больше не распирает экран вправо */
.wt-ctl { box-sizing: border-box; max-width: 100%; }
.wt-seekrow { min-width: 0; max-width: 100%; }
.wt-crow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.wt-crow .wt-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wt-stage,
.wt-screen,
.wt-wrap { min-width: 0; max-width: 100%; box-sizing: border-box; }

@media (max-width: 900px) {
  /* Второстепенные кнопки не стоят того, чтобы резать экран */
  .wt-crow #wtQual,
  .wt-crow #wtChange { display: none; }
  .wt-crow { gap: 2px; }
  .wt-crow .wt-title { order: 9; flex: 1 1 100%; font-size: 12px; }
  .wt-watchers { font-size: 12px; }
}

/* ============================================================================
 * 20. v142 — ИКОНКИ: одна базовая линия везде
 * Крупный line-height из типографики сдвигал глифы относительно текста.
 * ========================================================================== */

.material-symbols-outlined {
  line-height: 1;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
/* Клик всегда попадает в кнопку, а не в глиф внутри неё */
button > .material-symbols-outlined,
a > .material-symbols-outlined { pointer-events: none; }

/* Строки «иконка + текст» — фиксированная колонка под иконку */
.tabbar-more-popup > button,
.ctx-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.tabbar-more-popup > button > .material-symbols-outlined,
.ctx-item > .material-symbols-outlined {
  width: 20px;
  min-width: 20px;
  font-size: 20px;
}
.vc-controls button > .material-symbols-outlined { font-size: 20px; }
.cm-chan-hash > .material-symbols-outlined { font-size: 18px; }
.st-row-btn { display: flex; align-items: center; gap: 10px; }

/* ============================================================================
 * 21. v142 — СООБЩЕСТВА НА ТЕЛЕФОНАХ
 * Ничто не вылезает за экран и не режется о боковую панель.
 * ========================================================================== */

@media (max-width: 900px) {
  body.view-communities { overflow-x: hidden; }
  .cm-wrap {
    max-width: 100vw;
    overflow-x: hidden;
  }
  .cm-wrap,
  .cm-side,
  .cm-main,
  .cm-chat,
  .cm-msgs,
  .cm-compose,
  .vc-stage,
  .vc-body,
  .vc-head,
  .vc-strip { min-width: 0; max-width: 100%; box-sizing: border-box; }

  /* Сцена звонка */
  .vc-stage {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    gap: 12px;
  }
  .vc-head { gap: 8px; }
  .vc-head .nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
  }
  .vc-head .cnt { display: none; }

  .vc-tiles {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 148px), 1fr)) !important;
    gap: 10px;
  }
  .vc-tile { padding: 14px 8px; border-radius: 18px; }
  .vc-tile .vc-cap { max-width: 100%; }
  .vc-tile .vc-cap .nm {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Круглые кнопки переносятся, а не уезжают за край */
  .vc-controls {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    padding-top: 4px;
  }
  .vc-controls button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: 0 0 auto;
  }

  /* Полоса участников — горизонтальная прокрутка вместо распора */
  .vc-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .vc-strip::-webkit-scrollbar { display: none; }
  .vc-strip > * { flex: 0 0 auto; }

  /* Нижняя плашка звонка */
  .vc-bar {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    box-sizing: border-box;
  }

  .cm-chan { min-height: 44px; }
  .cm-side { width: 100%; }
}

@media (max-width: 430px) {
  .vc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .vc-controls button { width: 42px; height: 42px; }
  .vc-stage { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
}

/* ============================================================================
 * 22. v142 — ШЕЙДЕР КАК ЧАСТЬ КАРТОЧКИ + прозрачность/матовость
 * Шейдер живёт внутри рамки карточки (обрезается её радиусом),
 * а не лежит подложкой где-то сзади.
 * ========================================================================== */

.has-shader {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
}
.sn-shader {
  opacity: var(--shd-o, 1);
  transition: opacity .25s var(--ease-ui);
}

/* Матовость: матовое стекло поверх шейдера, под контентом */
.has-shader > .sn-matte {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  backdrop-filter: blur(calc(var(--shd-m, 0) * 16px)) saturate(calc(1 + var(--shd-m, 0) * .2));
  -webkit-backdrop-filter: blur(calc(var(--shd-m, 0) * 16px)) saturate(calc(1 + var(--shd-m, 0) * .2));
  background: rgba(10, 10, 13, calc(var(--shd-m, 0) * .34));
  transition: background .25s var(--ease-ui);
}

/* Читаемость текста: чем больше матовость, тем меньше нужна затемняющая шторка */
.has-shader::after {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, calc(.16 - var(--shd-m, 0) * .10)) 0%,
    rgba(0, 0, 0, calc(.54 - var(--shd-m, 0) * .18)) 100%);
}

/* Плитки выбора шейдера под 10 пресетов садятся крупнее */
.shd-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }

/* Слайдеры прозрачности и матовости */
#apShdO, #apShdM { width: 150px; accent-color: var(--fg); }
.ap-row b { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 42px; text-align: right; }

@media (max-width: 640px) {
  #apShdO, #apShdM { width: 100%; }
  .shd-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); max-height: 260px; }
}

/* ============================================================================
 * 23. v142 — Громкость саундпада
 * ========================================================================== */

.sb-pop-h { display: flex; align-items: center; gap: 10px; }
.sb-pop-h > span:first-child { flex: 1 1 auto; min-width: 0; }
.sb-vol {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .07);
  transition: opacity .18s var(--ease-ui);
}
.sb-vol.off { opacity: .55; }
.sb-vol .sb-mute {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background .15s var(--ease-ui), transform .15s var(--spring);
}
.sb-vol .sb-mute:hover { background: rgba(255, 255, 255, .12); }
.sb-vol .sb-mute:active { transform: scale(.9); }
.sb-vol .sb-mute .material-symbols-outlined { font-size: 18px; }
.sb-vol input[type="range"] {
  width: 84px;
  accent-color: var(--accent, #fff);
  cursor: pointer;
}

@media (max-width: 560px) {
  .sb-vol input[type="range"] { width: 64px; }
}

/* Моторные кнопки ui-kit прячут иконку в свою обёртку (.mb-ic в меню) —
   колонка под иконку должна быть одной и той же в обоих случаях. */
.tabbar-more-popup > button > .mb-ic,
.ctx-item > .mb-ic {
  width: 20px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tabbar-more-popup > button > .mb-ic .material-symbols-outlined,
.ctx-item > .mb-ic .material-symbols-outlined { font-size: 20px; }
.tabbar-more-popup > button > .mb-tx,
.ctx-item > .mb-tx { min-width: 0; text-align: left; }

/* Жёсткий бокс иконки 20x20 в списках меню: одинаковый размер и у обычных
   кнопок, и у моторных с обёрткой — иначе колонка визуально рвётся. */
.tabbar-more-popup > button > .material-symbols-outlined,
.tabbar-more-popup > button > .mb-ic .material-symbols-outlined,
.ctx-item > .material-symbols-outlined,
.ctx-item > .mb-ic .material-symbols-outlined {
  width: 20px;
  height: 20px;
  min-width: 20px;
  font-size: 20px;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ===========================================================================
   19. v143 — КАРТОЧКА ПРОФИЛЯ БЕЗ «КВАДРАТА» ПОЗАДИ
   Шейдер живёт внутри 3D-карточки (.ph-main), а обёртка .profile-head
   не рисует ничего вообще.
   ========================================================================= */
.profile-head,
.profile-head.has-shader {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  isolation: auto !important;
}
.profile-head.has-shader::after,
.profile-head::after { display: none !important; }
/* Старые слои, если остались от прошлой версии, — не показывать. */
.profile-head > .sn-shader,
.profile-head > .sn-matte { display: none !important; }

/* Полотно и матовое стекло — самый нижний слой самой карточки. */
.profile-head .ph-main > .sn-shader,
.profile-head .ph-main > .sn-matte {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit;
}
.profile-head .ph-main.has-shader { overflow: hidden; isolation: isolate; }
.profile-head .ph-main.has-shader::after { z-index: 1; }
.profile-head .ph-main > *:not(.sn-shader):not(.sn-matte) { z-index: 2; }
.profile-head .ph-main .tilt-glare { z-index: 3; }
.profile-head .ph-main.has-shader .nm,
.profile-head .ph-main.has-shader .un { text-shadow: 0 2px 14px rgba(0, 0, 0, .55); }

/* ===========================================================================
   20. v143 — ВЕРХНЯЯ ПОЛОСА: ТОЛЬКО ЗАГОЛОВОК
   Лента / Профиль / Настройки — без чёрной плашки, границы и блюра.
   ========================================================================= */
body.view-feed .shell > .topbar,
body.view-profile .shell > .topbar,
body.view-settings .shell > .topbar {
  position: static;
  background: none !important;
  background-color: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  min-height: 0;
  padding: 20px 22px 2px;
  gap: 12px;
}
body.view-feed .shell > .topbar > .title,
body.view-profile .shell > .topbar > .title,
body.view-settings .shell > .topbar > .title {
  position: static !important;
  left: auto !important;
  transform: none !important;
  max-width: none;
  text-align: left;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.035em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
body.view-feed .shell > .topbar > .title .material-symbols-outlined,
body.view-profile .shell > .topbar > .title .material-symbols-outlined,
body.view-settings .shell > .topbar > .title .material-symbols-outlined { font-size: 25px; }

@media (max-width: 900px) {
  body.view-feed .shell > .topbar,
  body.view-profile .shell > .topbar,
  body.view-settings .shell > .topbar {
    padding: calc(12px + env(safe-area-inset-top)) 16px 2px;
  }
  body.view-feed .shell > .topbar > .title,
  body.view-profile .shell > .topbar > .title,
  body.view-settings .shell > .topbar > .title { font-size: 23px; }
}

/* ===========================================================================
   21. v143 — БОКОВАЯ ПАНЕЛЬ СООБЩЕСТВА: РОВНЫЕ ИКОНКИ, НИЧЕГО НЕ РЕЖЕТСЯ
   ========================================================================= */
.cm-side { min-width: 0; overflow: hidden; }
.cm-side-head { flex: 0 0 auto; min-width: 0; }
.cm-side-title { min-width: 0; }
.cm-side-title .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-side-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
#cmVoiceBar { flex: 0 0 auto; min-width: 0; }

/* Канал: строгая сетка «иконка / название / счётчик / крестик». */
.cm-chan {
  display: grid !important;
  grid-template-columns: 20px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
  box-sizing: border-box;
}
.cm-chan-hash {
  width: 20px; min-width: 20px; height: 20px;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1;
}
.cm-chan-hash .material-symbols-outlined { font-size: 18px; line-height: 1; }
.cm-chan-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-chan-x {
  width: 20px; min-width: 20px; height: 20px;
  display: inline-flex !important; align-items: center; justify-content: center;
}
.cm-vc-count { flex: 0 0 auto; }
.cm-group-h { min-height: 26px; gap: 8px; }
.cm-group-h > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-add-ch {
  width: 24px; height: 24px; min-width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cm-add-ch .material-symbols-outlined { font-size: 18px; line-height: 1; }
.cm-vc-users { min-width: 0; }
.cm-vc-user { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cm-vc-user .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-vc-user .av { flex: 0 0 auto; }

/* Плашка звонка в панели — кнопки не выдавливают текст за край. */
.vc-bar { display: flex; align-items: center; gap: 8px; min-width: 0; box-sizing: border-box; }
.vc-bar-info { min-width: 0; flex: 1 1 auto; }
.vc-bar-info .t { min-width: 0; }
.vc-bar-info .t b, .vc-bar-info .t i { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-bar-btns { flex: 0 0 auto; }
.vc-bar-btns button { flex: 0 0 auto; }
@media (max-width: 1200px) {
  .vc-bar { flex-wrap: wrap; }
  .vc-bar-info { flex: 1 1 100%; }
  .vc-bar-btns { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .vc-bar-btns button { width: 100%; }
}

/* ===========================================================================
   22. v143 — УЗКОЕ ОКНО НА ПК: ЧАТ НЕ ОБРЕЗАЕТСЯ ПАНЕЛЯМИ
   ========================================================================= */
@media (min-width: 901px) and (max-width: 1200px) {
  .cm-wrap { grid-template-columns: 212px minmax(0, 1fr) !important; }
  .cm-members-panel, #cmMembers { display: none !important; }
  .cm-side { width: 212px !important; min-width: 212px; }
}
@media (min-width: 1201px) and (max-width: 1440px) {
  .cm-wrap { grid-template-columns: 232px minmax(0, 1fr) 208px !important; }
  #cmMembers { width: 208px; min-width: 208px; }
}

/* ===========================================================================
   23. v143 — СООБЩЕСТВА НА ТЕЛЕФОНЕ (по мотивам Discord)
   Список каналов — отдельный экран, контент — отдельный, шапки липкие,
   плашка звонка закреплена над таббаром, всё под палец.
   ========================================================================= */
@media (max-width: 900px) {
  body.view-communities .cm-wrap { grid-template-columns: minmax(0, 1fr) !important; }

  body.view-communities .cm-side {
    width: 100% !important;
    min-width: 0;
    max-width: 100vw;
    border-right: 0;
    padding-bottom: 0 !important;
  }
  body.view-communities .cm-side-head {
    position: sticky; top: 0; z-index: 4;
    background: #0e0e12;
    padding: calc(12px + env(safe-area-inset-top)) 14px 10px;
  }
  body.view-communities .cm-side-title { min-height: 46px; font-size: 16px; }
  body.view-communities .cm-side-scroll {
    padding: 10px 12px calc(190px + env(safe-area-inset-bottom));
    gap: 18px;
  }
  body.view-communities .cm-chan {
    min-height: 48px;
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 12px;
  }
  body.view-communities .cm-chan-hash { width: 22px; min-width: 22px; }
  body.view-communities .cm-chan-hash .material-symbols-outlined { font-size: 20px; }
  body.view-communities .cm-chan-x { width: 26px; min-width: 26px; height: 26px; opacity: .6; }
  body.view-communities .cm-vc-user { min-height: 38px; padding: 5px 10px; }
  body.view-communities .cm-group-h { padding: 2px 12px 4px; }

  /* Плашка звонка — над плавающим таббаром, а не поверх списка. */
  body.view-communities:not(.cm-content-open) #cmVoiceBar {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(84px + env(safe-area-inset-bottom));
    z-index: 70;
    padding: 0 8px;
    pointer-events: auto;
  }
  body.view-communities:not(.cm-content-open) #cmVoiceBar .vc-bar {
    margin: 0;
    background: linear-gradient(180deg, rgba(20, 32, 30, .96), rgba(14, 22, 21, .96));
    box-shadow: inset 0 0 0 1px rgba(94, 234, 212, .22), 0 14px 34px rgba(0, 0, 0, .55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  body.view-communities:not(.cm-content-open) .vc-bar-btns button {
    height: 42px; min-height: 42px;
  }

  /* Экран канала */
  body.view-communities.cm-content-open .cm-main {
    display: flex; flex-direction: column;
    min-width: 0; max-width: 100vw; height: 100%;
  }
  body.view-communities.cm-content-open .cm-chat-head {
    position: sticky; top: 0; z-index: 5;
    background: rgba(12, 12, 15, .94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    min-height: 52px;
    gap: 10px;
  }
  body.view-communities.cm-content-open .cm-chat-head .nm,
  body.view-communities.cm-content-open .cm-chat-head .cm-chan-nm {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  body.view-communities.cm-content-open .cm-msgs {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  }
  body.view-communities.cm-content-open .cm-compose {
    position: sticky; bottom: 0; z-index: 4;
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    background: rgba(12, 12, 15, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-sizing: border-box;
    min-width: 0; max-width: 100vw;
  }
  body.view-communities.cm-content-open .cm-compose form,
  body.view-communities.cm-content-open .cm-compose-row { min-width: 0; width: 100%; }
  body.view-communities.cm-content-open .cm-compose input,
  body.view-communities.cm-content-open .cm-compose textarea { min-width: 0; }

  /* Кнопка «участники» и шторка — крупнее под палец. */
  .cm-mem-btn { width: 40px; height: 40px; min-width: 40px; }
  body.cm-members-open .cm-member { min-height: 46px; }

  /* Карточка участника на телефоне — нижний лист, а не попап у края. */
  .cm-upop.cm-upop-sheet {
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%);
    width: min(360px, calc(100vw - 24px));
    max-height: 78vh;
    overflow-y: auto;
    z-index: 400;
  }
}

@media (max-width: 430px) {
  body.view-communities .cm-chan { min-height: 46px; font-size: 14.5px; }
  body.view-communities .cm-side-scroll { padding-left: 10px; padding-right: 10px; }
}

/* ===========================================================================
   24. v143 — ССЫЛКИ ПРОФИЛЯ: ИКОНКИ ВМЕСТО ЭМОДЗИ
   ========================================================================= */
.prof-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.prof-link .pl-ic {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  font-size: 18px !important;
  line-height: 1 !important;
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  color: var(--lc, rgba(255, 255, 255, .82));
  flex: 0 0 auto;
}
.prof-link:hover .pl-ic { color: var(--lc, #fff); }
.prof-link .pl-tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Редактор ссылок — ровные строки с живым значком сервиса. */
.ep-link-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1.4fr) minmax(0, 1fr) 32px;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.ep-link-row .ep-l-ic {
  width: 24px; height: 24px; min-width: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: var(--s-1);
  color: var(--lc, rgba(255, 255, 255, .7));
}
.ep-link-row .ep-l-ic .material-symbols-outlined { font-size: 16px; line-height: 1; }
.ep-link-row input { min-width: 0; }
.ep-link-row .ep-l-del {
  width: 32px; height: 32px; min-width: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
@media (max-width: 560px) {
  .ep-link-row { grid-template-columns: 24px minmax(0, 1fr) 32px; }
  .ep-link-row .ep-l-label { grid-column: 2 / 4; }
}

/* v143-25 · голосовые каналы: иконки ровно в одну колонку с текстовыми */
.cm-vc-block { padding: 0; }
.cm-vc-block > .cm-chan { margin-bottom: 0; }
.cm-vc-users { padding: 2px 0 6px 26px; }
@media (max-width: 900px) { .cm-vc-users { padding-left: 30px; } }

/* v143-26 · иконка никогда не вылезает за свою кнопку */
.ep-link-row .ep-l-del, .ep-link-row .ep-l-ic { overflow: hidden; }
.cm-chan-x, .cm-chan-hash, .cm-add-ch, .vc-bar-btns button, .prof-link .pl-ic { overflow: hidden; }