:root {
  --bg: #0f1115;
  --panel: #171a21;
  --panel-2: #1e222b;
  --text: #e8eaed;
  --muted: #9aa0a6;
  --accent: #3b82f6;
  --accent-2: #2563eb;
  --danger: #ef4444;
  --ok: #22c55e;
  --radius: 14px;
}

* { box-sizing: border-box; }

/* убрать серую вспышку/подсветку при тапе (выглядела как «выделение») */
html { -webkit-tap-highlight-color: transparent; }
button { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible) { outline: none; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

/* ---------- lobby screens ---------- */
.screen {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border: 1px solid #262a33;
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}

.card h1 { margin: 0 0 8px; font-size: 24px; }
.muted { color: var(--muted); }
.field {
  display: block;
  text-align: left;
  margin: 18px 0;
  font-size: 14px;
  color: var(--muted);
}
.field input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  font-size: 16px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid #2c313b;
  border-radius: 10px;
}
.field input:focus { outline: none; border-color: var(--accent); }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  border-radius: 10px;
}
.primary {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--accent-2);
}
.primary:hover { background: var(--accent); }
.error { color: var(--danger); font-size: 14px; margin: 10px 0 0; }

/* ---------- вход организатора ---------- */
.admin-box {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #262a33;
}
.small { font-size: 13px; }
.secondary {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid #2c313b;
}
.secondary:hover { background: #262b35; }
.linklike {
  margin-top: 8px;
  padding: 4px 6px;
  font-size: 13px;
  color: var(--accent);
  background: none;
  text-decoration: underline;
}
#adminBox .field { margin: 12px 0; }
#adminBox.hidden { display: none; }
code {
  background: var(--panel-2);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 14px;
}

/* ---------- личный кабинет ---------- */
.card.dashboard { max-width: 720px; text-align: left; }
.cabinet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cabinet-head h1 { margin: 0; }
.cabinet-head .linklike { margin-top: 0; }
.create-room { margin: 18px 0 8px; }
.create-room .field { margin-top: 0; }
.rooms-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.room-card {
  background: var(--panel-2);
  border: 1px solid #2c313b;
  border-radius: 12px;
  padding: 14px;
}
.room-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.room-head h2 { margin: 0; font-size: 17px; word-break: break-word; }
.room-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.room-actions .linklike { margin-top: 0; padding: 6px 8px; }
.links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid #262a33;
  border-radius: 10px;
  padding: 8px 10px;
}
.link-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}
.link-name { font-weight: 600; font-size: 14px; }
.link-url {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.link-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.link-actions .linklike { margin-top: 0; padding: 6px 8px; }
.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid #2c313b;
  border-radius: 8px;
}
.btn-sm:hover { background: #262b35; }
.danger-link { color: var(--danger); }
.add-link-form { display: flex; gap: 8px; margin-top: 10px; }
.add-link-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font-size: 14px;
  color: var(--text);
  background: var(--panel);
  border: 1px solid #2c313b;
  border-radius: 8px;
}
.add-link-form input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 640px) {
  .card.dashboard { padding: 18px; }
  .room-head { flex-direction: column; }
  .room-actions { justify-content: flex-start; }
  .add-link-form { flex-direction: column; }
  .link-actions { width: 100%; }
}

/* ---------- call screen ---------- */
#screen-call {
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

#stage {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 12px;
  padding-bottom: 96px;
  overflow: hidden;
}

#sharedWrap {
  width: 100%;
  height: 100%;
  position: relative;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
#sharedVideo { width: 100%; height: 100%; object-fit: contain; background: #000; }
.shared-label {
  position: absolute;
  left: 12px;
  bottom: 8px;
  padding: 6px 12px;
  font-size: 13px;
  background: rgba(0, 0, 0, .6);
  border-radius: 8px;
}

#grid {
  display: grid;
  gap: 10px;
  width: 100%;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-content: center;
  justify-content: center;
}
#grid.grid-1 { grid-template-columns: minmax(0, 1fr); max-width: 900px; margin: 0 auto; }
#grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* when a screen is shared, tiles become a corner strip */
#stage.sharing #sharedWrap { height: 100%; }
#stage.sharing #grid {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 220px;
  height: auto;
  max-height: calc(100% - 120px);
  grid-template-columns: 1fr;
  overflow-y: auto;
  align-content: start;
  z-index: 5;
}
#stage.sharing #grid .tile { aspect-ratio: 16 / 10; }

.tile {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  min-height: 0;
}
.tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Зеркалим ВСЕ камеры (свою и собеседников) — так пользователю привычнее;
     экран не зеркалим (текст должен читаться). Safari: translateZ(0)
     форсирует композитный слой, иначе <video> с MediaStream рендерится
     чёрным в странице (в PiP тот же элемент жив). */
  transform: scaleX(-1) translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
/* native PiP: «запаркованная» плитка ушедшего собеседника. Элемент остаётся
   в DOM (иначе Safari закроет PiP), но вне сетки и за экраном; видео играет. */
.tile.pip-parked {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 320px;
  height: 180px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.tile .name {
  position: absolute;
  left: 10px;
  bottom: 8px;
  padding: 3px 9px;
  font-size: 12px;
  background: rgba(0, 0, 0, .55);
  border-radius: 7px;
  max-width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tile .badges {
  position: absolute;
  right: 10px;
  top: 8px;
  display: flex;
  gap: 6px;
}
.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 7px;
  background: rgba(239, 68, 68, .85);
}
.tile.cam-off video { opacity: 1; } /* заглушка (canvas) уже показывает «камера выключена» */
.tile .kick {
  position: absolute;
  left: 10px;
  top: 8px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(239, 68, 68, .9);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.tile .kick:hover { background: var(--danger, #ef4444); }

/* ---------- controls ---------- */
#controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(15, 17, 21, .96), rgba(15, 17, 21, 0));
}
.ctrl {
  position: relative;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--text);
  background: var(--panel-2);
  border: 1px solid #2c313b;
}
.ctrl:hover { background: #262b35; }
.ctrl.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
.ctrl.off { background: #3a1d1d; border-color: #5b2626; color: #ffb4b4; }
.ctrl.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.ctrl:disabled { opacity: .4; cursor: default; }

/* Микрофон с выбором устройства: маленькая стрелка в углу. Сама стрелка не
   кликабельна (это псевдоэлемент), но зона клика по ней открывает список —
   см. micButtonClick в app.js. */
#micBtn.has-mic-menu::after,
#fsMicBtn.has-mic-menu::after {
  content: '▾';
  position: absolute;
  right: 4px;
  bottom: 1px;
  font-size: 9px;
  line-height: 1;
  opacity: .8;
  pointer-events: none;
}

/* Список микрофонов: fixed, чтобы жить и над #controls, и над #fsView (z-40). */
.mic-menu {
  position: fixed;
  z-index: 75;
  min-width: 210px;
  max-width: min(340px, calc(100vw - 16px));
  max-height: 46vh;
  overflow-y: auto;
  padding: 6px;
  border-radius: 12px;
  background: rgba(24, 28, 36, .98);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.mic-menu.hidden { display: none; }
.mic-menu-head {
  padding: 6px 9px 4px;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.mic-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.mic-item:hover { background: rgba(255, 255, 255, .08); }
.mic-item.active { background: rgba(59, 130, 246, .26); color: #fff; }
.mic-item .mic-check { flex: 0 0 14px; font-size: 12px; color: #93c5fd; }
.mic-item .mic-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mic-item:disabled { opacity: .5; cursor: default; }

/* ---------- подтверждение выхода (свой диалог, не window.confirm) ---------- */
/* Нативный confirm выбивает браузер из fullscreen и выглядит чужеродно.
   Диалог — обычный DOM поверх оверлея: fullscreen не трогает. */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .6);
}
.confirm-card {
  width: 100%;
  max-width: 340px;
  padding: 22px;
  background: var(--panel);
  border: 1px solid #262a33;
  border-radius: var(--radius);
  text-align: center;
}
.confirm-card p { margin: 0 0 18px; font-size: 17px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions button { flex: 1; width: auto; margin: 0; padding: 11px 14px; }
.confirm-actions .danger { background: var(--danger); color: #fff; font-weight: 600; }
.confirm-actions .danger:hover { filter: brightness(1.1); }

/* ---------- toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: 110px;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: rgba(0, 0, 0, .85);
  border-radius: 10px;
  font-size: 14px;
  z-index: 20;
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  #stage { padding: 8px; padding-bottom: 92px; }
  #grid { grid-template-columns: 1fr; gap: 8px; }
  #grid.grid-2 { grid-template-columns: 1fr; }
  /* Портрет: миниатюры — снизу, как лента в fullscreen-оверлее, а не
     колонкой справа-сверху. При выходе из оверлея лента не «прыгает» и
     не закрывает шаринг по центру. bottom = padding-bottom #stage, т.е.
     над нижней панелью управления. */
  #stage.sharing #grid {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 92px;
    width: auto;
    max-height: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-end;
    gap: 8px;
    overflow: hidden;
  }
  #stage.sharing #grid .tile {
    width: calc((100% - 8px) / 2);
    max-width: 220px;
  }
  .ctrl { padding: 10px 12px; font-size: 13px; }
}

/* ---------- fullscreen (overlay: big video + floating strip + control bar) ---------- */
/* Всю страницу переводим в полноэкранный режим (documentElement.requestFullscreen):
   браузерные полоски скрываются, поворот экрана сохраняет fullscreen.
   #fsMainVideo занимает весь экран (inset:0), лента уменьшенных — ПОВЕРХ видео
   колонкой справа, нижняя панель управления — поверх видео и гаснет по таймеру
   (появляется по тапу). */
body.fs #controls { display: none; }
body.fs #stage { display: none; } /* оверлей #fsView накрывает сцену целиком */
body.fs #toast { z-index: 60; bottom: 96px; } /* иначе тост прячется под #fsView (z-40) */

#fsView {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #000;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#fsView.hidden { display: none; }

/* крупное видео — во весь экран */
#fsMainVideoWrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none; /* жесты (pinch) наши, не браузерные */
}
#fsMainVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Камера сохраняет пропорции: на ПК и в прямоугольном окне видны поля,
     а не растянутое/обрезанное по бокам лицо. Экран тоже contain. */
  object-fit: contain;
  object-position: center;
  background: #000;
  display: block;
}
#fsMainVideo.fit-contain {
  object-fit: contain;
  object-position: left center; /* шаринг прижат влево — справа место под ленту */
}
/* камера крупно — зеркалим (как плитки); экран — нет (текст читаем) */
#fsMainVideo.mirrored {
  transform: scaleX(-1);
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* лента уменьшенных — поверх видео, колонкой справа, тапом переключает крупное.
   Полупрозрачная подложка с blur — превью читаемы на светлом видео. */
#fsStrip {
  position: absolute;
  right: 8px;
  top: 8px;
  /* Плашка обнимает превью, а не тянется до низа: иначе на телефоне
     полупрозрачная подложка съедает пол-экрана. */
  bottom: auto;
  height: auto;
  z-index: 42;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: clamp(132px, 30vw, 190px);
  max-width: 45vw;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10, 13, 19, .42);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  scrollbar-width: none; /* скроллбар мигал полоской при тапе — прячем */
  transition: opacity 0.22s ease;
}
#fsStrip::-webkit-scrollbar { display: none; }
/* вместе с панелью управления гаснет и лента превью (лук энд фил один и тот же
   в окне и в fullscreen). Но если включён «глазик» (fs-strip-pin), превью видны
   всегда и тап их не прячет — см. правило ниже */
body.fs-ui-hidden #fsStrip { opacity: 0; pointer-events: none; }
body.fs-strip-pin #fsStrip { opacity: 1; pointer-events: auto; }
/* Доска: панель звонка и превью скрываются кнопками на левом тулбаре.
   Панель не убираем из layout (только opacity): иначе превью «прыгают»
   при каждом показе — их нижний отступ считается от её высоты. */
body.fs-bar-hidden #fsBar { opacity: 0; pointer-events: none; transform: translateY(12px); }
body.fs-strip-off #fsStrip { display: none; }
#fsStrip .fs-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  /* высота задаётся из JS (fitFsStrip): вписываем до 4 превью без скролла */
  min-height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 2px solid transparent;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  cursor: pointer;
  padding: 0;
}
#fsStrip .fs-thumb.active { border-color: var(--accent, #4f8cff); }
#fsStrip .fs-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#fsStrip .fs-thumb video.mirrored {
  transform: scaleX(-1);
  -webkit-backface-visibility: hidden;
  will-change: transform;
}
#fsStrip .fs-thumb .fs-lbl {
  position: absolute;
  left: 4px;
  bottom: 2px;
  padding: 1px 5px;
  font-size: 10px;
  color: #fff;
  background: rgba(0, 0, 0, .5);
  border-radius: 5px;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#fsStrip .fs-thumb .fs-tag {
  position: absolute;
  right: 4px;
  top: 2px;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(79, 140, 255, .9);
  color: #fff;
}

/* ---------- fullscreen, портрет: крупный кадр по центру, превью гридом снизу ---------- */
/* В вертикальном режиме крупный кадр центрируется в свободной области над
   лентой (--fs-main-top), а не прижимается к верхнему краю; сама лента —
   грид снизу в два ряда (--fs-strip-h, --fs-thumb-w/h из fitFsStripPortrait). */
body.fs-portrait #fsMainVideoWrap {
  inset: var(--fs-main-top, 0) 0 auto 0;
  height: var(--fs-main-h, 45vh);
}
body.fs-portrait #fsMainVideo.fit-contain {
  object-position: center center;
}
body.fs-portrait #fsStrip {
  top: auto;
  height: var(--fs-strip-h, 30vh);
  bottom: calc(64px + env(safe-area-inset-bottom));
  left: 8px;
  right: 8px;
  width: auto;
  max-width: none;
  max-height: none;
  overflow: hidden;
  padding: 0; /* размеры превью уже включают отступы (See fitFsStripPortrait) */
  background: none; /* без подложки — иначе пустые места читаются как «тёмная зона» */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-end; /* превью прижаты к нижнему краю, а не по центру */
  justify-content: center;
}
body.fs-portrait #fsStrip .fs-thumb {
  width: var(--fs-thumb-w, 40vw);
  height: var(--fs-thumb-h, 22.5vw);
  min-height: 0;
}

/* «глазик» выключен (по умолчанию) — превью гаснут вместе с панелью по тапу.
   включён (fs-strip-pin) — видны всегда. display:none не используем: место
   под ленту сохраняется, чтобы тап не «прыгал». */
/* Портрет + доска: превью — компактной колонкой в правом нижнем углу, как
   в ландшафте. Плашка обтягивает кадры (а не тянется на пол-экрана) и не
   закрывает кнопки левого тулбара; снизу отступ ровно под панель звонка. */
body.board.fs-portrait #fsStrip {
  top: auto;
  left: auto;
  right: 8px;
  bottom: var(--fs-strip-bottom, calc(72px + env(safe-area-inset-bottom)));
  /* Ширину задаёт JS (--fs-strip-w) от правого края тулбара. С width:auto
     flex-wrap растягивал плашку почти на весь экран и она накрывала кнопки. */
  width: var(--fs-strip-w, auto);
  height: auto;
  max-width: calc(100% - 16px);
  /* Подложка не перехватывает жесты: кликабельны только сами превью. */
  pointer-events: none;
  max-height: calc(100% - 96px);
  padding: 6px;
  gap: 6px;
  overflow: hidden;
  background: rgba(10, 13, 19, .42);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: flex-end;
}
body.board.fs-portrait #fsStrip .fs-thumb {
  width: var(--fs-thumb-w, 132px);
  height: var(--fs-thumb-h, 74px);
  min-height: 0;
}
/* на доске панель звонка не заезжает под левый тулбар */
body.board #fsBar { left: 56px; padding-left: 0; }

/* На доске лента превью — только индикатор: и подложка, и кадры пропускают
   касания к холсту. Иначе в горизонтали плашка висит у правого края, второй
   палец пинча попадает в превью — и доска «не зумится». Крупное видео на
   доске всё равно скрыто, так что переключать превью там нечего. */
body.board #fsStrip,
body.board #fsStrip .fs-thumb { pointer-events: none; }
/* На доске превью — индикатор: убираем blur (он каждый кадр размывал холст
   под плашкой и грузил GPU; в fullscreen это ещё и мешало композитингу). */
body.board #fsStrip {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* На доске скрытые превью НЕ убираем из раскладки/композитинга (display:none):
   в fullscreen на Android удаление слоёв с видео оставляло canvas с последним
   кадром — доска «замирала», хотя касания доходили. Гасим прозрачностью:
   кадры не видны и не ловят касания, но их слои остаются. */
body.board.fs-strip-off #fsStrip {
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}

/* Обе панели скрыты — поднимаем canvas выше их прозрачных слоёв. На Android
   в fullscreen прозрачный слой над canvas мог «замораживать» его обновления:
   штрихи уходили учителю, а у ученика появлялись только после поворота.
   Тулбар (45) и панель выделения (46) остаются выше canvas. */
body.board.fs-bar-hidden.fs-strip-off #boardCanvas { z-index: 44; }


/* нижняя панель управления в полном экране: поверх видео, гаснет через 3 с */
#fsBar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 43;
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 26px 12px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  transition: opacity .22s ease, transform .22s ease;
}
#fsBar.ui-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}
#fsBar .ctrl {
  background: rgba(30, 34, 43, .85);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#fsBar .ctrl:hover { background: rgba(48, 54, 66, .95); }
/* Состояния не должны теряться из-за специфичности #fsBar .ctrl: выход
   остаётся красным, выключенный микрофон — красноватым, активное — синим,
   и при переходе в доску панель выглядит так же, как обычная. */
#fsBar .ctrl.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
#fsBar .ctrl.danger:hover { background: #dc2626; }
#fsBar .ctrl.off { background: #3a1d1d; border-color: #5b2626; color: #ffb4b4; }
#fsBar .ctrl.active { background: var(--accent-2); border-color: var(--accent); color: #fff; }
#fsBar .ctrl:disabled { opacity: .4; }

/* Сброс зума — плавающая кнопка в правом верхнем углу крупного кадра (левее
   ленты превью), а не в нижней панели: панель гаснет по тапу, а при
   увеличенном шаринге кнопка должна оставаться под рукой. Показывается
   только для увеличенного шаринга (см. applyFsZoom). */
#fsZoomReset {
  position: absolute;
  top: 8px;
  right: calc(16px + clamp(132px, 30vw, 190px));
  z-index: 44;
  background: rgba(30, 34, 43, .85);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#fsZoomReset:hover { background: rgba(48, 54, 66, .95); }
body.fs-portrait #fsZoomReset { right: 8px; }

/* ---------- доска (canvas поверх видео, лента и панель звонка остаются) ---------- */
body.board #fsMainVideoWrap { display: none; }
body.board #fsZoomReset { display: none; }
/* два пальца на трекпаде не должны уводить страницу назад/вперёд */
body.board { overscroll-behavior: none; }

#boardView {
  position: absolute;
  inset: 0;
  /* Без z-index: иначе #boardView становится отдельным stacking context, и
     тулбар (z45) с его fixed-флайаутами (z90) оказываются ПОД плашкой превью
     (z42), которая лежит выше #boardView. Так все они сравниваются в #fsView. */
  background: #f7f7f5;
  overflow: hidden;
}
#boardView.hidden { display: none; }

#boardCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* pan/zoom/drawing — наши Pointer Events */
  cursor: crosshair;
  /* Свой композитный слой: на Android в fullscreen canvas под прозрачными
     слоями панелей иногда оставался с последним кадром после их скрытия.
     translateZ(0) (без масштаба) не влияет на координаты касаний. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

#boardToolbar {
  position: absolute;
  top: 8px;
  left: 8px;
  bottom: 8px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: 14px;
  /* без backdrop-filter: он создаёт containing block и обрезал бы fixed-флайауты */
  background: rgba(23, 26, 33, .97);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
body.fs-portrait #boardToolbar {
  top: calc(6px + env(safe-area-inset-top));
  bottom: calc(6px + env(safe-area-inset-bottom));
}
#boardToolbar::-webkit-scrollbar { display: none; }

/* Кнопки доски и панелей — интерактивные элементы: двойной тап по ним не
   должен зумить страницу (на телефоне в fullscreen это ломало масштаб и
   сбивало координаты касаний). */
#boardToolbar,
#boardToolbar button,
#boardSelectionBar,
#boardSelectionBar button,
#fsBar,
#fsBar button,
#fsStrip {
  touch-action: manipulation;
}

.board-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 100%;
  padding-bottom: 5px;
  margin-bottom: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.board-group:last-child { border-bottom: 0; padding-bottom: 0; }

/* Undo/redo — в самом низу тулбара. Группа прилипает к нижнему краю, чтобы
   на длинной панели телефона «Отменить» не уезжала за экран. */
.board-history {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(23, 26, 33, .98);
  box-shadow: 0 -8px 12px rgba(23, 26, 33, .65);
}

/* Меню с выезжающей вправо панелью: hover (мышь) и tap (телефон). */
.board-menu { position: relative; flex: 0 0 auto; }
.board-menu-btn { position: relative; }
.board-menu.active > .board-menu-btn {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, .28);
  color: #fff;
}
.board-menu[data-tool-group] .board-menu-btn::after,
.board-menu:not([data-tool-group]) .board-menu-btn::after {
  content: '›';
  position: absolute;
  right: 2px;
  bottom: 0;
  font-size: 11px;
  color: rgba(232, 234, 237, .55);
  pointer-events: none;
}
.board-flyout {
  position: fixed;
  left: 62px;
  top: 8px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: min(360px, calc(100vw - 80px));
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 10px;
  border-radius: 12px;
  background: rgba(23, 26, 33, .985);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateX(-10px) scaleX(.97);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.board-menu.open > .board-flyout {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.board-flyout-title {
  color: #93a0b4;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.board-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.board-row-wrap { max-width: 300px; }
.board-tool-wide { min-width: 40px; }
.board-font { font-size: 17px; }

/* Панель выделения: висит над объектом (позицию считает board.js), поэтому
   не перекрывает ленту превью внизу. Держит фон, цвет, форматирование,
   группировку и z-order рядом — не нужно лазить в тулбар. */
#boardSelectionBar {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 46;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: max-content;
  max-width: min(680px, calc(100vw - 16px));
  max-height: min(52vh, calc(100vh - 120px));
  overflow-y: auto;
  padding: 7px 9px;
  border-radius: 14px;
  background: rgba(23, 26, 33, .97);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .4);
  scrollbar-width: none;
}
#boardSelectionBar::-webkit-scrollbar { display: none; }
#boardSelectionBar.hidden { display: none; }
.board-sel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
  color: #e8eaed;
  font-size: 12px;
  font-weight: 600;
}
.board-sel-count { color: #cbd5e1; }
.board-sel-close {
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
}
.board-sel-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  min-height: 24px;
}
.board-sel-row.hidden { display: none; }
.board-sel-label {
  min-width: 36px;
  color: #93a0b4;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.board-sel-size {
  height: 30px;
  padding: 0 4px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #2a2f3a;
  color: #e8eaed;
  font: inherit;
  font-size: 13px;
}
@media (max-width: 640px) {
  #boardSelectionBar {
    /* left/top считает JS — панель едет над объектом */
    max-width: calc(100vw - 16px);
    max-height: 40vh;
    gap: 4px;
    padding: 6px 8px;
  }
}
.board-size-btn, .board-style-btn, .board-align-btn { min-width: 36px; }
.board-order-btn { min-width: 40px; }
.board-act {
  min-width: auto;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
}
.board-act[data-act="front"], .board-act[data-act="back"],
.board-act[data-act="group"], .board-act[data-act="ungroup"],
.board-act[data-act="follow"], .board-act[data-act="import"],
.board-act[data-act="zoom"], .board-act[data-act="close"] { min-width: 42px; }

.board-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(42, 47, 58, .9);
  color: var(--text, #e8eaed);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.board-btn:hover { background: rgba(58, 65, 80, .95); }
.board-btn.active {
  border-color: var(--accent, #3b82f6);
  background: rgba(59, 130, 246, .28);
  color: #fff;
}
.board-btn:disabled { opacity: .35; cursor: default; }
.board-btn-danger { color: #fecaca; border-color: rgba(239, 68, 68, .5); }
.board-btn-close { color: #fff; background: rgba(239, 68, 68, .75); }
.board-width { min-width: 30px; font-size: 13px; }
.board-swatch {
  width: 22px;
  height: 22px;
  min-width: 22px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.board-swatch.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--accent, #3b82f6);
}
/* «∅» — прозрачная заливка: белый квадрат с красной диагональю */
.board-swatch-none {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, transparent 46%, #ef4444 46%,
    #ef4444 54%, transparent 54%), #fff;
  color: #475569;
  font-size: 11px;
  line-height: 1;
}
#boardTextEditor {
  position: absolute;
  z-index: 46;
  margin: 0;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  border: 2px solid var(--accent, #3b82f6);
  border-radius: 6px;
  background: #fff;
  color: #111827;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  outline: none;
  touch-action: auto;
  user-select: text;
  -webkit-user-select: text;
}
#boardTextEditor.hidden { display: none; }

/* Навигация по активному PDF: видна всем, в т.ч. гостям (страницы листает
   любой участник). */
#boardSections {
  position: absolute;
  top: 8px;
  left: 62px;
  z-index: 47;
  width: min(300px, calc(100vw - 24px));
  max-height: min(62vh, 620px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: rgba(23, 26, 33, .96);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
#boardSections.hidden { display: none; }
.board-sections-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 8px 14px;
  color: #e8eaed;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.board-sections-head .board-btn { min-width: 28px; height: 28px; font-size: 13px; }
#boardSectionsList {
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.board-section-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #d7dce2;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.board-section-item:hover { background: rgba(255, 255, 255, .08); }
.board-section-item.active { background: rgba(59, 130, 246, .28); color: #fff; }
.board-section-all {
  color: #93c5fd;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  border-radius: 8px 8px 4px 4px;
  margin-bottom: 3px;
}
.board-sections-add {
  display: flex;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.board-sections-add input {
  flex: 1 1 auto;
  min-width: 0;
  height: 30px;
  padding: 0 9px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .07);
  color: #e8eaed;
  font: inherit;
  font-size: 13px;
  outline: none;
}
.board-sections-add input::placeholder { color: #8a919c; }
.board-sections-add input:focus { border-color: var(--accent, #3b82f6); }
.board-sections-add .board-btn { min-width: 32px; height: 30px; font-size: 14px; }
.board-section-row {
  display: flex;
  align-items: stretch;
  gap: 2px;
  border-radius: 8px;
}
.board-section-row:hover { background: rgba(255, 255, 255, .06); }
.board-section-row .board-section-item { flex: 1 1 auto; min-width: 0; }
.board-section-row:hover .board-section-item { background: transparent; }
.board-section-del {
  flex: 0 0 auto;
  width: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9aa3af;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.board-section-edit {
  flex: 0 0 auto;
  width: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #9aa3af;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.board-section-edit:hover { background: rgba(59, 130, 246, .35); color: #fff; }
.board-section-del:hover { background: rgba(239, 68, 68, .35); color: #fff; }
.board-sections-empty {
  padding: 10px 12px 12px;
  color: #8a919c;
  font-size: 12px;
  line-height: 1.45;
}
@media (max-width: 640px) {
  #boardSections { top: calc(6px + env(safe-area-inset-top)); left: 56px; max-height: 58vh; }
}
#boardPdfBar {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 46;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 5px 7px;
  border-radius: 12px;
  background: rgba(23, 26, 33, .92);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#boardPdfBar.hidden { display: none; }
.board-pdf-page {
  min-width: 58px;
  text-align: center;
  color: #e8eaed;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.board-pdf-name {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cbd5e1;
  font-size: 13px;
}
.board-pdf-btn { min-width: 38px; height: 34px; }
@media (max-width: 640px) {
  .board-pdf-name { max-width: 84px; }
}

@media (max-width: 640px), (max-height: 720px) {
  #boardToolbar { gap: 3px; padding: 4px; }
  .board-btn { min-width: 32px; height: 32px; font-size: 15px; padding: 0 5px; }
  .board-flyout { padding: 8px; gap: 6px; }
}
@media (max-width: 640px) {
  #boardToolbar {
    top: calc(6px + env(safe-area-inset-top));
    left: 6px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    padding: 4px;
  }
}

/* ---------- импорт доски ---------- */
.board-import {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(5, 8, 14, .62);
}
.board-import.hidden { display: none; }
.board-import-card {
  width: min(560px, 100%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 16px;
  background: #171a21;
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  color: #e8eaed;
}
.board-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
}
.board-import-note {
  margin: 0;
  color: #9aa6b8;
  font-size: 12.5px;
  line-height: 1.5;
}
#boardImportUrl {
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .07);
  color: #e8eaed;
  font: inherit;
  font-size: 14px;
  outline: none;
}
#boardImportUrl:focus { border-color: var(--accent, #3b82f6); }
.board-import-status {
  min-height: 18px;
  color: #9aa6b8;
  font-size: 12.5px;
  line-height: 1.45;
  white-space: pre-wrap;
}
.board-import-status.error { color: #fca5a5; }
.board-import-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ---------- DBG HUD (телеметрия на экране) ---------- */
/* pointer-events:none — не перехватывает тапы (в т.ч. показ панели в fullscreen) */
#hud {
  position: fixed;
  left: 8px;
  top: 8px;
  z-index: 70;
  max-width: min(94vw, 520px);
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 10px;
  font: 11px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #d7dce2;
  background: rgba(0, 0, 0, .72);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 8px;
  pointer-events: none;
  white-space: pre-wrap;
  -webkit-user-select: none;
  user-select: none;
}
#hud .dim { color: #8a919c; }
#hud .warn { color: #ffd166; }
#hud .bad { color: #ff6b6b; }

/* распознавание речи (Vosk) — панель только у организатора */
#stt {
  position: fixed;
  left: 8px;
  bottom: 88px;
  z-index: 65;
  width: min(94vw, 460px);
  max-height: 42vh;
  display: flex;
  flex-direction: column;
  background: rgba(0, 0, 0, .78);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
#stt.hidden { display: none; }
#sttHead {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  font: 600 12px/1.4 system-ui, sans-serif;
  color: #e7ebf0;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
#sttHead .stt-note { font-weight: 400; font-size: 11px; color: #9aa3af; }
#sttClose {
  margin-left: auto;
  padding: 0 6px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, .1);
  color: #e7ebf0;
  font: 700 13px/1.6 system-ui, sans-serif;
  cursor: pointer;
}
#sttClose:hover { background: rgba(255, 80, 80, .45); }
#sttLog {
  padding: 8px 10px;
  overflow-y: auto;
  font: 13px/1.5 system-ui, sans-serif;
  color: #e7ebf0;
}
#sttLog .stt-line { margin-bottom: 4px; word-break: break-word; }
#sttLog .stt-line b { color: #8fb4ff; }
#sttLog .stt-sys { color: #9aa3af; font-size: 12px; }
#sttLog .stt-err { color: #ff8a8a; }
#sttLog .stt-live { opacity: .65; }

/* Совместное медиа: панель выше доски/панели звонка, ниже тостов и диалогов. */
#mediaPanel {
  position: fixed;
  right: 14px;
  bottom: calc(82px + env(safe-area-inset-bottom));
  z-index: 47;
  width: min(440px, calc(100vw - 24px));
  padding: 8px;
  border-radius: 12px;
  background: rgba(17, 20, 26, .94);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4);
  color: #e7ebf0;
  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#mediaPanel.hidden { display: none; }
body.fs #mediaPanel { bottom: calc(84px + env(safe-area-inset-bottom)); }
.media-head { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px; }
#mediaTitle { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-close {
  min-width: 28px; height: 28px; padding: 0 7px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px;
  background: rgba(255, 255, 255, .08); color: #e7ebf0;
  font: 700 13px/1 system-ui, sans-serif; cursor: pointer;
}
.media-close:hover { background: rgba(255, 80, 80, .45); }
.media-row { display: flex; align-items: center; gap: 6px; margin: 4px 0; }
.media-row input[type="url"] {
  flex: 1; min-width: 0; padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  background: #0f1218; color: #e7ebf0; font: inherit;
}
.media-row button, .media-ctrl {
  min-height: 30px; padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px;
  background: rgba(42, 47, 58, .95); color: #e7ebf0;
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.media-row button:hover, .media-ctrl:hover { background: rgba(58, 65, 80, .98); }
.media-ctrl:disabled { opacity: .35; cursor: default; }
.media-stop { color: #fecaca; border-color: rgba(239, 68, 68, .5); }
#mediaStage {
  position: relative; aspect-ratio: 16 / 9; margin: 6px 0;
  background: #000; border-radius: 8px; overflow: hidden;
}
#mediaStage.audio { aspect-ratio: auto; height: 54px; }
#mediaVideo { width: 100%; height: 100%; display: block; background: #000; object-fit: contain; }
#mediaStage.audio #mediaVideo { display: none; }
#mediaStage.embed #mediaVideo { display: none; }
#mediaStage:not(.embed) #mediaEmbed { display: none; }
#mediaEmbed { position: absolute; inset: 0; }
#mediaEmbed iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; }
/* Кнопка-страховка на случай, если браузер всё же не дал звук: маленькая,
   не перекрывает видео и не мешает смотреть. Накладку «Включить звук» во
   весь экран убрали — она появлялась и когда видео уже играло. */
#mediaSoundHint {
  position: absolute; right: 10px; bottom: 10px; z-index: 3;
  width: 42px; height: 42px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .62); color: #fff;
  font: 20px/1 system-ui, sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
#mediaSoundHint.hidden { display: none; }
#mediaAudioBadge {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font: 600 14px/1 system-ui, sans-serif; letter-spacing: .08em;
  text-transform: uppercase; background: linear-gradient(135deg, #1f2937, #0f1218);
}
#mediaAudioBadge.hidden { display: none; }
#mediaBar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
#mediaSeek { flex: 1 1 120px; min-width: 80px; accent-color: #3b82f6; }
#mediaVol { width: 68px; accent-color: #3b82f6; }
.media-time { color: #cbd5e1; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.media-status { color: #9aa3af; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-status.error { color: #ff8a8a; }
.media-ctrl.active {
  background: rgba(77, 124, 255, .35);
  border-color: #4d7cff;
  color: #fff;
}
/* Медиа «на весь экран»: панель растягивается на вьюпорт. Это не нативный
   Fullscreen API (его нельзя включить удалённо без жеста), а тот же экранный
   режим, что и оверлей звонка, поэтому он работает и на iPhone.
   backdrop-filter убран: полноэкранное размытие поверх живого WebRTC-видео
   заметно нагружает GPU и само по себе даёт рывки. */
body.media-max #mediaPanel {
  top: 0; left: 0; right: 0; bottom: 0;
  width: auto; height: auto; max-height: none;
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
           max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  border: 0; border-radius: 0;
  /* выше доски и её тулбара, но ниже диалогов подтверждения/импорта */
  z-index: 79;
  display: flex; flex-direction: column;
  background: #05070a;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.media-max #mediaPanel.hidden { display: none; }
body.media-max #mediaStage {
  flex: 1 1 auto; min-height: 0;
  aspect-ratio: auto; margin: 8px 0;
}
body.media-max #mediaStage.audio { flex: 0 0 54px; height: 54px; }
body.media-max #mediaBar,
body.media-max .media-head { flex: 0 0 auto; }
body.media-max #mediaSetup { flex: 0 0 auto; }
body.media-max #mediaEmbed,
body.media-max #mediaVideo { width: 100%; height: 100%; }
body.media-max #mediaTitle { font-size: 14px; }
/* Ученик: только видео, на весь экран, без единой кнопки — до команды stop. */
body.media-locked #mediaPanel {
  padding: 0;
  background: #000;
}
body.media-locked #mediaStage {
  margin: 0;
  border-radius: 0;
}
body.media-locked #mediaStage.audio {
  flex: 1 1 auto; aspect-ratio: auto; height: auto;
}
@media (max-width: 640px) {
  #mediaPanel {
    left: 8px; right: 8px; width: auto;
    bottom: calc(76px + env(safe-area-inset-bottom));
    max-height: 58vh; overflow-y: auto;
  }
}
body.fs #stt { bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 71; }
#fsStrip .fs-thumb.active { border-color: #4d7cff; }
#fsStrip .fs-thumb.conn-bad { border-color: #ff4d4d; }
.tile.conn-bad video,
#fsStrip .fs-thumb.conn-bad video {
  filter: grayscale(0.3) brightness(0.6);
}
.tile.conn-bad .name::after {
  content: ' · связь нестабильна';
  color: #ffb3b3;
}
#fsStrip .fs-thumb.conn-bad::after {
  content: 'связь';
  position: absolute;
  left: 6px;
  top: 6px;
  background: rgba(255,77,77,0.92);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  z-index: 2;
}
.tile .mic-led,
#fsStrip .fs-thumb .mic-led {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(77,124,255,0.95), rgba(77,255,172,0.95));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .08s linear;
  z-index: 2;
  pointer-events: none;
}
.ctrl.mic-active {
  box-shadow: inset 0 0 0 2px rgba(77,124,255,0.45);
  background: rgba(77,124,255,0.12);
}


/* подсветка активного говорящего (анализ входящего звука) */
.tile.speaking {
  box-shadow: 0 0 0 3px rgba(77, 255, 172, 0.85), 0 0 18px rgba(77, 255, 172, 0.35);
}
#fsStrip .fs-thumb.speaking {
  border-color: #4dffac;
  box-shadow: 0 0 10px rgba(77, 255, 172, 0.5);
}

.ctrl-ic { font-size: 16px; line-height: 1; padding: 0; width: 44px; height: 40px; }
/* пиктограммы-иконки: SVG цветом кнопки (currentColor), ровно по центру */
.ctrl { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.ctrl svg { width: 20px; height: 20px; display: block; }

.tile .badges .badge.hidden { display: none; }
.badge.badge-speak { background: rgba(77,255,172,0.9); color: #042; font-weight: 600; }
.badge.badge-mic { background: rgba(239,68,68,0.9); color: #fff; }

.badge.badge-loc { background: rgba(255,180,0,0.92); color: #221; }