/* ==========================================================
   Chat ENIS - Widget
========================================================== */

.chatenis-widget{

    position:fixed;
    z-index:999999;

}

.chatenis-widget.right{
    right:25px;
}

.chatenis-widget.left{
    left:25px;
}

/* ==========================================================
   Floating Button
========================================================== */

#chatenis-toggle{

    width:70px;
    height:70px;

    border:none;
    border-radius:50%;

    background:#25D366 !important;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    box-shadow:
    0 10px 25px rgba(37,211,102,.45),
    0 0 20px rgba(37,211,102,.35);

    transition:.3s;

    position:relative;

    overflow:visible;

}

#chatenis-toggle:hover{

    transform:scale(1.12);

}

#chatenis-toggle i{

    font-size:40px;

    color:#fff;

}
#chatenis-toggle::before{

    content:"";

    position:absolute;

    top:50%;
    left:50%;

    width:70px;
    height:70px;

    border-radius:50%;

    background:rgba(37,211,102,.28);

    transform:translate(-50%,-50%);

    z-index:-1;

    animation:ripple 2s infinite;

}

@keyframes ripple{

    0%{

        transform:translate(-50%,-50%) scale(1);

        opacity:.8;

    }

    70%{

        transform:translate(-50%,-50%) scale(1.8);

        opacity:.15;

    }

    100%{

        transform:translate(-50%,-50%) scale(2);

        opacity:0;

    }

}

/* ==========================================================
   Popup
========================================================== */

.chatenis-popup{

    display:none;

    width:320px;

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    margin-bottom:15px;

    box-shadow:0 20px 60px rgba(0,0,0,.18);

    animation:popup .35s cubic-bezier(.18,.89,.32,1.28);
    
    transition:all .3s ease;
}

@keyframes popup{

    0%{

        transform:translateY(20px) scale(.9);

        opacity:0;

    }

    100%{

        transform:translateY(0) scale(1);

        opacity:1;

    }

}
.chatenis-header{

    background:#25D366;

    color:#fff;

    padding:20px 18px;

    text-align:center;

}

.chatenis-header h3{

    margin:0;

    font-size:20px;

}

.chatenis-body{

    padding:20px;

    font-size:15px;

    color:#444;

    line-height:1.6;

}

.chatenis-status{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:15px;

    font-size:14px;

    color:#555;

    font-weight:500;

}

.online-dot{

    width:10px;

    height:10px;

    background:#25D366;

    border-radius:50%;

    animation:onlinePulse 1.8s infinite;

}

@keyframes onlinePulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.5);

    }

    100%{

        box-shadow:0 0 0 10px rgba(37,211,102,0);

    }

}

/* Footer */

.chatenis-footer{

    padding:20px;

    text-align:center;

}

/* WhatsApp Button */

.chatenis-chat-btn{

    display:block;

    background:#25D366 !important;

    color:#fff !important;

    text-decoration:none !important;

    padding:15px 18px;

    border-radius:10px;

    font-weight:600;

    box-shadow:0 8px 20px rgba(37,211,102,.30);

}

.chatenis-chat-btn:hover{

    opacity:.9;

}

/* ==========================================================
   Powered By
========================================================== */

/* Powered By */

.chatenis-powered{

    margin-top:12px;

    text-align:center;

    font-size:11px;

    color:#999;

    font-weight:400;

}

.chatenis-powered-link{

    color:#25D366;

    font-weight:600;

    cursor:pointer;

    transition:.25s ease;

    margin-left:4px;

}

.chatenis-powered-link:hover{

    color:#1fb85a;

    text-decoration:underline;

}
/* ==========================================================
   Animations
========================================================== */

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.6);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}

.bounce{

    animation:bounce 1.6s infinite;

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

}

.shake{

    animation:shake 1s infinite;

}

@keyframes shake{

    0%,100%{

        transform:rotate(0deg);

    }

    25%{

        transform:rotate(7deg);

    }

    75%{

        transform:rotate(-7deg);

    }

}

.glow{

    animation:glow 1.8s infinite;

}

@keyframes glow{

    0%{

        filter:drop-shadow(0 0 0px #25D366);

    }

    50%{

        filter:drop-shadow(0 0 15px #25D366);

    }

    100%{

        filter:drop-shadow(0 0 0px #25D366);

    }

}

/* ==========================================================
   Mobile
========================================================== */

@media(max-width:768px){

    .chatenis-popup{

        width:290px;

    }

}

@media(max-width:480px){

    .chatenis-widget{

        bottom:15px;

    }

    .chatenis-popup{

        width:270px;

    }

}