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

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

.xai-chat {
  --xai-primary-color: #0084ff; /* Azul de Messenger */
  --xai-user-message-bg: var(--xai-primary-color);
  background-color: #ffffff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

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

.chat-header {
  background: #ffffff;
  color: #050505; /* Texto oscuro */
  border-bottom: 1px solid #e0e0e0;
}

.chat-header .chat-toggle,
.chat-header .chat-cart-link {
  color: var(--xai-primary-color);
}

.chat-header .chat-cart-count {
    border-color: #fff; /* Borde blanco para separarlo del ícono azul */
    background-color: #fa383e; /* Rojo de notificación */
}

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

.bot-message .message-content {
  background: #f0f2f5; /* Gris claro de Messenger */
  color: #050505;
}

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

.chat-footer {
  border-top: 1px solid #e0e0e0;
}

.chat-input {
  background-color: #f0f2f5;
  border-color: #f0f2f5;
}
.chat-input:focus {
  border-color: #d0d2d5;
  box-shadow: none;
}

.xai-action-btn {
  background-color: #ffffff;
  color: var(--xai-primary-color);
  border: 1px solid #cedee8;
  font-weight: 500;
  width: 90% !important;
}
.xai-action-btn:hover {
  background-color: #f0f2f5;
  border-color: #c0d3e0;
  color: #0084ff; /* <-- AÑADIDO: Asegura que el texto siga siendo azul */
}

.xai-action-btn.secondary {
  background-color: #e4e6eb;
  color: #050505;
  border-color: transparent;
}
.xai-action-btn.secondary:hover {
  background-color: #d8dadf;
  color: #050505; /* <-- AÑADIDO: Asegura que el texto siga siendo oscuro */
}

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

.xai-notification-bubble {
    background: #f0f2f5;
    color: #050505;
    border: 1px solid #ddd;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.xai-notification-bubble::after {
    border-top-color: #f0f2f5;
}
.xai-notification-bubble .xai-bubble-action-btn,
.xai-notification-bubble .xai-bubble-copy-btn {
    background-color: #e4e6eb;
    color: #050505;
}
/* --- Estilos para el Botón de Pago (Tema Messenger) --- */

.xai-payment-card .xai-payment-button {
    background-color: var(--xai-primary-color); /* Usa el azul de Messenger */
    color: white;
    border: none;
    transition: background-color 0.2s ease;
}

.xai-payment-card .xai-payment-button:hover {
    background-color: #006dc5; /* Un azul ligeramente más oscuro */
}