/* ==========================================================================
   chatbox.css — Estilos del widget de chat guiado.

   Todos los colores y tipografias vienen de variables que `chatbox.js`
   inyecta en `:root` a partir de `config.json`. Los valores de aqui son
   solo el fallback para cuando el config todavia no ha cargado (o falla).
   ========================================================================== */

:root {
  --chat-primary: #2563eb;
  --chat-primary-soft: #e8effc;
  --chat-on-primary: #ffffff;
  --chat-secondary: #64748b;
  --chat-accent: #2563eb;
  --chat-background: #ffffff;
  --chat-surface: #f5f6f7;
  --chat-text: #1c1e21;
  --chat-text-muted: #606770;
  --chat-border: #e3e6ea;

  /* Burbujas y error.
   *
   * Se derivan de los colores de arriba, asi que un config.json que no las
   * traiga se ve exactamente igual que antes. Existen porque con una sola
   * `--chat-background` no se puede tener el panel oscuro y la burbuja del
   * asistente clara, que es justo lo que pide una marca de fondo oscuro. */
  --chat-bubble-bot: var(--chat-background);
  --chat-on-bubble-bot: var(--chat-text);
  --chat-bubble-user: var(--chat-primary);
  --chat-on-bubble-user: var(--chat-on-primary);
  --chat-error: #d93025;
  --chat-on-error: #ffffff;

  --chat-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chat-font-heading: var(--chat-font);
  --chat-radius: 12px;
  --chat-radius-bubble: 14px;
  --chat-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
  --chat-width: 380px;
  --chat-height: 560px;
  --chat-z: 2147483000;
}

/* --------------------------------------------------------------------------
   Boton lanzador
   -------------------------------------------------------------------------- */

.chat-launcher {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--chat-z);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 56px;
  height: 56px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--chat-primary);
  color: var(--chat-on-primary);
  font-family: var(--chat-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--chat-shadow);
  transition: transform 0.16s ease, filter 0.16s ease;
  /* Se puede arrastrar. `touch-action: none` es obligatorio: sin el, en un
     movil el navegador se queda el gesto para hacer scroll y el boton no se
     mueve. */
  touch-action: none;
}

.chat-launcher:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.chat-launcher--arrastrando {
  cursor: grabbing;
  transform: none;          /* sin el hover, que da tirones al arrastrar */
  filter: none;
  transition: none;
  opacity: 0.92;
}

.chat-launcher:focus-visible {
  outline: 3px solid var(--chat-accent);
  outline-offset: 3px;
}

.chat-launcher[aria-expanded="true"] {
  transform: scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.chat-launcher__icon {
  font-size: 20px;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Panel
   -------------------------------------------------------------------------- */

.chat-panel {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--chat-z);
  display: flex;
  flex-direction: column;
  width: var(--chat-width);
  max-width: calc(100vw - 32px);
  height: var(--chat-height);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius);
  background: var(--chat-background);
  color: var(--chat-text);
  font-family: var(--chat-font);
  box-shadow: var(--chat-shadow);
}

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

.chat-panel--opening {
  animation: chat-panel-in 0.18s ease-out;
}

@keyframes chat-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Cabecera --------------------------------------------------------------- */

.chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--chat-primary);
  color: var(--chat-on-primary);
}

.chat-header__avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 16px;
  overflow: hidden;         /* recorta el logo del cliente al circulo */
}

/* Cuando `branding.icono` es una imagen y no un emoji. */
.chat-header__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.chat-header__meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.chat-header__title {
  font-family: var(--chat-font-heading);
  font-size: 15px;
  font-weight: 600;
}

.chat-header__status {
  font-size: 12px;
  opacity: 0.85;
}

.chat-header__close {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.chat-header__close:hover {
  background: rgba(255, 255, 255, 0.18);
}

.chat-header__close:focus-visible {
  outline: 2px solid var(--chat-on-primary);
  outline-offset: -2px;
}

/* Mensajes --------------------------------------------------------------- */

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--chat-surface);
  scroll-behavior: smooth;
}

.chat-message {
  max-width: 82%;
  padding: 10px 13px;
  border-radius: var(--chat-radius-bubble);
  font-size: 14px;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}

.chat-message--bot {
  align-self: flex-start;
  border-bottom-left-radius: 4px;
  background: var(--chat-bubble-bot);
  color: var(--chat-on-bubble-bot);
  border: 1px solid var(--chat-border);
}

.chat-message--user {
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  background: var(--chat-bubble-user);
  color: var(--chat-on-bubble-user);
}

/* Los fallos --audio que no se envia, guiado que no encuentra el elemento--
 * salian como un aviso mas del sistema, del mismo color que "grabacion
 * cancelada". Un error que se ve igual que una notificacion rutinaria se lee
 * como una notificacion rutinaria. */
.chat-message--error {
  align-self: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--chat-error);
  color: var(--chat-on-error);
  font-size: 12px;
  text-align: center;
}

.chat-message--system {
  align-self: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--chat-primary-soft);
  color: var(--chat-text-muted);
  font-size: 12px;
  text-align: center;
}

.chat-message__time {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  opacity: 0.65;
}

/* Decisiones de un clic ---------------------------------------------------- */

/* Cuando el asistente ofrece algo --un recorrido guiado, retomar el que se
 * quedo a medias-- la respuesta son dos botones y no una frase que escribir.
 * Escribir "si" funciona solo si el modelo lo entiende; un boton funciona
 * siempre, y ademas deja claro cuales son las dos unicas salidas. */
.chat-decision {
  align-self: flex-start;
  max-width: 92%;
  padding: 12px 13px;
  border: 1px solid var(--chat-primary);
  border-radius: var(--chat-radius-bubble);
  border-bottom-left-radius: 4px;
  background: var(--chat-primary-soft);
}

.chat-decision__texto {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--chat-text);
}

.chat-decision__botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-decision__boton {
  padding: 8px 14px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: var(--chat-background);
  color: var(--chat-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.chat-decision__boton--principal {
  border-color: var(--chat-primary);
  background: var(--chat-primary);
  color: var(--chat-on-primary);
}

.chat-decision__boton:hover:not(:disabled) {
  filter: brightness(1.08);
}

/* Una decision ya tomada se queda a la vista, apagada. Borrarla dejaria la
 * conversacion sin explicar por que empezo el recorrido. */
.chat-decision__boton:disabled {
  cursor: default;
  opacity: 0.45;
}

.chat-decision__boton--elegido:disabled {
  opacity: 0.9;
}

/* Un ofrecimiento que se dejo pasar. Sigue en el historial --paso, y contarlo
 * es parte de la conversacion-- pero deja de pedir una respuesta. */
.chat-decision--caducada {
  border-color: var(--chat-border);
  background: transparent;
  opacity: 0.6;
}

/* Indicador de escritura -------------------------------------------------- */

.chat-typing {
  display: flex;
  gap: 4px;
  align-self: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--chat-border);
  border-radius: var(--chat-radius-bubble);
  border-bottom-left-radius: 4px;
  background: var(--chat-background);
}

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

.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chat-text-muted);
  animation: chat-bounce 1.2s infinite ease-in-out;
}

.chat-typing span:nth-child(2) { animation-delay: 0.16s; }
.chat-typing span:nth-child(3) { animation-delay: 0.32s; }

@keyframes chat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* Barra de grabacion ------------------------------------------------------ */

.chat-recording {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--chat-border);
  background: var(--chat-primary-soft);
  color: var(--chat-text);
  font-size: 13px;
}

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

.chat-recording__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d92d20;
  animation: chat-pulso 1.1s ease-in-out infinite;
}

@keyframes chat-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}

/* Vumetro: es lo unico que confirma que la voz se esta captando. Un punto
   rojo parpadea igual con el microfono silenciado. */
.chat-recording__level {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}

.chat-recording__level i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #d92d20;
  transform: scaleY(0.18);
  transform-origin: center;
  transition: transform 0.08s linear;
}

.chat-recording__time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.chat-recording__cancel {
  padding: 4px 10px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: var(--chat-background);
  color: var(--chat-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.chat-recording__cancel:hover {
  color: var(--chat-text);
  border-color: var(--chat-text-muted);
}

.chat-recording__cancel:focus-visible {
  outline: 2px solid var(--chat-primary);
  outline-offset: 2px;
}

/* Procesando la nota de voz ----------------------------------------------- */

.chat-processing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-top: 1px solid var(--chat-border);
  background: var(--chat-primary-soft);
  color: var(--chat-text-muted);
  font-size: 13px;
}

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

/* Barra indeterminada: no sabemos cuanto tardara la transcripcion, asi que no
   se finge un porcentaje de progreso. */
.chat-processing__barra {
  position: relative;
  flex: none;
  width: 64px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--chat-border);
}

.chat-processing__barra::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  border-radius: 999px;
  background: var(--chat-primary);
  animation: chat-recorrido 1.2s ease-in-out infinite;
}

@keyframes chat-recorrido {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* Formulario ------------------------------------------------------------- */

.chat-form {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border-top: 1px solid var(--chat-border);
  background: var(--chat-background);
}

.chat-input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--chat-border);
  border-radius: 999px;
  background: var(--chat-background);
  color: var(--chat-text);
  font-family: inherit;
  font-size: 14px;
}

.chat-input::placeholder {
  color: var(--chat-text-muted);
}

.chat-input:focus {
  outline: none;
  border-color: var(--chat-primary);
  box-shadow: 0 0 0 3px var(--chat-primary-soft);
}

.chat-icon-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--chat-border);
  border-radius: 50%;
  background: var(--chat-background);
  color: var(--chat-text-muted);
  font-size: 16px;
  cursor: pointer;
}

.chat-icon-button:hover {
  background: var(--chat-primary-soft);
  color: var(--chat-primary);
}

.chat-icon-button:focus-visible {
  outline: 2px solid var(--chat-primary);
  outline-offset: 2px;
}

.chat-icon-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* El halo se anima con box-shadow, no con transform: un boton que no para
   quieto es dificil de acertar, y ninguna herramienta que espere a que el
   elemento se estabilice (lectores, pruebas automaticas) podria pulsarlo. */
.chat-icon-button--recording {
  border-color: #d92d20;
  background: #d92d20;
  color: #ffffff;
  animation: chat-halo 1.4s ease-out infinite;
}

@keyframes chat-halo {
  0%   { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(217, 45, 32, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, 0); }
}

.chat-send {
  flex: none;
  height: 38px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  background: var(--chat-primary);
  color: var(--chat-on-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.chat-send:hover {
  filter: brightness(1.06);
}

.chat-send:focus-visible {
  outline: 2px solid var(--chat-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Popover de Driver.js tematizado con la paleta del cliente.
   Se aplica via `popoverClass` en la configuracion del driver.
   -------------------------------------------------------------------------- */

.driver-popover.chat-driver-popover {
  border-radius: var(--chat-radius);
  background: var(--chat-background);
  color: var(--chat-text);
  font-family: var(--chat-font);
  box-shadow: var(--chat-shadow);
}

.driver-popover.chat-driver-popover .driver-popover-title {
  font-family: var(--chat-font-heading);
  font-size: 16px;
  color: var(--chat-text);
}

.driver-popover.chat-driver-popover .driver-popover-description {
  color: var(--chat-text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.driver-popover.chat-driver-popover .driver-popover-progress-text {
  color: var(--chat-text-muted);
  font-size: 12px;
}

.driver-popover.chat-driver-popover button {
  border: 1px solid var(--chat-border);
  border-radius: 8px;
  background: var(--chat-surface);
  color: var(--chat-text);
  text-shadow: none;
  font-family: var(--chat-font);
  font-size: 13px;
}

.driver-popover.chat-driver-popover .driver-popover-next-btn {
  border-color: var(--chat-primary);
  background: var(--chat-primary);
  color: var(--chat-on-primary);
}

/* La X de la esquina es la unica salida evidente del recorrido: con el color
 * apagado de un texto secundario se leia como decoracion. */
.driver-popover.chat-driver-popover .driver-popover-close-btn {
  color: var(--chat-text);
  opacity: 0.75;
  font-size: 18px;
  line-height: 1;
}

.driver-popover.chat-driver-popover .driver-popover-close-btn:hover {
  opacity: 1;
  color: var(--chat-primary);
}

/* Flechas: heredan el fondo del popover en cada orientacion. */
.driver-popover.chat-driver-popover .driver-popover-arrow-side-left   { border-left-color: var(--chat-background); }
.driver-popover.chat-driver-popover .driver-popover-arrow-side-right  { border-right-color: var(--chat-background); }
.driver-popover.chat-driver-popover .driver-popover-arrow-side-top    { border-top-color: var(--chat-background); }
.driver-popover.chat-driver-popover .driver-popover-arrow-side-bottom { border-bottom-color: var(--chat-background); }

/* --------------------------------------------------------------------------
   Responsive y preferencias del usuario
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  /* Hoja anclada abajo, no pantalla completa.
   *
   * Ocupaba el alto entero y tapaba la web: el visitante perdia de vista lo
   * que estaba mirando. Al 75% se sigue viendo la pagina por encima, que es
   * justo lo que hace util un asistente que senala cosas.
   *
   * Las dos variables las calcula `chatbox.js` con `visualViewport`, porque el
   * teclado del movil reduce el area visible y ninguna unidad de CSS lo
   * refleja de forma fiable: `dvh` cuenta la barra del navegador, no el
   * teclado, y ademas iOS y Android no se comportan igual. Los valores de
   * reserva son para si el JS no llega a ejecutarse. */
  .chat-panel {
    right: 0;
    left: 0;
    bottom: var(--chat-inset-teclado, 0px);
    width: 100vw;
    max-width: 100vw;
    height: var(--chat-alto-panel, 75dvh);
    max-height: var(--chat-alto-panel, 75dvh);
    border: none;
    /* Esquinas superiores redondeadas: se lee como una hoja que sube desde
       abajo, y no como una pagina nueva. */
    border-radius: var(--chat-radius) var(--chat-radius) 0 0;
  }

  /* El area de mensajes es la que cede cuando entra el teclado. La cabecera y
     el formulario no encogen, asi que el campo de escritura sigue visible
     aunque queden pocos centimetros. */
  .chat-messages {
    min-height: 0;
  }

  .chat-header,
  .chat-form {
    flex: 0 0 auto;
  }

  .chat-launcher {
    right: 16px;
    bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-launcher,
  .chat-panel--opening,
  .chat-typing span,
  .chat-recording__dot,
  .chat-icon-button--recording,
  .chat-processing__barra::after {
    animation: none;
    transition: none;
  }

  /* El vumetro deja de saltar, pero sigue mostrando el nivel actual. */
  .chat-recording__level i {
    transition: none;
  }

  .chat-messages {
    scroll-behavior: auto;
  }
}