/* ============================================================
   DATE SEPARATOR — Inline day boundary marker for chat/
   conversational interfaces. Separates messages by day.

   Gold decorative rule with centered date text. Becomes sticky
   when scrolling — pins below the topbar so the user always
   knows which day they're viewing.

   USAGE:
   <div class="date-separator" role="separator" aria-label="Yesterday">
     <div class="date-separator__line"></div>
     <span class="date-separator__text">Yesterday</span>
     <div class="date-separator__line"></div>
   </div>

   DATE TEXT CONVENTION (handled by app logic):
   - Today         → "Today"
   - Yesterday     → "Yesterday"
   - Within 7 days → Day name ("Friday", "Saturday")
   - Older         → "Apr 21, 2026"

   RULES:
   - NO emojis. Gold rule is the accent.
   - Text is UPPERCASE, uses body font (not display).
   - Sticky top offset must clear the topbar (56px).
   - Solid background when stuck — prevents content bleed.
   ============================================================ */

/* ── Container: inline flow + sticky ── */
.date-separator {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 16px;
  position: sticky;
  top: 56px;                                      /* Clears topbar height */
  z-index: 10;                                     /* Above messages, below topbar */
  background: var(--color-surface-subtle);          /* Solid — no bleed-through */
}

/* Subtle fade at bottom edge so it doesn't clip hard against messages */
.date-separator::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(to bottom, var(--color-surface-subtle), transparent);
  pointer-events: none;
}

/* ── Gold decorative lines ── */
.date-separator__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-accent) 30%,
    var(--color-accent) 70%,
    transparent
  );
}

/* ── Date text ── */
.date-separator__text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  white-space: nowrap;
  line-height: 1;
}