/* Scoped focus overrides retain the staging app/viewport architecture. */
.control-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#room .control-actions {
  flex: 0 0 auto;
  max-width: 100%;
  width: auto;
  margin: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.room-meta {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.room-meta .room-name {
  min-height: 44px;
  max-width: calc(100% - 100px);
}
#room .bubble-video-stage:fullscreen .room-meta {
  display: none;
}
.control-actions button:not(#camera-button),
.bubble-focus-controls button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 10px;
  flex: 0 0 44px;
}
:is(.control-actions, .bubble-focus-controls, #room-actions) button svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.context-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  grid-column: 1 / -1;
}
.context-controls:not(:has(> :not([hidden]))) {
  display: none;
}
.control-bar:has(.context-controls > :not([hidden])) {
  flex-wrap: wrap;
}
.bubble-focus-controls {
  margin: 0;
}
body[data-workspace-view="videos"]
  #room
  .bubble-focus:not([hidden])
  + .stage-wrap {
  max-height: min(24dvh, 220px);
}
body[data-workspace-view="videos"]
  #room
  .bubble-focus:not([hidden])
  + .stage-wrap
  :is(.bubble, .screen-tile) {
  width: clamp(96px, 16dvh, 192px);
  flex-basis: clamp(96px, 16dvh, 192px);
}
#room #bubble-video-stage:fullscreen {
  display: flex;
  flex-direction: column;
  background: #17241f;
  overflow: hidden;
  padding: 0;
}
#room .bubble-video-stage:fullscreen .bubble-focus {
  flex: 1;
  min-height: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  color: var(--paper);
}
#room
  .bubble-video-stage:fullscreen
  .bubble-focus
  > :is(.bubble, .screen-tile) {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#room .bubble-video-stage:fullscreen .bubble-focus .bubble-media {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  max-height: none;
  aspect-ratio: auto;
  background: transparent;
}
#room .bubble-video-stage:fullscreen .stage-wrap {
  flex: 0 0 auto;
  max-height: min(24dvh, 220px);
  width: 100%;
  background: transparent;
  color: var(--paper);
}
#room .bubble-video-stage:fullscreen .stage-wrap .stage {
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
#room .bubble-video-stage:fullscreen .control-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 8px max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom));
  gap: 8px;
  justify-content: center;
  background: var(--paper);
}
#room .bubble-video-stage:fullscreen .control-actions {
  width: auto;
  margin: 0;
  justify-content: center;
}
#room
  .bubble-video-stage:fullscreen
  :is(.brand, .room-name, #room-actions, #copy-status) {
  display: none;
}
@media (max-height: 500px) and (min-width: 600px) {
  body[data-workspace-view="videos"]
    #room
    .bubble-video-stage:not(:fullscreen)
    .bubble-focus:not([hidden])
    + .stage-wrap {
    max-height: 100%;
  }
}
@media (max-height: 500px) {
  body[data-workspace-view="videos"]
    #room
    .bubble-video-stage:fullscreen
    .stage-wrap
    :is(.bubble, .screen-tile) {
    width: clamp(48px, 16dvh, 80px);
    flex-basis: clamp(48px, 16dvh, 80px);
  }
  #room .bubble-video-stage:fullscreen .stage-wrap {
    padding: 0;
  }
  #room .bubble-video-stage:fullscreen .control-bar button {
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 12px;
  }
}