/* Estilos generales del contenedor en la esquina inferior derecha */
#chatbot-container {
    position: fixed;
    bottom: 30px;
    right: 40px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    z-index: 99999; /* Para asegurarnos que flote sobre todo en WordPress */
}

/* Botón flotante */
/* --- Estilos Actualizados para el Botón --- */

#chatbot-toggle-btn {
    background: none; /* Quitamos el fondo azul */
    color: white;
    border: none;
    padding: 0; /* Quitamos padding, usaremos el tamaño del robot */
    cursor: pointer;
    font-weight: bold;
    /* La sombra la ponemos en el contenedor del robot, no en el botón */
    transition: transform 0.2s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible; /* Importante para que el tooltip se vea */
}

/* Efecto hover en el robot entero */
#chatbot-toggle-btn:hover .chatbot-robot-head {
    transform: scale(1.10); /* El robot crece un poco */
}

/* --- Contenedor del Robot y Tooltip --- */
.chatbot-robot-head {
    background-color: transparent; /* O el color que quieras si el SVG es transparente */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Si querés que el robot esté en un círculo */
    padding: 10px; /* Espacio alrededor del SVG */
    background-color: #0073aa; /* Fondo para el robot */
    box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Sombra suave */
    position: relative; /* Para posicionar el tooltip */
    transition: transform 0.3s ease;
}

/* --- Estilos del Tooltip (Oculto por defecto) --- */
.chatbot-tooltip {
    visibility: hidden; /* Oculto */
    width: 160px; /* Ancho del mensaje */
    background-color: #333; /* Fondo oscuro (puedes usar el azul #0073aa si prefieres) */
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 10px;
    position: absolute;
    z-index: 100000; /* Asegurar que flote arriba */
    bottom: 125%; /* Posición arriba del robot */
    right: -20px; /* Ajuste horizontal */
    opacity: 0; /* Transparencia inicial */
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-size: 13px;
    pointer-events: none; /* Evitar que el tooltip interfiera con el mouse */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-family: inherit;
    /* Pequeño ajuste para animación */
    transform: translateY(10px);
}

/* Pequeña flecha del tooltip */
.chatbot-tooltip::after {
    content: "";
    position: absolute;
    top: 100%; /* Abajo del tooltip */
    left: 80%; /* Ajuste flecha */
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Flecha oscura */
}

/* --- Mostrar el Tooltip en HOVER --- */
#chatbot-toggle-btn:hover .chatbot-tooltip {
    visibility: visible;
    opacity: 1; /* Aparece */
    transform: translateY(0); /* Sube suavemente */
}
#chatbot-toggle-btn:hover { transform: scale(1.05); }

/* Ventana del Chat */
#chatbot-window {
    width: 350px;
    height: 450px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    bottom: 70px;
    right: 0;
    transition: all 0.3s ease;
}

/* Clase para ocultar elementos */
.hidden {
    display: none !important;
    opacity: 0;
    pointer-events: none;
}

/* Encabezado */
#chatbot-header {
    background-color: #0073aa;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#chatbot-header h3 { margin: 0; font-size: 16px; }
#chatbot-close-btn { background: none; border: none; color: white; cursor: pointer; font-size: 16px; }

/* Cuerpo de mensajes */
#chatbot-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background-color: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.message {
    padding: 10px 14px;
    border-radius: 15px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.4;
}
.bot-message { background-color: #e1f5fe; align-self: flex-start; color: #333; }
.user-message { background-color: #0073aa; color: white; align-self: flex-end; }

/* Área de opciones (Botones de guía) */
#chatbot-options {
    padding: 10px;
    background-color: #f9f9f9;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.option-btn {
    background-color: white;
    border: 1px solid #0073aa;
    color: #0073aa;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s;
}
.option-btn:hover { background-color: #0073aa; color: white; }

/* Input de texto inferior */
#chatbot-input-area {
    display: flex;
    border-top: 1px solid #eee;
    padding: 10px;
    background: white;
}
#chatbot-input { flex: 1; border: 1px solid #ddd; padding: 8px; border-radius: 4px; outline: none; }
#chatbot-send-btn { background-color: #0073aa; color: white; border: none; padding: 8px 15px; margin-left: 5px; border-radius: 4px; cursor: pointer; }