/* ===================================
   CHAT & MODAL Z-INDEX FIXES
   =================================== */

/* Ensure products modal appears above chat widget */
.ai-products-modal {
    z-index: 999999 !important; /* Higher than chat */
}

/* Chat widget should be below modal */
#convertybot-widget {
    z-index: 999998;
}

#convertybot-chat-button {
    z-index: 999998;
}

/* Hide chat widget when modal is open (optional - for better UX) */
body.ai-modal-open #convertybot-widget {
    opacity: 0.3;
    pointer-events: none;
}

body.ai-modal-open #convertybot-chat-button {
    opacity: 0.3;
    pointer-events: none;
}

/* ===================================
   CHAT WIDGET MOBILE IMPROVEMENTS
   =================================== */

@media (max-width: 768px) {
    /* Chat widget adjustments for mobile */
    #convertybot-widget {
        bottom: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }

    /* Chat button smaller on mobile */
    #convertybot-chat-button {
        width: 56px !important;
        height: 56px !important;
        bottom: 16px !important;
        right: 16px !important;
    }

    /* Chat header smaller text */
    #convertybot-widget .chat-header h3 {
        font-size: 16px !important;
    }

    /* Messages smaller text */
    #convertybot-widget .message-text {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    /* Input area adjustments */
    #convertybot-widget .chat-input-area {
        padding: 10px !important;
    }

    #convertybot-widget .chat-input {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }

    #convertybot-widget .send-button {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Product cards in chat - smaller */
    #convertybot-widget .product-card {
        font-size: 12px !important;
    }

    #convertybot-widget .product-card h5 {
        font-size: 13px !important;
    }

    #convertybot-widget .product-card .price {
        font-size: 14px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    /* Even smaller button */
    #convertybot-chat-button {
        width: 50px !important;
        height: 50px !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    /* Smaller text */
    #convertybot-widget .message-text {
        font-size: 13px !important;
    }

    #convertybot-widget .chat-input {
        font-size: 13px !important;
    }
}

/* ===================================
   SMOOTH TRANSITIONS
   =================================== */

#convertybot-widget,
#convertybot-chat-button {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ai-products-modal {
    transition: opacity 0.3s ease;
}