/**
 * Floating Chatbot Mobile Fix
 * Ensures the floating chatbot is properly positioned above mobile bottom navigation
 */

/* Base mobile responsive adjustments */
@media (max-width: 768px) {
    /* Ensure floating chatbot is above mobile bottom navigation */
    .floating-chatbot {
        bottom: 88px !important; /* 4rem nav height + 24px spacing */
        right: 16px !important;
        z-index: 1050 !important; /* Higher than mobile nav (1000) */
        transition: bottom 0.3s ease !important;
    }

    /* Adjust chat window positioning */
    .floating-chatbot .chat-window {
        bottom: 0 !important;
        right: 0 !important;
        max-height: calc(100vh - 160px) !important; /* Account for nav + chatbot button */
    }

    /* Ensure chat bubble is properly sized for mobile */
    .floating-chatbot .chat-bubble {
        width: 56px !important;
        height: 56px !important;
        box-shadow: 
            0 8px 25px rgba(5, 150, 105, 0.3),
            0 0 20px rgba(5, 150, 105, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    }

    /* Adjust avatar size */
    .floating-chatbot .chat-bubble-avatar {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Specific adjustments when mobile bottom nav is present */
@media (max-width: 768px) {
    /* When regular mobile bottom nav is present */
    body:has(.mobile-bottom-nav) .floating-chatbot {
        bottom: 88px !important; /* 64px nav + 24px spacing */
    }

    /* When agent mobile bottom nav is present */
    body:has(.agent-mobile-bottom-nav) .floating-chatbot {
        bottom: 88px !important; /* 64px nav + 24px spacing */
    }

    /* Fallback for browsers that don't support :has() */
    .mobile-bottom-nav ~ * .floating-chatbot,
    .agent-mobile-bottom-nav ~ * .floating-chatbot {
        bottom: 88px !important;
    }
}

/* Additional safety measures for z-index conflicts */
.floating-chatbot {
    z-index: 1050 !important;
}

.floating-chatbot .chat-window {
    z-index: 1051 !important;
}

/* Ensure mobile navigation has proper z-index hierarchy */
.mobile-bottom-nav,
.agent-mobile-bottom-nav {
    z-index: 1000 !important;
}

/* Ensure mobile navigation appears above most elements but below critical modals */
@media (max-width: 768px) {
    .mobile-bottom-nav,
    .agent-mobile-bottom-nav {
        z-index: 1000 !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Ensure mobile nav is visible even when body has position fixed */
    body.modal-open .mobile-bottom-nav,
    body.modal-open .agent-mobile-bottom-nav {
        z-index: 1000 !important;
        position: fixed !important;
        bottom: 0 !important;
        display: flex !important;
    }

    /* Ensure mobile nav stays visible during SweetAlert modals */
    body:has(.swal2-container) .mobile-bottom-nav,
    body:has(.swal2-container) .agent-mobile-bottom-nav {
        z-index: 1000 !important;
        position: fixed !important;
        bottom: 0 !important;
        display: flex !important;
    }
}

/* Handle edge cases for very small screens */
@media (max-width: 480px) {
    .floating-chatbot {
        bottom: 84px !important; /* Slightly closer on very small screens */
        right: 12px !important;
    }

    .floating-chatbot .chat-window {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 140px) !important;
    }
}

/* Animation for smooth positioning changes */
.floating-chatbot {
    transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure proper stacking context */
.floating-chatbot,
.mobile-bottom-nav,
.agent-mobile-bottom-nav {
    isolation: isolate;
}

/* Fix for any potential backdrop-filter conflicts */
@media (max-width: 768px) {
    .floating-chatbot .chat-window {
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }
}

/* Ensure touch targets are accessible */
@media (max-width: 768px) {
    .floating-chatbot .chat-bubble {
        min-height: 56px !important;
        min-width: 56px !important;
        touch-action: manipulation !important;
    }
}

/* Handle landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .floating-chatbot {
        bottom: 72px !important; /* Reduced spacing in landscape */
    }

    .floating-chatbot .chat-window {
        max-height: calc(100vh - 120px) !important;
    }
}

/* Debug helper (remove in production) */
.floating-chatbot-debug {
    position: fixed;
    top: 10px;
    left: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    z-index: 9999;
    border-radius: 4px;
    display: none; /* Hidden by default */
}

/* Show debug info when needed */
.floating-chatbot-debug.show {
    display: block;
}

/* ===== MOBILE BOTTOM NAVIGATION Z-INDEX FIXES ===== */

/* Override SweetAlert2 z-index conflicts */
@media (max-width: 768px) {
    /* Ensure mobile nav is always visible */
    .mobile-bottom-nav,
    .agent-mobile-bottom-nav {
        z-index: 999999 !important; /* Match SweetAlert2 z-index */
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        display: flex !important;
    }

    /* Specific override for when SweetAlert2 is active */
    .swal2-container ~ .mobile-bottom-nav,
    .swal2-container ~ .agent-mobile-bottom-nav,
    body:has(.swal2-container) .mobile-bottom-nav,
    body:has(.swal2-container) .agent-mobile-bottom-nav {
        z-index: 999999 !important;
        position: fixed !important;
        bottom: 0 !important;
        display: flex !important;
    }

    /* Override when body has modal-open class */
    body.modal-open .mobile-bottom-nav,
    body.modal-open .agent-mobile-bottom-nav {
        z-index: 999999 !important;
        position: fixed !important;
        bottom: 0 !important;
        display: flex !important;
    }

    /* Ensure mobile nav items are clickable */
    .mobile-bottom-nav .mobile-nav-item,
    .agent-mobile-bottom-nav .mobile-nav-item {
        pointer-events: auto !important;
        z-index: 999999 !important;
        position: relative !important;
    }
}

/* Adjust floating chatbot z-index to be below mobile nav when needed */
@media (max-width: 768px) {
    body:has(.swal2-container) .floating-chatbot {
        z-index: 999998 !important; /* Just below mobile nav */
    }

    body.modal-open .floating-chatbot {
        z-index: 999998 !important; /* Just below mobile nav */
    }
}