/* Conversación animada de landing-kit (ver "Conversación animada" en landing-kit/README.md).
 *
 * Dos clases de reglas:
 * - Estado (qué mensaje se ve): selectores de atributo con especificidad normal, porque son
 *   comportamiento. Solo ocultan si corrió el script del <head> (.kit-chat-js) y no hay
 *   movimiento reducido. Si chat.js no carga, una animación de respaldo muestra todo a los 3 s.
 * - Tema: todo dentro de :where() (especificidad cero) y con variables, para que el CSS de la
 *   landing gane siempre sin !important.
 */

/* ── Estado ──────────────────────────────────────────────────────────────── */

@keyframes kit-chat-reveal {
  to { opacity: 1; transform: none; }
}

@keyframes kit-chat-collapse {
  to { height: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .kit-chat-js [data-kit-chat]:not([data-kit-chat-state="static"]) [data-msg]:not([data-shown]) {
    opacity: 0;
    transform: translateY(8px);
    animation: kit-chat-reveal 0s 3s forwards;
  }

  /* Con chat.js montado no hace falta el respaldo. */
  .kit-chat-js [data-kit-chat][data-kit-chat-state]:not([data-kit-chat-state="static"]) [data-msg]:not([data-shown]) {
    animation: none;
  }

  [data-kit-chat][data-kit-chat-state]:not([data-kit-chat-state="static"]) [data-msg] {
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  /* Lugar del botón de control, reservado desde el primer render para que el alto no cambie
     cuando monta chat.js. Si chat.js no carga, se cierra junto con el respaldo. */
  .kit-chat-js [data-kit-chat]:not([data-kit-chat-state="static"])::after {
    content: "";
    display: block;
    flex: none;
    height: var(--kit-chat-control-space, 42px);
    animation: kit-chat-collapse 0s 3s forwards;
  }

  .kit-chat-js [data-kit-chat][data-kit-chat-state]:not([data-kit-chat-state="static"])::after {
    animation: none;
  }
}

[data-kit-chat-control] {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
}

[data-kit-chat-typing][hidden] {
  display: none !important;
}

/* ── Tema ────────────────────────────────────────────────────────────────── */

:where([data-kit-chat]) {
  --kit-chat-bg: #efeae2;
  --kit-chat-in-bg: #ffffff;
  --kit-chat-out-bg: #d9fdd3;
  --kit-chat-text: #111b21;
  --kit-chat-time: #667781;
  --kit-chat-tick: #8696a0;
  --kit-chat-tick-read: #53bdeb;
  --kit-chat-note-bg: #ffeecd;
  --kit-chat-note-text: #54656f;
  --kit-chat-option: #027eb5;
  --kit-chat-radius: 10px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--kit-chat-bg);
  color: var(--kit-chat-text);
  font-family: var(--kit-chat-font); /* sin definir: hereda la fuente de la landing */
}

:where([data-kit-chat] [data-msg]) {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  max-width: 85%;
  margin: 0;
  padding: 7px 10px 8px;
  border-radius: var(--kit-chat-radius);
  background: var(--kit-chat-in-bg);
  color: var(--kit-chat-text);
  font-size: 0.9rem;
  line-height: 1.4;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 13%);
}

:where([data-kit-chat] [data-msg="in"]) {
  align-self: flex-start;
  border-top-left-radius: 2px;
}

:where([data-kit-chat] [data-msg="out"]) {
  align-self: flex-end;
  border-top-right-radius: 2px;
  background: var(--kit-chat-out-bg);
}

:where([data-kit-chat] [data-msg="note"]) {
  align-self: center;
  max-width: 90%;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--kit-chat-note-bg);
  color: var(--kit-chat-note-text);
  font-size: 0.78rem;
  text-align: center;
}

/* Hora (opcional: un <time> dentro del mensaje). */
:where([data-kit-chat] [data-msg] time) {
  float: right;
  margin: 6px 0 -4px 10px;
  color: var(--kit-chat-time);
  font-size: 0.68rem;
  line-height: 1;
  white-space: nowrap;
}

/* Tildes: en la hora de los mensajes del agente. Gris al aparecer, azul cuando el cliente
   responde (data-read). Sin chat.js (versión estática) se ven leídas. */
:where([data-kit-chat] [data-msg="out"] time)::after {
  content: "✓✓";
  display: inline-block;
  margin-left: 3px;
  letter-spacing: -0.32em;
  color: var(--kit-chat-tick-read);
  font-weight: 700;
}

:where([data-kit-chat][data-kit-chat-state]:not([data-kit-chat-state="static"]) [data-msg="out"]:not([data-read]) time)::after {
  color: var(--kit-chat-tick);
}

/* Respuestas rápidas: <span data-options><span>Opción</span>…</span> dentro del mensaje. */
:where([data-kit-chat] [data-options]) {
  display: flex;
  flex-direction: column;
  gap: 2px;
  clear: both;
  margin: 8px -10px -8px;
  padding-top: 2px;
  border-top: 1px solid rgb(11 20 26 / 8%);
}

:where([data-kit-chat] [data-options] > *) {
  display: block;
  padding: 7px 10px;
  color: var(--kit-chat-option);
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s ease;
}

:where([data-kit-chat] [data-options] > * + *) {
  border-top: 1px solid rgb(11 20 26 / 8%);
}

:where([data-kit-chat] [data-options] > [data-chosen]) {
  background: rgb(2 126 181 / 10%);
}

:where([data-kit-chat] [data-options] > [data-chosen])::before {
  content: "✓ ";
}

/* Nota de voz: data-voice="0:12" en el mensaje; el texto es la transcripción. */
:where([data-kit-chat] [data-msg][data-voice])::before {
  content: "▶\00a0\00a0" attr(data-voice);
  display: block;
  min-width: 200px;
  margin-bottom: 6px;
  padding: 6px 0;
  background:
    repeating-linear-gradient(90deg, var(--kit-chat-tick) 0 2px, transparent 2px 5px) 64px 50% / calc(100% - 64px) 14px no-repeat;
  color: var(--kit-chat-time);
  font-size: 0.75rem;
  font-style: normal;
  line-height: 1;
}

:where([data-kit-chat] [data-msg][data-voice]) {
  font-size: 0.82rem;
  font-style: italic;
}

/* "Escribiendo…": chat.js lo posiciona sobre el lugar del próximo mensaje del agente. */
:where([data-kit-chat-typing]) {
  display: inline-flex;
  gap: 4px;
  padding: 11px 13px;
  border-radius: var(--kit-chat-radius);
  background: var(--kit-chat-out-bg);
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 13%);
}

:where([data-kit-chat-typing] > span) {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kit-chat-tick);
  animation: kit-chat-dot 0.9s ease-in-out infinite;
}

:where([data-kit-chat-typing] > span:nth-child(2)) { animation-delay: 0.12s; }
:where([data-kit-chat-typing] > span:nth-child(3)) { animation-delay: 0.24s; }

@keyframes kit-chat-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.9; transform: translateY(-3px); }
}

/* Control: pausar / seguir / ver de nuevo, en el lugar reservado al pie del chat. */
:where([data-kit-chat-control]) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  margin: 0;
  white-space: nowrap;
  padding: 4px 12px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 85%);
  color: var(--kit-chat-note-text);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 13%);
}

:where([data-kit-chat-control]:hover) {
  background: #fff;
}

:where([data-kit-chat-control]:focus-visible) {
  outline: 2px solid var(--kit-chat-option);
  outline-offset: 2px;
}