/**
 * Bottom nav — Hypercat compact (terminal; ≤900px).
 * Load last among layout CSS.
 *
 * TASK-792 — Single correct pattern (no more pad-only / translate-only ping-pong):
 *
 *   shift = max(0, safe − 4px)
 *   nav.padding-bottom = max(4px, safe)   // paints home-indicator lane
 *   item.margin-top = −shift              // collapses the layout void ABOVE icons
 *   item.transform = translateY(shift)    // sits labels ~4px above physical bottom
 *
 * Net chrome height ≈ 2 + row + 4  (NOT row + full safe). Matches blue Hypercat.
 * Do not reintroduce per-item padding-bottom:safe or transform:none without margin collapse.
 */
@media (max-width: 900px) {
  body.use-new-ui,
  body.use-new-ui.is-pwa-standalone,
  body.use-new-ui.is-mobile-safari {
    --hydra-bottom-nav-row-h: 36px;
    --app-bottom-nav-row-h: 36px;
    --hydra-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
    --app-safe-bottom: var(--hydra-nav-safe-bottom);
    --hydra-nav-label-bottom-gap: 0px;
    --hydra-nav-shift: max(
      0px,
      calc(
        var(--hydra-nav-safe-bottom, env(safe-area-inset-bottom, 0px)) -
          var(--hydra-nav-label-bottom-gap, 0px)
      )
    );
    /* Compact total — safe cancelled by −shift + translate */
    --app-bottom-nav-total-h: calc(
      2px + var(--hydra-bottom-nav-row-h) + var(--hydra-nav-label-bottom-gap, 0px)
    );
    --app-scroll-bottom-pad: calc(var(--app-bottom-nav-total-h) + 8px);
    --app-scroll-bottom-pad-fab: calc(var(--app-bottom-nav-total-h) + 12px + 56px);
    --mobile-scroll-bottom-pad: var(--app-scroll-bottom-pad);
    --mobile-scroll-bottom-clearance: var(--app-scroll-bottom-pad);
    --mobile-scroll-bottom-clearance-fab: var(--app-scroll-bottom-pad-fab);
    --hydra-mo-scroll-bottom-pad: var(--app-scroll-bottom-pad);
    --hydra-mo-scroll-bottom-pad-fab: var(--app-scroll-bottom-pad-fab);
    --mobile-bottom-nav-h: var(--app-bottom-nav-total-h);
    --bottom-nav-height: var(--app-bottom-nav-total-h);
    --hydra-bottom-nav-total-h: var(--app-bottom-nav-total-h);
    --hydra-bottom-nav-h: var(--app-bottom-nav-total-h);
  }

  body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui.is-mobile-safari #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui nav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui .mobile-owner-bottom-nav.mobile-bottom-nav,
  body.use-new-ui .mobile-owner-bottom-nav,
  body.use-new-ui .mobile-bottom-nav {
    display: flex !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
    gap: 0 !important;
    padding-top: 0 !important;
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
    padding-bottom: max(
      var(--hydra-nav-label-bottom-gap, 0px),
      var(--hydra-nav-safe-bottom, env(safe-area-inset-bottom, 0px))
    ) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    box-sizing: border-box !important;
    background: #fff !important;
    background-color: #fff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.05) !important;
  }

  body.dark.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
  body.dark.use-new-ui .mobile-owner-bottom-nav {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-top-color: rgba(148, 163, 184, 0.1) !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui.is-mobile-safari #mobileOwnerBottomNav .mobile-owner-nav-item,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-item,
  body.use-new-ui button.mobile-owner-nav-item,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active,
  body.use-new-ui button.mobile-owner-nav-item.active,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item:active,
  body.use-new-ui button.mobile-owner-nav-item:active {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    /* Collapse layout void that translate would leave above icons */
    margin-top: calc(-1 * var(--hydra-nav-shift, 0px)) !important;
    gap: 1px !important;
    padding: 1px 2px 0 !important;
    position: relative !important;
    z-index: 1 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    transform: translate3d(0, var(--hydra-nav-shift, 0px), 0) !important;
    -webkit-transform: translate3d(0, var(--hydra-nav-shift, 0px), 0) !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-label,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-owner-nav-label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 9px !important;
    font-weight: 500 !important;
    white-space: nowrap;
    overflow: hidden !important;
    text-overflow: ellipsis;
    max-width: 100% !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active .mobile-owner-nav-label {
    font-weight: 600 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-svg,
  body.use-new-ui .mobile-owner-bottom-nav .mobile-nav-svg,
  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-ico,
  body.use-new-ui #mobileOwnerBottomNav .mobile-nav-icon,
  body.use-new-ui .mobile-owner-nav-item .mobile-owner-nav-ico-wrap {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 0 !important;
  }

  body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active::before,
  body.use-new-ui button.mobile-owner-nav-item.active::before {
    top: 0 !important;
  }

  body.use-new-ui #mobileOwnerFab:not([hidden]) {
    bottom: calc(var(--hydra-bottom-nav-total-h, 42px) + 12px) !important;
  }

  body.use-new-ui:not(.tools-mode) {
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.use-new-ui:not(.tools-mode) #app,
  body.use-new-ui:not(.tools-mode) .app.app-layout {
    height: var(--app-height, 100dvh) !important;
    max-height: var(--app-height, 100dvh) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.use-new-ui:not(.tools-mode) .main-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.use-new-ui:not(.tools-mode) #contentScroll.content-scroll,
  body.use-new-ui:not(.tools-mode) .content-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {
    html.is-pwa body.use-new-ui,
    html.is-mobile-web body.use-new-ui,
    body.use-new-ui.is-pwa-standalone,
    body.use-new-ui.is-mobile-safari {
      --hydra-nav-safe-bottom: constant(safe-area-inset-bottom);
      --hydra-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
      --hydra-nav-shift: max(
        0px,
        calc(var(--hydra-nav-safe-bottom, 0px) - var(--hydra-nav-label-bottom-gap, 0px))
      );
    }

    html.is-pwa body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
    body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav,
    body.use-new-ui #mobileOwnerBottomNav.mobile-owner-bottom-nav.mobile-bottom-nav {
      padding-bottom: max(4px, var(--hydra-nav-safe-bottom, 0px)) !important;
      padding-top: 0 !important;
    }

    html.is-pwa body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item,
    body.use-new-ui.is-pwa-standalone #mobileOwnerBottomNav .mobile-owner-nav-item,
    body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item,
    body.use-new-ui #mobileOwnerBottomNav .mobile-owner-nav-item.active,
    body.use-new-ui button.mobile-owner-nav-item {
      margin-top: calc(-1 * var(--hydra-nav-shift, 0px)) !important;
      padding-bottom: 0 !important;
      transform: translate3d(0, var(--hydra-nav-shift, 0px), 0) !important;
      -webkit-transform: translate3d(0, var(--hydra-nav-shift, 0px), 0) !important;
    }
  }
}