/* The app owns its scrolling. Never hand a screen's boundary gesture to the
 * document behind the phone, including when previewing it on desktop. */
.phone,
.phone :is(.app-shell, .screen-stack, .login-screen) {
  overscroll-behavior: none;
}

.phone .app-shell {
  min-height: 0;
  overflow: hidden;
}

/* Keep every tracking section at its content height. Rounded cards with
 * overflow:hidden otherwise shrink inside the flex screen and clip the
 * timeline/address before the screen can develop a scrollable overflow. */
.phone .card-tracking-step > * {
  flex-shrink: 0;
}

.phone :is(.app-screen, .login-step, .bottom-sheet),
.scenario-control.mobile-visible,
.scenario-control .scenario-panel,
.mock-data-dialog,
.guided-tour-picker-menu,
.guided-tour-progress-list,
dialog.pwa-install-guide {
  /* Preserve native spring/momentum inside content, but stop scroll chaining
   * before it reaches the document behind the fixed app frame. */
  overscroll-behavior-y: contain;
}

/* These controls sit outside the content scroller. Taps still work, but a drag
 * on the header or tab bar must not pan the browser's root viewport. */
.phone :is(.app-header, .bottom-nav) {
  touch-action: none;
}

/* Reserve the system inset outside every screen's scroller, including screens
 * that hide the shared header. Aura Home moves this inset into its glass header
 * so its decorative backdrop can also paint behind the system status bar. */
.phone {
  --app-safe-top: 0px;
  --app-safe-bottom: 0px;
  --app-top-inset: var(--app-safe-top);
  --app-header-padding-top: 11px;
}

.phone.next-ui-theme { --app-header-padding-top: 12px; }
.phone.next-ui-theme.app-theme-refined { --app-header-padding-top: var(--biz-space-4); }

.phone.next-ui-theme .app-header {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.app-status-surface { display: none; }

/* Opt-in diagnostics live in the prototype controls, outside the customer UI. */
.viewport-diagnostics { padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.viewport-diagnostics summary { cursor: pointer; font-size: 12px; }
.viewport-diagnostics button { width: 100%; margin-top: 10px; }
.viewport-diagnostics p { margin-bottom: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.viewport-diagnostics textarea { width: 100%; min-height: 160px; margin-top: 10px; font: 12px/1.5 monospace; }

@media (max-width: 767px) {
  /* iOS samples the document canvas for its status-bar area. The phone alone
   * cannot color it; keep the entire viewport in sync with the active theme. */
  html,
  html body,
  html body.demo-mode,
  html body .prototype-stage,
  html body.demo-mode .prototype-stage {
    background: var(--app-viewport-canvas, #f6f7f6);
    transition: none;
  }

  html,
  body {
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  /* Fix the outer frame as well as containing scroll. A document with no
   * overflow can still rubber-band in iOS when dragged outside a scroller. */
  body {
    position: fixed;
    top: var(--app-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: 100vh;
    height: var(--app-viewport-height, 100dvh);
  }

  .prototype-stage {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  /* Give installed WebKit an actual full-height document. A percentage-height
   * root plus a fixed body can leave the native web surface short when the
   * translucent status bar offsets it. Keep only the inner app frame fixed;
   * its controls still follow the visible viewport, including the keyboard. */
  html.ios-standalone,
  html.ios-standalone body {
    height: 100vh;
  }

  html.ios-standalone body {
    position: relative;
    inset: auto;
  }

  html.ios-standalone .prototype-stage {
    position: fixed;
    top: var(--app-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    height: var(--app-viewport-height, 100dvh);
  }

  .phone {
    --app-safe-top: env(safe-area-inset-top, 0px);
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    height: 100%;
    min-height: 0;
    padding-top: var(--app-top-inset);
  }

  /* Some installed iOS versions report zero even while their native top fade
   * overlaps the page. Keep controls clear with a minimum, never an extra inset.
   * Aura still paints throughout this space; it is not a separate solid band. */
  html.ios-standalone .phone {
    --app-top-inset: max(var(--app-safe-top), 24px);
  }

  /* Screens without an edge-to-edge backdrop use their own canvas here.
   * Aura Home hides this surface and paints its continuous glass header. */
  .phone > .app-status-surface {
    display: block;
    position: fixed;
    top: var(--app-viewport-top, 0px);
    right: 0;
    left: 0;
    height: var(--app-top-inset);
    z-index: 80;
    background: var(--app-viewport-canvas, #f6f7f6);
    pointer-events: none;
    transition: none;
  }

  .phone.next-ui-theme:has(#app-shell.active #screen-business.active) {
    background: var(--business-hero-surface);
  }

  .phone[class] .app-header {
    padding-top: var(--app-header-padding-top);
  }

  .phone > .sheet-backdrop {
    top: var(--app-top-inset);
  }

  .phone .toast {
    top: calc(var(--app-top-inset) + 12px);
  }

  .phone :is(.app-shell, .login-screen) {
    height: 100%;
    min-height: 0;
  }

  /* WebKit can retain the home-indicator inset while the keyboard covers it.
   * The visible app frame already stops at the keyboard's upper edge. */
  html.app-keyboard-open .phone {
    --app-safe-bottom: 0px;
  }

  /* The app frame follows the keyboard, but primary navigation must not ride
   * its upper edge. Restore the theme's own navigation when it is dismissed. */
  html.app-keyboard-open .phone .bottom-nav {
    display: none;
  }

  html.app-keyboard-open .phone #app-shell .app-screen:not(.focused-screen) {
    padding-bottom: 16px;
  }

  html .phone[class] .app-screen.focused-screen {
    padding-bottom: max(16px, var(--app-safe-bottom));
  }

  /* Keep bottom clearance inside each list's scroller. Padding on its fixed
   * ancestors becomes an unreachable blank strip, even without a keyboard. */
  html .phone[class] .app-screen.transfer-screen.destination-list-mode,
  html .phone .transfer-screen.destination-list-mode > .transfer-contacts-view {
    padding-bottom: 0;
  }

  html .phone .transfer-screen.destination-list-mode :is(#recipient-list, #all-contacts-list) {
    padding-bottom: max(16px, var(--app-safe-bottom));
  }
}