/* ── Next-step chips (src/js/next-step-chips.js) ─────────────────
   One pod floating just above the bottom nav, styled like the .tst
   toasts it follows. On the Log tab it sits at the top instead so it
   never covers the Log button. */

.nsc {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  z-index: 9998; /* just under the toast stack */
  box-sizing: border-box;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px 9px 14px;
  border-radius: var(--radius-pod);
  background: var(--pod-bg-hero, var(--card-bg));
  border: 1px solid var(--border-featured-strong, var(--border-color));
  box-shadow: var(--pod-shadow-hero, var(--shadow));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--font-body);
  color: var(--text-primary, var(--text-color));
  animation: nsc-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

body:has(#logTab.active) .nsc {
  top: calc(12px + env(safe-area-inset-top, 0px));
  bottom: auto;
}

.nsc.nsc--out { animation: nsc-out 0.22s ease-in both; pointer-events: none; }

.nsc-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-round);
  background: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 22%, transparent);
}

.nsc-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--secondary-text);
}

.nsc-cta {
  flex: 0 0 auto;
  padding: 7px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
}

.nsc-close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

@keyframes nsc-in {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes nsc-out {
  to { transform: translateY(8px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nsc, .nsc.nsc--out { animation-duration: 0.01s; }
}