#transcriptModalBody {
    color: #2c2c2c !important;
}
.transcript-button {
    cursor: pointer;
    max-height: 12px;
    margin-top: -5px;
}
.button-holder {
    border-left: 2px solid darkgray;
    padding-left: .25rem;
}
/* Custom Timeline Styles */
.transcript-close {
    font-weight: bold;
    font-size: 32px;
}
.timeline {
    padding: 1rem;
    padding-left: 0;
    margin-left: 20px; /* Space for the line and dots */
    border-left: 2px solid gray; /* The vertical gray line */
    position: relative; /* Important for positioning children */
}
/* Each line of the transcript */
.transcript-block {
    display: inline-block;
    text-align: left;
    max-width: 60%;
    padding: .5rem;
    border-radius: 8px;
}
.transcript-block.speaker-0 {
    background-color: #f0f0f0;
}
.transcript-block.speaker-1 {
    background-color: #d0f0ff;
}
.transcript-block.speaker-2 {
    background-color: #bcdfb2;
}
.transcript-block.speaker-3 {
    background-color: #fdd8c1;
}
.transcript-block.speaker-4 {
    background-color: #dfd7b7;
}
.transcript-block.speaker-5 {
    background-color: #ac8cf0;
}
.transcript-line {
    display: flex; /* Use flexbox for alignment */
    align-items: flex-start; /* Align items to the top (text start) */
    margin-bottom: 15px; /* Space between lines */
    padding-left: 2rem; /* Indent text from the timeline line */
    position: relative; /* For the timeline-point absolute positioning */
    box-sizing: border-box; /* Include padding in width calculations */
    clear: both; /* Ensure new line clears previous floats */
}
/* The blue dot on the timeline */
.timeline-point {
    /* Circle */
    /*width: 14px;
    height: 14px;
    background-color: #00c3db;
    border-radius: 50%;
    position: absolute;
    left: -8px;
    top: 0;*/

    width: 0px;
    height: 0px;
    border-radius: 50%;
    position: absolute;
    left: -3px;
    top: 0;
    border-color: #00c3db transparent transparent transparent;
    border-width: 10px 8px 0 8px;
    border-style: solid;
    transform: rotate(-90deg);
}
/* Wrapper for timestamp and transcript text */
.transcript-row {
    flex-grow: 1; /* Allows the row to take up available space */
    /* max-width: calc(100% - 30px); */ /* Adjusted in JS, but good to keep in mind */
}
/* Styles for timestamp */
.timestamp {
    display: block;
    font-weight: bold;
    font-size: 0.75em;
    color: #777;
    margin-bottom: 3px;
}
/* Styles for transcript text */
.transcript {
    /* No specific styles here, text will wrap naturally */
}
/* Alignment classes for text */
.text-left {
    text-align: left;
    margin-right: auto; /* Push to the left */
}
.text-right {
    text-align: right;
    margin-left: auto; /* Push to the right */
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .timeline {
        border-left: none; /* Hide the vertical line on small screens */
        margin-left: 0;
        padding-left: 0;
    }
    .transcript-line {
        padding-left: 10px; /* Reduce padding on small screens */
    }
    .timeline-point {
        position: static; /* Make it flow normally */
        transform: none; /* Remove any transforms */
        margin-right: 5px; /* Add some space next to the text */
        display: inline-block; /* Keep it next to the text */
        vertical-align: top; /* Align with the top of the text */
    }
    .transcript-row {
        text-align: left !important; /* Force left align on small screens */
        width: auto; /* Auto width */
        flex-grow: 1;
    }
}
.timeline-triangle-top,
.timeline-triangle-bottom {
    width: 0;
    height: 0;
    border-style: solid;
    position: relative;
    left: 20px;
    z-index: 1;
}

.timeline-triangle-bottom {
    border-width: 0 8px 10px 8px;
    border-color: transparent transparent #008098 transparent;
    margin-top: -2px;
    margin-left: -7px;
}

.timeline-triangle-top {
    border-width: 10px 8px 0 8px;
    border-color: #008098 transparent transparent transparent;
    margin-bottom: -2px;
    margin-left: -7px;
}

@media (max-width: 768px) {
    .timeline-triangle-top,
    .timeline-triangle-bottom {
        display: none;
    }
}
.conversation-timeline-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.conversation-timeline-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.conversation-timeline-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}

.conversation-timeline-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.conversation-timeline-container {
    scrollbar-width: thick;
    scrollbar-color: #888 #f1f1f1;
}

.conversation-timeline-container {
    max-height: 40vh;
    overflow-y: auto;
    padding-right: 5px;
    box-sizing: border-box;
}