:root {
    --wls-green: #48b14c;
    --wls-bg: #f0f2f5;
    --wls-white: #ffffff;
}

#wls-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999999;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px; /* Fonte aumentada conforme solicitado */
}

#wls-chat-window {
    display: none;
    width: 400px;
    height: 500px;
    background: var(--wls-bg);
    border-radius: 15px;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    overflow: hidden;
    position: absolute;
    bottom: 0px;
    right: 0;
}

#wls-header {
    background: var(--wls-green);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wls-profile { display: flex; align-items: center; gap: 10px; }
.wls-profile img { width: 45px; height: 45px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3); }
.wls-info strong { display: block; font-size: 16px; }
.wls-info span { font-size: 12px; opacity: 0.9; }

#wls-close-btn { 
    background: none; border: none; color: white; 
    /*border-radius: 50%; width: 28px; height: 28px; */
    cursor: pointer; font-size: 20px; font-weight: bold;
}
#wls-close-btn:hover { 
    border:none;
}
#wls-body { padding: 15px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.wls-msg { max-width: 90%; padding: 15px; border-radius: 12px; font-size: 18px; line-height: 1.5; color: #333; }
.wls-msg.bot { background: white; align-self: flex-start; box-shadow: 0 2px 5px rgba(0,0,0,0.05); font-size: 14px;}
.wls-msg.user { background: var(--wls-green); color: white; align-self: flex-end; }

.wls-main-btn {
    background: var(--wls-green);
    color: white; border: none;
    padding: 15px 30px; border-radius: 30px;
    font-weight: bold; font-size: 16px;
    cursor: pointer; margin-top: 15px;
    display: block; width: fit-content;
}

/* PREFIXO BANDEIRA */
#wls-input-container { padding: 10px; background: white; display: flex; align-items: center; gap: 8px; border-top: 1px solid #eee; }
#wls-phone-prefix {
    display: flex; align-items: center; gap: 5px;
    background: #f0f0f0; padding: 5px 10px;
    border-radius: 15px; font-size: 14px; font-weight: bold;
    border: 1px solid #ddd;
}
@keyframes wlsFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px); /* Começa 30px abaixo */
    }
    100% {
        opacity: 1;
        transform: translateY(0);    /* Termina na posição original */
    }
}
#wls-input { flex: 1; border: 1px solid #ddd; padding: 10px 15px; border-radius: 20px; outline: none; font-size: 16px; }
#wls-send { background: none; border: none; color: var(--wls-green); font-size: 24px; cursor: pointer; }

#wls-launcher { display: flex; align-items: center; gap: 15px; cursor: pointer; animation: wlsFadeUp 0.8s ease-out forwards;
    
    /* Garante que o navegador trate a animação de forma fluida */
    backface-visibility: hidden;
    will-change: transform, opacity;}
.wls-launcher-text { background: white; padding: 12px; border-radius: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); font-size: 15px; width: 250px; color:#333;}
.wls-launcher-img { position: relative; width: 70px; height: 70px; }
.wls-launcher-img img { width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--wls-green); }
.wls-online-dot { position: absolute; bottom: 3px; right: 3px; width: 14px; height: 14px; background: #4CAF50; border: 2px solid white; border-radius: 50%; }

@media (max-width: 768px) {
    #wls-chat-window { position: fixed !important; top: 0; left: 0; width: 100vw; height: 100vh; border-radius: 0; bottom: 0; z-index: 10000; }

}
/* Container das bolinhas */
.wls-typing {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
}

.wls-typing span {
    width: 8px;
    height: 8px;
    background-color: #999;
    border-radius: 50%;
    display: inline-block;
    animation: wls-bounce 1.3s infinite ease-in-out both;
}
/* FORÇAR NEGRITO */
.wls-bold-text {
    font-weight: 800 !important; 
    color: inherit;
}
/* Delay individual para cada bolinha */
.wls-typing span:nth-child(1) { animation-delay: -0.32s; }
.wls-typing span:nth-child(2) { animation-delay: -0.16s; }

@keyframes wls-bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* Ajuste no balão do bot para a animação */
.wls-msg.bot.typing-bubble {
    padding: 12px 15px;
    min-width: 60px;
    width: fit-content;
}