/* Yvy — guía flotante del sitio OMBU */
/* Yvy en su contorno — sin círculo. Flota, se mece y un halo cálido pulsa detrás. */
.yvy-fab {
  position: fixed; right: 16px; bottom: 10px; z-index: 900;
  width: auto; height: 132px;
  padding: 0; overflow: visible;
  background: none; border: none; border-radius: 0;
  filter: drop-shadow(0 16px 22px rgba(31, 42, 20, 0.35));
  animation: yvy-idle 5.5s ease-in-out infinite;
  /* --fy/--fr los escribe el motor de vuelo (yvy.js) */
  transform: translate3d(0, var(--fy, 0px), 0) rotate(var(--fr, 0deg));
  will-change: transform;
  transform-origin: 50% 90%;
}
.yvy-fab img, .yvy-fab .yvy-video {
  height: 100%; width: auto;
  object-fit: contain;
  border: none; border-radius: 0; background: none;
  transition: transform .35s var(--easing);
  transform-origin: 50% 85%;
}
.yvy-fab:hover img, .yvy-fab:hover .yvy-video { transform: scale(1.07); }

/* Modo video: loop idle con alpha (Chrome/Edge/Firefox); Safari usa el cutout */
.yvy-video { display: none; }
.yvy-fab.is-video { height: 150px; }
.yvy-fab.is-video .yvy-video { display: block; }
.yvy-fab.is-video .yvy-img { display: none; }
@keyframes yvy-idle {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 -8px; rotate: -2deg; }
  65% { translate: 0 -3px; rotate: 1.5deg; }
}
/* Halo cálido pulsante detrás del personaje */
.yvy-pulse {
  position: absolute; left: 8%; right: 8%; top: 12%; bottom: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(242, 212, 135, 0.6), transparent 72%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  animation: yvy-glow 2.8s ease-in-out infinite;
}
@keyframes yvy-glow {
  0%, 100% { opacity: .45; transform: scale(.9); }
  50% { opacity: 1; transform: scale(1.12); }
}

/* Gesto — el frame de ojos cerrados entra y sale en cross-fade suave */
.yvy-img--blink {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transition: opacity .32s ease-in-out;
}
.yvy-fab.is-blink .yvy-img--blink { opacity: 1; }

/* Saltito de atención cuando aparece la burbuja de invitación */
.yvy-fab.is-callout {
  animation: yvy-idle 5.5s ease-in-out infinite, yvy-hop 1.5s ease-in-out 2;
}
@keyframes yvy-hop {
  0%, 48%, 100% { translate: 0 0; }
  12% { translate: 0 -16px; }
  24% { translate: 0 0; }
  36% { translate: 0 -8px; }
}

.yvy-bubble {
  position: fixed; right: 150px; bottom: 64px; z-index: 900;
  max-width: 250px;
  background: var(--white); color: var(--ink);
  font-size: .9rem; font-weight: 500; line-height: 1.4;
  padding: .75em 1.05em;
  border-radius: 16px 16px 4px 16px;
  box-shadow: 0 16px 34px -18px rgba(31, 42, 20, 0.45);
  animation: yvy-in .4s var(--easing);
  cursor: pointer;
  /* sigue a Yvy en su vuelo */
  transform: translate3d(0, var(--fy, 0px), 0);
  transition: box-shadow .25s var(--easing);
}
.yvy-bubble:hover {
  transform: translate3d(0, calc(var(--fy, 0px) - 3px), 0);
  box-shadow: 0 20px 40px -18px rgba(31, 42, 20, 0.55);
}
.yvy-bubble::after {
  content: '';
  position: absolute; right: -5px; bottom: 12px;
  width: 12px; height: 12px;
  background: var(--white);
  transform: rotate(45deg);
  border-radius: 2px;
}

.yvy-panel {
  position: fixed; right: 22px; bottom: 150px; z-index: 950;
  width: min(350px, calc(100vw - 32px));
  height: min(480px, 70vh);
  display: flex; flex-direction: column;
  background: var(--cream);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(31, 42, 20, 0.6);
  animation: yvy-in .35s var(--easing);
}
@keyframes yvy-in { from { opacity: 0; } to { opacity: 1; } }
.yvy-panel[hidden], .yvy-bubble[hidden] { display: none; }

.yvy-head {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  background: var(--olive-deep); color: var(--white);
}
.yvy-head-av { width: auto; height: 42px; object-fit: contain; }
.yvy-head b { font-family: var(--display); font-weight: 500; display: block; line-height: 1.1; }
.yvy-head small { color: rgba(255,255,255,.75); font-size: .72rem; }
.yvy-close { margin-left: auto; color: rgba(255,255,255,.8); font-size: 1.3rem; line-height: 1; padding: .2em .4em; }
.yvy-close:hover { color: var(--white); }

.yvy-msgs { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.yvy-msg { max-width: 86%; padding: .6em .9em; border-radius: 14px; font-size: .92rem; line-height: 1.45; white-space: pre-line; }
.yvy-msg--bot { background: var(--white); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; box-shadow: 0 6px 16px -10px rgba(31,42,20,.25); }
.yvy-msg--user { background: var(--olive); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }

.yvy-input { display: flex; gap: .5rem; padding: .7rem; background: var(--cream-deep); }
.yvy-input input {
  flex: 1; border: 1px solid rgba(26,27,20,.14); border-radius: 999px;
  padding: .6em 1em; font: inherit; font-size: .92rem; background: var(--white); color: var(--ink);
  outline: none;
}
.yvy-input input:focus { border-color: var(--olive); }
.yvy-send {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ink); color: var(--white);
  display: grid; place-items: center; font-size: 1.05rem;
  transition: background .2s ease;
}
.yvy-send:hover { background: var(--olive-deep); }

/* Botón de siguiente paso bajo la respuesta */
.yvy-cta {
  align-self: flex-start;
  background: var(--ink); color: var(--white);
  border-radius: 999px;
  padding: .55em 1.05em;
  font: inherit; font-size: .88rem; font-weight: 500;
  cursor: pointer;
  box-shadow: 0 10px 20px -12px rgba(31, 42, 20, .5);
  transition: background .2s ease, transform .2s ease;
}
.yvy-cta:hover { background: var(--olive-deep); transform: translateY(-1px); }

/* Preguntas rápidas */
.yvy-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.yvy-chip {
  border: 1px solid rgba(105, 107, 87, .32);
  background: var(--white); color: var(--ink);
  border-radius: 999px;
  padding: .5em .9em;
  font: inherit; font-size: .84rem; line-height: 1.2;
  text-align: left; cursor: pointer;
  box-shadow: 0 4px 10px -8px rgba(31, 42, 20, .3);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.yvy-chip:hover { background: var(--olive); color: var(--white); transform: translateY(-1px); }

@media (max-width: 560px) {
  .yvy-bubble { right: 118px; bottom: 56px; max-width: calc(100vw - 134px); font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .yvy-pulse, .yvy-fab, .yvy-fab.is-callout { animation: none; }
}