/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 03 2026 | 02:58:55 */
/* Añade aquí tu código CSS.

Por ejemplo:
.ejemplo {
    color: red;
}

Para mejorar tu conocimiento sobre CSS, echa un vistazo a https://www.w3schools.com/css/css_syntax.asp

Fin del comentario */ 
/* Esto afecta al div que contiene el chat, no al interior del iframe */
/* 1. Ocultar el icono SVG original de Chatbase */
#chatbase-bubble-button svg {
    display: none !important;
}

/* 2. Convertir el botón en un contenedor para tu imagen */
#chatbase-bubble-button {
    /* Mantenemos tu imagen */
    background-image: url('http://dev.capitaldieselsas.com/wp-content/uploads/2026/03/1948-scaled.jpg') !important;
    
    /* CAMBIO CLAVE AQUÍ: 'cover' hace que rellene todo el espacio */
    background-size: cover !important; 
    
    /* Centramos la imagen */
    background-position: center !important;
    background-repeat: no-repeat !important;
    
    /* Quitamos el fondo verde si tu imagen ya tiene fondo */
    background-color: transparent !important; 
    
    /* Aseguramos que sea un círculo perfecto */
    border-radius: 50% !important;
}

/* Ocultar el icono SVG original de Chatbase que pueda estar estorbando */
#chatbase-bubble-button svg {
    display: none !important;
}
/* 1. Resetear y aplicar la nueva animación */
#chatbase-bubble-button {
    animation: pro-ripple 3s infinite ease-in-out !important;
    /* Mantenemos tu fondo */
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

/* 2. Definición del efecto de "latido y halo" */
@keyframes pro-ripple {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(3, 145, 70, 0.4); 
    }
    50% { 
        transform: scale(1.05); /* Un ligero crecimiento elegante */
        box-shadow: 0 0 0 15px rgba(3, 145, 70, 0); /* El halo se expande y desaparece */
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 0 0 rgba(3, 145, 70, 0); 
    }
}

/* 3. Mejora visual al pasar el mouse (Hover) */
#chatbase-bubble-button:hover {
    animation: none !important; /* Detenemos la animación al pasar el mouse */
    transform: scale(1.15) !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Ocultar el icono SVG original de Chatbase que pueda estar estorbando */
#chatbase-bubble-button svg {
    display: none !important;
}

/* 3. Efecto al pasar el mouse */
#chatbase-bubble-button:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3) !important;
}