/* Fix for transcription tab not utilizing available vertical space */

/* Ensure the officer video and transcription section uses full height */
.officer-video-and-transcription-section {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure the inner flex container uses full height */
.officer-video-and-transcription-section > .flex {
    height: 100% !important;
    flex: 1 1 0% !important;
}

/* Transcription container should use flexbox properly */
.transcription-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-height: 0 !important; /* Critical for flexbox children */
}

/* Transcription header should not shrink */
.transcription-header {
    flex-shrink: 0 !important;
}

/* The content container should grow and handle overflow */
.transcription-container > .flex-grow {
    flex: 1 1 0% !important;
    min-height: 0 !important; /* Critical for nested flex containers */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The transcript panel body should use full height and scroll */
.transcript-panel-body {
    height: auto !important; /* Let flexbox handle height */
    max-height: none !important; /* Remove any max-height constraints */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 0% !important;
    min-height: 0 !important; /* Critical for flexbox */
}

/* Ensure the embedded transcript body specifically uses full height */
#embeddedTranscriptBody {
    height: auto !important; /* Let flexbox handle height */
    max-height: none !important; /* Remove any max-height constraints */
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    flex: 1 1 0% !important;
}

/* Fix for the video section container */
.video-left-section {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
}

/* Ensure proper sizing for the left column flex containers */
.video-left-section > .flex-grow {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* The container that holds both video sections - now using flex instead of h-full */
.video-left-section .flex.flex-col {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Smooth scrolling for transcript */
.transcript-panel-body {
    scroll-behavior: smooth;
}

/* Custom scrollbar for transcript area */
.transcript-panel-body::-webkit-scrollbar {
    width: 8px;
}

.transcript-panel-body::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.5);
    border-radius: 4px;
}

.transcript-panel-body::-webkit-scrollbar-thumb {
    background: rgba(75, 85, 99, 0.8);
    border-radius: 4px;
}

.transcript-panel-body::-webkit-scrollbar-thumb:hover {
    background: rgba(107, 114, 128, 0.9);
}

/* Ensure transcript entries don't cause layout issues */
.transcript-entry {
    flex-shrink: 0;
}

/* Debug helper - uncomment to visualize container boundaries */
/*
.transcription-container {
    border: 2px solid red !important;
}

.transcript-panel-body {
    border: 2px solid green !important;
}

.transcription-container > .flex-grow {
    border: 2px solid blue !important;
}
*/