.highlighted {
        background-color: #ffeb3b !important;
    }

    .highlighted td {
        background-color: #ffeb3b !important;
    }

    .playing {
        background-color: #c8e6c9 !important; /* light green */
    }

    .playing td {
        background-color: #c8e6c9 !important;
    }

    .kcmdb-subtitle-table-wrapper {
        position: relative;
        max-height: 480px; /* ensure scroll container height */
        overflow-y: auto;
    }

    /* Whisper words (media_details_word_highlight.js): spoken word + uncertain words */
    #subtitle_table span.w {
        border-radius: 3px;
        padding: 0 1px;
    }

    #subtitle_table span.w-now {
        background-color: #81c784;
    }

    #subtitle_table span.w-mid {
        color: #b45309; /* orange: 60-90% certain */
        text-decoration: underline dotted;
    }

    #subtitle_table span.w-low {
        color: #c62828; /* red: under 60% certain */
        text-decoration: underline dotted;
        font-weight: 600;
    }

    /* Selection bar: an overlay near the top of the transcript box (the playing line is kept in the middle,
       so it covers lines already heard, not the coming ones). The JS wraps the box in .kcmdb-subtitle-stage. */
    .kcmdb-subtitle-stage {
        position: relative;
    }
    #actionPanel.kcmdb-selection-bar {
        position: absolute;
        top: 12%;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2000; /* above Bootstrap dropdowns */
        max-width: calc(100% - 24px);
        padding: 6px 10px;
        background: var(--bs-body-bg, #fff);
        border: 1px solid var(--bs-border-color, #dee2e6);
        border-radius: 8px;
    }
    #actionPanel .sel-row {
        display: flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
    }
    #actionPanel .share-url {
        min-width: 0;
        max-width: 420px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Shared part: own controls with a seek bar over the part only (media_details_quote.js) */
    .kcmdb-quote-controls {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 4px;
    }
    .kcmdb-quote-controls input[type="range"] {
        flex: 1;
    }
    .kcmdb-quote-controls .btn {
        min-width: 36px;
    }