/*
 * VidConf — превью камеры на входе (сессия 33, `JoinPage`; LoginPage
 * превью не показывает — см. `DeviceCheckCard` не используется там).
 * Свой файл: компонент самодостаточный, стили ему не нужны нигде за
 * пределами компонента.
 */

.device-check { margin: 0 auto var(--space-5); }

/* Окошко превью и кнопки под ним — одна композиция шириной в половину
   карточки (`.flow-card`, куда компонент вложен): проценты сами масштабируются
   от фактической ширины родителя без хардкода пикселей. */
.device-check-inner { width: 50%; margin: 0 auto; }

.device-check-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
}

.device-check-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Своё видео принято показывать зеркально — так человек видит себя
     привычно, как в зеркале, а не «как его видят другие». */
  transform: scaleX(-1);
}

.device-check-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-400);
}
.device-check-placeholder .lucide { width: 26px; height: 26px; }

/* Кнопки без подписи, только пиктограммы — их совместная ширина равна
   ширине окошка превью (тот же `.device-check-inner`), за края не выступают. */
.device-check-toggles {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.device-check-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-ink-500);
  cursor: pointer;
}
.device-check-toggle .lucide { width: 18px; height: 18px; }
.device-check-toggle.is-on {
  background: var(--color-accent);
  border-color: transparent;
  color: var(--color-accent-text);
}
.device-check-toggle:disabled { opacity: 0.5; cursor: not-allowed; }

.device-check-hint {
  text-align: center;
  margin-top: var(--space-3);
}

/* Выбор фона под кнопками превью (сессия 35).
   Здесь плитки идут ОДНОЙ прокручиваемой строкой, а не сеткой, как в комнате
   и в профиле: карточка входа и без того высокая, а число своих картинок
   доходит до десяти — сетка выросла бы на шесть рядов и увела бы кнопку
   «Продолжить» за нижний край экрана. Строка держит высоту постоянной при
   любом числе картинок. Сами плитки — общие, см. virtual-background.css. */
.device-check-backgrounds {
  margin: var(--space-4) auto 0;
}
.device-check-backgrounds .bg-grid {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.device-check-backgrounds .bg-tile {
  flex: 0 0 auto;
  width: 72px;
}