/* 🎚 общий микшер комнаты записи (mixer.js): под шапкой комнаты — уровень каждого участника.
   Высота постоянная: 2 ряда под 20 человек (пришёл / ушёл — ничего не сдвигается). Шкала — как у шкалы своего микрофона:
   зелёный до −20 дБ, жёлтый до −9, красный выше; горящие сегменты — ярко, остальные — тускло (шторка .mx-cover поверх).
   Компьютер (от 900 px): 10 колонок × 2 ряда; уже — колонки постоянной ширины, полоска листается вбок (страница — нет). */
.mixer { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:center; gap:8px 10px; padding:10px 14px 10px; }
.mx-title { grid-column:1; grid-row:1; display:inline-flex; align-items:center; gap:6px; font-size:13px; white-space:nowrap; }
.mx-title b { font-weight:500; }
.mx-i { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; color:var(--text2); }
.mx-sub { grid-column:2; grid-row:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; color:var(--text2); }
.mx-tog { grid-column:3; grid-row:1; display:inline-flex; align-items:center; justify-content:flex-end; gap:4px; min-width:7.6em; height:24px; padding:0 6px 0 10px; border:0; border-radius:12px;
  background:none; color:var(--text2); font-size:12px; cursor:pointer; }
.mx-tog:hover { background:var(--hover); color:var(--text); }
.mx-tog:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.mx-chev { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
.mixer.closed .mx-chev { transform:rotate(180deg); }

/* полоска участников: ряды постоянной высоты; ниже 900 px — колонки по 96 px, листается вбок (место под полосу прокрутки — всегда) */
.mx-scroll { grid-column:1 / -1; min-width:0; height:82px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:thin; }
.mx-grid { list-style:none; margin:0; padding:2px 2px 0; display:grid; grid-template-rows:repeat(2, 32px); grid-auto-flow:column; grid-auto-columns:96px; gap:6px 8px; }
@media (min-width: 900px) {
  .mx-scroll { height:72px; overflow:hidden; }
  .mx-grid { grid-auto-flow:row; grid-template-columns:repeat(10, minmax(0, 1fr)); grid-auto-columns:auto; column-gap:6px; }
}

/* ячейка: [аватарка · имя · вы · 🎧] над шкалой во всю ширину */
.mx-cell { display:flex; flex-direction:column; gap:4px; min-width:0; }
.mx-top { position:relative; display:flex; align-items:center; gap:4px; height:18px; min-width:0; }
.mx-bot { position:relative; display:flex; align-items:center; height:10px; }
.mx-av { transition:box-shadow .12s; }
.mx-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:18px; }
.mx-cell.me .mx-name { font-weight:500; }
/* «вы» — узкая метка: в колонке ~80 px короткое имя («Дима») должно влезать целиком */
.mx-tag { flex:none; font-size:9.5px; line-height:14px; padding:0 3px; border-radius:7px; background:var(--chip); color:var(--text2); }
.mx-tag[hidden] { display:none; }
/* в голосе комнаты — значок-наушники на углу аватарки (микрофон выключен — перечёркнутый, красный) */
.mx-vc { position:absolute; left:10px; top:8px; display:grid; place-items:center; width:12px; height:12px; border-radius:50%; background:var(--card); color:var(--text); }
.mx-vc:empty { display:none; }
.mx-vi { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mx-vc.mute { color:var(--bad); }
/* говорит — кольцо цветом участника */
.mx-cell.spk .mx-av { box-shadow:0 0 0 2px var(--card), 0 0 0 3.5px var(--c); }

/* шкала — холст (mixer.js рисует сегменты: горящие ярко, остальные тускло, черта пика); размер — от ячейки */
.mx-meter { display:block; flex:1; min-width:0; width:100%; height:7px; }
.mx-st { position:absolute; inset:0; display:none; font-size:10.5px; line-height:10px; color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mx-cell.st .mx-meter { visibility:hidden; }
.mx-cell.st .mx-st { display:block; }
.mx-cell.off { opacity:.5; }
/* перегруз: красная плашка «ПЕРЕГРУЗ» на месте шкалы (имя видно) */
.mx-clip { position:absolute; inset:-1px 0; display:none; border-radius:3px; background:#E5484D; color:#fff; font:700 8.5px/12px var(--body); letter-spacing:.08em; text-align:center; overflow:hidden; white-space:nowrap; }
.mx-cell.clip .mx-clip { display:block; }
.mx-cell.clip .mx-name { color:#FF6B5E; }

/* свёрнут: одна строка — «Микшер» · аватарки (кольцо — говорит, красное — перегруз) · «Развернуть» */
.mixer.closed .mx-sub { display:none; }
.mixer.closed .mx-scroll { grid-column:2; grid-row:1; height:24px; overflow:hidden; }
.mixer.closed .mx-grid { display:flex; gap:8px; padding:3px 4px; }
.mixer.closed .mx-cell { display:block; flex:none; width:18px; height:18px; }
.mixer.closed .mx-bot, .mixer.closed .mx-top > :not(.mx-av):not(.mx-vc) { display:none; }
.mixer.closed .mx-cell.clip .mx-av { box-shadow:0 0 0 2px var(--card), 0 0 0 3.5px #FF5A52; }

/* ▭ мини-режим: микшер — главное, остаётся; только плотнее */
body.mini.in-room .card.mixer { padding:8px 12px; }
body.mini.in-room .mx-sub { display:none; }
/* «🌑 Затемнить»: шкалы остаются яркими (как волны), аватарки — тусклее */
body.dim .mx-av { filter:brightness(.55) saturate(.7); }
body.dim .mx-i { filter:brightness(.45); }

@media (max-width: 640px) {
  .mixer { padding:10px 12px; }
  .mx-grid { grid-auto-columns:92px; gap:6px 8px; }
}
/* узкий телефон: подпись «уровень каждого · −60…0 дБ» не влезает (обрубок с «…») — только «Микшер» */
@media (max-width: 420px) { .mx-sub { visibility:hidden; } }
/* палец: «Свернуть / Развернуть» — выше (32 px), ряд заголовка той же высоты в обоих видах */
@media (pointer: coarse) { .mx-tog { height:32px; border-radius:16px; } .mixer.closed .mx-scroll { height:32px; } .mixer.closed .mx-grid { padding:7px 4px; } }
@media (prefers-reduced-motion: reduce) { .mx-av, .mx-chev { transition:none; } }