body {
    overflow-y: auto !important; /* Permite scroll en el body para ocultar la barra */
}
/* ==========================================================================
   Glifo Chatbot - Hoja de Estilos Principal (Refactorizada)
   ========================================================================== */

/* --- 1. Estructura Principal del Chat --- */

.xai-chat {
  /* Variables de Color para facilitar la creación de temas */
  --xai-primary-color: #007bff; /* Azul por defecto */
  --xai-user-message-bg: var(--xai-primary-color);
  --xai-light-bg: #f8f9fa;
  --xai-border-color: #e9ecef;
  --xai-text-color-dark: #212529;
  --xai-text-color-light: #6c757d;

  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 360px;
  max-width: 90vw;
  background: transparent !important;
  border-radius: 12px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.15);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.xai-chat.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Esta regla se aplica cuando el JS añade la clase .full-screen */
.xai-chat.full-screen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0 !important;
    box-shadow: none;
    z-index: 100000; /* Un z-index ligeramente mayor para asegurar que esté por encima de todo */
}

/* Pega este nuevo bloque justo después del anterior */

/* --- INICIO: Corrección de Bordes en Pantalla Completa --- */
/* Anula los bordes redondeados de la cabecera en modo full-screen */
.xai-chat.full-screen .chat-header {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    font-size: .9em;
}

/* Anula los bordes redondeados del pie de página y del disclaimer en modo full-screen */
.xai-chat.full-screen .chat-footer,
.xai-chat.full-screen .xai-disclaimer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
/* --- FIN: Corrección de Bordes en Pantalla Completa --- */

.xai-chat-minimized {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--xai-primary-color);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 99999;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.8);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.xai-chat-minimized:hover {
    transform: scale(1.1);
}

.xai-chat-minimized.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.minimized-profile-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- INICIO: ESTILOS BASE DE LA BURBUJA DE NOTIFICACIÓN --- */

.xai-notification-bubble {
    position: fixed;
    right: 20px; /* Se alinea con el chat */
    bottom: 90px; /* JS lo ajustará, pero este es un buen default */
    width: 320px;
    max-width: calc(100vw - 40px);
    background-color: #ffffff;
    color: #333;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e0e0e0;
    z-index: 99998; /* Justo debajo del chat (99999) */

    /* Animación */
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.xai-notification-bubble.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Cola de la burbuja */
.xai-notification-bubble::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 28px;
    width: 0; 
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ffffff; /* Debe coincidir con el background-color */
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.05));
}

/* Contenido interno */
.xai-bubble-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.xai-bubble-text {
    flex-grow: 1;
    font-size: 0.95em;
    line-height: 1.5;
}

.xai-bubble-text strong {
    color: #000;
}

/* Botones de acción dentro de la burbuja */
.xai-bubble-action-btn,
.xai-bubble-link-btn,
.xai-bubble-copy-btn,
.xai-bubble-open-chat-btn {
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 0.9em;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid var(--xai-primary-color, #007bff);
    background-color: var(--xai-primary-color, #007bff);
    color: #ffffff;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.xai-bubble-action-btn:hover,
.xai-bubble-link-btn:hover,
.xai-bubble-copy-btn:hover,
.xai-bubble-open-chat-btn:hover {
    opacity: 0.85;
}

/* --- FIN: ESTILOS BASE DE LA BURBUJA DE NOTIFICACIÓN --- */

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

.chat-header {
  background: var(--xai-primary-color);
  color: white;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1em;
  position: relative;
}

.chat-header-title {
    flex-grow: 1;
    text-align: center;
    margin: 0 10px;
}
.chat-maximize {
  display: none;
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  padding: 0 5px;
  line-height: 1;
}

.chat-toggle {
  cursor: pointer;
  font-size: 24px;
  font-weight: bold;
  padding: 0 5px;
  line-height: 1;
}

.chat-header .chat-cart-link {
    color: white;
    text-decoration: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
}

.chat-header .chat-cart-link svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* --- INICIO: Corrección para Círculo Perfecto en Contador de Carrito --- */
.chat-header .chat-cart-count {
    position: absolute;
    top: -4px;
    right: -8px;
    background-color: #28a745;
    color: white;
    border-radius: 50%; /* Esto se mantiene, es correcto */
    font-size: 11px;
    font-weight: bold;
    border: 2px solid var(--xai-primary-color);

    /* Reglas clave para la forma y centrado */
    min-width: 20px;         /* Ancho mínimo del círculo */
    height: 20px;            /* Alto IGUAL al ancho mínimo */
    padding: 0;              /* Quitamos el padding desigual */
    display: flex;           /* Usamos Flexbox para centrar el número */
    justify-content: center; /* Centrado horizontal */
    align-items: center;     /* Centrado vertical */
    box-sizing: border-box;  /* Asegura que el borde no altere el tamaño */
}
/* --- FIN: Corrección --- */

/* --- 3. Cuerpo y Mensajes --- */

.chat-body {
  flex-grow: 1;
  max-height: 500px;
  min-height: 200px;
  overflow-y: auto;
  padding: 16px;
  background: #f4f7f9;
  border-top: 1px solid var(--xai-border-color);
  border-bottom: 1px solid var(--xai-border-color);
}

.user-message, .bot-message {
  display: flex;
  align-items: flex-end; /* Alinea los avatares al final del globo */
  margin-bottom: 12px;
  max-width: 95%; /* Limita el ancho del mensaje */
}

/* Mensajes del BOT: Alineados a la izquierda */
.bot-message {
  margin-right: auto; /* Empuja el mensaje a la izquierda */
  flex-direction: row; /* Avatar a la izquierda, globo a la derecha */
}

/* Mensajes del USUARIO: Alineados a la derecha */
.user-message {
  margin-left: auto; /* Alinea a la derecha */
  flex-direction: row-reverse; /* Invierte: globo a la izquierda del avatar */
  align-items: flex-end;
}

.bot-message .message-content {
  background: #e9ecef;
  color: var(--xai-text-color-dark);
  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: visible !important;
  padding: 10px 14px 22px 14px;
  min-width: 85px;
  text-align: left; /* <-- CORRECCIÓN: Alinea el texto a la izquierda */
}

.user-message .message-content {
  order: 1; /* El globo va primero */
  text-align: right;
  background: var(--xai-user-message-bg);
  color: white;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 8px;
  padding: 10px 14px 22px 14px;
  min-width: 85px;
}

.profile-pic {
  width: 40px;
  height: 40px; /* Igual que width */
  border-radius: 50%;
  margin: 0 8px;
  object-fit: cover;
  background-color: #adb5bd;
  border: 1px solid #fff;
  overflow: hidden; /* Asegura recorte */
}

.user-avatar {
  background-color: #e9ecef;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-avatar .dashicons-admin-users {
  font-size: 22px;
  color: var(--xai-text-color-light);
}

.message-timestamp {
  position: absolute;
  bottom: 5px;
  right: 12px;
  font-size: 0.7em;
  color: var(--xai-text-color-light);
  opacity: 0.8;
}

.user-message .message-timestamp {
  color: rgba(255, 255, 255, 0.7);
}

/* --- 4. Pie de Página (Footer) e Input --- */

.chat-footer {
  display: flex;
  padding: 12px 16px;
  background: #ffffff;
  align-items: center;
}

.chat-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 20px;
  font-size: 0.95em;
  margin-right: 8px;
}

.chat-input:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

.xai-disclaimer {
  padding: 6px 16px;
  text-align: center;
  font-size: 0.75em;
  color: var(--xai-text-color-light);
  background-color: var(--xai-light-bg);
  border-top: 1px solid var(--xai-border-color);
  line-height: 1.4;
}

/* --- 5. Botones Generales --- */

.chat-send, .chat-clear {
  border: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.chat-send {
  background: var(--xai-primary-color);
  color: white;
}
.chat-send:hover {
  background: #0056b3;
}
.chat-send::after {
    content: '';
    border: solid white;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(-45deg);
}

.chat-clear {
  background: #6c757d;
  color: white;
  margin-left: 8px;
}
.chat-clear:hover {
  background: #545b62;
}
.chat-clear .dashicons-trash {
  font-size: 20px;
  line-height: 1;
}

.xai-action-buttons {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #dee2e6;
  text-align: center;
}

.xai-action-btn {
  background-color: var(--xai-primary-color);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 0.9em;
  font-weight: 600;
  cursor: pointer;
  margin: 5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.xai-action-btn:hover {
  transform: translateY(-1px);
}
.xai-action-btn:disabled, .xai-action-btn.disabled {
    background-color: #e9ecef !important;
    border-color: #dee2e6 !important;
    color: var(--xai-text-color-light) !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.xai-action-btn.secondary {
  background-color: #ffffff;
  color: var(--xai-primary-color);
  border: 1px solid var(--xai-primary-color);
}

/* Reemplázalo con esto: */
a.xai-action-btn-link {
  display: inline-block;
  background-color: var(--xai-primary-color); /* Usa el color primario del tema */
  color: white;                               /* Texto blanco para mejor contraste */
  border: none;                               /* Quitamos el borde si lo hubiera */
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 0.9em;
  font-weight: 600;
  text-decoration: none;
  margin: 5px;
  transition: filter 0.2s ease;
}

a.xai-action-btn-link:hover {
    filter: brightness(90%); /* Oscurece ligeramente el botón al pasar el mouse */
}

/* --- 6. Componentes Específicos --- */

/* -- 6.1 Tarjeta de Sugerencia de Producto -- */
.xai-product-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.xai-product-suggestion-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid var(--xai-border-color);
  border-radius: 12px;
  padding: 10px;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
/* Nota: El resto del archivo estaba truncado en tu consulta, pero asumo que continúa con los estilos originales para productos, reacciones, etc. Si tienes la versión completa, integra esto. Para esta corrección, el foco está en la alineación de mensajes. Si necesitas más ajustes, dime. */
@media (max-width: 480px) {
  .xai-chat {
    width: 100%;
    height: 80dvh;
    max-height: 100dvh;
    bottom: 3;
    right: 3;
    border-radius: 12px !important;
  }
  .chat-header, .chat-footer {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 1001;
  }
  .chat-header {
    top: 0;
    padding-top: calc(12px + env(safe-area-inset-top));
    border-radius:none;
    font-size: .8em;
  }
  .chat-body {
      height: 100%;
      max-height: none;
      box-sizing: border-box;
      padding-top: calc(60px + env(safe-area-inset-top)); /* Altura del header + padding */
      padding-bottom: calc(70px + env(safe-area-inset-bottom)); /* Altura del footer + padding */
      border-radius: 12px;
  }
  .chat-footer {
    bottom: 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Correcto: Visible solo para MÓVILES */
  .chat-maximize {
      display: block;
  }

  .xai-bubble-content {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
  }
  .xai-bubble-text {
      text-align: center;
  }
}

/* --- 10. Sistema de Reacciones Avanzado --- */

/* Contenedor principal para las opciones de reacción */
.xai-reaction-picker {
    position: absolute;
    top: -35px; /* Se posiciona encima del globo del mensaje */
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    display: flex;
    padding: 4px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s, top 0.2s ease;
    z-index: 10;
}

/* Muestra el picker cuando tiene la clase .visible */
.xai-reaction-picker.visible {
    opacity: 1;
    visibility: visible;
    top: -40px;
}

/* Estilo para cada botón de emoji dentro del picker */
.xai-reaction-picker .reaction-option {
    font-size: 20px;
    padding: 2px 8px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.xai-reaction-picker .reaction-option:hover {
    transform: scale(1.3);
}

/* Estilo para el ícono que aparece en hover en escritorio (estilo WhatsApp) */
.xai-reaction-trigger {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 9;
}

/* Hacemos el contenedor del mensaje o tarjeta "relativo" para posicionar el picker */
.bot-message .message-content,
.xai-product-suggestion-item {
    position: relative;
}

/* Solo en pantallas de escritorio, mostramos el trigger al hacer hover */
@media (min-width: 769px) {
    .bot-message:hover .xai-reaction-trigger,
    .xai-product-suggestion-item:hover .xai-reaction-trigger {
        opacity: 1;
        visibility: visible;
    }
}

/* Indicador visual de que un mensaje ya tiene una reacción */
.reacted .reaction-icon {
    position: absolute;
    bottom: -10px;
    right: 0;
    font-size: 14px;
    background: #fff;
    border-radius: 50%;
    padding: 1px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- 11. Corrección para Reacciones Visibles --- */

/* Aplicamos bordes redondeados a la cabecera */
.chat-header {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Aplicamos bordes redondeados al pie del chat (si es el último elemento) */
.chat-footer {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Si el disclaimer (aviso legal) está visible, él debe tener los bordes redondeados */
.xai-chat .xai-disclaimer {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

/* Y si el disclaimer existe, el footer (que está arriba) ya no necesita los bordes de abajo */
.xai-chat:has(.xai-disclaimer) .chat-footer {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/*
==========================================================================
   Estilos para el Checkout de Bloques (Diseño Recuadro)
==========================================================================
*/

/* --- El contenedor principal (nuestro recuadro) --- */
.wc-block-checkout__payment-method .glifo-payment-method-box {
  display: flex;
  align-items: center;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9; /* <-- Puedes cambiar el color de fondo aquí */
  transition: all 0.2s ease-in-out;
  cursor: pointer;
}

/* --- Estilo cuando la pasarela está SELECCIONADA --- */
.wc-block-checkout__payment-method.wc-block-checkout__payment-method--active .glifo-payment-method-box {
  border-color: #007bff; /* <-- Usa tu color primario aquí */
  background-color: #f0f6ff; /* <-- Un fondo sutil para el estado activo */
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Un brillo exterior */
}

/* --- El icono --- */
.glifo-payment-method-icon {
  max-height: 32px; /* Un poco más grande para que respire mejor */
  max-width: 50px;
  margin-right: 16px;
  object-fit: contain;
}

/* --- Contenedor para los textos --- */
.glifo-payment-method-text-wrapper {
  display: flex;
  flex-direction: column;
}

/* --- El Título --- */
.glifo-payment-method-title {
  font-weight: 600;
  font-size: 1.1em;
  color: #333; /* <-- Puedes cambiar el color del título aquí */
}

/* --- La Descripción --- */
.glifo-payment-method-description {
  font-size: 0.9em;
  color: #666; /* <-- Puedes cambiar el color de la descripción aquí */
}

/* --- 12. Componente de Tarjeta de Pago --- */

.xai-payment-card {
    background-color: var(--xai-light-bg);
    border: 1px solid var(--xai-border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.xai-payment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--xai-border-color);
    flex-direction: column;
}
.xai-payment-header h4 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: var(--xai-text-color-dark);
}

.xai-payment-total {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--xai-primary-color);
}

.xai-payment-processor {
    font-size: 0.9em;
    color: var(--xai-text-color-light);
    margin: 0 0 15px 0;
}

.xai-card-logos {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #909090; /* Un color gris neutro para los logos */
}

.xai-card-logos svg {
    width: 32px;
    height: 32px;
}

.xai-payment-button {
    display: inline-block; /* Asegura que el enlace se comporte como un bloque */
    width: 90%;
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    margin-bottom: 15px;
}

.xai-payment-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 0.8em;
    color: var(--xai-text-color-light);
    opacity: 0.9;
}

.xai-payment-footer svg {
    width: 10px;
    height: 10px;
}

/* --- Estilos para la Caja de Acción del Checkout --- */

.xai-current-prompt-box {
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: rgba(0, 80, 102, 0.07); /* Un color muy sutil del tema */
    border: 1px solid rgba(0, 80, 102, 0.1);
}

.prompt-box-icon {
    font-size: 1em;
    margin-right: 12px;
    line-height: 1;
}

.prompt-box-text {
    font-weight: 600;
    font-size: 1.05em;
    color: var(--xai-text-color-dark);
}
/* --- Ocultar Footer Condicionalmente --- */
.chat-footer.hidden-footer {
    display: none;
}
/* --- INICIO: AJUSTE AVATAR CÍRCULO PERFECTO Y SVG CENTRADO --- */

/* Regla general para avatares (bot, usuario, escribiendo): Círculo perfecto y alineado al fondo */
.bot-message .profile-pic,
.user-message .profile-pic,
.typing-animation .profile-pic {
    width: 32px !important;                 /* Tamaño fijo */
    height: 32px !important;                /* Mismo tamaño que el ancho */
    aspect-ratio: 1/1 !important;           /* Fuerza proporción cuadrada */
    border-radius: 50% !important;          /* Círculo perfecto */
    object-fit: cover !important;           /* Cubre por defecto (para fotos de perfil subidas) */
    object-position: center !important;     /* Centra la imagen */
    flex-shrink: 0 !important;              /* Evita que flex lo deforme */
    align-self: flex-end !important;        /* Alinea verticalmente al fondo del mensaje */
    
    /* --- INICIO DE LA CORRECCIÓN --- */
    display: flex !important;               /* Cambiado de inline-block a flex */
    align-items: center !important;         /* Centra el icono verticalmente */
    justify-content: center !important;     /* Centra el icono horizontalmente */
    /* --- FIN DE LA CORRECCIÓN --- */

    vertical-align: middle !important;      /* Ayuda con la alineación */
    padding: 0 !important;                  /* Sin padding interno por defecto */
    box-sizing: border-box !important;      /* Padding/Borde no afectan tamaño total */
    overflow: hidden !important;            /* Recorta cualquier exceso */
    background-color: #e0e0e0 !important;   /* Color de fondo mientras carga o si no hay imagen */
}

/* Ajuste de margen específico para avatar del bot (globo a la derecha) */
.bot-message .profile-pic,
.typing-animation .profile-pic {
    margin: 0 8px 0 0 !important; /* Margen a la derecha para separarse del globo */
}


/* --- ANIMACIÓN DE ESCRITURA (TYPING) --- */
.typing-animation {
  display: flex;
  align-items: flex-end;
  margin-bottom: 12px;
  max-width: 85%;
  margin-right: auto; /* Alineado a la izquierda como el bot */
}

.typing-animation .profile-pic {
  margin: 0 8px 0 0 !important;
}

.typing-animation .message-content {
  background: white !important; /* Gris claro, distinto al blanco del bot */
  border-radius: 7px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  position: relative;
}

.typing-animation .typing-dots {
  display: flex;
  gap: 4px;
}

.typing-animation .typing-dots span {
  width: 8px;
  height: 8px;
  background: #999;
  border-radius: 50%;
  display: inline-block;
  animation: typingPulse 1.4s infinite ease-in-out;
}

.typing-animation .typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-animation .typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-animation .typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingPulse {
  0%, 60%, 100% { transform: scale(0.8); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}



/* Ajuste de margen específico para avatar del usuario (globo a la izquierda, con flex-direction: row-reverse) */
.user-message .profile-pic {
  margin: 3 0 0 8px !important; /* Separación del globo */
  order: 2; /* Asegura que el avatar esté al final */
}

/* --- 13. Visibilidad Botón de Llamada (Móvil) --- */

/* Oculta el botón de llamada por defecto */
.glifo-call-button-mobile {
    display: none !important; /* Usamos !important para asegurar que se oculte */
}



/* --- INICIO: Estilos Consistentes de Tarjeta de Producto --- */

/* 1. Estilos para la tarjeta de bienvenida en la página de producto */
.xai-product-suggestion-item.product-page-welcome-card {
    margin-bottom: 5px; /* Separación de los botones de abajo */
    gap: 6px;
    box-shadow: none;
    background: var(--xai-light-bg);
}
.product-page-welcome-card .xai-product-info .xai-product-title {
    /* Forzar el texto a que se vea como un título de producto */
    font-size: 1.1em;
    font-weight: 600;
    color: var(--xai-text-color-dark);
    margin: 0;
}
.product-page-welcome-card .xai-product-info {
    text-align: center;
    gap: 4px;            /* Espacio mínimo entre título y pregunta/subtítulo */
     margin-top: 0;       /* Asegura no haya espacio extra arriba */
}
.product-page-welcome-card .xai-product-thumbnail {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--xai-border-color);
    margin-bottom: 0;    /* Elimina cualquier margin bottom implícito */
}
.product-page-welcome-card .xai-quantity-selector-container {
    width: 100%;
    margin-top: 0;
    padding-top: 0;  
    border-top: none;
}

/* 2. Estilos para las tarjetas de producto (Búsqueda y Agrupados) */
.xai-product-suggestion-item .xai-product-thumbnail {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--xai-border-color);
}
.xai-product-suggestion-item .xai-product-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
.xai-product-suggestion-item .xai-product-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--xai-text-color-dark);
    text-decoration: none;
}
.xai-product-suggestion-item .xai-product-title:hover {
    text-decoration: underline;
}
.xai-product-suggestion-item .xai-product-price {
    font-size: 1em;
    font-weight: 500;
    color: var(--xai-primary-color);
}
.xai-product-suggestion-item .xai-product-price ins {
    background: none;
    text-decoration: none;
}
.xai-product-suggestion-item .xai-product-price del {
    font-size: 0.9em;
    opacity: 0.7;
}

/* 3. Estilos para el selector de cantidad en Productos Agrupados */
.xai-grouped-product-selector {
    padding: 0;
    margin: 0;
}
.xai-grouped-product-selector ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Espacio entre cada tarjeta de producto hijo */
}
.xai-grouped-product-selector li.grouped-item-card {
    padding: 12px; /* Un padding más pequeño para las tarjetas de hijos */
    flex-direction: row; /* Pone la imagen al lado del texto */
    align-items: center;
    gap: 12px;
    text-align: left;
}
.grouped-item-card .xai-product-thumbnail {
    width: 60px;
    height: 60px;
    flex-shrink: 0; /* Evita que la imagen se encoja */
}
.grouped-item-card .xai-product-info {
    align-items: flex-start; /* Alinea el texto a la izquierda */
    flex-grow: 1; /* Ocupa el espacio restante */
}
.grouped-item-card .xai-grouped-product-quantity {
    flex-shrink: 0;
}
.grouped-item-card .xai-grouped-quantity-input {
    width: 60px;
    padding: 8px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
}
.xai-grouped-product-add-button {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--xai-border-color);
    text-align: center;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
/* --- FIN: Estilos Consistentes de Tarjeta de Producto --- */

/* --- INICIO: Estilos para Tarjeta de Bienvenida de Producto --- */

/* 1. Asegura que el contenedor de información apile los elementos */
.product-page-welcome-card .xai-product-info {
    gap: 8px; /* Un espacio pequeño entre título, precio y prompt */
}

/* 2. Estilo para el Título (Estás viendo...) */
.product-page-welcome-card .xai-product-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--xai-text-color-dark);
}

/* 3. Estilo para el Precio (NUEVO) */
.product-page-welcome-card .xai-product-price {
    font-size: 1.25em; /* Un poco más grande */
    font-weight: 700;
    color: var(--xai-primary-color); /* Usa el color principal del tema */
}
.product-page-welcome-card .xai-product-price del {
    font-size: 0.8em;
    opacity: 0.7;
}
.product-page-welcome-card .xai-product-price ins {
    background: none;
    text-decoration: none;
}

/* 4. Estilo para el Prompt (¿Qué te gustaría hacer?) (NUEVO) */
.product-page-welcome-card .xai-product-prompt {
    font-size: 1em;
    font-weight: 500;
    color: var(--xai-text-color-dark);
    margin-top: 4px; /* Un pequeño espacio extra arriba */
}

/* 5. Ajuste del selector de cantidad que ya teníamos */
.product-page-welcome-card .xai-quantity-selector-container {
    width: 100%;
    margin-top: 0;
    padding-top: 0;
    border-top: none;

    /* --- INICIO DE LÍNEAS AÑADIDAS --- */
    /* Usamos flex para centrar el bloque del selector */
    display: flex;
    justify-content: center;
    flex-direction:column;
    /* --- FIN DE LÍNEAS AÑADIDAS --- */
}

/* 6. NUEVO: Estilos para el bloque del selector */
.xai-quantity-selector {
    display: flex;
    flex-direction: column; /* Apila los controles +/- y el botón "Añadir" */
    align-items: center;    /* Centra ambos horizontalmente */
    gap: 12px;              /* Espacio entre los controles y el botón */
}

/* 7. NUEVO: Estilos para los controles +/- */
.xai-quantity-controls {
    display: flex;
    justify-content: center; /* Centra los botones +/- y el input */
}

/* --- FIN: Estilos para Tarjeta de Bienvenida de Producto --- */

/* Muestra el botón de llamada solo en pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    .glifo-call-button-mobile {
        display: inline-block !important; /* O el display que usen tus otros botones secundarios */
    }
}