/*
 * Keep true modal surfaces attached to the phone's visual viewport while the
 * document itself remains pinch-zoomed. Applied only while the shared JS guard
 * adds one of these two classes.
 */
.sc-vv-popup-stage {
    position: fixed !important;
    inset: auto !important;
    top: var(--sc-vv-offset-top) !important;
    left: var(--sc-vv-offset-left) !important;
    width: var(--sc-vv-stage-width) !important;
    height: var(--sc-vv-stage-height) !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: scale(var(--sc-vv-inverse-scale)) !important;
    transform-origin: top left !important;
    overflow: hidden !important;
}

.sc-vv-popup-stage > :where(
    .sc-modal__dialog,
    .modal-box,
    .sc-modal-box,
    .modal-dialog,
    .requirement-modal__dialog,
    .integration-test-all-overlay__panel,
    [role="dialog"]
) {
    max-width: calc(var(--sc-vv-stage-width) - 16px) !important;
    max-height: calc(var(--sc-vv-stage-height) - 16px) !important;
}

.sc-vv-popup-stage :where(
    .sc-modal__body,
    .modal-body,
    .requirement-modal__body
) {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

dialog.sc-vv-native-dialog {
    position: fixed !important;
    inset: auto !important;
    top: var(--sc-vv-center-top) !important;
    left: var(--sc-vv-center-left) !important;
    max-width: calc(var(--sc-vv-stage-width) - 32px) !important;
    max-height: calc(var(--sc-vv-stage-height) - 32px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transform: scale(var(--sc-vv-inverse-scale)) translate(-50%, -50%) !important;
    transform-origin: top left !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}