/* ============================================================
   FLOATING DATE PILL — Transient scroll indicator for chat/
   conversational interfaces. Shows the current day boundary
   while the user is actively scrolling. Fades out when
   scrolling stops.

   USAGE:
   <div class="floating-date-pill" role="status" aria-live="polite">
     <span class="floating-date-pill__text">Yesterday</span>
   </div>

   DATE TEXT CONVENTION (same as DateSeparator):
   - Today         → "Today"
   - Yesterday     → "Yesterday"
   - Within 7 days → Day name ("Friday", "Saturday")
   - Older         → "Apr 21, 2026"

   BEHAVIOR (handled by app logic):
   - Hidden by default (opacity: 0, pointer-events: none).
   - Add .floating-date-pill--visible on scroll start.
   - Remove .floating-date-pill--visible after scroll idle
     (~1.5s debounce recommended).

   RULES:
   - Fixed position, horizontally centered.
   - Sits below the topbar, above all chat content.
   - NO interaction — purely informational overlay.
   - Compact: small pill, not a full-width bar.
   ============================================================ */

/* ── Container: fixed, centered, hidden by default ── */
.floating-date-pill {
  position: fixed;
  top: 76px;                                       /* 56px topbar + 20px breathing room */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;                                     /* Above sticky date separator */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* ── Visible state (toggled by scroll logic) ── */
.floating-date-pill--visible {
  opacity: 1;
}

/* ── Pill shape ── */
.floating-date-pill__text {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-on-primary);
  background: rgba(var(--color-primary-rgb), 0.85);
  padding: 6px 16px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.2);
}