/* V275 — Android WebView modal viewport hardening.
   Android WebView may temporarily report an incorrect 100dvh after external-app
   handoff/resume. The native app has a stable UA marker, and V275 supplies a
   pixel viewport height from window.innerHeight so every shared web modal uses
   the actual WebView window instead of a stale dynamic viewport unit. */

html.vnt-android-webview .modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--vnt-android-viewport-height, 100vh) !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
}

html.vnt-android-webview .payment-checkout-backdrop {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: var(--vnt-android-viewport-height, 100vh) !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding-top: max(10px, env(safe-area-inset-top, 0px)) !important;
  padding-right: max(10px, env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
  padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
}

html.vnt-android-webview .modal-backdrop > .modal {
  box-sizing: border-box !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(var(--vnt-android-viewport-height, 100vh) - 20px) !important;
  min-height: 0 !important;
  margin: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch;
}

/* V280 — the individual-subject wallet checkout uses its own backdrop/modal
   classes, so give it the same stable Android viewport contract without
   changing its internal scrolling layout. */
html.vnt-android-webview .payment-checkout-backdrop > .payment-checkout-modal {
  box-sizing: border-box !important;
  max-width: calc(100vw - 20px) !important;
  max-height: calc(var(--vnt-android-viewport-height, 100vh) - 20px) !important;
  min-height: 0 !important;
  margin: auto !important;
}

/* Keep large tabular/list content inside the dialog instead of widening it. */
html.vnt-android-webview .modal-backdrop > .modal .table-wrap,
html.vnt-android-webview .modal-backdrop > .modal .exam-question-list,
html.vnt-android-webview .modal-backdrop > .modal .manage-lecture-list {
  max-width: 100% !important;
  overflow-x: auto;
}

/* Defensive support for any future native HTML dialog surface. */
html.vnt-android-webview dialog[open] {
  max-width: calc(100vw - 20px) !important;
  max-height: calc(var(--vnt-android-viewport-height, 100vh) - 20px) !important;
  overflow: auto !important;
}