/* ==========================================================================
   OmniConsult - Real-Time Calling System Stylesheet
   ========================================================================== */

/* Screen Visibility Controller */
.screen {
    display: none !important;
}
.screen.active {
    display: flex !important;
}

/* Scrollbar Utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Material Symbols Adjustments */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

/* Safe area insets for notched mobile devices */
.pb-safe {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}
.pt-safe {
    padding-top: max(16px, env(safe-area-inset-top));
}

/* Active Calling Button State Modifications */
.ctrl-active-muted {
    background-color: #dc2626 !important; /* Red */
    color: #ffffff !important;
}

.ctrl-active-speaker-off {
    background-color: #4b5563 !important; /* Gray */
    color: #9ca3af !important;
}

/* PiP Local Video Hover/Transition */
#localVideoWrapper {
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s ease;
}
#localVideoWrapper:hover {
    transform: scale(1.03);
}

/* Animation Utilities */
@keyframes ringPulse {
    0% { transform: scale(1); opacity: 0.9; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-14deg); }
    40% { transform: rotate(14deg); }
    60% { transform: rotate(-8deg); }
    80% { transform: rotate(8deg); }
}

.animate-wiggle {
    animation: wiggle 1.2s infinite;
}

/* Ensure Video Elements are Smooth and Scaled */
#remoteVideo {
    background-color: #000;
}