/* PWA-only layout hardening. Loaded only by the isolated preview Worker. */
@media (display-mode: standalone) {
  html { background: #050607; }

  /* black-translucent iOS status bars extend the app into the notch/status area. */
  body { padding-top: env(safe-area-inset-top); }

  /* Trip dock must never cover modal controls. */
  body.modal-open .bottom-dock {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Keep long forms scrollable inside the standalone viewport and above device safe areas. */
  .modal-backdrop {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }

  .modal {
    max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }

  .dashboard,
  .dock-clear,
  .member-shell {
    padding-bottom: calc(126px + env(safe-area-inset-bottom)) !important;
  }

  /* iOS standalone WebKit can become unresponsive when a fixed, transformed,
     backdrop-filtered control is mutated during scroll. Keep the same dock
     geometry but remove those compositor triggers in the installed app. */
  .bottom-dock,
  .bottom-dock.compact {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    padding-bottom: 7px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: none !important;
    will-change: auto !important;
    background: rgba(13,15,17,.98) !important;
  }

  .bottom-dock.compact {
    width: min(calc(100% - 24px),430px) !important;
    padding: 9px 10px 7px !important;
    border-radius: 28px !important;
  }

  .bottom-dock.compact .dock-item {
    min-height: 56px !important;
    gap: 3px !important;
    border-radius: 18px !important;
  }
  .bottom-dock.compact .dock-item > span { font-size: 21px !important; }
  .bottom-dock.compact .dock-item small {
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }
  .bottom-dock.compact .dock-primary {
    width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    transform: translateY(-17px) !important;
  }
  .bottom-dock.compact .dock-primary small { display: block !important; }

  .dock-item,
  .dock-item small,
  .dock-primary {
    transition: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
}