/* Shared viewport limits, loaded after component styles. Content scrolls
   inside each dialog; the page and its fixed footer stay behind the overlay. */
.modal,
.modal-overlay,
.site-feedback-modal {
  top: var(--app-visual-viewport-offset-top, 0px);
  bottom: auto;
  height: var(--app-visual-viewport-height, 100dvh);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overscroll-behavior: contain;
}

.modal {
  z-index: 10000;
}

.modal:not(.user-admin-modal),
.modal-overlay:not(.modal-overlay-mobile-sheet):not(#test-health-modal) {
  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));
}

.modal-card,
.modal-content,
.site-feedback-card {
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

.modal-header {
  flex-shrink: 0;
  min-width: 0;
  gap: 12px;
}

.modal-body {
  min-width: 0;
  min-height: 0;
}

.modal-close-btn {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}

dialog[class] {
  box-sizing: border-box;
  max-height: calc(
    var(--app-visual-viewport-height, 100dvh) - 24px -
      env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
  );
  overflow-y: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .modal > *,
  .modal-overlay > *,
  .popover-card,
  .site-feedback-card {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  :is(.modal, .modal-overlay, #auth-modal, dialog, .site-feedback-modal)
    :is(input, select, textarea) {
    min-width: 0;
    max-width: 100%;
    font-size: max(16px, 1rem);
  }

  :is(.modal, .modal-overlay, dialog) button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .modal-header,
  .modal-body {
    padding-inline: 16px;
  }

  dialog[class] {
    max-width: calc(
      100% - 24px - env(safe-area-inset-left, 0px) -
        env(safe-area-inset-right, 0px)
    );
  }

  #site-footer #session-info {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}