/* =========================================================================
   TRAZENIA · PANEL DEL ASISTENTE
   Mismo grafito, mismas reglas de una línea, misma mono para las etiquetas.
   El panel se lee como una parte del sitio, no como un widget pegado encima.
   ========================================================================= */

.wa--chat {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.chat {
  position: fixed;
  right: clamp(16px, 2.4vw, 28px);
  bottom: clamp(92px, 10vh, 110px);
  z-index: 96;
  width: min(400px, calc(100vw - 32px));
  max-height: min(620px, calc(100svh - 160px));
  display: flex;
  flex-direction: column;
  background: var(--grafito);
  border: 1px solid var(--linea);
  border-radius: var(--radio-grande);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .8);
  overflow: hidden;
}

/* Sin esto el panel se queda abierto siempre: el "display: flex" de arriba le
   gana al display:none que el navegador aplica por el atributo hidden. */
.chat[hidden] { display: none; }

.js .chat:not([hidden]) {
  animation: chat-entra var(--medio) var(--curva);
}
@keyframes chat-entra {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- cabeza */
.chat__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--linea);
  background: var(--fondo-alt);
}

.chat__marca { display: flex; align-items: flex-start; gap: 10px; }
.chat__marca b {
  display: block;
  font-family: var(--display);
  font-stretch: 112%;
  font-variation-settings: "wdth" 112;
  font-weight: 600;
  font-size: var(--t-16);
  letter-spacing: -.01em;
  color: var(--tinta);
}
.chat__marca em {
  display: block;
  font-style: normal;
  font-size: var(--t-12);
  line-height: 1.4;
  color: var(--tinta-debil);
  margin-top: 3px;
  max-width: 30ch;
}

/* El nodo del isotipo, latiendo despacio: el asistente está despierto. */
.chat__nodo {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--turquesa);
  margin-top: 7px;
  flex: none;
  animation: chat-pulso 2.8s var(--curva) infinite;
}
@keyframes chat-pulso {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.chat__cerrar {
  background: none;
  border: 0;
  color: var(--tinta-debil);
  cursor: pointer;
  padding: 4px;
  flex: none;
  transition: color var(--rapido) var(--curva);
}
.chat__cerrar:hover { color: var(--tinta); }

/* ----------------------------------------------------------------- hilo */
.chat__hilo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px;
  display: grid;
  gap: 14px;
  align-content: start;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}

.chat__msg {
  font-size: var(--t-14);
  line-height: 1.58;
  max-width: 90%;
}
.chat__msg p { margin: 0; }
.chat__msg p + p { margin-top: .7em; }

.chat__msg--bot { color: var(--tinta-media); }
/* El trazo turquesa a la izquierda marca quién habla, sin globos de color. */
.chat__msg--bot {
  border-left: var(--trazo-grosor) solid var(--acento-linea);
  padding-left: 12px;
}

.chat__msg--yo {
  justify-self: end;
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: var(--radio) var(--radio) 2px var(--radio);
  padding: 10px 13px;
  color: var(--tinta);
}

.chat__msg--aviso {
  border-left-color: var(--senal);
  color: var(--tinta-media);
}

/* Tres puntos mientras el modelo arranca */
.chat__pensando { display: inline-flex; gap: 5px; padding-left: 12px; }
.chat__pensando i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--tinta-debil);
  animation: chat-punto 1.3s ease-in-out infinite;
}
.chat__pensando i:nth-child(2) { animation-delay: .18s; }
.chat__pensando i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-punto {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}

/* ---------------------------------------------------------- sugerencias */
.chat__sugerencias {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 16px 14px;
}
.chat__sugerencias:empty { display: none; }

.chat__sugerencia {
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: .04em;
  color: var(--tinta-media);
  background: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 7px 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.chat__sugerencia:hover { border-color: var(--acento-linea); color: var(--tinta); }

/* ---------------------------------------------------------------- forma */
.chat__forma {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--linea);
  background: var(--fondo-alt);
}

.chat__forma textarea {
  flex: 1;
  background: none;
  border: 0;
  resize: none;
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-14);
  line-height: 1.5;
  max-height: 108px;
  padding: 8px 0;
}
.chat__forma textarea:focus { outline: none; }
.chat__forma textarea::placeholder { color: var(--tinta-debil); }

.chat__forma button[type="submit"] {
  width: 36px; height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--linea);
  border-radius: 50%;
  background: none;
  color: var(--tinta-debil);
  cursor: pointer;
  transition: border-color var(--rapido) var(--curva),
              color var(--rapido) var(--curva),
              background var(--rapido) var(--curva);
}
.chat__forma button[type="submit"]:not(:disabled):hover {
  border-color: var(--turquesa);
  color: var(--grafito);
  background: var(--turquesa);
}
.chat__forma button[type="submit"]:disabled { opacity: .4; cursor: default; }

/* ------------------------------------------------------------------ pie */
.chat__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--linea-suave);
  font-family: var(--mono);
  font-size: var(--t-12);
  letter-spacing: .05em;
  color: var(--tinta-debil);
}

.chat__enlace {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--acento);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chat__enlace:hover { color: var(--tinta); }

/* ------------------------------------------------ entrega a una persona */
.chat__entrega {
  display: grid;
  gap: 10px;
  padding: 14px;
  margin-top: 4px;
  border: 1px solid var(--senal);
  border-radius: var(--radio);
  background: var(--superficie);
}
.chat__entrega p { font-size: var(--t-14); color: var(--tinta-media); line-height: 1.5; }
.chat__entrega input {
  width: 100%;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-14);
  padding: 8px 0;
}
.chat__entrega input:focus { outline: none; border-bottom-color: var(--turquesa); }
.chat__entrega input::placeholder { color: var(--tinta-debil); }
.chat__entrega .fila { gap: 10px; }

.chat__salidas { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.chat__salidas:empty { display: none; }

/* --------------------------------------------------------------- móvil */
@media (max-width: 560px) {
  .chat {
    right: 8px;
    left: 8px;
    width: auto;
    bottom: 76px;
    max-height: calc(100svh - 140px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .chat:not([hidden]) { animation: none; }
  .chat__nodo, .chat__pensando i { animation: none; }
}