/* ===========================================================
   KNEA SPA — Widget de chat (asesora virtual)
   Recolecta nombre + servicio de interés + una nota breve, y
   termina abriendo WhatsApp con el mensaje ya armado.
   =========================================================== */

:root{
  --wa-morado: var(--knea-purple, #68007a);
  --wa-morado-osc: var(--knea-purple-dark, #3a0044);
  --wa-coral: var(--knea-coral-dark, #c22f40);
  --wa-amarillo: var(--knea-yellow, #f9fa02);
  --wa-verde: #25d366; /* SOLO como acento chico (punto "en línea"), nunca como fondo */
}

.wa-agent{
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 650;
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
  font-family: var(--fuente-texto);
  /* El contenedor en sí NUNCA debe interceptar clics (aunque esté "vacío"
     visualmente, un div sin pointer-events:none igual bloquea lo que haya
     debajo). Solo el panel, el tooltip y el botón vuelven a ser clicables. */
  pointer-events: none;
}
.wa-agent-panel, .wa-agent-tooltip, .wa-agent-launcher{ pointer-events: auto; }

/* ---------- Botón flotante ---------- */
.wa-agent-launcher{
  width: 60px; height: 60px; border-radius: 50%; border: none; flex-shrink: 0;
  background: var(--wa-morado); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(34,0,42,.55);
  animation: waPulso 2.6s ease-out infinite;
  transition: transform .2s ease;
}
.wa-agent-launcher:hover{ transform: translateY(-2px); }
.wa-agent-launcher img{ width: 34px; height: auto; display: block; }
@keyframes waPulso{
  0%   { box-shadow: 0 10px 28px -8px rgba(34,0,42,.55), 0 0 0 0 rgba(104,0,122,.45); }
  70%  { box-shadow: 0 10px 28px -8px rgba(34,0,42,.55), 0 0 0 16px rgba(104,0,122,0); }
  100% { box-shadow: 0 10px 28px -8px rgba(34,0,42,.55), 0 0 0 0 rgba(104,0,122,0); }
}
/* El resto del sitio ya decidió mostrar siempre lo puramente decorativo
   (Ken Burns, cortinilla, este pulso) sin importar prefers-reduced-motion
   — es la identidad de marca del sitio, no un descuido de accesibilidad.
   Por eso, a propósito, NO hay un @media reduced-motion apagando esto. */

/* Con el panel abierto se apaga la animación entera (no solo "pausada":
   una animación pausada queda congelada en un box-shadow intermedio que
   no es el que queremos mostrar en reposo) y se deja la sombra fija. */
.wa-agent.is-open .wa-agent-launcher{ animation: none; box-shadow: 0 10px 28px -8px rgba(34,0,42,.55); }

/* ---------- Globito de invitación ---------- */
.wa-agent-tooltip{
  position: absolute; right: 0; bottom: 76px; max-width: 232px;
  background: linear-gradient(120deg, var(--wa-morado) 0%, var(--wa-coral) 100%);
  color: var(--knea-white); font-family: var(--fuente-titulo); font-weight: 600; font-size: 1rem; line-height: 1.35;
  padding: .9rem 2.2rem .9rem 1.1rem; border-radius: 18px 18px 4px 18px;
  box-shadow: 0 16px 34px -10px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.96);
  transition: opacity .4s ease, transform .4s ease, visibility .4s;
}
.wa-agent-tooltip.visible{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); animation: waTooltipLlamativo 2.6s ease-in-out .6s infinite; }
@keyframes waTooltipLlamativo{ 0%,100%{ box-shadow: 0 16px 34px -10px rgba(0,0,0,.55); } 50%{ box-shadow: 0 16px 34px -10px rgba(0,0,0,.55), 0 0 0 6px rgba(226,71,89,.25); } }
.wa-agent-tooltip button{
  position: absolute; top: .45rem; right: .45rem; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,255,255,.18); border: none; color: var(--knea-white); font-size: .65rem; line-height: 1;
}
.wa-agent.is-open .wa-agent-tooltip{ opacity: 0; visibility: hidden; }

/* ---------- Panel del chat ---------- */
.wa-agent-panel{
  width: min(360px, calc(100vw - 2.2rem));
  /* 110px ≈ separación del borde + hueco + alto del botón + margen, no un
     vh fijo: con la barra del navegador móvil un 70vh a secas puede dejar
     el encabezado del chat cortado por fuera de la pantalla. */
  max-height: min(560px, calc(100vh - 110px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--knea-white); border-radius: 22px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.98); transform-origin: bottom right;
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
.wa-agent.is-open .wa-agent-panel{ opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.wa-agent-head{
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .9rem 1rem; background: linear-gradient(120deg, var(--wa-morado) 0%, var(--wa-morado-osc) 100%); color: var(--knea-white);
}
.wa-agent-head-info{ display: flex; align-items: center; gap: .65rem; min-width: 0; }
.wa-agent-avatar{
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.14); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.wa-agent-avatar img{ width: 22px; height: auto; }
.wa-agent-head-texto{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wa-agent-head-texto strong{ font-size: .95rem; font-family: var(--fuente-titulo); font-weight: 600; }
.wa-agent-head-texto small{ font-size: .72rem; opacity: .85; display: flex; align-items: center; gap: .35rem; }
.wa-agent-punto{ width: 7px; height: 7px; border-radius: 50%; background: var(--wa-verde); display: inline-block; flex-shrink: 0; }
.wa-agent-head-actions{ display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.wa-agent-head-actions button{
  width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(255,255,255,.14); color: var(--knea-white);
  font-size: .95rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.wa-agent-head-actions button:hover{ background: rgba(255,255,255,.26); }

/* ---------- Cuerpo / burbujas ---------- */
.wa-agent-body{
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1rem; display: flex; flex-direction: column; gap: .6rem;
  background: #faf7fb;
}

.wa-msg{ max-width: 85%; padding: .65rem .9rem; font-size: .88rem; line-height: 1.5; animation: waAparecer .35s ease; }
@keyframes waAparecer{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: translateY(0); } }
.wa-msg--bot{
  align-self: flex-start; background: var(--knea-white); color: #2a0033; border: 1px solid rgba(104,0,122,.1);
  border-radius: 16px 16px 16px 4px; box-shadow: 0 4px 14px -8px rgba(0,0,0,.15);
}
.wa-msg--usuario{
  align-self: flex-end; background: var(--wa-morado); color: var(--knea-white);
  border-radius: 16px 16px 4px 16px;
}

.wa-opciones{ display: flex; flex-wrap: wrap; gap: .5rem; align-self: flex-start; max-width: 100%; }
.wa-opcion{
  border: 1.5px solid var(--wa-morado); color: var(--wa-morado); background: var(--knea-white);
  border-radius: 999px; padding: .5rem 1rem; font-size: .83rem; font-weight: 600; transition: background .2s, color .2s;
}
.wa-opcion:hover{ background: var(--wa-morado); color: var(--knea-white); }
.wa-opcion:disabled{ opacity: .45; pointer-events: none; }

.wa-escribiendo{ align-self: flex-start; display: flex; gap: 4px; padding: .7rem .9rem; }
.wa-escribiendo span{ width: 6px; height: 6px; border-radius: 50%; background: rgba(104,0,122,.4); animation: waRebote 1.1s ease-in-out infinite; }
.wa-escribiendo span:nth-child(2){ animation-delay: .15s; }
.wa-escribiendo span:nth-child(3){ animation-delay: .3s; }
@keyframes waRebote{ 0%,60%,100%{ transform: translateY(0); opacity:.5; } 30%{ transform: translateY(-4px); opacity:1; } }

.wa-resumen{
  align-self: stretch; background: var(--knea-white); border: 1px solid rgba(104,0,122,.15); border-radius: 16px;
  padding: .9rem 1rem; font-size: .82rem; line-height: 1.6; color: #2a0033;
}
.wa-resumen strong{ color: var(--wa-morado); }

/* ---------- Barra de entrada de texto ---------- */
.wa-agent-form{
  flex-shrink: 0; display: flex; align-items: center; gap: .5rem;
  padding: .7rem; border-top: 1px solid rgba(104,0,122,.1); background: var(--knea-white);
}
.wa-agent-form input{
  flex: 1; min-width: 0; border: 1.5px solid rgba(104,0,122,.2); border-radius: 999px;
  padding: .6rem 1rem; font-family: inherit; font-size: .88rem; color: #2a0033; background: #faf7fb;
}
.wa-agent-form input:focus{ outline: none; border-color: var(--wa-morado); }
.wa-agent-form button{
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: none;
  background: var(--wa-coral); color: var(--knea-white); display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.wa-agent-form button:hover{ background: var(--wa-morado); }
.wa-agent-form button svg{ width: 17px; height: 17px; fill: currentColor; }
.wa-agent-form.oculto{ display: none; }

.wa-btn-whatsapp{
  align-self: stretch; display: flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--wa-coral); color: var(--knea-white); border-radius: 999px; padding: .85rem 1.2rem;
  font-weight: 600; font-size: .88rem; text-align: center; transition: background .2s, transform .2s;
}
.wa-btn-whatsapp:hover{ background: var(--wa-morado); transform: translateY(-1px); }
.wa-btn-whatsapp svg{ width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

.wa-reiniciar-pill{
  align-self: center; border: 1.5px solid rgba(104,0,122,.25); color: var(--wa-morado); background: transparent;
  border-radius: 999px; padding: .5rem 1.1rem; font-size: .8rem; font-weight: 600; margin-top: .2rem;
}
.wa-reiniciar-pill:hover{ background: rgba(104,0,122,.06); }

@media (max-width: 420px){
  .wa-agent{ right: .7rem; bottom: .7rem; left: .7rem; align-items: stretch; }
  .wa-agent-panel{ width: 100%; }
  .wa-agent-tooltip{ right: 0; }
  .wa-agent-launcher{ align-self: flex-end; }
}