/*
 * WA-CHA viewport overflow patch v2.0.3
 * Keeps the immersive page shell fixed while allowing oversized content regions
 * to scroll safely on iOS, Android, desktop, landscape, zoomed, and reduced-height viewports.
 */

:root {
  --wa-scroll-safe-top: max(.5rem, env(safe-area-inset-top));
  --wa-scroll-safe-right: max(.5rem, env(safe-area-inset-right));
  --wa-scroll-safe-bottom: max(.5rem, env(safe-area-inset-bottom));
  --wa-scroll-safe-left: max(.5rem, env(safe-area-inset-left));
  --wa-scroll-max-block: calc(100dvh - var(--wa-scroll-safe-top) - var(--wa-scroll-safe-bottom) - 1rem);
}

/* Do not disable all touch gestures at the document root. The canvas remains locked below. */
html,
body {
  overscroll-behavior: none;
  touch-action: manipulation;
}

.scene,
canvas,
.tracer-layer {
  touch-action: none;
}

/* Canonical bounded-scroll behavior. */
.popover,
.wallet-items,
.waec-panel,
[role="dialog"],
[data-wa-scroll-region],
.wa-scroll-region {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y pinch-zoom;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

/* Dialog content must remain reachable at every viewport height. */
.popover {
  top: max(50%, var(--wa-scroll-safe-top));
  max-block-size: var(--wa-scroll-max-block);
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: max(18px, var(--wa-scroll-safe-bottom));
}

.popover.show {
  pointer-events: auto;
}

.popover-head {
  position: sticky;
  top: -19px;
  z-index: 2;
  padding-top: 19px;
  background: linear-gradient(180deg, rgba(10,14,28,.96) 0%, rgba(10,14,28,.84) 68%, rgba(10,14,28,0) 100%);
}

.qa-fact,
.qa-answer,
.tracker-text,
.wallet-item,
.waec-panel,
.waec-panel * {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Wallet shell is fixed; only its contents scroll. */
.wallet-panel {
  display: flex;
  flex-direction: column;
  max-block-size: min(var(--wa-scroll-max-block), 430px);
  overflow: hidden;
}

.wallet-head {
  flex: 0 0 auto;
}

.wallet-items {
  flex: 1 1 auto;
  min-block-size: 0;
  max-block-size: none;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: max(10px, var(--wa-scroll-safe-bottom));
}

/* Long cards stay within the visible viewport instead of being clipped. */
.tracker-card {
  max-block-size: min(44dvh, 20rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* Long machine-readable content remains usable without widening the page. */
pre,
code,
table {
  max-inline-size: 100%;
}

pre,
[data-wa-scroll-x] {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

img,
svg,
video,
canvas {
  max-inline-size: 100%;
}

@media (orientation: landscape) and (max-height: 640px) {
  :root {
    --wa-scroll-max-block: calc(100dvh - var(--wa-scroll-safe-top) - var(--wa-scroll-safe-bottom) - .5rem);
  }

  .popover {
    width: min(94vw, 760px);
    padding: 12px 14px max(12px, var(--wa-scroll-safe-bottom));
  }

  .popover-head {
    top: -12px;
    padding-top: 12px;
  }

  .wallet-panel {
    inset-block: var(--wa-scroll-safe-top) var(--wa-scroll-safe-bottom);
    bottom: auto;
    max-block-size: none;
  }
}

@media (max-width: 420px) {
  .popover {
    width: calc(100vw - var(--wa-scroll-safe-left) - var(--wa-scroll-safe-right));
    max-width: calc(100vw - 1rem);
  }

  .wallet-panel {
    width: calc(100vw - var(--wa-scroll-safe-left) - var(--wa-scroll-safe-right));
    max-width: calc(100vw - 1rem);
  }
}

@supports not (height: 100dvh) {
  :root {
    --wa-scroll-max-block: calc(100vh - var(--wa-scroll-safe-top) - var(--wa-scroll-safe-bottom) - 1rem);
  }
}