/* ── Live Blog Frontend Timeline ── */

.live-blog-timeline-wrap {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid hsl(var(--border));
}

/* Header */
.live-blog-header {
    margin-bottom: 20px;
}
.live-blog-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.live-blog-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}
.live-blog-subtitle {
    margin: 0;
    font-size: 13px;
    color: hsl(var(--muted-foreground));
}

/* Live badge with pulsing dot */
.live-badge-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: hsl(0 84% 60% / 0.12);
    color: hsl(0 84% 50%);
    line-height: 1;
}
.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: hsl(0 84% 50%);
    animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.live-badge-ended {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    line-height: 1;
}

/* Timeline structure */
.live-blog-timeline {
    position: relative;
    padding-left: 44px;
}
.live-timeline-line {
    position: absolute;
    left: 19px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: hsl(var(--primary) / 0.25);
}

/* Individual event */
.live-blog-event {
    position: relative;
    padding-bottom: 24px;
}
.live-blog-event:last-child {
    padding-bottom: 0;
}

/* Timeline dot - simple like surging page */
.timeline-dot-event {
    position: absolute;
    left: -41px;
    top: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    flex-shrink: 0;
}
.timeline-dot-event::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.timeline-dot-event.type-update { background: hsl(var(--primary) / 0.12); }
.timeline-dot-event.type-update::after { background: hsl(var(--primary)); }
.timeline-dot-event.type-photo  { background: hsl(217 91% 60% / 0.12); }
.timeline-dot-event.type-photo::after  { background: hsl(217 91% 50%); }
.timeline-dot-event.type-video  { background: hsl(330 81% 60% / 0.12); }
.timeline-dot-event.type-video::after  { background: hsl(330 81% 50%); }
.timeline-dot-event.type-quote  { background: hsl(35 92% 50% / 0.12); }
.timeline-dot-event.type-quote::after  { background: hsl(35 92% 50%); }
.timeline-dot-event.type-result { background: hsl(160 84% 40% / 0.12); }
.timeline-dot-event.type-result::after { background: hsl(160 84% 40%); }
.timeline-dot-event.type-alert  { background: hsl(0 84% 60% / 0.12); }
.timeline-dot-event.type-alert::after  { background: hsl(0 84% 50%); }
.timeline-dot-event.type-link   { background: hsl(260 84% 60% / 0.12); }
.timeline-dot-event.type-link::after   { background: hsl(260 84% 50%); }

/* Position-based dot colors (cycle blue -> green -> red down the timeline).
   These override the per-type color on the solid dot + faint ring. */
.timeline-dot-event.dot-seq-blue  { background: hsl(217 91% 60% / 0.12); }
.timeline-dot-event.dot-seq-blue::after  { background: hsl(217 91% 50%); }
.timeline-dot-event.dot-seq-green { background: hsl(160 84% 40% / 0.14); }
.timeline-dot-event.dot-seq-green::after { background: hsl(160 84% 40%); }
.timeline-dot-event.dot-seq-red   { background: hsl(0 84% 60% / 0.14); }
.timeline-dot-event.dot-seq-red::after   { background: hsl(0 84% 50%); }

/* Explicit marker colors (priority over type + sequence). */
.timeline-dot-event.marker-critical { background: hsl(0 84% 60% / 0.16); }
.timeline-dot-event.marker-critical::after { background: hsl(0 84% 50%); }
.timeline-dot-event.marker-success  { background: hsl(160 84% 40% / 0.16); }
.timeline-dot-event.marker-success::after  { background: hsl(160 84% 40%); }

.live-event-type.marker-critical { color: hsl(0 84% 50%); }
.live-event-type.marker-success  { color: hsl(160 84% 40%); }
.live-event-type.marker-regular  { color: hsl(var(--primary)); }

/* Event content */
.live-event-right {
    min-width: 0;
}
.live-event-meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}
.live-event-type {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 10px;
}
.live-event-type.type-update { color: hsl(var(--primary)); }
.live-event-type.type-photo  { color: hsl(217 91% 50%); }
.live-event-type.type-video  { color: hsl(330 81% 50%); }
.live-event-type.type-quote  { color: hsl(35 92% 50%); }
.live-event-type.type-result { color: hsl(160 84% 40%); }
.live-event-type.type-alert  { color: hsl(0 84% 50%); }
.live-event-type.type-link   { color: hsl(260 84% 50%); }

.live-event-bullet {
    opacity: 0.4;
}
.live-event-time {
    font-size: 12px;
}
.live-event-headline {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}
.live-event-body {
    font-size: 14px;
    line-height: 1.6;
}

/* Editor images inside live events */
.live-event-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
}
.live-event-body iframe,
.live-event-body video {
    max-width: 100%;
    border-radius: 8px;
}

/* Ended bar */
.live-blog-ended-bar {
    margin-top: 20px;
    padding: 14px 20px;
    border-radius: 8px;
    background: hsl(var(--muted));
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

/* Empty state */
.live-blog-empty {
    padding: 32px 20px;
    text-align: center;
    border-radius: 8px;
    border: 1px dashed hsl(var(--border));
    color: hsl(var(--muted-foreground));
    font-size: 14px;
}
.live-blog-empty p {
    margin: 0;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .live-blog-timeline {
        padding-left: 36px;
    }
    .live-timeline-line {
        left: 17px;
    }
    .timeline-dot-event {
        left: -28px;
        width: 28px;
        height: 28px;
    }
    .timeline-dot-event::after {
        width: 8px;
        height: 8px;
    }
}