/* Definición de variables CSS globales */
:root {
    /* Estas son las variables por defecto. JavaScript las sobrescribirá con los valores de los ajustes. */
    --mibot-primary-color: #007bff; /* Color principal (azul por defecto) */
    --mibot-secondary-color: #f0f0f0; /* Color secundario (gris claro por defecto) */
    --mibot-text-color: #333333; /* Color de texto general (gris oscuro por defecto) */
    --mibot-link-color: #0056b3; /* Color de enlaces (azul oscuro por defecto) */
    --mibot-input-area-bg-color: #ffffff; /* Color de fondo área de input (blanco por defecto) */
    --mibot-actions-area-bg-color: #ffffff; /* Color de fondo área de acciones (blanco por defecto) */

    /* Nuevas variables para tamaño de fuente */
    --mibot-assistant-name-font-size: 1.1em; /* Por defecto */
    --mibot-chat-base-font-size: 0.9em;      /* Por defecto */
	
	/* NUEVAS VARIABLES: Colores de mensajes */
    --mibot-user-message-bg-color: #e0e0e0; /* Fondo de mensajes del usuario */
    --mibot-user-message-text-color: #333333; /* Texto de mensajes del usuario */
    --mibot-bot-message-bg-color: #007bff; /* Fondo de mensajes del bot */
    --mibot-bot-message-text-color: #ffffff; /* Texto de mensajes del bot */
}

/* Estilos del icono del chatbot */
#mibot-chatbot-icon {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--mibot-primary-color); /* Usa la variable de color principal */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    transition: transform 0.3s ease;
}
#mibot-chatbot-icon img {
    width: 40px;
    height: 40px;
}
#mibot-chatbot-icon.mibot-open {
    transform: scale(0); /* Oculta el icono cuando la ventana está abierta */
}


/* Estilos de la ventana del chatbot */
#mibot-chatbot-window {
    position: fixed;
    bottom: 90px; /* Ajustado para estar por encima del icono */
    right: 20px;
    width: 350px; /* Ancho de la ventana */
    height: 500px; /* Alto de la ventana */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 999;
    transform: translateY(100%) scale(0.5); /* Empieza abajo y pequeño */
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0.4s;
    transform-origin: bottom right; /* La transformación se origina desde la esquina inferior derecha */
    font-size: var(--mibot-chat-base-font-size); /* Aplica el tamaño de fuente base a todo el chat */
}
#mibot-chatbot-window.mibot-open {
    transform: translateY(0) scale(1); /* Se mueve a su posición y tamaño normal */
    opacity: 1;
    visibility: visible;
}

/* Cabecera del chat */
.mibot-chat-header {
    background-color: var(--mibot-primary-color); /* Usa la variable de color principal */
    color: white;
    padding: 15px;
    font-size: 1.1em; /* Esto es un fallback, el h3 lo sobrescribe */
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.mibot-chat-header h3 {
    margin: 0;
    color: inherit; /* Hereda el color blanco de la cabecera */
    font-size: var(--mibot-assistant-name-font-size); /* Usa la variable de tamaño de fuente del asistente */
}
.mibot-close-button {
    background: none;
    border: none;
    color: white;
    font-size: 1.5em;
    cursor: pointer;
    line-height: 1;
}

/* Área de mensajes */
.mibot-chat-messages {
    flex-grow: 1; /* Ocupa el espacio restante */
    padding: 15px;
    overflow-y: auto; /* Permite scroll vertical */
    background-color: #f9f9f9; /* Fondo ligero para los mensajes */
    border-bottom: 1px solid #eee;
    color: var(--mibot-text-color); /* Color de texto general para los mensajes */
	display: flex;
    flex-direction: column;
}

/* Mensajes individuales */
.mibot-message {
    max-width: 80%;
    padding: 10px 12px;
    border-radius: 15px;
    margin-bottom: 10px;
    line-height: 1.4;
    word-wrap: break-word; /* Asegura que el texto largo se ajuste */
    font-size: 1em; /* Hereda el tamaño base de #mibot-chatbot-window */
}
/* Estilos para los mensajes del usuario */
.mibot-message.mibot-user {
    align-self: flex-end; /* Alinea a la derecha */
    background-color: var(--mibot-user-message-bg-color); /* CAMBIO/AÑADIDO */
    color: var(--mibot-user-message-text-color); /* CAMBIO/AÑADIDO */
    border-bottom-right-radius: 4px; /* Esquina inferior derecha menos redondeada */
}

/* Estilos para los mensajes del bot (Gemini) */
.mibot-message.mibot-gemini {
    align-self: flex-start; /* Alinea a la izquierda */
    background-color: var(--mibot-bot-message-bg-color); /* CAMBIO/AÑADIDO */
    color: var(--mibot-bot-message-text-color); /* CAMBIO/AÑADIDO */
    border-bottom-left-radius: 4px; /* Esquina inferior izquierda menos redondeada */
}

/* Estilo para enlaces dentro de los mensajes */
.mibot-message a {
    color: var(--mibot-link-color); /* Usa la variable de color de enlaces */
    text-decoration: underline;
}


/* Animación de "Escribiendo..." */
.mibot-chat-typing-indicator {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 10px;
    height: 20px; /* Altura para los puntos */
    opacity: 0;
    transition: opacity 0.3s ease;
}
.mibot-chat-typing-indicator.active {
    opacity: 1;
}
.mibot-dot {
    width: 8px;
    height: 8px;
    background-color: var(--mibot-text-color); /* Usa el color de texto para los puntos */
    border-radius: 50%;
    margin: 0 2px;
    animation: bounce 0.8s infinite ease-in-out;
}
.mibot-dot:nth-child(2) {
    animation-delay: 0.1s;
}
.mibot-dot:nth-child(3) {
    animation-delay: 0.2s;
}
@keyframes bounce {
    0%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-8px);
    }
}

/* Área de entrada de texto */
.mibot-chat-input-area {
    display: flex;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    background-color: var(--mibot-input-area-bg-color); /* Usa la variable de color de fondo del área de input */
}
.mibot-chat-input-area #mibot-chat-input {
    flex-grow: 1;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 8px 15px;
    font-size: 1em; /* Hereda el tamaño base de #mibot-chatbot-window */
    margin-right: 10px;
    outline: none;
    color: var(--mibot-text-color); /* Usa la variable de color de texto */
}
.mibot-chat-input-area #mibot-chat-input::placeholder {
    color: #aaa;
}
.mibot-chat-input-area #mibot-send-message {
    background-color: var(--mibot-primary-color); /* Usa la variable de color principal */
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    /* Icono de flecha SVG o Dashicon */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
}
.mibot-chat-input-area #mibot-send-message:hover {
    filter: brightness(1.1);
}

/* Área de acciones (botón "Terminar Conversación") */
.mibot-chat-actions {
    padding: 10px 15px;
    background-color: var(--mibot-actions-area-bg-color); /* Usa la variable de color de fondo del área de acciones */
    border-top: 1px solid #eee;
    text-align: center;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#mibot-end-conversation {
    background-color: #dc3545; /* Rojo para botón de terminar */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 15px;
    cursor: pointer;
    font-size: 1em; /* Hereda el tamaño base de #mibot-chatbot-window */
    transition: background-color 0.2s ease;
}
#mibot-end-conversation:hover {
    background-color: #c82333;
}