/* Playback Transcript Styling */

/* Transcript container */
#playbackTranscript {
    scrollbar-width: thin;
    scrollbar-color: #4B5563 #1F2937;
}

#playbackTranscript::-webkit-scrollbar {
    width: 8px;
}

#playbackTranscript::-webkit-scrollbar-track {
    background: #1F2937;
    border-radius: 4px;
}

#playbackTranscript::-webkit-scrollbar-thumb {
    background: #4B5563;
    border-radius: 4px;
}

#playbackTranscript::-webkit-scrollbar-thumb:hover {
    background: #6B7280;
}

/* Transcript entries */
.transcript-entry {
    padding: 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.transcript-entry:hover {
    background-color: rgba(55, 65, 81, 0.5);
}

.transcript-entry.highlight {
    background-color: rgba(59, 130, 246, 0.1);
    border-left: 3px solid #3B82F6;
    padding-left: 0.75rem;
}

/* Active/current transcript entry */
.transcript-entry.active {
    background-color: rgba(59, 130, 246, 0.2);
    border-left: 3px solid #60A5FA;
}

/* Stages legend tooltip */
#stagesLegend {
    backdrop-filter: blur(10px);
    max-height: 300px;
    overflow-y: auto;
}

/* Help button pulse animation */
#stagesHelpBtn {
    animation: pulse 2s infinite;
}

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

#stagesHelpBtn:hover {
    animation: none;
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1280px) {
    .playback-controls .grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    #playbackTranscript {
        height: 10rem;
    }
}

/* Sync transcript with video position */
.transcript-entry[data-active="true"] {
    background-color: rgba(96, 165, 250, 0.15);
    border-left: 3px solid #60A5FA;
    padding-left: 0.75rem;
}

/* Click to jump styling */
.transcript-entry:active {
    transform: scale(0.98);
}

/* Search highlight */
.transcript-entry .search-highlight {
    background-color: #FEF3C7;
    color: #92400E;
    padding: 0 2px;
    border-radius: 2px;
}