/* Compact five-destination phone dock. Keep routing, visibility and safe areas. */
@media (max-width: 768px), (max-width: 1024px) and (max-height: 600px) and (pointer: coarse) {
  html.pwa-standalone {
    --pwa-dock-height: calc(60px + var(--pwa-safe-bottom, env(safe-area-inset-bottom, 0px)));
  }
  html body > nav.bottom-nav.mobile-dock.mobile-bottom-nav {
    box-sizing: border-box !important;
    height: 60px !important;
    min-height: 60px !important;
    padding: 5px 8px !important;
  }
  html.pwa-standalone body > nav.bottom-nav.mobile-dock.mobile-bottom-nav {
    height: var(--pwa-dock-height) !important;
    min-height: var(--pwa-dock-height) !important;
    padding: 5px max(6px, env(safe-area-inset-right)) calc(6px + var(--pwa-safe-bottom)) max(6px, env(safe-area-inset-left)) !important;
  }
  html body > nav.bottom-nav.mobile-dock.mobile-bottom-nav > a {
    box-sizing: border-box !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 2px !important;
    gap: 1px !important;
  }
  html body > nav.bottom-nav.mobile-dock.mobile-bottom-nav > a > b {
    font-size: 11px !important;
    line-height: 11.5px !important;
    margin: 0 !important;
  }
  html body > nav.bottom-nav.mobile-dock.mobile-bottom-nav .mobile-nav-icon,
  html body > nav.bottom-nav.mobile-dock.mobile-bottom-nav .mobile-nav-icon svg {
    width: 22px !important;
    height: 22px !important;
  }
  html body > nav.bottom-nav.mobile-dock.mobile-bottom-nav > a.create-fab > span {
    width: 30px !important;
    height: 22px !important;
    min-height: 22px !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }
  html:not(.pwa-standalone) body:not([data-page="loopz"]):not([data-page="create"]):not(.chat-shell-active):not(.audio-player-open) .content {
    padding-bottom: calc(76px + max(7px, env(safe-area-inset-bottom))) !important;
  }
  html:not(.pwa-standalone) body[data-page="loopz"] {
    --loopz-dock-space: calc(68px + max(7px, env(safe-area-inset-bottom)));
  }
}