/* ==========================================================
   AOTTAR AI RESPONSIVE OVERRIDES (v1.0.8)
   Breakpoints:
   - Laptop: 992px - 1200px
   - Tablet: 768px - 992px
   - Mobile: 480px - 768px
   - Small Mobile: < 480px
   - Extra Small Mobile: < 360px
   ========================================================== */

/* ==========================================================
   Laptops (992px - 1200px)
   ========================================================== */
@media screen and (max-width: 1200px) {
    #aottar-chat-window {
        width: 400px;
    }
}

/* ==========================================================
   Tablets (768px - 992px)
   ========================================================== */
@media screen and (max-width: 992px) {
    #aottar-chat-window {
        width: 380px;
        right: 24px !important;
        bottom: calc(var(--launcher-bottom) + 60px);
        max-height: calc(90vh - var(--launcher-bottom) - 70px);
    }
}

/* ==========================================================
   Mobile Devices & Tablets (under 768px)
   ========================================================== */
@media screen and (max-width: 768px) {
    /* Floating Button Stack Position for Mobile */
    #aottar-chat-launcher {
        right: 16px !important;
        bottom: var(--launcher-bottom-mobile) !important;
    }

    /* Launcher pill button compact on mobile */
    #aottar-chat-btn {
        height: 46px !important;
        width: 160px !important;
        min-width: 160px !important;
        padding: 0 12px 0 10px !important;
    }

    .launcher-icon-wrap {
        gap: 8px !important;
    }

    .icon-closed-group {
        gap: 8px !important;
    }

    /* Icon container 26px x 26px */
    .launcher-icon-container {
        width: 26px !important;
        height: 26px !important;
    }

    /* Chat icon: 16px */
    .launcher-bubble-icon {
        width: 16px !important;
        height: 16px !important;
    }

    .launcher-label {
        font-size: 14px;
        letter-spacing: 0.1px;
    }

    /* Active Launcher State (Turns to Close X circle) */
    #aottar-chat-btn.active {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }

    /* WhatsApp Button (Green) - Mobile */
    html body .joinchat,
    html body #joinchat {
        right: 16px !important;
        bottom: 78px !important; /* Launcher bottom (16px) + height (46px) + gap (16px) */
        width: 54px !important;
        height: 54px !important;
    }

    html body .joinchat__button {
        width: 54px !important;
        height: 54px !important;
    }

    html body .joinchat__button img,
    html body .joinchat__button svg {
        width: 26px !important;
        height: 26px !important;
    }

    /* Scroll-To-Top Button (White) - Mobile */
    html body .wd-scroll-top,
    html body .scrollToTop,
    html body #wd-scroll-top {
        right: 22px !important; /* Centered exactly above WhatsApp (WhatsApp right: 16, width: 54 -> center: 43. Collapse width: 42 -> right: 22 yields center: 43) */
        bottom: 148px !important; /* WhatsApp bottom (78px) + height (54px) + gap (16px) */
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
    }

    html body .wd-scroll-top svg,
    html body .scrollToTop svg {
        width: 16px !important;
        height: 16px !important;
    }

    html body .wd-scroll-top::after,
    html body .scrollToTop::after {
        font-size: 16px !important;
        line-height: 42px !important;
    }

    /* Chat Window Mobile Adaptation */
    #aottar-chat-window {
        width: calc(100vw - 32px);
        right: 16px !important;
        bottom: 74px; /* Positions above the mobile launcher */
        max-height: calc(90vh - 90px);
        border-radius: 16px;
    }

    .content {
        max-width: 85%;
    }

    .bubble {
        padding: 10px 14px;
        font-size: 13.5px;
    }
}

/* ==========================================================
   Standard Mobile Phones (under 480px)
   ========================================================== */
@media screen and (max-width: 480px) {
    #aottar-chat-window {
        width: calc(100vw - 24px);
        right: 12px !important;
        bottom: 70px;
    }

    .chat-header {
        height: 64px;
        padding: 0 16px;
    }

    .ai-logo {
        width: 36px;
        height: 36px;
    }

    .header-text h3 {
        font-size: 14.5px;
    }

    .chat-close-btn {
        font-size: 24px !important;
    }

    #chat-body {
        padding: 14px;
        gap: 12px;
    }

    .chat-input-wrapper {
        padding: 12px 16px;
    }

    .chat-input {
        padding: 4px 4px 4px 14px;
    }

    .chat-input input {
        font-size: 13px;
        height: 36px;
    }

    #aottar-send {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .product-card {
        margin: 6px 8px;
        padding: 10px;
        gap: 10px;
    }

    .product-image {
        width: 56px;
        height: 56px;
    }

    .product-info h4 {
        font-size: 12px;
    }
}

/* ==========================================================
   Extra Small Mobile Phones (under 360px)
   ========================================================== */
@media screen and (max-width: 360px) {
    #aottar-chat-window {
        width: calc(100vw - 16px);
        right: 8px !important;
        bottom: 64px;
    }

    #aottar-chat-btn {
        height: 44px !important;
        width: 144px !important;
        min-width: 144px !important;
        padding: 0 10px 0 8px !important;
    }

    /* Icon container 24px x 24px */
    .launcher-icon-container {
        width: 24px !important;
        height: 24px !important;
    }

    .launcher-bubble-icon {
        width: 14px !important;
        height: 14px !important;
    }

    .launcher-label {
        font-size: 12px;
    }

    /* Active Launcher State (Turns to Close X circle) */
    #aottar-chat-btn.active {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
    }

    /* WhatsApp Button - Extra Small Mobile */
    html body .joinchat,
    html body #joinchat {
        right: 12px !important;
        bottom: 68px !important; /* 12px bottom + 44px launcher + 12px gap */
        width: 50px !important;
        height: 50px !important;
    }

    html body .joinchat__button {
        width: 50px !important;
        height: 50px !important;
    }

    html body .joinchat__button img,
    html body .joinchat__button svg {
        width: 24px !important;
        height: 24px !important;
    }

    /* Scroll-To-Top Button - Extra Small Mobile */
    html body .wd-scroll-top,
    html body .scrollToTop,
    html body #wd-scroll-top {
        right: 18px !important; /* WhatsApp right: 12, width: 50 -> center: 37. Collapse width: 38 -> right: 18 yields center: 37 */
        bottom: 130px !important; /* 68px WhatsApp + 50px height + 12px gap */
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
    }

    html body .wd-scroll-top svg,
    html body .scrollToTop svg {
        width: 14px !important;
        height: 14px !important;
    }
}