/* Fix for unified container in after-call mode */

/* 1. Hide the entire active-call-only container in after-call mode */
body.after-call-mode .active-call-only.flex.flex-col.overflow-x-hidden {
    display: none !important;
}

/* 2. Make the after-call playback content take full space */
body.after-call-mode #playbackContent {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 3. Remove the nested flex container in playbackContent to avoid duplication */
body.after-call-mode #playbackContent > .flex.flex-col {
    /* Remove this container's styling since we want to use playbackContent directly */
    display: contents !important; /* This makes children act as if they're direct children of playbackContent */
}

/* 4. Ensure transcription stays visible in after-call mode */
body.after-call-mode .transcription-container {
    display: flex !important;
    width: 100% !important;
    flex: 1 1 auto !important;
}

/* 5. Only hide the officer video portion, not the transcription */
body.after-call-mode .officer-video-and-transcription-section > .flex > .active-call-only {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
}

/* 6. Make complainant video section work properly in after-call mode */
body.after-call-mode .complainant-video-section {
    flex: 0 0 auto !important;
    height: 300px !important;
    min-height: 300px !important;
}

/* 7. Make officer section (with transcription) fill remaining space */
body.after-call-mode .officer-video-and-transcription-section {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    display: flex !important;
}

/* 8. Fix data points and playback controls positioning */
body.after-call-mode .data-points-section,
body.after-call-mode .playback-controls {
    display: block !important;
    flex-shrink: 0 !important;
}

/* 9. Remove the display override that was hiding transcription */
body.after-call-mode .after-call-transcription-visibility {
    display: flex !important;
}

/* 10. Ensure the video section flex container works properly */
body.after-call-mode .officer-video-and-transcription-section > .flex {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
}

/* 11. Rule removed - was causing layout conflicts */

/* 12. Ensure smooth transition between modes */
.transcription-container {
    transition: width 0.3s ease, flex 0.3s ease;
}

/* 13. Active call mode - ensure normal layout */
body.active-call-mode .active-call-only.flex.flex-col {
    display: flex !important;
}

body.active-call-mode #playbackContent {
    display: none !important;
}

/* 14. Fix tab content visibility */
body.after-call-mode .left-column-tab-content {
    display: none !important;
}

body.after-call-mode .left-column-tab-content.active {
    display: flex !important;
}