/* v0.10.1 — compact floating mobile navigation with scroll-aware visibility. */
.mobile-bottom-nav {
  --mobile-nav-motion: 220ms cubic-bezier(.2, 0, 0, 1);
}

@media (max-width: 719px) {
  :root {
    --mobile-bottom-nav-height: 68px;
  }

  body {
    padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav {
    right: auto;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 50%;
    width: 148px;
    height: 58px;
    padding: 6px;
    border: 0;
    border-radius: 25px;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    background: var(--surface-container-high);
    box-shadow:
      0 2px 5px rgb(31 29 26 / 12%),
      0 10px 28px rgb(31 29 26 / 16%);
    transform: translateX(-50%);
    transition:
      transform var(--mobile-nav-motion),
      opacity 160ms cubic-bezier(.2, 0, 0, 1);
    will-change: transform, opacity;
  }

  .mobile-bottom-nav.is-scroll-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, calc(100% + 24px));
  }

  .mobile-bottom-tab {
    width: 65px;
    height: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 19px;
    justify-content: center;
    background: var(--surface-container-highest);
    color: var(--on-surface-variant);
    transition:
      background-color 170ms cubic-bezier(.2, 0, 0, 1),
      color 170ms cubic-bezier(.2, 0, 0, 1),
      transform 120ms cubic-bezier(.2, 0, 0, 1);
  }

  .mobile-bottom-tab:active {
    transform: scale(.94);
  }

  .mobile-bottom-tab.active {
    background: var(--primary-container);
    color: var(--on-primary-container);
  }

  .mobile-tab-indicator,
  .mobile-bottom-tab.active .mobile-tab-indicator {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: transparent;
    color: inherit;
  }

  .mobile-tab-indicator .material-symbols-rounded {
    font-size: 25px;
  }

  .mobile-tab-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .profile-dialog.mobile-tab-page[open] {
    inset: 0 !important;
  }

  .profile-dialog.mobile-tab-page .insights-scroll {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav,
  .mobile-bottom-tab {
    transition: none;
  }
}