/* ===================================================================
   CHATBOT — piel del tema Altura
   ===================================================================

   El widget es uno solo para los dos diseños (public/js/chatbot-widget.js
   + public/css/chatbot-widget.css). Este archivo no lo reemplaza: lo pinta
   encima, y sólo lo carga el layout de Altura. El diseño anterior no ve una
   línea de esto.

   Todo cuelga de `body.altura`, la clase que ya pone el layout. Así, aunque
   algún día este archivo se colara en otra página, no tocaría nada.

   Los colores salen de los tokens de la paleta —`--ink`, `--bronze`,
   `--cream`— así que el chatbot cambia de color junto con el resto del sitio
   cuando la inmobiliaria elige otra combinación. No hay ningún color escrito
   a mano que haya que mantener en dos lados.

   Sobre los `!important`: el JS del widget escribe el color de fondo del botón
   y de los globos del visitante en el atributo `style`, y un estilo en línea le
   gana a cualquier regla. Se usan sólo donde hace falta pisar eso, no por
   comodidad. Ver createWidget() y appendMessage() en chatbot-widget.js.
   =================================================================== */

/* ------------------------------ EL BOTÓN --------------------------- */
/*
   Toma el lenguaje del "Hablemos" de la portada: píldora, borde claro fino y
   vidrio. El widget lo trae redondo, con borde blanco grueso y un halo; acá se
   apaga todo eso.

   Lo que NO se copia del Hablemos es lo translúcido. Aquel vive sobre la foto
   de la portada, siempre oscura. Éste es fijo: acompaña al visitante por toda
   la página y termina sobre las secciones crema y sobre tarjetas blancas.

   Medido: con el relleno al 34% del Hablemos, el ícono blanco quedaba en 2,2:1
   sobre blanco —el mínimo para un control es 3— y el botón se veía lavado.
   Al 82% da 10,9:1 sobre blanco y 18,2:1 sobre la foto, y sigue dejando pasar
   algo de fondo. Si algún día se sube el relleno, comprobar los dos casos: el
   claro es el que manda.
*/
body.altura #chatbot-fab {
  width: auto;
  height: 52px;
  padding: 0 1.4rem;
  gap: .6rem;
  border-radius: 999px;
  background: rgba(20, 18, 15, .82) !important;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  box-shadow: 0 6px 20px rgba(20, 18, 15, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-sans);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
}

/*
   Al pasar el mouse se aclara un poco, no se transparenta: aclarar hasta el
   blanco translúcido —como hace el Hablemos— devolvería el problema de arriba
   justo cuando el visitante está por hacer clic.
*/
body.altura #chatbot-fab:hover {
  background: rgba(20, 18, 15, .92) !important;
  border-color: #fff;
  transform: translateY(-2px);
}

body.altura #chatbot-fab svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/*
   La palabra al lado del ícono. La agrega el CSS y no el JS para no tocar el
   widget compartido: así el diseño viejo sigue con su botón redondo.

   Se esconde en pantallas chicas —abajo— donde una píldora ancha se come el
   ancho de la página.
*/
body.altura #chatbot-fab::after {
  content: "Consultar";
  white-space: nowrap;
}

/* ----------------------------- LA VENTANA -------------------------- */
body.altura #chatbot-window {
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--line, rgba(20, 18, 15, .12));
  box-shadow: 0 18px 50px rgba(20, 18, 15, .22);
  font-family: var(--font-sans);
  background: var(--cream, #faf8f4);
}

body.altura #chatbot-header {
  background: var(--ink, #14120f) !important;
  color: var(--cream, #faf8f4);
  border-bottom: 0;
}

/* El nombre de la inmobiliaria, con la serif del tema: es lo mismo que hace
   el encabezado del sitio. */
body.altura #chatbot-header-name {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
  font-size: 1.02rem;
}

body.altura #chatbot-header-status {
  color: rgba(255, 255, 255, .62);
  letter-spacing: .02em;
}

body.altura #chatbot-header-logo {
  border: 1px solid rgba(255, 255, 255, .22);
}

body.altura #chatbot-messages {
  background: var(--cream-2, #f1ece3);
}

/* ----------------------------- LOS GLOBOS -------------------------- */
/*
   Menos redondeados que los del widget: el tema usa esquinas de 4 y 8 px en
   todo el sitio, y un globo de 16 px al lado de las tarjetas de propiedad se
   ve de otra familia.
*/
body.altura .chatbot-msg {
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.55;
}

body.altura .chatbot-msg.chatbot-user {
  background: var(--ink, #14120f) !important;
  color: var(--cream, #faf8f4);
  border-bottom-right-radius: 3px;
}

body.altura .chatbot-msg.chatbot-assistant {
  background: var(--white, #fff);
  color: var(--ink-700, #3a352d);
  border: 1px solid var(--line, rgba(20, 18, 15, .1));
  box-shadow: none;
  border-bottom-left-radius: 3px;
}

/* El enlace dentro de un globo del asistente: el bronce de la paleta. */
body.altura .chatbot-msg.chatbot-assistant a {
  color: var(--bronze-dk, #937343);
  text-underline-offset: 2px;
}

/* --------------------------- ESCRIBIENDO… -------------------------- */
body.altura .chatbot-typing span {
  background: var(--bronze, #b08d57);
}

/* ------------------------ LA CAJA DE ESCRIBIR ---------------------- */
body.altura #chatbot-input-area {
  background: var(--white, #fff);
  border-top: 1px solid var(--line, rgba(20, 18, 15, .1));
}

body.altura #chatbot-input {
  border-radius: 999px;
  border: 1px solid var(--line, rgba(20, 18, 15, .14));
  background: var(--cream, #faf8f4);
  font-family: var(--font-sans);
  font-size: .88rem;
  color: var(--ink, #14120f);
}

body.altura #chatbot-input:focus {
  border-color: var(--bronze, #b08d57);
  box-shadow: 0 0 0 3px rgba(176, 141, 87, .16);
}

body.altura #chatbot-send-btn {
  background: var(--bronze, #b08d57) !important;
  color: var(--on-bronze, #fff);
  border-radius: 999px;
}

body.altura #chatbot-send-btn:hover:not(:disabled) {
  background: var(--bronze-dk, #937343) !important;
}

/* ---------------------- TARJETAS DE PROPIEDAD ---------------------- */
body.altura .chatbot-property-card {
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--line, rgba(20, 18, 15, .1));
  box-shadow: none;
  transition: border-color var(--t, 220ms ease), transform var(--t, 220ms ease);
}

body.altura .chatbot-property-card:hover {
  border-color: var(--bronze, #b08d57);
  transform: translateY(-1px);
}

body.altura .chatbot-property-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.01em;
}

body.altura .chatbot-property-card-price {
  color: var(--bronze-dk, #937343);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------ CELULAR ---------------------------- */
/*
   La píldora con texto ocupa lugar y en un teléfono compite con el contenido.
   Abajo de 560 px vuelve a ser un botón redondo, como el del widget.
*/
@media (max-width: 560px) {
  body.altura #chatbot-fab {
    width: 54px;
    height: 54px;
    padding: 0;
    gap: 0;
  }

  body.altura #chatbot-fab::after { content: none; }
}

/*
   Abajo de 480 el widget compartido pone la ventana a pantalla completa y le
   saca el redondeo. Las reglas de arriba son más específicas —llevan
   `body.altura`— así que le ganaban y la dejaban con esquinas redondeadas y
   borde ocupando toda la pantalla: se veía el fondo de la página asomando en
   las cuatro puntas.

   El corte es 480 y no 560 a propósito: es el del widget, y son estas dos
   reglas las que tienen que seguirlo.
*/
@media (max-width: 480px) {
  body.altura #chatbot-window {
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
}