#room .control-bar {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 4px;
}
.footer-primary {
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 6px;
  min-width: 0;
  overflow-x: auto;
}
.app-window-controls {
  flex: 0 0 auto;
  min-width: 0;
  max-height: 120px;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.app-window-controls:not(:has(> :not([hidden]))) {
  display: none;
}
.app-window-controls:has(.footer-composer:not([hidden])) {
  padding: 3px;
}
.footer-primary:has(.footer-composer:not([hidden])) {
  padding: 3px;
}
.footer-composer:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 8px;
  width: 100%;
  margin: 0;
}
.footer-composer textarea {
  min-width: 0;
  width: 100%;
  min-height: 44px;
  max-height: 96px;
  resize: vertical;
  padding: 10px;
  font: inherit;
  font-size: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.footer-composer button {
  min-height: 44px;
}
.composer-status {
  grid-column: 1 / -1;
  font-size: 12px;
}
.composer-status:empty {
  display: none;
}
.footer-app-controls:not([hidden]),
.automovie-controls > div:not([hidden]),
.automovie-controls form {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  margin: 0;
}
.footer-app-controls {
  flex: 0 0 auto;
  width: max-content;
  padding: 3px;
}
.footer-app-controls > label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.footer-app-controls textarea,
.footer-app-controls input:not([type="checkbox"]),
.footer-app-controls select {
  width: 180px;
  min-height: 44px;
  max-height: 72px;
  font: inherit;
  font-size: 16px;
}
.footer-app-controls button,
.footer-app-controls summary {
  white-space: nowrap;
  min-height: 44px;
}
.footer-app-controls .composer-status {
  max-width: 240px;
  white-space: normal;
}
.footer-primary:not(:has(> :not([hidden]))) {
  display: none;
}
#room .control-actions {
  flex: 0 0 auto;
  max-width: none;
  width: auto;
  margin: 0;
  flex-wrap: nowrap;
  justify-content: center;
}
.room-meta {
  position: relative;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
#copy-status:not(:empty) {
  width: min(150px, 22%);
  justify-content: center;
  bottom: 0;
  left: 0;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 12px;
  background: var(--paper);
  pointer-events: none;
}
.room-meta .room-name {
  flex: 0 1 150px;
  min-width: 48px;
  min-height: 44px;
  max-width: 22%;
  padding: 4px;
  text-align: left;
}
.footer-navigation {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.footer-navigation .workspace-navigation,
.footer-navigation .app-tabs {
  flex: 0 0 auto;
  width: auto;
  overflow: visible;
  margin: 0;
  padding: 0;
}
.footer-navigation .app-tabs button {
  flex-shrink: 0;
  min-height: 44px;
}
.room-meta #room-actions,
#room .room-meta .brand {
  flex: 0 0 44px;
  width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-primary .context-controls,
.footer-navigation .context-controls {
  flex-shrink: 0;
  flex-wrap: nowrap;
}
#room .bubble-video-stage:fullscreen .footer-primary {
  width: 100%;
}
#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;
  }
}