/* Tema WhatsApp para xAI Chatbot (Refinado v2) */

.xai-chat {
  background-color: #e5ddd5;
  background-image: url('../img/whatsapp-bg.png'); /* Asegúrate de tener la imagen en assets/img/ */
}

.xai-chat .chat-header {
  background: #075e54;
  color: white;
}

/* --- INICIO DE CORRECCIONES --- */

/* 1. Asegura que el contenedor del mensaje de USUARIO ponga el ícono a la derecha */
.user-message {
  flex-direction: row-reverse;
}

/* Se mantiene el del bot a la izquierda (comportamiento por defecto) */
.bot-message {
  flex-direction: row;
}

.user-message .message-content {
  background: #dcf8c6; /* Verde claro de la burbuja del usuario */
  color: #000;
  border-radius: 7px;
  position: relative; /* Necesario para posicionar la "flechita" */
}

/* 2. Corrige la posición y forma de la "flechita" (la cola de la burbuja) */
.user-message .message-content::after {
  content: '';
  position: absolute;
  bottom: 3px;      /* Posiciona la flecha cerca de la base */
  right: -7px;      /* La saca ligeramente de la burbuja */
  width: 0;
  height: 0;
  /* Técnica de bordes para crear un triángulo perfecto */
  border-top: 5px solid transparent;
  border-left: 8px solid #dcf8c6; /* El color coincide con la burbuja */
  border-bottom: 5px solid transparent;
}

/* --- FIN DE CORRECCIONES --- */


.bot-message .message-content {
  background: #fff; /* Blanco de la burbuja del bot */
  color: #000;
  border-radius: 7px;
}

/* Estilos para el área de entrada de texto */
.chat-input {
  background-color: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 20px;
  padding: 10px 15px;
}

/* Botón de enviar */
.chat-send {
  background: #075e54;
  color: white; /* Aseguramos que el ícono sea blanco */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex; /* Añadido */
  align-items: center; /* Añadido */
  justify-content: center; /* Añadido */
}
.chat-send:hover {
    background: #054d44;
}

/* Botones de acción (opciones rápidas) */
.xai-action-btn, a.xai-action-btn-link {
    background-color: #fff;
    color: #008273;
    border: 1px solid #d4d4d4;
    border-radius: 20px;
    font-weight: 500;
}
.xai-action-btn:hover, a.xai-action-btn-link:hover {
    background-color: #f5f5f5;
}
/* --- ESTILOS PARA BOTÓN SECUNDARIO --- */
.xai-action-btn.secondary {
    background-color: #f0f2f5; /* Un gris neutro claro */
    color: #54656f; /* Color de texto secundario de WhatsApp */
    border-color: transparent;
}

.xai-action-btn.secondary:hover {
    background-color: #e9edef; /* Un gris ligeramente más oscuro al pasar el mouse */
}