/* View-based visibility control for active/after-call modes */

/* Default state - active call mode */
.after-call-only {
    display: none !important;
}

/* Special case for PIP - use visibility instead of display */
#pipContainer.after-call-only {
    display: block !important; /* Override the display: none */
    visibility: hidden !important;
    opacity: 0 !important;
}

/* When in after-call mode - hide active-call elements */
body.after-call-mode .active-call-only {
    display: none !important;
}

/* Fix for flex containers that are active-call-only */
body.after-call-mode .active-call-only.flex {
    display: none !important;
}

body.after-call-mode .active-call-only.block {
    display: none !important;
}

/* Default to flex for after-call-only elements since buttons use flex */
body.after-call-mode .after-call-only {
    display: flex !important;
}

/* Specific display types for common elements */
body.after-call-mode .after-call-only.flex {
    display: flex !important;
}

body.after-call-mode .after-call-only.block {
    display: block !important;
}

body.after-call-mode .after-call-only.inline-flex {
    display: inline-flex !important;
}

body.after-call-mode .after-call-only.grid {
    display: grid !important;
}

/* Special handling for PIP container - use visibility for smoother transitions */
#pipContainer {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Hide PIP in active-call mode (default) - this is the default state */
body.active-call-mode #pipContainer.after-call-only {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Keep PIP hidden in after-call mode by default, but allow toggle */
body.after-call-mode #pipContainer.after-call-only {
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Show PIP in after-call mode when pip-visible class is added */
body.after-call-mode #pipContainer.after-call-only.pip-visible {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Make transcription container full width in after-call mode */
body.after-call-mode .transcription-container {
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* Hide officer video section completely in after-call mode - no space reserved */
body.after-call-mode .active-call-only[style*="width: 35%"] {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Ensure transcription container maintains normal width in active-call mode */
body.active-call-mode .transcription-container {
    width: auto;
    flex: 1 1 auto;
}

/* PIP toggle override - when user manually shows PIP */
#pipContainer.pip-visible {
    visibility: visible !important;
    opacity: 1 !important;
}