.scroll-pill {
  display: none;
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(calc(100% + var(--sp-8)));
  z-index: 990;
  max-width: calc(100vw - var(--sp-8));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  pointer-events: none;
  opacity: 0;
  filter: opacity(1);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-pill.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.scroll-pill.is-dimmed {
  filter: opacity(0.45);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.3s ease;
}

.scroll-pill__inner {
  display: flex;
  align-items: center;
  gap: 0;
  background: rgba(29, 38, 53, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--clr-border-bright);
  border-radius: var(--radius-full);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  overflow: hidden;
  min-height: 44px;
}

.scroll-pill__segment {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  color: var(--clr-text);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1.2;
  min-width: 0;
  transition: background var(--ease-fast), color var(--ease-fast);
  -webkit-tap-highlight-color: transparent;
}

.scroll-pill__segment:active {
  background: rgba(255, 255, 255, 0.08);
}

.scroll-pill__segment--current {
  color: var(--clr-text-bright);
  font-weight: 500;
  flex-shrink: 0;
}

/* Prev/next shrink first so the current label + arrows always fit. */
.scroll-pill__segment--prev,
.scroll-pill__segment--next {
  color: var(--clr-text-muted);
  flex-shrink: 1;
  min-width: 0;
}

.scroll-pill__divider {
  width: 1px;
  align-self: stretch;
  background: var(--clr-border-bright);
  flex-shrink: 0;
}

.scroll-pill__arrow {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

.scroll-pill__segment--prev .scroll-pill__arrow {
  color: var(--clr-accent);
  opacity: 1;
}

.scroll-pill__segment--next .scroll-pill__arrow {
  color: var(--clr-accent);
  opacity: 1;
}

.scroll-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-accent);
  flex-shrink: 0;
  box-shadow: 0 0 8px var(--clr-accent-glow);
}

.scroll-pill__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.scroll-pill__segment--current .scroll-pill__label {
  max-width: 140px;
}

.scroll-pill__segment--prev .scroll-pill__label,
.scroll-pill__segment--next .scroll-pill__label {
  max-width: 80px;
}

@media (max-width: 768px) {
  .scroll-pill {
    display: block;
  }

  /* Push the speed dial above the pill via `translate` (separate from `transform`)
     so it doesn't clash with the sd-enter keyframe on .speed-dial. */
  .scroll-pill-active .speed-dial {
    translate: 0 calc(-1 * (44px + var(--sp-4) + env(safe-area-inset-bottom, 0px)));
  }

  /* When the dial opens, return it to its default position so the expanded
     action list sits above the pill rather than off-screen. */
  .scroll-pill-active .speed-dial.is-open {
    translate: 0 0;
  }
}