/* ZelvIA 2.0 — Chat surface and real request states. */

.chat-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.zv-chat-open { overflow: hidden; }

.chat-backdrop {
  position: fixed;
  z-index: 990;
  inset: 76px 0 0;
  background: color-mix(in srgb, var(--zv-color-bg) 84%, transparent);
  opacity: 0;
  transition: opacity 180ms var(--zv-motion-enter-easing);
}

.chat-backdrop.is-open { opacity: 1; }

.chatbot {
  position: fixed;
  z-index: 1000;
  top: 118px;
  right: 10px;
  bottom: 58px;
  display: flex;
  width: min(780px, calc(100vw - 40px));
  min-height: 560px;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--zv-color-teal);
  border-radius: 14px;
  background: var(--zv-color-surface);
  color: var(--zv-color-text);
  font-family: var(--zv-font-ui);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 180ms var(--zv-motion-enter-easing),
    transform 180ms var(--zv-motion-enter-easing);
}

.chatbot.is-open {
  opacity: 1;
  transform: translateY(0);
}

.chatbot.is-closing {
  transition-duration: 120ms;
}

.chatbot[hidden],
.chat-backdrop[hidden] { display: none !important; }

.chat-header {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 40px;
  gap: 10px;
  min-height: 77px;
  align-items: center;
  margin: 0 19px;
  border-bottom: 1px solid var(--zv-color-line);
}

.chat-header-icon {
  display: block;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: var(--zv-radius-row, 10px);
  background: var(--zv-color-navy, #0B1F3A);
  box-shadow: var(--zv-shadow-e2);
}
.chat-header-mark { display: block; width: 100%; height: 100%; object-fit: contain; }
.chat-header-info { min-width: 0; }
.chat-header-name {
  margin: 0;
  color: var(--zv-color-ink);
  font-family: var(--zv-font-ui);
  font-size: 18px;
  font-weight: var(--zv-font-weight-semibold);
  line-height: 24px;
}
.chat-header-name span { color: var(--zv-color-teal); }
.chat-header-status {
  margin: 1px 0 0;
  color: var(--zv-color-evidence);
  font-size: 11px;
  line-height: 16px;
}

.chat-close {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--zv-color-muted);
  font: 400 24px/1 var(--zv-font-ui);
  cursor: pointer;
  transition:
    color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing),
    background-color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}
.chat-close:hover { color: var(--zv-color-danger); background: var(--zv-color-surface-subtle); }

.chat-messages {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 27px;
  padding: 25px 27px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--zv-color-line) transparent;
}

.chat-msg { display: flex; min-width: 0; }
.chat-msg.user { justify-content: flex-end; }
.chat-user-content { width: min(100%, 314px); }
.chat-user-label {
  margin: 0 0 6px;
  color: var(--zv-color-evidence);
  font-size: 10px;
  line-height: 14px;
  text-align: right;
  text-transform: uppercase;
}

.chat-msg.user .chat-msg-bubble {
  padding: 17px 15px;
  border: 1px solid var(--zv-color-line);
  border-radius: 10px;
  background: var(--zv-color-surface-subtle);
  color: var(--zv-color-ink);
  font-size: 14px;
  line-height: 22px;
}

.chat-msg.bot {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.chat-msg.bot:not(.has-current-robot) {
  display: block;
  padding-left: 68px;
}

.chat-state-robot {
  position: relative;
  display: block;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  /* Papel hundido detrás del robot (oscuro sobre claro); la profundidad va en el contenedor */
  background: var(--zv-color-bg-panel);
  box-shadow: 0 0 0 3px var(--zv-color-surface), var(--zv-shadow-e1);
}

/* Encuadre del avatar: el robot (cuerpo entero, WebP sin recortar) se coloca dentro del círculo
   con la cabeza entera y centrada, con ~11 % de margen. --robot-w = ancho de la imagen respecto
   al círculo; --robot-l / --robot-t = desplazamiento. La cabeza mide ≈ 78 % del círculo. */
.chat-state-robot img {
  position: absolute;
  display: block;
  width: var(--robot-w, 105%);
  height: auto;
  max-width: none;
  left: var(--robot-l, 0);
  top: var(--robot-t, 0);
}
.chat-state-robot--vacio { --robot-w: 105.2%; --robot-l: -3.5%; --robot-t: 13.4%; }
.chat-state-robot--analizando { --robot-w: 108.6%; --robot-l: -3.5%; --robot-t: 14.4%; }
.chat-state-robot--respuesta-lista { --robot-w: 102.4%; --robot-l: -1%; --robot-t: 15.1%; }
.chat-state-robot--error { --robot-w: 105.9%; --robot-l: -1.2%; --robot-t: 16.7%; }

.chat-msg-label {
  margin: 2px 0 9px;
  color: var(--zv-color-teal);
  font-size: 10px;
  font-weight: var(--zv-font-weight-semibold);
  letter-spacing: .02em;
  line-height: 14px;
  text-transform: uppercase;
}

.chat-response-content,
.chat-waiting-copy,
.chat-empty-copy { min-width: 0; max-width: 640px; }

.chat-empty-copy > p:last-child,
.chat-waiting-copy > p:last-child {
  margin: 0;
  color: var(--zv-color-ink);
  font-size: 18px;
  font-weight: var(--zv-font-weight-semibold);
  line-height: 25px;
}

.chat-msg.bot .chat-msg-bubble {
  min-width: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--zv-color-teal);
  color: var(--zv-color-ink);
  font-size: 14px;
  line-height: 22px;
}

.chat-msg.bot .chat-msg-bubble > strong:first-child {
  color: var(--zv-color-ink);
  font-size: 20px;
  font-weight: var(--zv-font-weight-semibold);
  line-height: 27px;
}

.chat-msg.bot .chat-msg-bubble a {
  display: block;
  width: min(100%, 340px);
  min-height: 47px;
  margin-top: 14px;
  padding: 13px 34px 11px 14px;
  border: 1px solid var(--zv-color-line);
  border-radius: 8px;
  background: transparent;
  color: var(--zv-color-ink);
  text-decoration: none;
  transition:
    border-color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing),
    color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}
.chat-msg.bot .chat-msg-bubble a:hover { border-color: var(--zv-color-teal); color: var(--zv-color-teal); }

.chat-msg.bot .chat-msg-bubble a.chat-tool-link {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--zv-color-surface-subtle);
}
.chat-tool-link__logo { width: 40px; height: 40px; border-radius: 8px; }
.chat-tool-link__copy { display: block; min-width: 0; }
.chat-tool-link__copy strong {
  display: block;
  overflow: hidden;
  color: var(--zv-color-ink);
  font-size: 13px;
  font-weight: var(--zv-font-weight-semibold);
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-tool-link__copy small {
  display: block;
  margin-top: 2px;
  color: var(--zv-color-evidence);
  font-size: 10px;
  line-height: 1.3;
}
.chat-tool-link__arrow { color: var(--zv-color-teal); font-size: 16px; }

/* Estado del mensaje: rojo = error (servidor, conexión); neutro = límite diario, que no es un error. */
.chat-msg--error .chat-msg-label { color: var(--zv-color-danger); }
.chat-msg.bot.chat-msg--error .chat-msg-bubble { border-left-color: var(--zv-color-danger); }
.chat-msg--limit .chat-msg-label { color: var(--zv-color-muted); }
.chat-msg.bot.chat-msg--limit .chat-msg-bubble { border-left-color: var(--zv-color-muted); }

.chat-limit-links { margin: 10px 0 0; }
.chat-msg.bot .chat-msg-bubble .chat-limit-links a.chat-limit-link {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--zv-color-teal-text);
  text-decoration: underline;
  text-decoration-color: var(--zv-color-teal-link);
  text-underline-offset: 3px;
}
.chat-msg.bot .chat-msg-bubble .chat-limit-links a.chat-limit-link:hover { color: var(--zv-color-ink); }

/* Respuesta estructurada (schema 2). Orden: elección → fichas → Decisión → combo → primer paso →
   descarte → plan → pregunta. Todo el texto viene del servidor y se pinta como texto. */
.chat-msg--nocover .chat-msg-label { color: var(--zv-color-muted); }
.chat-msg.bot.chat-msg--nocover .chat-msg-bubble { border-left-color: var(--zv-color-muted); }

.chat-resp__choice { margin: 0; font-size: 15px; line-height: 23px; font-weight: var(--zv-font-weight-medium); }
.chat-resp__tools { display: grid; gap: 0; }
.chat-resp__tool--plain {
  display: block;
  margin-top: 14px;
  color: var(--zv-color-ink);
  font-weight: var(--zv-font-weight-semibold);
}
.chat-resp__decision { margin: 12px 0 0; }
.chat-resp__section { margin-top: 16px; }
.chat-resp__kicker {
  margin: 0 0 4px;
  color: var(--zv-color-muted);
  font: 600 10px/14px var(--zv-font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.chat-resp__text { margin: 0; }
.chat-resp__list { margin: 0; padding: 0; list-style: none; }
.chat-resp__discard,
.chat-resp__plan { padding: 8px 0; border-top: 1px solid var(--zv-color-line); }
.chat-resp__discard:first-child,
.chat-resp__plan:first-child { border-top: 0; padding-top: 0; }
.chat-resp__discard::before {
  content: "✕";
  margin-right: 8px;
  color: var(--zv-color-danger);
  font-size: 12px;
}
.chat-resp__discard-reason { color: var(--zv-color-ink-soft); }
.chat-resp__plan { display: grid; gap: 2px; }
.chat-resp__plan-price { color: var(--zv-color-ink); }
.chat-resp__plan-includes,
.chat-resp__plan-date { color: var(--zv-color-muted); font-size: 12px; line-height: 18px; }
/* Schema 3: por qué, límites, alternativa, caminos de «depende» y Decisiones de la orientación. */
.chat-resp__paths { display: grid; gap: 10px; margin-top: 12px; }
.chat-resp__path { padding: 10px 12px; border: 1px solid var(--zv-color-line); border-radius: 8px; background: var(--zv-color-surface-subtle); line-height: 21px; }
.chat-resp__path.is-default { border-color: var(--zv-color-teal); background: var(--zv-color-surface); }
.chat-resp__path-if { color: var(--zv-color-ink-soft); }
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__path-tool,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__lead-link,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__alt-link,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__case-link {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--zv-color-teal-text);
  font-weight: var(--zv-font-weight-semibold);
  text-decoration: underline;
  text-decoration-color: var(--zv-color-teal-link);
  text-underline-offset: 3px;
}
p.chat-resp__recommended {
  display: inline-block;
  margin: 8px 0 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--zv-color-teal);
  color: #fff;
  font: 600 11px/18px var(--zv-font-ui);
  letter-spacing: .02em;
}
.chat-resp__path-tool { font-weight: var(--zv-font-weight-semibold); }
.chat-resp__badge {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--zv-color-teal);
  color: #fff;
  font: 600 11px/18px var(--zv-font-ui);
  letter-spacing: .02em;
  white-space: nowrap;
}
.chat-resp__case-list { display: grid; gap: 6px; }
.chat-resp__case { padding-left: 20px; position: relative; }
.chat-resp__case::before { content: "→"; position: absolute; left: 0; color: var(--zv-color-teal-text); }
.chat-resp__question {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--zv-color-line);
  color: var(--zv-color-ink-soft);
}

.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__decision-link,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__discard-name,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__plan-link {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--zv-color-teal-text);
  text-decoration: underline;
  text-decoration-color: var(--zv-color-teal-link);
  text-underline-offset: 3px;
}
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__discard-name { font-weight: var(--zv-font-weight-semibold); }
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__decision-link:hover,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__discard-name:hover,
.chat-msg.bot .chat-msg-bubble.chat-resp a.chat-resp__plan-link:hover { color: var(--zv-color-ink); }

.chat-suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 27px 20px;
}
.chat-suggestions[hidden] { display: none; }
.chat-sug[hidden] { display: none; }
.chat-suggestions--result .chat-sug:last-child { grid-column: 1 / -1; }
.chat-sug {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  overflow: visible;
  overflow-wrap: break-word;
  border: 1px solid var(--zv-color-line);
  border-radius: 7px;
  background: var(--zv-color-surface-subtle);
  color: var(--zv-color-evidence);
  font: 400 13px/18px var(--zv-font-ui);
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition:
    border-color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing),
    color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}
.chat-sug:hover { border-color: var(--zv-color-teal); color: var(--zv-color-ink); }

.chat-input-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  gap: 8px;
  min-height: 56px;
  align-items: center;
  margin: 0 27px;
  padding: 5px 7px 5px 15px;
  border: 1px solid var(--zv-color-line);
  border-radius: 9px;
  background: var(--zv-color-surface-subtle);
}
.chat-input-wrap:focus-within { border-color: var(--zv-color-teal); }
.chat-input {
  width: 100%;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--zv-color-ink);
  font: 400 13px/20px var(--zv-font-ui);
}
.chat-input::placeholder { color: var(--zv-color-muted); opacity: 1; }
.chat-input:disabled { cursor: wait; }
.chat-send {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--zv-color-teal);
  border-radius: 9px;
  background: transparent;
  color: var(--zv-color-teal);
  font: 500 22px/1 var(--zv-font-ui);
  cursor: pointer;
  transition:
    background-color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing),
    color var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}
.chat-send:hover { background: var(--zv-color-teal); color: var(--zv-color-on-teal); }
.chat-send:disabled { opacity: .45; cursor: wait; }

.chat-counter {
  display: grid;
  grid-template-columns: auto minmax(60px, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 22px;
  padding: 3px 27px 0;
  color: var(--zv-color-evidence);
  font: 400 10px/14px var(--zv-font-ui);
}
.chat-counter[hidden] { visibility: hidden; }
.chat-counter.warn { color: var(--zv-color-evidence); }
.chat-counter.empty { color: var(--zv-color-danger); }
.chat-counter-bar { height: 2px; overflow: hidden; background: var(--zv-color-line); }
.chat-counter-fill {
  width: 0;
  height: 100%;
  background: var(--zv-color-teal);
  transition: width var(--zv-motion-micro-duration) var(--zv-motion-micro-easing);
}
.chat-counter.empty .chat-counter-fill { background: var(--zv-color-danger); }

.chatbot :is(button, input, a):focus-visible {
  outline: 2px solid var(--zv-color-teal);
  outline-offset: 3px;
}

@keyframes zv-chat-look {
  0% { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}

@keyframes zv-chat-response {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-state-robot--look img { animation: zv-chat-look 180ms var(--zv-motion-enter-easing) both; }
.chat-response-enter .chat-state-robot { animation: zv-chat-response 180ms var(--zv-motion-enter-easing) 0ms both; }
.chat-response-enter .chat-response-content { animation: zv-chat-response 180ms var(--zv-motion-enter-easing) 80ms both; }
.chat-response-enter .chat-msg-bubble a { animation: zv-chat-response 180ms var(--zv-motion-enter-easing) 160ms both; }

@media (max-width: 768px) {
  .chat-backdrop { display: none; }
  .chatbot {
    top: 58px;
    right: 0;
    bottom: auto;
    left: 0;
    /* Alto fijo igual al área visible (100dvh); el JS lo ajusta con visualViewport. Columna flex:
       cabecera, mensajes (única zona que se encoge), sugerencias y barra de escritura, siempre visible. */
    height: calc(100vh - 58px);
    height: calc(100dvh - 58px);
    padding-bottom: env(safe-area-inset-bottom, 0);
    width: 100%;
    min-height: 0;
    border-width: 0;
    border-radius: 0;
    transform: translateY(8px);
  }
  .chat-header {
    min-height: 74px;
    margin: 0 20px;
  }
  .chat-messages {
    gap: 22px;
    padding: 19px 20px 18px;
  }
  .chat-user-content { width: min(100%, 286px); }
  .chat-msg.bot { grid-template-columns: 42px minmax(0, 1fr); gap: 16px; }
  .chat-msg.bot:not(.has-current-robot) { padding-left: 58px; }
  .chat-state-robot { width: 42px; height: 42px; box-shadow: 0 0 0 2px var(--zv-color-surface), var(--zv-shadow-e1); }
  .chat-msg-label { margin-top: 0; }
  .chat-msg.bot .chat-msg-bubble { font-size: 14px; line-height: 21px; }
  .chat-msg.bot .chat-msg-bubble > strong:first-child { font-size: 19px; line-height: 24px; }
  .chat-suggestions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    padding: 0 20px 20px;
  }
  .chat-header, .chat-suggestions, .chat-input-wrap, .chat-counter { flex: none; }
  .chat-messages { flex: 1 1 0; min-height: 0; }
  /* Con el teclado abierto el panel es bajo: se ocultan las sugerencias (clase .is-compact del JS) en vez de recortarlas. */
  .chatbot.is-compact .chat-suggestions { display: none; }
  .chat-input-wrap { margin: 0 20px; }
  .chat-counter { padding: 4px 20px 7px; }
}

@media (max-width: 420px) {
  .chat-msg.user .chat-msg-bubble { padding: 14px; }
  .chat-input-wrap { grid-template-columns: minmax(0, 1fr) 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-backdrop,
  .chatbot,
  .chat-close,
  .chat-send,
  .chat-sug,
  .chat-counter-fill,
  .chat-msg.bot .chat-msg-bubble a {
    transition-duration: 0ms !important;
  }
  .chat-state-robot--look img,
  .chat-response-enter .chat-state-robot,
  .chat-response-enter .chat-response-content,
  .chat-response-enter .chat-msg-bubble a {
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
    transform: none !important;
  }
}

/* Prompt de arranque en el chat (sin modelo): bloque con «Copiar» y globo de oferta del robot. */
.chat-prompt__hint { margin: 0 0 10px; color: var(--zv-color-muted); font-size: 12.5px; line-height: 18px; }
.chat-prompt__text { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--zv-color-navy); color: #F2F5FA; font-family: var(--zv-font-ui); font-size: 13.5px; line-height: 21px; white-space: pre-wrap; word-break: break-word; }
.chat-prompt__copy { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 12px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--zv-color-teal-graphic); color: var(--zv-color-navy); font: inherit; font-size: 14px; font-weight: var(--zv-font-weight-semibold); cursor: pointer; }
.chat-prompt__copy:focus-visible, .chat-prompt-offer__btn:focus-visible { outline: 2px solid var(--zv-color-teal-text); outline-offset: 3px; }
.chat-prompt-offer { position: relative; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--zv-color-line); border-radius: 12px; background: var(--zv-color-surface-subtle); }
.chat-prompt-offer__text { margin: 0 0 10px; color: var(--zv-color-ink); font-size: 14px; line-height: 21px; }
.chat-prompt-offer__btn { min-height: 40px; padding: 0 14px; border: 1px solid var(--zv-color-teal); border-radius: 10px; background: var(--zv-color-surface); color: var(--zv-color-teal-text); font: inherit; font-size: 14px; font-weight: var(--zv-font-weight-semibold); cursor: pointer; }
.chat-prompt-offer__btn:disabled { opacity: .55; cursor: default; }
.chat-resp__text.chat-resp__alt { margin-top: 16px; }
.chat-thumb-bar { display: flex; gap: 6px; margin-top: 10px; }
.chat-thumb-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--zv-color-line); border-radius: 8px; background: transparent; cursor: pointer; font-size: 15px; line-height: 1; transition: background 120ms, border-color 120ms; }
.chat-thumb-btn:hover:not(:disabled) { background: var(--zv-color-surface-subtle); border-color: var(--zv-color-muted); }
.chat-thumb-btn:focus-visible { outline: 2px solid var(--zv-color-teal-text); outline-offset: 2px; }
.chat-thumb-btn:disabled { cursor: default; opacity: .45; }
.chat-thumb-btn--voted { opacity: 1 !important; border-color: var(--zv-color-teal); background: var(--zv-color-surface-subtle); }