/* Fix for after-call view layout issues */

/* 1. Fix video sections stacking properly in playback mode */
body.after-call-mode #playbackContent {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 2. Fix the main flex container for proper video stacking */
body.after-call-mode #playbackContent > .flex {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0.5rem !important;
}

/* 3. Ensure complainant video section has proper height */
body.after-call-mode #playbackContent .complainant-video-section {
    flex: 0 0 auto !important;
    height: 300px !important; /* Fixed height for complainant video */
    min-height: 300px !important;
}

/* 4. Ensure officer video section fills remaining space */
body.after-call-mode #playbackContent .officer-video-and-transcription-section {
    flex: 1 1 auto !important;
    min-height: 200px !important;
    overflow: hidden !important;
}

/* 5. Fix data points section to not overflow */
body.after-call-mode .data-points-section {
    flex-shrink: 0 !important;
    max-height: 120px !important;
    overflow-y: auto !important;
}

/* 6. Fix playback controls to stay at bottom */
body.after-call-mode .playback-controls {
    flex-shrink: 0 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* 7. Ensure the tab content container has proper overflow */
body.after-call-mode .left-column-tab-content {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

/* 8. Fix the video sections container to prevent double scrollbars */
body.after-call-mode #playbackContent .overflow-x-hidden {
    overflow-x: hidden !important;
    overflow-y: hidden !important; /* Prevent vertical scroll on container */
}

/* 9. Ensure transcription body can scroll */
body.after-call-mode .transcript-panel-body,
body.after-call-mode .transcript-panel-body.overflow-y-auto {
    overflow-y: auto !important;
    max-height: 100% !important;
}

/* 10. Fix the aspect ratio of videos in after-call mode */
body.after-call-mode .complainant-video-section img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* 11. Hide play overlay properly when video is playing */
body.after-call-mode .after-call-only[style*="display: none"] {
    display: none !important;
}

/* 12. Ensure proper spacing between sections */
body.after-call-mode #playbackContent > div > div {
    margin-bottom: 0 !important;
}

/* 13. Fix tab content active state */
body.after-call-mode .left-column-tab-content:not(.active) {
    display: none !important;
}

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

/* 14. Ensure video timeline is visible and properly styled */
body.after-call-mode #videoTimeline {
    cursor: pointer !important;
    touch-action: pan-y !important;
}

/* 15. Fix help icon positioning in timeline area */
body.after-call-mode .playback-controls .relative {
    position: relative !important;
}

/* 16. Ensure proper height for the main content area */
body.after-call-mode .video-left-section {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* 17. Fix nested flex containers */
body.after-call-mode .video-left-section > div {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* 18. Prevent layout shift when switching modes */
.video-left-section {
    transition: none !important;
}

/* 19. Fix z-index issues with overlays */
body.after-call-mode .after-call-only[style*="z-index"] {
    z-index: 100 !important;
}

/* 20. Ensure PIP container doesn't interfere with layout */
body.after-call-mode #pipContainer {
    position: absolute !important;
}