/* Mobile Widget Optimization
 * This file contains global optimizations for all widgets on mobile devices
 * to ensure they work properly together and don't interfere with UI
 * Updated to work with expandable widget system
 */

/* Prevent widgets from interfering with mobile scrolling */
@media (max-width: 1024px) {
    .whatsapp-widget,
    .teams-widget,
    .email-widget,
    .calendly-badge-widget {
        /* Prevent touch events from interfering with scrolling */
        touch-action: manipulation;
        
        /* Ensure widgets don't cause horizontal scroll */
        max-width: calc(100vw - 20px);
        
        /* Improve rendering performance */
        will-change: transform;
        transform: translateZ(0);
        
        /* Ensure proper layering */
        isolation: isolate;
    }
    
    /* Reduce animation intensity on mobile for better performance */
    .whatsapp-icon::before,
    .teams-icon::before,
    .email-icon::before {
        animation-duration: 3s; /* Slower pulse on mobile */
    }
    
    /* Hide tooltips on very small screens to prevent overflow */
    @media (max-width: 360px) {
        .whatsapp-tooltip,
        .teams-tooltip,
        .email-tooltip {
            display: none;
        }
    }
    
    /* Ensure widgets don't interfere with mobile keyboards */
    @media (max-height: 500px) {
        .expandable-widgets-container.expanded .whatsapp-widget { bottom: 60px; }
        .expandable-widgets-container.expanded .teams-widget { bottom: 115px; }
        .expandable-widgets-container.expanded .email-widget { bottom: 25px; }
        .calendly-badge-widget { bottom: 30px !important; }
        
        .widget-expander {
            bottom: 10px;
        }
    }
    
    /* Landscape mode adjustments for mobile */
    @media (orientation: landscape) and (max-height: 500px) {
        .expandable-widgets-container.expanded .whatsapp-widget,
        .expandable-widgets-container.expanded .teams-widget,
        .expandable-widgets-container.expanded .email-widget {
            transform: scale(0.9);
        }
        
        .widget-expander {
            transform: scale(0.9);
        }
        
        .calendly-badge-widget {
            transform: scale(0.9) !important;
        }
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .whatsapp-icon svg,
    .teams-icon svg,
    .email-icon svg {
        /* Ensure crisp icons on retina displays */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Focus management for accessibility */
.whatsapp-widget:focus,
.teams-widget:focus,
.email-widget:focus,
.calendly-badge-widget:focus {
    outline: 2px solid #007ACC;
    outline-offset: 2px;
}

/* Ensure widgets don't interfere with mobile navigation */
@media (max-width: 768px) {
    body.menu-open .whatsapp-widget,
    body.menu-open .teams-widget,
    body.menu-open .email-widget,
    body.menu-open .calendly-badge-widget {
        z-index: 999; /* Lower than navigation menu */
        pointer-events: none;
    }
}

/* Loading optimization - hide widgets until page is loaded */
.widgets-loading .whatsapp-widget,
.widgets-loading .teams-widget,
.widgets-loading .email-widget,
.widgets-loading .calendly-badge-widget {
    opacity: 0;
    visibility: hidden;
}

/* Smooth entrance animation for all widgets */
.whatsapp-widget,
.teams-widget,
.email-widget {
    animation: widget-entrance 0.6s ease-out forwards;
    animation-delay: 1s; /* Delay to ensure page has loaded */
}

@keyframes widget-entrance {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Prevent widget overlap with bottom browser UI */
@supports (env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .whatsapp-widget {
            bottom: calc(100px + env(safe-area-inset-bottom));
        }
        
        .teams-widget {
            bottom: calc(180px + env(safe-area-inset-bottom));
        }
        
        .email-widget {
            bottom: calc(45px + env(safe-area-inset-bottom));
        }
        
        .calendly-badge-widget {
            bottom: calc(70px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Handle mobile browser UI changes (address bar hiding/showing) */
.mobile-browser-ui-active .whatsapp-widget {
    bottom: 80px;
}

.mobile-browser-ui-active .teams-widget {
    bottom: 140px;
}

.mobile-browser-ui-active .email-widget {
    bottom: 25px;
}

.mobile-browser-ui-active .calendly-badge-widget {
    bottom: 50px !important;
}

/* Additional mobile-specific improvements */
@media (max-width: 768px) {
    /* Prevent horizontal scroll caused by widgets */
    body {
        overflow-x: hidden;
    }
    
    /* Improve widget button accessibility on mobile */
    .whatsapp-icon,
    .teams-icon,
    .email-icon {
        /* Larger touch target for better mobile UX */
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Reduce motion for users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
        .whatsapp-widget,
        .teams-widget,
        .email-widget {
            animation: none;
        }
        
        .whatsapp-icon::before,
        .teams-icon::before,
        .email-icon::before {
            animation: none;
        }
    }
}