/* The `hidden` attribute (UA `display: none`) ties with `.video-call__surface`
   on specificity, so the explicit `display` below would otherwise override it
   and leak the surface onto every room. Keep this rule first so `[hidden]` wins. */
.video-call__surface[hidden] {
  display: none;
}

/* While a call is in progress, the camera button in the nav carries a red badge
   with the participant count — like the sidebar's unread dot, but numbered.
   Keeps the top nav line clean (no separate "N in call" pill). */
.nav-call-launcher {
  position: relative;
  display: inline-flex;
}

.call-badge {
  position: absolute;
  inset-block-start: -0.15em;
  inset-inline-end: -0.15em;
  min-inline-size: 1.5em;
  block-size: 1.5em;
  padding-inline: 0.3em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1em;
  background-color: var(--color-negative);
  color: var(--color-text-reversed);
  font-size: 0.7em;
  font-weight: 700;
  line-height: 1;
  /* A ring in the page background so the badge reads as a chip sitting on the
     button edge, not part of the icon. */
  border: 0.15em solid var(--color-bg, var(--color-text-reversed));
  pointer-events: none;
}

/* Pin the call to the top of the scrolling message area so the chat scrolls
   underneath it. It sits *below* the fixed #nav (offset by --navbar-height, the
   same trick the messages list uses) and stays under the nav/sidebar in the
   stacking order (z-index below #nav's 2 and #sidebar's 3) so the nav icons and
   the collapsed-sidebar toggle stay visible and clickable. Only active (the
   controller adds this class on start), so an idle room is unaffected. */
.video-call--active {
  position: sticky;
  top: var(--navbar-height);
  z-index: 1;
  margin-block-start: var(--navbar-height);
  padding-block-end: var(--block-space-half, 0.5rem);
  background: var(--color-bg);
}

.video-call__surface {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half, 0.5rem);
  padding: var(--block-space, 1rem);
  background: var(--color-bg-shade, #00000010);
  border-radius: var(--border-radius, 0.75rem);
  /* Stay within the space below the nav so the chat scrolls *underneath* the
     call and the control bar is always reachable — even with a tall presenting
     stage. Without this the sticky surface grows past the viewport and you have
     to scroll the bar out of view to see the chat. */
  max-height: calc(100dvh - var(--navbar-height));
}

/* The control bar never scrolls away: it's a fixed-height header and the grid
   below it takes the remaining space (scrolling internally if it has to). */
.video-call__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--inline-space, 1rem);
  flex-wrap: wrap;
}

/* A fixed 2-column grid (max 4 participants = 2x2). With one person you sit in
   the top-left quadrant at a natural proportion, rather than a wide letterbox. */
.video-call__grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: var(--block-space-half, 0.5rem);
}

.video-call__tile {
  position: relative;
  aspect-ratio: 16 / 9;
  /* Keep each row compact so the chat stays visible below; Fullscreen expands it. */
  max-height: 38vh;
  overflow: hidden;
  border-radius: var(--border-radius, 0.75rem);
  background: #000;
}

.video-call__tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-call__tile--self video {
  /* Mirror your own preview, like every other video app. */
  transform: scaleX(-1);
}

.video-call__name {
  position: absolute;
  inset-block-end: 0.25rem;
  inset-inline-start: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.4rem;
  font-size: 0.75rem;
  color: #fff;
  background: #00000080;
}

/* Presenting: the shared screen (the presenter's tile) becomes a full-width
   stage; everyone else shrinks into a thin filmstrip in the row below so the
   whole call still fits within the surface and the controls stay visible. */
.video-call__grid.is-presenting {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.video-call__grid.is-presenting .video-call__tile--stage {
  grid-column: 1 / -1;
  aspect-ratio: auto;
  /* `contain` (below) shows the whole screen rather than cropping it like a
     webcam. The surface cap + the thin filmstrip keep this within the viewport. */
  height: 60vh;
  min-height: 0;
  max-height: 60vh;
}

.video-call__grid.is-presenting .video-call__tile:not(.video-call__tile--stage) {
  aspect-ratio: 16 / 9;
  max-height: 16vh;
}

.video-call__tile--stage video {
  object-fit: contain;
  background: #000;
}

/* Audio & video settings: a gear button in the control bar that opens the shared
   `popup` menu (same mechano as the message "…" menu) holding the mic/camera
   pickers. The <details> marker is hidden so the <summary> reads as a plain icon
   button like its neighbours. */
.video-call__settings > summary {
  list-style: none;
  cursor: pointer;
}

.video-call__settings > summary::-webkit-details-marker {
  display: none;
}

/* The control bar (not the mid-bar gear) is the positioning context, so the menu
   always drops from the bar's right edge — which hugs the viewport edge — instead
   of hanging off the left of a centred button and clipping on mobile. */
.video-call__controls {
  position: relative;
}

.video-call__settings-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-end: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: var(--block-space-half, 0.5rem);
  inline-size: 16rem;
  /* Never wider than the viewport (minus the surface padding) on a phone. */
  max-inline-size: calc(100vw - 2rem);
  padding: var(--block-space-half, 0.5rem);
  border-radius: var(--border-radius, 0.75rem);
  background: var(--color-bg);
}

/* Flip above the bar when the popup controller detects we're near the viewport
   bottom (e.g. a call docked low on screen). */
.video-call__settings.popup-orientation-top .video-call__settings-menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + 0.35rem);
}

.video-call__settings[open] .video-call__settings-menu {
  display: flex;
}

.video-call__device {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.video-call__device select {
  inline-size: 100%;
}

/* Call full: shrink the surface to a one-line notice (status + a way to leave)
   so the rejected person stays in the room and keeps chatting. */
.video-call__surface--notice .video-call__grid,
.video-call__surface--notice .video-call__settings,
.video-call__surface--notice .video-call__controls .btn:not(.btn--negative) {
  display: none;
}

/* Minimized: shrink the inline call to roughly half the viewport so the chat
   below it stays visible without resizing the window. The tiles shrink to fit
   that height (the grid still scrolls internally if they can't). Fullscreen has
   higher specificity below, so going fullscreen overrides this. */
.video-call__surface--compact {
  max-height: 50dvh;
}

.video-call__surface--compact .video-call__tile {
  max-height: 20vh;
}

/* Fullscreen: fill the screen and let the tiles grow. There's no nav here, so
   drop the viewport cap that keeps the inline call below the navbar. */
.video-call__surface:fullscreen {
  margin: 0;
  max-height: none;
  background: #000;
  justify-content: center;
}

.video-call__surface:fullscreen .video-call__grid {
  flex: 1;
  align-content: center;
}

.video-call__surface:fullscreen .video-call__tile {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 82vh;
}