/* 
 * chat-buttons.css - Estilos para los botones del widget de chat CON PROTECCIÓN CSS
 * Versión: 3.2.0 - MODERN CSS ISOLATION UPDATE
 * Copyright © 2025 JomBotix
 * 
 * CRÍTICO: Este CSS está diseñado para integrarse en sitios de terceros
 * donde NO controlamos el CSS del host. Usa protección agresiva contra conflictos.
 */

/* ==========================================================================
   Grupo de botones y Quick Replies con Alta Especificidad
   ========================================================================== */

/* Contenedor de mensajes con botones */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-message-wrapper {
  margin-bottom: 10px;
}

/* ✅ MD3: Flexbox fluido - botones se adaptan al contenido */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-button-group {
  display: flex;
  flex-wrap: wrap; /* ✅ Permite múltiples filas según tamaño de botones */
  gap: 8px; /* ✅ MD3 spacing (2×4dp) */
  width: 100%;
  z-index: var(--jombotix-z-buttons);
  animation: jombotix-fadeInUp 0.3s ease-out;
}

/* ✅ MD3 Outlined Button Style - Botones con borde y background transparente */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply {
  /* Reset completo del botón para evitar herencia del host */
  all: unset;
  box-sizing: border-box !important; /* ✅ CRÍTICO - evita layout shift en transiciones */

  /* Estilos específicos del botón */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px; /* ✅ MD3: Más espacio entre icono y texto */

  /* ✅ Flexbox behavior: Ancho según contenido */
  flex: 0 1 auto; /* No crece, sí se encoge, tamaño según contenido */

  /* ✅ MD3 Outlined Button: Background transparente + borde fino */
  background-color: transparent; /* ✅ Sin background en estado normal */
  color: var(--jombotix-color-primary); /* ✅ Color primary del backend */
  border: 1px solid var(--jombotix-color-primary); /* ✅ Borde con color branding */

  /* Layout - compacto para permitir 3-4 botones por fila */
  border-radius: var(--jombotix-quick-reply-border-radius); /* ✅ Desde backend branding */
  padding: 8px 12px; /* ✅ Reducido de var() para ser más compacto */

  /* Typography */
  font-family: var(--jombotix-font-family);
  font-size: 13px; /* ✅ Reducido de 14px para botones más compactos */
  font-weight: 500; /* ✅ MD3 Medium weight */
  line-height: 1.4;
  text-decoration: none;
  text-transform: none; /* ✅ MD3 no usa uppercase */
  letter-spacing: normal;

  /* Interaction - ✅ Transición suave solo para background y box-shadow */
  cursor: pointer !important;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

  /* Position */
  position: relative;

  /* Text truncation simple en 1 línea - CON !important para vencer all:unset */
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  /* Touch targets - reducido para permitir más botones por fila */
  min-height: 36px; /* ✅ Reducido de 40px */
  min-width: 60px; /* ✅ Reducido de 80px */

  /* Touch behavior */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  /* ✅ MD3 Elevation Level 0 (flat) */
  box-shadow: none;
}

/* Asegurar que todo el contenido dentro del botón tenga cursor pointer */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply *,
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply *::before,
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply *::after {
  cursor: pointer !important;
}

/* Regla específica para texto y spans dentro de botones */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply span,
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply strong,
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply em,
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply b,
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply i {
  cursor: pointer !important;
  pointer-events: none; /* Evita que los eventos del mouse sean capturados por estos elementos */

  /* CRÍTICO: Heredar truncado del padre para que el span no rompa el overflow */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block; /* Necesario para que funcione overflow en inline elements */
}

/* ✅ Hover State - MD3 Outlined Button */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:hover {
  /* ✅ Overlay de 8% del color primary (ligero) */
  color: var(--jombotix-color-primary-dark, var(--jombotix-color-primary));
  border: 1px solid var(--jombotix-color-primary); /* ✅ Mismo borde - evita layout shift */
  /* ✅ MD3 Elevation Level 1 on hover */
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
  transform: none; /* ✅ MD3 no usa translateY, solo elevation */
  cursor: pointer !important;
}

.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:hover *,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:hover
  *::before,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:hover
  *::after {
  cursor: pointer !important;
}

.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:active {
  /* ✅ Pressed state - overlay 16% del color primary (más intenso) */
  color: var(--jombotix-color-primary-dark, var(--jombotix-color-primary));
  border: 1px solid var(--jombotix-color-primary); /* ✅ Mismo borde - evita layout shift */
  /* ✅ MD3 Elevation Level 0 on press (flat) */
  box-shadow: none;
  transform: none;
  cursor: pointer !important;
}

.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:active *,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:active
  *::before,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:active
  *::after {
  cursor: pointer !important;
}

.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:focus {
  /* outline: 2px solid var(--jombotix-color-accent); commented by tests */
  /* outline-offset: 2px; commented by tests */  
  cursor: pointer !important;
}

.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:focus *,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:focus
  *::before,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:focus
  *::after {
  cursor: pointer !important;
}

/* Estado disabled con alta especificidad */
.jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply:disabled {
  background-color: var(--jombotix-color-disabled-bg, #e0e0e0);
  color: var(--jombotix-color-disabled-text, rgba(0, 0, 0, 0.4));
  border-color: var(--jombotix-color-disabled-bg, #e0e0e0);
  cursor: not-allowed !important;
  transform: none;
  box-shadow: none;
  opacity: 0.6;
}

/* Asegurar que todo el contenido dentro del botón deshabilitado tenga cursor not-allowed */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:disabled
  *,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:disabled
  *::before,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:disabled
  *::after {
  cursor: not-allowed !important;
  pointer-events: none;
}

.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:disabled:hover {
  background-color: #e0e0e0;
  color: var(--jombotix-color-text-secondary);
  border-color: #e0e0e0;
  transform: none;
  box-shadow: none;
  cursor: not-allowed !important;
}

/* Estado seleccionado */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-selected {
  background-color: var(--jombotix-color-primary);
  color: var(--jombotix-color-on-primary);
  border-color: var(--jombotix-color-primary);
}

.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply:disabled.jombotix-selected {
  background-color: var(--jombotix-color-accent);
  color: white;
  border-color: var(--jombotix-color-accent);
  opacity: 1;
}

/* Icons dentro de botones */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply
  .jombotix-material-icons-outlined {
  font-size: 18px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer !important;
}

/* ✅ NUEVO: Material Design icons estándar dentro de botones */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply
  .material-icons.md-15 {
  font-size: 15px;
  line-height: 1;
  vertical-align: middle;
  margin-right: 2px;  /* ✅ Spacing reducido para consistencia con mensajes user */
  cursor: pointer !important;
  display: inline-block;
  position: relative;
  top: -1px; /* ✅ Ajuste fino para alineación vertical perfecta */
}

/* Efecto ripple con alta especificidad */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply
  .jombotix-ripple {
  background-color: var(--jombotix-ripple-color, rgba(55, 71, 79, 0.2));
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: jombotix-ripple 0.6s linear;
  pointer-events: none;
}

/* ==========================================================================
   @SCOPE - Para browsers modernos (Chrome 118+, Safari 17.4+)
   ========================================================================== */
@scope (.jombotix-chat-widget) {
  /* ✅ Grupo de botones con Flexbox fluido */
  .jombotix-chat-button-group {
    display: flex;
    flex-wrap: wrap; /* ✅ Permite múltiples filas según tamaño de botones */
    gap: 6px;
    padding: 6px 0 0;
    width: 100%;
    z-index: var(--jombotix-z-buttons);
    animation: jombotix-fadeInUp 0.3s ease-out;
  }

  /* Botones de quick reply compactos - MD3 Outlined Button */
  .jombotix-chat-quick-reply {
    background-color: transparent; /* ✅ MD3 Outlined - sin background en normal */
    color: var(--jombotix-color-primary);
    border: 1px solid var(--jombotix-color-primary); /* ✅ Borde con color branding */
    border-radius: 20px;
    padding: 8px 12px; /* ✅ Consistente con regla principal */
    font-size: 13px; /* ✅ Consistente con regla principal */
    font-weight: 500;
    line-height: 1.4; /* ✅ Consistente con regla principal */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 36px; /* ✅ Consistente con regla principal */
    min-width: 60px; /* ✅ Consistente con regla principal */
    user-select: none;
    position: relative;
    box-sizing: border-box; /* ✅ Evita layout shift */
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* ✅ Transición suave */

    /* ✅ Flexbox behavior: Ancho según contenido */
    flex: 0 1 auto; /* No crece, sí se encoge, tamaño según contenido */

    /* Text truncation simple en 1 línea */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Asegurar que todos los elementos dentro del botón tengan cursor pointer */
  .jombotix-chat-quick-reply *,
  .jombotix-chat-quick-reply *::before,
  .jombotix-chat-quick-reply *::after {
    cursor: pointer;
  }

  /* CRÍTICO: Text truncation para spans internos */
  .jombotix-chat-quick-reply span,
  .jombotix-chat-quick-reply strong,
  .jombotix-chat-quick-reply em,
  .jombotix-chat-quick-reply b,
  .jombotix-chat-quick-reply i {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    pointer-events: none;
  }

  /* Asegurar que los iconos dentro de quick replies tengan cursor pointer */
  .jombotix-chat-quick-reply .jombotix-material-icons-outlined {
    cursor: pointer;
  }

  /* Estados de botones - MD3 Outlined Button */
  .jombotix-chat-quick-reply:hover {
    color: var(--jombotix-color-primary);
    border: 1px solid var(--jombotix-color-primary); /* ✅ Mismo borde */
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
    cursor: pointer;
  }

  .jombotix-chat-quick-reply:hover * {
    cursor: pointer;
  }

  .jombotix-chat-quick-reply:focus {
    *outline: 2px solid var(--jombotix-color-accent);
    cursor: pointer;
  }

  .jombotix-chat-quick-reply:active {
    color: var(--jombotix-color-primary);
    border: 1px solid var(--jombotix-color-primary); /* ✅ Mismo borde */
    box-shadow: none;
    cursor: pointer;
  }

  .jombotix-chat-quick-reply.jombotix-selected {
    background-color: var(--jombotix-color-primary);
    color: var(--jombotix-color-on-primary);
    cursor: pointer;
  }

  /* Estado deshabilitado */
  .jombotix-chat-quick-reply:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: #e0e0e0;
    color: rgba(0, 0, 0, 0.4);
    border-color: #e0e0e0;
  }

  /* Asegurar que los elementos dentro de botones deshabilitados tengan cursor not-allowed */
  .jombotix-chat-quick-reply:disabled *,
  .jombotix-chat-quick-reply:disabled *::before,
  .jombotix-chat-quick-reply:disabled *::after {
    cursor: not-allowed;
    pointer-events: none;
  }

  .jombotix-chat-quick-reply:disabled:hover {
    background-color: #e0e0e0;
    transform: none;
    cursor: not-allowed;
  }

  /* Responsive: Adaptación en móviles */
  @media (max-width: 480px) {
    /* ✅ Flexbox se adapta automáticamente, no necesitamos grid-template-columns */

    .jombotix-chat-quick-reply {
      font-size: 12px; /* Mayor legibilidad táctil en móvil */
      padding: 8px 14px;
      min-height: 32px;
      /* Text truncation heredado del selector principal */
    }
  }
}

/* ==========================================================================
   Animaciones de entrada con alta especificidad
   ========================================================================== */
@keyframes jombotix-fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Estados especiales para diferentes tipos de botones
   ========================================================================== */

/* Botones de contacto urgente */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-action='urgent_contact'] {
  border-color: var(--jombotix-color-urgent, #f44336);
  color: var(--jombotix-color-urgent, #f44336);
}

.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-action='urgent_contact']:hover:not(
    :disabled
  ) {
  background: var(--jombotix-color-urgent, #f44336);
  color: var(--jombotix-color-on-urgent, white);
  border-color: var(--jombotix-color-urgent, #f44336);
}

/* Botones de confirmación de cita */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-action='confirm_appointment'],
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-action='start_appointment'] {
  border-color: var(--jombotix-color-success, #4caf50);
  color: var(--jombotix-color-success, #4caf50);
}

.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-action='confirm_appointment']:hover:not(
    :disabled
  ),
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-action='start_appointment']:hover:not(
    :disabled
  ) {
  background: var(--jombotix-color-success, #4caf50);
  color: var(--jombotix-color-on-success, white);
  border-color: var(--jombotix-color-success, #4caf50);
}

/* Botones primarios (call-to-action) */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-priority='primary'] {
  background-color: var(--jombotix-color-primary);
  color: var(--jombotix-color-on-primary);
  border-color: var(--jombotix-color-primary);
  font-weight: 600;
}

.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply[data-priority='primary']:hover:not(:disabled) {
  background-color: var(--jombotix-color-accent);
  border-color: var(--jombotix-color-accent);
  transform: translateY(-3px);
  box-shadow: var(--jombotix-shadow-4dp);
}

/* ==========================================================================
   Responsividad para botones con alta especificidad
   ========================================================================== */
@media (max-width: 480px) {
  .jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-button-group {
    /* ✅ Flexbox se adapta automáticamente en móviles */
    /* Eliminado: grid-template-columns (ya usamos flex) */
    max-width: 100%;
    padding-left: 0;
    gap: 6px;
  }

  .jombotix-chat-widget.jombotix-chat-widget .jombotix-chat-quick-reply {
    font-size: 12px; /* Un poco más grande en móvil para legibilidad táctil */
    padding: 8px 14px;
    min-height: 32px;
    border-radius: 20px;
    /* Text truncation ya definido en selector principal */
  }

  .jombotix-chat-widget.jombotix-chat-widget
    .jombotix-chat-quick-reply
    .jombotix-material-icons-outlined {
    font-size: 16px;
  }
}

/* ==========================================================================
   Estilo especial para entrada requerida 
   ========================================================================== */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-input.jombotix-input-required
  textarea {
  border: 2px solid #f44336;
  animation: jombotix-pulse-border 1.5s infinite;
}

@keyframes jombotix-pulse-border {
  0% {
    border-color: rgba(244, 67, 54, 0.5);
  }
  50% {
    border-color: rgba(244, 67, 54, 1);
  }
  100% {
    border-color: rgba(244, 67, 54, 0.5);
  }
}

/* Estado deshabilitado con clase adicional */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-disabled {
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  background-color: #e0e0e0 !important;
  color: white !important;
  border-color: #e0e0e0 !important;
  pointer-events: none !important;
}

/* Estado especial: botón seleccionado Y deshabilitado */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-selected.jombotix-disabled {
  background-color: var(--jombotix-color-accent) !important;
  color: white !important;
  border-color: var(--jombotix-color-accent) !important;
  opacity: 0.8 !important;
  font-weight: 600 !important;
}

.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-disabled:hover {
  background-color: #e0e0e0 !important;
  color: white !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Hover especial para botones seleccionados y deshabilitados */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-selected.jombotix-disabled:hover {
  background-color: var(--jombotix-color-accent) !important;
  color: white !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Asegurar que los elementos dentro de botones con clase disabled también tengan cursor not-allowed */
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-disabled
  *,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-disabled
  *::before,
.jombotix-chat-widget.jombotix-chat-widget
  .jombotix-chat-quick-reply.jombotix-disabled
  *::after {
  cursor: not-allowed !important;
  pointer-events: none !important;
}