#nt-chat-root {
  /* Hereda tokens del tema (Ayudar-t --ay-*, Innara --innara-*, Elementor…) */
  --nt-chat-color: var(--ay-accent-strong, var(--innara-violet, var(--e-global-color-primary, #494f63)));
  --nt-chat-ink: var(--ay-text, var(--innara-ink, var(--e-global-color-secondary, #2f2f33)));
  --nt-chat-ink-soft: var(--ay-muted, var(--innara-ink-soft, var(--e-global-color-text, #67656a)));
  --nt-chat-paper: var(--ay-bg, var(--innara-paper, #f6efe6));
  --nt-chat-panel: var(--ay-bg-soft, var(--innara-white, #fbf7f1));
  --nt-chat-wash: color-mix(in srgb, var(--nt-chat-color) 10%, transparent);
  --nt-chat-line: color-mix(in srgb, var(--nt-chat-color) 22%, transparent);
  --nt-chat-sand: var(--ay-sand, var(--innara-sand, #dec7a8));
  --nt-chat-side: max(16px, env(safe-area-inset-right, 0px));
  --nt-chat-bottom: max(16px, env(safe-area-inset-bottom, 0px));
  --nt-chat-fab-clearance: 72px;
  position: fixed;
  z-index: 99999;
  bottom: var(--nt-chat-bottom);
  right: var(--nt-chat-side);
  /* Solo ancla el launcher; el panel va fixed al viewport */
  width: auto;
  height: auto;
  max-width: none;
  font-family: "Nunito Sans", "Outfit", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--nt-chat-ink);
  /* Evitar que transform/filter del tema cree containing block raro */
  transform: none;
  filter: none;
  perspective: none;
}

#nt-chat-root[data-position="left"] {
  right: auto;
  left: max(16px, env(safe-area-inset-left, 0px));
  --nt-chat-side: max(16px, env(safe-area-inset-left, 0px));
}

#nt-chat-root.nt-chat--hide-mobile {
  display: block;
}

#nt-chat-root.nt-chat--hide-launcher .nt-chat-launcher {
  display: none;
}

#nt-chat-root.nt-chat--hide-launcher {
  --nt-chat-fab-clearance: 96px;
}

.nt-chat-launcher {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: var(--nt-chat-color);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(28, 23, 34, 0.18);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease;
}

.nt-chat-launcher:hover {
  transform: scale(1.05);
}

.nt-chat-launcher svg {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.nt-chat-panel {
  /* Fixed al viewport: no depende del ancho del FAB (bug móvil) */
  position: fixed;
  z-index: 100001;
  right: var(--nt-chat-side);
  bottom: calc(var(--nt-chat-bottom) + var(--nt-chat-fab-clearance));
  left: auto;
  width: min(380px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  height: auto;
  max-height: min(
    560px,
    calc(100dvh - var(--nt-chat-bottom) - var(--nt-chat-fab-clearance) - 24px),
    calc(100vh - var(--nt-chat-bottom) - var(--nt-chat-fab-clearance) - 24px)
  );
  display: flex;
  flex-direction: column;
  background: var(--nt-chat-paper);
  border: 1px solid var(--nt-chat-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(28, 23, 34, 0.16);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-sizing: border-box;
}

#nt-chat-root[data-position="left"] .nt-chat-panel {
  right: auto;
  left: max(16px, env(safe-area-inset-left, 0px));
}

#nt-chat-root.is-open .nt-chat-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Tablet */
@media (max-width: 1024px) {
  .nt-chat-panel {
    width: min(400px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
  }
}

/* Móvil / tablet estrecha: hoja anclada al viewport con safe-areas */
@media (max-width: 768px) {
  #nt-chat-root.nt-chat--hide-mobile {
    display: none !important;
  }

  #nt-chat-root {
    --nt-chat-side: max(12px, env(safe-area-inset-right, 0px));
    --nt-chat-bottom: max(12px, env(safe-area-inset-bottom, 0px));
    --nt-chat-fab-clearance: 0px;
  }

  #nt-chat-root[data-position="left"] {
    left: max(12px, env(safe-area-inset-left, 0px));
    --nt-chat-side: max(12px, env(safe-area-inset-left, 0px));
  }

  .nt-chat-panel {
    top: auto;
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    width: auto !important;
    max-width: none;
    height: min(78dvh, 640px, calc(var(--nt-vvh, 100dvh) - 24px));
    max-height: calc(var(--nt-vvh, 100dvh) - env(safe-area-inset-top, 0px) - 20px);
    border-radius: 18px;
  }

  /* Con chat abierto el FAB se oculta; el panel usa la altura visible */
  #nt-chat-root.is-open .nt-chat-panel {
    height: min(82dvh, calc(var(--nt-vvh, 100dvh) - 24px));
    max-height: calc(var(--nt-vvh, 100dvh) - 24px);
  }
}

.nt-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  flex-shrink: 0;
  border: 0;
  border-radius: 0;
  background: var(--nt-chat-color) !important;
  background-color: var(--nt-chat-color) !important;
  color: #fff !important;
  padding: 14px 16px;
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: left;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.nt-chat-header:hover,
.nt-chat-header:focus,
.nt-chat-header:focus-visible,
.nt-chat-header:active {
  background: var(--nt-chat-color) !important;
  background-color: color-mix(in srgb, var(--nt-chat-color) 88%, #fff) !important;
  color: #fff !important;
  outline: none;
  box-shadow: none;
  filter: none;
}

.nt-chat-header__title {
  flex: 1;
  min-width: 0;
}

.nt-chat-header__hint {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

.nt-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(ellipse at top left, var(--nt-chat-wash), transparent 55%),
    var(--nt-chat-paper);
}

.nt-chat-bubble {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.nt-chat-bubble--bot {
  align-self: flex-start;
  background: var(--nt-chat-panel);
  border: 1px solid var(--nt-chat-line);
  color: var(--nt-chat-ink);
}

.nt-chat-bubble--user {
  align-self: flex-end;
  background: var(--nt-chat-color);
  color: #fff;
}

.nt-chat-bubble--bot .nt-chat-link {
  color: var(--nt-chat-color);
  font-weight: 600;
  text-decoration: underline;
  word-break: break-all;
}

.nt-chat-bubble--bot .nt-chat-link:hover {
  opacity: 0.85;
}

.nt-chat-bubble--pending {
  opacity: 0.7;
  font-style: italic;
  color: var(--nt-chat-ink-soft);
}

.nt-chat-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--nt-chat-line);
  background: var(--nt-chat-panel);
}

.nt-chat-form input {
  flex: 1;
  border: 1px solid var(--nt-chat-line);
  border-radius: 999px;
  padding: 10px 14px;
  font: inherit;
  color: var(--nt-chat-ink);
  background: var(--nt-chat-paper);
}

.nt-chat-form input:focus {
  outline: 2px solid color-mix(in srgb, var(--nt-chat-color) 40%, transparent);
  outline-offset: 1px;
}

.nt-chat-form button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--nt-chat-color);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.nt-chat-form button:disabled {
  opacity: 0.55;
  cursor: wait;
}

/* —— FAB logo animado (abajo, fijo al scroll) —— */
.nt-chat-help-fab {
  --nt-fab-size: 64px;
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 0;
  max-width: var(--nt-fab-size);
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background: transparent !important;
  color: var(--nt-chat-ink) !important;
  box-shadow: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  overflow: visible;
  transition:
    max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    gap 0.3s ease,
    padding 0.3s ease,
    background 0.3s ease,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
  animation: nt-fab-float 3.6s ease-in-out infinite;
}

.nt-chat-help-fab__orb {
  position: relative;
  width: var(--nt-fab-size);
  height: var(--nt-fab-size);
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
  background: var(--ay-bg-soft, var(--nt-chat-panel, #fff));
  box-shadow: 0 10px 28px rgba(47, 47, 51, 0.18);
  animation: nt-fab-wiggle 5.5s ease-in-out infinite;
}

/* Anillo blanco + 3 bolitas (estilo orbit — Ayudar-t) */
.nt-chat-help-fab__orbit {
  --nt-bead-r: calc((var(--nt-fab-size) + 10px) / 2);
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow:
    0 0 0 1px rgba(47, 47, 51, 0.08),
    0 2px 10px rgba(47, 47, 51, 0.12);
  pointer-events: none;
  z-index: 3;
  animation: nt-fab-orbit 4.2s linear infinite;
}

.nt-chat-help-fab__bead {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

.nt-chat-help-fab__bead--a {
  transform: rotate(0deg) translateY(calc(-1 * var(--nt-bead-r)));
  background: color-mix(
    in srgb,
    var(--ay-sand, var(--nt-chat-sand, #dec7a8)) 70%,
    #fff
  );
}

.nt-chat-help-fab__bead--b {
  transform: rotate(120deg) translateY(calc(-1 * var(--nt-bead-r)));
  background: color-mix(
    in srgb,
    var(--ay-accent, var(--nt-chat-color)) 42%,
    var(--ay-bg-soft, var(--nt-chat-panel, #fbf7f1))
  );
}

.nt-chat-help-fab__bead--c {
  transform: rotate(240deg) translateY(calc(-1 * var(--nt-bead-r)));
  background: color-mix(
    in srgb,
    var(--ay-muted, var(--nt-chat-ink-soft)) 38%,
    var(--ay-sand, var(--nt-chat-sand, #dec7a8))
  );
}

/* Aura luminosa (estilo aura — Gemita / IA): sin bolitas.
   Marca RB: rojo / blanco / negro (no usar paleta Astra azul/amarillo/magenta). */
.nt-chat-help-fab--aura {
  --nt-aura-a: var(--v2-red, #B22222);
  --nt-aura-b: color-mix(in srgb, var(--v2-red, #B22222) 40%, #fff);
  --nt-aura-c: var(--nt-chat-color, var(--v2-red-dark, #8E1A1A));
}

.nt-chat-help-fab--aura .nt-chat-help-fab__orb {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 18px 4px color-mix(in srgb, var(--nt-aura-a) 55%, transparent),
    0 0 36px 8px color-mix(in srgb, var(--nt-aura-b) 35%, transparent),
    0 12px 28px rgba(15, 23, 42, 0.28);
  animation: nt-fab-wiggle 5.5s ease-in-out infinite, nt-fab-aura-breathe 2.8s ease-in-out infinite;
}

.nt-chat-help-fab__aura {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}

.nt-chat-help-fab__aura-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--nt-aura-a) 75%, #fff);
  box-shadow:
    0 0 12px color-mix(in srgb, var(--nt-aura-a) 70%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--nt-aura-b) 25%, transparent);
  animation: nt-fab-aura-pulse 2.2s ease-in-out infinite;
}

.nt-chat-help-fab__aura-arc {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--nt-aura-c);
  border-right-color: color-mix(in srgb, var(--nt-aura-b) 80%, transparent);
  filter: drop-shadow(0 0 6px var(--nt-aura-a));
  animation: nt-fab-orbit 2.8s linear infinite;
}

.nt-chat-help-fab__aura-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 8px 2px var(--nt-aura-a),
    0 0 14px 4px color-mix(in srgb, var(--nt-aura-b) 70%, transparent);
}

.nt-chat-help-fab__aura-spark--a {
  top: 4%;
  left: 52%;
  animation: nt-fab-spark-twinkle 1.8s ease-in-out infinite;
}

.nt-chat-help-fab__aura-spark--b {
  bottom: 10%;
  right: 6%;
  width: 5px;
  height: 5px;
  animation: nt-fab-spark-twinkle 1.8s ease-in-out infinite 0.7s;
}

/* Máscara = tamaño exacto del logo; el barrido no puede salirse */
.nt-chat-help-fab__shine {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.nt-chat-help-fab__shine::before {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -60%;
  width: 45%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  transform: translateX(0) rotate(18deg);
  animation: nt-fab-shine 3.2s ease-in-out infinite;
}

.nt-chat-help-fab__logo,
.nt-chat-help-fab__fallback {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.nt-chat-help-fab__fallback {
  display: grid;
  place-items: center;
  background: var(--nt-chat-color);
  color: #fff;
}

.nt-chat-help-fab__fallback svg {
  width: 46%;
  height: 46%;
  fill: currentColor;
}

.nt-chat-help-fab__label {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transform: translateX(8px);
  transition:
    max-width 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    transform 0.35s ease,
    margin 0.3s ease;
  margin-right: 0;
  color: #fff;
}

/* Expansión solo en puntero fino (PC); en táctil no se abre fuera de pantalla */
@media (hover: hover) and (pointer: fine) {
  .nt-chat-help-fab:hover,
  .nt-chat-help-fab:focus-visible {
    max-width: min(280px, calc(100vw - 2rem));
    gap: 0.7rem;
    padding: 0.35rem 1.05rem 0.35rem 0.35rem;
    background: var(--ay-accent-strong, var(--nt-chat-color)) !important;
    color: #fff !important;
    outline: none;
    transform: scale(1.08);
    box-shadow: 0 16px 36px rgba(47, 47, 51, 0.22);
    animation: none;
  }

  .nt-chat-help-fab:hover .nt-chat-help-fab__orb,
  .nt-chat-help-fab:focus-visible .nt-chat-help-fab__orb {
    animation: none;
    transform: rotate(0);
  }

  .nt-chat-help-fab:hover .nt-chat-help-fab__orbit,
  .nt-chat-help-fab:focus-visible .nt-chat-help-fab__orbit {
    animation-duration: 2.2s;
    border-color: rgba(255, 255, 255, 0.95);
  }

  .nt-chat-help-fab--aura:hover,
  .nt-chat-help-fab--aura:focus-visible {
    background: linear-gradient(
      135deg,
      var(--nt-aura-c),
      color-mix(in srgb, var(--nt-aura-c) 70%, var(--nt-aura-a))
    ) !important;
  }

  .nt-chat-help-fab--aura:hover .nt-chat-help-fab__aura-arc,
  .nt-chat-help-fab--aura:focus-visible .nt-chat-help-fab__aura-arc {
    animation-duration: 1.4s;
  }

  .nt-chat-help-fab:hover .nt-chat-help-fab__label,
  .nt-chat-help-fab:focus-visible .nt-chat-help-fab__label {
    max-width: 160px;
    opacity: 1;
    transform: translateX(0);
    margin-right: 0.25rem;
  }
}

.nt-chat-help-fab.is-chat-open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
}

@keyframes nt-fab-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes nt-fab-wiggle {
  0%,
  100% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(7deg);
  }
}

@keyframes nt-fab-shine {
  0%,
  55% {
    transform: translateX(0) rotate(18deg);
  }
  80%,
  100% {
    transform: translateX(280%) rotate(18deg);
  }
}

@keyframes nt-fab-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes nt-fab-aura-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
}

@keyframes nt-fab-aura-breathe {
  0%,
  100% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.95),
      0 0 14px 3px color-mix(in srgb, var(--nt-aura-a) 45%, transparent),
      0 0 28px 6px color-mix(in srgb, var(--nt-aura-b) 28%, transparent),
      0 12px 28px rgba(15, 23, 42, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(255, 255, 255, 0.98),
      0 0 26px 8px color-mix(in srgb, var(--nt-aura-a) 70%, transparent),
      0 0 48px 14px color-mix(in srgb, var(--nt-aura-b) 45%, transparent),
      0 14px 32px rgba(15, 23, 42, 0.32);
  }
}

@keyframes nt-fab-spark-twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.75);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nt-chat-help-fab,
  .nt-chat-help-fab__orb,
  .nt-chat-help-fab__shine::before,
  .nt-chat-help-fab__orbit,
  .nt-chat-help-fab__aura-ring,
  .nt-chat-help-fab__aura-arc,
  .nt-chat-help-fab__aura-spark {
    animation: none !important;
  }
}

@media (max-width: 768px) {
  .nt-chat-help-fab {
    --nt-fab-size: 58px;
    right: max(1rem, env(safe-area-inset-right, 0px));
    bottom: max(1rem, env(safe-area-inset-bottom, 0px));
    left: auto;
    max-width: var(--nt-fab-size);
  }

  #nt-chat-root[data-position="left"] .nt-chat-help-fab {
    right: auto;
    left: max(1rem, env(safe-area-inset-left, 0px));
  }
}