release: версия 0.0.25

Мини-плеер намеренно вёл себя иначе, чем основное окно: без удержания
демонстрации экрана (holdScreenShare), без приоритета говорящего с
включённой камерой, без антидребезга говорящего и с собственным чистым
useState для закрепления. На практике это читалось как поломка —
закрепление, сделанное в основном окне, в мини-окне не действовало, а
демонстрация экрана пропадала, стоило кому-то сказать слово.

Теперь pickStageFocus получает одинаковые правила в обоих вариантах
сцены. Единственное сознательное отличие — localKey («показать себя»
последним фолбэком), он остаётся только у мини-плеера: это защита от
дефекта 0.0.11, когда мини-окно открывалось на самом пользователе.

Закрепление переезжает между окнами тем же мостиком через RoomPage,
что и фокус (initialPinnedKey/onPinnedKeyChange). Отдельный общий
источник правды не нужен: экземпляр сцены в каждый момент ровно один —
пока открыт Document PiP, основное окно показывает заглушку.

Заодно в снятии закрепления «участник вышел из комнаты» добавлена
охрана tracksKnown. На первом рендере нового экземпляра сцены useTracks
отдаёт пустой массив, и пустой набор читался как «все вышли»: приехавшее
через initialPinnedKey закрепление обнулялось прямо при монтировании,
то есть мини-плеер терял его каждый раз.

Надпись на булавке — «Закрепить» вместо «Закрепить в основном окне»:
закрепление больше не ограничено основным окном.

.env.example

@@ -122,7 +122,7 @@ SMTP_TIMEOUT_S=30
 # --- Версия инстанса (релиз v0.0.1) ---
 # install.sh копирует значение из корневого файла VERSION при каждой
 # установке/обновлении — руками менять не нужно.
-VIDCONF_VERSION=0.0.23
+VIDCONF_VERSION=0.0.25
 
 # --- Профили compose. Дефолт ниже (`media,monitoring`) — только для ручного
 # `docker compose up` БЕЗ install.sh: медиа (LiveKit+coturn) + мониторинг,

CHANGELOG.md

@@ -3,6 +3,68 @@
 Формат основан на [Keep a Changelog](https://keepachangelog.com/ru/1.1.0/),
 проект придерживается [семантического версионирования](https://semver.org/lang/ru/).
 
+## [0.0.25] — 2026-08-03
+
+Два дефекта мини-окна конференции (Document PiP), оба видны только в Chrome.
+
+### Исправлено
+- В Chrome пропадал звук других участников после возврата сцены из
+  мини-окна в основное. `RoomAudioRenderer` жил внутри `RoomStage` и
+  рендерился в обеих её ветках, поэтому скрытые `<audio>` с чужими
+  аудиотреками физически переезжали в документ PiP-окна и обратно.
+  После такого переезда Chrome теряет аудиовыход у remote-трека: пакеты
+  продолжают приходить (`packetsReceived` растёт), а
+  `totalSamplesDuration` и `totalAudioEnergy` замирают, и трек молчит
+  даже в свежесозданном `<audio>` со свежим `MediaStream`. Тот же цикл
+  detach/attach в пределах одного документа безвреден — дело именно в
+  переезде между документами. Рендерер вынесен в `RoomPage`: один
+  экземпляр, всегда в основном документе, в PiP-окне аудиоэлементов нет
+  вовсе. В Safari бага не было — там Document PiP не используется
+  (video-фолбэк), сцена из основного окна не уезжает.
+- В мини-окне не действовало закрепление участника, а демонстрация
+  экрана слетала на говорящего от любой чужой реплики. Мини-плеер
+  намеренно ходил с упрощёнными правилами выбора фокуса (без
+  `holdScreenShare`, без приоритета говорящего с камерой, без
+  антидребезга) и с собственным локальным состоянием закрепления.
+  Теперь `pickStageFocus` получает одинаковые правила в обоих вариантах
+  сцены, а закрепление переезжает между окнами тем же мостиком через
+  `RoomPage`, что и фокус. Сознательно оставлено одно отличие —
+  фолбэк «показать себя» (`localKey`) только у мини-плеера: это защита
+  от дефекта 0.0.11, когда мини-окно открывалось на самом пользователе.
+- Закрепление сбрасывалось при каждом монтировании сцены: на первом
+  рендере `useTracks` отдаёт пустой набор треков, и правило «закреплённый
+  вышел из комнаты» принимало это за уход участника.
+
+### Изменено
+- Кнопка-булавка на плитке подписана «Закрепить» вместо «Закрепить в
+  основном окне» — закрепление больше не ограничено основным окном.
+
+## [0.0.24] — 2026-08-03
+
+Три артефакта вёрстки, вылезающие за границы блоков (эмодзи-поповер чата,
+заголовок брендовой панели, чат в Firefox) + аудит похожих мест.
+
+### Исправлено
+- Заголовок «Ваша инфраструктура» на странице входа вылезал за край
+  брендовой панели на широком окне с узкой панелью (`.layout` — flex
+  42/58) — старый фикс уменьшал кегль только по ширине ОКНА (`@media`),
+  а не панели. Кегль `.brand-headline` теперь считается через container
+  query (`container-type: inline-size` + `cqw`) — тот же приём, что у
+  аватара участника в комнате. Тем же механизмом обрезались плашки
+  статистики («AI-саммари») — `.brand-stats` теперь переносит их на
+  мобильном и десктопе одинаково.
+- Эмодзи-поповер в чате комнаты: последняя (5-я) колонка вылезала за
+  правый край поповера. Причина — гонка CSS-специфичности: правило
+  круглой кнопки «Отправить» (`.chat-input-row button`, 42×42px)
+  продолжало красить размер и кнопкам эмодзи внутри поповера (та же
+  гонка чинилась для цвета в 0.0.19, но не для размера). Добавлены явные
+  `width`/`height: auto` нужной специфичности + `max-width` на попап как
+  общая страховка.
+- Чат комнаты вылезал за границы панели в Firefox: `.chat-messages`
+  (flex-колонка) без `min-height: 0` не сжималась в Firefox, `textarea`
+  поля ввода без `min-width: 0` упиралась в автоматическую минимальную
+  ширину (Firefox считает её от атрибута `cols`, жёстче Chrome/Safari).
+
 ## [0.0.23] — 2026-08-02
 
 Документация по сайзингу под медиа-нагрузку + видимость TURN-аллокаций в логах.

VERSION

@@ -1 +1 @@
-0.0.23
+0.0.25

deploy/docker-compose.yml

@@ -89,7 +89,7 @@ services:
       MEDIA_ROOT: ${MEDIA_ROOT:-/app/media}
       # Версия инстанса (релиз v0.0.1) — install.sh копирует значение
       # из файла VERSION (корень репозитория) в .env; отдаётся в GET /api/health.
-      VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.23}
+      VIDCONF_VERSION: ${VIDCONF_VERSION:-0.0.25}
       # Число процессов uvicorn (см. backend/Dockerfile). Дефолт 2 рассчитан
       # на 4-ядерный сервер, где ядра делятся с LiveKit. Поднимая значение,
       # проверьте бюджет соединений с БД: каждый воркер держит свой пул

frontend/src/components/room/RoomParticipantTile.tsx

@@ -126,8 +126,10 @@ function TileBody({
   const showSharingChip = Boolean(
     onStopSharing && trackReference.source === Track.Source.ScreenShare && trackReference.participant.isLocal,
   )
-  // Кнопка закрепления — только там, где сцена умеет закрепление (основное
+  // Кнопка закрепления — только там, где сцена её даёт (основное окно передаёт
-  // окно передаёт `onTogglePin`; в мини-плеере плитка одна, закреплять нечего).
+  // `onTogglePin`; в мини-плеере своего тулбара нет и плитка одна, поэтому
+  // булавки там нет — само закрепление, сделанное в основном окне, с 0.0.25
+  // действует и в мини-плеере, см. `initialPinnedKey` в `RoomStage`).
   // Ключ плитки берём из её собственного трека: в карусели/гриде плитки
   // рендерятся шаблоном без пропсов, снаружи «какая это плитка» не передать.
   const tileKey = stageTrackKey(trackReference)
@@ -200,10 +202,8 @@ function TileBody({
           type="button"
           className={`room-pin-toggle${isPinned ? ' is-pinned' : ''}`}
           aria-pressed={isPinned}
-          title={isPinned ? 'Открепить' : 'Закрепить в основном окне'}
+          title={isPinned ? 'Открепить' : 'Закрепить'}
-          aria-label={
+          aria-label={isPinned ? `Открепить: ${displayName}` : `Закрепить: ${displayName}`}
-            isPinned ? `Открепить: ${displayName}` : `Закрепить в основном окне: ${displayName}`
-          }
           onClick={(e) => {
             // Иначе клик долетит до самой плитки (`onParticipantClick`
             // у `ParticipantTile`) — булавка не должна означать «клик по плитке».

frontend/src/components/room/RoomStage.tsx

@@ -4,7 +4,6 @@ import { Track, type Participant } from 'livekit-client'
 import {
   CarouselLayout,
   FocusLayoutContainer,
-  RoomAudioRenderer,
   isTrackReference,
   useRoomContext,
   useSpeakingParticipants,
@@ -44,9 +43,11 @@ const STAGE_TRACK_SOURCES = [
 ]
 
 /**
- * Удержание фокуса основного окна при смене говорящего, мс.
+ * Удержание фокуса при смене говорящего, мс. Действует в ОБОИХ вариантах
+ * сцены — и в основном окне, и в мини-плеере (до 0.0.25 в PiP удержания не
+ * было вовсе, фокус там переключался мгновенно).
  *
- * Основное окно следует за спикером (`followSpeaker`, задача 3.2), и без
+ * Сцена следует за спикером (`followSpeaker`, задача 3.2), и без
  * удержания короткие реплики («ага», «угу») уводили бы большую плитку на
  * секунду и возвращали обратно. Источник говорящих (`useSpeakingParticipants`
  * поверх `RoomEvent.ActiveSpeakersChanged`) сам по себе не дребезжит, но
@@ -59,6 +60,10 @@ const STAGE_TRACK_SOURCES = [
  * фокус с задержкой, которая на глаз читается как плавность, а не как тормоз.
  * Меньше (~0.6 с) — короткие «ага» всё ещё пролезают, больше (~2 с) — заметно
  * запаздывает переход на нового докладчика.
+ *
+ * В мини-плеере удержание тем более уместно: там плитка ОДНА, и мгновенное
+ * переключение читается не как «камера следует за разговором», а как мигание
+ * всего окна целиком.
  */
 const SPEAKER_HOLD_MS = 1200
 
@@ -69,8 +74,9 @@ const SPEAKER_HOLD_MS = 1200
  * применять уже нечего (cleanup эффекта гасит таймер, а новое значение
  * сравнивается по ссылке с текущим).
  *
- * `holdMs <= 0` — удержания нет, значение отдаётся как есть (режим PiP: там
+ * `holdMs <= 0` — удержания нет, значение отдаётся как есть. Сейчас этим
- * фокус обязан следовать за говорящим мгновенно, поведение не менялось).
+ * режимом никто не пользуется (обе сцены удерживают состав), но параметр
+ * оставлен: он и делает функцию пригодной для повторного использования.
  */
 function useSteadySpeakers(speakers: Participant[], holdMs: number): Participant[] {
   const [steady, setSteady] = useState(speakers)
@@ -148,9 +154,9 @@ function PipMicToggle() {
  * `tiles` скрывать нечего (карусели нет), переключатель там заблокирован —
  * см. `StageViewOptions`.
  *
- * ФОКУС ПЕРЕЖИВАЕТ ПЕРЕЕЗД В МИНИ-ПЛЕЕР. Сцена в мини-плеере — ОТДЕЛЬНЫЙ
+ * ФОКУС И ЗАКРЕПЛЕНИЕ ПЕРЕЖИВАЮТ ПЕРЕЕЗД В МИНИ-ПЛЕЕР. Сцена в мини-плеере —
- * экземпляр этого компонента (портал в PiP-окно), и своё состояние фокуса он
+ * ОТДЕЛЬНЫЙ экземпляр этого компонента (портал в PiP-окно), и своё состояние
- * начинал с нуля: демонстрации нет, никто прямо сейчас не говорит — и
+ * фокуса он начинал с нуля: демонстрации нет, никто прямо сейчас не говорит — и
  * `pickStageFocus` доходил до последнего фолбэка `localKey`, то есть мини-окно
  * открывалось на самом пользователе вместо того, что он видел крупно. В Safari
  * бага не было видно: там Document PiP не используется, а video-фолбэк
@@ -159,6 +165,13 @@ function PipMicToggle() {
  * `RoomPage` → `initialFocusKey` следующего экземпляра. Работает в обе стороны
  * — возврат из мини-плеера тоже не сбрасывает фокус.
  *
+ * Ровно тем же мостиком с 0.0.25 ездит и ЗАКРЕПЛЕНИЕ (`initialPinnedKey` /
+ * `onPinnedKeyChange`): раньше `pinnedKey` был чисто локальным `useState`, и
+ * закрепление, сделанное в основном окне, в мини-плеер не попадало вовсе.
+ * Отдельный «общий» источник правды здесь не нужен: экземпляр сцены в каждый
+ * момент ровно один (пока открыт Document PiP, основное окно показывает
+ * заглушку — см. `RoomPage`), поэтому состояние достаточно передать по эстафете.
+ *
  * Раскладка — вертикальная колонка миниатюр слева от основной сцены (не
  * горизонтальная лента, см. design/mockups/room.html после правки: узкая
  * колонка сбоку, скролл по вертикали). Это штатное поведение самого
@@ -188,12 +201,21 @@ function PipMicToggle() {
  * показываем ТОЛЬКО одну крупную плитку активного окна — без карусели/грида;
  * режимы показа и скрытие остальных на мини-плеер не влияют вовсе.
  *
- * Фокус следует за активным спикером в ОБОИХ вариантах (`followSpeaker` у
+ * ВЫБОР ФОКУСА ОДИНАКОВ В ОБОИХ ВАРИАНТАХ (с 0.0.25). До этого мини-плеер был
- * `pickStageFocus`; для основного окна — с 0.0.6, задача 3.2), но по-разному:
+ * намеренно «упрощён»: без удержания говорящего, без удержания демонстрации
- * PiP переключается мгновенно и всегда показывает говорящего, а основное окно
+ * экрана (`holdScreenShare`), без приоритета говорящего с включённой камерой и
- * ждёт `SPEAKER_HOLD_MS` (не дёргается на коротких репликах), не уводит из
+ * без закрепления. На практике это читалось как поломка: в мини-окне
- * фокуса живую демонстрацию экрана (`holdScreenShare`) и умеет закрепление
+ * демонстрация экрана слетала от любой чужой реплики, а закрепление,
- * участника (`pinnedKey`, задача 3.1) — кнопка-булавка на плитке.
+ * сделанное в основном окне, не действовало. Теперь `pickStageFocus`
+ * получает одни и те же правила независимо от варианта — разным остаётся
+ * ровно одно: `localKey` (см. ниже) и то, что PiP рисует одну плитку вместо
+ * раскладки.
+ *
+ * Единственное сознательное отличие — `localKey`: у мини-плеера есть
+ * последний фолбэк «показать себя», у основного окна его нет (там фолбэк —
+ * первый трек по порядку, поведение не менялось). Строка из того же сюжета,
+ * что и `initialFocusKey`: без неё свежеоткрытое мини-окно на пустой комнате
+ * выбирало произвольного участника.
  */
 export function RoomStage({
   variant = 'full',
@@ -203,6 +225,8 @@ export function RoomStage({
   onHideOthers,
   initialFocusKey = null,
   onFocusKeyChange,
+  initialPinnedKey = null,
+  onPinnedKeyChange,
   onPinFocus,
   raisedHandIdentities,
   conferenceId,
@@ -221,6 +245,10 @@ export function RoomStage({
   initialFocusKey?: string | null
   /** Сообщать наружу текущий фокус, чтобы его пережил переезд сцены в мини-плеер и обратно. */
   onFocusKeyChange?: (key: string | null) => void
+  /** Чем инициализировать закрепление при монтировании — тот же мостик через `RoomPage`, что и у фокуса. */
+  initialPinnedKey?: string | null
+  /** Сообщать наружу закрепление, чтобы оно пережило переезд сцены в мини-плеер и обратно. */
+  onPinnedKeyChange?: (key: string | null) => void
   /**
    * Участника только что закрепили (не открепили) в режиме без крупной
    * плитки — сцена сама переключиться не может (режим живёт в `RoomPage`),
@@ -245,9 +273,9 @@ export function RoomStage({
   // (`Room.activeSpeakers`, обновляются по `RoomEvent.ActiveSpeakersChanged`,
   // событие шлётся лишь при РЕАЛЬНОЙ смене состава/порядка говорящих — не
   // дребезжит на каждый чих, в отличие от сырого `participant.isSpeaking`).
-  // Основное окно поверх этого ещё и удерживает состав (см. `useSteadySpeakers`
+  // Поверх этого сцена ещё и удерживает состав (см. `useSteadySpeakers` и
-  // и `SPEAKER_HOLD_MS`), PiP берёт значение как есть.
+  // `SPEAKER_HOLD_MS`) — в обоих вариантах одинаково.
-  const speakingParticipants = useSteadySpeakers(useSpeakingParticipants(), variant === 'pip' ? 0 : SPEAKER_HOLD_MS)
+  const speakingParticipants = useSteadySpeakers(useSpeakingParticipants(), SPEAKER_HOLD_MS)
 
   const cameraTracks = tracks.filter((t) => t.source === Track.Source.Camera)
   const screenShareTracks = tracks.filter((t) => isTrackReference(t) && t.source === Track.Source.ScreenShare)
@@ -289,8 +317,10 @@ export function RoomStage({
   const [focusKey, setFocusKey] = useState<string | null>(initialFocusKey)
   // Закрепление живёт в состоянии сцены (задача 3.1): ключ `identity:source`
   // плитки, которую пользователь закрепил булавкой; `null` — закрепления нет.
-  // Только для основного окна — в PiP плитка одна и закреплять нечего.
+  // Стартовое значение приходит от предыдущего экземпляра сцены (тот же
-  const [pinnedKey, setPinnedKey] = useState<string | null>(null)
+  // мостик через `RoomPage`, что и у фокуса), поэтому закрепление, сделанное
+  // в основном окне, действует и в мини-плеере.
+  const [pinnedKey, setPinnedKey] = useState<string | null>(initialPinnedKey)
   const [prevPinnedKey, setPrevPinnedKey] = useState<string | null>(null)
 
   const cameraKeys = cameraTracks.map(stageTrackKey)
@@ -299,13 +329,23 @@ export function RoomStage({
   // камера есть у КАЖДОГО участника хотя бы плейсхолдером, — ни среди
   // демонстраций) — закрепление снимаем, чтобы сцена не осталась в подвешенном
   // состоянии и булавка не «висела» на исчезнувшем ключе.
+  //
+  // `tracksKnown` — обязательная охрана, а не перестраховка: на ПЕРВОМ рендере
+  // нового экземпляра сцены `useTracks` отдаёт ПУСТОЙ массив (реальный состав
+  // приезжает следующим рендером, из подписки на события комнаты). Без этой
+  // проверки пустой набор читается как «все вышли», и закрепление, приехавшее
+  // через `initialPinnedKey`, обнулялось сразу при монтировании — то есть
+  // мини-плеер терял его каждый раз (найдено живой отладкой при 0.0.25).
+  // Пустых наборов при живой комнате не бывает: камера есть у каждого
+  // участника хотя бы плейсхолдером.
+  const tracksKnown = cameraKeys.length > 0 || screenShareKeys.length > 0
   const pinnedAlive = pinnedKey !== null && (cameraKeys.includes(pinnedKey) || screenShareKeys.includes(pinnedKey))
 
   const tracksChanged = tracks !== prevTracks
   const speakingChanged = speakingParticipants !== prevSpeakingParticipants
   const pinnedChanged = pinnedKey !== prevPinnedKey
 
-  if (pinnedKey !== null && !pinnedAlive) {
+  if (pinnedKey !== null && tracksKnown && !pinnedAlive) {
     setPinnedKey(null)
   }
 
@@ -328,14 +368,12 @@ export function RoomStage({
       cameraKeys,
       screenShareKeys,
       speakingCameraKeys,
-      // Приоритет «говорящий с камерой выше говорящего без камеры» — только
+      cameraKeysWithVideo: cameraTracks.filter(hasLiveVideo).map(stageTrackKey),
-      // основному окну: PiP по договорённости ведёт себя ровно как раньше.
-      cameraKeysWithVideo: variant === 'pip' ? [] : cameraTracks.filter(hasLiveVideo).map(stageTrackKey),
       prevKeys,
       prevFocusKey: focusKey,
       pinnedKey: pinnedAlive ? pinnedKey : null,
       followSpeaker: true,
-      holdScreenShare: variant !== 'pip',
+      holdScreenShare: true,
       // Только для PiP — в основном окне фолбэк на «первый трек» не менялся.
       localKey: variant === 'pip' ? `${room.localParticipant.identity}:${Track.Source.Camera}` : null,
     })
@@ -352,6 +390,11 @@ export function RoomStage({
     onFocusKeyChange?.(focusKey)
   }, [focusKey, onFocusKeyChange])
 
+  // То же самое для закрепления — см. `initialPinnedKey`.
+  useEffect(() => {
+    onPinnedKeyChange?.(pinnedKey)
+  }, [pinnedKey, onPinnedKeyChange])
+
   const focusTrack = tracks.find((t) => stageTrackKey(t) === focusKey) ?? screenShareTracks[0] ?? cameraTracks[0]
   const focusTrackKey = focusTrack ? stageTrackKey(focusTrack) : null
   // При активной демонстрации карусель — ВСЕ камеры (включая демонстратора) И
@@ -394,13 +437,16 @@ export function RoomStage({
   // Мини-плеер показывает ТОЛЬКО активное окно — без карусели/
   // грида, одна плитка на весь контейнер (см. `.room-single-tile`,
   // `styles/room.css`). `focusTrack` уже вычислен выше тем же `pickStageFocus`
-  // (с `followSpeaker: true` для этого варианта) — переиспользуем как есть.
+  // и по тем же правилам, что и в основном окне (закрепление, удержание
+  // демонстрации, антидребезг говорящего) — переиспользуем как есть.
+  // Булавки на плитке здесь нет намеренно: своего тулбара у мини-окна нет,
+  // закрепление делается в основном окне и приезжает сюда через
+  // `initialPinnedKey`.
   if (variant === 'pip') {
     return (
       <section className="stage room-single-tile">
         {focusTrack && <RoomParticipantTile trackRef={focusTrack} onStopSharing={handleStopSharing} />}
         <PipMicToggle />
-        <RoomAudioRenderer />
       </section>
     )
   }
@@ -496,7 +542,6 @@ export function RoomStage({
           <span>Показать остальных ({sideTracks.length})</span>
         </button>
       )}
-      <RoomAudioRenderer />
     </section>
   )
 }

frontend/src/components/room/stageFocus.ts

@@ -62,8 +62,10 @@ export interface PickStageFocusInput {
   /** Ключ, что был в фокусе на предыдущем рендере; `null` — фокус ещё не выбирался. */
   prevFocusKey: string | null
   /**
-   * Ключ трека, ЗАКРЕПЛЁННОГО пользователем в основном окне (кнопка-булавка на
+   * Ключ трека, ЗАКРЕПЛЁННОГО пользователем (кнопка-булавка на плитке
-   * плитке, состояние живёт в `RoomStage.tsx`); `null` — закрепления нет.
+   * основного окна; состояние живёт в `RoomStage.tsx` и переезжает в
+   * мини-плеер через `RoomPage`, см. там `initialPinnedKey`); `null` —
+   * закрепления нет.
    * Закрепление держит фокус вопреки говорящим, но уступает ЛЮБОЙ активной
    * демонстрации экрана (формулировка оператора: «перебивается только чьей-либо
    * демонстрацией экрана») — а когда демонстрация закончилась, фокус
@@ -79,19 +81,22 @@ export interface PickStageFocusInput {
    * не удерживать текущий). С 0.0.6 включено и для мини-плеера (PiP), и для
    * основного окна — решение оператора (этап 3, задача 3.2). Защита от
    * дребезга — на стороне вызывающего: источник «говорящих» — throttled
-   * `useSpeakingParticipants()` поверх `RoomEvent.ActiveSpeakersChanged`, а в
+   * `useSpeakingParticipants()` поверх `RoomEvent.ActiveSpeakersChanged` плюс
-   * основном окне ещё и удержание в ~1.2 с (см. `useSteadySpeakers` в
+   * удержание в ~1.2 с (см. `useSteadySpeakers` в `RoomStage.tsx`, с 0.0.25 —
-   * `RoomStage.tsx`), не сырой дребезжащий `participant.isSpeaking`.
+   * в обеих сценах), не сырой дребезжащий `participant.isSpeaking`.
    * По умолчанию `false` — фокус удерживается (см. правило 5).
    */
   followSpeaker?: boolean
   /**
    * Живая демонстрация экрана в фокусе НЕ уступает заговорившему участнику
-   * (правило 3). Нужно основному окну: там демонстрация — это содержательный
+   * (правило 3). Демонстрация — это содержательный центр разговора, и уводить
-   * центр разговора, и уводить её из большого окна на каждую реплику нельзя.
+   * её из фокуса на каждую реплику нельзя.
-   * Мини-плеер (PiP) показывает ровно одну плитку и намеренно ведёт себя иначе
+   *
-   * — всегда показывает того, кто говорит, поэтому там `false` (поведение
+   * С 0.0.25 включено в ОБЕИХ сценах. До этого мини-плеер (PiP) намеренно
-   * PiP не менялось с 0.0.4).
+   * ходил с `false` — «одна плитка, всегда показываем говорящего»; на практике
+   * это выглядело как поломка: демонстрация в мини-окне пропадала, стоило
+   * кому-то сказать слово. По умолчанию всё ещё `false` — это поведение
+   * функции без явного запроса удержания.
    */
   holdScreenShare?: boolean
   /**
@@ -132,16 +137,14 @@ function pickSpeakerKey(
  *    фокус безусловно переходит на него (последний из новых, если появилось
  *    сразу несколько), даже если до этого в фокусе была камера или другая
  *    демонстрация. Так же ведут себя типовые UI конференций (Google Meet).
- * 2. Закрепление (`pinnedKey`, только основное окно): закреплённый участник
+ * 2. Закрепление (`pinnedKey`): закреплённый участник
  *    забирает фокус у говорящих и у удержания предыдущего фокуса, но уступает
  *    ЛЮБОЙ активной демонстрации экрана. Поэтому правило и стоит выше
  *    удержания (правило 5): как только демонстрация закончилась и
  *    `screenShareKeys` опустел, фокус возвращается на закреплённого, а не
  *    остаётся на том, кто был в фокусе до демонстрации.
- * 3. `holdScreenShare` (только основное окно): демонстрация, уже стоящая в
+ * 3. `holdScreenShare`: демонстрация, уже стоящая в фокусе, не уступает
- *    фокусе, не уступает заговорившему — иначе большое окно уводило бы шэр на
+ *    заговорившему — иначе окно уводило бы шэр на каждую реплику.
- *    каждую реплику. В PiP шаг пропускается (там одна плитка и она всегда
- *    показывает говорящего).
  * 4. `followSpeaker`: если сейчас есть говорящий — фокус СРАЗУ переходит на
  *    него, даже если текущий фокус ещё жив; среди одновременно говорящих
  *    предпочитаем того, у кого включена камера (`cameraKeysWithVideo`).

frontend/src/pages/RoomPage.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import { PictureInPicture2 } from 'lucide-react'
-import { LiveKitRoom, usePersistentUserChoices } from '@livekit/components-react'
+import { LiveKitRoom, RoomAudioRenderer, usePersistentUserChoices } from '@livekit/components-react'
 import type { RoomOptions } from 'livekit-client'
 import '@livekit/components-styles'
 import '@/styles/room.css'
@@ -208,6 +208,12 @@ export function RoomPage() {
   // открывал мини-окно на самом пользователе. Подробнее — докстринг `RoomStage`.
   const [stageFocusKey, setStageFocusKey] = useState<string | null>(null)
 
+  // Закрепление участника (булавка на плитке) — по той же причине и тем же
+  // мостиком, что и `stageFocusKey`: экземпляр `RoomStage` при открытии
+  // мини-плеера пересоздаётся, и до 0.0.25 закрепление, сделанное в основном
+  // окне, в мини-окно не попадало вовсе (там был свой чистый `useState`).
+  const [stagePinnedKey, setStagePinnedKey] = useState<string | null>(null)
+
   // Сохранённый выбор устройств — читаем через собственный вызов
   // usePersistentUserChoices (независимый от того, что использует
   // DeviceSettingsDialog: там свой вызов хука со своим состоянием). ВАЖНО:
@@ -285,6 +291,21 @@ export function RoomPage() {
         options={roomOptions}
         onDisconnected={handleDisconnected}
       >
+        {/* Звук комнаты рендерится ЗДЕСЬ, а не внутри `RoomStage`, и ровно
+            одним экземпляром на всю страницу. `RoomAudioRenderer` — это набор
+            скрытых `<audio>`, к которым LiveKit привязывает чужие аудиотреки
+            (`track.attach(el)`). Пока он жил в сцене, открытие мини-плеера
+            переносило эти элементы в ДРУГОЙ документ (Document PiP — отдельное
+            окно со своим `document`), а возврат — обратно, и после возврата
+            звук чужих участников пропадал: Chrome теряет аудиовыход у
+            remote-трека, переехавшего между документами. Замерено: пакеты
+            продолжают приходить (`packetsReceived` растёт), а
+            `totalSamplesDuration`/`totalAudioEnergy` замирают, и трек молчит
+            даже в свежесозданном `<audio>` со свежим `MediaStream`. Тот же
+            цикл detach/attach В ПРЕДЕЛАХ ОДНОГО документа безвреден — дело
+            именно в переезде. Здесь элементы живут в основном документе
+            непрерывно, весь цикл «открыл мини-окно → вернул» их не касается. */}
+        <RoomAudioRenderer />
         <div data-lk-theme="default" className="room-shell">
           <RoomTopbar title={joinState.title ?? null} slug={slug} number={joinState.number} />
           <div className="room-main">
@@ -306,6 +327,8 @@ export function RoomPage() {
                 onHideOthers={() => setHideOthers(true)}
                 initialFocusKey={stageFocusKey}
                 onFocusKeyChange={setStageFocusKey}
+                initialPinnedKey={stagePinnedKey}
+                onPinnedKeyChange={setStagePinnedKey}
                 onPinFocus={handlePinFocus}
                 raisedHandIdentities={raisedHandIdentities}
                 conferenceId={joinState.conferenceId}
@@ -358,10 +381,17 @@ export function RoomPage() {
             `variant="pip"` — мини-плеер
             показывает только активное окно (одну плитку), без карусели/грида
             основного окна. `initialFocusKey` — то, что было крупно в основном
-            окне: без него мини-окно открывалось на самом пользователе. */}
+            окне: без него мини-окно открывалось на самом пользователе;
+            `initialPinnedKey` — закрепление оттуда же. */}
         {pip.pipWindow &&
           createPortal(
-            <RoomStage variant="pip" initialFocusKey={stageFocusKey} onFocusKeyChange={setStageFocusKey} />,
+            <RoomStage
+              variant="pip"
+              initialFocusKey={stageFocusKey}
+              onFocusKeyChange={setStageFocusKey}
+              initialPinnedKey={stagePinnedKey}
+              onPinnedKeyChange={setStagePinnedKey}
+            />,
             pip.pipWindow.document.body,
           )}
         <ForcedMuteWatcher event={chat.lastForcedMute} />

frontend/src/styles/auth.css

@@ -16,6 +16,11 @@
   position: relative;
   overflow: hidden;
   border-right: 1px solid var(--color-border);
+  /* Запрос по ширине САМОЙ панели, а не окна: `.layout` — flex 42/58, и на
+     широком окне с узкой панелью `vw` (см. .brand-headline) не отражает
+     реальную доступную ширину — тот же паттерн, что у `.room-tile-avatar`
+     (container-type:size + cqmin, room.css) для аватара участника. */
+  container-type: inline-size;
 }
 .brand-panel::after {
   content: "";
@@ -41,6 +46,12 @@
 .brand-headline {
   font: var(--text-display-lg);
   font-family: var(--font-display);
+  /* `cqw` — от ширины `.brand-panel` (её `container-type: inline-size` выше),
+     а не окна: длинное слово «инфраструктура» иначе не помещается именно
+     тогда, когда окно широкое, а панель (42% от него) — узкая. Раньше кегль
+     уменьшался только в @media по ширине ОКНА (узкие экраны) — не спасало
+     от этого случая. */
+  font-size: clamp(20px, 8cqw, 34px);
   color: var(--color-ink-700);
   margin: 0 0 var(--space-4);
   max-width: 460px;
@@ -51,7 +62,11 @@
   max-width: 420px;
   margin: 0;
 }
-.brand-stats { display: flex; gap: var(--space-4); z-index: 1; margin-top: var(--space-8); }
+/* `flex-wrap` не только на мобильном медиа-запросе (см. ниже) — та же
+   природа бага, что у заголовка: узкая ПАНЕЛЬ (а не узкое окно) не даёт
+   двум плашкам поместиться в ряд, а `overflow:hidden` у `.brand-panel`
+   обрезал вторую вместо переноса. */
+.brand-stats { display: flex; flex-wrap: wrap; gap: var(--space-4); z-index: 1; margin-top: var(--space-8); }
 .stat-glass {
   background: var(--color-surface-glass);
   backdrop-filter: blur(16px);
@@ -248,10 +263,10 @@
     right: -90px;
     bottom: -90px;
   }
-  /* clamp() — на узких экранах слово «инфраструктура» иначе вылезает за
+  /* Кегль теперь считает `.brand-headline` сама (cqw от ширины панели, см.
-     край брендовой панели (см. .brand-panel padding ниже и её overflow:hidden,
+     базовое правило) — здесь снимаем только `max-width:460px`: в сложенной
-     обрезающий текст без переноса вместо уменьшения кегля). */
+     колонкой раскладке панель может стать шире 460px, а дизайн этого хочет. */
-  .brand-headline { max-width: none; font-size: clamp(22px, 6.2vw, 34px); }
+  .brand-headline { max-width: none; }
   .brand-sub { max-width: none; }
   .brand-stats { flex-wrap: wrap; }
   .stat-glass { flex: 1 1 140px; min-width: 0; }

frontend/src/styles/room.css

@@ -497,8 +497,14 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 
 .chat-empty { font: var(--text-body); color: var(--color-room-text-tertiary); margin: auto; text-align: center; }
 
+/* `min-height: 0` обязателен — тот же приём, что у `.stage-side` (комментарий
+   выше): без него `.chat-panel` (flex-колонка) в Firefox не сжимает
+   `.chat-messages` до высоты `flex:1`, а даёт ей вырасти по контенту
+   (список сообщений) и вылезти за пределы панели — Chrome в этой ситуации
+   более снисходителен, Firefox — нет. */
 .chat-messages {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: var(--space-5);
   display: flex;
@@ -540,6 +546,13 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 }
 .chat-input-row textarea {
   flex: 1;
+  /* Firefox даёт `<textarea>` большую автоматическую минимальную ширину,
+     завязанную на атрибут `cols` (умолчание 20 символов моноширинной
+     метрики), и как flex-item без `min-width:0` отказывается сжиматься
+     ниже нее — панель шириной 320px раздувается вправо. Chrome/Safari
+     считают минимальную ширину textarea мягче, поэтому баг был виден
+     только в Firefox. */
+  min-width: 0;
   resize: none;
   background: var(--color-room-tile);
   border: 1px solid var(--color-room-tile-border);
@@ -592,13 +605,18 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
 .chat-emoji-wrap .chat-emoji-trigger:disabled { opacity: 0.5; cursor: default; }
 
 /* 5 колонок × 6 строк — ровно 30 эмодзи в EMOJI_OPTIONS (ChatPanel.tsx), без
-   неполной последней строки. */
+   неполной последней строки. `max-width` — страховка на случай совсем узкого
+   viewport: фикс-ширина 220px без потолка сама по себе не переполняется при
+   текущей раскладке (триггер у левого края панели, попап растёт вправо в
+   свободное место — проверено геометрией и вживую), но фиксированный размер
+   совсем без ограничителя — плохая практика сама по себе. */
 .chat-emoji-popover {
   position: absolute;
   bottom: calc(100% + var(--space-2));
   left: 0;
   z-index: 50;
   width: 220px;
+  max-width: calc(100vw - 2 * var(--space-4));
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 4px;
@@ -609,14 +627,30 @@ video[data-lk-source='screen_share'] { object-fit: contain; background: #000; }
   box-shadow: var(--shadow-room-panel);
 }
 .chat-emoji-popover .chat-emoji-option {
+  /* Настоящая причина переполнения (найдена по факту, не по догадке —
+     `getBoundingClientRect` показал кнопки 42×42px при колонке ~36px):
+     `.chat-input-row button` (специфичность 0,1,1) задаёт ВСЕМ кнопкам
+     формы `width/height: 42px` — это правило круглой кнопки «Отправить»,
+     а кнопки эмодзи в поповере тоже лежат внутри `.chat-input-row`
+     (см. комментарий выше про гонку специфичности, она чинилась для
+     цвета в 0.0.19, но не для размера). Без явного `width`/`height` здесь
+     побеждает тот 42px, сетка на 5 колонок раздувается за 220px попапа,
+     и последняя колонка уезжает вправо за рамку. `min-width: 0` сам по
+     себе НЕ помогает — конфликт не в авто-минимуме грида, а в explicit
+     width, который обязательно нужно перебить явно. */
+  width: auto;
+  height: auto;
+  min-width: 0;
   aspect-ratio: 1;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   background: none;
   border: none;
   font-size: 20px;
   line-height: 1;
+  white-space: nowrap;
   border-radius: var(--radius-md);
   cursor: pointer;
 }