/**
 * Timeline Components
 * Hour markers, date markers, and gap spacing for timeline views
 * BEM naming convention
 */

/* ==========================================================================
   Timeline Hour Marker
   ========================================================================== */

.timeline-hour-marker {
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 12px;
  margin-right: 12px;
}

.timeline-hour-marker::before {
  content: '';
  position: absolute;
  left: -12px;
  right: -12px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(70% 0.18 350 / 0.2) 10%,
    oklch(70% 0.18 350 / 0.4) 50%,
    oklch(70% 0.18 350 / 0.2) 90%,
    transparent 100%
  );
  z-index: 2;
}

.dark .timeline-hour-marker::before,
:root.dark .timeline-hour-marker::before {
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(70% 0.18 350 / 0.3) 10%,
    oklch(70% 0.18 350 / 0.5) 50%,
    oklch(70% 0.18 350 / 0.3) 90%,
    transparent 100%
  );
}

@media (prefers-color-scheme: dark) {
  .timeline-hour-marker::before {
    background: linear-gradient(90deg,
      transparent 0%,
      oklch(70% 0.18 350 / 0.3) 10%,
      oklch(70% 0.18 350 / 0.5) 50%,
      oklch(70% 0.18 350 / 0.3) 90%,
      transparent 100%
    );
  }
}

/* Hour Label */
.timeline-hour-marker__label,
.timeline-hour-marker .hour-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: oklch(70% 0.18 350 / 0.7);
  text-shadow: 0 1px 3px oklch(100% 0 0 / 0.5);
  background: oklch(100% 0 0 / 0.95);
  padding: 4px 10px;
  border-radius: 12px;
  border: 2px solid oklch(70% 0.18 350 / 0.2);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.025em;
}

.dark .timeline-hour-marker__label,
.dark .timeline-hour-marker .hour-label,
:root.dark .timeline-hour-marker__label,
:root.dark .timeline-hour-marker .hour-label {
  color: oklch(70% 0.18 350 / 0.85);
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
  background: oklch(20% 0.02 260 / 0.95);
  border-color: oklch(70% 0.18 350 / 0.3);
}

@media (prefers-color-scheme: dark) {
  .timeline-hour-marker__label,
  .timeline-hour-marker .hour-label {
    color: oklch(70% 0.18 350 / 0.85);
    text-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
    background: oklch(20% 0.02 260 / 0.95);
    border-color: oklch(70% 0.18 350 / 0.3);
  }
}

/* ==========================================================================
   Timeline Date Marker
   ========================================================================== */

.timeline-date-marker {
  position: relative;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-date-marker::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(80% 0.15 85 / 0.3) 10%,
    oklch(80% 0.15 85 / 0.6) 50%,
    oklch(80% 0.15 85 / 0.3) 90%,
    transparent 100%
  );
  z-index: 2;
}

.dark .timeline-date-marker::before,
:root.dark .timeline-date-marker::before {
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(80% 0.15 85 / 0.4) 10%,
    oklch(80% 0.15 85 / 0.7) 50%,
    oklch(80% 0.15 85 / 0.4) 90%,
    transparent 100%
  );
}

@media (prefers-color-scheme: dark) {
  .timeline-date-marker::before {
    background: linear-gradient(90deg,
      transparent 0%,
      oklch(80% 0.15 85 / 0.4) 10%,
      oklch(80% 0.15 85 / 0.7) 50%,
      oklch(80% 0.15 85 / 0.4) 90%,
      transparent 100%
    );
  }
}

/* Date Label */
.timeline-date-marker__label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: oklch(55% 0.12 85);
  text-shadow: 0 1px 3px oklch(100% 0 0 / 0.5);
  background: oklch(100% 0 0 / 0.95);
  padding: 6px 14px;
  border-radius: 14px;
  border: 2px solid oklch(80% 0.15 85 / 0.3);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.025em;
}

.dark .timeline-date-marker__label,
:root.dark .timeline-date-marker__label {
  color: oklch(80% 0.15 85);
  text-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
  background: oklch(20% 0.02 260 / 0.95);
  border-color: oklch(80% 0.15 85 / 0.4);
}

@media (prefers-color-scheme: dark) {
  .timeline-date-marker__label {
    color: oklch(80% 0.15 85);
    text-shadow: 0 1px 3px oklch(0% 0 0 / 0.3);
    background: oklch(20% 0.02 260 / 0.95);
    border-color: oklch(80% 0.15 85 / 0.4);
  }
}

/* ==========================================================================
   Timeline Gap Spacing
   ========================================================================== */

.timeline-gap--sm,
.timeline-gap-small {
  margin-top: 1rem;
}

.timeline-gap--md,
.timeline-gap-medium {
  margin-top: 2rem;
}

.timeline-gap--lg,
.timeline-gap-large {
  margin-top: 3.5rem;
}

.timeline-gap--xl,
.timeline-gap-xlarge {
  margin-top: 5rem;
}

/* ==========================================================================
   Timeline Message Card
   ========================================================================== */

.timeline-message-card,
.tape-message-card {
  position: relative;
  z-index: 3;
}

/* ==========================================================================
   Timeline Container
   ========================================================================== */

.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
}

.timeline--compact .timeline-hour-marker {
  height: 36px;
}

.timeline--compact .timeline-date-marker {
  height: 48px;
}

.timeline--compact .timeline-gap--sm,
.timeline--compact .timeline-gap-small {
  margin-top: 0.5rem;
}

.timeline--compact .timeline-gap--md,
.timeline--compact .timeline-gap-medium {
  margin-top: 1rem;
}

.timeline--compact .timeline-gap--lg,
.timeline--compact .timeline-gap-large {
  margin-top: 1.5rem;
}

.timeline--compact .timeline-gap--xl,
.timeline--compact .timeline-gap-xlarge {
  margin-top: 2rem;
}