/* ==========================================
   FINCHVOX UI STYLES
   ========================================== */
/*
   TABLE OF CONTENTS:
   1. CSS Variables (span colors, scrollbar)
   2. Base & Reset Styles
   3. Timeline Marker (dynamically generated)
   4. Timeline Bar (span type colors)
   5. Scrollbar Styles
   6. Live Badge Animation
*/

/* ==========================================
   1. CSS VARIABLES
   ========================================== */
:root {
    --bg-primary: #0a0a0a;
    --border: #333333;
    --span-stt: #f97316;
    --span-stt-progress: #ea580c;
    --span-llm: #ec4899;
    --span-tts: #a855f7;
    --span-turn: #10b981;
    --span-default: #6b7280;

    --waterfall-row-height: 32px;
    --gutter-indent-size: 16px;
    --gutter-base-width: 32px;
}

/* ==========================================
   2. BASE & RESET STYLES
   ========================================== */
[x-cloak] {
    display: none !important;
}

button:focus-visible {
    outline: none;
}

/* ==========================================
   3. TIMELINE MARKER (generated dynamically)
   ========================================== */
.timeline-marker span {
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ==========================================
   4. TIMELINE BAR (span type colors)
   ========================================== */
.timeline-bar {
    position: absolute;
    height: 24px;
    min-width: 1px;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    overflow: visible;
    border-radius: 2px;
    border: 1px solid transparent;
}

.timeline-bar:hover {
    filter: brightness(1.2);
    z-index: 5;
}

.bar-stt { background: var(--span-stt); }
.bar-llm { background: var(--span-llm); }
.bar-tts { background: var(--span-tts); }
.bar-turn { background: var(--span-turn); }
.bar-conversation { background: #3f3f46; }

.selected .timeline-bar,
.timeline-bar.selected {
    border: 1px solid white;
    z-index: 10;
}

/* ==========================================
   5. SCROLLBAR STYLES
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #444444;
}

::-webkit-scrollbar-corner {
    background: var(--bg-primary);
}

/* ==========================================
   6. LIVE BADGE ANIMATION
   ========================================== */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #fb923c;
    font-weight: 600;
}

.live-badge::before {
    content: "●";
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}