/* =============================================================================
   Timeline Page Styles
   ============================================================================= */

/* Timeline container – horizontal scroll, fills remaining viewport */
.timeline-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    flex: 1;
    min-height: 0;
    gap: 12px;
    padding: 16px;
    scroll-behavior: smooth;
}

/* Empty state */
.timeline-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-muted);
    font-size: 15px;
}

/* Load More zone (pinned to left edge) */
.timeline-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 48px;
    padding: 0 4px;
}

.timeline-load-more-btn {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 16px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.timeline-load-more-btn:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

.timeline-load-more-label {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
    padding: 12px 4px;
}

/* Single run lane */
.timeline-lane {
    min-width: 280px;
    max-width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Lane header */
.timeline-lane-header {
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.timeline-lane-header .lane-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.timeline-lane-header .lane-time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Scrollable event area inside lane */
.timeline-lane-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Event cards */
.timeline-event {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--bg-primary);
    border-left: 3px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
    font-size: 12px;
}

.timeline-event:hover {
    background: rgba(64, 64, 88, 0.5);
}

/* Event type colors */
.timeline-event.type-trigger {
    border-left-color: var(--text-muted);
}

.timeline-event.type-tool_call {
    border-left-color: var(--color-blue);
}

.timeline-event.type-tool_response {
    border-left-color: rgba(137, 180, 250, 0.5);
}

.timeline-event.type-agent_text {
    border-left-color: var(--color-purple);
}

.timeline-event.type-user_text {
    border-left-color: #fab387;
}

.timeline-event.type-nudge_call {
    border-left-color: var(--color-green);
}

.timeline-event .event-icon {
    margin-right: 4px;
}

.timeline-event .event-summary {
    color: var(--text-secondary);
    line-height: 1.4;
    word-break: break-word;
}

.timeline-event .event-time {
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Expanded event detail */
.timeline-event .event-detail {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    font-size: 11px;
    color: var(--text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}

.timeline-event.expanded .event-detail {
    display: block;
}

.timeline-event.expanded {
    background: var(--bg-tertiary);
}

/* Delivery card (bottom of lane) */
.timeline-delivery {
    margin-top: auto;
    flex-shrink: 0;
    padding: 10px 12px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    transition: var(--transition);
}

.timeline-delivery:hover {
    background: rgba(64, 64, 88, 0.6);
}

.timeline-delivery .delivery-message {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.4;
    margin-bottom: 6px;
    word-break: break-word;
}

.timeline-delivery .delivery-category {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-blue);
    margin-bottom: 6px;
}

.timeline-delivery .delivery-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.timeline-delivery .delivery-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.timeline-delivery .delivery-tag-slack {
    background: rgba(137, 180, 250, 0.25);
    color: #89b4fa;
    border: 1px solid rgba(137, 180, 250, 0.5);
}

.timeline-delivery .delivery-tag-email {
    background: rgba(166, 227, 161, 0.2);
    color: #a6e3a1;
    border: 1px solid rgba(166, 227, 161, 0.5);
}

.timeline-delivery .delivery-tag-unconfirmed {
    background: rgba(250, 204, 21, 0.2);
    color: #facc15;
    border: 1px solid rgba(250, 204, 21, 0.5);
}

.timeline-delivery.delivery-unconfirmed {
    border-color: rgba(250, 204, 21, 0.3);
}

.timeline-delivery .delivery-time {
    font-size: 10px;
    color: var(--text-muted);
}

/* No delivery placeholder */
.timeline-no-delivery {
    margin-top: auto;
    flex-shrink: 0;
    padding: 10px 12px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    background: var(--bg-tertiary);
}

.timeline-chat-label {
    color: var(--accent-blue, #60a5fa);
}

/* Run type badge in lane header */
.lane-type-badge {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
}

.lane-type-chat {
    background: rgba(96, 165, 250, 0.15);
    color: var(--accent-blue, #60a5fa);
}

.lane-type-v2 {
    background: rgba(167, 139, 250, 0.15);
    color: #a78bfa;
}

/* Source badge in lane header */
.lane-source-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-top: 4px;
}

.lane-source-admin {
    background: rgba(203, 166, 247, 0.15);
    color: #cba6f7;
}

.lane-source-slack {
    background: rgba(137, 180, 250, 0.15);
    color: #89b4fa;
}

.lane-source-scheduled {
    background: rgba(166, 227, 161, 0.15);
    color: #a6e3a1;
}

.lane-source-unknown {
    background: rgba(186, 194, 222, 0.15);
    color: #bac2de;
}

/* Toast notification */
.timeline-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--color-green);
    border-radius: var(--radius);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    z-index: 2000;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transition: opacity 0.3s ease;
}

.timeline-toast.fade-out {
    opacity: 0;
}

/* Loading spinner inside timeline */
.timeline-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: var(--text-secondary);
    font-size: 14px;
    gap: 8px;
}