/* ==========================================================================
   ELEVA PROJECT — Chat de n8n (ElevAI)
   --------------------------------------------------------------------------
   Adapta el widget oficial de n8n (@n8n/chat) a la identidad visual de
   Eleva Project: mismos colores, misma tipografía (Montserrat en título
   y cuerpo) y mismos radios de esquina que el resto de la web (ver
   bloque :root de assets/css/eleva.css).

   OJO — variables corregidas respecto al CSS original que nos pasaron:
   la versión actual del paquete @n8n/chat (1.35.x, la que sirve el enlace
   "latest" de jsdelivr) renombró estas variables con doble guion:
     --chat--color-primary          →  --chat--color--primary
     --chat--color-primary-shade-50 →  --chat--color--primary-shade-50
     --chat--color-primary-shade-100→  --chat--color--primary--shade-100
     --chat--color-secondary        →  --chat--color--secondary
   Con los nombres antiguos (un solo guion) el navegador los acepta sin
   error, pero el widget los ignora por completo y se queda con el rosa/
   verde de fábrica. Aquí usamos los nombres correctos, así que si algún
   día ves que los colores no aplican tras una actualización de n8n,
   empieza revisando por aquí.

   Este archivo se enlaza DESPUÉS de https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css
   en cada página, así que estas reglas ganan por orden de carga sin
   necesidad de !important salvo donde ya lo llevaba el CSS original.
   ========================================================================== */

:root {
  /* ---- Paleta — tomada directamente de assets/css/eleva.css ---- */
  --chat--color--primary: var(--azul-electrico, #66754C);
  --chat--color--primary-shade-50: var(--azul-electrico-clr, #A6AF97);   /* hover: más claro, como .btn--primario */
  --chat--color--primary--shade-100: var(--azul-electrico-osc, #4E593A); /* pulsado: más oscuro */
  --chat--color--secondary: var(--azul-noche, #523900);                  /* burbuja del usuario */
  --chat--color-secondary-shade-50: #5A5220; /* tono oscuro original: la burbuja se queda con el mismo contraste */
  --chat--color-white: #FFFFFF;
  --chat--color-light: var(--blanco-roto, #E9E2DD);
  --chat--color-light-shade-50: #EFECE8;
  --chat--color-light-shade-100: var(--borde, #DAD1C7);
  --chat--color-medium: var(--gris-tec, #9C8D69);
  --chat--color-dark: var(--azul-noche, #523900);
  --chat--color-disabled: var(--gris-tec, #9C8D69);
  --chat--color-typing: var(--gris-tec-texto, #816E42);

  /* ---- Tipografía de marca ---- */
  --chat--font-family: var(--font-body, 'Montserrat', 'Segoe UI', system-ui, sans-serif);

  /* ---- Espaciado y formas — alineadas con el resto de la web ---- */
  --chat--spacing: 1rem;
  --chat--border-radius: 12px;
  --chat--transition-duration: 0.15s;

  /* Tamaño de la ventana: el CSS original traía 800x600, que en pantalla
     se ve como un panel enorme en vez de una ventana de chat. Lo dejamos
     en un tamaño habitual para un widget de chat web (más alto que ancho,
     como WhatsApp Web o Intercom). Los límites max-width/max-height del
     propio widget ya lo ajustan en pantallas pequeñas, así que en móvil
     ocupa el ancho disponible sin desbordar. */
  --chat--window--width: 400px;
  --chat--window--height: 640px;
  --chat--window--border: 1px solid var(--borde, #DAD1C7);
  --chat--window--border-radius: 20px; /* mismo radio que las tarjetas grandes (--r-lg) */
  --chat--window--z-index: 9999;

  --chat--header-height: auto;
  --chat--header--padding: var(--chat--spacing);
  --chat--header--background: var(--azul-noche-2, #67511F);
  --chat--header--color: #FFFFFF;
  --chat--header--border-top: none;
  --chat--header--border-bottom: none;
  --chat--header--border-left: none;
  --chat--header--border-right: none;
  --chat--heading--font-size: 1.6em;
  --chat--subtitle--font-size: inherit;
  --chat--subtitle--line-height: 1.6;

  --chat--textarea--height: 50px;

  --chat--message--font-size: 1rem;
  --chat--message--padding: var(--chat--spacing);
  --chat--message--border-radius: 14px;
  --chat--message-line-height: 1.6;
  --chat--message--bot--background: #FFFFFF;
  --chat--message--bot--color: var(--azul-noche, #523900);
  --chat--message--bot--border: 1px solid var(--borde, #DAD1C7);
  --chat--message--user--background: var(--azul-noche, #523900);
  --chat--message--user--color: #FFFFFF;
  --chat--message--user--border: none;
  --chat--message--pre--background: rgba(0, 0, 0, 0.05);

  --chat--body--background: var(--blanco-roto, #E9E2DD);
  --chat--footer--background: var(--blanco-roto, #E9E2DD);
  --chat--footer--color: var(--gris-tec, #9C8D69);

  /* ---- Botones de dentro del chat (enviar, sugerencias…) ---- */
  --chat--button--border-radius: 10px;
  --chat--button--color--primary: #FFFFFF;
  --chat--button--background--primary: var(--azul-electrico, #66754C);
  --chat--button--background--primary--hover: var(--azul-electrico-clr, #A6AF97);
  --chat--input--send--button--color: var(--azul-electrico, #66754C);
  --chat--input--send--button--color-hover: var(--azul-electrico-osc, #4E593A);
  --chat--input--button--border-radius: 12px;

  /* ---- El botón flotante: tamaño base, la forma se define más abajo ---- */
  --chat--toggle--size: 60px;
  --chat--toggle--background: #FFFFFF;
  --chat--toggle--hover--background: #FFFFFF;
  --chat--toggle--active--background: var(--blanco-roto, #E9E2DD);
  --chat--toggle--color: var(--azul-electrico, #66754C);
  --chat--toggle--border-radius: 16px; /* cuadrado redondeado, no círculo — ver bloque de abajo */
}

/* --------------------------------------------------------------------------
   Título del saludo ("¡Hola!") en Montserrat, como el resto de titulares
   de la web. El resto del chat se queda en la tipografía de cuerpo.
   -------------------------------------------------------------------------- */
.chat-window-wrapper .chat-header h1 {
  font-family: var(--font-marvin, 'Montserrat', 'Segoe UI', sans-serif);
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* --------------------------------------------------------------------------
   BOTÓN FLOTANTE CON FORMA DE NODO DE N8N
   --------------------------------------------------------------------------
   En el canvas de n8n cada nodo es un cuadrado redondeado, de fondo claro,
   con el icono de la app centrado y dos "conectores" a los lados. Este
   bloque reproduce esa forma para el botón que abre/cierra el chat:
   cuadrado redondeado (no círculo), fondo blanco, borde e icono en el
   azul de marca, con dos puntos de conexión sobresaliendo a los lados,
   igual que los puntos de entrada/salida de un nodo real.
   -------------------------------------------------------------------------- */
.chat-window-wrapper .chat-window-toggle {
  position: relative;
  border: 1.5px solid var(--borde, #DAD1C7);
  box-shadow: 0 8px 24px rgba(82, 57, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.chat-window-wrapper .chat-window-toggle svg {
  width: 26px;
  height: 26px;
}
/* Al pasar el ratón o al abrir el chat, el borde se ilumina de azul —
   el mismo gesto que hace n8n cuando seleccionas un nodo en el canvas. */
.chat-window-wrapper .chat-window-toggle:hover,
.chat-window-wrapper .chat-window-toggle:focus-visible {
  border-color: var(--azul-electrico, #66754C);
  transform: translateY(-2px);
}
.chat-window-wrapper .chat-window-toggle:active {
  transform: translateY(0) scale(0.96);
}

/* Los dos "conectores" del nodo: puntos que sobresalen a izquierda y
   derecha, a media altura, tal cual los puertos de entrada/salida. */
.chat-window-wrapper .chat-window-toggle::before,
.chat-window-wrapper .chat-window-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9px;
  height: 9px;
  background: #FFFFFF;
  border: 1.5px solid var(--gris-tec, #9C8D69);
  border-radius: 50%;
  transform: translateY(-50%);
}
.chat-window-wrapper .chat-window-toggle::before { left: -6px; }
.chat-window-wrapper .chat-window-toggle::after { right: -6px; }

/* --------------------------------------------------------------------------
   POSICIÓN — el botón se coloca abajo a la IZQUIERDA a propósito.
   Abajo a la derecha ya viven los flotantes de Instagram y WhatsApp
   (.flotantes en eleva.css); poner el chat en el lado contrario evita
   que los tres botones se amontonen o se tapen entre sí.
   Si preferís los tres juntos a la derecha, hay que quitar este bloque
   y decírnoslo para calcular el hueco encima de esos dos botones.
   -------------------------------------------------------------------------- */
.chat-window-wrapper {
  right: auto;
  left: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
}
@media (max-width: 620px) {
  .chat-window-wrapper {
    left: 1rem;
    bottom: calc(1rem + env(safe-area-inset-bottom));
  }
}

/* --------------------------------------------------------------------------
   QUITAR EL "POWERED BY N8N"
   -------------------------------------------------------------------------- */
.chat-powered-by {
  display: none;
}