/**
 * Overlay / toast viewport placement fix
 * - Ask / tips / delete / generic modals: centered in the *view*
 * - Share + all other toasts: top of the *view* (never page bottom)
 *
 * Overlays live inside .gmail-shell; shell flex + overflow can pin them
 * to the end of the page. Force true viewport fixed positioning.
 */

/* ── Modals / popups — center of the viewport ───────────────── */
.ask-backdrop,
.tips-backdrop,
.delete-backdrop,
.modal-backdrop,
.shell .ask-backdrop,
.shell .tips-backdrop,
.shell .delete-backdrop,
.gmail-shell .ask-backdrop,
.gmail-shell .tips-backdrop,
.gmail-shell .delete-backdrop,
.gmail-shell .modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100vw !important;
  width: 100dvw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px
    max(16px, env(safe-area-inset-bottom, 0px)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Above topbar / sticky filter / shell stacking */
  z-index: 100000 !important;
  /* Do not inherit a transformed containing block visually */
  transform: none !important;
  filter: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 640px) {
  .ask-backdrop,
  .tips-backdrop,
  .delete-backdrop,
  .modal-backdrop {
    padding: 24px !important;
  }
}

/* Modal panels stay centered inside the flex backdrop */
.ask-modal,
.tips-popup,
.delete-popup,
.modal,
.modal.portal-modal {
  margin: auto !important;
  align-self: center !important;
  max-height: min(90vh, 720px) !important;
  max-height: min(90dvh, 720px) !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.ask-modal {
  max-width: 440px !important;
  max-height: min(90vh, 640px) !important;
  max-height: min(90dvh, 640px) !important;
}

/*
 * Prevent iOS Safari auto-zoom on focus (font-size must be ≥16px).
 * Without this, closing the Ask modal often leaves the main page zoomed.
 */
@media (max-width: 860px) {
  .ask-textarea,
  .ask-modal textarea,
  .ask-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .ask-modal select {
    font-size: 16px !important;
  }
}

/* ── Toasts / notifications — top of the viewport ───────────── */
.toast,
.admin-toast,
.shell .toast,
.shell .admin-toast,
.gmail-shell .toast,
.gmail-shell .admin-toast,
.portal-shell .toast,
.portal-shell .admin-toast {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 100001 !important;
  margin: 0 !important;
  pointer-events: none;
  max-width: min(90vw, 360px) !important;
}

/* Staff admin toast was bottom-anchored in base CSS */
.admin-toast {
  top: max(16px, env(safe-area-inset-top, 0px)) !important;
  bottom: auto !important;
}