/* ============================================================
   Barbería Lastarria · chatbot
   Un solo botón flotante en toda la pantalla. No hay burbuja de
   WhatsApp aparte: dos elementos flotando en la esquina de un
   teléfono se estorban.
   ============================================================ */

/* ---------- 1 · Cerrado ---------- */

.chat-lanzador {
  position: fixed;
  right: var(--chat-margen);
  bottom: var(--chat-margen);
  z-index: var(--z-chat);
  width: var(--chat-boton);
  height: var(--chat-boton);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ambar);
  color: var(--sobre-ambar);
  border: 1px solid var(--ambar);
  border-radius: var(--radio-circulo);
  cursor: pointer;
  transition: background-color .15s ease;
}
.chat-lanzador:hover { background: var(--ambar-hover); border-color: var(--ambar-hover); }

/* ---------- 2, 3 y 4 · Panel abierto ---------- */

.chat-panel {
  position: fixed;
  right: var(--chat-margen);
  bottom: calc(var(--chat-margen) + var(--chat-boton) + var(--e-3));
  z-index: var(--z-chat);
  width: 360px;
  max-width: calc(100vw - var(--chat-margen) * 2);
  max-height: min(560px, calc(100vh - var(--chat-margen) * 2 - var(--chat-boton) - var(--e-3)));
  display: flex;
  flex-direction: column;
  background: var(--negro-humo);
  border: var(--borde-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--grafito);
  border-bottom: var(--borde);
  flex-shrink: 0;
}
.chat-punto { width: 8px; height: 8px; background: var(--ambar); display: block; }
.chat-titulo { font-size: 13.5px; font-weight: var(--p-medio); }
.chat-cerrar {
  margin-left: auto;
  width: var(--tactil-min);
  height: var(--tactil-min);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: var(--humo);
  cursor: pointer;
}
.chat-cerrar:hover { color: var(--hueso); }

.chat-cuerpo {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Burbuja del bot: fondo Negro humo con borde Línea, a la izquierda */
.chat-bot {
  align-self: flex-start;
  max-width: 92%;
  padding: 11px 12px;
  background: var(--negro-humo);
  border: var(--borde);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--hueso);
}

/* Pregunta del usuario: a la derecha, borde más marcado, sin cola */
.chat-usuario {
  align-self: flex-end;
  max-width: 82%;
  padding: 9px 12px;
  background: var(--negro-humo);
  border: var(--borde-fuerte);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--hueso);
}

.chat-opciones { display: flex; flex-direction: column; gap: 8px; }

.chat-opcion {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: var(--tactil-min);
  padding: 12px;
  background: transparent;
  border: var(--borde);
  border-radius: var(--radio);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--hueso);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.chat-opcion:hover { border-color: var(--hueso); color: var(--hueso); }
.chat-opcion svg { flex-shrink: 0; }

/* WhatsApp: en Ámbar, como en todo el resto del sitio.
   El Ámbar es el único color de acción; la jerarquía se marca con
   el relleno frente al outline de las demás opciones, no con un
   segundo color. */
.chat-opcion-wa {
  background: var(--ambar);
  border-color: var(--ambar);
  color: var(--sobre-ambar);
  font-weight: var(--p-medio);
}
.chat-opcion-wa:hover {
  background: var(--ambar-hover);
  border-color: var(--ambar-hover);
  color: var(--sobre-ambar);
}

/* Salida de escape + volver. Va en toda rama. */
.chat-pie {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: var(--borde);
}
.chat-volver {
  align-self: flex-start;
  min-height: var(--tactil-min);
  padding: 0 2px;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--humo);
  cursor: pointer;
}
.chat-volver:hover { color: var(--ambar); }

/* El aviso que evita que el árbol parezca saber más de lo que sabe */
.chat-limite {
  flex-shrink: 0;
  padding: 10px 14px;
  border-top: var(--borde);
  background: var(--grafito);
  font-size: 11px;
  line-height: 1.5;
  color: var(--humo);
}

/* ---------- Móvil ----------
   Margen más chico y panel a lo ancho. El espacio que el botón
   ocupa se compensa con padding al final de la página: así el
   botón flotante nunca tapa un "+" del catálogo ni un CTA.
   ------------------------------------------------------------- */

@media (max-width: 767px) {
  :root { --chat-margen: 16px; --chat-boton: 56px; }
  .chat-panel {
    right: var(--chat-margen);
    left: var(--chat-margen);
    width: auto;
    max-width: none;
  }
}

/* Colchón al final de la página, para que nada quede bajo el botón */
body { padding-bottom: calc(var(--chat-boton) + var(--chat-margen) * 2); }