/* Bottom navigation on phones and tablets: full width, square, taller, icon-only.
   Loaded last on purpose: earlier stylesheets layer several overlapping .mobile-nav rules. */
@media (max-width: 1020px) {
  :root { --mobile-nav-h: 68px; }

  body .mobile-nav {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    padding: 0 0 env(safe-area-inset-bottom) !important;
    gap: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  body .mobile-nav button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: grid !important;
    place-items: center !important;
  }

  body .mobile-nav button::after { content: none !important; display: none !important; }

  body .mobile-nav button svg,
  body .mobile-nav button .ai-icon-frame svg,
  body .mobile-nav #mobileSearch svg {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
  }

  body .player-bar { bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 8px) !important; }

  body:not([data-view="player"]) .content {
    padding-bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 62px + 24px) !important;
  }
}