:root {
  --bg: #0f1115;
  --card: #181b22;
  --fg: #e8eaed;
  --muted: #9aa0aa;
  --accent: #5b8cff;
  --danger: #ff5b6e;
  --ok: #43d17a;
  --border: #262a33;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 16px;
  background: radial-gradient(1200px 800px at 50% -10%, #1b2030, var(--bg));
  color: var(--fg);
  font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.app {
  width: min(100%, 460px);
  transition: width 180ms ease;
}

body.room-expanded {
  place-items: stretch center;
}

body.room-expanded .app {
  width: 100%;
  min-height: calc(100dvh - 32px);
}

body.room-compact .app {
  width: min(100%, 320px);
}

body.room-compact-wide .app {
  width: min(100%, 480px);
}

/* Gallery: cameras on but nothing pinned to the stage. Use the available width
   instead of squeezing the camera grid into a narrow column. */
body.room-gallery .app {
  width: min(100%, 1600px);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.tm-mark {
  margin-left: 0.1em;
  font-size: 0.45em;
  font-weight: 700;
  line-height: 0;
  vertical-align: super;
  letter-spacing: 0.02em;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}

.info-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #596170;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.info-btn:hover,
.info-btn:focus-visible {
  border-color: var(--accent);
  color: var(--fg);
}

.info-btn:focus-visible,
.dialog-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sub {
  margin: 0 0 20px;
  color: var(--muted);
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

input[type="text"] {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #0f1218;
  color: var(--fg);
  font-size: 16px;
}

input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
}

button {
  padding: 14px 16px;
  border-radius: 12px;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.05s ease, filter 0.15s ease;
}

button:active {
  transform: translateY(1px);
}

#join-btn {
  background: var(--accent);
  color: white;
}

.hint {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 13px;
}

/* Build stamp ("<datum tid> <hash>"). Two pixels smaller than .hint, muted
   and centred — sits under the lobby tip and under the room's "Lämna"-knapp. */
.build-version {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
}

.error {
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 14px;
}

.enable-audio {
  width: 100%;
  margin-bottom: 16px;
  background: var(--accent);
  color: white;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.18);
  }
}

.room-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  margin-bottom: 18px;
}

.room-header .title-row {
  margin-bottom: 0;
}

.status {
  color: var(--muted);
  font-size: 13px;
}

.status.live {
  color: var(--ok);
}

.bandwidth {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 18px;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.bw-meter {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.bw-arrow {
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

.bw-up .bw-arrow {
  color: var(--accent);
}

.bw-down .bw-arrow {
  color: var(--ok);
}

.bw-value {
  min-width: 5.5em;
}

/* Visually-hidden label kept for screen readers / accessibility. */
.bw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.dot.speaking {
  background: var(--ok);
  box-shadow: 0 0 0 4px rgba(67, 209, 122, 0.18);
}

.connection-warning {
  display: none;
  color: #ffce8a;
  font-size: 10px;
  font-weight: 600;
}

.connection-uncertain .dot {
  background: #ffb84c;
  box-shadow: 0 0 0 4px rgba(255, 184, 76, 0.12);
}

.connection-uncertain .connection-warning {
  display: block;
}

.screen-wrap {
  position: relative;
  margin: 0 0 20px;
  padding: 0;
  min-width: 0;
  min-height: 0;
}

.screen-wrap.can-reset-focus {
  cursor: pointer;
}

.screen-wrap.is-focused .screen-video {
  outline: 2px solid rgba(91, 140, 255, 0.45);
  outline-offset: 2px;
}

.screen-video {
  width: 100%;
  border-radius: 12px;
  background: #000;
  border: 1px solid var(--border);
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

.screen-label {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.camera-limit-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 184, 76, 0.45);
  background: rgba(255, 184, 76, 0.1);
  color: #ffce8a;
  font-size: 14px;
}

.camera-limit-banner p {
  margin: 0;
  flex: 1;
}

.camera-limit-dismiss {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  border: 1px solid var(--border);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}

#room-view.participants-many .video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.video-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  text-align: inherit;
  font: inherit;
  color: inherit;
  width: 100%;
}

.video-tile-media {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #08090c;
  border: 1px solid var(--border);
  width: 100%;
}

.video-tile.has-video:hover .video-tile-media {
  border-color: #4a5568;
}

.video-tile.is-focused .video-tile-media {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(91, 140, 255, 0.35);
}

.video-tile:focus-visible {
  outline: none;
}

.video-tile:focus-visible .video-tile-media {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.video-tile:active {
  transform: none;
}

.video-tile.self {
  order: 999;
}

.video-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-tile-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #141820;
  color: var(--muted);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.video-tile.has-video .video-tile-placeholder {
  display: none;
}

.video-tile-name {
  display: block;
  padding: 0 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-tile:hover .video-tile-name,
.video-tile:focus-visible .video-tile-name {
  color: var(--fg);
  font-weight: 600;
}

.video-tile .dot {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 1;
}

.video-tile.connection-uncertain .video-tile-media {
  border-color: rgba(255, 184, 76, 0.45);
}

.video-tile .connection-warning {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  color: #ffce8a;
  font-size: 10px;
  font-weight: 600;
}

.video-tile.connection-uncertain .connection-warning {
  display: block;
}

/* --- Compact room layout (no stage) ------------------------------------ */
#room-view.layout-compact .sidebar-rail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#room-view.layout-compact .room-header {
  margin: 0;
}

#room-view.layout-compact .enable-audio,
#room-view.layout-compact .camera-limit-banner,
#room-view.layout-compact .bandwidth {
  margin: 0;
}

#room-view.layout-compact .video-grid {
  margin: 0;
}

/* Smallest layout (compact, < 5 participants, ~320px wide card): stack the
   camera tiles in a single column so each one gets the full width and grows a
   bit, instead of being squeezed into two narrow columns. */
#room-view.layout-compact:not(.layout-compact-wide) .video-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Shrink the button text in the narrow layout so long Swedish labels
   ("Stäng av video för mig", "Sluta dela skärm") don't look broken or wrap. */
#room-view.layout-compact:not(.layout-compact-wide) .controls button {
  padding: 12px 14px;
  font-size: 14px;
}

#room-view.layout-compact:not(.layout-compact-wide) .camera-quality-option span {
  font-size: 12px;
}

/* --- Gallery compact layout (cameras on, nothing pinned) --------------- */
/* The camera grid becomes a wide, responsive gallery that fills the width.
   auto-fit lets a few tiles grow to share the row (up to a sane cap so a lone
   camera doesn't become enormous); they wrap to new rows as more cameras join,
   and collapse to a single column on narrow viewports. */
#room-view.layout-compact.gallery .video-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 460px));
  justify-content: center;
}

/* On wide screens, split into a wide gallery (left) plus a slim controls column
   (right), mirroring the focused stage layout. Below this width the .sidebar-rail
   stays a single stacked column (see .layout-compact rules above). */
@media (min-width: 760px) {
  /* Two columns: a wide gallery on the left, the controls stacked on the right.
     row-gap MUST be 0: the gallery spans every (mostly empty) implicit row, so
     any row-gap multiplies into a huge phantom page height. The base
     `.layout-compact .sidebar-rail` sets `gap: 12px` (flex), so we have to reset
     the row component explicitly here. Spacing between the right-column items is
     done with margins instead. */
  #room-view.gallery .sidebar-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(240px, 26%, 340px);
    align-items: start;
    column-gap: 20px;
    row-gap: 0;
  }

  #room-view.gallery .sidebar-rail > * {
    grid-column: 2;
    margin: 0;
  }

  #room-view.gallery .sidebar-rail > * + * {
    margin-top: 12px;
  }

  /* The gallery owns the left column across all rows but keeps its natural
     height (align-self: start), so its camera tiles never stretch to match the
     controls column. */
  #room-view.gallery .sidebar-rail .video-grid {
    grid-column: 1;
    grid-row: 1 / span 9999;
    align-self: start;
    margin: 0;
  }
}

/* Mobile gallery ("nothing focused"): shrink the per-tile minimum so a phone
   fits two cameras side by side instead of one full-width tile (better screen
   use; content is still legible). A lone tile still fills the row via auto-fit,
   and larger phones may show three. Desktop gallery keeps its wider minmax
   above. Only applies to the unfocused gallery — the focused/stacked mobile
   layout is intentionally left as-is so a shared screen / focused camera stays
   big. Capped at 759.98px so it never overlaps the desktop gallery split
   (`min-width: 760px`) at exactly 760px, and the .98 avoids a sub-pixel gap. */
@media (max-width: 759.98px) {
  /* Trim the desktop-sized insets on phones so two 140px tiles actually fit
     (the default 16px body + 28px card padding left too little width). */
  body.room-gallery {
    padding: 10px;
  }

  #room-view.layout-compact.gallery {
    padding: 14px;
  }

  #room-view.layout-compact.gallery .video-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* --- Expanded room layout (stage + sidebar) ---------------------------- */
/* The middle 24px column is the drag handle; it replaces the old column gap so
   the visual separation stays ~24px. `--sidebar-width` is driven by JS (drag /
   keyboard) and persisted in localStorage; the fallback keeps the default 320px
   look before any interaction. */
#room-view.layout-expanded {
  min-height: calc(100dvh - 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px var(--sidebar-width, 320px);
  column-gap: 0;
  row-gap: 18px;
  padding: 20px;
  align-items: start;
}

#room-view.layout-expanded .screen-wrap {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #08090c;
  min-height: calc(100dvh - 72px);
  align-self: stretch;
}

#room-view.layout-expanded.local-share-stage .screen-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#room-view.layout-expanded.local-share-stage .screen-video {
  width: min(100%, 280px);
  height: auto;
  max-height: none;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--border);
  border-radius: 12px;
}

#room-view.layout-expanded .sidebar-rail {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  container-type: inline-size;
  container-name: sidebar;
}

#room-view.layout-expanded .sidebar-rail .room-header {
  margin: 0;
}

#room-view.layout-expanded .sidebar-rail .enable-audio,
#room-view.layout-expanded .sidebar-rail .camera-limit-banner,
#room-view.layout-expanded .sidebar-rail .bandwidth {
  margin: 0;
}

#room-view.layout-expanded .sidebar-rail .video-grid {
  margin: 0;
  max-height: none;
  overflow: visible;
}

/* When the sidebar is dragged very narrow, even two columns make the camera
   tiles uselessly small. Below 200px (the panel can shrink to 160px), stack the
   tiles one per row. The `sidebar` container is declared on `.sidebar-rail`
   above. Overrides both the default 2-col grid and the participants-many
   3-col grid. */
@container sidebar (max-width: 200px) {
  #room-view.layout-expanded .sidebar-rail .video-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

#room-view.layout-expanded .screen-video {
  width: 100%;
  height: 100%;
  max-height: calc(100dvh - 72px);
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

#room-view.layout-expanded .screen-label {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.82);
  color: var(--fg);
  backdrop-filter: blur(8px);
}

#room-view.layout-expanded.local-share-stage .screen-label {
  position: static;
  margin-top: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  backdrop-filter: none;
}

/* --- Sidebar resize handle -------------------------------------------- */
/* Only meaningful in the two-column stage layout; hidden everywhere else
   (compact, fullscreen, and the stacked mobile layout below). */
.sidebar-resizer {
  display: none;
}

#room-view.layout-expanded .sidebar-resizer {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: col-resize;
  touch-action: none;
  user-select: none;
}

.sidebar-resizer-grip {
  width: 4px;
  height: 48px;
  max-height: 60%;
  border-radius: 999px;
  background: var(--border);
  transition: background 0.15s ease, height 0.15s ease, box-shadow 0.15s ease;
}

.sidebar-resizer:hover .sidebar-resizer-grip,
.sidebar-resizer.dragging .sidebar-resizer-grip {
  background: var(--accent);
  height: 72px;
}

.sidebar-resizer:focus {
  outline: none;
}

.sidebar-resizer:focus-visible .sidebar-resizer-grip {
  background: var(--accent);
  height: 72px;
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.35);
}

#room-view.fs-active .sidebar-resizer {
  display: none;
}

.controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#room-view .controls button {
  width: 100%;
}

/* Keep control labels readable as the expandable sidebar gets narrower. */
#room-view.layout-expanded .sidebar-rail .controls button {
  min-height: clamp(38px, 14cqi, 48px);
  padding: clamp(9px, 3.6cqi, 14px) clamp(9px, 4.5cqi, 16px);
  font-size: clamp(11px, 5cqi, 16px);
  line-height: 1.25;
  text-wrap: balance;
}

.mute {
  flex: 1;
  background: #222734;
  color: var(--fg);
}

.mute[aria-pressed="true"] {
  background: var(--danger);
  color: white;
}

.share {
  flex: 1;
  background: #222734;
  color: var(--fg);
}

.share[aria-pressed="true"] {
  background: var(--accent);
  color: white;
}

.camera {
  flex: 1;
  background: #222734;
  color: var(--fg);
}

.camera[aria-pressed="true"] {
  background: var(--accent);
  color: white;
}

.camera-quality {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.camera-quality-label {
  padding: 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.camera-quality-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #161920;
}

.camera-quality-option {
  position: relative;
  display: block;
  margin: 0;
  min-width: 0;
  cursor: pointer;
}

.camera-quality-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.camera-quality-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}

#room-view.layout-expanded .sidebar-rail .camera-quality-option span {
  min-height: clamp(30px, 11cqi, 36px);
  padding: clamp(4px, 2cqi, 6px) clamp(3px, 1.8cqi, 4px);
  font-size: clamp(10px, 4cqi, 13px);
  line-height: 1.2;
}

#room-view.layout-expanded .sidebar-rail .controls .device-select {
  padding: clamp(8px, 3cqi, 10px) 30px clamp(8px, 3cqi, 10px)
    clamp(9px, 3.5cqi, 12px);
  font-size: clamp(12px, 4cqi, 14px);
  background-position: right 8px center;
}

@container sidebar (max-width: 230px) {
  #room-view.layout-expanded .sidebar-rail .camera-quality-options {
    grid-template-columns: 1fr;
  }
}

.camera-quality-option input:focus + span {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.camera-quality-option input:focus:not(:focus-visible) + span {
  outline: none;
}

.camera-quality-option:hover input:not(:checked) + span {
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
}

.camera-quality-option input:checked + span {
  background: var(--accent);
  color: white;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}

.camera-quality-option:last-child input:checked + span {
  background: linear-gradient(135deg, #ff8a4c, #ff5b6e);
}

/* --- Device pickers (mic / camera select) ----------------------------- */
.device-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 2px;
}

.device-picker-label {
  padding: 0 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

#room-view .controls .device-select {
  width: 100%;
  padding: 10px 34px 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background-color: #161920;
  color: var(--fg);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

#room-view .controls .device-select:hover {
  border-color: #4a5568;
}

.device-select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91, 140, 255, 0.25);
}

.device-select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.device-select option {
  background: var(--card);
  color: var(--fg);
}

.video-off {
  flex: 1;
  background: #222734;
  color: var(--fg);
}

.video-off[aria-pressed="true"] {
  background: #3a3040;
  color: #d8c4e8;
}

.share:disabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: #1b1f29;
  color: #7f8795;
  cursor: not-allowed;
  filter: none;
  opacity: 1;
}

.share:disabled small {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.share:disabled:active {
  transform: none;
}

.leave {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

#audio-sink {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.info-dialog {
  width: min(calc(100% - 32px), 600px);
  max-height: min(760px, calc(100dvh - 32px));
  padding: 0;
  overflow: hidden;
  border: 1px solid #353b47;
  border-radius: 18px;
  background: var(--card);
  color: var(--fg);
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.65);
}

/* Lay the open dialog out as a column so the scrollable content fills the
   space left over by the header instead of guessing a height from the
   viewport. Scoped to [open] so the dialog stays hidden when closed. */
.info-dialog[open] {
  display: flex;
  flex-direction: column;
}

.info-dialog::backdrop {
  background: rgba(5, 7, 11, 0.76);
  backdrop-filter: blur(4px);
}

.dialog-header {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--border);
}

.dialog-header h2 {
  margin: 0;
  font-size: 22px;
}

.dialog-close {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: #252a35;
  color: var(--fg);
  font-size: 25px;
  font-weight: 400;
  line-height: 1;
}

.dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 24px 24px;
  overflow-y: auto;
}

.dialog-content section + section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
}

.dialog-content h3 {
  margin: 0 0 8px;
  font-size: 17px;
}

.dialog-content p {
  margin: 0;
  color: #c2c7d0;
}

.dialog-content ol {
  margin: 12px 0 16px;
  padding-left: 22px;
  color: #c2c7d0;
}

.dialog-content li + li {
  margin-top: 5px;
}

.dialog-content img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 12px;
}

/* --- Stage overlay toggles (picture-in-picture + fullscreen) ----------- */
.fullscreen-btn,
.pip-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(15, 17, 21, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
}

/* Sit the PiP toggle just left of the fullscreen toggle so the two never
   overlap when both are shown on the stage. */
.pip-btn {
  right: 60px;
}

.fullscreen-btn:hover,
.fullscreen-btn:focus-visible,
.pip-btn:hover,
.pip-btn:focus-visible {
  background: rgba(15, 17, 21, 0.9);
  border-color: var(--accent);
}

.pip-btn[aria-pressed="true"] {
  border-color: var(--accent);
  color: var(--accent);
}

.fullscreen-btn svg,
.pip-btn svg,
.fs-btn svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Fullscreen stage overlay ----------------------------------------- */
/* Placed after the layout-expanded rules so equal-specificity selectors win
   on source order. The pinned video fills the viewport, aspect ratio intact
   (contain → letterbox on black); everything else is hidden. */
body.fullscreen-stage {
  overflow: hidden;
}

#room-view.fs-active .screen-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  margin: 0;
  min-height: 0;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #000;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#room-view.fs-active .screen-video {
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  aspect-ratio: auto;
  object-fit: contain;
}

#room-view.fs-active .sidebar-rail {
  display: none;
}

/* Auto-hide: stage controls + label fade after inactivity, back on pointer
   move / tap (handled in JS by toggling .fs-idle on the wrap). */
#screen-wrap.fs-idle .fs-controls,
#screen-wrap.fs-idle .screen-label {
  opacity: 0;
  pointer-events: none;
}

/* --- Draggable control module ----------------------------------------- */
.fs-controls {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1002;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(20, 23, 30, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: opacity 0.25s ease;
  touch-action: none;
}

.fs-grip {
  display: grid;
  place-items: center;
  width: 26px;
  height: 44px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
}

.fs-grip:active {
  cursor: grabbing;
}

.fs-grip svg {
  width: 20px;
  height: 20px;
}

.fs-grip svg circle {
  fill: currentColor;
  stroke: none;
}

.fs-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #222734;
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.fs-btn:hover:not(:disabled) {
  filter: brightness(1.15);
}

.fs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fs-btn .slash {
  display: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.fs-mute[aria-pressed="true"] {
  background: var(--danger);
  color: #fff;
}

.fs-mute[aria-pressed="true"] .slash {
  display: block;
}

.fs-camera:not(.off) {
  background: var(--accent);
  color: #fff;
}

.fs-camera.off .slash {
  display: block;
}

.fs-leave {
  background: var(--danger);
  color: #fff;
}

@media (max-width: 520px) {
  .dialog-header {
    padding: 18px 18px 14px;
  }

  .dialog-content {
    padding: 18px;
  }
}

@media (max-width: 760px) {
  body.room-expanded {
    padding: 0;
  }

  body.room-expanded .app {
    min-height: 100dvh;
  }

  #room-view.layout-expanded {
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  /* Stacked single-column layout: no vertical seam to drag. */
  #room-view.layout-expanded .sidebar-resizer {
    display: none;
  }

  #room-view.layout-expanded .screen-wrap {
    grid-column: 1;
    grid-row: 1;
    min-height: 42dvh;
  }

  #room-view.layout-expanded .sidebar-rail {
    grid-column: 1;
    grid-row: 2;
    max-height: none;
    overflow: visible;
  }

  #room-view.layout-expanded .screen-video {
    max-height: none;
  }

  #room-view.layout-expanded .sidebar-rail .video-grid {
    max-height: min(200px, 38dvh);
    overflow-y: auto;
  }

  #room-view.layout-expanded .sidebar-rail .controls {
    margin-top: 0;
  }
}

/* Environment banner: a slim, non-interactive ribbon pinned to the top edge so
   testers can tell a non-prod deployment (e.g. staging) at a glance. Rendered
   server-side only when APP_ENV is set to a non-production value. */
.env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  pointer-events: none;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  text-transform: uppercase;
  color: #1a1205;
  background: repeating-linear-gradient(
    45deg,
    #f5b53d,
    #f5b53d 12px,
    #e0a52f 12px,
    #e0a52f 24px
  );
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}