/* 🎧 Голосовой чат в комнате записи (recvoice.js, RECVOICE.md): карточка сразу под статусом записи.
   Не вошли — серенькая (кто в голосе, «Войти в голос»); вошли — зелёная рамка, кнопки как в Discord.
   Высота постоянная в обоих видах: строка заголовка 40 px, полоса людей 40 px, подсказка — одна строка (на телефоне — две).
   Меняется только по нажатию: своя трансляция (строка эфира, превью) и просмотр чужой (видео). */
.card.rv { padding:12px 14px; }
.rv-i { display:block; width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* заголовок: значок, «Голосовой чат» + строка состояния, справа — «Войти в голос» или кнопки голоса */
.rv-head { display:flex; align-items:center; gap:10px; min-height:40px; }
.rv-ico { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--chip); color:var(--text2); transition:background-color .2s, color .2s; }
.rv-tt { flex:1; min-width:0; display:flex; flex-direction:column; }
.rv-title { font-size:15px; font-weight:500; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-sub { display:block; height:17px; font-size:12.5px; line-height:17px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.rv-acts { flex:none; display:flex; align-items:center; }
.btn.rv-join { min-height:36px; padding:0 16px 0 13px; gap:8px; background:var(--text); color:var(--bg); border-color:var(--text); }
.btn.rv-join:hover { opacity:.88; background:var(--text); }
.rv-ctl { display:flex; align-items:center; gap:6px; }
.rv-b { position:relative; display:grid; place-items:center; width:38px; height:38px; padding:0; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--text); cursor:pointer;
  transition:background-color .15s, color .15s, border-color .15s, opacity .15s; }
.rv-b:hover { background:var(--hover); }
.rv-b:disabled { opacity:.45; cursor:default; }
.rv-b.bad { color:var(--bad); background:var(--rec-soft); border-color:transparent; }
.rv-b.live { color:#fff; background:#3BA55D; border-color:transparent; }
.rv-b.live:hover { background:#2F8F4E; }
.rv-hang { color:#fff; background:#D83C3E; border-color:transparent; }
.rv-hang:hover { background:#B8302F; }
.rv-badge { position:absolute; top:-5px; right:-5px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--rec); color:#fff; font:700 11px/18px var(--body); text-align:center; box-shadow:0 0 0 2px var(--card); pointer-events:none; }

/* полоса «кто в голосе»: одна строка постоянной высоты; влезают с именами — с именами, нет — аватарки и «+N» */
.rv-strip { list-style:none; margin:10px 0 0; padding:0; display:flex; align-items:center; gap:6px; height:40px; overflow:hidden; }
.rv-strip.all { height:auto; min-height:40px; flex-wrap:wrap; padding:2px 0; }
.rv-p { flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; max-width:210px; padding:0 11px 0 4px; border-radius:18px; background:var(--hover); font-size:13px; transition:opacity .2s, filter .2s; }
.rv-av { width:28px; height:28px; font-size:13px; box-shadow:0 0 0 2px transparent; transition:box-shadow .12s; }
.rv-av.spk { box-shadow:0 0 0 2px var(--card), 0 0 0 4px #3BA55D; }   /* говорит — зелёное кольцо, как в Discord */
.rv-n { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-p.me .rv-n { font-weight:500; }
.rv-fl { display:inline-grid; place-items:center; color:var(--bad); }
.rv-fl .rv-i { width:15px; height:15px; }
.rv-lv { flex:none; font:700 10px/1 var(--body); letter-spacing:.06em; color:#fff; background:var(--rec); padding:3px 5px; border-radius:4px; }
.rv-watch { display:inline-flex; align-items:center; gap:6px; padding:0; border:0; background:none; color:var(--blue); font:500 12.5px var(--body); cursor:pointer; white-space:nowrap; }
.rv-watch:hover .rv-wt { text-decoration:underline; }
.rv-watch.on { color:var(--text2); }
.rv-empty { color:var(--text2); font-size:13px; padding:0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* компактно: одни аватарки (имя — в подсказке), значок мута — в углу, трансляция — красная точка (нажатие — смотреть) */
.rv-p.c { position:relative; width:32px; padding:0; gap:0; justify-content:center; background:none; }
.rv-cb { position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:none; color:inherit; }
button.rv-cb { cursor:pointer; }
.rv-p.c .rv-fl { position:absolute; right:-4px; bottom:-3px; width:16px; height:16px; border-radius:50%; background:var(--card); }
.rv-p.c .rv-fl .rv-i { width:11px; height:11px; stroke-width:2.4; }
.rv-lvd { position:absolute; top:-1px; right:-1px; width:10px; height:10px; border-radius:50%; background:var(--rec); box-shadow:0 0 0 2px var(--card); }
.rv-p.c.live .rv-av { outline:2px solid var(--rec); outline-offset:1px; }
.rv-p.c.watching .rv-av { outline-color:var(--blue); }
.rv-more { background:var(--chip); font:600 12px/1 var(--body); color:var(--text2); }
.rv-more:hover { color:var(--text); }

/* подсказка: не в голосе — про наушники; в голосе — что микрофон тот же */
.rv-note { margin:8px 0 0; height:17px; font-size:12px; line-height:17px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-note.bad { color:var(--bad); }

/* не вошли — серенькая: приглушённый фон и люди, кнопка «Войти в голос» — яркая */
.card.rv.off { background:color-mix(in srgb, var(--chip) 70%, var(--card)); }
.card.rv.off .rv-title { color:var(--text2); }
.card.rv.off .rv-ico { background:var(--card); }
.card.rv.off .rv-p:not(.c) { background:var(--card); }
.card.rv.off .rv-p { opacity:.78; filter:grayscale(.45); }
/* вошли — зелёная рамка и значок, как «Голос подключён» */
.card.rv.on { border-color:rgba(59,165,93,.5); box-shadow:0 0 0 1px rgba(59,165,93,.12); }
.card.rv.on .rv-ico { background:rgba(59,165,93,.16); color:#3BA55D; }

/* своя трансляция и видео (только по нажатию) */
.rv-media { margin-top:10px; display:flex; flex-direction:column; gap:8px; }
.rv-live { display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 5px 4px 12px; border-radius:12px; background:var(--rec-soft); font-size:13px; }
.rv-live-dot { flex:none; width:8px; height:8px; border-radius:50%; background:var(--rec); animation:rv-pulse 1.4s ease-in-out infinite; }
@keyframes rv-pulse { 50% { opacity:.35; } }
.rv-live-t { flex:1; min-width:0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-variant-numeric:tabular-nums; }
.btn.rv-sm { min-height:30px; padding:0 12px; font-size:12.5px; }
.btn.rv-stop { color:var(--bad); border-color:transparent; background:var(--card); }
.rv-vslot { position:relative; width:min(100%, 440px); aspect-ratio:16 / 9; }
.rv-vid { position:absolute; inset:0; border-radius:12px; overflow:hidden; background:#000; }
.rv-video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.rv-vwait { position:absolute; inset:0; display:grid; place-items:center; padding:12px; color:#BBB; font-size:13px; text-align:center; }
.rv-vbar { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; gap:4px; padding:18px 6px 6px 12px; background:linear-gradient(transparent, rgba(0,0,0,.72)); color:#fff; font-size:12.5px; }
.rv-vname { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-vb { flex:none; display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }
.rv-vb:hover { background:rgba(255,255,255,.3); }
.rv-vb .rv-i { width:16px; height:16px; }
.rv-vid.self .rv-vname::before { content:"● "; color:var(--rec); }
/* ⛶ крупно — поверх страницы (место в карточке остаётся — ничего не прыгает); Esc / ⛶ — назад */
.rv-vid.big { position:fixed; z-index:41; inset:auto; left:50%; top:50%; transform:translate(-50%, -50%); width:min(94vw, calc(86vh * 16 / 9)); aspect-ratio:16 / 9; max-height:90vh; box-shadow:0 30px 90px rgba(0,0,0,.65); }
body.rv-big-on::after { content:""; position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.72); }
.rv-vid:fullscreen { border-radius:0; }
@media (prefers-reduced-motion: reduce) { .rv-live-dot { animation:none; } .rv-p, .rv-av, .rv-b, .rv-ico { transition:none; } }

/* ▭ мини-режим: без подсказки, плотнее */
body.mini.in-room .card.rv { padding:8px 10px; }
body.mini.in-room .rv-note { display:none; }
body.mini.in-room .rv-strip { margin-top:6px; }
body.mini.in-room .rv-ico { width:30px; height:30px; }
body.mini.in-room .rv-vslot { width:min(100%, 360px); }

/* 📱 телефон: кнопки чуть меньше, подсказка — в две строки (место держится и в голосе) */
@media (max-width: 640px) {
  .card.rv { padding:12px; }
  .rv-head { gap:8px; }
  .rv-ctl { gap:4px; }
  .rv-b { width:36px; height:36px; }
  .rv-title { font-size:14px; }
  .card.rv.on .rv-ico { display:none; }
  .rv-note { height:34px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
  .rv-vslot { width:100%; }
  /* строка эфира: текст — первой строкой во всю ширину, кнопки — под ним справа */
  .rv-live { flex-wrap:wrap; justify-content:flex-end; row-gap:4px; padding:6px 5px 5px 12px; }
  .rv-live-dot { display:none; }
  .rv-live-t { flex:1 1 100%; }
  .rv-live-t::before { content:""; display:inline-block; width:8px; height:8px; margin-right:8px; border-radius:50%; background:var(--rec); vertical-align:1px; }
  .rv-vid.big { width:100vw; max-height:none; border-radius:0; }
}
@media (max-width: 360px) { .rv-b { width:34px; height:34px; } .btn.rv-join { padding:0 12px; } }