/* Chat guiado de captación (templates/public/_chat_guiado.html.twig + public/js/encario-chat.js).
   Usa los colores de encario-landing.css. Móvil primero: en móvil el panel ocupa el ancho con 16 px de margen. */

.encario-chat {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  color: var(--encario-text, #f5f7f2);
}

.encario-chat *,
.encario-chat *::before,
.encario-chat *::after {
  box-sizing: border-box;
}

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

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

.encario-chat button {
  font: inherit;
  cursor: pointer;
}

.encario-chat button:focus-visible,
.encario-chat input:focus-visible {
  outline: 3px solid var(--encario-amber, #f6c453);
  outline-offset: 2px;
}

/* Botón fijo de la esquina */
.encario-chat-launcher {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 18px 8px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--encario-primary, #4ade80);
  color: var(--encario-primary-ink, #062014);
  font-weight: 800;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, background 160ms ease;
}

.encario-chat-launcher:hover {
  background: #6ee99c;
  transform: translateY(-1px);
}

.encario-chat-launcher-mark,
.encario-chat-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--encario-bg, #101412);
}

.encario-chat-launcher-mark img,
.encario-chat-header-mark img {
  width: 24px;
  height: 24px;
}

.encario-chat.is-open .encario-chat-launcher {
  display: none;
}

/* Aviso que asoma en móvil en vez de abrir el panel */
.encario-chat-teaser {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 4px 4px 4px 0;
  border-radius: 16px 16px 4px 16px;
  background: var(--encario-text, #f5f7f2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  animation: encario-chat-pop 220ms ease-out;
}

.encario-chat-teaser-open {
  border: 0;
  padding: 8px 6px 8px 14px;
  background: transparent;
  color: var(--encario-bg, #101412);
  font-weight: 700;
}

.encario-chat-teaser-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #e2e6df;
  color: var(--encario-bg, #101412);
}

/* Panel */
.encario-chat-panel {
  display: flex;
  flex-direction: column;
  width: calc(100vw - 32px);
  max-width: 400px;
  height: min(620px, calc(100dvh - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  border: 1px solid var(--encario-border, rgba(245, 247, 242, 0.13));
  border-radius: 20px;
  background: var(--encario-panel, #18201c);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  animation: encario-chat-pop 220ms ease-out;
}

.encario-chat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 12px 14px;
  background: var(--encario-panel-strong, #202922);
  border-bottom: 1px solid var(--encario-border, rgba(245, 247, 242, 0.13));
}

.encario-chat-header-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  line-height: 1.25;
}

.encario-chat-header-copy small {
  color: var(--encario-muted, #b8c0b8);
  font-size: 12px;
}

.encario-chat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(245, 247, 242, 0.08);
  color: var(--encario-text, #f5f7f2);
}

.encario-chat-icon:hover {
  background: rgba(245, 247, 242, 0.16);
}

.encario-chat-log {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 8px;
  min-height: 72px;
  padding: 16px 14px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.encario-chat-msg {
  max-width: 88%;
  margin: 0;
  padding: 10px 13px;
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-line;
  animation: encario-chat-in 180ms ease-out;
}

.encario-chat-msg-bot {
  align-self: flex-start;
  border-radius: 4px 16px 16px 16px;
  background: var(--encario-panel-strong, #202922);
}

.encario-chat-msg-user {
  align-self: flex-end;
  border-radius: 16px 4px 16px 16px;
  background: var(--encario-primary, #4ade80);
  color: var(--encario-primary-ink, #062014);
  font-weight: 600;
}

.encario-chat-typing {
  display: inline-flex;
  gap: 4px;
  padding: 14px 13px;
}

.encario-chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--encario-muted, #b8c0b8);
  animation: encario-chat-dot 900ms infinite ease-in-out;
}

.encario-chat-typing span:nth-child(2) { animation-delay: 150ms; }
.encario-chat-typing span:nth-child(3) { animation-delay: 300ms; }

/* Botones de respuesta: sólidos, nunca outline. Pulsado (aria-pressed) = verde. */
.encario-chat-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 60%;
  overflow-y: auto;
  padding: 8px 14px 14px;
}

.encario-chat-option {
  min-height: 44px;
  padding: 9px 14px;
  border: 0;
  border-radius: 14px;
  background: var(--encario-text, #f5f7f2);
  color: var(--encario-bg, #101412);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  text-align: left;
  transition: background 140ms ease, transform 140ms ease;
}

.encario-chat-option:hover {
  background: #dfe9dc;
}

.encario-chat-toggle[aria-pressed="true"] {
  background: var(--encario-primary, #4ade80);
  color: var(--encario-primary-ink, #062014);
}

.encario-chat-toggle[aria-pressed="true"]::before {
  content: "✓ ";
}

.encario-chat-next {
  background: var(--encario-primary, #4ade80);
  color: var(--encario-primary-ink, #062014);
}

.encario-chat-next:hover {
  background: #6ee99c;
}

.encario-chat-option:disabled {
  background: rgba(245, 247, 242, 0.12);
  color: var(--encario-muted, #b8c0b8);
  cursor: not-allowed;
}

/* Datos de contacto */
.encario-chat-form {
  display: grid;
  gap: 6px;
  /* El formulario NO encoge: encoge el historial, que tiene su scroll. Antes encogían los dos y, con una
     conversación larga, «Pedir la demo» quedaba fuera de la vista en un portátil (avisado por el usuario, 2026-10-21).
     Solo en pantallas muy bajas (abajo, max-height) encoge y hace scroll, con el botón pegado abajo. */
  flex: 0 0 auto;
  min-height: 0;
  max-height: calc(100% - 120px);
  overflow-y: auto;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--encario-border, rgba(245, 247, 242, 0.13));
}

.encario-chat .encario-chat-form label {
  margin: 4px 0 0;
  font-size: 13px;
  font-weight: 700;
  /* !important: atlantis.css pinta todos los label en #495057 !important (2:1 sobre este fondo). */
  color: var(--encario-muted, #b8c0b8) !important;
}

.encario-chat-form input::placeholder {
  color: #8f9a91;
  opacity: 1;
}

.encario-chat-form input[aria-invalid="true"] {
  border-color: var(--encario-amber, #f6c453);
}

.encario-chat-form label span {
  font-weight: 400;
}

.encario-chat-form input:not(.encario-hp) {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--encario-border, rgba(245, 247, 242, 0.13));
  border-radius: 12px;
  background: var(--encario-bg, #101412);
  color: var(--encario-text, #f5f7f2);
  font-size: 16px; /* 16 px: iOS no hace zoom al escribir */
}

.encario-chat-submit {
  /* Siempre a la vista, aunque el formulario tenga que hacer scroll */
  position: sticky;
  bottom: 0;
  z-index: 1;
  box-shadow: 0 -10px 0 var(--encario-panel, #18201c);
  min-height: 48px;
  margin-top: 6px;
  border: 0;
  border-radius: 14px;
  background: var(--encario-primary, #4ade80);
  color: var(--encario-primary-ink, #062014);
  font-weight: 800;
}

.encario-chat-submit:hover {
  background: #6ee99c;
}

.encario-chat-submit:disabled {
  opacity: 0.6;
  cursor: progress;
}

.encario-chat-status {
  min-height: 0;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--encario-muted, #b8c0b8);
}

.encario-chat-status:empty {
  display: none;
}

.encario-chat-status.is-error {
  color: var(--encario-amber, #f6c453);
}

@media (max-width: 680px) {
  .encario-chat-launcher-text {
    display: none;
  }

  .encario-chat-launcher {
    padding: 7px;
  }

  .encario-chat-panel {
    height: min(560px, calc(100dvh - 32px));
  }
}

@media (max-height: 520px) {
  .encario-chat-header {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .encario-chat-header-copy small {
    display: none;
  }

  .encario-chat-log {
    min-height: 48px;
    padding-top: 8px;
  }

  .encario-chat-form {
    padding-top: 6px;
  }
}

@keyframes encario-chat-pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

@keyframes encario-chat-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@keyframes encario-chat-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .encario-chat *,
  .encario-chat-panel,
  .encario-chat-teaser {
    animation: none !important;
    transition: none !important;
  }
}

/* Al pulsar un botón de demo con el chat ya abierto, el panel da un saltito para que se note (encario-chat.js). */
.encario-chat-panel.is-nudge { animation: encario-chat-nudge 520ms cubic-bezier(0.16, 1, 0.3, 1); }

@keyframes encario-chat-nudge {
  0% { transform: none; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.6); }
  35% { transform: translateY(-10px) scale(1.02); }
  100% { transform: none; box-shadow: 0 0 0 14px rgba(74, 222, 128, 0); }
}