/* The screen owns its row. Participant tiles remain in normal flow below it. */
#room-view #tiles.has-screen {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

#tiles.has-screen > .tile:not(.screen) {
  position: relative;
  flex: 0 0 180px;
  width: 180px;
  height: 112px;
  min-height: 0;
  max-width: 100%;
  order: 1;
}

#tiles.has-screen > .tile:not(.screen) .initial {
  width: 64px;
  height: 64px;
  min-width: 64px;
  padding: 0;
  font-size: 30px;
}

#tiles.has-screen > .tile.screen:not(.screen-focused) {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: min(60dvh, 720px);
  aspect-ratio: var(--screen-ratio, 16 / 9);
  order: 0;
}

.tile.screen.video video {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain !important;
  object-position: center;
}

/* Reserve space for controls exactly once, without subtracting it again from video. */
body.viewing-screen .screen-focused,
body.viewing-screen .workspace.chat-open .screen-focused {
  max-height: none !important;
  padding: 0 !important;
}

body.viewing-screen .screen-focused video {
  inset: 0 0 100px !important;
  width: 100% !important;
  height: calc(100% - 100px) !important;
}

#screen-diagnostics {
  margin: 8px auto;
  max-width: 720px;
  flex: 0 0 auto;
  color: #bfaeba;
  font-size: 12px;
}
#screen-diagnostics summary {
  cursor: pointer;
  text-align: center;
}
#screen-diagnostics p {
  margin: 6px 0;
}
body.viewing-screen #screen-diagnostics {
  display: none;
}

@media (max-width: 760px) {
  #tiles.has-screen > .tile:not(.screen) {
    flex-basis: 130px;
    width: 130px;
    height: 90px;
  }
  #tiles.has-screen > .tile:not(.screen) .initial {
    width: 50px;
    height: 50px;
    min-width: 50px;
    font-size: 24px;
  }
  #tiles.has-screen > .tile.screen:not(.screen-focused) {
    max-height: 55dvh;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  body.viewing-screen .screen-focused video {
    bottom: 76px !important;
    height: calc(100% - 76px) !important;
  }
}