/* =========================================================================
   SCALAR — landing page
   chatbot.css — burbuja + panel del asistente guiado (árbol de decisiones
   simulando un chat de WhatsApp). Todo el contenido lo inyecta js/chatbot.js;
   acá sólo vive el look & feel. Vive en las 3 páginas (index/audaces/vesto),
   linkeado después de footer.css y antes de responsive.css — ver el orden
   documentado en css/variables.css.

   z-index 400: por encima del navbar (100, ver navbar.css) y del modal de
   catálogo (300, ver catalogo.css) — siempre alcanzable, incluso con el
   navbar mobile abierto. */

.scalar-chat-bubble{
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 400;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(8, 14, 30, 0.45);
  transition: transform 0.2s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth);
}
.scalar-chat-bubble:hover{ transform: scale(1.06); box-shadow: 0 14px 34px rgba(8, 14, 30, 0.55); }
.scalar-chat-bubble:active{ transform: scale(0.94); }
/* El ícono de "cerrar" (X) y el de "chat" conviven en el DOM, superpuestos
   (position:absolute centrado — el propio botón, position:fixed, ya es
   containing block), y se cruzan con fade + rotación en vez del swap
   instantáneo por display que tenía antes, mismo mecanismo de fondo que
   .navbar-logo-mark (crossfade entre 2 imágenes). */
.scalar-chat-bubble svg{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s var(--ease-smooth), transform 0.2s var(--ease-smooth);
}
.scalar-chat-bubble .scalar-chat-icon-close{ opacity: 0; transform: translate(-50%, -50%) rotate(-45deg) scale(0.5); }
.scalar-chat-bubble.is-open .scalar-chat-icon-chat{ opacity: 0; transform: translate(-50%, -50%) rotate(45deg) scale(0.5); }
.scalar-chat-bubble.is-open .scalar-chat-icon-close{ opacity: 1; transform: translate(-50%, -50%); }

/* 3 pulsos cortos al cargar la página para llamar la atención sin ser
   invasivo (se detiene solo, animation-iteration-count, no hace falta JS
   para pararla). */
@keyframes scalarChatPulse{
  0%, 100%{ box-shadow: 0 10px 30px rgba(8, 14, 30, 0.45), 0 0 0 0 rgba(59, 107, 245, 0.55); }
  50%{ box-shadow: 0 10px 30px rgba(8, 14, 30, 0.45), 0 0 0 10px rgba(59, 107, 245, 0); }
}
.scalar-chat-bubble.is-pulsing{ animation: scalarChatPulse 1.8s ease-out 3; }

.scalar-chat-panel{
  position: fixed;
  right: 24px;
  bottom: 94px;
  z-index: 400;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 150px);
  background: var(--bg-2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(8, 14, 30, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform-origin: bottom right; /* "nace" desde la esquina de la burbuja, no desde el centro */
  transform: translateY(16px) scale(0.92);
  pointer-events: none;
  /* cubic-bezier con leve rebote (overshoot) en vez de --ease-smooth: da
     la sensación de "pop" al abrir, consistente con el resto de micro-
     interacciones nuevas de este widget (ver scalarChatEnter más abajo). */
  transition: opacity 0.22s ease-out, transform 0.28s cubic-bezier(.34, 1.56, .64, 1);
}
.scalar-chat-panel.is-open{
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.scalar-chat-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.scalar-chat-header-title{ font-size: 14px; font-weight: 700; color: var(--text); }
.scalar-chat-header-sub{ font-size: 12px; color: var(--text-dim); }
.scalar-chat-advisor-link{
  font-size: 12px;
  font-weight: 600;
  color: var(--blue-light);
  text-decoration: none;
  white-space: nowrap;
}
.scalar-chat-advisor-link:hover{ text-decoration: underline; }

.scalar-chat-messages{
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain; /* evita que el scroll "se pase" a la página al llegar al tope/fondo del panel */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* Firefox (Chrome/Edge/Safari ignoran esto y usan las reglas
     ::-webkit-scrollbar de abajo). */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.scalar-chat-messages::-webkit-scrollbar{ width: 6px; }
.scalar-chat-messages::-webkit-scrollbar-track{ background: transparent; }
.scalar-chat-messages::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.25);
  border-radius: 999px;
}
.scalar-chat-messages::-webkit-scrollbar-thumb:hover{ background: rgba(255, 255, 255, 0.4); }

/* Entrada compartida por todo lo que se agrega al historial del chat
   (mensajes, opciones, tarjetas de producto, CTA, "volver a empezar") —
   "both" para que arranque ya en el estado "from" sin parpadeo antes de
   que corra la animación. Cada elemento nuevo la dispara solo al
   insertarse en el DOM, no hace falta togglear clases desde JS. */
@keyframes scalarChatEnter{
  from{ opacity: 0; transform: translateY(8px) scale(0.97); }
  to{ opacity: 1; transform: none; }
}
/* Salida corta antes de sacar del DOM un elemento ya resuelto (las
   opciones elegidas, el indicador de "escribiendo…") — ver
   removeWithFade() en js/chatbot.js, que togglea esta clase y recién
   después de que termina hace el remove() real. */
@keyframes scalarChatExit{
  to{ opacity: 0; transform: translateY(-4px) scale(0.97); }
}
.scalar-chat-exit{
  animation: scalarChatExit 0.18s ease-in forwards;
  pointer-events: none;
}

.scalar-chat-msg{
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  animation: scalarChatEnter 0.25s var(--ease-smooth) both;
}
.scalar-chat-msg--bot{
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.scalar-chat-msg--user{
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* "Está escribiendo…": 3 puntitos que rebotan en cascada, mismo bubble que
   .scalar-chat-msg--bot — se reemplaza por el próximo mensaje real cuando
   termina el delay simulado (ver js/chatbot.js). */
.scalar-chat-typing{ display: flex; gap: 4px; align-items: center; padding: 4px 2px; }
.scalar-chat-typing span{
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-dim);
  animation: scalarChatTypingDot 1.1s infinite ease-in-out;
}
.scalar-chat-typing span:nth-child(2){ animation-delay: 0.15s; }
.scalar-chat-typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes scalarChatTypingDot{
  0%, 80%, 100%{ transform: translateY(0); opacity: 0.5; }
  40%{ transform: translateY(-4px); opacity: 1; }
}

.scalar-chat-options{
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}
.scalar-chat-option{
  text-align: left;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  animation: scalarChatEnter 0.22s var(--ease-smooth) both;
  /* animation-delay propio por botón, seteado desde JS (ver addOptions en
     js/chatbot.js) — hace que la lista de opciones entre en cascada en
     vez de todas de golpe. */
  transition: background 0.15s var(--ease-smooth), border-color 0.15s var(--ease-smooth), transform 0.1s var(--ease-smooth);
}
.scalar-chat-option:hover{ background: rgba(59, 107, 245, 0.15); border-color: var(--blue); }
.scalar-chat-option:active{ transform: scale(0.98); }

.scalar-chat-card{
  align-self: stretch;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  animation: scalarChatEnter 0.25s var(--ease-smooth) both;
}
.scalar-chat-card-name{ font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.scalar-chat-card-desc{ font-size: 12.5px; color: var(--text-dim); line-height: 1.4; margin-bottom: 8px; }
.scalar-chat-card-link{ font-size: 12.5px; font-weight: 600; color: var(--blue-light); text-decoration: none; }
.scalar-chat-card-link:hover{ text-decoration: underline; }

.scalar-chat-cta{
  align-self: stretch;
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  animation: scalarChatEnter 0.25s var(--ease-smooth) both;
  transition: background 0.15s var(--ease-smooth), transform 0.1s var(--ease-smooth);
}
.scalar-chat-cta:hover{ background: var(--blue-light); }
.scalar-chat-cta:active{ transform: scale(0.98); }

.scalar-chat-restart{
  align-self: center;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 2px;
  animation: scalarChatEnter 0.25s var(--ease-smooth) both;
  transition: color 0.15s var(--ease-smooth);
}
.scalar-chat-restart:hover{ color: var(--text); }

/* Quien pidió menos movimiento en el sistema operativo no necesita las
   entradas/salidas/pulso/rebote de arriba — se cortan todas acá, queda
   sólo el fade de apertura del panel (ya lo suficientemente informativo
   sin movimiento de por medio). */
@media (prefers-reduced-motion: reduce){
  .scalar-chat-bubble.is-pulsing,
  .scalar-chat-msg,
  .scalar-chat-option,
  .scalar-chat-card,
  .scalar-chat-cta,
  .scalar-chat-restart,
  .scalar-chat-exit,
  .scalar-chat-typing span{
    animation: none;
  }
  .scalar-chat-panel,
  .scalar-chat-bubble svg{
    transition: opacity 0.15s linear;
    transform: none;
  }
}