/*
 * El botón del chat (ac_intercom). Copia las medidas del botón de Intercom
 * (medido en acmotos.com el 30/09/2026: 48 px, a 20 px del borde derecho y del
 * de abajo, circular, icono blanco de 24 px), para que al cargarse Intercom el
 * suyo aparezca en el mismo sitio sin que se note el cambio.
 *
 * 🔑 La distancia al borde de abajo la lee front.js de aquí (getComputedStyle)
 * y se la pasa a Intercom como `vertical_padding`: un solo sitio para las
 * cuentas. Por encima de las barras fijas de abajo en móvil: la de «Añadir al
 * carrito» de la ficha (76 px) y la del total del checkout (72 px).
 *
 * z-index 1030: por encima de esas barras (1020) y por debajo de los modales
 * (1055) y del banner de cookies. El de Intercom ya va por encima de todo.
 */
.ac-chat {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1030;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  cursor: pointer;
  background: var(--ac-chat-color, #0071b2);
  border: 0;
  border-radius: 50%;
  transition: transform 0.16s ease;
}

.ac-chat[hidden] {
  display: none;
}

.ac-chat:hover {
  transform: scale(1.1);
}

.ac-chat:focus-visible {
  outline: 2px solid var(--ac-chat-color, #0071b2);
  outline-offset: 3px;
}

.ac-chat__icon {
  display: block;
  width: 21px;
  height: 24px;
  fill: currentColor;
}

/* Mientras llega Intercom: una rueda en lugar del icono. */
.ac-chat__spinner {
  display: none;
  width: 22px;
  height: 22px;
  border: 2px solid rgb(255 255 255 / 35%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ac-chat-spin 0.8s linear infinite;
}

.ac-chat.is-loading {
  cursor: progress;
}

.ac-chat.is-loading .ac-chat__icon {
  display: none;
}

.ac-chat.is-loading .ac-chat__spinner {
  display: block;
}

@keyframes ac-chat-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 1023px) {
  body#product .ac-chat {
    bottom: 92px;
  }

  body#checkout .ac-chat {
    bottom: 88px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ac-chat {
    transition: none;
  }

  .ac-chat:hover {
    transform: none;
  }
}

@media print {
  .ac-chat {
    display: none;
  }
}