/* Phase 1 web/desktop video call grid.
 *
 * Collapsed to zero footprint until video is active so it never pushes the
 * message list around during an audio-only call. When a camera or screen share
 * is published, the video controller adds .video-grid--active and the grid
 * reveals its tiles. Tiles must be visible + sized: LiveKit adaptiveStream
 * pauses video sent to hidden or 0x0 elements. */

.video-grid {
  display: none;
}

.video-grid--active {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-shade, rgba(0, 0, 0, 0.03));
}

/* Screen-share spotlight: one large tile above the camera row. */
.video-grid__spotlight-wrapper {
  width: 100%;
}

.video-grid__spotlight {
  width: 100%;
}

.video-grid__spotlight .video-tile {
  width: 100%;
  max-height: 60vh;
}

/* Camera tiles wrap into a responsive row. */
.video-grid__cameras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
}

.video-grid__empty {
  color: var(--color-text-subtle, #666);
  margin: 0;
}

/* A single participant tile: video + name label. */
.video-tile {
  position: relative;
  flex: 0 0 auto;
  width: 200px;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius, 8px);
  overflow: hidden;
  background: #000;
  /* Tiles are draggable to a custom position (video_controller + tile_drag):
   * grab affordance, and touch-action:none so a touch-drag pans the tile rather
   * than scrolling the page. The transform carrying the drag offset (from the
   * tile's grid slot) is applied inline by applyOffset. */
  cursor: grab;
  touch-action: none;
}

/* While actively dragging: closed-hand cursor and lift the tile above siblings
 * so a moved tile is never obscured by an un-moved neighbour. */
.video-tile--dragging {
  cursor: grabbing;
  z-index: 2;
}

/* A tile carrying a custom (non-grid) position sits above un-moved siblings so
 * overlapping tiles stack the moved one on top. Double-click resets it. */
.video-tile--moved {
  z-index: 1;
}

.video-tile__video,
.video-tile__stream,
.video-tile__native-placeholder {
  width: 100%;
  height: 100%;
}

/* Native placeholder: a sized hole the native LiveKit layer draws video behind.
 * It must occupy the tile's full space so its getBoundingClientRect() gives the
 * native layer an accurate target rect (see native_video_overlay_controller).
 * Kept transparent-black so it reads as a video area before the native layer
 * paints, matching the web tile's black background. */
.video-tile__native-placeholder {
  display: block;
  background: #000;
}

.video-tile__stream {
  object-fit: cover;
  display: block;
}

/* Local self-view reads like a mirror, matching every other video app. */
.video-tile__stream--mirror {
  transform: scaleX(-1);
}

.video-tile__label {
  position: absolute;
  left: var(--inline-space-half, 4px);
  bottom: var(--inline-space-half, 4px);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

/* Active state for the camera / screen-share call buttons. */
.call-panel__camera--active,
.call-panel__screenshare--active {
  color: var(--color-link, #0b5fff);
  background: var(--color-selected-light, rgba(11, 95, 255, 0.12));
}