/* Reorganize playback layout - controls under video, data points in transcription */

/* 1. Move playback controls to be directly under complainant video */
body.after-call-mode .complainant-video-section {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* 2. Create a wrapper for video and controls */
body.after-call-mode .video-with-controls-wrapper {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    height: auto;
}

/* 3. Adjust complainant video height when controls are attached */
body.after-call-mode .video-with-controls-wrapper .complainant-video-section {
    height: 300px !important;
    min-height: 300px !important;
    flex: 0 0 auto !important;
}

/* 4. Position playback controls directly under video */
body.after-call-mode .playback-controls {
    position: relative !important;
    margin-top: 0 !important;
    border-top: 1px solid rgba(55, 65, 81, 0.5) !important;
    border-radius: 0 0 0.5rem 0.5rem !important;
    background: #111827 !important;
}

/* 5. Show data points section in its original location */
body.after-call-mode .data-points-section {
    display: block !important;
    visibility: visible !important;
}

/* 6. Style data points when moved to transcription header */
body.after-call-mode .transcription-header .data-points-inline {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-wrap: wrap;
}

/* 7. Compact data point buttons for header */
body.after-call-mode .data-point-btn {
    background-color: rgba(55, 65, 81, 0.5) !important;
    border: 1px solid rgba(75, 85, 99, 0.5) !important;
    color: #9CA3AF !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.25rem !important;
    font-size: 0.6875rem !important;
    transition: all 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
}

body.after-call-mode .data-point-btn:hover {
    background-color: rgba(55, 65, 81, 0.8) !important;
    color: #E5E7EB !important;
    border-color: rgba(107, 114, 128, 0.8) !important;
    transform: translateY(-1px) !important;
}

/* 8. Adjust icon size in data point buttons */
body.after-call-mode .data-point-btn i {
    font-size: 0.625rem !important;
}

/* 9. Ensure transcription header can accommodate data points */
body.after-call-mode .transcription-header {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem 1rem !important;
}

/* 10. Hide original quick jump label in after-call mode */
body.after-call-mode .data-points-label {
    display: none !important;
}

/* 11. Add new label for data points in transcription header */
body.after-call-mode .transcription-header .data-points-label {
    display: inline-flex !important;
    font-size: 0.75rem !important;
    color: #9CA3AF !important;
    margin-right: 0.5rem !important;
    align-items: center !important;
}

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

/* 13. Adjust unified container for new layout */
body.after-call-mode #playbackContent {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    gap: 0 !important;
}

/* 14. Ensure smooth transitions */
.complainant-video-section,
.playback-controls,
.data-points-section {
    transition: all 0.3s ease !important;
}

/* 15. Fix z-index for controls */
body.after-call-mode .playback-controls {
    z-index: 10 !important;
}

/* 16. Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    body.after-call-mode .transcription-header .data-points-inline {
        width: 100%;
        margin-top: 0.5rem;
        justify-content: flex-start;
    }
    
    body.after-call-mode .data-point-btn {
        font-size: 0.625rem !important;
        padding: 0.2rem 0.4rem !important;
    }
}