/**
 * Команда F5 — runtime theme for La Suite Meet stand.
 * Brand book: black/white mass + green-yellow accent #E9FF60, Suisse Intl.
 */

@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/SuisseIntl-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/SuisseIntl-Book.woff') format('woff');
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/SuisseIntl-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/SuisseIntl-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/SuisseIntl-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Suisse Intl';
  src: url('/assets/fonts/SuisseIntl-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonts-sans: 'Suisse Intl', Inter, ui-sans-serif, system-ui, sans-serif;

  /* Light UI — black brand, lime accents */
  --colors-primary-50: #fcffe8;
  --colors-primary-100: #f7ffc8;
  --colors-primary-200: #f0ff9a;
  --colors-primary-300: #e9ff60;
  --colors-primary-400: #3a3a3a;
  --colors-primary-500: #202020;
  --colors-primary-600: #191919;
  --colors-primary-700: #0f0f11;
  --colors-primary-800: #000000;
  --colors-primary-900: #000000;
  --colors-primary-950: #000000;
  --colors-primary-action: #202020;

  /* Room / dark chrome — near-black + lime selected states */
  --colors-primary-dark-50: #0f0f11;
  --colors-primary-dark-75: #141416;
  --colors-primary-dark-100: #202020;
  --colors-primary-dark-200: #2a2a2a;
  --colors-primary-dark-300: #3a3a3a;
  --colors-primary-dark-400: #666666;
  --colors-primary-dark-500: #929292;
  --colors-primary-dark-600: #cecece;
  --colors-primary-dark-700: #e9ff60;
  --colors-primary-dark-800: #f0ff9a;
  --colors-primary-dark-900: #f7ffc8;
  --colors-primary-dark-950: #fcffe8;
  --colors-primary-dark-action: #e9ff60;

  --colors-greyscale-50: #f5f5f5;
  --colors-greyscale-100: #eeeeee;
  --colors-greyscale-1000: #000000;

  /* Semantic aliases used by LiveKit / some controls */
  --colors-primary: #000000;
  --colors-primary-hover: #202020;
  --colors-primary-active: #0f0f11;
  --colors-primary-text: #ffffff;
  --colors-primary-warm: #e9ff60;
  --colors-primary-subtle: #f7ffc8;
  --colors-primary-subtle-text: #000000;

  --colors-focus-ring: #e9ff60;
  --colors-alert: #000000;
  --colors-alert-notification: #ff6b00;

  letter-spacing: -0.015em;
}

html,
body {
  font-family: var(--fonts-sans);
  background-color: #ffffff !important;
  color: #000000;
}

html[data-lk-theme='visio-light'] {
  color-scheme: light;
}

/* Header logo — wide F5 wordmark */
.Header-logo {
  max-height: 36px !important;
  width: auto;
  height: auto;
}

@media (min-width: 640px) {
  .Header-logo {
    max-height: 44px !important;
  }
}

/* Hide French gov pre-logo block if present */
.Header-beforeLogo {
  display: none !important;
}

/* Soft lime wash on light pages (home / join) */
#root {
  min-height: 100%;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(233, 255, 96, 0.18), transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(172, 255, 27, 0.07), transparent 50%),
    #ffffff;
}

/* Conference room canvas */
.lk-room-container {
  background-color: #0f0f11 !important;
}

/* Selected control chips in room: lime bg via primaryDark.700 → dark icons */
.lk-room-container button[data-selected] {
  color: #202020 !important;
}

/* Focus rings → brand accent */
:focus-visible {
  outline-color: #e9ff60;
}

/* Accent mapping for LiveKit controls (keep light page readable) */
[data-lk-theme='visio-light'] {
  --lk-accent-bg: #000000;
  --lk-accent-fg: #ffffff;
  --lk-accent2: #202020;
  --lk-accent3: #0f0f11;
  --lk-danger: #ff6b00;
  --lk-font-family: var(--fonts-sans);
}

/*
 * Active speaker ring on webcam tiles.
 * LiveKit uses --lk-accent-bg (black in our theme) for the speaking outline;
 * match pressed control chips (lime #E9FF60) instead.
 * Outline lives on ::after only — inset shadow on the tile itself can sit
 * on top of the <video> and look like a black frame.
 */
.lk-room-container .lk-participant-tile[data-lk-speaking='true']::after {
  box-shadow: inset 0 0 0 3px #e9ff60 !important;
  outline: none;
}

/*
 * Grid must have a definite height so <video> can fill the tile.
 * height:auto + adaptiveStream reports 0×0 → SFU pauses all layers → black.
 */
.lk-room-container .lk-grid-layout-wrapper,
.lk-room-container .lk-focus-layout-wrapper {
  width: 100%;
  height: 100% !important;
}
.lk-room-container .lk-grid-layout,
.lk-room-container .lk-participant-tile {
  height: 100%;
  min-height: 0;
}
.lk-room-container video.lk-participant-media-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * Phones: percentage height inside the flex shell collapses on iOS, so the
 * grid row is 0 and <video> never paints. Pin the room to the visual viewport
 * and fill the tile. rotateY() on the video element itself is a black frame
 * in WebKit, so the mirror lives on a 2D scale instead.
 */
@media (max-width: 900px) {
  .lk-room-container {
    height: 100dvh;
    min-height: 100dvh;
  }
}

.lk-room-container .lk-participant-tile {
  position: relative;
  min-height: 0;
}

.lk-room-container video.lk-participant-media-video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  background: #000;
}

[data-lk-facing-mode='user']
  .lk-participant-media-video[data-lk-local-participant='true'][data-lk-source='camera'] {
  transform: scaleX(-1) !important;
}

/*
 * Phone cameras are portrait. An absolutely stretched <video> (inset 0 plus
 * width and height 100%) ignores the frame aspect on mobile browsers and
 * the picture looks vertically squashed. Size the element from the frame
 * and letterbox it inside the tile.
 */
.lk-room-container video.lk-participant-media-video[data-lk-orientation='portrait'] {
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center;
  transform: translate(-50%, -50%) !important;
}

.lk-room-container
  video.lk-participant-media-video[data-lk-local-participant='true'][data-lk-orientation='portrait'][data-lk-source='camera'] {
  transform: translate(-50%, -50%) scaleX(-1) !important;
}

/*
 * Fit every camera in the tile without stretching. Portrait phone frames
 * stay 9:16 inside the wider cell. Do not size the element from its
 * intrinsic pixels: that crops or squishes the picture.
 */
.lk-room-container video.lk-participant-media-video[data-lk-source='camera'] {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  object-fit: contain !important;
  transform: none !important;
}

.lk-room-container
  video.lk-participant-media-video[data-lk-local-participant='true'][data-lk-source='camera'] {
  transform: scaleX(-1) !important;
}