/* Вкладка «Общение» (фаза 1: текст; голос/звонки — визуальные шеллы под фазу 2).
   Всё под #comms-root, чтобы не пересекаться со стилями хаба. Токены — локальные,
   с тёмной темой через тот же приём, что в артефакте-макете. */
#comms-root{
  --c-bg:#f4f1fb; --c-panel:#fff; --c-panel-2:#faf8ff; --c-ink:#1c1630; --c-muted:#6b6486;
  --c-line:#e7e1f4; --c-line-2:#efeaf9;
  --c-violet:#6d3bf5; --c-violet-ink:#5326d6; --c-violet-soft:#efe9ff;
  --c-gold:#c9962b; --c-gold-bg:#fbf3dc; --c-gold-line:#ecd6a0;
  --c-bubble-in:#f1edfa; --c-bubble-out:#6d3bf5; --c-online:#22b06b; --c-voice:#12a5b0; --c-voice-bg:#e3f6f7;
  --c-danger:#e0463a;
  /* safe-area с клампом: часть Android/MIUI возвращает мусорные значения inset. */
  --c-safe-bottom:min(env(safe-area-inset-bottom,0px),28px);
  --c-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  position:fixed; inset:0; z-index:40; background:var(--c-bg); color:var(--c-ink);
  font-family:var(--c-font); display:none; flex-direction:column; overflow:hidden;
  -webkit-font-smoothing:antialiased;
  /* Плавное изменение высоты при показе/скрытии клавиатуры: bindViewport задаёт height в px
     (предсказанную на фокусе, затем реальную), а transition сглаживает переход в темп клавиатуры,
     чтобы composer ехал, а не прыгал (раскадровка 28.09 22:37). Кривая близка к iOS-клавиатуре. */
  transition:height .24s cubic-bezier(.17,.59,.25,1);
}
@media (prefers-color-scheme: dark){
  #comms-root:not([data-theme="light"]){
    --c-bg:#0f0b1a; --c-panel:#171227; --c-panel-2:#1d1732; --c-ink:#efeaff; --c-muted:#a79dc4;
    --c-line:#2a2242; --c-line-2:#241d3a;
    --c-violet:#9b7bff; --c-violet-ink:#b7a0ff; --c-violet-soft:#241a44;
    --c-gold:#e7c368; --c-gold-bg:#2a2213; --c-gold-line:#5a4a23;
    --c-bubble-in:#241d3a; --c-bubble-out:#6d3bf5; --c-online:#2fd07f; --c-voice:#3fd0da; --c-voice-bg:#122a2c;
  }
}
/* Тёмная тема, выбранная В ХАБЕ (хаб ставит data-theme на #comms-root). Раньше тёмные токены
   включала только системная тема: при светлой системе вкладка оставалась светлой. */
#comms-root[data-theme="dark"]{
  --c-bg:#0f0b1a; --c-panel:#171227; --c-panel-2:#1d1732; --c-ink:#efeaff; --c-muted:#a79dc4;
  --c-line:#2a2242; --c-line-2:#241d3a;
  --c-violet:#9b7bff; --c-violet-ink:#b7a0ff; --c-violet-soft:#241a44;
  --c-gold:#e7c368; --c-gold-bg:#2a2213; --c-gold-line:#5a4a23;
  --c-bubble-in:#241d3a; --c-bubble-out:#6d3bf5; --c-online:#2fd07f; --c-voice:#3fd0da; --c-voice-bg:#122a2c;
  color-scheme:dark;
}

/* Показ слоя. Раньше видимость задавала секция-обёртка (её hidden); теперь #comms-root —
   элемент верхнего уровня, поэтому показ/скрытие держит класс. c-on — вкладка «Общение»
   и оверлей; c-overlay — режим поверх игры (выше рамки, свой таб-бар не нужен). */
#comms-root.c-on{display:flex}
#comms-root.c-overlay{z-index:80}
/* В оверлее поверх игры прячем внутренний таб-бар: он уводит на экраны хаба (menu/games/
   profile) через location.hash и выгрузил бы игру. Возврат в игру — по кнопке #play-chat-close. */
#comms-root.c-overlay #c-tabbar{display:none}

#comms-root *{box-sizing:border-box}
#comms-root .c-view{display:none; flex:1; min-height:0; flex-direction:column}
#comms-root .c-view.on{display:flex}
/* Слайд-переход между списком и чатом: вперёд — заезд справа, назад — слева. Анимация
   кратковременна и снимается сама (не оставляет transform), клавиатура при навигации закрыта. */
#comms-root .c-view.slidein{animation:c-nav-in .2s ease}
#comms-root .c-view.slideinback{animation:c-nav-back .2s ease}
@keyframes c-nav-in{from{transform:translateX(16%);opacity:.5}to{transform:translateX(0);opacity:1}}
@keyframes c-nav-back{from{transform:translateX(-16%);opacity:.5}to{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion: reduce){#comms-root .c-view.slidein,#comms-root .c-view.slideinback{animation:none}}

/* ongoing voice bar (persistent) */
#comms-root .ovbar{display:none;flex:0 0 auto;align-self:center;align-items:center;gap:10px;width:min(92vw,430px);height:46px;margin:8px auto 6px;padding:5px 6px 5px 13px;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:rgba(19,24,35,.88);color:#fff;box-shadow:0 10px 28px rgba(10,10,20,.24);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;-webkit-tap-highlight-color:transparent}
#comms-root .ovbar.on{display:flex}
#comms-root .ov-people{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
#comms-root .ov-avatars{display:flex;align-items:center;flex:0 0 auto}
#comms-root .ov-avatar{width:30px;height:30px;margin-left:-8px;border-radius:50%;border:1.5px solid rgba(255,255,255,.72);background:#2d3340;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.22)}
#comms-root .ov-avatar:first-child{margin-left:0}
#comms-root .ov-avatar.speaking{border-color:var(--c-violet);box-shadow:0 0 0 2px rgba(109,59,245,.28),0 2px 8px rgba(0,0,0,.22)}
#comms-root .ov-avatar.more{background:#404757;color:#fff;font-size:12px;font-weight:750}
#comms-root .ov-avatar .ava-img{width:100%;height:100%;object-fit:cover}
#comms-root .ov-eq{display:flex;align-items:flex-end;gap:3px;height:14px;flex:0 0 auto;color:var(--c-violet)}
#comms-root .ov-eq i{width:3px;background:currentColor;border-radius:2px;transform-origin:bottom;animation:c-eq 1s infinite ease-in-out}
#comms-root .ov-eq i:nth-child(2){height:14px;animation-delay:.15s}#comms-root .ov-eq i:nth-child(1){height:6px}#comms-root .ov-eq i:nth-child(3){height:10px;animation-delay:.3s}
@keyframes c-eq{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
#comms-root .ov-people b{font-size:14px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
#comms-root .ov-time{font-size:11.5px;color:rgba(255,255,255,.62);font-variant-numeric:tabular-nums}
#comms-root .ov-btn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;background:var(--c-violet);color:#fff}
#comms-root .ov-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}
#comms-root .ov-btn.muted{background:rgba(255,255,255,.14);color:#fff}
#comms-root .ov-leave{display:none}

/* search + folders */
#comms-root .searchbar{flex:0 0 auto;padding:8px 14px;display:flex;align-items:center;gap:8px}
#comms-root .searchbar .searchfield{flex:1;min-width:0}
/* Кнопка темы: значок по теме вкладки — луна в светлой, солнце в тёмной (как в шапке хаба). */
#comms-root .c-theme{flex:0 0 auto;width:34px;height:34px;border-radius:999px;border:1px solid var(--c-line);background:var(--c-panel);color:var(--c-muted);font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer}
#comms-root .c-theme::before{content:"\263E"}
#comms-root[data-theme="dark"] .c-theme::before{content:"\2600"}
#comms-root .searchfield{display:flex;align-items:center;gap:7px;background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:10px;padding:7px 11px;color:var(--c-muted);font-size:13px}
#comms-root .searchfield svg{width:15px;height:15px;stroke:var(--c-muted);fill:none;flex:0 0 auto}
#comms-root .searchfield input{border:0;background:transparent;outline:none;font:inherit;font-size:16px;color:var(--c-ink);flex:1;min-width:0}
/* Поля ввода — 16px, не меньше: при шрифте < 16px iOS увеличивает страницу на фокусе и
   сдвигает её к курсору (раскадровка 26.09, 12,5–25 с: экран зумился и ехал вбок). */
#comms-root input,#comms-root textarea{font-size:16px}
/* Видимая каретка и выделение на тёмных темах хоста (иначе сливаются с фоном).
   rgba фиксом, не color-mix — совместимость со старым WebKit в WebView. */
#comms-root input,#comms-root textarea{caret-color:var(--c-violet)}
#comms-root ::selection{background:rgba(109,59,245,.28)}
#comms-root .folders{display:flex;gap:7px;padding:0 14px 10px;overflow-x:auto;flex:0 0 auto;border-bottom:1px solid var(--c-line-2)}
#comms-root .folders::-webkit-scrollbar{height:0}
#comms-root .fchip{border:1px solid var(--c-line);background:var(--c-panel-2);color:var(--c-muted);font:inherit;font-size:12px;font-weight:650;padding:6px 13px;border-radius:999px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
#comms-root .fchip.on{background:var(--c-violet);color:#fff;border-color:var(--c-violet)}
#comms-root .fchip.add{color:var(--c-violet);font-weight:800;padding:6px 12px}

/* rows */
#comms-root .scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
#comms-root .scroll::-webkit-scrollbar{width:0}
#comms-root .grouphdr{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted);padding:12px 18px 4px}
#comms-root .row{display:flex;align-items:center;gap:12px;padding:9px 16px;cursor:pointer;position:relative}
#comms-root .row:hover{background:var(--c-violet-soft)}
#comms-root .row.hide{display:none}
#comms-root .row.pinned{background:rgba(124,77,245,.08);box-shadow:inset 3px 0 0 rgba(124,77,245,.45)}
#comms-root .ava{width:44px;height:44px;border-radius:13px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:21px;background:var(--c-panel-2);border:1px solid var(--c-line-2)}
#comms-root .row .body{flex:1;min-width:0}
#comms-root .row .n{font-size:14.5px;font-weight:650;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .row .p{font-size:12.5px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .row .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto}
#comms-root .row .time{font-size:11px;color:var(--c-muted)}
#comms-root .badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--c-violet);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
#comms-root .mute-badge{display:inline-flex;align-items:center;color:var(--c-muted)}

/* chat header (navbar) */
#comms-root .navbar{display:flex;align-items:center;gap:11px;padding:8px 14px 9px;flex:0 0 auto;border-bottom:1px solid var(--c-line-2)}
.tg-native-back #comms-root .navbar .back{display:none}
#comms-root .navbar .back{height:30px;padding:0 11px;font-size:13.5px;font-weight:600;color:var(--c-violet);border-radius:9px;border:1px solid var(--c-line);background:var(--c-panel-2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
#comms-root .ava,#comms-root .navbar .avatar{overflow:hidden}
#comms-root .ava-img{width:100%;height:100%;object-fit:cover;display:block}
#comms-root .navbar .avatar{width:36px;height:36px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:18px;background:var(--c-violet-soft)}
#comms-root .navbar .meta{min-width:0;flex:1}
#comms-root .navbar .meta.tap{cursor:pointer}
#comms-root .navbar .meta .t{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .navbar .meta .s{font-size:12px;color:var(--c-muted);display:flex;align-items:center;gap:5px}
#comms-root .dot{width:7px;height:7px;border-radius:50%;background:var(--c-online);display:inline-block;flex:0 0 auto}
#comms-root .dot.v{background:var(--c-voice)}
#comms-root .hactions{display:flex;gap:2px;margin-left:auto;flex:0 0 auto}
#comms-root .hbtn{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--c-violet)}
#comms-root .hbtn:hover{background:var(--c-violet-soft)}
#comms-root .hbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}

/* live voice capsule */
#comms-root .livebar{position:sticky;top:4px;z-index:3;align-self:center;display:flex;align-items:center;gap:10px;background:linear-gradient(120deg,var(--c-voice),#6d3bf5);color:#fff;border-radius:999px;padding:6px 8px 6px 14px;box-shadow:0 10px 24px rgba(18,120,176,.4);margin:0 0 8px}
#comms-root .livebar .eq{display:flex;align-items:flex-end;gap:2px;height:15px}
#comms-root .livebar .eq i{width:3px;background:#fff;border-radius:2px;transform-origin:bottom;animation:c-eq 1s infinite ease-in-out}
#comms-root .livebar .eq i:nth-child(2){height:15px;animation-delay:.15s}#comms-root .livebar .eq i:nth-child(1){height:6px}#comms-root .livebar .eq i:nth-child(3){height:9px;animation-delay:.3s}
#comms-root .live-ava{display:flex}
#comms-root .live-ava span{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.2);border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:11px;margin-left:-8px}
#comms-root .live-ava span:first-child{margin-left:0}
#comms-root .live-txt{font-size:12.5px;font-weight:700;white-space:nowrap}
#comms-root .live-join{border:0;background:#fff;color:var(--c-voice);font-weight:800;font-size:12px;padding:6px 14px;border-radius:999px;cursor:pointer;font:inherit;font-weight:800}

/* chat body */
/* touch-callout/user-select none: долгий тап по фону ленты не вызывает системное меню
   выделения/«поделиться» и не даёт WebView трактовать зажатие как жест (раскадровка 28.09). */
#comms-root .chat{flex:1;overflow-y:auto;padding:10px 14px;display:flex;flex-direction:column;gap:11px;background:radial-gradient(circle at 20% 12%,var(--c-violet-soft) 0,transparent 42%),radial-gradient(circle at 88% 78%,var(--c-voice-bg) 0,transparent 40%),var(--c-panel-2);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
#comms-root .chat::-webkit-scrollbar{width:0}
#comms-root .daysep{align-self:center;font-size:12px;color:var(--c-muted);background:var(--c-panel);border:1px solid var(--c-line-2);padding:4px 13px;border-radius:999px;margin:4px 0}
/* Крупнее бабл: 16px текст, больше отступы и радиус — сообщения читаемее, меньше «мелочи» на экране. */
#comms-root .msg{max-width:82%;padding:11px 15px;border-radius:20px;font-size:16px;line-height:1.35;position:relative;word-wrap:break-word;overflow-wrap:anywhere}
#comms-root .msg .who{font-size:13px;font-weight:700;color:var(--c-violet-ink);margin-bottom:3px}
#comms-root .msg .tm{font-size:11px;color:var(--c-muted);float:right;margin:7px 0 -2px 12px}
#comms-root .msg.in{align-self:flex-start;background:var(--c-bubble-in);border-bottom-left-radius:5px}
#comms-root .msg.out{align-self:flex-end;background:var(--c-bubble-out);color:#fff;border-bottom-right-radius:5px}
#comms-root .msg.out .tm{color:rgba(255,255,255,.75)}
/* галочки прочтения на своих сообщениях: ✓ доставлено / ✓✓ (или «✓ N» в канале) прочитано */
#comms-root .msg .ticks{margin-left:5px;font-size:11px;opacity:.75;letter-spacing:-1px}
#comms-root .msg.out .ticks.read{color:#8fe0ff;opacity:1}
/* цитата ответа внутри бабла */
#comms-root .msg .replyquote{display:block;border-left:2.5px solid currentColor;padding:2px 0 2px 8px;margin-bottom:5px;opacity:.85;cursor:pointer;max-width:100%}
#comms-root .msg .replyquote b{display:block;font-size:12.5px;font-weight:700}
#comms-root .msg .replyquote span{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.9}
#comms-root .msg.in .replyquote{border-color:var(--c-violet)}
#comms-root .msg.flash{animation:c-flash 1.2s ease}
@keyframes c-flash{0%,100%{box-shadow:none}25%{box-shadow:0 0 0 3px rgba(124,77,245,.5)}}
/* панель «ответ на …» над композером */
#comms-root .replybar{display:none;align-items:center;gap:8px;padding:7px 12px 0}
#comms-root .replybar.on{display:flex}
#comms-root .replybar .rq{flex:1;min-width:0;border-left:2.5px solid var(--c-violet);padding-left:9px}
#comms-root .replybar .rq b{display:block;font-size:12.5px;color:var(--c-violet-ink)}
#comms-root .replybar .rq span{display:block;font-size:13px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .replybar .rx{flex:0 0 auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--c-muted);cursor:pointer;font-size:16px}
/* бар закреплённого сообщения (под шапкой чата) */
#comms-root .pinbar{display:none;align-items:center;gap:8px;padding:7px 12px;border-bottom:1px solid var(--c-line-2);background:var(--c-panel);flex:0 0 auto}
#comms-root .pinbar.on{display:flex}
#comms-root .pinbar .pq{flex:1;min-width:0;cursor:pointer;border-left:2.5px solid var(--c-violet);padding-left:9px}
#comms-root .pinbar .pq b{display:block;font-size:12px;color:var(--c-violet-ink)}
#comms-root .pinbar .pq span{display:block;font-size:13px;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .pinbar .px{flex:0 0 auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--c-muted);cursor:pointer;font-size:15px}
/* пиллы реакций под сообщением */
#comms-root .msg .reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;clear:both}
#comms-root .msg .rpill{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;line-height:1;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.16);cursor:pointer;user-select:none}
#comms-root .msg.in .rpill{background:rgba(124,77,245,.12)}
#comms-root .msg .rpill.mine{background:rgba(255,255,255,.35)}
#comms-root .msg.in .rpill.mine{background:var(--c-violet);color:#fff}
/* «изменено» и удалённое сообщение */
#comms-root .msg .edt{font-size:10px;opacity:.7;margin-right:6px;font-style:italic}
#comms-root .msg.out .edt{color:rgba(255,255,255,.75)}
#comms-root .msg.deleted{opacity:.6;font-style:italic;font-size:14px}
/* контекст-меню сообщения (long-press) */
#comms-root .msgmenu{position:absolute;inset:0;z-index:46;display:none}
#comms-root .msgmenu.on{display:block}
#comms-root .mm-bd{position:absolute;inset:0;background:rgba(10,6,20,.4)}
#comms-root .mm-box{position:fixed;min-width:210px;max-width:80%;background:var(--c-panel);border:1px solid var(--c-line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);padding:6px;animation:c-in .14s ease}
#comms-root .mm-emojis{display:flex;gap:2px;justify-content:space-between;padding:4px 4px 8px;border-bottom:1px solid var(--c-line-2);margin-bottom:4px}
#comms-root .mm-emoji{font-size:25px;cursor:pointer;padding:3px 5px;border-radius:8px;line-height:1}
#comms-root .mm-emoji:active{background:var(--c-violet-soft)}
#comms-root .mm-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--c-ink);cursor:pointer}
#comms-root .mm-item:hover{background:var(--c-violet-soft)}
#comms-root .mm-item.danger{color:var(--c-danger)}
#comms-root .mm-more{opacity:.6}
/* полный пикер реакций (нижний лист с сеткой эмодзи) */
#comms-root .emojipick{position:absolute;inset:0;z-index:47;display:none}
#comms-root .emojipick.on{display:block}
#comms-root .ep-bd{position:absolute;inset:0;background:rgba(10,6,20,.4)}
#comms-root .ep-sheet{position:absolute;left:0;right:0;bottom:0;background:var(--c-panel);border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -10px 30px rgba(0,0,0,.3);max-height:46%;overflow-y:auto;padding:14px 12px calc(14px + var(--c-safe-bottom));animation:c-sheetup .2s ease}
@keyframes c-sheetup{from{transform:translateY(100%)}to{transform:translateY(0)}}
#comms-root .ep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:4px}
#comms-root .ep-em{font-size:26px;text-align:center;padding:6px 0;border-radius:10px;cursor:pointer;line-height:1}
#comms-root .ep-em:active{background:var(--c-violet-soft)}
#comms-root .msg.sys{align-self:center;background:var(--c-panel);border:1px solid var(--c-line-2);color:var(--c-muted);font-size:11.5px;max-width:90%;text-align:center;padding:4px 12px;border-radius:999px}
#comms-root .typing{align-self:flex-start;background:var(--c-bubble-in);padding:10px 14px;border-radius:16px;border-bottom-left-radius:5px;display:none;gap:4px}
#comms-root .typing.on{display:flex}
#comms-root .typing i{width:7px;height:7px;border-radius:50%;background:var(--c-muted);animation:c-bl 1.2s infinite}
#comms-root .typing i:nth-child(2){animation-delay:.2s}#comms-root .typing i:nth-child(3){animation-delay:.4s}
@keyframes c-bl{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* composer */
/* align-items:flex-end — при многострочном вводе кнопки прижаты к низу, а не по центру. */
#comms-root .composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px;padding:9px 12px;border-top:1px solid var(--c-line-2);background:var(--c-panel)}
#comms-root .composer .plus{width:34px;height:34px;border-radius:50%;border:1px solid var(--c-line);background:var(--c-panel-2);display:flex;align-items:center;justify-content:center;color:var(--c-muted);flex:0 0 auto;cursor:pointer;font-size:23px;font-weight:300;line-height:0;padding-bottom:2px}
#comms-root .composer .field{flex:1;min-width:0;background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--c-ink);display:flex}
/* textarea composer: рост до 120px, дальше свой скролл; 16px — без зума на фокусе (iOS). */
#comms-root .composer .field textarea{border:0;background:transparent;outline:none;font:inherit;font-size:16px;line-height:1.3;color:var(--c-ink);width:100%;resize:none;max-height:120px;overflow-y:auto;display:block;padding:0}
#comms-root .composer .field textarea::-webkit-scrollbar{width:0}
#comms-root .composer .send{width:36px;height:36px;border-radius:50%;background:var(--c-violet);flex:0 0 auto;display:flex;align-items:center;justify-content:center;cursor:pointer}
#comms-root .composer .send svg{width:17px;height:17px;stroke:#fff;fill:none}
/* медиа в сообщении */
#comms-root .msg.has-media{padding:5px 5px 7px}
#comms-root .att-img{max-width:220px;max-height:280px;border-radius:12px;display:block;margin-bottom:4px;cursor:pointer;object-fit:cover}
#comms-root .att-vid{max-width:240px;max-height:300px;border-radius:12px;display:block;margin-bottom:4px;background:#000}
#comms-root .lightbox{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.92);padding:12px}
#comms-root .lightbox.on{display:flex}
#comms-root .lightbox img{max-width:100%;max-height:100%;object-fit:contain}

/* members */
#comms-root .mrow{display:flex;align-items:center;gap:12px;padding:8px 16px}
#comms-root .mava{width:42px;height:42px;border-radius:50%;background:var(--c-panel-2);border:1px solid var(--c-line-2);display:flex;align-items:center;justify-content:center;font-size:20px;flex:0 0 auto}
#comms-root .mava.plus{color:var(--c-violet);border:1px dashed var(--c-violet);background:var(--c-violet-soft);font-weight:800}
#comms-root .mbody{flex:1;min-width:0}
#comms-root .mn{font-size:14px;font-weight:650;display:flex;align-items:center;gap:7px}
#comms-root .role{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:6px;text-transform:uppercase}
#comms-root .role.admin{background:var(--c-gold-bg);color:var(--c-gold);border:1px solid var(--c-gold-line)}
#comms-root .role.mod{background:var(--c-violet-soft);color:var(--c-violet-ink)}
#comms-root .ms{font-size:12px;color:var(--c-muted)}

/* create folder / add people pickers */
#comms-root .nf-field{padding:12px 16px 4px}
#comms-root .nf-input{width:100%;background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:12px;padding:11px 13px;color:var(--c-ink);font:inherit;font-size:16px;outline:none}
#comms-root .nf-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--c-muted);padding:14px 18px 4px}
#comms-root .pickrow{display:flex;align-items:center;gap:12px;padding:6px 16px;cursor:pointer}
#comms-root .pickrow:hover{background:var(--c-violet-soft)}
#comms-root .pickrow .pn{flex:1;min-width:0;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .check{width:22px;height:22px;border-radius:50%;border:2px solid var(--c-line);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
#comms-root .pickrow.sel .check{background:var(--c-violet);border-color:var(--c-violet)}
#comms-root .check svg{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:2.5;opacity:0}
#comms-root .pickrow.sel .check svg{opacity:1}
#comms-root .nf-create{margin:14px 16px 14px;padding:12px;border:0;border-radius:12px;background:var(--c-violet);color:#fff;font-weight:800;font-size:14px;font:inherit;font-weight:800;cursor:pointer;width:calc(100% - 32px)}

/* long-press context menu */
#comms-root .ctx-layer{position:absolute;inset:0;z-index:44;display:none}
#comms-root .ctx-layer.on{display:block}
#comms-root .ctx-backdrop{position:absolute;inset:0;background:rgba(10,6,20,.4)}
#comms-root .ctx-menu{position:absolute;min-width:210px;max-width:260px;background:var(--c-panel);border:1px solid var(--c-line);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);padding:6px;transform-origin:top center;animation:c-in .14s ease}
@keyframes c-in{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
#comms-root .ctx-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:600;color:var(--c-ink);cursor:pointer}
#comms-root .ctx-item:hover{background:var(--c-violet-soft)}
#comms-root .ctx-item.danger{color:var(--c-danger)}
#comms-root .ctx-sep{height:1px;background:var(--c-line-2);margin:4px 8px}
#comms-root .ctx-title{font-size:11px;color:var(--c-muted);padding:9px 12px 5px;font-weight:700}
#comms-root .toast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);background:#1c1630;color:#fff;font-size:12.5px;padding:9px 15px;border-radius:999px;z-index:50;opacity:0;transition:opacity .2s;pointer-events:none;white-space:nowrap;max-width:88%}
#comms-root .toast.on{opacity:1}

/* voice room + call (visual shells, фаза 2) */
#comms-root .vroom{position:absolute;left:0;right:0;top:0;bottom:auto;z-index:45;display:none;justify-content:center;background:linear-gradient(180deg,rgba(10,6,20,.28),rgba(10,6,20,0));padding:7px 10px 0;pointer-events:none}
#comms-root .vroom.on{display:flex;animation:c-vroom-drop .18s ease}
/* та же карточка, что «Голосовой канал» в игре (styles.css .gv-card): скругление, градиент, обводка, объёмные кнопки */
#comms-root .vroom-card{width:min(94vw,420px);max-height:min(48vh,380px);background:linear-gradient(165deg,#251A5C 0%,#170E3A 60%,#120A2E 100%);color:#fff;border:1px solid rgba(139,92,246,.55);border-radius:28px;box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden;pointer-events:auto}
#comms-root .vroom-top{display:flex;align-items:center;padding:16px 16px 4px 18px}
#comms-root .vroom-ttl{display:flex;flex-direction:column;min-width:0}
#comms-root .vroom-ttl b{font:600 19px/1.15 "Inter",-apple-system,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .vroom-ttl span{display:none}
#comms-root .vroom-x{margin-left:auto;cursor:pointer;color:#C9B8FF;width:36px;height:36px;display:flex;align-items:center;justify-content:center}
#comms-root .vroom-x svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
/* по 4 в ряд, видно два ряда, остальные — прокруткой; отступ внутри — под свечение говорящего, край его не режет */
#comms-root .vroom-grid{--vp-row:88px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:var(--vp-row);align-items:start;gap:12px 10px;padding:16px;max-height:calc(var(--vp-row)*2 + 12px + 16px);overflow-y:auto;scroll-padding:16px 0;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
#comms-root .vroom-grid::-webkit-scrollbar{display:none}
#comms-root .vroom-grid .vp{scroll-snap-align:start}
#comms-root .vp{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
#comms-root .vp-ava{width:min(64px,100%);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#3B2A86,#24175A);display:flex;align-items:center;justify-content:center;font-size:28px;position:relative;border:2px solid rgba(167,139,250,.7)}
#comms-root .vp.speaking .vp-ava{border-color:#A78BFA;animation:c-spk 1.1s infinite}
@keyframes c-spk{0%,100%{box-shadow:0 0 0 3px rgba(167,139,250,.3),0 0 10px rgba(139,92,246,.45)}50%{box-shadow:0 0 0 6px rgba(167,139,250,.38),0 0 16px rgba(139,92,246,.6)}}
#comms-root .vp-name{font-size:13px;font-weight:500;color:#EDE7FF;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .vroom-ctrls{display:flex;justify-content:center;gap:18px;margin:4px 16px 0;padding:14px 0 16px;border-top:1px solid rgba(167,139,250,.18)}
#comms-root .vroom-ctrls button{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .12s ease,background .2s}
#comms-root .vroom-ctrls button:active{transform:scale(.92)}
#comms-root .vroom-ctrls svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;}

#comms-root .vroom-ctrls .vr-cam[hidden]{display:none}
#comms-root .vroom-ctrls .vr-mic:not(.muted),#comms-root .vroom-ctrls .vr-cam.on{background:linear-gradient(135deg,#5B16E0,#C026D3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
#comms-root .vroom-ctrls .vr-leave{background:linear-gradient(135deg,#FF5273,#E5174A);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* мьют игроков в голосе (docs/player-mute-plan.md) */
#comms-root .ov-btn.locked,#comms-root .vr-mic.locked{opacity:.45}
#comms-root .ov-avatar[data-identity]{cursor:pointer}
#comms-root .ov-avatar.peer-muted{opacity:.45;filter:grayscale(1)}
#comms-root .vp[data-identity]{cursor:pointer}
#comms-root .vp.peer-muted .vp-ava{opacity:.55}
#comms-root .vp-off{position:absolute;right:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;background:var(--c-danger);display:flex;align-items:center;justify-content:center}
#comms-root .vp-off svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:2.2}
/* действия с выбранным игроком — внутри тёмной панели голоса, на месте ряда кнопок */
#comms-root .vp.sel .vp-ava{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18);animation:none}
#comms-root .vroom-peer{display:none;padding:2px 12px 12px}
#comms-root .vroom-card.peer-on .vroom-peer{display:block}
#comms-root .vroom-card.peer-on .vroom-ctrls{display:none}
#comms-root .vroom-card.peer-on{max-height:min(60vh,460px)}
#comms-root .vpp-head{padding:2px 2px 8px;min-width:0}
#comms-root .vpp-head b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .vpp-head span{font-size:11.5px;color:#bcb0e0}
#comms-root .vpp-vol{display:flex;align-items:center;gap:10px;padding:0 2px 10px;color:#cfc6ef}
#comms-root .vpp-vol-ic{display:flex}
#comms-root .vpp-vol svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
#comms-root .vpp-vol input{flex:1 1 auto;min-width:0;accent-color:var(--c-violet)}
#comms-root .vpp-vol output{flex:0 0 44px;text-align:right;font-size:11.5px;color:#cfc6ef;font-variant-numeric:tabular-nums}
#comms-root .vpp-btns{display:flex;justify-content:center;gap:10px}
#comms-root .vpp-btn{flex:0 0 72px;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;color:#fff;font:inherit;cursor:pointer;padding:0}
#comms-root .vpp-ic{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);transition:background .15s}
#comms-root .vpp-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
#comms-root .vpp-btn:hover .vpp-ic{background:rgba(255,255,255,.22)}
#comms-root .vpp-btn.on .vpp-ic{background:#6d3bf5}
#comms-root .vpp-btn.warn .vpp-ic{color:#f2b84b}
#comms-root .vpp-lbl{font-size:10.5px;font-weight:600;color:#ddd5f6;white-space:nowrap}
#comms-root .vpp-chips{display:flex;flex-wrap:wrap;gap:7px}
#comms-root .vpp-chip{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:12.5px;font-weight:600;padding:8px 12px;border-radius:999px;cursor:pointer}
#comms-root .vpp-chip.danger{background:var(--c-danger);border-color:var(--c-danger)}
#comms-root .vpp-chip.ghost{background:none;color:#cfc6ef}
#comms-root .vpp-btn:focus-visible .vpp-ic,#comms-root .vpp-chip:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes c-vroom-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}

#comms-root .vcall{position:absolute;inset:0;z-index:46;display:none;flex-direction:column;background:radial-gradient(circle at 50% 32%,#33265f,#100a26 75%);color:#fff}
#comms-root .vcall.on{display:flex;animation:c-in .16s ease}
#comms-root .vc-video{position:absolute;inset:0;display:none;background:#000;z-index:0}
#comms-root .vc-video.on{display:block}
/* видео абсолютом внутри контейнера — не зависит от высоты потока (иначе на iOS
   даёт «полосу» сверху), всегда заполняет экран через object-fit:cover */
#comms-root .vc-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
#comms-root .vc-self video{width:100%;height:100%;object-fit:cover}
#comms-root .vc-self{overflow:hidden;z-index:3}
#comms-root .vc-remote{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;position:relative;z-index:1}
#comms-root .vc-ava{width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:50px;border:2px solid rgba(255,255,255,.15)}
#comms-root .vc-name{font-size:19px;font-weight:700}
#comms-root .vc-status{font-size:13px;color:#c7bdec}
#comms-root .vc-self{position:absolute;top:14px;right:14px;width:72px;height:100px;border-radius:16px;background:linear-gradient(160deg,#3a2d6e,#221847);display:flex;align-items:center;justify-content:center;font-size:28px;border:2px solid rgba(255,255,255,.15)}
#comms-root .vcall.audio .vc-self{display:none}
/* панель управления — всегда поверх видео, прижата к низу, с учётом safe-area.
   Кнопка сброса не должна пропадать ни на какой стадии звонка. */
#comms-root .vc-ctrls{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:16px;padding:18px 16px calc(26px + var(--c-safe-bottom));background:linear-gradient(to top,rgba(8,5,20,.55),rgba(8,5,20,0))}
#comms-root .vc-btn{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff}
#comms-root .vc-btn.off{background:rgba(255,255,255,.14)}
#comms-root .vc-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
#comms-root .vc-only-audio{display:none}
#comms-root .vcall.audio .vc-only-video{display:none}
#comms-root .vcall.audio .vc-only-audio{display:flex}
#comms-root .vc-end{background:var(--c-danger)}
#comms-root .vc-end svg{transform:rotate(135deg)}
#comms-root .vc-accept{background:var(--c-online)}

/* comms own tab bar (hub tabbar hidden while comms is full-screen) */
/* Геометрия — ровно как у таб-бара хаба (.tabbar в styles.css: высота --tabbar-h и отступ снизу
   на весь safe-area без клампа), иначе при переходе на «Общение» кнопки прыгают на несколько px. */
#comms-root .c-tabbar{flex:0 0 auto;display:flex;align-items:center;gap:6px;height:var(--tabbar-h,68px);padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border, var(--c-line-2));background:var(--surface, var(--c-panel))}
/* Клавиатура открыта (класс .kb ставит bindViewport в comms-web.js): таб-бару между полем
   и клавиатурой не место — всё место отдаём ленте сообщений. */
#comms-root.kb .c-tabbar{display:none}
/* размеры и вид — как у .tab хаба в styles.css: подписи под значками, активная вкладка — плашка */
#comms-root .c-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--c-muted);cursor:pointer;position:relative;height:48px;border-radius:16px;font:700 11px "Inter",sans-serif;transition:background .15s,color .15s}
#comms-root .c-tab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#comms-root .c-tab.on{background:var(--c-violet);color:#fff;box-shadow:0 4px 12px rgba(109,40,217,.38)}
#comms-root .c-tab .tbadge{position:absolute;top:-2px;right:calc(50% - 18px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--c-violet);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--c-panel)}

#comms-root .empty{padding:40px 20px;text-align:center;color:var(--c-muted);font-size:13px}

/* voice discovery */
#comms-root .voice-entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px}
#comms-root .voice-card{min-height:132px;text-align:left;border:0;border-radius:24px;background:var(--c-panel-2);color:var(--c-ink);padding:18px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;cursor:pointer;box-shadow:0 1px 0 var(--c-line-2) inset}
#comms-root .voice-card b{font:800 25px/1.12 "Inter",sans-serif;letter-spacing:0}
#comms-root .voice-card em{font-style:normal;font-size:18px;font-weight:800;color:var(--c-online)}
#comms-root .voice-ic{width:58px;height:58px;border-radius:22px;background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.34),transparent 28%),linear-gradient(145deg,#b995ff,var(--c-violet) 58%,#3b0d99);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 0 var(--c-violet-ink),0 14px 26px rgba(109,59,245,.32),inset 0 1px 0 rgba(255,255,255,.28)}
#comms-root .voice-ic svg{width:42px;height:42px;display:block;filter:drop-shadow(0 3px 3px rgba(35,12,92,.25))}
#comms-root .voice-ic .hype-bubble{stroke:#fff;stroke-width:3;stroke-linejoin:round}
#comms-root .voice-ic .hype-bubble.back{fill:rgba(255,255,255,.18);opacity:.78;transform:translate(-2px,3px)}
#comms-root .voice-ic .hype-bubble.front{fill:rgba(255,255,255,.1)}
#comms-root .voice-ic .hype-spark{fill:#ffd15a;stroke:#fff3c4;stroke-width:1.4}
#comms-root .voice-ic .hype-pad{fill:rgba(255,255,255,.12);stroke:#fff;stroke-width:3;stroke-linejoin:round}
#comms-root .voice-ic .hype-wave{fill:none;stroke:#ffd15a;stroke-width:4;stroke-linecap:round}
#comms-root .voice-ic .hype-dpad{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round}
#comms-root .voice-ic .hype-dot{fill:#fff}
#comms-root #v-voicegames{background:radial-gradient(circle at 50% -120px,rgba(91,56,255,.26),transparent 310px),#080514}
#comms-root #v-voicegames .navbar,#comms-root #v-voicerooms .navbar{min-height:96px;padding:18px 38px 10px;border:0;background:transparent;display:grid;grid-template-columns:110px 1fr 110px;align-items:center}
#comms-root #v-voicegames .navbar .back,#comms-root #v-voicerooms .navbar .back{font-size:21px;font-weight:650;color:#a865ff}
#comms-root #v-voicegames .navbar .back::before,#comms-root #v-voicerooms .navbar .back::before{border-color:#a865ff;width:17px;height:17px;border-width:0 0 5px 5px;margin-right:12px}
#comms-root #v-voicegames .navbar .meta,#comms-root #v-voicerooms .navbar .meta{text-align:center;min-width:0}
#comms-root #v-voicegames .navbar .t,#comms-root #v-voicerooms .navbar .t{font-size:25px;line-height:1.05;font-weight:900;color:#fff}
#comms-root #v-voicegames .navbar .s,#comms-root #v-voicerooms .navbar .s{font-size:17px;font-weight:650;color:#b8aee5;margin-top:4px}
#comms-root #v-voicegames .navbar .s::before,#comms-root #v-voicerooms .navbar .s::before{content:"";display:inline-block;width:11px;height:11px;border-radius:50%;background:#33f09a;margin-right:8px;vertical-align:1px;box-shadow:0 0 12px rgba(51,240,154,.55)}
#comms-root .voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:8px 38px 18px}
#comms-root .voice-live-summary{grid-column:1/-1;min-height:104px;border:1px solid rgba(168,101,255,.84);border-radius:28px;background:radial-gradient(circle at 75% 36%,rgba(142,80,255,.34),transparent 34%),linear-gradient(135deg,rgba(62,31,125,.94),rgba(15,10,38,.98));color:#fff;box-shadow:0 0 0 1px rgba(177,125,255,.18),0 18px 38px rgba(73,34,158,.34),inset 0 1px 0 rgba(255,255,255,.16);display:flex;align-items:center;gap:13px;padding:17px 31px}
#comms-root .voice-live-summary>b{font-size:39px;line-height:1;font-weight:950;letter-spacing:0}
#comms-root .voice-live-summary>span:not(.mini-avatars){font-size:23px;font-weight:850;color:#cabdff}
#comms-root .voice-live-summary i,#comms-root .voice-live-summary strong{margin-left:auto;color:#b879ff;display:flex;filter:drop-shadow(0 0 13px rgba(168,101,255,.54))}
#comms-root .voice-live-summary svg{width:79px;height:34px;stroke:currentColor;fill:none;stroke-width:2.9;stroke-linecap:round}
#comms-root .voice-live-summary em{font-style:normal;font-size:13px;font-weight:800;color:var(--c-online);display:flex;align-items:center;gap:6px;margin-left:2px}
#comms-root .voice-live-summary em i,.hype-game-card em i,.hype-room-card em i{width:8px;height:8px;border-radius:50%;background:var(--c-online);display:inline-block;flex:0 0 auto}
#comms-root .mini-avatars{display:flex;align-items:center;flex:0 0 auto}
#comms-root .voice-live-summary .mini-avatars span{width:50px;height:50px;margin-left:-14px;font-size:22px;border-width:3px}
#comms-root .mini-avatars span{width:28px;height:28px;margin-left:-8px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#2a214b;border:2px solid rgba(151,112,255,.76);font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.22)}
#comms-root .mini-avatars span:first-child{margin-left:0}
#comms-root .mini-avatars .more{background:#30295c;color:#dcd3ff;font-weight:850;font-size:11px}
#comms-root .game-voice{border:1px solid rgba(139,92,246,.58);background:linear-gradient(180deg,rgba(28,23,58,.98),rgba(13,11,32,.98));color:var(--c-ink);border-radius:28px;padding:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;cursor:pointer;min-width:0;overflow:hidden;box-shadow:0 13px 30px rgba(13,8,34,.42),inset 0 1px 0 rgba(255,255,255,.12)}
#comms-root .game-voice span:last-child{min-width:0;display:flex;flex-direction:column;gap:9px;padding:17px 31px 20px}
#comms-root .game-voice b{font-size:20px;line-height:27px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
#comms-root .game-voice em,#comms-root .room-row em{font-style:normal;font-size:19px;color:var(--c-online);font-weight:850;white-space:nowrap;display:flex;align-items:center;gap:10px}
#comms-root .game-voice em.idle,#comms-root .room-row em.idle{color:#b9acd8}
#comms-root .game-voice em.idle i,#comms-root .room-row em.idle i{background:#8e80ad}
#comms-root .game-voice-art{height:179px;background:radial-gradient(circle at 72% 22%,rgba(255,209,90,.2),transparent 28%),radial-gradient(circle at 30% 80%,rgba(139,92,246,.35),transparent 34%),linear-gradient(135deg,#34205f,#151027);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
#comms-root .game-voice-art::after{content:"";position:absolute;inset:auto 0 0;height:44px;background:linear-gradient(to top,rgba(13,11,32,.42),rgba(13,11,32,0));pointer-events:none}
#comms-root .game-voice-art .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#comms-root .game-voice-art .cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 55% 38%,rgba(166,106,255,.34),transparent 34%),linear-gradient(135deg,#3c2170,#151027)}
#comms-root .game-voice-art .cover-fallback::before{content:"";position:absolute;left:7%;right:7%;bottom:14%;height:30%;border-radius:999px;background:rgba(124,73,255,.34);filter:blur(18px)}
#comms-root .game-voice-art .ava-img{position:relative;z-index:1;width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.38))}
#comms-root .game-voice-art>i{position:absolute;right:17px;top:17px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#a96dff,var(--c-violet));color:#fff;box-shadow:0 5px 0 #7440cf,0 14px 22px rgba(109,59,245,.36),inset 0 1px 0 rgba(255,255,255,.22)}
#comms-root .game-voice-art svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
#comms-root .rooms-head{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px 14px}
#comms-root .room-create,#comms-root .room-link{min-height:96px;border:1px solid rgba(139,92,246,.42);border-radius:18px;background:radial-gradient(circle at 70% 16%,rgba(255,255,255,.22),transparent 30%),linear-gradient(145deg,#a66aff,var(--c-violet) 58%,#3b0d99);color:#fff;font:inherit;font-size:14px;font-weight:850;padding:13px;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;text-align:left;box-shadow:0 7px 0 var(--c-violet-ink),0 14px 24px rgba(109,59,245,.28)}
#comms-root .room-link{background:radial-gradient(circle at 70% 16%,rgba(255,255,255,.18),transparent 30%),linear-gradient(145deg,#322752,#17122d);color:#fff}
#comms-root .room-create span,#comms-root .room-link span{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:22px}
#comms-root .room-row{width:calc(100% - 28px);margin:0 14px 10px;border:1px solid rgba(139,92,246,.34);background:linear-gradient(135deg,rgba(33,27,59,.98),rgba(18,15,34,.98));color:var(--c-ink);border-radius:18px;padding:10px;display:grid;grid-template-columns:92px minmax(0,1fr) 42px;align-items:center;gap:11px;text-align:left;cursor:pointer;box-shadow:0 8px 20px rgba(16,10,32,.2),inset 0 1px 0 rgba(255,255,255,.06)}
#comms-root .room-art{height:72px;border-radius:15px;background:radial-gradient(circle at 65% 18%,rgba(255,209,90,.18),transparent 30%),radial-gradient(circle at 25% 82%,rgba(139,92,246,.38),transparent 34%),linear-gradient(135deg,#42168b,#151027);display:flex;align-items:center;justify-content:center;font-size:34px;overflow:hidden;position:relative}
#comms-root .room-art::before{content:"";position:absolute;inset:9px;border-radius:15px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.15),rgba(139,92,246,.08) 48%,transparent 72%)}
#comms-root .room-art .ava-img{position:relative;z-index:1;width:60%;height:60%;object-fit:contain;filter:drop-shadow(0 9px 13px rgba(0,0,0,.34))}
#comms-root .room-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
#comms-root .room-swipe{position:relative;margin:0 14px 10px;border-radius:18px;overflow:hidden}
#comms-root .room-swipe .room-row{position:relative;z-index:1;width:100%;margin:0;transition:transform .22s ease;touch-action:pan-y}
#comms-root .room-leave{position:absolute;top:0;right:0;bottom:0;width:96px;border:0;border-radius:0 18px 18px 0;background:#EF3E5C;color:#fff;font-family:inherit;font-size:14px;font-weight:700;line-height:1.1;cursor:pointer;opacity:0}
#comms-root .room-swipe.open .room-leave,#comms-root .room-swipe.swiping .room-leave{opacity:1}
#comms-root .vroom-edit{margin-left:8px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:#C9B8FF;cursor:pointer;flex:0 0 auto}
#comms-root .vroom-edit[hidden]{display:none}
#comms-root .vroom-edit svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
#comms-root .vroom-rename[hidden]{display:none}
#comms-root .vroom-rename{background:transparent;border-top:0;padding:8px 14px 4px}
@media (prefers-reduced-motion:reduce){#comms-root .room-swipe .room-row{transition:none}}
#comms-root .room-row b{font-size:15px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .room-wave{width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#9f65ff,var(--c-violet));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 0 var(--c-violet-ink),0 10px 18px rgba(109,59,245,.32)}
#comms-root .room-wave svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
#comms-root .room-summary{margin:14px}
#comms-root .room-form{padding:14px;display:flex;flex-direction:column;gap:12px}
#comms-root .room-select{width:100%;border:1px solid var(--c-line);background:var(--c-panel);color:var(--c-ink);border-radius:12px;padding:11px 12px;font:inherit;font-size:16px;outline:none}
#comms-root .friend-pick{display:flex;align-items:center;gap:11px;padding:10px 0;color:var(--c-ink);font-size:14px;font-weight:650}
#comms-root .friend-pick input{width:18px;height:18px;accent-color:var(--c-violet);flex:0 0 auto}
#comms-root .friend-pick .ava{width:36px;height:36px;border-radius:12px;font-size:17px}
@media (max-width:390px){#comms-root #v-voicegames .navbar,#comms-root #v-voicerooms .navbar{grid-template-columns:64px 1fr 64px;padding:14px 14px 8px;min-height:82px}#comms-root #v-voicegames .navbar .back,#comms-root #v-voicerooms .navbar .back{font-size:0}#comms-root #v-voicegames .navbar .back::before,#comms-root #v-voicerooms .navbar .back::before{width:17px;height:17px;margin-right:0}#comms-root #v-voicegames .navbar .t,#comms-root #v-voicerooms .navbar .t{font-size:21px;white-space:nowrap;overflow:visible;text-overflow:clip}#comms-root #v-voicegames .navbar .s,#comms-root #v-voicerooms .navbar .s{font-size:15px;white-space:nowrap}#comms-root .voice-grid{padding:8px 14px 16px;gap:10px 12px}#comms-root .voice-card b{font-size:22px}#comms-root .voice-card em{font-size:16px}#comms-root .voice-entry{gap:10px;padding:12px}#comms-root .voice-card{padding:16px 14px}#comms-root .game-voice{border-radius:18px}#comms-root .game-voice-art{height:86px}#comms-root .game-voice span:last-child{gap:6px;padding:10px 12px 13px}#comms-root .game-voice b{font-size:13px;line-height:17px;text-align:left}#comms-root .game-voice em{font-size:12px;gap:6px}#comms-root .game-voice-art>i{width:40px;height:40px;right:9px;top:9px;box-shadow:0 4px 0 #7440cf,0 10px 16px rgba(109,59,245,.34)}#comms-root .game-voice-art svg{width:24px;height:24px}#comms-root .room-row{grid-template-columns:78px minmax(0,1fr) 38px}#comms-root .room-art{height:64px}#comms-root .voice-live-summary{min-height:78px;border-radius:24px;padding:12px 16px}#comms-root .voice-live-summary>b{font-size:28px}#comms-root .voice-live-summary>span:not(.mini-avatars){font-size:17px}#comms-root .voice-live-summary .mini-avatars span{width:33px;height:33px;margin-left:-10px;font-size:15px}#comms-root .voice-live-summary svg{width:48px}}

/* список: заглушки на время загрузки и экран ошибки с «Повторить» (вместо ложного «Пусто») */
#comms-root .sk-row{display:flex;align-items:center;gap:12px;padding:9px 16px}
#comms-root .sk-body{flex:1;min-width:0}
#comms-root .sk{border-radius:6px;background:linear-gradient(90deg,var(--c-line) 0%,var(--c-panel-2) 50%,var(--c-line) 100%);background-size:200% 100%;animation:c-sk 1.3s linear infinite}
#comms-root .sk-ava{width:44px;height:44px;border-radius:13px;flex:0 0 auto}
#comms-root .sk-l1{height:12px;width:58%;margin-bottom:8px}
#comms-root .sk-l2{height:10px;width:82%}
#comms-root .sk-row:nth-child(2) .sk-l1{width:44%}#comms-root .sk-row:nth-child(3) .sk-l2{width:66%}
#comms-root .sk-row:nth-child(4) .sk-l1{width:50%}#comms-root .sk-row:nth-child(5) .sk-l2{width:72%}
@keyframes c-sk{from{background-position:100% 0}to{background-position:-100% 0}}
#comms-root .list-msg{min-height:100%;padding:24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
#comms-root .list-msg .ic{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-danger);background:color-mix(in srgb,var(--c-danger) 12%,transparent)}
#comms-root .list-msg .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
#comms-root .list-msg b{font-size:15px;color:var(--c-ink)}
#comms-root .list-msg span{font-size:13px;color:var(--c-muted);max-width:34ch;text-wrap:balance}
#comms-root .list-msg .retry{margin-top:4px;border:0;background:var(--c-violet);color:#fff;font:inherit;font-size:14px;font-weight:650;padding:9px 20px;border-radius:999px;cursor:pointer}
#comms-root .list-msg .retry:focus-visible{outline:2px solid var(--c-violet);outline-offset:3px}
@media (prefers-reduced-motion: reduce){#comms-root .sk{animation:none}}
/* «Игры с голосом»: без заголовка, место отдано обложкам. В Telegram «Назад» родная — шапка не нужна совсем */
#comms-root #v-voicegames .navbar{min-height:0;padding:12px 14px 0;display:flex}
.tg-native-back #comms-root #v-voicegames .navbar{display:none}
.tg-native-back #comms-root #v-voicegames .voice-grid{padding-top:14px}
@media (max-width:390px){#comms-root #v-voicegames .navbar{min-height:0;padding:10px 14px 0}#comms-root .game-voice-art{height:122px}}
/* «Игры с голосом» — вариант «Неоновая подпись»: без плашки, название по обложке с розовым свечением */
#comms-root .game-voice.neon{position:relative;height:190px;border:1px solid rgba(255,79,163,.35);border-radius:22px;background:#151027;box-shadow:0 0 0 1px rgba(139,92,246,.2),0 10px 26px rgba(109,59,245,.25)}
#comms-root .game-voice.neon .game-voice-art{position:absolute;inset:0;height:auto}
#comms-root .game-voice.neon .game-voice-art::after{inset:0;height:auto;background:linear-gradient(to top,rgba(8,5,20,.9) 0%,rgba(8,5,20,.15) 55%,rgba(8,5,20,0) 100%)}
#comms-root .game-voice.neon .neon-name{position:absolute;left:14px;right:14px;bottom:13px;z-index:1;font-family:var(--f-display,'Unbounded','Arial Black',sans-serif);font-size:15px;font-weight:700;line-height:1.25;letter-spacing:.01em;text-transform:uppercase;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#fff;text-shadow:0 0 10px rgba(255,79,163,.75),0 0 2px rgba(255,79,163,.9)}
#comms-root .game-voice.neon .neon-eq{position:absolute;top:12px;right:12px;z-index:1;display:flex;align-items:flex-end;gap:2px;height:12px;padding:5px 6px;border-radius:8px;background:rgba(8,5,20,.6);box-sizing:content-box}
#comms-root .game-voice.neon .neon-eq i{width:2.5px;height:40%;border-radius:2px;background:#d7c7ff}
#comms-root .game-voice.neon .neon-eq i:nth-child(2){height:75%}
#comms-root .game-voice.neon .neon-eq i:nth-child(3){height:55%}
#comms-root .game-voice.neon .neon-eq.on i{background:var(--c-online);animation:neon-eq .9s ease-in-out infinite alternate}
#comms-root .game-voice.neon .neon-eq.on i:nth-child(2){animation-delay:-.3s}
#comms-root .game-voice.neon .neon-eq.on i:nth-child(3){animation-delay:-.6s}
#comms-root .game-voice.neon .neon-eq b{margin-left:4px;align-self:center;font-size:10px;line-height:1;font-weight:800;color:var(--c-online);font-variant-numeric:tabular-nums}
@keyframes neon-eq{from{height:25%}to{height:100%}}
@media (prefers-reduced-motion:reduce){#comms-root .game-voice.neon .neon-eq.on i{animation:none}}
@media (max-width:390px){#comms-root .game-voice.neon{height:150px;border-radius:18px}#comms-root .game-voice.neon .neon-name{left:11px;right:11px;bottom:10px;font-size:11.5px}#comms-root .game-voice.neon .neon-eq{top:10px;right:10px}}

/* «Голосовые комнаты»: без заголовка (как «Игры с голосом»), компактная плашка онлайна — всё в одну строку */
#comms-root #v-voicerooms .navbar,#comms-root #v-roomcreate .navbar{min-height:0;padding:10px 14px 0;display:flex;border:0;background:transparent}
.tg-native-back #comms-root #v-voicerooms .navbar,.tg-native-back #comms-root #v-roomcreate .navbar{display:none}
#comms-root .voice-live-summary.room-summary{min-height:0;margin:12px 14px;padding:9px 12px;gap:8px;border-radius:18px;flex-wrap:nowrap;overflow:hidden;box-shadow:0 0 0 1px rgba(177,125,255,.14),0 10px 22px rgba(73,34,158,.28),inset 0 1px 0 rgba(255,255,255,.14)}
#comms-root .voice-live-summary.room-summary>b{font-size:20px}
#comms-root .voice-live-summary.room-summary>span:not(.mini-avatars){font-size:14px;white-space:nowrap}
#comms-root .voice-live-summary.room-summary em{font-size:12px;gap:5px;white-space:nowrap;margin-left:4px}
#comms-root .voice-live-summary.room-summary em i{width:7px;height:7px}
#comms-root .voice-live-summary.room-summary .mini-avatars span{width:26px;height:26px;margin-left:-8px;font-size:12px;border-width:2px}
#comms-root .voice-live-summary.room-summary .mini-avatars span:first-child{margin-left:0}
#comms-root .voice-live-summary.room-summary strong{flex:0 0 auto}
#comms-root .voice-live-summary.room-summary svg{width:26px;height:20px;stroke-width:2.6}

/* «Создать комнату»: обложка выбранной игры с названием, лента игр, друзья-кружки, объёмная кнопка */
#comms-root .room-form{gap:10px}
#comms-root .rc-hero{position:relative;height:150px;border-radius:22px;overflow:hidden;border:1px solid rgba(255,79,163,.35);background:#151027;box-shadow:0 0 0 1px rgba(139,92,246,.2),0 12px 28px rgba(109,59,245,.28);display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:14px;flex:0 0 auto}
#comms-root .rc-cover{position:absolute;inset:0}
#comms-root .rc-cover .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#comms-root .rc-cover .cover-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:44px;background:linear-gradient(135deg,#3c2170,#151027)}
#comms-root .rc-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,5,20,.92) 0%,rgba(8,5,20,.2) 60%,rgba(8,5,20,0) 100%)}
#comms-root .rc-kicker{position:relative;z-index:1;font-size:10px;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#ff8cc6}
#comms-root .rc-name{position:relative;z-index:1;width:100%;min-width:0;border:0;border-bottom:1.5px dashed rgba(255,255,255,.35);background:transparent;padding:2px 0 5px;color:#fff;outline:none;font-family:var(--f-display,'Unbounded','Arial Black',sans-serif);font-size:17px;font-weight:700;text-transform:uppercase;letter-spacing:.01em;text-shadow:0 0 10px rgba(255,79,163,.75),0 0 2px rgba(255,79,163,.9)}
#comms-root .rc-name::placeholder{color:rgba(255,255,255,.72)}
#comms-root .rc-name:focus{border-bottom-color:#ff8cc6}
#comms-root .rc-sec{margin-top:6px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b8aee5}
#comms-root .rc-friends{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px;padding-top:4px}
#comms-root .rc-friends .empty{grid-column:1/-1;padding:14px 4px;text-align:left}
#comms-root .rc-friends .friend-pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;min-width:0;cursor:pointer}
#comms-root .rc-friends .friend-pick input{position:absolute;opacity:0;width:1px;height:1px}
#comms-root .rc-friends .friend-pick .ava{position:relative;width:58px;height:58px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:25px;background:#2a214b;border:2px solid rgba(151,112,255,.45);overflow:visible;transition:border-color .15s,box-shadow .15s}
#comms-root .rc-friends .friend-pick .ava .ava-img{width:100%;height:100%;border-radius:50%;object-fit:cover}
#comms-root .rc-friends .friend-pick .nm{max-width:100%;font-size:12px;font-weight:700;color:#b8aee5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .rc-friends .friend-pick input:checked+.ava{border-color:#ff4fa3;box-shadow:0 0 0 3px rgba(255,79,163,.22),0 0 16px rgba(255,79,163,.4)}
#comms-root .rc-friends .friend-pick input:checked+.ava::after{content:"✓";position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--c-online);color:#06210f;font-size:12px;font-weight:900;border:2px solid #0f0b1a}
#comms-root .rc-friends .friend-pick input:checked~.nm{color:#fff}
#comms-root .rc-friends .friend-pick input:focus-visible+.ava{outline:2px solid #ff8cc6;outline-offset:3px}
#comms-root .rc-cta{flex:0 0 auto;padding:10px 14px 12px}
#comms-root .rc-create{width:100%;min-height:54px;border:0;border-radius:18px;display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at 70% 0,rgba(255,255,255,.22),transparent 45%),linear-gradient(145deg,#a66aff,var(--c-violet) 58%,#3b0d99);color:#fff;font:inherit;font-size:15px;font-weight:850;cursor:pointer;box-shadow:0 6px 0 var(--c-violet-ink),0 14px 24px rgba(109,59,245,.32);transition:transform .1s,box-shadow .1s}
#comms-root .rc-create span{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;font-size:17px}
#comms-root .rc-create:active{transform:translateY(4px);box-shadow:0 2px 0 var(--c-violet-ink),0 8px 16px rgba(109,59,245,.28)}
#comms-root .rc-create:focus-visible{outline:2px solid #ff8cc6;outline-offset:3px}
@media (prefers-reduced-motion:reduce){#comms-root .rc-create,#comms-root .rc-friends .friend-pick .ava{transition:none}}
/* «Без игры» — приватная голосовая комната: замок вместо обложки */
#comms-root .rc-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:30px;background:radial-gradient(circle at 50% 40%,rgba(255,79,163,.28),transparent 55%),radial-gradient(circle at 20% 90%,rgba(139,92,246,.45),transparent 50%),linear-gradient(135deg,#2c1458,#120c26)}
#comms-root .rc-cover .rc-lock{font-size:52px;align-items:flex-start;padding-top:16px;filter:drop-shadow(0 10px 20px rgba(255,79,163,.35))}
#comms-root .rc-sec i{font-style:normal;font-weight:700;letter-spacing:.02em;text-transform:none;color:#8e80ad;margin-left:6px}

/* «Голосовые комнаты» по макету: сводка «N комнат / N онлайн» с волной, крупные карточки действий с обложками */
#comms-root .voice-live-summary.room-summary{gap:12px;padding:10px 14px;border-radius:20px;background:radial-gradient(circle at 80% 50%,rgba(168,101,255,.22),transparent 45%),linear-gradient(135deg,rgba(52,26,108,.92),rgba(18,12,42,.96))}
#comms-root .voice-live-summary.room-summary .mini-avatars span{width:34px;height:34px;margin-left:-10px;font-size:16px}
#comms-root .room-summary .rs-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
#comms-root .room-summary .rs-copy b{font-size:20px;line-height:1.1;font-weight:900;white-space:nowrap;color:#fff}
#comms-root .room-summary .rs-copy b span{font-size:17px;font-weight:800;color:#cabdff}
#comms-root .voice-live-summary.room-summary .rs-copy em{margin:0;font-size:12.5px;font-weight:700;color:#cfc6ef}
#comms-root .room-summary .rs-wave{margin-left:auto;display:flex;align-items:center;gap:4px;height:28px;flex:0 0 auto}
#comms-root .room-summary .rs-wave i{width:4px;border-radius:3px;background:linear-gradient(to top,#8b5cf6,#e3b8ff);box-shadow:0 0 8px rgba(184,121,255,.6);height:6px}
#comms-root .room-summary .rs-wave i:nth-child(2),#comms-root .room-summary .rs-wave i:nth-child(8){height:9px}
#comms-root .room-summary .rs-wave i:nth-child(3),#comms-root .room-summary .rs-wave i:nth-child(7){height:16px}
#comms-root .room-summary .rs-wave i:nth-child(4),#comms-root .room-summary .rs-wave i:nth-child(6){height:22px}
#comms-root .room-summary .rs-wave i:nth-child(5){height:28px}
#comms-root .rooms-head{gap:10px;padding:0 14px 14px}
#comms-root .room-action{position:relative;aspect-ratio:6/5;min-width:0;border:1px solid rgba(168,101,255,.5);border-radius:22px;overflow:hidden;padding:0;background:#120c26;color:#fff;font:inherit;text-align:left;cursor:pointer;box-shadow:0 0 0 1px rgba(139,92,246,.15),0 12px 26px rgba(73,34,158,.32),inset 0 1px 0 rgba(255,255,255,.12);transition:transform .12s}
#comms-root .room-action .ra-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
#comms-root .room-action::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,6,26,.95) 0%,rgba(10,6,26,.55) 30%,rgba(10,6,26,0) 55%)}
#comms-root .room-action b{position:absolute;left:12px;right:48px;bottom:16px;z-index:1;font-size:13px;line-height:1.2;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .room-action .ra-go{position:absolute;right:10px;bottom:9px;z-index:1;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(44,30,98,.85);border:1px solid rgba(168,101,255,.55);box-shadow:0 0 12px rgba(139,92,246,.35)}
#comms-root .room-action .ra-go svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#comms-root .room-action:active{transform:scale(.98)}
#comms-root .room-action:focus-visible{outline:2px solid #ff8cc6;outline-offset:3px}

/* «Игры с голосом»: карточки шире и пропорциональнее — меньше поля по бокам, высота от ширины */
#comms-root #v-voicegames .voice-grid{padding:10px 12px 18px;gap:10px}
#comms-root .game-voice.neon,#comms-root .game-voice.neon:is(*){height:auto;aspect-ratio:6/5}
#comms-root .game-voice.neon .neon-name{font-size:clamp(11.5px,3.1vw,15px)}
@media (prefers-reduced-motion:reduce){#comms-root .room-action{transition:none}}
/* Карточки действий: картинка не на весь фон, а сверху и целиком (5:3), подпись — на тёмной полосе под ней */
#comms-root .room-action{background:linear-gradient(180deg,#160d33,#0f0a24)}
#comms-root .room-action .ra-art{inset:0 0 auto;height:auto;aspect-ratio:5/3;object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent);mask-image:linear-gradient(to bottom,#000 70%,transparent)}
#comms-root .room-action::after{display:none}
#comms-root .room-action b{left:10px;right:36px;bottom:15px;font-size:clamp(12px,3.1vw,14px);letter-spacing:-.01em;text-overflow:clip}
#comms-root .room-action .ra-go{width:28px;height:28px;right:6px;bottom:9px}
#comms-root .room-action .ra-go svg{width:14px;height:14px}
/* подписи карточек действий мельче — помещаются целиком с запасом */
#comms-root .room-action b{font-size:clamp(11px,2.85vw,13px);letter-spacing:0}
/* лента игр в «Создать комнату» — название игры в утверждённом неоновом стиле */
/* Обложка игры вместо иконки: в карточке комнаты — на всю плашку, в аватарах — на весь кружок */
#comms-root .room-art .ava-img.ava-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;z-index:1}
#comms-root .ava-img.ava-cover{object-fit:cover;object-position:50% 45%}

/* ---------- Плашки голоса под поиском: вариант «Волна и пиксели» (07.10.2026) ---------- */
#comms-root .voice-top{flex:0 0 auto}
#comms-root .voice-top:empty{display:none}
#comms-root .voice-entry.vc2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:2px 14px 12px}
#comms-root .vc2 .voice-card{position:relative;isolation:isolate;overflow:hidden;min-height:136px;border-radius:24px;padding:16px 16px 15px;gap:14px;justify-content:space-between;align-items:stretch;color:#fff;background:#2A0A73;box-shadow:none;transition:transform .08s}
#comms-root .vc2 .voice-card:active{transform:scale(.97)}
#comms-root .vc2 .voice-card::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#comms-root .vc2 .vc-games{background-color:#0E1A3A;background-image:linear-gradient(rgba(41,240,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(41,240,255,.10) 1px,transparent 1px);background-size:12px 12px}
#comms-root .vc2 .vc-blob{position:absolute;z-index:-1;width:180px;height:180px;border-radius:50%;filter:blur(38px);opacity:.85;pointer-events:none;animation:c-vc-drift 8s ease-in-out infinite alternate}
#comms-root .vc2 .vc-rooms .vc-blob{background:#C026D3;left:-40px;top:-60px}
#comms-root .vc2 .vc-games .vc-blob{background:#5B16E0;right:-40px;bottom:-60px;opacity:.7}
@keyframes c-vc-drift{to{transform:translate(26px,14px) scale(1.15)}}
#comms-root .vc2 .vc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
#comms-root .vc2 .vc-top b{font:700 clamp(16px,4.8vw,20px)/1.15 var(--f-display,'Unbounded','Arial Black',sans-serif);letter-spacing:-.02em;white-space:nowrap}
#comms-root .vc2 .vc-num{font-size:15px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
#comms-root .vc2 .vc-dot{width:8px;height:8px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
#comms-root .vc-wave{display:flex;align-items:center;gap:4px;height:26px;margin-left:auto;color:#fff}
#comms-root .vc-wave i{width:4px;height:7px;border-radius:2px;background:currentColor;animation:c-vc-wave 1.1s ease-in-out infinite}
#comms-root .vc-wave i:nth-child(2){animation-delay:.15s}#comms-root .vc-wave i:nth-child(3){animation-delay:.3s}#comms-root .vc-wave i:nth-child(4){animation-delay:.45s}
@keyframes c-vc-wave{0%,100%{height:7px}50%{height:24px}}
@media (prefers-reduced-motion:reduce){#comms-root .vc2 .vc-blob,#comms-root .vc-wave i{animation:none}}

/* ---------- Строки каналов в списке ---------- */
#comms-root .row.bcrow .ava{border-radius:50%}
#comms-root .row .n .mega{width:14px;height:14px;flex:0 0 auto;stroke:var(--c-muted);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#comms-root .hype-ava,#comms-root .bc-cava.hype{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5B16E0,#C026D3 60%,#FF8A1A);color:#fff;font:800 13px var(--f-display,'Unbounded','Arial Black',sans-serif);letter-spacing:-.04em}
#comms-root .subpill{padding:6px 11px;border-radius:999px;background:#5B16E0;color:#fff;font-size:12.5px;font-weight:700;box-shadow:0 3px 0 #2A0A73;cursor:pointer;white-space:nowrap}
#comms-root .subpill:active{transform:translateY(2px);box-shadow:0 1px 0 #2A0A73}

/* ---------- Канал: лента постов ---------- */
#comms-root .navbar .avatar.round{border-radius:50%;cursor:pointer}
#comms-root .bc-cava{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;overflow:hidden;font-size:18px}
#comms-root .bc-cava.lg{width:72px;height:72px;font-size:30px}
#comms-root .bc-cava.xl{width:92px;height:92px;font-size:38px;box-shadow:0 0 0 3px rgba(255,255,255,.25)}
#comms-root .bc-pin{flex:0 0 auto;display:none}
#comms-root .bc-pin.on{display:block}
#comms-root .bc-pinbar{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px;background:var(--c-panel);border:0;border-bottom:1px solid var(--c-line-2);text-align:left;color:var(--c-ink);cursor:pointer;font:inherit}
#comms-root .bc-pinbar::before{content:"";width:2px;align-self:stretch;border-radius:2px;background:var(--c-violet)}
#comms-root .bc-pinbar .tx{flex:1;min-width:0;display:flex;flex-direction:column}
#comms-root .bc-pinbar b{font-size:12.5px;color:var(--c-violet);font-weight:650}
#comms-root .bc-pinbar span span{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .bc-pinbar svg{width:16px;height:16px;stroke:var(--c-muted);fill:none;stroke-width:2}
#comms-root .bc-feed{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 10px 16px;display:flex;flex-direction:column;gap:10px;background:radial-gradient(circle at 15% 10%,rgba(192,38,211,.10),transparent 40%),radial-gradient(circle at 90% 70%,rgba(91,22,224,.10),transparent 45%),var(--c-panel-2)}
#comms-root .bc-feed>*{flex:0 0 auto}
#comms-root .bc-feed .daysep{align-self:center;border:0;cursor:pointer}
#comms-root .bc-empty{margin:auto;display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--c-muted)}
#comms-root .bc-empty b{font:700 15px var(--f-display,'Unbounded',sans-serif);color:var(--c-ink)}
#comms-root .bc-post{background:var(--c-panel);border:1px solid var(--c-line-2);border-radius:18px;overflow:hidden;box-shadow:0 1px 2px rgba(28,22,48,.08)}
#comms-root .bc-post.flash{animation:c-bc-flash 1.2s ease}
@keyframes c-bc-flash{0%,40%{box-shadow:0 0 0 3px #C026D3}100%{box-shadow:0 1px 2px rgba(28,22,48,.08)}}
#comms-root .bc-media img,#comms-root .bc-media video{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:0}
#comms-root .bc-pb{padding:10px 13px 8px;display:flex;flex-direction:column;gap:8px}
#comms-root .bc-who{font-size:13px;font-weight:700;color:var(--c-violet)}
#comms-root .bc-who em{font-style:normal;font-weight:500;color:var(--c-muted)}
#comms-root .bc-txt{font-size:15px;line-height:1.42;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}
#comms-root .bc-reacts{display:flex;flex-wrap:wrap;gap:6px}
#comms-root .bc-rc{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;background:var(--c-violet-soft);border:1px solid transparent;font:600 13px/1.2 inherit;font-family:inherit;color:var(--c-violet);font-variant-numeric:tabular-nums;cursor:pointer}
#comms-root .bc-rc.my{background:#5B16E0;color:#fff}
#comms-root .bc-rc.add{background:transparent;border-color:var(--c-line);color:var(--c-muted);padding:4px 8px}
#comms-root .bc-rc svg,#comms-root .bc-meta svg,#comms-root .bc-cmts svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
#comms-root .bc-meta{display:flex;align-items:center;justify-content:flex-end;gap:10px;font-size:12px;color:var(--c-muted);font-variant-numeric:tabular-nums}
#comms-root .bc-meta span{display:inline-flex;align-items:center;gap:4px}
#comms-root .bc-more{margin-right:auto;width:30px;height:24px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--c-muted);cursor:pointer}
#comms-root .bc-more:hover{background:var(--c-panel-2)}
#comms-root .bc-cmts{display:flex;align-items:center;gap:9px;width:100%;padding:9px 13px;border:0;border-top:1px solid var(--c-line-2);background:transparent;text-align:left;color:var(--c-violet);font:650 14px inherit;font-family:inherit;cursor:pointer}
#comms-root .bc-cmts .lbl,#comms-root .bc-cmts span:not(.bc-stack):not(.bc-pava){flex:1}
#comms-root .bc-cmts.off{color:var(--c-muted);font-weight:500;cursor:default}
#comms-root .bc-stack{display:flex;flex:0 0 auto}
#comms-root .bc-stack .bc-pava{margin-left:-7px}#comms-root .bc-stack .bc-pava:first-child{margin-left:0}
#comms-root .bc-pava{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;font:700 14px var(--f-display,'Unbounded',sans-serif);background:#5B16E0}
#comms-root .bc-pava.h1{background:#E5476F}#comms-root .bc-pava.h2{background:#12A5B0}#comms-root .bc-pava.h3{background:#F59E0B}#comms-root .bc-pava.h4{background:#C026D3}#comms-root .bc-pava.h5{background:#22B06B}
#comms-root .bc-pava.xs{width:22px;height:22px;font-size:9px;border:2px solid var(--c-panel)}
#comms-root .bc-pava.sm{width:34px;height:34px}
#comms-root .bc-pava .ava-img{width:100%;height:100%;object-fit:cover}

/* низ ленты: подписка / звук / новый пост */
#comms-root .bc-bottom{flex:0 0 auto;padding:8px 10px calc(10px + var(--c-safe-bottom));background:var(--c-panel);border-top:1px solid var(--c-line-2);display:flex;flex-direction:column;gap:6px}
#comms-root .bc-bottom:empty{display:none}
#comms-root .bc-row{display:flex;align-items:flex-end;gap:8px}
#comms-root .bc-composer{flex:1;min-width:0;display:flex;align-items:flex-end;gap:4px;background:var(--c-panel-2);border:1px solid var(--c-line);border-radius:20px;padding:4px 10px 4px 4px}
#comms-root .bc-composer textarea{flex:1;min-width:0;border:0;outline:none;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.35;color:var(--c-ink);max-height:120px;padding:7px 0;height:36px}
#comms-root .bc-att{width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--c-muted);cursor:pointer;flex:0 0 auto}
#comms-root .bc-att svg,#comms-root .bc-send svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#comms-root .bc-send{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:0;color:#fff;background:linear-gradient(135deg,#5B16E0,#C026D3);cursor:pointer;flex:0 0 auto}
#comms-root .bc-btn{width:100%;height:48px;flex:0 0 auto;border-radius:14px;border:0;display:flex;align-items:center;justify-content:center;gap:8px;font:700 14px/1 var(--f-display,'Unbounded','Arial Black',sans-serif);letter-spacing:-.01em;cursor:pointer;transition:transform .08s,box-shadow .08s}
#comms-root .bc-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
#comms-root .bc-btn.pri{background:#5B16E0;color:#fff;box-shadow:0 4px 0 #2A0A73;margin-bottom:4px}
#comms-root .bc-btn.pri:active{transform:translateY(3px);box-shadow:0 1px 0 #2A0A73}
#comms-root .bc-btn.pri.danger-fill{background:var(--c-danger);box-shadow:0 4px 0 #9E2A20}
#comms-root .bc-btn.sec{background:var(--c-panel-2);color:var(--c-ink);border:1px solid var(--c-line);box-shadow:0 3px 0 var(--c-line)}
#comms-root .bc-btn.sec:active{transform:translateY(2px);box-shadow:0 1px 0 var(--c-line)}
#comms-root .bc-btn.danger{color:var(--c-danger)}
#comms-root .bc-note{text-align:center;color:var(--c-muted);font-size:14px;padding:12px 0}
#comms-root .bc-editbar,#comms-root .bc-reply{display:flex;align-items:center;gap:10px;padding:2px 4px}
#comms-root .bc-reply{display:none;flex:0 0 auto;padding:7px 12px;background:var(--c-panel);border-top:1px solid var(--c-line-2)}
#comms-root .bc-reply.on{display:flex}
#comms-root .bc-editbar::before,#comms-root .bc-reply::before{content:"";width:2px;align-self:stretch;border-radius:2px;background:var(--c-violet)}
#comms-root .bc-editbar .tx,#comms-root .bc-reply .tx{flex:1;min-width:0;display:flex;flex-direction:column;font-size:13px}
#comms-root .bc-editbar b,#comms-root .bc-reply b{color:var(--c-violet);font-weight:650}
#comms-root .bc-editbar .tx span,#comms-root .bc-reply .tx span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--c-muted)}
#comms-root .bc-editbar button,#comms-root .bc-reply button{border:0;background:transparent;color:var(--c-muted);cursor:pointer;padding:4px}
#comms-root .bc-editbar svg,#comms-root .bc-reply svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}

/* обсуждение */
#comms-root .bc-thread{gap:6px}
#comms-root .bc-thread .bc-post{margin-bottom:6px}
#comms-root .bc-start{align-self:center;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;background:rgba(42,10,115,.35);color:#fff;margin:4px 0 6px}
#comms-root .bc-cm{display:flex;align-items:flex-end;gap:7px;max-width:88%}
#comms-root .bc-cm.me{align-self:flex-end;flex-direction:row-reverse}
#comms-root .bc-bb{background:var(--c-panel);border:1px solid var(--c-line-2);border-radius:16px 16px 16px 5px;padding:7px 11px 6px;display:flex;flex-direction:column;gap:3px;min-width:0;text-align:left;color:var(--c-ink);font:inherit;cursor:pointer;box-shadow:0 1px 2px rgba(28,22,48,.06)}
#comms-root .bc-cm.me .bc-bb{background:linear-gradient(135deg,#5B16E0,#7A1FE0);border-color:transparent;color:#fff;border-radius:16px 16px 5px 16px}
#comms-root .bc-nm{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--c-violet)}
#comms-root .bc-role{font-size:11px;font-weight:600;color:var(--c-muted);margin-left:auto;padding-left:10px}
#comms-root .bc-q{border-left:2px solid var(--c-violet);padding:2px 8px;border-radius:4px;background:var(--c-violet-soft);font-size:12.5px;display:flex;flex-direction:column}
#comms-root .bc-cm.me .bc-q{background:rgba(255,255,255,.16);border-color:#fff}
#comms-root .bc-q b{color:var(--c-violet);font-weight:650}#comms-root .bc-cm.me .bc-q b{color:#fff}
#comms-root .bc-q span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;opacity:.85}
#comms-root .bc-t{font-size:15px;line-height:1.38;overflow-wrap:anywhere;white-space:pre-wrap}
#comms-root .bc-bb img,#comms-root .bc-bb video{max-width:240px;border-radius:10px}
#comms-root .bc-ft{display:flex;align-items:center;gap:8px;justify-content:flex-end;font-size:11.5px;opacity:.75;font-variant-numeric:tabular-nums}
#comms-root .bc-ft .bc-reacts{gap:4px}
#comms-root .bc-ft .bc-rc{padding:1px 7px;font-size:12px}
#comms-root .bc-cm.me .bc-ft .bc-rc{background:rgba(255,255,255,.2);color:#fff}

/* профиль канала */
#comms-root .bc-hero{position:relative;isolation:isolate;overflow:hidden;margin:12px;border-radius:24px;padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;background:#2A0A73;color:#fff}
#comms-root .bc-hero::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,0));box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
#comms-root .bc-blob{position:absolute;z-index:-1;width:200px;height:200px;border-radius:50%;filter:blur(40px);opacity:.8;pointer-events:none;animation:c-vc-drift 9s ease-in-out infinite alternate}
#comms-root .bc-blob.b1{background:#C026D3;left:-70px;top:-90px}#comms-root .bc-blob.b2{background:#5B16E0;right:-70px;top:-50px;animation-delay:-3s}#comms-root .bc-blob.b3{background:#FF8A1A;left:30%;bottom:-150px;opacity:.5;animation-delay:-5s}
#comms-root .bc-hero h2{margin:6px 0 0;font:800 20px/1.1 var(--f-display,'Unbounded','Arial Black',sans-serif);letter-spacing:-.03em;text-wrap:balance}
#comms-root .bc-subs{font-size:13px;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
#comms-root .bc-dot{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.25)}
#comms-root .bc-acts{display:flex;justify-content:center;gap:22px;width:100%;margin-top:10px}
#comms-root .bc-act{min-width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;color:#fff;font:600 11.5px inherit;font-family:inherit;cursor:pointer}
#comms-root .bc-act i{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#comms-root .bc-act.on i{background:#fff;color:#2A0A73}
#comms-root .bc-act svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#comms-root .bc-desc{margin:0 12px 10px;padding:12px 14px;border-radius:16px;background:var(--c-panel-2);border:1px solid var(--c-line-2);font-size:14.5px;line-height:1.45;white-space:pre-wrap}
#comms-root .bc-group{margin:0 12px 10px;border-radius:16px;background:var(--c-panel-2);border:1px solid var(--c-line-2);overflow:hidden}
#comms-root .bc-gh{padding:12px 14px 4px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
#comms-root .bc-li{display:flex;align-items:center;gap:12px;width:100%;padding:11px 14px;border:0;border-top:1px solid var(--c-line-2);background:transparent;text-align:left;color:var(--c-ink);font:inherit;cursor:pointer}
#comms-root .bc-gh+.bc-li,#comms-root .bc-group>.bc-li:first-child{border-top:0}
#comms-root div.bc-li{cursor:default}
#comms-root .bc-li[disabled]{cursor:default}
#comms-root .bc-li .lic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;color:#fff;flex:0 0 auto;background:#5B16E0}
#comms-root .bc-li .lic.c{background:#12A5B0}#comms-root .bc-li .lic.r{background:var(--c-danger)}#comms-root .bc-li .lic.y{background:#F59E0B}#comms-root .bc-li .lic.g{background:linear-gradient(135deg,#5B16E0,#C026D3)}
#comms-root .bc-li .lic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#comms-root .bc-li .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
#comms-root .bc-li .tx b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#comms-root .bc-li .tx b.thin{font-weight:500;white-space:normal}
#comms-root .bc-li .tx span{font-size:12.5px;color:var(--c-muted)}
#comms-root .bc-li .val{font-size:14px;color:var(--c-muted);font-variant-numeric:tabular-nums}
#comms-root .bc-li .chev svg,#comms-root .bc-li>svg{width:16px;height:16px;stroke:var(--c-muted);fill:none;stroke-width:2;flex:0 0 auto}
#comms-root .bc-li.danger,#comms-root .bc-li.danger .tx b{color:var(--c-danger)}
#comms-root .bc-li.accent .tx b{color:var(--c-violet)}
#comms-root .bc-tag{font-size:12px;font-weight:600;color:var(--c-violet);background:var(--c-violet-soft);padding:3px 8px;border-radius:999px;white-space:nowrap}
#comms-root .bc-tag.own{color:#fff;background:linear-gradient(135deg,#5B16E0,#C026D3)}
#comms-root .bc-sw{width:44px;height:26px;border-radius:13px;background:var(--c-line);position:relative;flex:0 0 auto;transition:background .15s}
#comms-root .bc-sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
#comms-root .bc-sw.on{background:#5B16E0}#comms-root .bc-sw.on::after{transform:translateX(18px)}
#comms-root .bc-sw.dis{opacity:.45}
#comms-root .bc-gap{height:12px}
#comms-root #v-bci .scroll,#comms-root #v-bcl .scroll{padding-top:4px}
#comms-root .bc-lsearch{display:none;flex:0 0 auto;padding:8px 14px}
#comms-root .bc-lsearch.on{display:block}
#comms-root #v-bcl .scroll{padding-top:10px}

/* шторка канала */
#comms-root .bc-sheet{position:absolute;inset:0;z-index:60;display:none;flex-direction:column;justify-content:flex-end}
#comms-root .bc-sheet.on{display:flex}
#comms-root .bc-sheet-bd{position:absolute;inset:0;background:rgba(12,8,19,.45);animation:c-bc-fade .18s ease}
#comms-root .bc-sheet-box{position:relative;background:var(--c-panel);border-radius:22px 22px 0 0;padding:8px 0 calc(14px + var(--c-safe-bottom));max-height:88%;overflow-y:auto;animation:c-bc-up .22s cubic-bezier(.17,.59,.25,1)}
#comms-root .bc-grab{width:38px;height:4px;border-radius:2px;background:var(--c-line);margin:0 auto 8px}
#comms-root .bc-sheet-box h3{margin:4px 16px 12px;font:700 16px/1.2 var(--f-display,'Unbounded',sans-serif);letter-spacing:-.02em}
#comms-root .bc-whobox{display:flex;align-items:center;gap:12px;padding:4px 16px 12px}
#comms-root .bc-whobox .bc-pava{width:46px;height:46px;font-size:18px}
#comms-root .bc-whobox b{font:700 16px var(--f-display,'Unbounded',sans-serif);letter-spacing:-.02em}
#comms-root .bc-field{margin:0 12px 10px;display:flex;flex-direction:column;gap:5px}
#comms-root .bc-field label{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted);padding-left:4px}
#comms-root .bc-field input{border:1px solid var(--c-line);background:var(--c-panel-2);border-radius:12px;padding:10px 12px;font:inherit;font-size:16px;color:var(--c-ink);outline:none}
#comms-root .bc-btns{display:flex;flex-direction:column;gap:12px;padding:6px 12px 4px}
#comms-root .bc-emo{display:flex;justify-content:space-around;padding:6px 12px 12px}
#comms-root .bc-emo button{font-size:26px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
#comms-root .bc-emo button:hover,#comms-root .bc-emo button.my{background:var(--c-violet-soft)}
@keyframes c-bc-up{from{transform:translateY(40%);opacity:.5}to{transform:none;opacity:1}}
@keyframes c-bc-fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){#comms-root .bc-blob,#comms-root .bc-sheet-box,#comms-root .bc-post.flash{animation:none}}