/**
 * PWA iOS Fixes — Escalas DLM
 * Resolves Safari/WebKit viewport, safe-area, and scroll quirks
 * for standalone PWA mode on iOS devices.
 */

/* ─── Dynamic Viewport Height ────────────────────────────────────────── */
/* 100vh in Safari includes the bottom bar; dvh/svh fix this.
   We provide fallback for older Safari versions. */
:root {
  --app-height: 100vh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

@supports (height: 100dvh) {
  :root {
    --app-height: 100dvh;
  }
}

html {
  height: var(--app-height);
}

body {
  min-height: var(--app-height);
  /* Prevent overscroll / pull-to-refresh in standalone PWA */
  overscroll-behavior-y: none;
  /* Smooth momentum scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Prevent text size adjustment on orientation change */
  -webkit-text-size-adjust: 100%;
}

/* ─── Safe Area Padding ──────────────────────────────────────────────── */
/* Ensures content doesn't hide behind notch or home indicator */
#root {
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
}

/* ─── Standalone PWA Mode Specific ───────────────────────────────────── */
@media all and (display-mode: standalone) {
  body {
    /* Prevent rubber-banding on iOS */
    position: fixed;
    width: 100%;
    height: var(--app-height);
    overflow: hidden;
  }

  #root {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ─── Touch Action Fixes ─────────────────────────────────────────────── */
/* Prevent double-tap zoom on interactive elements in standalone */
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
}

/* ─── iOS Input Zoom Prevention ──────────────────────────────────────── */
/* iOS zooms in on inputs with font-size < 16px */
@supports (-webkit-touch-callout: none) {
  input,
  select,
  textarea {
    font-size: max(16px, 1em);
  }
}

/* ─── Notch-aware status bar area ────────────────────────────────────── */
/* When using black-translucent status bar, ensure content isn't hidden */
@media all and (display-mode: standalone) {
  .pwa-status-bar-spacer {
    height: var(--safe-top);
    background-color: #0f172a;
  }
}

/* ─── Disable user-select on non-text elements for native feel ─────── */
@media all and (display-mode: standalone) {
  img,
  svg,
  button,
  [role="button"] {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
}