/* Webinar room UI — scoped under .webinar-room-root / webinar- prefixed classes.
   Relies on the app's shared design tokens from figma-system.css (--bg, --surface, --text, etc). */

.webinar-room-root {
  position: relative;
  width: 100%;
  /* Комната живёт внутри #pageContent, у которого своей высоты нет (только min-height у обёрток),
     поэтому height:100% разрешался в auto: сцена раздувалась до размера видеопотока и страница
     начинала прокручиваться. --wr-top-offset (расстояние от верха страницы до комнаты) ставит
     webinar-room.js, так что комната всегда заканчивается ровно на нижней кромке окна.
     Пара vh/dvh — запас для браузеров без dvh: там просто не учитывается адресная строка. */
  --wr-top-offset: 0px;
  height: calc(100vh - var(--wr-top-offset));
  height: calc(100dvh - var(--wr-top-offset));
  max-height: calc(100vh - var(--wr-top-offset));
  max-height: calc(100dvh - var(--wr-top-offset));
  /* Никакой нижней планки: любая «гарантированная» высота на низком экране (телефон в
     альбомной ориентации) сразу возвращает прокрутку страницы. */
  min-height: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* ---------------------------------------------------------------- loading / fatal / gate screens */

.webinar-loading {
  height: 100%;
  /* Раньше экран ожидания был выше комнаты и обрезался её overflow:hidden на низких экранах. */
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 32px;
  text-align: center;
  color: var(--text-soft);
}
.webinar-loading p { max-width: 420px; line-height: 1.55; }
.webinar-spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--primary);
  animation: webinar-spin 0.85s linear infinite;
}
@keyframes webinar-spin { to { transform: rotate(360deg); } }

.webinar-fatal i[data-lucide] { width: 44px; height: 44px; color: var(--coral); }
.webinar-fatal h2 { margin: 4px 0 0; font-size: 19px; color: var(--text); }
.webinar-fatal i[data-lucide="flag"] { color: var(--primary); }
.webinar-fatal i[data-lucide="wifi-off"] { color: var(--amber); }

.webinar-gate {
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  /* Карточка входа выше телефона в альбомной ориентации — даём ей прокрутиться.
     safe center нужен, чтобы при переполнении не срезало верх карточки вместе с заголовком. */
  align-items: safe center;
  overflow-y: auto;
  padding: 24px;
  background: radial-gradient(circle at top, var(--primary-soft), var(--bg) 60%);
}
.webinar-gate-card {
  width: min(440px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 28px 26px 24px;
}
.webinar-gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.webinar-gate-eyebrow svg { width: 15px; height: 15px; }
.webinar-gate-card h1 { margin: 10px 0 8px; font-size: 24px; line-height: 1.25; }
.webinar-gate-desc { margin: 0 0 14px; color: var(--text-soft); line-height: 1.55; font-size: 14px; }
.webinar-gate-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; color: var(--text-soft); font-size: 13px; }
.webinar-gate-meta span { display: inline-flex; align-items: center; gap: 6px; }
.webinar-gate-meta svg { width: 15px; height: 15px; }

.webinar-gate-form .field { margin: 0 0 14px; }
.webinar-gate-error { min-height: 18px; margin-top: 8px; color: var(--coral); font-size: 13px; }

.webinar-countdown { text-align: center; padding: 10px 0 2px; }
.webinar-countdown-label { display: block; color: var(--text-soft); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.webinar-countdown strong { display: block; margin-top: 6px; font-size: 36px; font-weight: 850; font-variant-numeric: tabular-nums; color: var(--primary); }
.webinar-gate-note { margin: 10px 0 0; color: var(--text-soft); font-size: 12.5px; }

/* ---------------------------------------------------------------- room shell */

.webinar-room {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  background: var(--bg);
}

.webinar-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.webinar-topbar-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
/* Выход из комнаты: на широком экране шапка кабинета на месте и своя кнопка не нужна. */
.webinar-leave-btn { display: none; flex: 0 0 auto; }
.webinar-topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.webinar-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex: 0 0 9px; animation: webinar-pulse 1.6s ease-in-out infinite; }
@keyframes webinar-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.webinar-recording-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--coral-soft);
  color: var(--coral);
  font-size: 11px;
  font-weight: 800;
}
.webinar-recording-badge svg { width: 10px; height: 10px; fill: currentColor; }
.webinar-recording-badge.hidden { display: none; }
.webinar-topbar-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.webinar-me { color: var(--text-soft); font-size: 13px; white-space: nowrap; }
#wrDrawerToggle { display: none; }

.webinar-status-banner {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 750;
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow-soft);
}
.webinar-status-banner.warn { background: var(--amber-soft); color: var(--amber); }
.webinar-status-banner.ok { background: var(--success-soft); color: var(--success); }
.webinar-status-banner.hidden { display: none; }

.webinar-recording-notice {
  position: absolute;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  background: var(--coral);
  color: #fff;
  padding: 10px 18px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: var(--shadow);
}
.webinar-recording-notice.hidden { display: none; }

.webinar-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  gap: 0;
  position: relative;
}

/* ---------------------------------------------------------------- stage */

.webinar-stage {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #0d0d14;
  position: relative;
}

.webinar-stage-strip {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 10px 0;
  overflow-x: auto;
}
.webinar-stage-strip.hidden { display: none; }
.webinar-strip-tile {
  position: relative;
  flex: 0 0 auto;
  width: 120px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a24;
  border: 1px solid rgba(255,255,255,.12);
}
.webinar-strip-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.webinar-strip-tile span {
  position: absolute; left: 6px; bottom: 5px; padding: 2px 6px; border-radius: 5px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 700;
  max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.webinar-stage-main {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: grid;
  /* Явная единственная дорожка вместо автоматической — из-за неё height/max-height в процентах
     у видео считались от содержимого, а не от сцены: кадр разрастался до своего натурального
     размера, вылезал за сцену и снизу обрезался (особенно заметно на вертикальном видео). */
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
}
/* Только прямые потомки: на телефоне внутрь сцены переезжает окно своей камеры,
   и его видео не должно попасть под правила основного кадра. */
.webinar-stage-main > video, .webinar-stage-main > canvas {
  /* Занимаем всю сцену и вписываемся по пропорциям.
     С width/height: auto видео показывалось в своём исходном размере
     и на большом экране (и особенно в полноэкранном режиме) выглядело крошечным. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  background: #000;
}
.webinar-stage-main > video.hidden, .webinar-stage-main > canvas.hidden { display: none; }

/* Вертикальный поток (ведущий вещает с телефона). object-fit: contain уже не искажает кадр,
   но коробка во всю ширину оставляла огромные чёрные поля и сбивала центрирование:
   на широком экране отдаём высоту, ширину считает браузер по пропорции. */
.webinar-stage-main > canvas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.webinar-stage-main > video.is-portrait {
  width: auto;
  max-width: 100%;
  height: 100%;
}

/* Picture-in-picture camera overlay shown over screen share / presentation (task 1) */
.webinar-pip {
  /* Камера живёт первым блоком правой колонки: сцену она больше не перекрывает. */
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  flex: 0 0 auto;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0d0d14;
}
.webinar-pip.hidden { display: none; }
/* Без привязки к колонке: на телефоне это же окно висит в углу сцены. */
.webinar-pip video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Вертикальный кадр в окне 16:9 обрезался так, что от лица оставалась полоска:
   под портрет меняем пропорцию окна и показываем кадр целиком. Квадрат, а не 3/4 — иначе
   окно камеры занимало бы почти всю правую колонку и выдавливало участников с чатом. */
.webinar-pip.is-portrait { aspect-ratio: 1 / 1; }
.webinar-pip.is-portrait video { object-fit: contain; background: #000; }
.webinar-pip-name {
  position: absolute;
  left: 6px;
  bottom: 5px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  max-width: calc(100% - 12px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.webinar-stage-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.55);
  text-align: center;
  padding: 20px;
}
.webinar-stage-empty i[data-lucide] { width: 40px; height: 40px; }
.webinar-stage-empty p { max-width: 320px; margin: 0; font-size: 13.5px; line-height: 1.5; }
.webinar-slide-fallback { font-size: 12px; padding: 4px 10px; border-radius: 6px; background: rgba(255,255,255,.08); }
.webinar-slide-fallback.hidden { display: none; }

.webinar-presentation-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(10,10,16,.9);
  border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}
.webinar-presentation-bar.hidden { display: none; }
.webinar-presentation-bar .icon-btn { color: #eee; }
.webinar-presentation-bar .icon-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.webinar-page-counter { color: #eee; font-size: 12.5px; font-weight: 700; min-width: 56px; text-align: center; }
.webinar-bar-sep { width: 1px; height: 22px; background: rgba(255,255,255,.15); margin: 0 2px; }
.webinar-presentation-bar .btn.small { background: rgba(255,255,255,.08); border-color: transparent; color: #eee; }
.webinar-presentation-bar .btn.small:hover { border-color: var(--primary); }
.webinar-presentation-bar .btn.small.active { background: var(--primary); color: #fff; }
.webinar-presentation-bar .btn.small.danger { background: var(--coral-soft); color: var(--coral); }

/* ---------------------------------------------------------------- side column (participants / chat) */

.webinar-side {
  flex: 0 0 320px;
  width: 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--line);
}
.webinar-side-scrim { display: none; }

.webinar-side-tabs { flex: 0 0 auto; display: flex; border-bottom: 1px solid var(--line); }
.webinar-tab {
  flex: 1 1 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  color: var(--text-soft);
  font-weight: 750;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.webinar-tab svg { width: 16px; height: 16px; }
.webinar-tab.active { color: var(--primary); border-color: var(--primary); }

.webinar-side-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.webinar-side-panel.hidden { display: none; }

.webinar-participant-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; }
.webinar-participant-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 8px;
}
.webinar-participant-row:hover { background: var(--surface-2); }
.webinar-participant-row.speaking { background: var(--primary-soft); }
.webinar-participant-avatar {
  flex: 0 0 30px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--primary);
  display: inline-grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.webinar-participant-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webinar-participant-name em { color: var(--text-soft); font-style: normal; font-size: 11.5px; margin-left: 4px; }
.webinar-speaking-icon { width: 16px; height: 16px; color: var(--success); flex: 0 0 16px; animation: webinar-pulse 1.2s ease-in-out infinite; }
.webinar-hand-icon { width: 16px; height: 16px; color: var(--amber); flex: 0 0 16px; }
.webinar-participant-row .icon-btn.small { width: 30px; height: 30px; flex: 0 0 30px; }
.webinar-participant-row .icon-btn.small svg { width: 15px; height: 15px; }

.webinar-chat-log { flex: 1 1 auto; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.webinar-chat-msg { max-width: 92%; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); align-self: flex-start; }
.webinar-chat-msg.mine { align-self: flex-end; background: var(--primary-soft); }
.webinar-chat-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--text-soft); margin-bottom: 2px; }
.webinar-chat-meta strong { color: var(--text); font-weight: 750; }
.webinar-chat-text { font-size: 13.5px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.webinar-chat-form { flex: 0 0 auto; display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.webinar-chat-form input {
  flex: 1 1 auto; min-height: 40px; border: 1px solid var(--line); border-radius: 20px;
  padding: 8px 14px; background: var(--surface); color: var(--text); outline: none;
}
.webinar-chat-form input:focus { border-color: var(--primary); }
.webinar-chat-form .icon-btn { background: var(--primary); color: #fff; border-radius: 50%; }
.webinar-chat-form .icon-btn:hover { background: var(--primary-strong); }

/* ---------------------------------------------------------------- control bar */

.webinar-controlbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  overflow-x: auto;
}
.webinar-ctl-spacer { flex: 1 1 auto; }
.webinar-ctl {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 58px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 700;
}
.webinar-ctl:hover { background: var(--surface-2); color: var(--text); }
.webinar-ctl svg { width: 20px; height: 20px; }
.webinar-ctl.active,
.webinar-ctl[data-active="1"] { background: var(--primary-soft); color: var(--primary); }
.webinar-ctl-danger { color: var(--coral); }
.webinar-ctl-danger:hover { background: var(--coral-soft); color: var(--coral); }
.webinar-ctl-upload { position: relative; }
.webinar-ctl-upload-inner { display: flex; flex-direction: column; align-items: center; gap: 3px; }
/* Само поле выбора файла прячем визуально, но оставляем в раскладке и доступным с клавиатуры:
   с display:none мобильные браузеры иногда просто не открывают выбор файла по нажатию на лейбл. */
.webinar-ctl-file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip-path: inset(50%);
  pointer-events: none;
}
.webinar-ctl-upload:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; }
.webinar-ctl-upload-busy { opacity: .75; }
.webinar-ctl-upload-busy .webinar-ctl-upload-inner { color: var(--coral); }
#wrMobileDrawerBtn { display: none; }

.webinar-ctl.recording-active { background: var(--coral-soft); color: var(--coral); position: relative; }
.webinar-ctl.recording-active::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: webinar-pulse 1.2s ease-in-out infinite;
}

/* ---------------------------------------------------------------- permission banner + settings popover (task B) */

.webinar-permission-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 9px 14px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 13px;
  font-weight: 750;
}
.webinar-permission-banner.hidden { display: none; }
.webinar-permission-banner i[data-lucide] { width: 17px; height: 17px; flex: 0 0 17px; }
.webinar-permission-banner span { flex: 1 1 auto; min-width: 160px; }
.webinar-permission-banner .btn.small { flex: 0 0 auto; }

.webinar-settings-panel {
  position: absolute;
  top: 54px;
  right: 16px;
  z-index: 32;
  width: min(260px, calc(100vw - 32px));
  max-height: calc(100vh - 74px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 12px;
}
.webinar-settings-panel.hidden { display: none; }
.webinar-settings-panel h4 { margin: 14px 0 8px; font-size: 13px; }
.webinar-settings-panel h4:first-child { margin-top: 0; }
.webinar-settings-panel .btn.small { width: 100%; justify-content: center; }
.webinar-settings-panel .field { margin: 10px 0; }
.webinar-settings-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-soft); line-height: 1.4; }
.webinar-settings-hint:empty { display: none; }

/* ---------------------------------------------------------------- presentation upload/convert indicator (task A) */

.webinar-upload-indicator {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  padding: 9px 14px;
  border-radius: 10px;
  background: var(--surface-3);
  color: var(--text);
  box-shadow: var(--shadow-soft);
  font-size: 12.5px;
  font-weight: 700;
}
.webinar-upload-indicator.hidden { display: none; }
.webinar-upload-spinner {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--primary);
  animation: webinar-spin .85s linear infinite;
}
.webinar-upload-text { flex: 1 1 auto; line-height: 1.35; }
.webinar-upload-cancel {
  flex: 0 0 auto;
  border: 0;
  background: var(--surface-2);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.webinar-upload-cancel:hover { background: var(--coral-soft); color: var(--coral); }

/* ---------------------------------------------------------------- responsive: mobile (<720px) */

/* Второе условие — телефон, повёрнутый в альбомную ориентацию: ширины хватает, а высоты нет,
   и шапка кабинета забирает там половину комнаты. Ограничение по ширине оставляет обычные
   (широкие) окна на десктопе в прежней раскладке. Это же условие продублировано
   в webinar-room.js (NARROW_QUERY) — правьте их только вместе. */
@media (max-width: 720px), (max-height: 520px) and (max-width: 1024px) {
  /* --- комната во весь экран телефона (пункт 1) -----------------------------------------
     Класс webinar-immersive ставит webinar-room.js на <html> только пока открыта комната и
     снимает при выходе, поэтому на остальных страницах кабинета эти правила не действуют. */

  /* Шапка кабинета (логотип «Language2Go» + название раздела) занимала до 68px высоты и
     перекрывала комнату. Название вебинара и так есть в собственной верхней полосе,
     а выход из комнаты — в кнопке слева от него. */
  html.webinar-immersive header.topbar { display: none; }
  /* Поля контейнера страницы (до 96px снизу) не дают комнате занять экран целиком.
     !important — потому что боковые поля в figma-system.css объявлены с !important. */
  html.webinar-immersive .page-content { padding: 0 !important; max-width: none; }
  /* Плавающая кнопка поддержки висит в правом нижнем углу — ровно поверх «Завершить». */
  html.webinar-immersive .support-launcher { display: none; }
  /* Комната ровно в экран: прокручивать страницу не нужно и нечего. */
  html.webinar-immersive,
  html.webinar-immersive body { overflow: hidden; }

  /* Закрытая панель уезжает вниз на свою высоту и ложилась поверх панели управления (у неё
     z-index выше): кнопки под ней были видны, но нажатия перехватывала невидимая панель.
     Обрезаем по сцене — за её пределами панели нет ни на экране, ни для пальца. */
  .webinar-body { position: relative; overflow: hidden; }

  .webinar-stage { width: 100%; }
  .webinar-stage-main { padding-bottom: 4px; }

  /* Своя камера переезжает в угол сцены (перенос делает syncPipPlacement): в правой колонке
     она прячется вместе с выдвижной панелью, и ведущий не видит, что попадает в кадр. */
  .webinar-stage-main > .webinar-pip {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 6;
    width: 27vw;
    min-width: 92px;
    max-width: 132px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
  }
  /* В углу сцены окно и так маленькое — там вертикальный кадр удобнее показать вертикальным. */
  .webinar-stage-main > .webinar-pip.is-portrait {
    aspect-ratio: 3 / 4;
    width: 22vw;
    min-width: 76px;
    max-width: 104px;
  }

  .webinar-side {
    position: absolute;
    inset: auto 0 0 0;
    flex: none;
    width: 100%;
    /* Панель — это подсказка поверх эфира, а не отдельный экран: видео должно остаться видно. */
    max-height: 62vh;
    max-height: 62dvh;
    border-left: 0;
    border-top: 1px solid var(--line);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(0,0,0,.22);
    transform: translateY(100%);
    transition: transform .22s ease;
    z-index: 40;
  }
  .webinar-side.open { transform: translateY(0); }
  /* В колонке камера показывается только на широком экране — на телефоне она уже на сцене. */
  .webinar-side > .webinar-pip { display: none; }

  .webinar-side-scrim {
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(10,10,18,.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 35;
  }
  .webinar-side-scrim.open { opacity: 1; pointer-events: auto; }

  /* Панель управления. Раньше кнопки не влезали в строку и уезжали в горизонтальную прокрутку:
     «Презентация» и «Завершить» оказывались за краем экрана, и про них никто не знал.
     Теперь строка переносится — ни одна кнопка не пропадает. */
  .webinar-controlbar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    padding-left: max(10px, env(safe-area-inset-left));
    padding-right: max(10px, env(safe-area-inset-right));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  /* Распорка раздвигала кнопки по краям — при переносе строк она только мешает. */
  .webinar-ctl-spacer { display: none; }
  /* Палец мимо мелкой кнопки промахивается: 44x44 — нижняя граница для тапа. */
  .webinar-ctl {
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    padding: 6px 8px;
  }
  /* Подписи прячем, но НЕ обёртку кнопки загрузки: раньше `.webinar-ctl span` скрывал и её,
     кнопка «Презентация» схлопывалась в пустой лейбл и нажать её было невозможно. */
  .webinar-ctl span:not(.webinar-ctl-upload-inner) { display: none; }
  #wrMobileDrawerBtn { display: inline-flex; }
  /* Комната и так на весь экран, а системный полноэкранный режим забирает сцену вместе
     с панелью управления — на телефоне кнопка только отнимает место. */
  #wrFullscreenBtn { display: none; }

  .webinar-topbar {
    padding: 6px 12px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .webinar-topbar-title { gap: 7px; }
  .webinar-topbar-title strong { font-size: 14px; }
  /* inline-grid и flex-basis — как у остальных .icon-btn кабинета, иначе иконка съезжает
     в угол, а ширину диктует базис 40px из styles.css. */
  .webinar-leave-btn { display: inline-grid; width: 44px; height: 44px; flex: 0 0 44px; }
  .webinar-me { display: none; }

  .webinar-stage-strip { padding: 8px 8px 0; }
  .webinar-strip-tile { width: 92px; height: 56px; }

  /* Листалка слайдов тоже под палец: стрелки «назад/вперёд» — самые частые нажатия в эфире. */
  .webinar-presentation-bar { justify-content: center; gap: 6px; padding: 6px 8px; }
  .webinar-presentation-bar .icon-btn { width: 44px; height: 44px; flex: 0 0 44px; }
  .webinar-presentation-bar .btn.small { min-height: 40px; }

  .webinar-chat-form input { min-height: 44px; }

  .webinar-status-banner, .webinar-recording-notice { top: 46px; }
  .webinar-settings-panel {
    top: 44px;
    right: 12px;
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
  }
  .webinar-permission-banner { font-size: 12px; padding: 8px 12px; }
  /* Панель управления на телефоне может занять две строки — индикатор не должен под неё лезть. */
  .webinar-upload-indicator { bottom: calc(104px + env(safe-area-inset-bottom)); font-size: 12px; }
}

/* Никаких лишних движений там, где человек попросил их отключить. */
@media (prefers-reduced-motion: reduce) {
  .webinar-side, .webinar-side-scrim { transition: none; }
  .webinar-live-dot,
  .webinar-speaking-icon,
  .webinar-recording-badge svg,
  .webinar-ctl.recording-active::before { animation: none; }
}

@media (max-width: 420px) {
  .webinar-gate-card { padding: 22px 18px 18px; }
  .webinar-countdown strong { font-size: 30px; }
}

/* ---------------------------------------------------------------- shared webinar card (used by course-builder + admin list) */

.webinar-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.webinar-card.compact { padding: 12px; gap: 10px; }
.webinar-card-icon {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 9px;
  display: inline-grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
}
.webinar-card-icon svg { width: 20px; height: 20px; }
.webinar-card-body { flex: 1 1 auto; min-width: 0; }
.webinar-card-body h3 { margin: 6px 0 6px; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webinar-card-meta { display: flex; align-items: center; gap: 6px; color: var(--text-soft); font-size: 12.5px; margin-top: 3px; }
.webinar-card-meta svg { width: 14px; height: 14px; }
.webinar-card-actions { flex: 0 0 auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 92px; }
.webinar-card-actions .icon-btn { width: 32px; height: 32px; flex: 0 0 32px; }
.webinar-card-actions .icon-btn svg { width: 16px; height: 16px; }
.webinar-card-actions .icon-btn.danger { color: var(--coral); }
.webinar-card-actions .icon-btn.danger:hover { background: var(--coral-soft); }

@media (max-width: 480px) {
  .webinar-card { flex-wrap: wrap; }
  .webinar-card-actions { max-width: none; }
}


/* Полноэкранный режим: сцена растягивается на весь экран целиком. */
.webinar-stage:fullscreen,
.webinar-room:fullscreen .webinar-stage {
  width: 100%;
  height: 100%;
  background: #000;
}
.webinar-stage:fullscreen .webinar-stage-main,
.webinar-room:fullscreen .webinar-stage-main {
  height: 100%;
}

/* --- Модерация участников --------------------------------------------------- */
.webinar-participant-menu { position: relative; margin-left: auto; }
.webinar-participant-actions {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  min-width: 210px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); box-shadow: 0 12px 30px rgba(20, 8, 40, .18);
}
.webinar-participant-actions.hidden { display: none; }
.webinar-participant-actions button {
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer;
}
.webinar-participant-actions button:hover { background: var(--surface-2); }
.webinar-participant-actions button.danger { color: var(--coral); }
.webinar-muted-icon { width: 15px; height: 15px; color: var(--text-soft); flex: 0 0 auto; }
#wrPolicySection.hidden { display: none; }
#wrPolicySection .check-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }

@media (max-width: 720px) {
  .webinar-participant-actions { min-width: 180px; }
}