/* Keep every dialog inside the visible viewport. Long content scrolls inside the dialog. */
:is(
  .modal,
  .project-modal-backdrop,
  .ci-modal-backdrop,
  .cap-backdrop,
  .custody-modal-backdrop,
  .member-redeem-backdrop,
  .order-signature-backdrop,
  .cashier-recharge-confirm-backdrop,
  .sensitive-verify-backdrop,
  .unified-checkout-backdrop
){
  box-sizing:border-box;
  padding:clamp(12px,3vh,28px);
  overflow:hidden;
}

:is(
  .modal-card,
  .project-modal,
  .custody-modal,
  .member-redeem-dialog,
  .order-signature-dialog,
  .cashier-recharge-confirm,
  .sensitive-verify-modal
){
  box-sizing:border-box;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}

/* These larger dialogs already have dedicated scrolling body regions. */
:is(.ci-modal,.cap-modal,.unified-checkout){
  box-sizing:border-box;
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  max-height:calc(100dvh - 24px);
  min-height:0;
}

.ci-modal{display:flex;flex-direction:column}
.ci-modal-body{min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.cap-body,.unified-checkout-body{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable}

@media(max-height:640px){
  :is(
    .modal,
    .project-modal-backdrop,
    .ci-modal-backdrop,
    .cap-backdrop,
    .custody-modal-backdrop,
    .member-redeem-backdrop,
    .order-signature-backdrop,
    .cashier-recharge-confirm-backdrop,
    .sensitive-verify-backdrop,
    .unified-checkout-backdrop
  ){padding:8px}

  :is(
    .modal-card,
    .project-modal,
    .ci-modal,
    .cap-modal,
    .custody-modal,
    .member-redeem-dialog,
    .order-signature-dialog,
    .cashier-recharge-confirm,
    .sensitive-verify-modal,
    .unified-checkout
  ){
    max-height:calc(100vh - 16px);
    max-height:calc(100dvh - 16px);
  }
}