/*
 * Shared bottom navigation geometry for the VPN and media dashboards.
 * Keep this file byte-identical in both releases.
 */
@media (max-width: 599px) {
  :root {
    --bottom-nav-height: 62px;
    --bottom-nav-offset: 2px;
    --bottom-nav-safe-gap: max(0px, calc(env(safe-area-inset-bottom) - 8px));
  }

  .bottom-nav {
    left: max(10px, env(safe-area-inset-left));
    right: max(10px, env(safe-area-inset-right));
    bottom: calc(var(--bottom-nav-offset) + var(--bottom-nav-safe-gap));
    width: auto;
    max-width: 430px;
    height: var(--bottom-nav-height);
    margin: 0 auto;
    padding: 6px;
    gap: 5px;
    border-radius: 18px;
  }

  .bottom-nav button {
    width: 100%;
    height: 100%;
    min-height: 44px;
    padding: 4px 2px;
    gap: 2px;
    border-radius: 16px;
    font-size: 10px;
    line-height: 1;
  }
}