/* Native-feel bottom sheet — extracted from TSA Flight Notify v6.7.0+.
 *
 * Customize via CSS variables on :root or a wrapping scope. Defaults are
 * dark-theme glassy navy; override before importing if you need light.
 *
 * Required HTML structure (flat siblings, NOT nested):
 *
 *   <div class="menu-hider" id="sheet-backdrop" aria-hidden="true"></div>
 *   <div class="menu menu-box-bottom menu-box-detached"
 *        id="my-sheet" role="dialog" aria-hidden="true">
 *     <div class="sheet-handle-bar"></div>
 *     <div class="sheet-header"><!-- title / close btn --></div>
 *     <!-- your content -->
 *   </div>
 */

:root {
  /* Colours */
  --bs-bg: #0b2c42;
  --bs-text: #fff;
  --bs-backdrop-bg: rgba(0, 0, 0, 0.35);
  --bs-border: 1px solid rgba(255, 255, 255, 0.08);
  --bs-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --bs-handle-color: rgba(255, 255, 255, 0.3);

  /* Geometry */
  --bs-border-radius: 18px 18px 0 0;
  --bs-max-height: 85vh;

  /* Stack — keep above all your UI layers */
  --bs-z-backdrop: 5998;
  --bs-z-panel: 6001;
}

/* ---------------- Backdrop ---------------- */

.menu-hider {
  position: fixed;
  /* Extends past viewport so backdrop colour covers iOS safe-area top/bottom
     when the address bar collapses/expands. */
  top: -100px;
  bottom: -100px;
  left: 0;
  right: 0;
  background-color: var(--bs-backdrop-bg);
  z-index: var(--bs-z-backdrop);
  pointer-events: none;
  opacity: 0;
  cursor: pointer;
  transition: all 350ms ease;
}

.menu-hider.menu-active {
  opacity: 1;
  pointer-events: all;
  transition: all 350ms ease;
  /* CRITICAL: absorbs touch-move so iOS PWA body doesn't scroll through.
     Click still fires so tap-to-dismiss works. */
  touch-action: none;
}

/* ---------------- Panel ---------------- */

.menu {
  /* `display: none` baseline + JS toggles to `block` on open. Required so
     the panel doesn't take layout space when closed. */
  display: none;
  position: fixed;
  background-color: var(--bs-bg);
  color: var(--bs-text);
  z-index: var(--bs-z-panel);
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  max-height: var(--bs-max-height);
  border: var(--bs-border);
  box-shadow: var(--bs-shadow);
  /* Hint to compositor — transforms during drag stay smooth. */
  will-change: transform;
  transition: all 350ms ease;
  /* CRITICAL: stops scroll chaining from panel to body. Without this,
     scrolling past panel ends bubbles up to body (iOS passthrough).
     Rubber-band bounce now happens *inside* the panel. */
  overscroll-behavior: contain;
}

.menu.menu-active {
  display: block;
  opacity: 1 !important;
}

/* Bottom-attached variant */
.menu-box-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  transform: translate3d(0, 110%, 0);
  /* Extend panel bg into the home-indicator area so no body-colour strip
     shows below the panel. */
  padding-bottom: env(safe-area-inset-bottom);
}

/* Detached corners (only top rounded for edge-to-edge bottom) */
.menu-box-detached {
  border-radius: var(--bs-border-radius);
}

.menu-box-bottom.menu-active {
  transform: translate3d(0, 0, 0);
}

/* Asymmetric close easing — snappy iOS-native acceleration on exit.
   Open uses the default `350ms ease` (decelerating); close uses an
   `ease-in` cubic-bezier so the panel "drops away" instead of crawling. */
.menu-box-bottom.closing {
  transition: transform 350ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

/* ---------------- Standard children ---------------- */

.sheet-handle-bar {
  width: 40px;
  height: 4px;
  background: var(--bs-handle-color);
  border-radius: 2px;
  margin: 12px auto 6px;
  flex-shrink: 0;
  /* CRITICAL: drag zone must not also do native scroll. */
  touch-action: none;
}

.sheet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 14px;
  flex-shrink: 0;
  /* Second drag zone — header doubles as drag handle for big-thumb users. */
  touch-action: none;
}

/* ---------------- Optional: scrollable inner region ---------------- */
/* Apply this class to a child element if it needs to scroll internally
   without triggering the rubber-band drag behaviour. */
.sheet-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}