/* Fix video section proportions - complainant should get 60% of vertical space */

/* Container that holds both video sections needs proper flex */
.video-left-section .flex.flex-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important; /* Remove any gap between sections */
}

/* Complainant video section - gets 50% of space */
.complainant-video-section {
    flex: 1 1 0% !important; /* 50% proportion */
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Officer video and transcription section - gets 50% of space */
.officer-video-and-transcription-section {
    flex: 1 1 0% !important; /* 50% proportion */
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure the complainant video uses full space */
.complainant-video-section > div {
    flex: 1 1 0% !important;
    height: 100% !important;
}

/* Alternative approach using flex-basis if flex ratios don't work */
@supports (flex-basis: 0%) {
    .complainant-video-section {
        flex: 1 1 50% !important;
    }
    
    .officer-video-and-transcription-section {
        flex: 1 1 50% !important;
    }
}

/* Ensure no margin/padding is interfering */
.complainant-video-section,
.officer-video-and-transcription-section {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix any potential height constraints on parent */
.video-left-section {
    height: 100% !important;
}

/* Horizontal split within officer section */
.officer-video-and-transcription-section .flex.h-full > div:first-child {
    width: 35% !important;
    flex: 0 0 35% !important;
    max-width: 35% !important;
}

.officer-video-and-transcription-section .transcription-container {
    width: 65% !important;
    flex: 0 0 65% !important;
    max-width: 65% !important;
}

/* Override flex-grow class */
.officer-video-and-transcription-section .transcription-container.flex-grow {
    flex-grow: 0 !important;
}

/* Ensure the flex container uses proper widths */
.officer-video-and-transcription-section > .flex {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
}

/* Debug helper - uncomment to see boundaries */
/*
.complainant-video-section {
    border: 3px solid red !important;
}

.officer-video-and-transcription-section {
    border: 3px solid blue !important;
}

.officer-video-and-transcription-section .flex.h-full > div:first-child {
    border: 3px solid green !important;
}

.officer-video-and-transcription-section .transcription-container {
    border: 3px solid orange !important;
}
*/