/*
 * Austral Life AI Commerce -- widget de chat del storefront (spec S16,
 * rediseño real Chat UX UAT delta -- hallazgos humanos de Diego: panel
 * demasiado chico, launcher sin iconografia clara, boton cerrar vulnerable
 * a estilos del tema, quick prompts flotando sobre el composer).
 * Namespaced bajo .al-aic-widget para no colisionar con el tema activo ni
 * con otros plugins. Mismos design tokens que el admin (spec S71).
 * z-index alto pero acotado -- nunca por encima de un modal nativo de
 * WooCommerce (checkout, etc.) que use un z-index mayor.
 */
.al-aic-widget {
  --al-aic-primary: #2563eb;
  --al-aic-success: #00a32a;
  --al-aic-warning: #b45309;
  --al-aic-error: #d63638;
  --al-aic-border: #e2e8f0;
  /*
   * Tamaño real (item 4 UAT delta): tres presets administrables
   * (COMPACT/STANDARD/LARGE), aplicados via JS seteando estas custom
   * properties en el contenedor real -- nunca un valor hardcodeado fragil.
   * clamp() real: nunca excede el viewport disponible aunque el preset
   * pida mas espacio del que hay (mobile cae a las reglas dedicadas mas
   * abajo, que reemplazan esto por completo).
   */
  --al-aic-width: 380px;
  --al-aic-height: min(540px, calc(100dvh - 100px));
  /* Derivados del acento (el JS fija --al-aic-primary en este mismo elemento): hover/active/tintes NUNCA son un azul fijo. */
  --al-aic-primary-dark: var(--al-aic-primary);
  --al-aic-primary-tint: #f8fafc;
  --al-aic-primary-soft: #e2e8f0;
  position: fixed;
  bottom: 20px;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
  .al-aic-widget {
    --al-aic-primary-dark: color-mix(in srgb, var(--al-aic-primary) 85%, #000);
    --al-aic-primary-tint: color-mix(in srgb, var(--al-aic-primary) 8%, #fff);
    --al-aic-primary-soft: color-mix(in srgb, var(--al-aic-primary) 20%, #fff);
  }
}

/* El tema impone mayusculas a los botones: el widget conserva el texto tal como esta escrito. */
.al-aic-widget button,
.al-aic-widget input {
  text-transform: none !important;
  letter-spacing: normal !important;
}

.al-aic-pos-right { right: 20px; }
.al-aic-pos-left { left: 20px; }

/*
 * BUG REAL encontrado en vivo (Chat UX UAT delta re-audit, item 4/8 --
 * root cause REAL de "el launcher cambia de posicion al abrir/cerrar",
 * verificado con interaccion real de navegador, nunca solo lectura de
 * codigo -- computed style real mostro `.al-aic-bubble` con
 * `display: flex` pese a tener la clase `al-aic-hidden` aplicada). Con
 * el selector de una sola clase de abajo, `.al-aic-hidden` y
 * `.al-aic-bubble` (ambos `!important`, misma especificidad 0-0-1-0)
 * empataban en especificidad -- la declaracion `display` de
 * `.al-aic-bubble` (mas abajo en este mismo archivo) GANABA el empate
 * por orden de aparicion, dejando la burbuja realmente visible
 * (display:flex) debajo del panel recien abierto en vez de oculta. El
 * shopper percibia esto como "el launcher se movio" -- en realidad
 * nunca se ocultaba, se desplazaba en el flujo normal del documento
 * porque el panel (ahora visible, mucho mas alto) lo empujaba hacia
 * abajo. Fix real: especificidad mayor (0-0-2-0, selector compuesto)
 * -- gana SIEMPRE sin depender del orden de las reglas en el archivo,
 * ante cualquier cambio futuro.
 */
.al-aic-widget .al-aic-hidden,
.al-aic-widget [hidden] { display: none !important; }

/*
 * Modo inline (shortcode `[al_aic_chat]`, spec "Widget completion"): un
 * panel embebido en el flujo normal del contenido, nunca `position:fixed`
 * ni superpuesto -- es exactamente lo opuesto al bubble flotante.
 */
.al-aic-mode-inline {
  position: static;
  bottom: auto;
  right: auto;
  left: auto;
  display: block;
  width: 100%;
  max-width: 480px;
  z-index: auto;
}

.al-aic-mode-inline .al-aic-panel {
  width: 100%;
  max-width: 100%;
  height: 520px;
  max-height: 70vh;
  box-shadow: none;
}

/* ------------------------------------------------------------------
 * Launcher (item 6 UAT delta): circular, azul, con icono real blanco y
 * sombra sutil -- reemplaza el "bloque azul sin iconografia" reportado.
 * El SVG real vive en JS (whitelist de presets seguros, ver
 * LAUNCHER_ICONS en chat-widget.js) -- nunca HTML/SVG arbitrario desde
 * admin, siempre uno de un conjunto fijo y auditado.
 * ------------------------------------------------------------------ */
.al-aic-bubble {
  /* Aislamiento CSS real (items 6/7/20 UAT delta -- mismo bug real que el
     boton de cerrar, hallazgo C): un selector generico `button {...}` de un
     tema/plugin de terceros con mayor peso en la cascada real ganaba sobre
     este selector sin `!important`, dejando el launcher como un bloque
     gris rectangular con padding ajeno -- verificado real contra el
     storefront (Browser QA, computed style real:
     `border-radius:0; background:rgb(60,60,60); padding:16px 32px 15px`
     de un boton generico del tema, en vez del circulo azul real). `all:
     unset` + `!important` en cada propiedad visualmente critica, mismo
     patron real ya usado en `.al-aic-close` abajo.
  */
  all: unset;
  box-sizing: border-box !important;
  width: var(--al-aic-launcher-size, 60px) !important;
  height: var(--al-aic-launcher-size, 60px) !important;
  min-width: var(--al-aic-launcher-size, 60px) !important;
  min-height: var(--al-aic-launcher-size, 60px) !important;
  border-radius: 50% !important;
  background: var(--al-aic-primary) !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.15s ease !important;
}
.al-aic-bubble:hover { transform: scale(1.05); }
.al-aic-bubble svg { width: 60%; height: 60%; pointer-events: none; }

.al-aic-panel {
  width: var(--al-aic-width);
  max-width: calc(100vw - 40px);
  height: var(--al-aic-height);
  max-height: calc(100vh - 100px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overscroll-behavior: contain;
  border: 1px solid var(--al-aic-border);
}

/* ------------------------------------------------------------------
 * Header (item 8 UAT delta): avatar circular + nombre + subtitulo
 * opcional "Asistente virtual" (nunca afirma que hay una persona online)
 * + boton cerrar.
 * ------------------------------------------------------------------ */
.al-aic-header {
  background: var(--al-aic-primary);
  color: #fff;
  padding: 10px 6px 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.al-aic-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 4px;
}
.al-aic-header-avatar svg { width: 19px; height: 19px; }

.al-aic-header-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Titulo COMPLETO (sin elipsis): en pantallas muy angostas puede envolverse, nunca se corta. */
.al-aic-header-name {
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}

.al-aic-header-subtitle {
  font-size: 11px;
  line-height: 1.25;
  color: #fff; /* contraste WCAG AA sobre el acento: sin transparencia */
  opacity: 1;
  white-space: normal;
  overflow-wrap: anywhere;
}

/*
 * Botones del header (cerrar / nuevo chat / aviso de IA). Aislamiento real contra el tema: `all: unset` + `!important` en cada
 * propiedad visual critica (un `button {...}` generico del tema pintaba un "gran bloque oscuro", hallazgo UAT item 7). Escritorio:
 * 36 px (cabe el titulo completo en una linea); movil: 44 px de area tactil (ver @media mas abajo).
 */
.al-aic-close,
.al-aic-reset,
.al-aic-info {
  all: unset;
  box-sizing: border-box !important;
  background: transparent !important;
  border: none !important;
  color: #fff !important;
  line-height: 1 !important;
  cursor: pointer !important;
  min-width: 36px !important;
  min-height: 36px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}
.al-aic-close { font-size: 20px !important; }
.al-aic-close svg { width: 18px; height: 18px; pointer-events: none; }
.al-aic-reset svg { width: 18px; height: 18px; pointer-events: none; }
.al-aic-info-glyph { font-size: 20px; line-height: 1; pointer-events: none; }
.al-aic-info[aria-expanded="true"] { background: rgba(255, 255, 255, 0.24) !important; }
.al-aic-close:active,
.al-aic-reset:active,
.al-aic-info:active { background: rgba(255, 255, 255, 0.28) !important; }
@media (hover: hover) {
  .al-aic-close:hover,
  .al-aic-reset:hover,
  .al-aic-info:hover { background: rgba(255, 255, 255, 0.18) !important; }
}
.al-aic-close:focus-visible,
.al-aic-reset:focus-visible,
.al-aic-info:focus-visible {
  outline: 2px solid #fff !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.4) !important;
}

/* ------------------------------------------------------------------
 * Layout real (item 16 UAT delta): HEADER / MESSAGES (flex:1, scroll
 * propio) / COMPOSER. Un unico scroll principal de mensajes -- quick
 * prompts/feedback/cupon/escalacion viven DENTRO del flujo de mensajes
 * (ver chat-widget.js), nunca como una barra separada que pueda quedar
 * flotando sobre el composer.
 * ------------------------------------------------------------------ */
.al-aic-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Foco por teclado y scrollIntoView dejan holgura: ningun elemento enfocado queda pegado al borde del hilo. */
  scroll-padding: 12px;
}
.al-aic-messages > *,
.al-aic-card,
.al-aic-card a,
.al-aic-card button,
.al-aic-messages button,
.al-aic-messages a { scroll-margin: 12px; }

.al-aic-msg { display: flex; }
.al-aic-msg-user { justify-content: flex-end; }
.al-aic-msg-assistant { justify-content: flex-start; }

.al-aic-bubble-text {
  max-width: 88%;
  padding: 9px 13px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

.al-aic-msg-user .al-aic-bubble-text {
  background: var(--al-aic-primary);
  color: #fff;
  border-bottom-right-radius: 3px;
}

.al-aic-msg-assistant .al-aic-bubble-text {
  background: #f1f5f9;
  color: #0f172a;
  border-bottom-left-radius: 3px;
}

.al-aic-typing {
  color: #94a3b8;
  font-style: italic;
  padding: 4px 12px;
}

.al-aic-msg-error {
  background: #fef2f2;
  color: var(--al-aic-error);
  padding: 8px 12px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

/*
 * Auditoria global de sombras/hover negros (item 7 UAT delta): cada
 * control interactivo restante del widget que todavia dependia del
 * estado normal `button {...}` sin `!important` recibe aqui el mismo
 * aislamiento real ya probado arriba -- nunca un `button:hover`/
 * `button:focus` generico de tema/plugin de terceros puede volver a
 * imponer su fondo oscuro real (#3C3C3C, Juliette, verificado) sobre
 * estos.
 */
.al-aic-retry {
  background: var(--al-aic-error) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  font-size: 12px !important;
}
.al-aic-retry:hover { background: #b91c1c !important; }
.al-aic-retry:active { background: #991b1b !important; }

.al-aic-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.al-aic-card {
  display: flex;
  gap: 10px;
  border: 1px solid var(--al-aic-border);
  border-radius: 12px;
  padding: 10px;
  background: #fff;
}

.al-aic-card img {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.al-aic-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* Titulo hasta 2 lineas (nunca truncado de una sola linea); palabras largas se parten en vez de desbordar. */
.al-aic-card-title {
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.al-aic-card-price { color: #334155; font-size: 13px; }

.al-aic-card-link {
  color: var(--al-aic-primary) !important;
  font-size: 13px !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  background: none !important;
  display: inline-flex !important;
  align-items: center !important;
  align-self: flex-start;
  min-height: 32px;
}
@media (pointer: coarse) {
  .al-aic-card-link { min-height: 44px; }
}

/* CTA open_link: borde + subrayado + icono (no depende solo del color), >= 44 px, texto que parte linea en pantallas angostas. */
.al-aic-link-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.al-aic-link-cta {
  position: relative;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 14px !important;
  background: #fff !important;
  color: var(--al-aic-primary-dark) !important;
  border: 1.5px solid var(--al-aic-primary-dark) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-transform: none !important;
}
.al-aic-link-cta-text { min-width: 0; overflow-wrap: anywhere; }
.al-aic-link-cta-icon { width: 16px; height: 16px; flex: 0 0 16px; }
@media (hover: hover) {
  .al-aic-link-cta:hover { background: var(--al-aic-primary-tint) !important; }
}
.al-aic-card-link:hover,
.al-aic-card-link:focus-visible {
  text-decoration: underline !important;
  color: var(--al-aic-primary) !important;
  background: none !important;
}

.al-aic-coupon {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf9);
  border: 1px dashed var(--al-aic-success);
  color: #065f46;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
}
.al-aic-coupon-code {
  font-size: 15px;
  letter-spacing: 0.02em;
}
.al-aic-coupon-desc { display: block; margin-top: 2px; color: #047857; }

.al-aic-coupon-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  background: #fff;
  /* Accesibilidad real (item 15 UAT delta, axe-core real ejecutado en vivo):
     var(--al-aic-success) (#00a32a, verde admin de WordPress) sobre blanco
     real da ~3.4:1, por debajo del minimo WCAG AA real de 4.5:1 para texto
     normal (12px, ni siquiera bold+14px cuenta como "texto grande") --
     violacion SERIOUS real detectada. #065f46 (mismo tono ya usado en
     `.al-aic-coupon-desc`, misma paleta del banner) da >7:1, verificado
     real tras el fix. El borde usa el mismo tono por consistencia visual
     -- solo el texto/borde necesitan pasar contraste, el fondo sigue #fff. */
  color: #065f46 !important;
  border: 1px solid #065f46 !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}
.al-aic-coupon-copy:hover, .al-aic-coupon-copy:active { background: #ecfdf5 !important; color: #065f46 !important; }
.al-aic-coupon-copy:focus-visible { outline: 2px solid var(--al-aic-primary); outline-offset: 2px; background: #ecfdf5 !important; }

.al-aic-add-to-cart {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.al-aic-cart-link {
  color: var(--al-aic-primary) !important;
  font-size: 13px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  background: none !important;
}
.al-aic-cart-link:hover,
.al-aic-cart-link:focus-visible {
  text-decoration: underline !important;
  color: var(--al-aic-primary) !important;
  background: none !important;
}

.al-aic-add-to-cart-btn {
  /* Accesibilidad real (item 15 UAT delta, axe-core real ejecutado en vivo
     con un boton real "Agregar al carrito" renderizado): texto blanco
     sobre var(--al-aic-success) (#00a32a) da ~3.5:1, por debajo del minimo
     WCAG AA real de 4.5:1 -- violacion SERIOUS real. #007a1f (mismo verde,
     mas oscuro) da >6:1 con texto blanco, verificado real tras el fix.
     Override local -- --al-aic-success sigue igual para el borde
     decorativo del banner de cupon (line ~323), que no tiene el mismo
     requisito de contraste de texto real. */
  background: #007a1f !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 9px 16px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
.al-aic-add-to-cart-btn:hover:not(:disabled) { background: #006418 !important; }
.al-aic-add-to-cart-btn:active:not(:disabled) { background: #00500f !important; }
.al-aic-add-to-cart-btn:disabled { background: #007a1f !important; color: #fff !important; opacity: 0.7 !important; cursor: default !important; }

.al-aic-escalation {
  background: #fffbeb;
  border: 1px solid var(--al-aic-warning);
  color: #92400e;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}

/*
 * Aviso de IA y privacidad: franja COMPACTA (maximo 2 lineas) entre el header y los mensajes (nunca dentro del scroll de
 * .al-aic-messages), con una X para ocultarla (la X tiene 44 px de area tactil; el glifo visible mide 32 px). El texto legal completo
 * (.al-aic-privacy-text) se despliega desde el boton de informacion del header. Contraste: #334155 sobre #f8fafc ~ 9.9:1; el enlace
 * usa el acento oscurecido (~6:1 con el acento corporativo).
 */
.al-aic-privacy {
  flex: 0 0 auto;
  background: #f8fafc;
  border-bottom: 1px solid var(--al-aic-border);
  color: #334155;
  font-size: 12px;
  line-height: 1.35;
}
.al-aic-privacy p { margin: 0; overflow-wrap: anywhere; }
.al-aic-privacy-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 4px 6px 14px;
}
.al-aic-privacy-summary { flex: 1 1 auto; min-width: 0; }
.al-aic-privacy-link {
  color: var(--al-aic-primary-dark) !important;
  text-decoration: underline !important;
  font-weight: 600;
}
@media (hover: hover) {
  .al-aic-privacy-link:hover { color: var(--al-aic-primary) !important; }
}
.al-aic-privacy-close {
  all: unset;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  width: 44px !important;
  height: 44px !important;
  margin: -6px 0 !important; /* el area tactil de 44 px no agranda la franja */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #334155 !important;
}
.al-aic-privacy-close-glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
}
.al-aic-privacy-close:active .al-aic-privacy-close-glyph { background: #cbd5e1; }
@media (hover: hover) {
  .al-aic-privacy-close:hover .al-aic-privacy-close-glyph { background: #e2e8f0; }
}
.al-aic-privacy-text {
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--al-aic-border);
}

/* Region de estado solo para lectores de pantalla. */
.al-aic-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/*
 * Consentimiento opcional de atribucion (consent patch): "Aceptar" y "No aceptar" son IDENTICOS en estilo, tamano y peso visual (sin
 * boton protagonico ni preseleccionado), compactos (36 px de alto). Viven en el hilo, sin saltos de layout al aparecer (ver JS).
 */
.al-aic-consent {
  flex: 0 0 auto;
  background: #f8fafc;
  border: 1px solid var(--al-aic-border);
  color: #334155;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
}
.al-aic-consent p { margin: 0 0 8px; overflow-wrap: anywhere; }
.al-aic-consent-actions { display: flex; gap: 8px; }
.al-aic-consent-btn {
  all: unset;
  box-sizing: border-box !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  background: #fff !important;
  color: var(--al-aic-primary-dark) !important;
  border: 1.5px solid var(--al-aic-primary-dark) !important;
}
@media (hover: hover) {
  .al-aic-consent-btn:hover { background: var(--al-aic-primary-tint) !important; }
}
.al-aic-consent-btn:active { background: var(--al-aic-primary-soft) !important; }
.al-aic-consent-btn:focus-visible {
  outline: 2px solid var(--al-aic-primary);
  outline-offset: 2px;
}

/*
 * Escalation form (item 15 UAT delta): ancho completo real dentro del
 * flujo de mensajes -- ya no comprimido/compartiendo fila con otros
 * elementos flotantes (item 16: nada se monta ya sobre el composer,
 * este formulario vive como un mensaje mas dentro de .al-aic-messages).
 */
.al-aic-escalation-confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  background: #f8fafc;
  border: 1px solid var(--al-aic-border);
  border-radius: 10px;
  padding: 10px;
}

.al-aic-escalation-email {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 9px 10px;
  font-size: 13px;
}
.al-aic-escalation-email:disabled { opacity: 0.7; }

.al-aic-escalation-confirm-btn {
  background: var(--al-aic-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 9px 14px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  align-self: flex-start !important;
}
@media (hover: hover) {
  .al-aic-escalation-confirm-btn:hover:not(:disabled) { background: var(--al-aic-primary-dark) !important; }
}
.al-aic-escalation-confirm-btn:active:not(:disabled) { background: var(--al-aic-primary-dark) !important; }
.al-aic-escalation-confirm-btn:disabled { background: var(--al-aic-primary) !important; color: #fff !important; opacity: 0.7 !important; cursor: default !important; }

.al-aic-feedback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  min-height: 44px;
  flex: 0 0 auto;
  font-size: 12px;
  /* Accesibilidad real (item 15 UAT delta, axe-core real ejecutado en vivo
     contra el widget montado real): #94a3b8 sobre fondo blanco real da
     ~2.5:1, por debajo del minimo WCAG AA real de 4.5:1 para texto normal
     -- violacion SERIOUS real detectada, nunca asumida. #475569 (mismo tono
     ya usado en `.al-aic-quick-prompt-secondary:hover`, paleta consistente)
     da >7:1, verificado real tras el fix. */
  color: #475569;
}

/*
 * Feedback thumbs (Chat UX UAT delta re-audit, item 10 -- hallazgo humano
 * de Diego: "al pulsar un dedo puede quedar visualmente pegado/oscuro").
 * Mismo root cause de familia (ver `.al-aic-send`): sin `!important`, el
 * :hover/:focus/:active generico del tema puede ganar la cascada real
 * justo en el momento del click, que es ademas cuando el propio boton
 * pasa a :disabled (ambos thumbs quedan disabled tras votar, ver
 * sendFeedback() abajo) -- combinacion real que puede dejar un
 * pseudo-estado oscuro "pegado" hasta el proximo repaint. Circulo real
 * (misma hit area ~32px, nunca el emoji suelto sin fondo) con estados
 * propios y aislados.
 */
.al-aic-feedback-btn {
  all: unset;
  box-sizing: border-box !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-size: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.15s ease !important;
}
.al-aic-feedback-btn:hover:not(:disabled),
.al-aic-feedback-btn:focus-visible:not(:disabled) {
  background: #eef2f7 !important;
}
.al-aic-feedback-btn:active:not(:disabled) { background: #e2e8f0 !important; }
/*
 * Voted (item 10 UAT delta): el boton que el shopper realmente presiono
 * queda marcado con un fondo suave permanente (nunca negro/agresivo) --
 * el OTRO thumb simplemente se apaga via :disabled abajo, nunca ambos
 * con el mismo estado visual (perderia la señal real de "cual elegiste").
 */
.al-aic-feedback-btn.al-aic-feedback-voted { background: var(--al-aic-primary-soft) !important; opacity: 1 !important; }
.al-aic-feedback-btn:disabled { background: none !important; opacity: 0.4 !important; cursor: default !important; }
.al-aic-feedback-btn.al-aic-feedback-voted:disabled { background: var(--al-aic-primary-soft) !important; opacity: 1 !important; }

.al-aic-feedback-thanks {
  color: #475569;
  font-size: 12px;
  font-style: italic;
}

/*
 * Quick prompts (item 9/10/16 UAT delta): ya NO es una barra persistente
 * separada entre mensajes y composer -- se inserta como un bloque mas
 * dentro de .al-aic-messages (justo despues del saludo, o al inicio de un
 * nuevo contexto), asi que se desplaza naturalmente con el scroll de la
 * conversacion en vez de quedar flotando sobre el composer o el
 * formulario de escalacion.
 */
.al-aic-quick-prompts {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  /* Fila compacta (maximo 3 chips): scroll horizontal propio, sin arrastrar el scroll de la pagina ni el del hilo. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: 2px 0 6px;
  flex: 0 0 auto;
}

/*
 * Quick action states (Chat UX UAT delta re-audit, item 8 -- hallazgo
 * humano de Diego: "una quick action seleccionada puede quedar blanca o
 * con contraste insuficiente y deja de distinguirse"). Mismo root cause
 * de familia que `.al-aic-send` (ver comentario ahi): sin `!important`,
 * el `button:hover`/`button:focus` generico del tema Juliette
 * (background oscuro real #3C3C3C + texto blanco) puede ganar la
 * cascada sobre el estado DEFAULT/HOVER de este boton (blanco+azul) en
 * el instante real del click -- el flash de :active/:focus nativo del
 * navegador durante ESE mismo click (antes de que
 * removeQuickPrompts() retire el bloque completo, ver
 * sendMessage()) es exactamente la ventana real donde el shopper percibe
 * el estado roto. Contrato explicito de 4 estados, cada uno
 * `!important`-aislado -- nunca solo el default:
 *   DEFAULT: blanco + borde/texto azul.
 *   HOVER:   azul muy claro + texto azul.
 *   ACTIVE/FOCUS (equivalente real a "seleccionada mientras procesa" --
 *     esta app no tiene una ventana de tiempo separada donde mantener
 *     una clase JS de "processing" tendria efecto real, ver docblock de
 *     sendMessage(): el bloque se remueve en el mismo tick sincrono):
 *     azul de marca + texto blanco, contraste alto, nunca negro/gris.
 *   DISABLED: gris neutro, siempre legible.
 */
.al-aic-quick-prompt {
  all: unset;
  box-sizing: border-box !important;
  background: #fff !important;
  border: 1px solid var(--al-aic-primary) !important;
  color: var(--al-aic-primary) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  min-height: 36px !important;
  cursor: pointer !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
  white-space: nowrap !important;
  text-align: left !important;
  display: inline-flex !important;
  align-items: center !important;
}
@media (hover: hover) {
  .al-aic-quick-prompt:hover:not(:disabled) { background: var(--al-aic-primary-tint) !important; color: var(--al-aic-primary-dark) !important; }
}
.al-aic-quick-prompt:active:not(:disabled),
.al-aic-quick-prompt:focus-visible:not(:disabled) {
  background: var(--al-aic-primary) !important;
  color: #fff !important;
  border-color: var(--al-aic-primary) !important;
}
.al-aic-quick-prompt:disabled { background: #f1f5f9 !important; color: #94a3b8 !important; border-color: #e2e8f0 !important; cursor: default !important; }

/*
 * Secondary action (item 9 UAT delta: "Hablar con Austral Life" deja de
 * ser un CTA comercial de primer nivel -- se muestra visualmente distinto
 * y mas discreto que los quick prompts de venta). `!important` en cada
 * propiedad (misma razon que `.al-aic-quick-prompt` arriba, mismo
 * selector de una sola clase -- sin esto, el orden de aparicion en el
 * archivo ya no alcanza para ganarle a la base ahora que esta usa
 * `!important` real).
 */
.al-aic-quick-prompt-secondary {
  background: none !important;
  border: none !important;
  color: #64748b !important;
  text-decoration: underline !important;
  padding: 4px 2px !important;
  font-weight: 500 !important;
}
.al-aic-quick-prompt-secondary:hover:not(:disabled),
.al-aic-quick-prompt-secondary:active:not(:disabled),
.al-aic-quick-prompt-secondary:focus-visible:not(:disabled) {
  color: #475569 !important;
  background: none !important;
  border-color: transparent !important;
}

/*
 * Composer: input y boton Enviar con EXACTAMENTE 44 px de alto, centrados en la misma linea. El tema impone al input [type=text]
 * `height: 2.0875rem` y `margin-bottom: .75rem` (y mayusculas al boton): cada propiedad que afecta la alineacion lleva !important.
 * font-size >= 16 px evita el zoom automatico de iOS al enfocar. UN SOLO indicador de foco: el borde de 2 px del acento (sin outline ni
 * box-shadow; el padding se compensa para que el texto no se mueva).
 */
.al-aic-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--al-aic-border);
  flex: 0 0 auto;
}

.al-aic-input-row input {
  flex: 1 1 auto;
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  min-width: 0;
  background: #fff !important;
  color: #0f172a !important;
  border: 1px solid #7b8794 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  outline: none !important;
  transition: none !important; /* el tema anima border/box-shadow de todo input (0.3 s): el indicador de foco debe ser inmediato y unico */
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
}
.al-aic-input-row input::placeholder { color: #64748b; opacity: 1; }
.al-aic-input-row input:focus,
.al-aic-input-row input:focus-visible {
  border-color: var(--al-aic-primary) !important; /* mismo grosor (1 px) que el borde normal: solo cambia el color */
  box-shadow: none !important;
  outline: none !important;
}
.al-aic-input-row input:disabled { background: #f1f5f9 !important; color: #64748b !important; cursor: not-allowed; }

/*
 * Send button (Chat UX UAT delta re-audit, item 6 -- hallazgo humano de
 * Diego: "el boton ENVIAR adquiere fondo negro en determinados estados").
 * Root cause real, confirmado via computed style en vivo contra el tema
 * Juliette real (nunca intuido): `button:hover`/`button:focus` en
 * app.css del tema define `background-color: var(--site-secondary-
 * button-color)` (#3C3C3C real, verificado) con especificidad
 * (0,0,1,1) -- le gana a la regla base de `.al-aic-send` (una sola
 * clase, especificidad (0,0,1,0)) exactamente en esos dos estados
 * (el estado normal ya era correcto porque ninguna regla del tema lo
 * disputa). Mismo bug real, mismo mecanismo, ya documentado y resuelto
 * para `.al-aic-bubble`/`.al-aic-close` -- nunca antes extendido a este
 * boton. Fix real: cada estado visualmente critico queda explicito con
 * `!important`, nunca solo el estado normal.
 */
.al-aic-send {
  background: var(--al-aic-primary) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 44px !important; /* touch target real, ver comentario en .al-aic-close */
  min-height: 44px !important;
  max-height: 44px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: none !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}
/* Hover/active DERIVADOS del acento (nunca un azul fijo); hover solo en dispositivos con puntero real. */
@media (hover: hover) {
  .al-aic-send:hover:not(:disabled) { background: var(--al-aic-primary-dark) !important; box-shadow: none !important; }
}
.al-aic-send:active:not(:disabled) { background: var(--al-aic-primary-dark) !important; transform: scale(0.98) !important; box-shadow: none !important; }
.al-aic-send:disabled { background: var(--al-aic-primary) !important; color: #fff !important; opacity: 0.6 !important; cursor: default !important; transform: none !important; box-shadow: none !important; }

/* ------------------------------------------------------------------
 * Mobile (item 5 UAT delta): aprovechar practicamente toda la superficie
 * disponible, dynamic viewport units reales (dvh -- se ajustan cuando el
 * teclado movil aparece, a diferencia de vh que queda fijo al alto
 * inicial), respeta safe-area-inset para notches/home-indicator.
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .al-aic-widget { --al-aic-launcher-size: 52px; bottom: 0; right: 0; left: 0; z-index: 2147483647; /* sobre prompts de terceros (web-push): z-index maximo y, con Popover API, capa superior (ver abajo) */ }
  /*
   * Capa superior (hotfix 1.1.2). El JS marca el host con popover="manual" en movil para que quede por encima de un prompt de terceros con el MISMO z-index
   * maximo inyectado despues (WonderPush: 2258594000, acotado a 2147483647) sin reinsertar el nodo (U1). Un popover trae estilos de agente de usuario
   * (inset:0, margin:auto, padding, borde, fondo, overflow:auto, tamano fit-content): aqui se anulan todos; el anclaje (bottom/left/width) lo dan las reglas de abajo.
   */
  .al-aic-widget[popover] { top: auto; height: auto; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; }
  .al-aic-pos-right, .al-aic-pos-left { right: 0; left: 0; }
  .al-aic-bubble {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  /*
   * BUG REAL encontrado en vivo (QA de "posicion configurable del chat
   * desde WP-Admin", Browser real a 375-455px): esta regla mobile nunca
   * tuvo contraparte para `.al-aic-pos-left` -- el bubble quedaba
   * SIEMPRE anclado a la derecha bajo 480px sin importar la preferencia
   * real guardada en Tienda > Posicion, volviendo el toggle Izquierda/
   * Derecha invisible en mobile (unico viewport donde el work order
   * exige "burbuja flotante alineada abajo a la izquierda" tambien).
   * Especificidad mayor (0-0-2-0) gana siempre sobre la regla generica
   * de arriba, sin depender del orden de aparicion.
   */
  .al-aic-pos-left .al-aic-bubble {
    left: max(16px, env(safe-area-inset-left));
    right: auto;
  }
  /*
   * Panel movil a PANTALLA COMPLETA del visual viewport (hotfix 1.1.1; ya no ~84 dvh). --al-aic-vvh / --al-aic-vvw / --al-aic-vv-left /
   * --al-aic-vv-bottom los publica el JS desde window.visualViewport: el alto y el ancho son los del viewport VISIBLE (no los del layout, que el
   * tema desborda 5-6 px) y el contenedor se ancla sobre el teclado, asi el composer siempre queda visible. Sin visualViewport caen a
   * dvh/100%/0. Sin scrim a proposito: nada bloquea los clics sobre prompts de terceros fuera del panel.
   */
  .al-aic-widget:not(.al-aic-mode-inline) { bottom: var(--al-aic-vv-bottom, 0px); left: var(--al-aic-vv-left, 0px); right: auto; width: var(--al-aic-vvw, 100%); }
  .al-aic-widget:not(.al-aic-mode-inline) .al-aic-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: var(--al-aic-vvh, 100dvh);
    max-height: var(--al-aic-vvh, 100dvh);
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .al-aic-close,
  .al-aic-reset,
  .al-aic-info {
    min-width: 44px !important;
    min-height: 44px !important;
    width: 44px !important;
    height: 44px !important;
  }
  .al-aic-input-row {
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }
}

/*
 * Foco visible real (spec S69 ACCESSIBILITY: "focus-visible CSS") --
 * :focus-visible en vez de :focus para no dibujar el anillo en clicks de
 * mouse/touch (donde ya hay feedback visual propio), solo en navegacion
 * real por teclado. outline-offset separa el anillo del borde propio de
 * cada control para que siga siendo legible sobre fondos de color
 * (bubble/header, ambos --al-aic-primary).
 */
.al-aic-widget button:focus-visible,
.al-aic-widget input:focus-visible,
.al-aic-widget a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--al-aic-primary);
}

.al-aic-panel button:focus-visible,
.al-aic-panel input:focus-visible,
.al-aic-panel a:focus-visible {
  outline: 2px solid var(--al-aic-primary);
  outline-offset: 2px;
  box-shadow: none;
}

/*
 * prefers-reduced-motion real (spec S69 ACCESSIBILITY): este widget no
 * anima nada mas alla del hover del launcher (transform:scale) -- esta
 * regla es una guardia real hacia adelante, no decorativa: cualquier
 * transition/animation que se agregue despues a este archivo queda
 * automaticamente neutralizada para quien pida menos movimiento, sin
 * depender de que cada cambio futuro recuerde repetir la excepcion.
 */
@media (prefers-reduced-motion: reduce) {
  .al-aic-widget,
  .al-aic-widget * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------
 * Escritorio (>= 768 px): panel ~380 x 540 px (preset "compact"; los otros presets lo agrandan) que SIEMPRE respeta el viewport:
 * nunca mas ancho que 100vw - 40 px ni mas alto que 100dvh - 100 px (a 768 px de ancho o con alturas pequenas sigue cabiendo). El
 * contenido scrollea por dentro (.al-aic-messages). Movil (< 768 px): bottom sheet (ver regla de arriba).
 * ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .al-aic-widget:not(.al-aic-mode-inline) .al-aic-panel {
    box-sizing: border-box;
    width: min(var(--al-aic-width), calc(100vw - 40px));
    max-width: calc(100vw - 40px);
    height: min(var(--al-aic-height), calc(100dvh - 100px));
    max-height: calc(100dvh - 100px);
  }
}
}

/* Indicador verde de disponibilidad: solo movil. Anillo blanco para distinguirlo del boton; no es la unica senal de estado. */
.al-aic-avail-dot { display: none; }
@media (max-width: 767px) {
  .al-aic-avail-dot {
    display: block;
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
  }
}

/* Senal breve movil junto al boton (no interactiva: nunca bloquea botones de compra ni la navegacion). */
.al-aic-teaser { display: none; }
@media (max-width: 767px) {
  .al-aic-teaser {
    display: block;
    position: fixed;
    left: calc(max(16px, env(safe-area-inset-left)) + var(--al-aic-launcher-size, 52px) + 8px);
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 8px);
    max-width: calc(100vw - var(--al-aic-launcher-size, 52px) - 48px);
    padding: 8px 12px;
    background: #fff;
    color: #0f172a;
    border: 1px solid var(--al-aic-border);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    line-height: 1.3;
    pointer-events: none;
    overflow-wrap: anywhere;
  }
  .al-aic-pos-right .al-aic-teaser {
    left: auto;
    right: calc(max(16px, env(safe-area-inset-right)) + var(--al-aic-launcher-size, 52px) + 8px);
  }
  /* Pulso sutil: exactamente 2 ciclos, nunca permanente. */
  .al-aic-avail-pulse .al-aic-avail-dot { animation: al-aic-avail-pulse 1.4s ease-out 2; }
}
@keyframes al-aic-avail-pulse {
  0% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(22, 163, 74, 0.55); }
  100% { box-shadow: 0 0 0 2px #fff, 0 0 0 10px rgba(22, 163, 74, 0); }
}

/* Entrega 1B: enlace de respaldo "Ver producto" en el error de add-to-cart (misma apariencia que "Reintentar", pero un <a> real). */
.al-aic-error-link {
  display: inline-block;
  text-decoration: none !important;
  box-sizing: border-box;
  min-height: 24px;
  line-height: 16px;
}
.al-aic-error-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }