/* touch.css — tablet/phone hygiene + safe-area insets (global).
 *
 * Loaded LAST among the base-level sheets (base.html, after bcc.css) so these
 * rules beat style.css / bcc.css without !important, while per-page
 * {% block head %} sheets (gps_map_expand.css, streaming.css, nav_mobile.css)
 * can still override them.
 *
 * env(safe-area-inset-*) resolves to 0 unless the viewport meta carries
 * `viewport-fit=cover` AND the device actually has a notch / home indicator /
 * rounded corners — so every rule here is a no-op on desktop and on an iPad in
 * a normal browser tab, and only bites in the home-screen (standalone) web app
 * and on iPhone landscape.
 */

/* ── rubber-band ─────────────────────────────────────────────────────────
   iOS overscroll is what bounces the fixed Navigation stage away from the
   screen edge and what re-expands a collapsed toolbar on phones. body{overflow:
   hidden} does NOT stop it; overscroll-behavior does. Deliberately NO
   `touch-action: none` here — that would kill the KLV readout's own
   overflow-y scrolling and Leaflet's pinch handling.

   Scoped to touch: on desktop `overscroll-behavior: none` on the viewport
   propagating element also suppresses the UA's overscroll affordance, so a
   macOS trackpad two-finger swipe-back (and the Windows precision-touchpad
   equivalent) would stop navigating back. Nothing on desktop needs this rule. */
@media (pointer: coarse) {
  html, body {
    overscroll-behavior: none;
  }
}

/* ── safe areas: app chrome ─────────────────────────────────────────────── */
.bcc-appbar {
  padding-top: env(safe-area-inset-top);
}
.bcc-appbar-row {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}
.bcc-main {
  padding-left: max(0px, env(safe-area-inset-left));
  padding-right: max(0px, env(safe-area-inset-right));
}

/* Floating chat widget + launcher sit bottom-right, i.e. exactly where the iOS
   home indicator lives in standalone.
   The `body` prefix is load-bearing: css/fleet_chat.css owns these selectors at
   the SAME specificity and is the FIRST sheet in fleet_view.html's
   {% block head %} — i.e. it loads AFTER touch.css and would win the
   document-order tiebreak on the only page that has a chat widget. */
body .fleet-chat-root {
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
}
body .fc-launcher {
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
}
/* fleet_chat.css has its own ≤520px override of the launcher offsets; keep it
   (with the insets folded in) instead of silently outranking it. */
@media (max-width: 520px) {
  body .fc-launcher {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}

/* 100vh is the classic iOS bug: the large viewport is taller than what you can
   actually see, so the login card gets pushed under the toolbar. */
.bcc-login-body { min-height: 100dvh; }
.login-wrap     { min-height: 100dvh; }

/* ── tab bar: six tabs do not fit a portrait tablet ─────────────────────── */
.bcc-tabbar {
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bcc-tabbar::-webkit-scrollbar { display: none; }
.bcc-tab { flex: 0 0 auto; }

/* ── touch input hygiene ───────────────────────────────────────────────── */
@media (pointer: coarse) {
  .bcc-body { -webkit-tap-highlight-color: transparent; }
  .bcc-tab,
  .bcc-btn-ghost,
  .bcc-btn-primary,
  .bcc-btn-danger {
    min-height: 44px;               /* Apple HIG minimum tap target */
    touch-action: manipulation;     /* kills the 300 ms double-tap-zoom delay */
  }
}

/* The only hover-only affordance in the app (bcc.css: .alert-del{opacity:0})
   is invisible forever on a touch screen. */
@media (hover: none) {
  .alert-del { opacity: .65; }
}

/* ── "Add to Home Screen" coaching bar (js/pwa_install.js) ───────────────
   Touch devices only; it is the only way to lose the browser chrome on iPhone
   Safari and on any browser without the Fullscreen API. */
.pwa-install-bar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(16px);
  z-index: 9997;                       /* under the chat launcher (9998) */
  width: min(440px, calc(100vw - 24px));
  box-sizing: border-box;
  padding: 14px 16px 12px;
  border-radius: 16px;
  border: 1px solid var(--line, rgba(148, 163, 184, .35));
  background: var(--surface, #ffffff);
  color: var(--ink, #1f2937);
  box-shadow: 0 18px 44px rgba(2, 6, 23, .32);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.pwa-install-bar.open {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.pwa-install-bar .pwa-head { display: flex; align-items: center; gap: 11px; }
.pwa-install-bar .pwa-icon {
  width: 38px; height: 38px; border-radius: 9px; flex: 0 0 auto;
  border: 1px solid var(--line, rgba(148, 163, 184, .35));
}
.pwa-install-bar .pwa-title { font-weight: 700; font-size: .98rem; }
.pwa-install-bar .pwa-sub   { font-size: .8rem; opacity: .72; margin-top: 2px; }
.pwa-install-bar .pwa-steps {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
  font-size: .86rem; line-height: 1.35;
}
.pwa-install-bar .pwa-steps li { display: flex; align-items: flex-start; gap: 9px; }
.pwa-install-bar .pwa-n {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--svp, #4DAAD4); color: #fff;
  font: 700 11px/1 sans-serif;
}
.pwa-install-bar .pwa-gl { font-size: 1.05em; }
.pwa-install-bar .pwa-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 13px;
}
.pwa-install-bar .pwa-btn {
  min-height: 40px; padding: 8px 15px; border-radius: 10px;
  border: 1px solid var(--line, rgba(148, 163, 184, .45));
  background: transparent; color: inherit;
  font: 600 .86rem/1 sans-serif; cursor: pointer;
  touch-action: manipulation;
}
.pwa-install-bar .pwa-btn.pwa-primary {
  background: var(--svp, #4DAAD4); border-color: transparent; color: #fff;
}
/* Never cover the map while the operator is flying a mission — but ONLY the
   unsolicited offer. The `:not(.open)` matters: the ⤢ FULL SCREEN pill lives
   inside the expanded stage (so `gps-map-modal-open` is always set when it is
   visible) and hands off to this bar when the Fullscreen API is unavailable.
   Without the exemption that hand-off renders nothing at all and Layer 2 is
   unreachable on exactly the browsers that need it. */
body.gps-map-modal-open .pwa-install-bar:not(.open) { display: none; }

/* ── installed web app (home screen, no browser chrome) ────────────────── */
/* Stamped pre-paint by the inline script in base.html/login.html. In standalone
   there is no URL bar to soften a mis-sized layout, so pin the shell to the
   real viewport height and let the panels scroll inside it. */
html.bcc-standalone,
html.bcc-standalone body {
  min-height: 100dvh;
}
html.bcc-standalone .bcc-main {
  margin-top: 10px;
}