/* Shared dialog geometry: navigation stays behind the dialog; only its body scrolls. */
html.modal-open, html.modal-open body { overflow: hidden; overscroll-behavior: none; }
.modal-bg.viewport-modal {
  inset: auto !important;
  top: var(--modal-top, 0px) !important;
  left: var(--modal-left, 0px) !important;
  width: var(--modal-width, 100vw);
  height: var(--modal-height, 100dvh);
  box-sizing: border-box;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)) !important;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden !important;
  z-index: 100 !important;
}
.modal-bg.viewport-modal > .modal {
  box-sizing: border-box; display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  width: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important; margin: 0;
}
.modal-bg.viewport-modal > .modal > .row.between { flex-shrink: 0; }
.modal-bg.viewport-modal > .modal > [data-body] {
  flex: 1 1 auto; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  scroll-padding-block: 16px;
}
.modal-bg.viewport-modal > .modal > [data-actions] {
  flex: 0 0 auto; margin-top: 0; padding-top: 12px;
  border-top: 1px solid var(--border, #ccd3da);
  max-height: 40%; overflow-y: auto; overscroll-behavior: contain;
}
.modal-bg.viewport-modal > .modal > [data-actions]:empty { display: none !important; }
.modal-bg.viewport-modal > .modal > [data-actions] > button { min-height: 44px; }
/* Wallet supplies the same actions but its original full-screen design hid them. */
.modal-bg.viewport-modal:has(.wallet-register-flow) > .modal > [data-actions] {
  display: flex !important; padding: 12px; background: var(--wr-bg, #eef6f5);
}
/* Image previews and feedback opened from a dialog must remain above it. */
.image-preview-bg { z-index: 110; }
.toast { z-index: 120; }
@media (max-width: 640px) {
  .modal-bg.viewport-modal > .modal > [data-actions] > button { flex: 1 1 110px; }
  .modal-bg.viewport-modal input, .modal-bg.viewport-modal select, .modal-bg.viewport-modal textarea { font-size: max(16px, 1em); }
}