/* Two Eyes PWA v24: mobile viewport and scroll reliability. */
@media (max-width: 440px) {
  html,
  body {
    width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .phone,
  main.phone,
  .mobile-container,
  .app-phone,
  .app-shell,
  #app,
  #phone {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  .phone > .screen.active,
  .phone > .view.active,
  main.phone > .screen.active,
  main.phone > .view.active {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
    padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .phone > .screen.active::-webkit-scrollbar,
  .phone > .view.active::-webkit-scrollbar {
    display: none !important;
  }

  /* Registration screens had high-specificity overflow:hidden rules. */
  main.phone > #screen-welcome.screen,
  main.phone > #screen-age.screen,
  main.phone > #screen-account.account-screen,
  main.phone > #screen-verify.verify-screen,
  main.phone > #screen-about-1.screen,
  main.phone > #screen-about-2.screen,
  main.phone > #screen-selfie-info.screen,
  main.phone > #screen-selfie-capture.screen,
  main.phone > #screen-ready.screen {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Tutorial: every step scrolls independently and keeps its CTA reachable. */
  .phone > #tut-1.tut-slide.active,
  .phone > #tut-2.tut-slide.active,
  .phone > #tut-3.tut-slide.active,
  .phone > #tut-4.tut-slide.active,
  .phone > #tut-5.tut-slide.active {
    display: flex !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tut-slide.active .tut-body {
    flex: 0 0 auto !important;
    min-height: auto !important;
  }

  .tut-slide.active .tut-foot {
    position: sticky !important;
    bottom: 0 !important;
    flex: 0 0 auto !important;
    margin-top: auto !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 4 !important;
  }

  /* Settings: the active subpage is the only scroll container. */
  body:has(#hub) .phone > .view.active {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(180px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
/* V25: use the real Android viewport and remove delayed taps. */
html,
body {
  width: 100% !important;
  height: var(--twoeyes-app-height, 100dvh) !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
}

button,
a,
[role="button"],
.nav-btn,
.cta {
  touch-action: manipulation !important;
}

@media (max-width: 820px) {
  html body .phone {
    width: 100vw !important;
    height: var(--twoeyes-app-height, 100dvh) !important;
    min-height: var(--twoeyes-app-height, 100dvh) !important;
    max-height: var(--twoeyes-app-height, 100dvh) !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}