/*
 * Widget de chat flotante de Luna. Todo el CSS vive bajo el prefijo
 * .luna-chat / .luna-chat__* para no interferir con el sitio anfitrión:
 * sin selectores globales, sin tocar body/html, sin fuentes ni recursos
 * remotos.
 *
 * Ronda "identidad visual + regla definitiva de idioma" (2026-08-18):
 * paleta convertida de morado a blanco/negro/gris neutro, alineada al
 * resto de maccamnetwork.com — el morado (--luna-chat-primary: #4338ca)
 * dejó de existir como color dominante. Ver "## Visual Identity" en el
 * reporte de esta ronda para el detalle completo de la decisión.
 */

.luna-chat {
  /* Acción/marca principal: negro neutro, nunca morado — usado en el send
     button, el estado activo del selector de idioma, y cualquier foco. */
  --luna-chat-primary: #18181b;
  --luna-chat-primary-dark: #000000;
  --luna-chat-on-primary: #ffffff;
  --luna-chat-surface: #ffffff;
  --luna-chat-surface-muted: #f7f7f8;
  --luna-chat-border: #e4e4e7;
  --luna-chat-text: #18181b;
  --luna-chat-text-muted: #52525b;
  /* #8b8b93 (el gris "subtle" inicial de este rediseño) medía solo 3.16:1
     sobre --luna-chat-surface-muted — bajo el 4.5:1 que exige WCAG AA para
     texto normal (timestamps, subtítulo, contador de caracteres). #6b6b6b
     mide 4.98:1 sobre surface-muted y 5.33:1 sobre surface — pasa AA en
     ambos fondos donde realmente se usa (verificado, no asumido). */
  --luna-chat-text-subtle: #6b6b6b;
  --luna-chat-danger-bg: #fef2f2;
  --luna-chat-danger-text: #991b1b;
  --luna-chat-online: #16a34a;
  /* Burbuja del visitante: gris casi negro con texto blanco — reemplaza al
     morado de marca que usaba antes el mismo rol que el send button. */
  --luna-chat-visitor-bg: #18181b;
  --luna-chat-visitor-text: #ffffff;
  /* Verde oficial de WhatsApp — únicamente para el CTA de ese canal, nunca
     en ningún otro control del widget (para no confundirlo con el punto de
     estado "En línea"). #25D366 es el verde de marca reconocible; el texto
     va OSCURO, no blanco, porque el blanco sobre este verde mide ~1.98:1 de
     contraste (falla WCAG AA de forma severa) — un negro/verde muy oscuro
     sobre el mismo fondo mide ~10.6:1 (AAA). Ver "## WhatsApp CTA" en el
     reporte de esta ronda.
  */
  --luna-chat-whatsapp-bg: #25d366;
  --luna-chat-whatsapp-text: #06210f;
  --luna-chat-radius: 16px;
  --luna-chat-shadow: 0 20px 45px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.07);
  --luna-chat-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --luna-chat-safe-bottom: env(safe-area-inset-bottom, 0px);
  --luna-chat-safe-right: env(safe-area-inset-right, 0px);
  --luna-chat-safe-left: env(safe-area-inset-left, 0px);
  --luna-chat-safe-top: env(safe-area-inset-top, 0px);

  position: fixed;
  inset: auto 0 0 auto;
  z-index: 2147483000;
  font-family: var(--luna-chat-font);
  line-height: 1.45;
  color: var(--luna-chat-text);
}

.luna-chat,
.luna-chat *,
.luna-chat *::before,
.luna-chat *::after {
  box-sizing: border-box;
}

.luna-chat__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- botón flotante ---------- */

.luna-chat__toggle {
  position: fixed;
  right: max(20px, var(--luna-chat-safe-right));
  bottom: max(20px, var(--luna-chat-safe-bottom));
  width: 60px;
  height: 60px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  /* Hotfix #2 "LUNA LAUNCHER" (2026-08-18): el fondo de respaldo era blanco
     (--luna-chat-surface) — la causa real del anillo reportado no era el
     box-shadow del hotfix #1 (ya confirmado eliminado y el anillo seguía
     visible), sino que el GIF tiene transparencia real en su borde (alpha=0
     confirmado por inspección de píxeles, sin degradado — GIF solo soporta
     transparencia binaria). Cualquier píxel transparente del borde dejaba
     ver este fondo blanco por detrás, formando el anillo. Fondo ahora negro
     neutro (mismo tono que el resto de la identidad de marca) para que,
     aunque quede algún píxel transparente residual, se funda con el círculo
     en vez de crear un borde claro. Ver también el scale() del <img> más
     abajo, que recorta ese borde transparente por completo. */
  background: var(--luna-chat-primary);
  color: var(--luna-chat-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: 0;
  /* Hotfix #2: se retira también el resplandor blanco del hotfix #1
     (rgba(255,255,255,...)) — decisión explícita de Diego: launcher negro
     limpio, sin ningún halo blanco, solo una sombra oscura de elevación. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  padding: 0;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

/* Ronda "LIFECYCLE & INTERACTION FIX" (2026-08-18): el recorte circular de
   los <img> vive acá, no en .luna-chat__toggle — así el badge (hijo directo
   del botón, con offsets negativos para asomar fuera del círculo) y el halo
   de respiración (::after del botón) ya no quedan recortados por el mismo
   overflow:hidden que necesita el círculo de la imagen. Ver dom.js. */
.luna-chat__toggle-media-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.luna-chat__toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
}

/*
 * Identidad animada de Luna (ronda "identidad visual", 2026-08-18):
 * reemplaza el ícono genérico de globo de chat por la animación oficial
 * "chat-luna" (Diego, /Users/diego/Web Maccam Network/animaciones/Gif
 * Luna/chat-luna.gif — GIF, no el Lottie chat-luna.json: este proyecto no
 * tiene ningún renderer Lottie ni pipeline npm — ver "## Visual Identity"
 * en el reporte de esta ronda para el detalle completo de la decisión).
 * width/height explícitos en el propio <img> (ver dom.js) reservan el
 * espacio desde el primer render — cero CLS. object-fit:cover + el
 * border-radius del propio .luna-chat__toggle recortan el GIF cuadrado en
 * un círculo limpio sin deformarlo.
 */
.luna-chat__toggle-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* Hotfix #2 "LUNA LAUNCHER" (2026-08-18): el GIF fuente (chat-luna.gif)
     tiene un borde con transparencia real (alpha=0 confirmado por
     inspección de píxeles) a partir de ~r=74px sobre un lienzo de 150px —
     prácticamente al borde del propio canvas. Un scale(1.04) centrado
     empuja ese borde transparente fuera del área visible del círculo
     (recortado igualmente por overflow:hidden en .luna-chat__toggle-media-
     wrap, el padre), sin generar zoom perceptible del ícono ni deformarlo —
     mismo tratamiento para el frame animado y el estático. */
  transform: scale(1.04);
  transform-origin: center;
}

/* prefers-reduced-motion (ver el bloque dedicado más abajo): sustituye el
   GIF animado por el mismo primer frame ya congelado como PNG estático —
   un GIF no se puede pausar de forma fiable ni con CSS ni con la API de
   <img>, así que la única forma honesta de respetar la preferencia es
   servir una imagen realmente estática. */
.luna-chat__toggle-media--animated {
  display: block;
}
.luna-chat__toggle-media--static {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .luna-chat__toggle-media--animated {
    display: none;
  }
  .luna-chat__toggle-media--static {
    display: block;
  }
}

.luna-chat__toggle:focus {
  outline: none;
}

.luna-chat__toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.75);
  outline-offset: 3px;
}

.luna-chat__toggle svg {
  width: 26px;
  height: 26px;
}

/* Insignia de mensajes no leídos (UX-001; contador real desde la ronda
   "identidad visual", 2026-08-18 — antes solo mostraba "1" fijo). Rojo
   discreto deliberado (nunca morado): es la única forma de que se lea con
   suficiente contraste sobre la animación de fondo del launcher en
   cualquier fotograma, y coincide con la convención universal de badges de
   mensajería (WhatsApp, iMessage, etc.) — nunca se confunde con el verde de
   WhatsApp del CTA porque nunca aparecen en el mismo lugar de la pantalla. */
.luna-chat__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--luna-chat-danger-text);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px var(--luna-chat-surface);
}

.luna-chat__badge[hidden] {
  display: none;
}

/* ---------- pantalla pre-chat de idioma ---------- */

/*
 * Ronda "identidad visual + regla definitiva de idioma" (2026-08-18):
 * pantalla bilingüe corta que cubre la ventana ANTES de la primera
 * conversación — nunca un formulario, solo dos botones. Vive DENTRO de
 * .luna-chat__window (mismo contenedor con foco atrapado/Escape ya
 * probados), superpuesta al panel de mensajes y al compositor mientras el
 * visitante todavía no eligió CHAT_LANGUAGE explícitamente esta sesión (ver
 * luna-chat.js). Nunca llama a OpenAI: 100% frontend/determinista.
 */
.luna-chat__prechat {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 28px 24px;
  text-align: center;
  background: var(--luna-chat-surface);
}

.luna-chat__prechat[hidden] {
  display: none;
}

.luna-chat__prechat-media {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: var(--luna-chat-shadow);
}

/* Ronda "LIFECYCLE & INTERACTION FIX" (2026-08-18): cada línea bilingüe
   (ES/EN) es ahora un elemento de bloque independiente en vez de una sola
   línea unida con "/" — este grupo mantiene las dos líneas del mismo par
   visualmente juntas (gap chico) mientras el padre .luna-chat__prechat
   sigue separando los distintos pares entre sí (gap normal). */
.luna-chat__prechat-line-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.luna-chat__prechat-greeting {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--luna-chat-text);
}

.luna-chat__prechat-question {
  margin: 0;
  font-size: 13.5px;
  color: var(--luna-chat-text-muted);
  max-width: 260px;
}

.luna-chat__prechat-options {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.luna-chat__prechat-option {
  min-width: 112px;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--luna-chat-border);
  background: var(--luna-chat-surface);
  color: var(--luna-chat-text);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.luna-chat__prechat-option:hover {
  border-color: var(--luna-chat-text);
}

/* PAGE_LOCALE (ronda "identidad visual", 2026-08-18) ya NO decide el
   idioma: solo puede resaltar sutilmente la opción que coincide con el
   idioma real de la página anfitriona — la elección la sigue haciendo el
   visitante con un click. Ver detectPageLocale()/renderPrechat() en
   luna-chat.js. */
.luna-chat__prechat-option--suggested {
  border-color: var(--luna-chat-text);
  background: var(--luna-chat-surface-muted);
}

.luna-chat__prechat-option:focus-visible {
  outline: 3px solid var(--luna-chat-primary);
  outline-offset: 2px;
}

/* ---------- ventana ---------- */

.luna-chat__window {
  position: fixed;
  right: max(20px, var(--luna-chat-safe-right));
  bottom: calc(max(20px, var(--luna-chat-safe-bottom)) + 76px);
  width: 380px;
  max-width: calc(100vw - 24px);
  height: min(640px, calc(100vh - 140px));
  max-height: calc(100vh - 140px);
  background: var(--luna-chat-surface);
  border-radius: var(--luna-chat-radius);
  box-shadow: var(--luna-chat-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}

.luna-chat__window--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (max-width: 480px) {
  .luna-chat__window {
    right: max(8px, var(--luna-chat-safe-right));
    left: max(8px, var(--luna-chat-safe-left));
    bottom: max(8px, var(--luna-chat-safe-bottom));
    top: max(8px, var(--luna-chat-safe-top));
    width: auto;
    height: auto;
    max-height: none;
  }
}

/* ---------- encabezado ---------- */

.luna-chat__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--luna-chat-border);
  background: var(--luna-chat-surface);
  flex-shrink: 0;
}

.luna-chat__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--luna-chat-primary);
  color: var(--luna-chat-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  flex-shrink: 0;
  overflow: hidden;
}

.luna-chat__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.luna-chat__identity {
  min-width: 0;
  flex: 1 1 auto;
}

.luna-chat__name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--luna-chat-text);
}

/*
 * Corrección del truncamiento real ("Asistente de..." cortado, ronda
 * "identidad visual", 2026-08-18): en vez de un único texto largo con
 * text-overflow:ellipsis (que producía el "..." feo que Diego reportó), se
 * publican DOS versiones del subtítulo en el DOM (ver dom.js) y CSS elige
 * cuál mostrar según el ancho real disponible — nunca un "..." a mitad de
 * palabra. La versión larga es la que se ve por defecto (escritorio); la
 * corta ("Asistente virtual"/"Virtual assistant") se activa exactamente en
 * el mismo breakpoint de 480px que ya usa el resto del widget para mobile,
 * donde la ventana pasa a ocupar todo el ancho de la pantalla y el espacio
 * del encabezado es más ajustado.
 */
.luna-chat__subtitle {
  margin: 0;
  font-size: 12.5px;
  color: var(--luna-chat-text-subtle);
  overflow: hidden;
  white-space: nowrap;
}

.luna-chat__subtitle-short {
  display: none;
}

@media (max-width: 480px) {
  .luna-chat__subtitle-full {
    display: none;
  }
  .luna-chat__subtitle-short {
    display: inline;
  }
}

.luna-chat__status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-right: 4px;
}

.luna-chat__status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  /* Punto puntual, no una superficie: deliberadamente pequeño para no
     confundirse con el verde del CTA de WhatsApp (ver "## Visual
     Identity"). */
  background: var(--luna-chat-online);
}

.luna-chat__status-text {
  font-size: 12px;
  color: var(--luna-chat-text-subtle);
}

.luna-chat__header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.luna-chat__icon-button {
  width: 36px;
  height: 36px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--luna-chat-text-muted);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.luna-chat__icon-button:hover {
  background: var(--luna-chat-surface-muted);
}

.luna-chat__icon-button:focus-visible,
.luna-chat__send:focus-visible,
.luna-chat__retry:focus-visible,
.luna-chat__textarea:focus-visible {
  outline: 3px solid var(--luna-chat-primary);
  outline-offset: 2px;
}

/* Ronda "LIFECYCLE & INTERACTION FIX" (2026-08-18) — bug real encontrado:
   el anillo genérico de arriba usaba var(--luna-chat-primary) como color, EL
   MISMO color que el fondo de la propia opción YA ACTIVA (fondo sólido
   negro) — tabular hasta la pill activa dibujaba un anillo negro sobre un
   fondo negro, invisible, mientras la pill inactiva sí mostraba un anillo
   negro nítido sobre su fondo claro: dos comportamientos inconsistentes
   ("roto") para el mismo estado de foco. Fix: un anillo de doble capa (moto
   claro + trazo oscuro) vía box-shadow, visible por igual sobre CUALQUIER
   fondo del propio botón — nunca depende de qué estado ("seleccionado" vs
   "en foco de teclado") tenga la pill en ese momento, así que ambos quedan
   siempre distinguibles entre sí. */
.luna-chat__lang-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--luna-chat-surface), 0 0 0 4px var(--luna-chat-text);
}

.luna-chat__contact-action:focus-visible {
  outline: 3px solid var(--luna-chat-text);
  outline-offset: 2px;
}

.luna-chat__icon-button svg {
  width: 18px;
  height: 18px;
}

/*
 * Selector ES|EN durante el chat (ronda "identidad visual + regla
 * definitiva de idioma", 2026-08-18 — reemplaza el botón único "cambiar a
 * EN/ES" de la ronda anterior). Ambas opciones SIEMPRE visibles; la activa
 * se distingue por más de un solo canal de color (fondo oscuro + texto
 * blanco + font-weight), nunca solo por un cambio de tono — así el estado
 * también es legible sin depender de la percepción de color.
 */
.luna-chat__lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  margin-right: 2px;
  border-radius: 999px;
  background: var(--luna-chat-surface-muted);
  border: 1px solid var(--luna-chat-border);
  flex-shrink: 0;
}

.luna-chat__lang-option {
  min-width: 30px;
  min-height: 28px;
  padding: 4px 9px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--luna-chat-text-subtle);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.luna-chat__lang-option--active {
  background: var(--luna-chat-primary);
  color: var(--luna-chat-on-primary);
  font-weight: 700;
  cursor: default;
}

.luna-chat__lang-option:not(.luna-chat__lang-option--active):hover {
  background: var(--luna-chat-border);
  color: var(--luna-chat-text);
}

/* ---------- mensajes ---------- */

.luna-chat__messages {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--luna-chat-surface-muted);
}

.luna-chat__message {
  display: flex;
  flex-direction: column;
  max-width: 82%;
}

.luna-chat__message--user {
  align-self: flex-end;
  align-items: flex-end;
}

.luna-chat__message--assistant,
.luna-chat__message--system {
  align-self: flex-start;
  align-items: flex-start;
}

.luna-chat__bubble {
  margin: 0;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14.5px;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Burbuja del visitante: gris casi negro con texto blanco — antes era el
   morado de marca (--luna-chat-primary). Ronda "identidad visual",
   2026-08-18. */
.luna-chat__message--user .luna-chat__bubble {
  background: var(--luna-chat-visitor-bg);
  color: var(--luna-chat-visitor-text);
  border-bottom-right-radius: 4px;
}

.luna-chat__message--assistant .luna-chat__bubble {
  background: var(--luna-chat-surface);
  color: var(--luna-chat-text);
  border: 1px solid var(--luna-chat-border);
  border-bottom-left-radius: 4px;
}

.luna-chat__bubble--system {
  background: var(--luna-chat-danger-bg);
  color: var(--luna-chat-danger-text);
  border: 1px solid rgba(153, 27, 27, 0.18);
}

/* Ronda "multilingual & commercial UX" (2026-08-17): aviso determinista
   neutro (cambio de idioma, cierre de sesión) — deliberadamente distinto
   del rojo de error de --system: no es un fallo, así que nunca debe leerse
   como uno. Recoloreado en la ronda "identidad visual" (2026-08-18): gris
   neutro en vez de una mezcla del morado de marca ya retirado. */
.luna-chat__bubble--note {
  background: var(--luna-chat-surface-muted);
  color: var(--luna-chat-text-muted);
  border: 1px solid var(--luna-chat-border);
  font-size: 13px;
}

.luna-chat__timestamp {
  margin-top: 4px;
  font-size: 11px;
  color: var(--luna-chat-text-subtle);
  padding: 0 2px;
}

.luna-chat__retry {
  margin-top: 6px;
  align-self: flex-start;
  border: 1px solid var(--luna-chat-danger-text);
  color: var(--luna-chat-danger-text);
  background: transparent;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 13px;
  min-height: 36px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.luna-chat__retry:hover {
  background: rgba(153, 27, 27, 0.08);
}

/*
 * WhatsApp CTA (ronda "ajustes finos UX/tono", 2026-08-17; recoloreado al
 * verde oficial de WhatsApp en la ronda "identidad visual", 2026-08-18):
 * enlace real (nunca texto/URL cruda dentro de la burbuja). Texto PRIMERO,
 * ícono de WhatsApp DESPUÉS (orden real del markup en dom.js, no solo
 * visual) — el ícono es puramente decorativo (aria-hidden, ver dom.js), el
 * texto visible del enlace ya es su nombre accesible.
 */
.luna-chat__contact-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  align-self: flex-start;
  border: 1px solid var(--luna-chat-whatsapp-bg);
  color: var(--luna-chat-whatsapp-text);
  background: var(--luna-chat-whatsapp-bg);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  min-height: 36px;
  max-width: 100%;
  text-decoration: none;
  cursor: pointer;
  transition: filter 150ms ease;
}

.luna-chat__contact-action:hover {
  filter: brightness(0.93);
}

.luna-chat__contact-action-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ---------- indicador de escritura ---------- */

.luna-chat__typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 10px;
  flex-shrink: 0;
  background: var(--luna-chat-surface-muted);
}

/* Sin esta regla, [hidden] pierde contra .luna-chat__typing{display:flex}
   (misma especificidad, origen "autor" gana sobre el user-agent stylesheet):
   el indicador quedaba visible y sus puntos seguían animando en bucle
   aunque dom.js ya hubiera puesto hidden=true. */
.luna-chat__typing[hidden] {
  display: none;
}

.luna-chat__typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  background: var(--luna-chat-surface);
  border: 1px solid var(--luna-chat-border);
  border-radius: 14px;
}

.luna-chat__typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--luna-chat-text-subtle);
  animation: luna-chat-typing-bounce 1.1s ease-in-out infinite;
}

.luna-chat__typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}

.luna-chat__typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes luna-chat-typing-bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

/* ---------- compositor ---------- */

.luna-chat__composer {
  border-top: 1px solid var(--luna-chat-border);
  background: var(--luna-chat-surface);
  padding: 10px 12px;
  padding-bottom: calc(10px + var(--luna-chat-safe-bottom));
  flex-shrink: 0;
}

.luna-chat__textarea {
  width: 100%;
  resize: none;
  border: 1px solid var(--luna-chat-border);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  /* 16px evita el zoom automático de Safari iOS al enfocar el campo */
  font-size: 16px;
  line-height: 1.4;
  color: var(--luna-chat-text);
  background: var(--luna-chat-surface);
  max-height: 120px;
  overflow-y: auto;
}

/* Foco negro/gris oscuro — nunca el halo morado que tenía antes (heredado
   de --luna-chat-primary cuando ese token era #4338ca). El token ya cambió
   de color arriba, así que esta regla no necesita tocarse: solo se deja
   documentado el motivo. */
.luna-chat__composer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.luna-chat__counter {
  font-size: 11.5px;
  color: var(--luna-chat-text-subtle);
  margin-right: auto;
}

.luna-chat__send {
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  border-radius: 50%;
  background: var(--luna-chat-primary);
  color: var(--luna-chat-on-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.luna-chat__send:hover:not(:disabled) {
  background: var(--luna-chat-primary-dark);
}

.luna-chat__send:disabled {
  /* Estado disabled: WCAG exime explícitamente a los controles
     deshabilitados del requisito de contraste (no son interactuables) —
     opacidad sobre el mismo fondo negro alcanza para leerse como
     "apagado" sin introducir un gris sólido nuevo. */
  opacity: 0.4;
  cursor: not-allowed;
}

.luna-chat__send svg {
  width: 17px;
  height: 17px;
}

/* ---------- picker de emojis del visitante (Regla 6) ---------- */

.luna-chat__emoji-wrap {
  position: relative;
  display: flex;
}

.luna-chat__emoji-button {
  font-size: 20px;
  line-height: 1;
}

.luna-chat__emoji-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  width: 208px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--luna-chat-border);
  background: var(--luna-chat-surface);
  box-shadow: var(--luna-chat-shadow);
}

.luna-chat__emoji-picker[hidden] {
  display: none;
}

.luna-chat__emoji-option {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.luna-chat__emoji-option:hover {
  background: var(--luna-chat-surface-muted);
}

.luna-chat__emoji-option:focus-visible,
.luna-chat__emoji-button:focus-visible {
  outline: 3px solid var(--luna-chat-primary);
  outline-offset: 2px;
}

/* ---------- accesibilidad de movimiento ---------- */

@media (prefers-reduced-motion: reduce) {
  .luna-chat__toggle,
  .luna-chat__window,
  .luna-chat__send,
  .luna-chat__icon-button,
  .luna-chat__retry,
  .luna-chat__lang-option,
  .luna-chat__prechat-option,
  .luna-chat__contact-action {
    transition: none !important;
  }

  .luna-chat__window {
    transform: none !important;
  }

  .luna-chat__typing-dot {
    animation: none !important;
    opacity: 1;
  }

  /* El swap GIF->PNG estático ya ocurre arriba (.luna-chat__toggle-media--*)
     — acá solo se apagan además las transiciones/animaciones CSS
     complementarias del propio botón. */
}