/* --- Animação Pulsante --- */
@keyframes cblc_pulsate {
    from { transform: scale(1); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
    to { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0,0,0,0.2); }
}

/* --- Estilo do Botão Flutuante --- */
#wa-float-button {
    position:fixed; bottom:25px; right:25px;
    background-color:#25D366; color:white;
    border-radius:50px; display:flex;
    align-items:center; justify-content:center;
    padding: 10px 18px; cursor:pointer;
    z-index:999; transition:all .3s ease;
    gap:8px; font-family:sans-serif;
    font-weight:bold; font-size:15px;
    animation: cblc_pulsate 1.5s infinite alternate ease-in-out;
}
#wa-float-button:hover{ transform:scale(1.1); }

/* --- Estilo do Modal (Janela de Chat) --- */
#wa-lead-modal { 
    display:none; position:fixed; z-index:1000; 
    left:0; top:0; width:100%; height:100%; 
    background-color:rgba(0,0,0,0.5); 
}
.wa-modal-content {
    position:absolute; bottom:95px; right:25px;
    background-color:#E5DDD5;
    margin:0; padding:0; border-radius:8px;
    width:90%; max-width:380px;
    box-shadow:0 6px 20px 0 rgba(0,0,0,0.19);
    animation:slideUp .4s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin:bottom right;
}

@keyframes slideUp { 
    from { transform:scale(0.8) translateY(10px); opacity:0 } 
    to { transform:scale(1) translateY(0); opacity:1 } 
}

/* --- Estilos internos do Modal --- */
.wa-modal-header {
    padding:10px 15px;
    background-color:#075E54;
    color:white;
    border-top-left-radius:8px;
    border-top-right-radius:8px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap: 12px; /* Adiciona espaço entre a foto e o texto */
}
.wa-modal-header .close{font-size:28px;font-weight:bold;cursor:pointer;line-height:1;}

/* NOVO: Estilos para a foto, nome e status do atendente */
.cblc-agent-photo {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid white;
    flex-shrink: 0;
}
.cblc-agent-info {
    flex-grow: 1; /* Faz esta div ocupar o espaço restante */
    text-align: left;
}
.cblc-agent-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: bold; /* Nome em negrito */
    display: flex; /* Adicionado para alinhar a bolinha */
    align-items: center; /* Adicionado para alinhar a bolinha */
}

/* NOVO: A bolinha verde de "online" */
.cblc-agent-info h3::after {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    background-color: #25D366; /* Verde brilhante do WhatsApp */
    border-radius: 50%;
    margin-left: 8px; /* Espaço entre o nome e a bolinha */
}

.cblc-agent-info p {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
    color: white; /* Garante que o status "online" seja branco */
}

.wa-modal-body{padding:20px;}
.wa-modal-body > p { /* Seletor mais específico para o subtítulo */
    color: #4a4a4a;
    margin-bottom: 15px;
}
.wa-modal-body input{width:100%;padding:10px;margin-bottom:10px;border:1px solid #128C7E;border-radius:4px;box-sizing:border-box;}
/* NOVO: Estilo para o campo quando está focado (selecionado) */
.wa-modal-body input:focus {
    border-color: #00A859; /* Cor verde suave para a borda */
    outline: none; /* Remove o brilho azul padrão do navegador */
    box-shadow: 0 0 0 3px rgba(0, 168, 89, 0.4); /* Adiciona um brilho verde suave */
}
.wa-modal-body button{width:100%;background-color:#128C7E;color:white;padding:12px 20px;border:none;border-radius:4px;cursor:pointer;font-size:16px;font-weight:bold;transition: background-color 0.2s ease;}
.wa-modal-body button:hover { background-color: #00A859; }

/* --- Estilo da Marca d'Água --- */
.cblc-branding {
    text-align: center;
    margin-top: 16px;
    font-size: 10px;
}
.cblc-branding a {
    color: #888;
    text-decoration: none;
    transition: color 0.2s ease;
}
.cblc-branding a:hover {
    color: #333;
}

/* --- Estilos para Validação --- */
.cblc-input-error {
    border-color: #d63638;
}
.cblc-error-message {
    color: #d63638;
    font-size: 12px;
    margin-top: -8px;
    margin-bottom: 10px;
}