/* ===================================
   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 BUTTON WHEN CHAT IS OPEN
   =================================== */
#convertybot-chat-button.convertybot-hidden {
    display: none !important;
}

/* 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) {
    /* Widget container - BOTTOM RIGHT CORNER ONLY */
    #convertybot-widget {
        bottom: 10px !important;
        right: 10px !important;
        left: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
    }

    /* Chat window - SMALL, BOTTOM RIGHT, NOT FULL WIDTH */
    .convertybot-chat-window {
        position: fixed !important;
        bottom: 60px !important;
        right: 10px !important;
        left: auto !important; /* NOT from left - stay right */
        top: auto !important;
        width: 280px !important; /* Fixed small width */
        max-width: 85vw !important; /* Never more than 85% of viewport */
        height: 45vh !important;
        max-height: 320px !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
        overflow: hidden !important;
    }

    /* Chat button - small circle on mobile */
    #convertybot-chat-button {
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* Hidden button */
    #convertybot-chat-button.convertybot-hidden {
        display: none !important;
    }

    #convertybot-chat-button .chat-button-text {
        display: none !important;
    }

    #convertybot-chat-button svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Chat header - very compact */
    .convertybot-chat-header {
        padding: 6px 8px !important;
    }

    .convertybot-chat-header h4 {
        font-size: 11px !important;
    }

    .convertybot-header-info {
        gap: 4px !important;
    }

    .convertybot-avatar {
        width: 18px !important;
        height: 18px !important;
    }

    .convertybot-avatar svg {
        width: 10px !important;
        height: 10px !important;
    }

    .convertybot-status {
        font-size: 8px !important;
    }

    .status-indicator {
        width: 5px !important;
        height: 5px !important;
    }

    .convertybot-minimize {
        width: 20px !important;
        height: 20px !important;
        padding: 3px !important;
    }

    .convertybot-minimize svg {
        width: 10px !important;
        height: 10px !important;
    }

    /* Messages area - very compact */
    .convertybot-chat-messages {
        padding: 6px !important;
    }

    .convertybot-message {
        gap: 4px !important;
        margin-bottom: 6px !important;
    }

    .message-avatar {
        width: 15px !important;
        height: 15px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
    }

    .message-avatar svg {
        width: 9px !important;
        height: 9px !important;
    }

    .message-content {
        max-width: calc(100% - 10px) !important;
    }

    /* IMPORTANT: Use high specificity to override desktop styles */
    .convertybot-message.bot .message-bubble,
    .convertybot-message.user .message-bubble,
    .message-bubble {
        padding: 4px 6px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
        border-radius: 8px !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .convertybot-message .message-bubble strong,
    .message-bubble strong {
        font-size: 9px !important;
    }

    .convertybot-message .message-bubble p,
    .message-bubble p {
        font-size: 9px !important;
        margin: 2px 0 !important;
    }

    .convertybot-message .message-bubble ul,
    .message-bubble ul {
        margin: 2px 0 !important;
        padding-left: 12px !important;
    }

    .convertybot-message .message-bubble li,
    .message-bubble li {
        font-size: 9px !important;
        margin: 1px 0 !important;
    }

    .message-time {
        font-size: 8px !important;
        margin-top: 2px !important;
    }

    /* Input area - very compact */
    .convertybot-chat-input {
        padding: 5px 6px !important;
        border-top: 1px solid #e0e0e0 !important;
    }

    .convertybot-chat-input form {
        gap: 4px !important;
        display: flex !important;
        align-items: center !important;
    }

    .convertybot-chat-input textarea,
    .convertybot-chat-input input {
        font-size: 11px !important;
        padding: 5px 8px !important;
        min-width: 0 !important;
        flex: 1 !important;
        border-radius: 14px !important;
        min-height: 26px !important;
        max-height: 50px !important;
    }

    .convertybot-chat-input button {
        padding: 5px !important;
        min-width: 26px !important;
        width: 26px !important;
        height: 26px !important;
        flex-shrink: 0 !important;
        border-radius: 50% !important;
    }

    .convertybot-chat-input button svg {
        width: 12px !important;
        height: 12px !important;
    }

    /* Product cards in chat - ultra compact */
    .ai-products-inline {
        padding: 5px !important;
        margin-top: 5px !important;
        gap: 4px !important;
        background: #f5f5f5 !important;
        border-radius: 6px !important;
    }

    .ai-product-card-inline {
        padding: 4px !important;
        border-radius: 4px !important;
    }

    .product-inline-content {
        gap: 4px !important;
    }

    .product-inline-header {
        gap: 6px !important;
    }

    .product-inline-image {
        width: 30px !important;
        height: 30px !important;
        border-radius: 3px !important;
    }

    .product-inline-title h5 {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* Show product details on mobile with compact size */
    .product-inline-details {
        display: block !important;
        padding: 2px 0 !important;
    }

    .product-inline-rating {
        display: flex !important;
        font-size: 8px !important;
        gap: 2px !important;
        margin-bottom: 2px !important;
    }

    .product-inline-rating .stars {
        font-size: 8px !important;
    }

    .product-inline-rating .reviews {
        font-size: 7px !important;
    }

    .product-inline-description {
        font-size: 7px !important;
        line-height: 1.2 !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .product-inline-footer {
        gap: 4px !important;
    }

    .product-inline-price {
        font-size: 9px !important;
    }

    .product-inline-link {
        padding: 2px 5px !important;
        font-size: 8px !important;
        border-radius: 3px !important;
    }

    .ai-more-products-btn {
        padding: 4px 8px !important;
        font-size: 8px !important;
        border-radius: 8px !important;
    }

    /* Suggestion chips - ultra compact, no horizontal scroll */
    .message-suggestions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 2px !important;
        margin-top: 3px !important;
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .suggestion-chip {
        font-size: 7px !important;
        padding: 2px 4px !important;
        border-radius: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 1 !important;
        max-width: 80px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Coupon cards - ultra compact */
    .ai-coupons-container {
        margin-top: 5px !important;
        gap: 4px !important;
    }

    .ai-coupon-card {
        padding: 5px !important;
    }

    .coupon-badge {
        font-size: 8px !important;
        padding: 2px 4px !important;
    }

    .coupon-title {
        font-size: 10px !important;
    }

    .coupon-description {
        font-size: 8px !important;
    }

    .coupon-code {
        font-size: 9px !important;
    }

    .coupon-copy-btn {
        padding: 3px 6px !important;
        font-size: 8px !important;
    }
}

/* Small phones - even more compact */
@media (max-width: 380px) {
    .convertybot-chat-window {
        width: 260px !important;
        height: 40vh !important;
        max-height: 280px !important;
        bottom: 55px !important;
    }

    .convertybot-message.bot .message-bubble,
    .convertybot-message.user .message-bubble,
    .message-bubble {
        font-size: 9px !important;
        padding: 4px 6px !important;
    }

    .product-inline-image {
        width: 25px !important;
        height: 25px !important;
    }

    .product-inline-title h5 {
        font-size: 8px !important;
    }

    .convertybot-chat-input textarea,
    .convertybot-chat-input input {
        font-size: 10px !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;
}