/**
 * KYROSCH Chat — chat.css
 * ---------------------------------------------------------------------------
 * Estilos del widget "Kai" (botón flotante + panel).
 * Aislado bajo `.kyrosch-chat-root`: no depende del resto del sitio.
 *
 * Estabilidad de esta versión — todo resuelto con CSS estándar, sin JS:
 *   - El layout ante el teclado se resuelve con unidades `dvh` (viewport
 *     dinámico), no con vh ni con listeners de `visualViewport`.
 *   - `overscroll-behavior: contain` en el scroll de mensajes evita que
 *     el scroll "se escape" hacia la página detrás del panel.
 *   - `touch-action: manipulation` en los elementos interactivos elimina
 *     el retraso de 300ms de Android y hace el touch más confiable.
 *   - `--kc-top-safe`: si el sitio tiene un header fijo/sticky alto, se
 *     puede sobreescribir esta variable (en una página puntual, con un
 *     <style> después de este archivo) para que el panel nunca lo tape.
 *     Por defecto es 0 porque el header del sitio no es fixed.
 *   - `--kc-offset-bottom`: despeje sobre el `.cart-fab` del sitio
 *     (right:16px/bottom:16px). Si en el futuro aparece otro flotante,
 *     este es el único punto que hay que tocar.
 */

.kyrosch-chat-root {
  --kc-ink: #111111;
  --kc-gold: #c9a24d;
  --kc-gold-strong: #d4af37;
  --kc-gold-light: #f3de8a;
  --kc-gold-deep: #b8923f;
  --kc-ivory: #f1ede6;
  --kc-panel-bg: #ffffff;
  --kc-surface: #f6f4ef;
  --kc-surface-strong: #faf7f2;
  --kc-border: #ece7df;
  --kc-text: #1a1a1a;
  --kc-text-soft: #6f675c;
  --kc-online: #3f9d6e;
  --kc-error: #b1442f;
  --kc-error-bg: #fbeeea;

  --kc-shadow: 0 28px 64px -24px rgba(17, 17, 17, 0.34), 0 8px 24px -12px rgba(17, 17, 17, 0.18);
  --kc-shadow-gold: 0 16px 36px rgba(201, 162, 77, 0.28), 0 3px 10px rgba(17, 17, 17, 0.16);
  --kc-radius-panel: 24px;
  --kc-radius-bubble: 18px;
  --kc-radius-toggle: 20px;
  --kc-toggle-size: 60px;
  --kc-badge-bg: #b1442f;
  --kc-badge-ink: #fbf6ee;

  --kc-font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --kc-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;

  --kc-composer-max-height: 132px;
  --kc-ease: cubic-bezier(0.16, 1, 0.3, 1);

  --kc-offset-bottom: 100px;
  --kc-top-safe: 0px;
  --kc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --kc-z: 2147483000;

  /* Separación real entre el borde inferior del viewport y el borde
     inferior del panel. Es la MISMA cifra que usan tanto `bottom` como
     el tope de `height` del panel — si alguna vez se desincronizan, el
     panel puede quedar más alto de lo que cabe y su cabecera se corta
     contra el borde superior de la ventana en pantallas bajas.
     Nota: NO se le suma el tamaño del botón flotante — mientras el
     panel está abierto, el botón desaparece por completo (ver
     `.kc-toggle--hidden`), así que el panel puede anclarse en el mismo
     despeje que usa el propio botón cuando está cerrado, en vez de
     dejar un hueco extra pensado para un botón que ya no está visible. */
  --kc-panel-bottom-gap: calc(var(--kc-offset-bottom) + var(--kc-safe-bottom));

  position: relative;
  z-index: var(--kc-z);
  font-family: var(--kc-font-body);
  color: var(--kc-text);
}

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

/* ============================= Botón flotante ============================= */

/* Squircle en vez de círculo: un rectángulo de esquinas suaves, "pegado"
   a la esquina inferior derecha de la pantalla. Un único ícono fijo
   (nunca se convierte en "X"): cerrar es responsabilidad exclusiva del
   botón del header del panel, así solo existe un gesto de cierre. */
.kc-toggle {
  position: fixed;
  right: 20px;
  bottom: calc(var(--kc-offset-bottom) + var(--kc-safe-bottom));
  width: var(--kc-toggle-size);
  height: var(--kc-toggle-size);
  border-radius: var(--kc-radius-toggle);
  border: none;
  background: linear-gradient(155deg, var(--kc-gold-light) 0%, var(--kc-gold-strong) 46%, var(--kc-gold-deep) 100%);
  color: var(--kc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--kc-shadow-gold);
  z-index: var(--kc-z);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 320ms var(--kc-ease), box-shadow 320ms var(--kc-ease),
    opacity 220ms var(--kc-ease), visibility 0s linear 0s;
}

.kc-toggle::after {
  /* Filo interno sutil: le da al squircle un borde "labrado", como una
     pieza tallada en vez de un botón plano. */
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: calc(var(--kc-radius-toggle) - 1.5px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
}

.kc-toggle:hover {
  transform: translateY(-3px) scale(1.045);
  box-shadow: 0 20px 44px rgba(201, 162, 77, 0.36), 0 5px 16px rgba(17, 17, 17, 0.2);
}

.kc-toggle:active {
  transform: translateY(-1px) scale(0.94);
}

.kc-toggle:focus-visible {
  outline: 2px solid var(--kc-ink);
  outline-offset: 3px;
}

/* Al abrir el panel el botón se retira por completo: no hay dos formas
   de cerrar en pantalla, solo el botón del header. */
.kc-toggle--hidden {
  opacity: 0;
  transform: translateY(10px) scale(0.5);
  pointer-events: none;
  visibility: hidden;
  transition: transform 260ms var(--kc-ease), opacity 200ms var(--kc-ease),
    visibility 0s linear 260ms;
}

.kc-toggle__ring {
  position: absolute;
  inset: -8px;
  border-radius: calc(var(--kc-radius-toggle) + 8px);
  border: 1.5px solid rgba(201, 162, 77, 0.45);
  opacity: 0.6;
  animation: kc-breathe 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* La animación ambiental se detiene con el panel abierto o la pestaña en
   segundo plano (ver chat-ui.js) para no gastar ciclos de compositor
   sin necesidad — es una de las causas típicas de jank persistente en
   Safari de iOS cuando hay una animación infinita fuera de pantalla. */
.kc-toggle--open .kc-toggle__ring,
.kc-toggle--paused .kc-toggle__ring {
  animation-play-state: paused;
  opacity: 0;
}

@keyframes kc-breathe {
  0%, 100% {
    transform: scale(0.94);
    opacity: 0.45;
  }
  50% {
    transform: scale(1.08);
    opacity: 0.05;
  }
}

.kc-toggle__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: transform 320ms var(--kc-ease);
}

.kc-toggle__icon svg {
  width: 100%;
  height: 100%;
}

.kc-toggle:active .kc-toggle__icon {
  transform: scale(0.9) rotate(-4deg);
}

/* Insignia de mensajes nuevos mientras el panel está cerrado. */
.kc-toggle__badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--kc-badge-bg);
  color: var(--kc-badge-ink);
  font-family: var(--kc-font-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 19px;
  text-align: center;
  box-shadow: 0 0 0 3px var(--kc-panel-bg, #fff);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 200ms var(--kc-ease), transform 200ms var(--kc-ease);
  pointer-events: none;
}

.kc-toggle__badge--visible {
  opacity: 1;
  transform: scale(1);
  animation: kc-badge-pop 360ms var(--kc-ease);
}

@keyframes kc-badge-pop {
  0% { transform: scale(0.4); }
  55% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* ================================ Panel ==================================== */

.kc-panel {
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 396px;
  max-width: calc(100vw - 32px);

  /* dvh = viewport dinámico: en iOS/Android descuenta automáticamente la
     barra de direcciones y el teclado en pantalla, sin JS. `vh` queda
     como fallback para navegadores muy antiguos que no soportan dvh.
     Resta `--kc-panel-bottom-gap` (el mismo valor usado en `bottom`,
     arriba) más un margen superior de 32px para que la cabecera nunca
     quede pegada al borde de la ventana. */
  height: min(650px, calc(100vh - var(--kc-panel-bottom-gap) - var(--kc-top-safe) - 36px));
  height: min(650px, calc(100dvh - var(--kc-panel-bottom-gap) - var(--kc-top-safe) - 36px));

  background: var(--kc-panel-bg);
  border-radius: var(--kc-radius-panel);
  box-shadow: var(--kc-shadow);
  border: 1px solid var(--kc-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: calc(var(--kc-z) - 1);
  overscroll-behavior: contain;
  contain: layout style;

  opacity: 0;
  transform: translateY(18px) scale(0.94);
  transform-origin: bottom right;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 260ms var(--kc-ease), transform 320ms cubic-bezier(0.34, 1.42, 0.4, 1),
    visibility 0s linear 280ms;
}

.kc-panel--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 260ms var(--kc-ease), transform 320ms cubic-bezier(0.34, 1.42, 0.4, 1),
    visibility 0s linear 0s;
}

.kc-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px;
  background: linear-gradient(180deg, #17161c, var(--kc-ink));
  color: var(--kc-ivory);
  flex-shrink: 0;
  position: relative;
}

.kc-panel__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.kc-panel__monogram {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--kc-gold), var(--kc-gold-light));
  color: var(--kc-ink);
  font-family: var(--kc-font-display);
  font-weight: 700;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(201, 162, 77, 0.35);
}

.kc-panel__heading {
  min-width: 0;
}

.kc-panel__title {
  margin: 0;
  font-family: var(--kc-font-display);
  font-size: 17px;
  letter-spacing: 0.015em;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kc-panel__status {
  margin: 3px 0 0;
  font-size: 12px;
  color: rgba(251, 249, 245, 0.72);
  display: flex;
  align-items: center;
  gap: 6px;
}

.kc-panel__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--kc-online);
  box-shadow: 0 0 0 3px rgba(63, 157, 110, 0.22);
  animation: kc-status-pulse 2.4s ease-in-out infinite;
}

@keyframes kc-status-pulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(63, 157, 110, 0.22);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(63, 157, 110, 0.08);
  }
}

.kc-panel__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.kc-panel__reset,
.kc-panel__close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  background: rgba(251, 249, 245, 0.06);
  color: var(--kc-ivory);
  opacity: 0.85;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms ease, background 160ms ease, transform 160ms ease;
}

.kc-panel__reset svg {
  width: 16px;
  height: 16px;
}

.kc-panel__close svg {
  width: 18px;
  height: 18px;
}

.kc-panel__reset:hover,
.kc-panel__close:hover {
  opacity: 1;
  background: rgba(251, 249, 245, 0.12);
  transform: scale(1.05);
}

.kc-panel__reset:active,
.kc-panel__close:active {
  transform: scale(0.92);
}

.kc-panel__reset:focus-visible,
.kc-panel__close:focus-visible {
  outline: 2px solid var(--kc-gold);
  outline-offset: 2px;
}

/* ============================== Mensajes ==================================== */

.kc-panel__body {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
}

.kc-panel__messages {
  flex: 1;
  min-height: 0; /* imprescindible en flex para que overflow-y funcione bien */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--kc-surface-strong);
  scroll-behavior: smooth;
  /* Aísla el layout de la lista del resto del panel: reduce el costo de
     reflow en Safari iOS cuando el composer crece o el indicador de
     "escribiendo" aparece/desaparece mientras hay scroll en curso. */
  contain: layout style;
}

/* Botón flotante "ir al final": aparece solo si el usuario subió a leer
   historial y llega un mensaje nuevo, o si hay overflow y no está abajo. */
.kc-scrollbtn {
  position: absolute;
  right: 16px;
  bottom: 14px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--kc-border);
  background: var(--kc-panel-bg);
  color: var(--kc-text-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.14);
  opacity: 0;
  transform: translateY(8px) scale(0.85);
  visibility: hidden;
  pointer-events: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 200ms var(--kc-ease), transform 200ms var(--kc-ease),
    visibility 0s linear 200ms;
}

.kc-scrollbtn svg {
  width: 16px;
  height: 16px;
}

.kc-scrollbtn--visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms var(--kc-ease), transform 200ms var(--kc-ease), visibility 0s linear 0s;
}

.kc-scrollbtn:hover {
  color: var(--kc-ink);
  border-color: var(--kc-gold);
}

.kc-panel__messages::-webkit-scrollbar {
  width: 8px;
}

.kc-panel__messages::-webkit-scrollbar-thumb {
  background: var(--kc-border);
  border-radius: 8px;
}

.kc-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: kc-msg-in 320ms var(--kc-ease);
  contain: layout;
}

@keyframes kc-msg-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.kc-msg__bubble {
  padding: 11px 15px;
  border-radius: var(--kc-radius-bubble);
  font-size: 14.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.kc-msg__time {
  margin-top: 5px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--kc-text-soft);
  padding: 0 4px;
  opacity: 0.85;
}

.kc-msg--user {
  align-self: flex-end;
  align-items: flex-end;
}

.kc-msg--user .kc-msg__bubble {
  background: var(--kc-ink);
  color: var(--kc-ivory);
  border-bottom-right-radius: 5px;
}

.kc-msg--assistant {
  align-self: flex-start;
  align-items: flex-start;
}

.kc-msg--assistant .kc-msg__bubble {
  background: var(--kc-panel-bg);
  color: var(--kc-text);
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 2px 10px rgba(17, 17, 17, 0.05);
}

.kc-msg--error {
  align-self: flex-start;
  align-items: flex-start;
  max-width: 92%;
}

.kc-msg--error .kc-msg__bubble {
  background: var(--kc-error-bg);
  border: 1px solid rgba(177, 68, 47, 0.22);
  color: var(--kc-error);
  border-bottom-left-radius: 5px;
}

.kc-msg__retry {
  margin-top: 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(177, 68, 47, 0.3);
  background: transparent;
  color: var(--kc-error);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms ease;
}

.kc-msg__retry svg {
  width: 13px;
  height: 13px;
}

.kc-msg__retry:hover {
  background: rgba(177, 68, 47, 0.08);
}

.kc-msg__retry:focus-visible {
  outline: 2px solid var(--kc-error);
  outline-offset: 2px;
}

/* ============================ Indicador "escribiendo" ======================= */

.kc-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px 12px;
  background: var(--kc-surface-strong);
  color: var(--kc-text-soft);
  font-size: 12.5px;
  flex-shrink: 0;
}

.kc-typing__bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--kc-panel-bg);
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.05), 0 2px 10px rgba(17, 17, 17, 0.05);
}

.kc-typing__bubble span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--kc-gold-deep);
  animation: kc-bounce 1.2s infinite ease-in-out;
}

.kc-typing__bubble span:nth-child(2) {
  animation-delay: 0.15s;
}

.kc-typing__bubble span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes kc-bounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* ================================ Composer =================================== */

.kc-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px;
  padding-bottom: calc(14px + var(--kc-safe-bottom));
  border-top: 1px solid var(--kc-border);
  background: var(--kc-panel-bg);
  flex-shrink: 0;
}

.kc-composer__input {
  flex: 1;
  resize: none;
  max-height: var(--kc-composer-max-height);
  padding: 11px 15px;
  border-radius: 16px;
  border: 1px solid var(--kc-border);
  background: var(--kc-surface);
  color: var(--kc-text);
  font-family: var(--kc-font-body);
  font-size: 16px; /* clave: <16px dispara zoom automático en iOS Safari */
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.kc-composer__input::placeholder {
  color: var(--kc-text-soft);
}

.kc-composer__input:focus {
  outline: none;
  border-color: var(--kc-gold);
  background: var(--kc-panel-bg);
  box-shadow: 0 0 0 3px rgba(201, 162, 77, 0.16);
}

/* A propósito NO existe una regla :disabled aquí: el textarea nunca se
   deshabilita (ver chat-ui.js, setSending()). Solo cambia el botón. */

.kc-composer__send {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(160deg, var(--kc-gold-strong), var(--kc-gold));
  color: var(--kc-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, opacity 180ms ease, background 180ms ease;
}

.kc-composer__send svg {
  width: 17px;
  height: 17px;
  transform: translateX(-1px);
}

.kc-composer__send:hover:not(:disabled) {
  transform: scale(1.06);
}

.kc-composer__send:active:not(:disabled) {
  transform: scale(0.95);
}

.kc-composer__send:disabled {
  background: var(--kc-border);
  color: var(--kc-text-soft);
  cursor: not-allowed;
}

.kc-composer__send:focus-visible {
  outline: 2px solid var(--kc-ink);
  outline-offset: 2px;
}

.kc-panel__hint {
  margin: 0;
  padding: 0 18px 14px;
  font-size: 11px;
  color: var(--kc-text-soft);
  background: var(--kc-panel-bg);
  flex-shrink: 0;
}

/* ================================ Responsive ================================== */

/* Tablet / pantallas medianas: mismo panel flotante, un poco más compacto. */
@media (max-width: 900px) and (min-width: 601px) {
  .kc-panel {
    width: 360px;
  }
}

/* Móvil: bottom-sheet a pantalla completa. */
@media (max-width: 600px) {
  .kyrosch-chat-root {
    /* El .cart-fab no cambia de posición en móvil; el safe-area del
       home indicator hace el resto del ajuste. */
    --kc-offset-bottom: 88px;
  }

  .kc-toggle {
    right: 16px;
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }

  .kc-panel {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: min(90vh, 720px);
    height: min(90dvh, 720px);
    border-radius: var(--kc-radius-panel) var(--kc-radius-panel) 0 0;
    transform-origin: bottom center;
    padding-bottom: var(--kc-safe-bottom);
  }

  /* "Grabber" decorativo de bottom-sheet, como los sheets nativos de iOS. */
  .kc-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(251, 249, 245, 0.35);
    z-index: 1;
  }

  .kc-panel__header {
    padding-top: 22px;
  }

  .kc-msg {
    max-width: 90%;
  }

  .kc-composer {
    padding: 12px;
    padding-bottom: calc(12px + var(--kc-safe-bottom));
  }
}

/* ============================ Accesibilidad ===================================== */

/* ====================== Bloqueo de scroll (solo móvil) ========================= */

/* Cuando el sheet cubre toda la pantalla en móvil, evita que el body se
   desplace detrás del panel. Deliberadamente NO usa `position: fixed`
   sobre <body> (esa técnica exige guardar/restaurar scrollY y es la
   causante clásica de saltos y "congelamientos" al abrir el teclado en
   iOS). Un simple `overflow: hidden` no reposiciona nada, así que no
   hay nada que restaurar mal — ver ChatWidgetUI._setBodyScrollLock(). */
html.kc-scroll-lock,
html.kc-scroll-lock body {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .kc-toggle,
  .kc-toggle__ring,
  .kc-toggle__icon,
  .kc-toggle__badge,
  .kc-panel,
  .kc-panel__status-dot,
  .kc-msg,
  .kc-typing__bubble span,
  .kc-scrollbtn,
  .kc-composer__send {
    animation: none !important;
    transition: none !important;
  }
}

/* ==================== Quick Replies & Chips Dinámicos ======================= */
.kc-quick-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  margin-bottom: 4px;
}

.kc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--kc-surface);
  border: 1px solid var(--kc-border);
  border-radius: 20px;
  color: var(--kc-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  touch-action: manipulation;
  user-select: none;
}

.kc-chip:hover {
  background: var(--kc-gold-light);
  border-color: var(--kc-gold-strong);
  color: var(--kc-ink);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(201, 162, 77, 0.25);
}

.kc-chip:active {
  transform: scale(0.96);
  background: var(--kc-gold-strong);
}