/* ==========================================================================
   PreventGas — asistente flotante
   Un botón al borde derecho en todas las páginas, con una invitación que
   aparece sola la primera vez. Al tocarlo se abre una ventana con el chat.
   En celular la ventana ocupa la pantalla. Convive con el botón de WhatsApp:
   el asistente va arriba, el de WhatsApp queda abajo.
   ========================================================================== */

/* ── botón: redondo como el de WhatsApp, al lado, y se despliega al pasar ── */
.chat-ab {
  position: fixed; z-index: 150;
  right: calc(clamp(1rem, 3vw, 2rem) + 54px + .6rem);
  bottom: clamp(1rem, 3vw, 2rem);
  height: 54px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0;
  background: var(--ink); color: var(--card);
  box-shadow: 0 6px 20px rgba(20,18,16,.22);
  transition: transform .22s var(--ease), gap .22s var(--ease), padding .22s var(--ease);
}
.chat-ab__ico { width: 54px; height: 54px; display: grid; place-items: center; flex: none; }
.chat-ab svg { width: 26px; height: 26px; fill: var(--accent); }
/* La etiqueta vive colapsada y se abre con el cursor o con el foco de teclado:
   así ocupa lo mismo que el botón de WhatsApp mientras nadie la toca. */
.chat-ab__txt {
  max-width: 0; overflow: hidden; white-space: nowrap;
  font: 600 .8125rem/1 var(--head); letter-spacing: .01em;
  opacity: 0; transition: max-width .28s var(--ease), opacity .2s var(--ease);
}
.chat-ab:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(245,196,0,.45), 0 6px 20px rgba(20,18,16,.22); }
.chat-ab[hidden] { display: none; }
@media (hover: none) {
  /* Sin cursor no hay despliegue: queda redondo y listo. */
  .chat-ab:hover { padding-right: 0; }
  .chat-ab:hover .chat-ab__txt { max-width: 0; opacity: 0; }
}

/* ── invitación que aparece sola ── */
.chat-inv {
  position: fixed; z-index: 149;
  right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 70px);
  max-width: min(19rem, calc(100vw - 2.5rem));
  padding: 1rem 2.1rem 1.05rem 1.15rem;
  background: var(--card); color: var(--fg);
  /* Burbuja de conversación, no cartel de aviso: la esquina de abajo a la
     derecha se recoge y apunta al botón, que está justo ahí. La barra amarilla
     y el borde duro se van; lo que la despega del fondo es la sombra. */
  border: 0;
  border-radius: 20px 20px 6px 20px;
  box-shadow: 0 1px 2px rgba(20,18,16,.06), 0 16px 36px -14px rgba(20,18,16,.3);
  font-size: .8125rem; line-height: 1.45;
  animation: chat-entra .35s var(--ease) both;
}
.chat-inv[hidden] { display: none; }
.chat-inv b { display: block; font: 600 .875rem/1.3 var(--head); color: var(--ink); margin-bottom: .15rem; }
.chat-inv__x {
  position: absolute; top: .4rem; right: .4rem;
  width: 1.75rem; height: 1.75rem; border-radius: 999px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 1.05rem; line-height: 1; padding: 0;
  transition: background .18s var(--ease), color .18s var(--ease);
}
@keyframes chat-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chat-inv { animation: none; } }

/* ── ventana ── */
/* Por encima de la barra de navegación, que es pegajosa: en celular la
   ventana ocupa la pantalla y su cabecera tiene que quedar a la vista. */
.chat {
  position: fixed; z-index: 200;
  right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 70px);
  width: min(23.5rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100dvh - 7rem));   /* dvh: la barra del navegador se retrae */
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card);
  border: 0; border-radius: 22px;
  box-shadow: 0 2px 4px rgba(20,18,16,.05), 0 28px 64px -20px rgba(20,18,16,.42);
  animation: chat-entra .25s var(--ease) both;
}
.chat[hidden] { display: none; }
.chat__cab {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .85rem 1rem; background: var(--ink); color: var(--card); flex: none;
}
.chat__t { font: 600 .95rem/1.2 var(--head); }
.chat__estado {
  display: inline-block; margin-left: .5rem; padding: .12rem .4rem;
  font: 500 .625rem/1.4 var(--mono, var(--body)); letter-spacing: .04em;
  background: rgba(245,196,0,.22); color: var(--accent); border-radius: 999px;
}
.chat__cerrar { background: none; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 .2rem; }
.chat__aviso {
  margin: 0; padding: .6rem 1rem; font-size: .75rem; line-height: 1.45; color: var(--muted);
  border-bottom: 1px solid var(--border); flex: none;
}
.chat__hilo {
  display: flex; flex-direction: column; gap: .7rem;
  margin: 0; padding: 1rem; list-style: none;
  flex: 1 1 auto; min-height: 9rem; overflow-y: auto; overscroll-behavior: contain;
}
/* Cada mensaje es una burbuja: redonda, y con la esquina de abajo recogida del
   lado de quien habla. Es lo que vuelve legible de un vistazo quién dijo qué,
   sin necesidad de ningún rótulo. */
.chat__msg { max-width: 88%; padding: .7rem .95rem; border-radius: 18px; font-size: .8125rem; line-height: 1.5; }
.chat__msg--yo { align-self: flex-end; background: var(--ink); color: var(--card); border-bottom-right-radius: 5px; }
.chat__msg--bot { align-self: flex-start; background: var(--surface, #f2efe9); color: var(--fg); border-bottom-left-radius: 5px; }
.chat__msg p { margin: 0 0 .45rem; }
.chat__msg p:last-child { margin-bottom: 0; }
.chat__msg b { color: inherit; font-weight: 600; }
.chat__msg--bot b { color: var(--ink); }
.chat__puntos { display: inline-flex; gap: .25rem; }
.chat__puntos i { width: .35rem; height: .35rem; background: var(--muted); border-radius: 50%; animation: chatlat 1s infinite; }
.chat__puntos i:nth-child(2) { animation-delay: .15s; }
.chat__puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes chatlat { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat__puntos i { animation: none; opacity: .5; } }

.chat__eq {
  display: flex; gap: .6rem; align-items: center; margin-top: .5rem;
  padding: .55rem .7rem; background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; text-decoration: none;
}
.chat__eq img { width: 2.6rem; height: 2.6rem; object-fit: contain; flex: none; }
.chat__eq b { display: block; font: 600 .875rem/1.2 var(--head); color: var(--ink); }
.chat__eq small { font-size: .7rem; color: var(--muted); }
.chat__msg .btn { margin-top: .5rem; }

.chat__sug { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .75rem; flex: none; }
.chat__sug button {
  padding: .35rem .6rem; border: 1px solid var(--border-2); border-radius: 999px;
  background: var(--card); font: 500 .6875rem/1 var(--body); color: var(--fg); cursor: pointer;
}
.chat__form { display: flex; gap: .5rem; padding: .85rem 1rem; border-top: 1px solid var(--border); flex: none; }
.chat__form input {
  flex: 1; min-width: 0; padding: .65rem 1rem;
  border: 1px solid var(--border-2); border-radius: 999px;
  font: 500 .8125rem/1 var(--body); color: var(--fg); background: var(--card);
}
.chat__form input:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(245,196,0,.35); }
.chat__form .btn { padding: .6rem .9rem; font-size: .75rem; }

/* ── celular: la ventana ocupa la pantalla ── */
@media (max-width: 560px) {
  .chat {
    right: 0; left: 0; bottom: 0; top: 0;
    width: 100%; max-height: none; border-radius: 0; border: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .chat__hilo { max-height: none; }
  .chat-inv { bottom: calc(clamp(1rem, 3vw, 2rem) + 70px); }
}

/* -------------------------------------------------- hover solo con mouse
   En una pantalla táctil no hay hover: el navegador lo simula y el estilo
   queda pegado después de tocar. Estas reglas son las mismas de arriba,
   movidas acá sin cambiarles nada, para que solo corran donde hay puntero
   fino. El feedback táctil va por :active, que funciona en todo. */
@media (hover: hover) and (pointer: fine) {
  .chat-ab:hover, .chat-ab:focus-visible { transform: translateY(-2px); padding-right: 1.1rem; }
  .chat-ab:hover .chat-ab__txt, .chat-ab:focus-visible .chat-ab__txt { max-width: 11rem; opacity: 1; }
  .chat__sug button:hover { border-color: var(--ink); background: rgba(20,18,16,.05); }
  .chat-inv__x:hover { background: rgba(20,18,16,.07); color: var(--ink); }
}