/* ============================================================
   VOICE — голосовые комнаты (PC + залогиненные)
   Кнопка в сайдбаре · лобби · панель звонка · контекстные меню
   ============================================================ */
/* ============================================================
   КНОПКА ДЕМОНСТРАЦИИ ЭКРАНА
   ============================================================ */
#voiceBtnShare.off {
  background: rgba(99, 102, 241, 0.18);
  border-color: rgba(99, 102, 241, 0.55);
  color: #a5b4fc;
}

/* ============================================================
   ДИАЛОГ ШАРИНГА
   ============================================================ */
.voice-share-overlay {
  position: fixed; inset: 0; z-index: 8750;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.voice-share-overlay.open { opacity: 1; pointer-events: auto; }

.voice-share-dialog {
  position: relative;
  width: 440px; max-width: calc(100vw - 32px);
  padding: 24px 22px 20px;
  border-radius: 16px;
  background: var(--voice-bg);
  border: 1px solid var(--voice-line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8);
  color: var(--voice-fg);
  transform: translateY(10px) scale(.98);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.05);
}
.voice-share-overlay.open .voice-share-dialog { transform: none; }

.voice-share-section { margin-bottom: 18px; }
.voice-share-label {
  font-size: 11px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--voice-dim);
  margin-bottom: 8px;
}

.voice-share-presets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.voice-share-preset {
  padding: 12px 10px;
  border-radius: 10px;
  border: 1px solid var(--voice-line-2);
  background: var(--voice-bg-3);
  color: var(--voice-fg);
  font: 600 12.5px 'Inter', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.voice-share-preset:hover { background: #27272d; border-color: rgba(255,255,255,.22); }
.voice-share-preset.active {
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(236,72,153,.16));
  border-color: var(--voice-accent);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(99,102,241,.6);
}

.voice-share-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 20px;
}

/* ============================================================
   СЦЕНА С ЧУЖИМИ ЭКРАНАМИ
   ============================================================ */
.voice-screen-stage {
  position: fixed;
  right: calc(18px + 348px + 12px);      /* слева от панели звонка, не поверх неё */
  bottom: calc(var(--player-h, 84px) + 18px);
  z-index: 8610;
  width: 480px;
  min-width: 300px;
  max-width: calc(100vw - 400px);
  max-height: 70vh;
  border-radius: 14px;
  background: var(--voice-bg);
  border: 1px solid var(--voice-line-2);
  box-shadow: 0 20px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.02) inset;
  color: var(--voice-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  display: none; flex-direction: column; overflow: hidden;
}
.voice-screen-stage.open { display: flex; }

.voice-screen-stage-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--voice-line);
  cursor: grab;
}
.voice-screen-stage.dragging .voice-screen-stage-head { cursor: grabbing; }
.voice-screen-stage-title {
  flex: 1; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  color: #a5b4fc;
  display: inline-flex; align-items: center; gap: 8px;
}
.voice-screen-stage-title::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 8px #ef4444;
  animation: screenStageRec 1.4s ease-in-out infinite;
}
@keyframes screenStageRec {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.voice-screen-stage-body {
  padding: 10px;
  display: grid; gap: 8px;
  overflow-y: auto;
  max-height: calc(70vh - 44px);
}

.voice-screen-cell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
}
.voice-screen-cell video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

.voice-screen-caption {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
/* ============================================================
   ДИАЛОГ ШАРИНГА — группы пресетов
   ============================================================ */
.voice-share-presets {
  display: flex; flex-direction: column; gap: 14px;
}
.voice-share-group-name {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--voice-faint);
  margin-bottom: 6px;
  padding-left: 2px;
}
.voice-share-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.voice-share-preset {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 2px;
  padding: 9px 11px;
  border-radius: 9px;
  border: 1px solid var(--voice-line-2);
  background: var(--voice-bg-3);
  color: var(--voice-fg);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.voice-share-preset:hover { background: #27272d; border-color: rgba(255,255,255,.22); transform: translateY(-1px); }
.voice-share-preset:active { transform: none; }
.voice-share-preset.active {
  background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(236,72,153,.16));
  border-color: var(--voice-accent);
  color: #fff;
  box-shadow: 0 6px 20px -8px rgba(99,102,241,.6);
}
.voice-share-preset-title {
  font-size: 12.5px; font-weight: 700;
  white-space: nowrap;
}
.voice-share-preset-sub {
  font-size: 10.5px; font-weight: 500;
  color: var(--voice-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
.voice-share-preset.active .voice-share-preset-sub { color: #c7d2fe; }

/* ============================================================
   ЯЧЕЙКА ЭКРАНА — fullscreen + volume badge
   ============================================================ */
.voice-screen-cell {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  aspect-ratio: 16 / 9;
  transition: box-shadow .2s;
}
.voice-screen-cell:hover {
  box-shadow: 0 0 0 1px rgba(99,102,241,.35);
}

.voice-screen-cell video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Кнопка Fullscreen — появляется на hover */
.voice-screen-fs {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(0,0,0,0.65);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .18s ease, background .15s, transform .1s;
  backdrop-filter: blur(8px);
  z-index: 4;
  padding: 0;
}
.voice-screen-cell:hover .voice-screen-fs { opacity: 1; }
.voice-screen-fs:hover { background: rgba(0,0,0,0.9); border-color: rgba(255,255,255,0.28); }
.voice-screen-fs:active { transform: scale(0.92); }
.voice-screen-fs svg { width: 15px; height: 15px; }

/* Индикатор «есть звук» */
.voice-screen-vol-badge {
  position: absolute;
  top: 8px; left: 8px;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: rgba(0,0,0,0.6);
  color: #a5b4fc;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .18s;
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
.voice-screen-vol-badge svg { width: 14px; height: 14px; }
.voice-screen-cell:hover .voice-screen-vol-badge { opacity: 1; }

/* Подпись */
.voice-screen-caption {
  position: absolute;
  left: 8px; bottom: 8px;
  padding: 5px 10px;
  border-radius: 7px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11.5px;
  line-height: 1.25;
  max-width: calc(100% - 60px);
  pointer-events: none;
  display: flex; flex-direction: column; gap: 1px;
}
.voice-screen-caption b { font-weight: 700; }
.voice-screen-caption-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: #a5b4fc;
  font-family: 'Space Mono', ui-monospace, monospace;
}

/* Когда видео на фуллскрине */
.voice-screen-cell:fullscreen,
.voice-screen-cell:-webkit-full-screen {
  border-radius: 0;
  aspect-ratio: auto;
  background: #000;
}
.voice-screen-cell:fullscreen video,
.voice-screen-cell:-webkit-full-screen video {
  width: 100vw; height: 100vh;
  object-fit: contain;
}
.voice-screen-cell:fullscreen .voice-screen-caption,
.voice-screen-cell:-webkit-full-screen .voice-screen-caption {
  font-size: 14px;
  padding: 8px 14px;
}
.voice-screen-cell:fullscreen .voice-screen-fs { display: none; }

/* ============================================================
   МЕНЮ ГРОМКОСТИ ТРАНСЛЯЦИИ
   ============================================================ */
.voice-screen-vol-menu {
  width: 260px;
}
.voice-screen-vol-hint {
  font-size: 12px;
  color: var(--voice-dim);
  line-height: 1.5;
  padding: 4px 2px 10px;
}
.voice-screen-vol-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.voice-screen-vol-preset {
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--voice-line-2);
  background: var(--voice-bg-3);
  color: var(--voice-fg);
  font: 600 10.5px 'Inter', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.voice-screen-vol-preset:hover {
  background: #27272d;
  border-color: rgba(255,255,255,0.22);
}
.voice-screen-vol-preset:active {
  transform: scale(0.95);
}
/* Мобилки — скрываем вовсе */

:root {
  --voice-bg:      #111114;
  --voice-bg-2:    #18181b;
  --voice-bg-3:    #1f1f24;
  --voice-line:    rgba(255, 255, 255, 0.07);
  --voice-line-2:  rgba(255, 255, 255, 0.12);
  --voice-fg:      #ececee;
  --voice-dim:     #9a9aa2;
  --voice-faint:   #6a6a72;
  --voice-green:   #22c55e;
  --voice-green-2: #34d399;
  --voice-red:     #ef4444;
  --voice-accent:  #6366f1;
}

.voice-ic { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; }
.voice-ic svg {
  width: 100%; height: 100%;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ============================================================
   КНОПКА В САЙДБАРЕ
   ============================================================ */
.voice-dock { margin: 0 0 10px 0; }
.voice-dock--floating {
  position: fixed; left: 16px; bottom: calc(var(--player-h, 84px) + 16px);
  z-index: 8000; width: 200px;
}

.voice-dock-btn {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--voice-line);
  background: var(--voice-bg-2);
  color: var(--voice-fg);
  font: 600 12.5px 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.voice-dock-btn:hover  { background: var(--voice-bg-3); border-color: var(--voice-line-2); }
.voice-dock-btn:active { transform: scale(0.98); }
.voice-dock-btn .voice-ic { color: var(--voice-dim); transition: color .15s; }
.voice-dock-btn:hover .voice-ic { color: var(--voice-fg); }

.voice-dock-label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.voice-dock-live {
  display: none;
  align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--voice-green-2);
}
.voice-dock-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--voice-green);
  box-shadow: 0 0 8px var(--voice-green);
}
.voice-dock.in-call .voice-dock-btn {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.07);
}
.voice-dock.in-call .voice-dock-btn .voice-ic { color: var(--voice-green-2); }
.voice-dock.in-call .voice-dock-live { display: inline-flex; }

/* свёрнутый сайдбар — только иконка */
.sidebar.is-mini .voice-dock-label,
.sidebar.is-mini .voice-dock-live { display: none; }
.sidebar.is-mini .voice-dock-btn  { justify-content: center; padding: 9px 0; }

/* Только для ПК: на узких экранах кнопку не показываем */
/* ============================================================
   СЦЕНА ДЕМОНСТРАЦИИ — МОБИЛЬНАЯ ВЕРСИЯ
   На телефоне — полноэкранный оверлей поверх всего
   ============================================================ */
@media (max-width: 768px) {

  .voice-screen-stage {
    /* Вместо right-bottom-координат — растягиваем на весь экран */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    z-index: 8620;                        /* выше панели звонка (8600) */
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-sizing: border-box;
    background: var(--voice-bg);
  }

  /* Шапка — крупнее, чтобы удобно попасть пальцем */
  .voice-screen-stage-head {
    padding: 12px 8px 12px 16px;
    cursor: default;                      /* на тач-экране курсора нет */
    background: var(--voice-bg);
  }
  .voice-screen-stage-title { font-size: 13px; }

  /* Тело — растягивается на всю доступную высоту */
  .voice-screen-stage-body {
    flex: 1;
    max-height: none;
    min-height: 0;
    padding: 10px;
    gap: 10px;
  }

  /* Ячейка — почти на всю ширину, сохраняем пропорции 16:9 */
  .voice-screen-cell {
    border-radius: 12px;
  }

  /* Подпись — крупнее на телефоне */
  .voice-screen-caption {
    font-size: 12px;
    padding: 6px 12px;
    max-width: calc(100% - 56px);
  }
  .voice-screen-caption-sub { font-size: 11px; }

  /* Кнопка фуллскрина — 44×44, удобная для пальца */
  .voice-screen-fs {
    width: 44px;
    height: 44px;
    top: 10px;
    right: 10px;
    border-radius: 12px;
  }
  .voice-screen-fs svg { width: 20px; height: 20px; }

  /* Индикатор «есть звук» */
  .voice-screen-vol-badge {
    width: 32px;
    height: 32px;
    top: 10px;
    left: 10px;
    border-radius: 10px;
  }
  .voice-screen-vol-badge svg { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════════════════════════
   TOUCH-УСТРОЙСТВА: показываем hover-элементы всегда
   (на телефоне :hover не срабатывает, элементы остаются opacity:0)
   ════════════════════════════════════════════════════════════ */
@media (hover: none) and (pointer: coarse) {
  .voice-screen-cell .voice-screen-fs      { opacity: 1; }
  .voice-screen-cell .voice-screen-vol-badge { opacity: 1; }

  /* На всякий случай — у любых других hover-only элементов */
  .voice-screen-cell:hover .voice-screen-fs,
  .voice-screen-cell:hover .voice-screen-vol-badge { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════
   МОБИЛЬНЫЙ ДИАЛОГ ШАРИНГА (если откроется на планшете)
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .voice-share-dialog {
    padding: 20px 16px 16px;
    max-height: 90vh;
    overflow-y: auto;
  }
  .voice-share-presets { gap: 10px; }
  .voice-share-group-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }
  .voice-share-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .voice-share-actions .voice-btn { width: 100%; }

  /* Меню громкости чужой трансляции (тап по ячейке) — на всю ширину */
  .voice-screen-vol-menu {
    width: calc(100vw - 24px) !important;
    max-width: 340px;
  }
}

/* ============================================================
   ЛОББИ (создать / присоединиться)
   ============================================================ */
.voice-overlay {
  position: fixed; inset: 0; z-index: 8700;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.voice-overlay.open { opacity: 1; pointer-events: auto; }

.voice-lobby {
  position: relative;
  width: 360px; max-width: calc(100vw - 32px);
  padding: 26px 24px 22px;
  border-radius: 16px;
  background: var(--voice-bg);
  border: 1px solid var(--voice-line-2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.8);
  color: var(--voice-fg);
  transform: translateY(10px) scale(.98);
  transition: transform .28s cubic-bezier(.2, .9, .3, 1.05);
}
.voice-overlay.open .voice-lobby { transform: none; }

.voice-lobby-close {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 8px; background: transparent;
  color: var(--voice-faint); cursor: pointer;
  transition: background .15s, color .15s;
}
.voice-lobby-close:hover { background: rgba(255, 255, 255, 0.08); color: var(--voice-fg); }
.voice-lobby-close .voice-ic { width: 14px; height: 14px; }

.voice-lobby-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; }
.voice-lobby-sub   { margin: 6px 0 20px; font-size: 12.5px; line-height: 1.5; color: var(--voice-dim); }

.voice-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--voice-line-2);
  background: var(--voice-bg-3);
  color: var(--voice-fg);
  font: 600 13px 'Inter', sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s, transform .1s;
}
.voice-btn:hover:not(:disabled)  { background: #27272d; border-color: rgba(255, 255, 255, 0.2); }
.voice-btn:active:not(:disabled) { transform: scale(.985); }
.voice-btn:disabled { opacity: .45; cursor: default; }
.voice-btn.primary {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  border-color: transparent; color: #fff;
}
.voice-btn.primary:hover:not(:disabled) { background: linear-gradient(135deg, #5b52f0, #7375f5); }

.voice-lobby-or {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 14px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--voice-faint);
}
.voice-lobby-or::before, .voice-lobby-or::after {
  content: ''; flex: 1; height: 1px; background: var(--voice-line);
}

.voice-join-row { display: flex; gap: 8px; }
.voice-code-input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--voice-line-2);
  background: #0a0a0c;
  color: var(--voice-fg);
  font: 700 16px 'Space Mono', ui-monospace, monospace;
  letter-spacing: 4px; text-align: center; text-transform: uppercase;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.voice-code-input::placeholder { color: var(--voice-faint); letter-spacing: 4px; }
.voice-code-input:focus { border-color: var(--voice-accent); box-shadow: 0 0 0 3px rgba(99, 102, 241, .2); }
.voice-join-row .voice-btn { width: auto; padding: 10px 16px; }

.voice-lobby-error {
  min-height: 16px; margin-top: 12px;
  font-size: 12px; color: #f87171;
}
.voice-lobby-hint {
  margin-top: 10px; font-size: 11px; line-height: 1.5; color: var(--voice-faint);
}

/* ============================================================
   ПАНЕЛЬ ЗВОНКА
   ============================================================ */
.voice-panel {
  position: fixed;
  right: 18px;
  bottom: calc(var(--player-h, 84px) + 18px);
  z-index: 8600;
  width: 348px; max-width: calc(100vw - 24px);
  border-radius: 14px;
  background: var(--voice-bg);
  border: 1px solid var(--voice-line-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .02) inset;
  color: var(--voice-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  user-select: none;
  display: none;
  overflow: hidden;
}
.voice-panel.open { display: block; animation: voicePanelIn .3s cubic-bezier(.2, .9, .3, 1); }
.voice-panel.dragging { box-shadow: 0 28px 80px rgba(0, 0, 0, .85); }
@keyframes voicePanelIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* ── Шапка ── */
.voice-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--voice-line);
  cursor: grab;
}
.voice-panel.dragging .voice-head { cursor: grabbing; }

.voice-live-dot {
  position: relative; width: 8px; height: 8px; flex-shrink: 0;
  border-radius: 50%; background: var(--voice-green);
}
.voice-live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--voice-green);
  animation: voiceDotPulse 2s cubic-bezier(.2, .9, .3, 1) infinite;
}
.voice-panel.reconnecting .voice-live-dot,
.voice-panel.reconnecting .voice-live-dot::after { background: #f59e0b; }
@keyframes voiceDotPulse {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(2.6); opacity: 0;  }
  100% { transform: scale(2.6); opacity: 0;  }
}

.voice-head-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.voice-head-title { font-size: 12px; font-weight: 700; letter-spacing: .3px; }
.voice-head-status { font-size: 10.5px; color: var(--voice-dim); white-space: nowrap; }

.voice-icon-btn {
  width: 26px; height: 26px; padding: 0; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 7px; background: transparent;
  color: var(--voice-dim); cursor: pointer;
  transition: background .15s, color .15s;
}
.voice-icon-btn:hover { background: rgba(255, 255, 255, .08); color: var(--voice-fg); }
.voice-icon-btn .voice-ic { width: 15px; height: 15px; }
.voice-icon-btn.copied { color: var(--voice-green-2); }

.voice-panel.collapsed .voice-collapse-btn .voice-ic { transform: rotate(180deg); }

/* ── Код комнаты ── */
.voice-code-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 10px 12px 0;
  padding: 7px 8px 7px 12px;
  border-radius: 9px;
  background: #0a0a0c;
  border: 1px dashed var(--voice-line-2);
}
.voice-code-text {
  font: 700 15px 'Space Mono', ui-monospace, monospace;
  letter-spacing: 3px; color: var(--voice-fg);
  cursor: pointer;
}
.voice-code-actions { display: flex; gap: 2px; }
.voice-panel.collapsed .voice-code-bar { display: none; }

/* ── Список участников ── */
.voice-list { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px 6px; max-height: 300px; overflow-y: auto; }
.voice-list::-webkit-scrollbar { width: 6px; }
.voice-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 3px; }

.voice-row {
  display: flex; align-items: center; gap: 11px;
  padding: 6px 8px;
  border-radius: 9px;
  transition: background .15s, opacity .2s;
}
.voice-row:hover { background: rgba(255, 255, 255, .04); }
.voice-row.is-connecting { opacity: .55; }
.voice-row.is-failed .voice-row-sub { color: #f87171; }

/* Аватар + зелёное кольцо */
.voice-avatar {
  position: relative; width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px transparent, 0 0 0 4px transparent;
  transition: box-shadow .12s ease;
}
.voice-avatar img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block; background: #1f1f24;
}
.voice-avatar.speaking {
  box-shadow:
    0 0 0 2px var(--voice-bg),
    0 0 0 4px var(--voice-green),
    0 0 14px rgba(34, 197, 94, .55);
}

/* Значки состояния на аватарке */
.voice-badge {
  position: absolute; right: -4px; bottom: -3px;
  width: 16px; height: 16px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--voice-red); color: #fff;
  border: 2px solid var(--voice-bg);
  box-sizing: content-box;
}
.voice-badge .voice-ic { width: 9px; height: 9px; }
.voice-row.is-muted    .voice-badge,
.voice-row.is-deaf     .voice-badge,
.voice-row.is-localmute .voice-badge { display: flex; }
.voice-row.is-localmute:not(.is-muted):not(.is-deaf) .voice-badge { background: #71717a; }

.voice-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.voice-row-name {
  font-size: 13px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voice-row-sub { font-size: 10.5px; color: var(--voice-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.voice-row-icons { display: flex; gap: 4px; color: var(--voice-red); }
.voice-row-icons .voice-ic { width: 14px; height: 14px; }

/* Свёрнутый режим — только аватарки в ряд */
.voice-panel.collapsed .voice-list { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px; max-height: none; }
.voice-panel.collapsed .voice-row  { padding: 3px; gap: 0; background: none; }
.voice-panel.collapsed .voice-row-text,
.voice-panel.collapsed .voice-row-icons { display: none; }

/* ── Панель управления ── */
.voice-controls {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 12px 14px;
}
.voice-ctl {
  width: 42px; height: 42px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--voice-line-2);
  background: var(--voice-bg-3);
  color: var(--voice-fg);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .1s;
}
.voice-ctl .voice-ic { width: 19px; height: 19px; }
.voice-ctl:hover  { background: #2a2a31; border-color: rgba(255, 255, 255, .22); }
.voice-ctl:active { transform: scale(.92); }
.voice-ctl.off {
  background: rgba(239, 68, 68, .16);
  border-color: rgba(239, 68, 68, .5);
  color: #f87171;
}
.voice-ctl.leave { background: var(--voice-red); border-color: transparent; color: #fff; }
.voice-ctl.leave:hover { background: #dc2626; }

/* ============================================================
   КОНТЕКСТНОЕ МЕНЮ (ПКМ по себе / по другу)
   ============================================================ */
.voice-menu {
  position: fixed; z-index: 8800;
  width: 250px; padding: 12px;
  border-radius: 12px;
  background: #0d0d10;
  border: 1px solid var(--voice-line-2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .8);
  color: var(--voice-fg);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  user-select: none;
  animation: voiceMenuIn .14s ease-out;
}
@keyframes voiceMenuIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

.voice-menu-head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 10px; margin-bottom: 10px;
  border-bottom: 1px solid var(--voice-line);
  font-weight: 700; font-size: 13px;
}
.voice-menu-head img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.voice-menu-head span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.voice-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.voice-field-top {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--voice-dim);
}
.voice-field-top b { font: 700 11px 'Space Mono', ui-monospace, monospace; color: var(--voice-fg); }

/* Ползунок */
.voice-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin: 6px 0;
  border-radius: 2px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--voice-accent) var(--fill, 50%), rgba(255, 255, 255, .12) var(--fill, 50%));
}
.voice-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
  transition: transform .1s;
}
.voice-range::-webkit-slider-thumb:hover { transform: scale(1.2); }
.voice-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: none; }

/* Индикатор уровня микрофона */
.voice-meter { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.voice-meter i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--voice-green), #facc15 75%, var(--voice-red));
  transition: width .08s linear;
}

.voice-select {
  width: 100%; padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid var(--voice-line-2);
  background: #0a0a0c; color: var(--voice-fg);
  font: 500 12px 'Inter', sans-serif; outline: none;
  cursor: pointer;
}
.voice-select:focus { border-color: var(--voice-accent); }
.voice-select option { background: #0d0d10; }

.voice-check {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; cursor: pointer; color: var(--voice-fg);
}
.voice-check input {
  -webkit-appearance: none; appearance: none;
  width: 30px; height: 17px; margin: 0; flex-shrink: 0;
  border-radius: 999px; position: relative; cursor: pointer;
  background: rgba(255, 255, 255, .14);
  transition: background .18s;
}
.voice-check input::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
  transition: transform .18s cubic-bezier(.2, .9, .3, 1.2);
}
.voice-check input:checked { background: var(--voice-accent); }
.voice-check input:checked::after { transform: translateX(13px); }

.voice-menu-btn {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; margin-top: 2px;
  border: none; border-radius: 8px; background: transparent;
  color: var(--voice-fg); font: 600 12.5px 'Inter', sans-serif;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.voice-menu-btn:hover { background: rgba(255, 255, 255, .07); }
.voice-menu-btn.danger { color: #f87171; }
.voice-menu-btn .voice-ic { width: 15px; height: 15px; }

.voice-menu-sep { height: 1px; margin: 8px 0; background: var(--voice-line); }

/* ============================================================
   ТОСТ
   ============================================================ */
.voice-toast {
  position: fixed; left: 50%; bottom: calc(var(--player-h, 84px) + 28px);
  z-index: 8900;
  transform: translate(-50%, 10px);
  max-width: min(440px, calc(100vw - 32px));
  padding: 10px 16px; border-radius: 10px;
  background: #18181b; border: 1px solid var(--voice-line-2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .6);
  color: var(--voice-fg);
  font: 500 12.5px/1.45 'Inter', sans-serif;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s cubic-bezier(.2, .9, .3, 1);
}
.voice-toast.show { opacity: 1; transform: translate(-50%, 0); }
.voice-toast.error { border-color: rgba(239, 68, 68, .5); }

/* Game Mode: не режем панель звонка */
body.game-mode .voice-panel,
body.game-mode-deep .voice-panel { display: block; }
body.game-mode .voice-panel:not(.open),
body.game-mode-deep .voice-panel:not(.open) { display: none; }


/* ============================================================
   КНОПКА «В ЭФИРЕ» И ТРЕК УЧАСТНИКА (справа от аватарки)
   ============================================================ */
.voice-row-act { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.voice-row-act:empty { display: none; }
.voice-row.has-act .voice-row-icons { display: none; }     /* значок мута уже есть на аватарке */
.voice-row.has-act .voice-row-text { flex: 1 1 0; min-width: 44px; }

/* ── LIVE ── */
.voice-live {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  height: 24px; padding: 0 9px 0 7px;
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #f43f5e 0%, #db2777 100%);
  color: #fff;
  font: 800 10px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: .9px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(244, 63, 94, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.voice-live .voice-ic { width: 14px; height: 14px; }
.voice-live:hover  { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 4px 16px rgba(244, 63, 94, .55), inset 0 1px 0 rgba(255, 255, 255, .28); }
.voice-live:active { transform: scale(.95); }
.voice-live::after {                       /* мягкая пульсация — «идёт трансляция» */
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(244, 63, 94, .55);
  animation: voiceLivePulse 2.2s ease-out infinite;
  pointer-events: none;
}
.voice-live.is-me {
  background: linear-gradient(135deg, #3f3f46, #27272a);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.voice-live.is-me::after { animation: none; }
@keyframes voiceLivePulse {
  0%   { box-shadow: 0 0 0 0   rgba(244, 63, 94, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0);  }
  100% { box-shadow: 0 0 0 0   rgba(244, 63, 94, 0);  }
}

/* ── Трек: крутящаяся пластинка ── */
.voice-trk {
  display: flex; align-items: center; gap: 7px;
  max-width: 128px; padding: 3px 9px 3px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--voice-line);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.voice-trk:hover { background: rgba(99, 102, 241, .16); border-color: rgba(99, 102, 241, .5); }
.voice-trk.is-me { cursor: default; }
.voice-trk.is-me:hover { background: rgba(255, 255, 255, .05); border-color: var(--voice-line); }

.voice-disc-wrap { position: relative; width: 26px; height: 26px; flex-shrink: 0; }
.voice-disc {
  position: absolute; inset: 0; border-radius: 50%;
  background: #2a2a31 center / cover no-repeat;
  background-image: radial-gradient(circle at 30% 30%, #6366f1 0, #312e81 55%, #1e1b4b 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .55);
  animation: voiceSpin 7s linear infinite;
}
.voice-disc::before {                       /* блик пластинки */
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 20%, rgba(255, 255, 255, .18) 28%, transparent 36% 70%, rgba(255, 255, 255, .1) 78%, transparent 86%);
}
.voice-disc::after {                        /* отверстие */
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #0b0b0e; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .22);
}
@keyframes voiceSpin { to { transform: rotate(360deg); } }

.voice-disc-play {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 14, .62); color: #fff;
  opacity: 0; transition: opacity .15s;
}
.voice-disc-play .voice-ic { width: 11px; height: 11px; margin-left: 1px; }
.voice-trk:hover .voice-disc-play { opacity: 1; }
.voice-trk:hover .voice-disc { animation-play-state: paused; }

.voice-trk-text {
  min-width: 0; width: 76px; overflow: hidden; white-space: nowrap;
  font-size: 11px; line-height: 1.2; color: var(--voice-fg);
  -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
          mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.voice-trk-text > span { display: inline-block; }
.voice-trk-text b { font-weight: 600; }
.voice-trk-text i { font-style: normal; color: var(--voice-dim); }
.voice-trk-text.mq > span { animation: voiceMq 7s ease-in-out 1s infinite alternate; }
@keyframes voiceMq {
  0%, 12% { transform: translateX(0); }
  88%, 100% { transform: translateX(var(--mq, 0)); }
}

/* Свёрнутая панель — только аватарки */
.voice-panel.collapsed .voice-row-act { display: none; }

/* Подсветка ячейки экрана при клике по LIVE */
.voice-screen-cell.flash { animation: voiceCellFlash 1.2s ease-out; }
@keyframes voiceCellFlash {
  0%   { box-shadow: 0 0 0 3px rgba(244, 63, 94, .9); }
  100% { box-shadow: 0 0 0 3px rgba(244, 63, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .voice-disc, .voice-live::after, .voice-trk-text.mq > span { animation: none; }
}
/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ — FAB-кнопка + панель снизу
   ============================================================ */
@media (max-width: 768px) {

  /* ── Плавающая FAB-кнопка ── */
  .voice-dock--floating {
    left: auto !important;
    right: 14px;
    bottom: calc(var(--player-h, 84px) + 14px + env(safe-area-inset-bottom, 0px));
    width: auto;
    z-index: 8500;
  }

  .voice-dock--floating .voice-dock-btn {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    border: none;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    color: #fff;
    box-shadow: 0 12px 30px -8px rgba(99,102,241,.7),
                0 0 0 1px rgba(255,255,255,.06) inset;
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .voice-dock--floating .voice-dock-btn:active {
    transform: scale(.93);
  }
  .voice-dock--floating .voice-dock-btn .voice-ic {
    width: 24px;
    height: 24px;
    color: #fff;
  }
  .voice-dock--floating .voice-dock-label { display: none; }

  /* Пузырёк LIVE */
  .voice-dock--floating .voice-dock-live {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--voice-green);
    color: #04220e;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .4px;
    line-height: 1.2;
    border: 2px solid var(--bg-base);
    display: none;
  }
  .voice-dock--floating.in-call .voice-dock-live { display: inline-flex; }
  .voice-dock--floating.in-call .voice-dock-live::before { display: none; }

  /* В звонке кнопка становится зелёной */
  .voice-dock--floating.in-call .voice-dock-btn {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 12px 30px -8px rgba(34,197,94,.8),
                0 0 0 1px rgba(255,255,255,.08) inset;
  }

  /* ── Панель звонка ── */
  .voice-panel {
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: calc(var(--player-h, 84px) + 12px + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    border-radius: 16px;
  }

  .voice-panel .voice-head {
    cursor: default;
  }

  /* Список участников — выше, чтобы помещались все */
  .voice-list {
    max-height: 42vh;
  }

  /* ── Свёрнутый режим: аватарки в ряд, компактнее ── */
  .voice-panel.collapsed .voice-list {
    padding: 10px;
    gap: 6px;
  }
  .voice-panel.collapsed .voice-avatar {
    width: 32px;
    height: 32px;
  }

  /* ── Контекстное меню (ПКМ) — во всю ширину экрана ── */
  .voice-menu {
    width: calc(100vw - 24px) !important;
    max-width: 340px;
  }

  /* ── Тост — чуть выше, чтобы не под панелью ── */
  .voice-toast {
    bottom: calc(var(--player-h, 84px) + 84px + env(safe-area-inset-bottom, 0px)) !important;
    font-size: 12px;
  }

  /* ── Лобби — компактнее ── */
  .voice-lobby {
    padding: 22px 18px 18px;
    border-radius: 14px;
  }
  .voice-lobby-title { font-size: 17px; }
  .voice-lobby-sub   { font-size: 12px; margin-bottom: 16px; }

  /* Лобби-заголовок авторизации при отсутствии аккаунта */
  .voice-code-input {
    font-size: 15px;
    letter-spacing: 3px;
    padding: 11px 10px;
  }

  /* ── Кнопка «Share» и оверлеи шаринга — на мобилке не нужны ── */
  #voiceBtnShare { display: none !important; }
}

/* Поддержка «чубчика» на iPhone (вырез сверху) */
@media (max-width: 768px) and (orientation: portrait) {
  .voice-dock--floating {
    bottom: calc(var(--player-h, 84px) + 14px + env(safe-area-inset-bottom, 0px));
  }
}

/* В ландшафте телефон становится «низким» — панель компактнее */
@media (max-width: 900px) and (max-height: 500px) {
  .voice-panel {
    max-height: calc(100vh - var(--player-h, 84px) - 24px);
    overflow: auto;
  }
  .voice-list { max-height: 30vh; }
}