/* ═══════════════════════════════════════════════════════════════════════
 * face.css — La cara del logo de Niva.
 * El logo (anillo + barra con el degradado de marca) es lo único con color
 * en la estética negra; los ojos cian cuentan qué está pasando.
 * Una expresión a la vez (x-*) y estados de fondo: a-listen (cascos),
 * a-hear (dictando), a-drag (un archivo encima).
 * ═════════════════════════════════════════════════════════════════════ */
.nf {
  --nf-size: 28px;
  --nf-eye: #6ff0ff;
  position: relative;
  display: inline-block;
  width: var(--nf-size);
  height: var(--nf-size);
  flex-shrink: 0;
  cursor: pointer;
  -webkit-app-region: no-drag;
  user-select: none;
}
.nf-svg { display: block; width: 100%; height: 100%; overflow: visible; transition: filter 0.35s ease; }

/* Piezas */
.nf-body, .nf-bar, .nf-eyes, .nf-eye, .nf-lid, .nf-w, .nf-spin { transform-box: fill-box; transform-origin: center; }
.nf-hop { transform-box: view-box; transform-origin: 50px 92px; }
.nf-body { transform-box: view-box; transform-origin: 50px 88px; }
.nf-bar { transform-box: view-box; transform-origin: 50px 10px; transition: transform 0.28s cubic-bezier(0.34, 1.4, 0.64, 1); }
.nf-eyes { transform-box: view-box; transform-origin: 50px 51px; transition: transform 0.16s ease-out, opacity 0.22s ease; }
.nf-eye { transition: transform 0.28s cubic-bezier(0.34, 1.5, 0.64, 1); }
.nf-lid { transition: transform 0.07s ease-in; }
.nf-o { fill: var(--nf-eye); transition: fill 0.3s ease, opacity 0.12s ease; }
.nf-h, .nf-c, .nf-x { fill: none; stroke: var(--nf-eye); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 0.12s ease, stroke 0.3s ease; }
.nf-ring { transition: opacity 0.4s ease; }
.nf-spin { stroke: rgba(255, 255, 255, 0.92); opacity: 0; transform-box: view-box; transform-origin: 50px 50px; transition: opacity 0.25s ease; }
.nf-w { stroke: #86e6ff; stroke-width: 3; opacity: 0; }

/* Giro completo (al enviar o subir algo) y saltito (al pasar el ratón) */
.nf-spin-wrap { transform-box: view-box; transform-origin: 50px 50px; }
.nf.spin .nf-spin-wrap { animation: nfTurn 0.82s cubic-bezier(0.34, 1.32, 0.5, 1); }
@keyframes nfTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.nf.boop { animation: nfBoop 0.34s ease-out; }
@keyframes nfBoop { 0% { transform: scale(1); } 40% { transform: scale(1.13); } 100% { transform: scale(1); } }

/* ── Saludo: un saltito y un bracito que sale de detrás y se agita ── */
.nf-arm { transform-box: view-box; transform-origin: 13px 63px; transform: rotate(-80deg) scale(0.3); opacity: 0; }
.nf.wave .nf-arm { animation: nfArm 1.9s cubic-bezier(0.4, 0, 0.3, 1) both; }
.nf.wave .nf-hop { animation: nfHop 0.62s cubic-bezier(0.3, 1.5, 0.5, 1); }
@keyframes nfArm {
  0% { transform: rotate(-80deg) scale(0.3); opacity: 0; }
  12% { transform: rotate(6deg) scale(1); opacity: 1; }
  24% { transform: rotate(-20deg) scale(1); }
  36% { transform: rotate(8deg) scale(1); }
  48% { transform: rotate(-20deg) scale(1); }
  60% { transform: rotate(8deg) scale(1); }
  72% { transform: rotate(-14deg) scale(1); opacity: 1; }
  90% { transform: rotate(-75deg) scale(0.45); opacity: 1; }
  100% { transform: rotate(-82deg) scale(0.3); opacity: 0; }
}
@keyframes nfHop {
  0% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-5px) rotate(-5deg); }
  70% { transform: translateY(0.5px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

/* ── Cascos (Listen): bajan y se quedan puestos mientras escucha ── */
.nf-phones { transform-box: view-box; transform-origin: 50px 50px; opacity: 0; transform: translateY(-16px) scale(0.92);
  transition: opacity 0.22s ease, transform 0.5s cubic-bezier(0.34, 1.6, 0.64, 1); }
.nf-cup { fill: #15181e; stroke: #d7dde6; stroke-width: 2.4; }
.nf.a-listen .nf-phones { opacity: 1; transform: none; }

/* ── Gafas de sol: un momento al activar incógnito ── */
.nf-shades { transform-box: view-box; transform-origin: 50px 50px; opacity: 0; transform: translateY(-12px);
  transition: opacity 0.2s ease, transform 0.42s cubic-bezier(0.34, 1.5, 0.64, 1); }
.nf-glint { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.6; stroke-linecap: round; }
.nf.shades .nf-shades { opacity: 1; transform: none; }
.nf.shades .nf-eyes { opacity: 0; }

/* ── Te escucha dictar: mira al texto y el anillo late con tu voz ── */
.nf.a-hear .nf-ring { transform-box: view-box; transform-origin: 50px 50px; transform: scale(calc(1 + var(--nf-lvl, 0) * 0.075)); transition: transform 0.08s linear; }
.nf.a-hear .nf-svg { filter: drop-shadow(0 0 calc(1px + var(--nf-lvl, 0) * 7px) rgba(110, 215, 255, 0.85)); transition: filter 0.08s linear; }
.nf.a-hear .nf-eye { transform: scaleY(1.12); }

/* ── Zzz (dormida) ── */
.nf-z { font: 800 20px/1 system-ui, 'Segoe UI', sans-serif; fill: #bfe8ff; opacity: 0; }
.nf-z.z2 { font-size: 15px; }
.nf.x-sleep .nf-z { animation: nfZ 3.2s ease-in-out 3; }
.nf.x-sleep .nf-z.z2 { animation-delay: 1.6s; }
@keyframes nfZ {
  0% { opacity: 0; transform: translate(0, 6px); }
  25% { opacity: 0.95; }
  70% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(5px, -9px); }
}

/* Un archivo encima: ojos grandes, con ganas de comérselo */
.nf.a-drag .nf-eye { transform: scale(1.25, 1.3); }
.nf.a-drag .nf-svg { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); }

/* Parpadeo */
.nf.blink .nf-lid { transform: scaleY(0.1); }

/* ── Escuchando (Listen): además de los cascos, un destello al empezar (no
   brilla todo el rato) y los ojos algo más abiertos mientras dura. */
.nf.a-listen .nf-svg { animation: nfHaloOnce 1.6s ease-out 1; }
.nf.a-listen .nf-eye { transform: scaleY(1.12); }
@keyframes nfHaloOnce {
  0% { filter: drop-shadow(0 0 0 rgba(110, 215, 255, 0)); }
  35% { filter: drop-shadow(0 0 5px rgba(110, 215, 255, 0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(110, 215, 255, 0)); }
}

/* ── Expresiones ── */
/* Pensando: un reflejo recorre el anillo y la mirada se va arriba. */
.nf.x-think .nf-spin { opacity: 1; animation: nfSpin 1.1s linear infinite; }
.nf.x-think .nf-eyes { animation: nfPonder 2.6s ease-in-out infinite; }
@keyframes nfSpin { to { transform: rotate(360deg); } }
@keyframes nfPonder {
  0%, 100% { transform: translate(-1.8px, -3px); }
  50% { transform: translate(1.8px, -3.2px); }
}

/* Respondiendo: ondas a los lados y un leve vaivén. */
.nf.x-speak .nf-wl.nf-w1, .nf.x-speak .nf-wr.nf-w1 { animation: nfWave 1.05s ease-out infinite; }
.nf.x-speak .nf-wl.nf-w2, .nf.x-speak .nf-wr.nf-w2 { animation: nfWave 1.05s ease-out 0.22s infinite; }
.nf.x-speak .nf-body { animation: nfBob 0.9s ease-in-out infinite; }
.nf.nod .nf-eye { transform: scaleY(0.78); transition-duration: 0.06s; }
@keyframes nfWave { 0% { opacity: 0; } 25% { opacity: 0.95; } 100% { opacity: 0; } }
@keyframes nfBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }

/* Contento (al hacer clic, al terminar): ojos ^ ^ y un bote. */
.nf.x-happy .nf-o { opacity: 0; }
.nf.x-happy .nf-h { opacity: 1; }
.nf.x-happy .nf-body { animation: nfSquash 0.55s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes nfSquash {
  0% { transform: scale(1, 1); }
  30% { transform: scale(1.09, 0.9); }
  62% { transform: scale(0.97, 1.04); }
  100% { transform: scale(1, 1); }
}

/* Algo no cuadra (confirmación pendiente, aviso de Rayos X): ojos ámbar y
   preocupados. */
.nf.x-warn { --nf-eye: #ffc862; }
.nf.x-warn .nf-eye.l { transform: rotate(16deg) scaleY(0.86); }
.nf.x-warn .nf-eye.r { transform: rotate(-16deg) scaleY(0.86); }
.nf.x-warn .nf-body { animation: nfShake 0.42s ease-in-out; }

/* Error: ojos en X y un temblor. */
.nf.x-error { --nf-eye: #ff8080; }
.nf.x-error .nf-o { opacity: 0; }
.nf.x-error .nf-x { opacity: 1; }
.nf.x-error .nf-body { animation: nfShake 0.5s ease-in-out; }
@keyframes nfShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-2.6px); }
  40% { transform: translateX(2.4px); }
  60% { transform: translateX(-1.6px); }
  80% { transform: translateX(1.2px); }
}

/* Mareado (triple clic): ojos en X que giran y la cabeza se tambalea. */
.nf.x-dizzy .nf-o { opacity: 0; }
.nf.x-dizzy .nf-x { opacity: 1; }
.nf.x-dizzy .nf-eye { animation: nfSpin 0.7s linear infinite; }
.nf.x-dizzy .nf-body { animation: nfWobble 0.9s ease-in-out infinite; }
@keyframes nfWobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  75% { transform: rotate(9deg); }
}

/* Dormido (sin actividad un rato): ojos cerrados y respiración lenta. */
.nf.x-sleep .nf-o { opacity: 0; }
.nf.x-sleep .nf-c { opacity: 1; }
.nf.x-sleep .nf-ring { opacity: 0.72; }
/* Unas pocas veces y quieta: una animación sin fin repinta el overlay todo
   el rato aunque no lo mires (y la cara se duerme cuando trabajas en otra cosa). */
.nf.x-sleep .nf-body { animation: nfBreath 3.6s ease-in-out 3; }
@keyframes nfBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.965); } }

/* ═══ Bolita en el logo (overlay) ═══════════════════════════════════════
 * Arriba a la izquierda del logo, con el chat oculto. Azul: ya ha
 * contestado y todo bien. Naranja: necesita algo de ti (confirmación,
 * pregunta) o algo ha fallado. */
.top-logo { position: relative; }
.nf-dot {
  position: absolute; top: -2px; left: -2px; z-index: 3;
  width: 8px; height: 8px; border-radius: 50%;
  background: #3f9cff;
  box-shadow: 0 0 0 1.5px #0a0b0e, 0 0 6px rgba(63, 156, 255, 0.85);
  transform: scale(0); pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease;
}
.nf-dot.on { transform: scale(1); animation: nfDotPulse 2s ease-in-out 0.3s 3; }
.nf-dot.warn { background: #ff9a3c; box-shadow: 0 0 0 1.5px #0a0b0e, 0 0 6px rgba(255, 154, 60, 0.85); }
@keyframes nfDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.78); } }

@media (prefers-reduced-motion: reduce) {
  .nf *, .nf .nf-svg, .nf-dot { animation: none !important; }
}