/* ================= MAIN CONTAINER ================= */

#wgs-websocle {
    position: fixed;
    bottom: 20px;
    z-index: 10001;
}

/* Positioning */
.wgs-chatbot-right {
    right: 20px;
}

.wgs-chatbot-left {
    left: 20px;
}


/* ================= ICON (TOP) ================= */

.wgs-chat-icon {
    bottom: 120px;
    position: relative;
    z-index: 2;

    background: #fff;
    border-radius: 50%;
    padding: 12px;

    border: 2px solid #fe5810;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);

    cursor: pointer;

    animation: pulse 2s infinite;
    transition: transform 0.2s ease;
}

.wgs-chat-icon:hover {
    transform: scale(1.1);
}

.wgs-chat-icon img {
    width: 24px;
}


/* ================= CARD (BELOW ICON) ================= */

.websocle-bgc {
    position: absolute;
    bottom: 50px;
    right: -30px;

    opacity: 0;
    transform: translateY(10px);

    transition: all 0.3s ease;
}

.websocle-bgc img {
    width: 170px;
    border-radius: 16px;
}


/* ================= SHOW ON HOVER ================= */

#wgs-websocle:hover .websocle-bgc {
    opacity: 1;
    transform: translateY(0);
}


/* ================= PULSE ================= */

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(254, 88, 16, 0.5);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(254, 88, 16, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(254, 88, 16, 0);
    }
}


/* ================= RESPONSIVE ================= */

@media(max-width: 1365px) {
    #wgs-websocle.wgs-chatbot-right {
        right: 2%;
    }

    #wgs-websocle.wgs-chatbot-left {
        left: 2%;
    }
}