/* Chat flotante: botón-señal, panel, cabecera, aviso de privacidad, estado vacío y caja de texto.
   Botones, campo, burbujas, marca "IA" y rayas salen de css/ui.css (los mismos del panel). */
.chat {
  --ui-toque: 2.75rem;
  --ui-pad: 1rem;
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: var(--letra-texto);
  color: var(--hueso);
  pointer-events: none;
}

.chat > * { pointer-events: auto; }

/* La señal: rombo naranja de "atención en la vía" con un globo de diálogo */
.chat-senal { flex: none; width: 40px; height: 40px; }
.chat-senal__fondo { fill: var(--naranja); }
.chat-senal__filo { fill: none; stroke: var(--tinta); stroke-width: 1.5; }
.chat-senal__globo { fill: var(--tinta); }
.chat-senal__raya { fill: var(--naranja); }

/* Botón flotante: oscuro para que se lea sobre el negro, la arena y el degradado naranja de la portada */
.chat__boton {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 6px 1.15rem 6px 6px;
  border: 0;
  border-radius: 999px;
  background: var(--carbon-2);
  color: var(--hueso);
  font-family: var(--letra-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px var(--ui-linea), 0 12px 32px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s var(--suave);
}

.chat__boton .chat-senal { transition: transform 0.35s var(--suave); }
.chat__boton:hover { transform: translateY(-2px); }
.chat__boton:hover .chat-senal,
.chat--abierto .chat__boton .chat-senal { transform: rotate(-12deg); }

/* Panel */
.chat__panel {
  display: flex;
  flex-direction: column;
  width: min(392px, calc(100vw - 1.5rem));
  height: min(640px, calc(100dvh - 7.5rem));
  overflow: hidden;
  background: var(--carbon);
  border-radius: var(--radio-m);
  box-shadow: inset 0 0 0 1px var(--raya-oscura), inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--ui-sombra);
  transform-origin: 100% 100%;
  animation: chat-abrir 0.22s var(--suave);
}

@keyframes chat-abrir {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.chat__cabecera {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.8rem 0.9rem 1rem;
  background: radial-gradient(120% 160% at 100% 0%, rgba(255, 107, 26, 0.2), rgba(255, 107, 26, 0) 58%);
}

/* Raya discontinua de carril: separa la cabecera del resto */
.chat__cabecera::after {
  content: "";
  position: absolute;
  inset: auto 1rem 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(244, 241, 234, 0.3) 0 14px, transparent 14px 24px);
}

.chat__cabecera .chat-senal { width: 34px; height: 34px; }
.chat__titulos { flex: 1; min-width: 0; }
.chat__titulo { font: 700 1.0625rem/1.2 var(--letra-titulo); letter-spacing: -0.015em; }
.chat__subtitulo { display: flex; align-items: center; gap: 0.4rem; color: var(--arena-2); font-size: var(--t-chico); }

/* Punto de estado: lleno naranja = IA, aro que late = esperando, lleno claro = persona */
.chat__subtitulo::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--naranja); }
.chat__panel[data-fase="esperando_soporte"] .chat__subtitulo::before {
  background: none;
  box-shadow: inset 0 0 0 2px var(--naranja-claro);
  animation: chat-latido 1.6s ease-in-out infinite;
}
.chat__panel[data-fase="con_soporte"] .chat__subtitulo::before { background: var(--arena); }

@keyframes chat-latido {
  50% { opacity: 0.35; }
}

.chat__cerrar { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.08); color: var(--hueso); transition: background-color 0.2s; }
.chat__cerrar:hover { background: rgba(255, 255, 255, 0.16); }
.chat__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Aviso de privacidad: una línea siempre a la vista; el resto se abre al tocarla */
.chat__aviso { flex: none; padding: 0 1rem; color: var(--arena); font-size: var(--t-chico); }
.chat__aviso summary { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; list-style: none; font-weight: 600; }
.chat__aviso summary::-webkit-details-marker { display: none; }
.chat__aviso summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: -3px 3px 0 auto;
  border-right: 2px solid var(--naranja-claro);
  border-bottom: 2px solid var(--naranja-claro);
  transform: rotate(45deg);
}
.chat__aviso[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.chat .chat__aviso p { max-width: 46ch; padding-bottom: 0.7rem; color: var(--arena-2); }

/* Sin conexión */
.chat .chat__red { flex: none; margin: 0 1rem 0.5rem; padding: 0.45rem 0.7rem; color: var(--naranja-claro); font-size: var(--t-chico);
  font-weight: 600; }

/* Caja de texto */
.chat__form { flex: none; padding: 0.7rem 0.8rem max(0.8rem, env(safe-area-inset-bottom)); background: var(--negro);
  box-shadow: 0 -1px 0 var(--raya-oscura); }
.chat__caja { min-height: 3.2rem; max-height: 8rem; padding: 0.55rem 0.75rem; resize: none; }
.chat__pie { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; }
.chat__soporte { padding-inline: 0.9rem; font-size: var(--t-chico); }
.chat__enviar { margin-left: auto; padding-inline: 1.2rem; }

/* El contador solo aparece cuando falta poco para el tope */
.chat__contador { display: none; color: var(--naranja-claro); font-size: var(--ui-t-mini); font-variant-numeric: tabular-nums; }
.chat__contador--lleno { display: block; }

/* Sin mensajes todavía: invitación y preguntas de ejemplo */
.chat__vacio { display: none; flex: 1; min-height: 0; overflow-y: auto; flex-direction: column; gap: 0.5rem; padding: 1rem; }
.chat__vacio > :first-child { margin-top: auto; } /* pegado a la caja, sin cortar el texto si no cabe */
.chat__panel--vacio .chat__vacio { display: flex; }
.chat__panel--vacio .chat__lista { display: none; }
.chat .chat__saludo { max-width: 17ch; margin-bottom: 0.4rem; font: 700 1.5rem/1.12 var(--letra-titulo); letter-spacing: -0.025em; }

.chat__sugerencia {
  flex: none;
  min-height: 44px;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--raya-oscura);
  border-radius: var(--radio-s);
  background: var(--carbon-2);
  color: var(--hueso);
  font-size: 0.875rem;
  text-align: left;
  transition: border-color 0.15s;
}
.chat__sugerencia:hover { border-color: var(--naranja); }

/* Mensajes: las burbujas son las de ui.css; aquí solo cómo llegan */
.chat .ui-msj { animation: chat-llega 0.18s var(--suave); }

@keyframes chat-llega {
  from { opacity: 0; transform: translateY(6px); }
}

/* Celular (o pantalla muy bajita): el panel ocupa toda la pantalla visible; --chat-alto y --chat-arriba
   los pone js/chat/teclado.js para que el teclado no tape la caja */
@media (max-width: 480px), (max-height: 560px) {
  html.chat-abierto { overflow: hidden; }
  .chat__etiqueta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .chat__boton { padding: 6px; }
  html.chat-abierto body { overflow: hidden; overscroll-behavior: none; }
  .chat--abierto { background: var(--carbon); overscroll-behavior: none; top: var(--chat-arriba, 0); right: 0; bottom: auto; left: 0; height: var(--chat-alto, 100dvh); gap: 0; }
  .chat--abierto .chat__panel { position: relative; width: 100%; height: 100%; border-radius: 0; box-shadow: none; transform-origin: 50% 100%; }
  .chat--abierto .chat__boton { display: none; }
}

/* Iconos de Enviar y de la persona: solo aparecen en el modo compacto */
.chat__icono-enviar, .chat__icono-persona { display: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; }

/* Modo compacto (teclado abierto, lo activa js/chat/teclado.js): cabecera de una línea, sin aviso ni raya, la caja
   y "Enviar" (flecha) en una sola fila y "Hablar con una persona" como icono junto al botón de cerrar */
@media (max-width: 480px), (max-height: 560px) {
  .chat--teclado .chat__cabecera { min-height: 44px; gap: 0.5rem; padding: 0 0.15rem 0 0.7rem; background: var(--carbon-2); }
  .chat--teclado .chat__cabecera::after,
  .chat--teclado .chat__aviso { display: none; }
  .chat--teclado .chat__cabecera .chat-senal { width: 26px; height: 26px; }
  .chat--teclado .chat__titulos { display: flex; align-items: baseline; gap: 0.5rem; }
  .chat--teclado .chat__panel[data-fase="asistente"] .chat__titulos { margin-right: 44px; }
  .chat--teclado .chat__titulo { flex: none; font-size: 0.9375rem; }
  .chat--teclado .chat__subtitulo { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; }
  .chat--teclado .chat__subtitulo::before { display: none; }
  .chat--teclado .chat__cerrar { background: none; }
  .chat--teclado .chat__vacio { padding: 0.6rem 0.8rem; gap: 0.4rem; }
  .chat--teclado .chat__saludo { font-size: 1.15rem; margin-bottom: 0.1rem; }
  .chat--teclado .chat__sugerencia { min-height: 40px; padding-block: 0.35rem; }
  .chat--teclado .chat__form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.4rem;
    padding: 0.4rem 0.5rem max(0.4rem, env(safe-area-inset-bottom)); }
  .chat--teclado .chat__caja { grid-column: 1; grid-row: 1; min-height: 44px; max-height: calc(4 * 1.4em + 1.1rem + 2px);
    padding-block: 0.55rem; overflow-y: auto; }
  .chat--teclado .chat__pie { display: contents; }
  .chat--teclado .chat__enviar { grid-column: 2; grid-row: 1; width: 44px; height: 44px; padding: 0; }
  .chat--teclado .chat__contador { grid-column: 1; grid-row: 2; }
  .chat--teclado .chat__soporte { position: absolute; top: 0; right: 46px; z-index: 1; width: 44px; height: 44px; padding: 0;
    border-color: transparent; }
  .chat--teclado .chat__icono-enviar,
  .chat--teclado .chat__icono-persona { display: block; width: 20px; height: 20px; }
  .chat--teclado .chat__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Las animaciones y transiciones ya las apaga css/base.css; aquí solo se quitan los giros al pasar el ratón */
@media (prefers-reduced-motion: reduce) {
  .chat__boton:hover,
  .chat__boton:hover .chat-senal,
  .chat--abierto .chat__boton .chat-senal { transform: none; }
}