/* ==========================================================================
   Tema: WhatsApp para Glifo Chatbot
   ========================================================================== */

/* --- 1. Colores y Fondo Principal --- */

.xai-chat {
  --xai-primary-color: #075e54; /* Verde oscuro de WhatsApp */
  --xai-user-message-bg: #dcf8c6; /* Verde claro para los mensajes del usuario */
  background-color: #transparent !important;
}

/* --- 2. Encabezado (Header) --- */

.chat-header {
  background-color: var(--xai-primary-color);
}

/* --- 3. Burbujas de Mensaje --- */

.bot-message .message-content {
  background-color: #ffffff;
  color: var(--xai-text-color-dark);
  border-radius: 7px;
  position: relative; /* Añadido para posicionar la cola */
}

/* Flecha/cola de la burbuja del bot */
.bot-message .message-content::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 8px solid #ffffff;
  border-bottom: 5px solid transparent;
}

.user-message .message-content {
  background-color: var(--xai-user-message-bg);
  color: var(--xai-text-color-dark);
  border-radius: 7px;
  position: relative;
}

/* Flecha/cola de la burbuja del usuario */
.user-message .message-content::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: -7px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 8px solid var(--xai-user-message-bg);
  border-bottom: 5px solid transparent;
}

.user-message .message-timestamp {
  color: rgba(0, 0, 0, 0.45); /* Color de la hora en mensajes de usuario */
}

/* --- 4. Pie de página y Botones --- */

.chat-input {
  background-color: #ffffff;
  border-color: #f0f0f0;
}

.chat-send {
  background-color: var(--xai-primary-color);
}
.chat-send:hover {
  background-color: #054d44; /* Verde más oscuro al pasar el mouse */
}

/* --- BOTÓN PRIMARIO (Acción Principal / CTA) --- */
/* Estilo WhatsApp: Verde sólido característico */
.xai-action-btn {
    background-color: #00a884; /* Verde WhatsApp */
    color: #ffffff;            /* Texto blanco */
    border: none;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease;
}

.xai-action-btn:hover {
    background-color: #008f6f; /* Verde más oscuro */
    color: #ffffff;
    transform: translateY(-1px);
}

/* --- BOTÓN SECUNDARIO (Navegación / Cancelar) --- */
/* Estilo WhatsApp: Fondo gris claro, texto gris oscuro */
.xai-action-btn.secondary {
    background-color: #f0f2f5; 
    color: #54656f;            
    border: 1px solid transparent; 
    box-shadow: none;
}

.xai-action-btn.secondary:hover {
    background-color: #e9edef;
    color: #111b21;            /* Texto casi negro al hover */
    border-color: #d1d7db;
}

/* --- 5. Burbuja de Notificación --- */

.xai-notification-bubble {
    background: #e0fecb;
    color: black !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.xai-notification-bubble::after {
    border-top-color: #e0fecb;
}

/* Aseguramos el fondo y el color de texto base para el tema WhatsApp */
.xai-chat.theme-whatsapp .xai-notification-bubble {
    background: #e0fecb !important; /* Fondo verde claro */
    color: #111b21 !important;      /* Texto oscuro */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.xai-notification-bubble .xai-bubble-action-btn,
.xai-notification-bubble .xai-bubble-copy-btn {
    background-color: #fff;
    color: #008069;
    border: 1px solid #d4d4d4;
}
/* --- Estilos para el Botón de Pago (Tema WhatsApp) --- */

.xai-payment-card .xai-payment-button {
    background-color: #25d366; /* Verde de acción de WhatsApp */
    color: black;
    border: none;
    transition: background-color 0.2s ease;
}

.xai-payment-card .xai-payment-button:hover {
    background-color: #1ebe57; /* Un verde ligeramente más oscuro */
}

/* --- AJUSTE TAMAÑO Y FORMA AVATAR TEMA WHATSAPP --- */

/* --- Forzar Contraste en Notificación (WhatsApp) --- */
.xai-chat.theme-whatsapp .xai-notification-bubble,
.xai-chat.theme-whatsapp .xai-notification-bubble .xai-bubble-text,
.xai-chat.theme-whatsapp .xai-notification-bubble strong {
    color: #111b21 !important; /* Negro/Gris muy oscuro de WhatsApp */
}

/* --- TYPING EN TEMA WHATSAPP: Fondo gris claro --- */
.xai-chat.theme-whatsapp .typing-animation .message-content {
  background: #f0f0f0 !important;
}