/* Fix for playback video heights to match live stream proportions */

/* Remove fixed height from complainant video in playback mode */
body.after-call-mode #playbackContent .complainant-video-section {
    flex: 1 1 0% !important; /* Match live stream flex */
    height: 100% !important; /* Fill parent height */
    min-height: 200px !important; /* Ensure minimum height */
}

/* Ensure officer video section also uses flex properly */
body.after-call-mode #playbackContent .officer-video-and-transcription-section {
    flex: 1 1 0% !important; /* Match live stream flex */
    height: 100% !important; /* Fill parent height */
    min-height: 200px !important;
    overflow: hidden !important;
}

/* Fix the container structure for proper flex distribution */
body.after-call-mode #playbackContent > .flex {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important; /* Remove gap to match live stream */
}

/* Rule removed - was causing layout conflicts */

/* Fix the nested structure - ensure complainant video fills its wrapper */
body.after-call-mode #playbackContent .flex-col > .complainant-video-section {
    flex: 1 1 0% !important;
    height: 100% !important;
}

/* Fix the nested structure - ensure officer video fills its wrapper */
body.after-call-mode #playbackContent .flex-col > .officer-video-and-transcription-section {
    flex: 1 1 0% !important;
    height: 100% !important;
}

/* Fix data points and playback controls to not affect video heights */
body.after-call-mode .data-points-section {
    flex: 0 0 auto !important;
    max-height: 120px !important;
    overflow-y: auto !important;
}

body.after-call-mode .playback-controls {
    flex: 0 0 auto !important;
    height: auto !important;
}

/* Ensure videos fill their containers properly */
body.after-call-mode #playbackContent .complainant-video-section img,
body.after-call-mode #playbackContent .officer-video-and-transcription-section img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Match live stream object-fit */
}

/* Match the exact structure of live stream for complainant video */
body.after-call-mode #playbackContent .complainant-video-section > div {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* Ensure the playback content fills available space */
body.after-call-mode #playbackContent {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Fix nested flex containers to properly distribute height */
body.after-call-mode #playbackContent .flex-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Ensure proper overflow handling */
body.after-call-mode #playbackContent > div:first-child {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Override any conflicting fixed heights from other CSS files */
body.after-call-mode #playbackContent .complainant-video-section[style*="height"] {
    height: auto !important;
}

/* Ensure the video sections container uses full height */
body.after-call-mode #playbackContent .overflow-x-hidden {
    height: 100% !important;
    overflow: hidden !important;
}