/* ── Bottom navigation (mobile only) ── */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  /* Push content above the nav */
  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(60px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-white);
    border-top: 1.5px solid var(--color-border);
    z-index: 100;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06);
  }

  .bottom-nav__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px;
    font-family: var(--font-body);
    font-size: .6rem; font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    background: none; border: none; cursor: pointer;
    padding: 6px 4px;
    border-radius: 0;
    transition: color 150ms var(--ease);
    position: relative;
    -webkit-tap-highlight-color: transparent;
  }
  .bottom-nav__item svg {
    width: 22px; height: 22px;
    transition: transform 150ms var(--ease);
  }
  .bottom-nav__item:active svg { transform: scale(.9); }

  .bottom-nav__item.is-active { color: var(--color-primary); }

  /* Active indicator dot */
  .bottom-nav__item.is-active::after {
    content: '';
    position: absolute; top: 4px;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--color-primary);
  }

  /* Saved badge */
  .bottom-nav__badge {
    position: absolute;
    top: 3px; right: calc(50% - 16px);
    min-width: 16px; height: 16px;
    background: var(--color-primary); color: #fff;
    font-size: .55rem; font-weight: 700;
    padding: 0 4px; border-radius: var(--radius-full);
    display: none; align-items: center; justify-content: center;
    border: 2px solid var(--color-white);
    line-height: 1;
  }
  .bottom-nav__badge.is-visible {
    display: flex;
  }
}