/* 💬 Чат голосового канала (voicechat.js) — панель справа, как «Text Chat in Voice» в Discord.
   ПК от 1000 px: своя колонка 360 px на месте «Статистики соединения»; колонка плавно растёт (--vcw), панель внутри — постоянной ширины
   и прижата к правому краю, поэтому «въезжает» справа, а её содержимое не перестраивается. 761…999 px — поверх центра справа.
   Телефон (до 760 px): на весь экран поверх сцены, кнопка «←»; в приложении Windows (html.dk-tb) полоса заголовка не перекрывается. */
@property --vcw { syntax:"<length>"; inherits:true; initial-value:0px; }

/* кнопка 💬 (в заголовке плиток и в строке канала): постоянный размер, бейдж — поверх угла */
.vc-btn { position:relative; }
.vc-btn .i { width:18px; height:18px; }
.vc-btn[aria-pressed="true"] { color:var(--text); background:var(--soft); }
.vc-n { position:absolute; top:-3px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--rec); color:#fff;
  font:700 10px/16px var(--body, inherit); text-align:center; font-variant-numeric:tabular-nums; box-shadow:0 0 0 2px var(--side); pointer-events:none; }
.vc-n.dot { min-width:10px; width:10px; height:10px; padding:0; top:0; right:-1px; }
.vc-n[hidden] { display:none; }
/* в строке канала слева — при наведении (как в Discord); есть непрочитанные или панель открыта — всегда */
.vc-side { opacity:0; }
.tk-ch-row:hover .vc-side, .vc-side:focus-visible, .vc-side.has, .vc-side[aria-pressed="true"] { opacity:1; }
@media (hover: none) { .vc-side { opacity:.85; } }
/* ПК: кнопки строки «при наведении» (💬, пригласить, ✏ / лимит / 🗑 владельца — до 5 шт.) без наведения места не занимают,
   иначе имя канала сжимается до «Ge…»; при наведении — как в Discord: кнопки появляются, имя обрезается. Высота строки не меняется */
@media (hover: hover) and (min-width: 761px) {
  .tk-ch-row:not(:hover):not(:has(:focus-visible)) :is(.tk-own:not(.on), .ci-btn, .vc-side:not(.has):not([aria-pressed="true"])) { display:none; }
}

/* панель */
.vc-panel { grid-area:vchat; position:relative; min-width:0; min-height:0; overflow:hidden; background:var(--card); border-left:1px solid var(--line); }
.vc-panel[hidden] { display:none; }
.vc-in { position:absolute; top:0; right:0; bottom:0; width:360px; display:flex; flex-direction:column; min-height:0; background:var(--card); }
.vc-h { display:flex; align-items:center; gap:8px; flex:none; min-height:48px; padding:8px 8px 8px 16px; border-bottom:1px solid var(--line); }
.vc-h > .i { flex:none; width:18px; height:18px; color:var(--text2); }
.vc-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.vc-back { display:none; }
/* «Вы вышли из канала» — поверх ленты (место не занимает: ничего не сдвигается) */
.vc-note { position:absolute; z-index:2; top:56px; left:12px; right:12px; padding:8px 12px; box-shadow:0 8px 24px -12px rgba(0, 0, 0, .5); border-radius:10px; font-size:13px; text-align:center; color:var(--text);
  background:color-mix(in srgb, var(--warn, #f5a524) 16%, var(--card)); border:1px solid color-mix(in srgb, var(--warn, #f5a524) 40%, var(--line)); }
.vc-note[hidden] { display:none; }
.vc-panel.left .vc-msgs, .vc-panel.left .vc-compose { opacity:.5; pointer-events:none; }
/* лента и поле — как в основном чате, только уже */
.vc-msgs { scrollbar-gutter:stable; }
.vc-msgs .tk-msg { padding:6px 40px 2px 12px; column-gap:10px; }
.vc-compose { margin:4px 10px 10px; }
.vc-compose textarea:disabled { cursor:not-allowed; }
.vc-empty { gap:6px; padding:24px 22px; }
.vc-empty > span:last-child { font-size:13px; line-height:1.4; }
.vc-eico { display:grid; place-items:center; width:56px; height:56px; margin-bottom:6px; border-radius:50%; background:var(--soft); color:var(--text2); }
.vc-eico .i { width:26px; height:26px; }
.vc-panel.drop .vc-in { box-shadow:inset 0 0 0 2px var(--blue); }

/* ПК, широкое окно: колонка справа вместо статистики (та же ширина в начале — без скачка), затем плавно до 360 px */
@media (min-width: 1000px) {
  body.in-space .tk-app { --vcw:var(--stW, 312px); }
  body.in-space .tk-app.vc-on, body.in-space .tk-app.vc-on.no-stats {
    grid-template-columns:var(--sw, 268px) minmax(0, 1fr) var(--vcw); grid-template-areas:"side center vchat" "me center vchat";
    transition:--vcw .18s cubic-bezier(.2, .8, .2, 1); }
  body.in-space .tk-app.vc-on .tk-stats { display:none; }
  body.in-space .tk-app.vc-on.vc-open { --vcw:360px; }
  .tk-app.vc-on .vc-in { transform:translateX(12px); opacity:.6; transition:transform .18s cubic-bezier(.2, .8, .2, 1), opacity .18s; }
  .tk-app.vc-open .vc-in { transform:none; opacity:1; }
}
/* ПК, узкое окно: поверх центра справа */
@media (min-width: 761px) and (max-width: 999.98px) {
  .vc-panel { position:absolute; top:0; right:0; bottom:0; z-index:8; width:min(360px, 100%); border-left:1px solid var(--line);
    box-shadow:-18px 0 40px -24px rgba(0, 0, 0, .45); transform:translateX(100%); transition:transform .18s cubic-bezier(.2, .8, .2, 1); }
  .tk-app.vc-open .vc-panel { transform:none; }
  .vc-in { left:0; width:auto; }
}
/* телефон: на весь экран, «←» вместо ✕ */
@media (max-width: 760px) {
  .vc-panel { position:fixed; left:0; right:0; bottom:0; top:var(--dk-tbh, 0px); z-index:19; border:0;
    transform:translateX(100%); transition:transform .18s cubic-bezier(.2, .8, .2, 1); }
  .tk-app.vc-open .vc-panel { transform:none; }
  .vc-in { left:0; width:auto; padding-bottom:env(safe-area-inset-bottom); }
  .vc-h { padding:6px 10px 6px 4px; gap:6px; }
  .vc-back { display:inline-grid; }
  .vc-x { display:none; }
  .vc-msgs .tk-msg { padding-right:48px; }
  .vc-compose { margin:4px 8px 8px; }
  .vc-n { top:0; right:0; }
}
@media (prefers-reduced-motion: reduce) {
  body.in-space .tk-app.vc-on, .vc-panel, .tk-app.vc-on .vc-in { transition:none !important; }
}