/* One safe viewport, measured by the OS. Android SystemBars variables take
   precedence; iOS supplies env() values. Older Android WebViews are already
   inset natively by Capacitor and supply zero here, avoiding a double inset. */
html.native-app {
  --rr-safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
  --rr-safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
  --rr-safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --rr-safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
  background: #f3f6f7;
}
html.native-app body {
  margin: 0;
  min-height: 100dvh;
  padding: var(--rr-safe-top) var(--rr-safe-right) var(--rr-safe-bottom) var(--rr-safe-left);
  overflow: visible;
}
/* Document padding scrolls away. Opaque, fixed OS-inset covers keep the
   status bar and home indicator clear without changing document scrolling.
   These covers never intercept touches and use the same measured insets. */
html.native-app::before,
html.native-app::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  background: #f3f6f7;
  z-index: 2147483647;
  pointer-events: none;
}
html.native-app::before { top: 0; height: var(--rr-safe-top); }
html.native-app::after { bottom: 0; height: var(--rr-safe-bottom); }
/* Only the map is a fixed viewport. Long pages must scroll through the
   WKWebView document, rather than through a fixed, clipped body. */
html.native-app body.map-page {
  position: fixed;
  inset: var(--rr-safe-top) var(--rr-safe-right) var(--rr-safe-bottom) var(--rr-safe-left);
  margin: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.native-app #map { height: 100%; width: 100%; }
/* The body has already excluded the home indicator. Apply visual spacing once. */
.native-app .bottom { bottom: 28px; }
.native-app dialog {
  position: fixed;
  inset: calc(var(--rr-safe-top) + 16px) calc(var(--rr-safe-right) + 16px)
         calc(var(--rr-safe-bottom) + 16px) calc(var(--rr-safe-left) + 16px);
  margin: auto;
  height: fit-content;
  max-height: calc(100dvh - var(--rr-safe-top) - var(--rr-safe-bottom) - 32px) !important;
  max-width: min(var(--rr-dialog-max, 440px), calc(100vw - var(--rr-safe-left) - var(--rr-safe-right) - 32px)) !important;
  overflow-y: auto !important;
}
.native-app #reward-dialog { --rr-dialog-max:760px; }
.native-app #driver-dialog { --rr-dialog-max:600px; }
.native-app #toast {
  top: calc(var(--rr-safe-top) + 110px);
  z-index: 1200;
  position: fixed;
  left: calc((100vw + var(--rr-safe-left) - var(--rr-safe-right)) / 2);
  max-width: calc(100vw - var(--rr-safe-left) - var(--rr-safe-right) - 32px);
}
.native-app .settings-page #toast,
.native-app .community-page #toast {
  top: auto;
  bottom: calc(var(--rr-safe-bottom) + 24px);
}
@media(max-width:640px) {
  .native-app #toast { top: calc(var(--rr-safe-top) + 172px); }
}
@media(max-width:900px) {
  .native-app .top { gap:12px; }
  .native-app .search-button { min-width:48px; width:auto; flex:1; }
}
@media(max-width:370px) {
  .native-app .top { left:12px; right:12px; gap:6px; }
  .native-app .top .brand { font-size:16px; padding:8px; gap:6px; }
  .native-app .brand small { font-size:7px; letter-spacing:1px; }
  .native-app .lot-link { padding:10px; font-size:12px; }
  .native-app .search-button { min-width:44px; flex:0 0 44px; padding:11px; }
  .native-app .settings-link { width:44px; height:44px; }
}
@media(max-height:500px) and (orientation:landscape){.native-app .map-controls{bottom:100px;gap:8px}.native-app .map-controls button{height:44px}}