/* Checkpoint C: call-only containment and reachable controls. */
#callModal #remoteCallVideo,
#groupCallModal .group-call-media > video {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center !important;
}

#callModal .call-panel {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#callModal .call-panel::-webkit-scrollbar {
  display: none;
}

#callModal [data-call-audio-output],
#groupCallModal [data-call-audio-output],
#callModal [data-call-toggle-speaker],
#groupCallModal [data-call-toggle-speaker] {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#callModal [data-call-audio-output] option,
#groupCallModal [data-call-audio-output] option {
  color: var(--text);
  background: #050608;
}

@media (max-height: 650px) {
  #callModal .call-video-grid {
    min-height: min(240px, 45dvh) !important;
    height: min(340px, 48dvh) !important;
  }
  #groupCallModal .group-call-modal {
    overflow-y: auto !important;
  }
  #groupCallContent {
    overflow: visible !important;
    grid-template-rows: auto minmax(100px, 1fr) auto auto !important;
  }
}

@media (min-width: 340px) and (max-width: 620px) {
  #groupCallContent .group-call-stage.is-multi-participant {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start;
  }
  #groupCallContent .is-multi-participant .group-call-tile {
    min-height: 140px !important;
  }
}

/* Local group preview uses live camera frames, like the existing 1:1 preview. */
#groupCallModal video[data-group-local-preview="true"] {
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  clip-path: inset(50%) !important;
  pointer-events: none !important;
}
#groupCallModal [data-group-local-canvas] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #050608;
}
#groupCallModal [data-group-local-canvas][hidden],
#groupCallModal .group-call-tile:not(.has-video) [data-group-local-canvas] {
  display: none;
}
