/* ============================================================
   NINA WIDGET — asistente pre-login de la landing NEO·TECH
   TODO scopeado bajo #nina-root (vars --nina-* propias) para NO
   colisionar con la landing BOSS. z-index muy alto pero el panel
   de login (que vive en #app) lo tapa porque se monta después y
   ocupa toda la pantalla; igual el widget se OCULTA si hay sesión.
   ============================================================ */

#nina-root{
  --nina-teal:#2dd4bf; --nina-teal-deep:#0f766e; --nina-teal-glow:rgba(45,212,191,.42);
  --nina-amber:#f2a33c; --nina-amber-deep:#e0892a; --nina-cream:#f5efe2;
  --nina-slate:#1A1E26; --nina-slate-2:#1c252f;
  --nina-line:rgba(255,255,255,.085);
  --nina-glass:rgba(18,26,34,.74);
  --nina-txt:#e9f1f0; --nina-muted:#9fb2b3; --nina-ok:#46e36b;
  --nina-shadow:0 24px 60px -20px rgba(0,0,0,.66);
  --nina-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;

  position:fixed;
  /* Pegado al borde derecho, ARRIBA del botón flotante de WhatsApp
     (que está en bottom:22px). Le damos bottom:92px para no taparlo. */
  right:22px; bottom:92px; z-index:2147483000;
  display:flex; flex-direction:column; align-items:flex-end; gap:14px;
  font-family:var(--nina-font);
  -webkit-tap-highlight-color:transparent;
}
#nina-root *{box-sizing:border-box}

/* ---- Pod colapsado (avatar) ---- */
#nina-root .nina-pod{
  position:relative; width:108px; height:108px; border-radius:28px;
  cursor:pointer; overflow:hidden;
  background:
    radial-gradient(120% 95% at 50% 4%, rgba(45,212,191,.22), transparent 60%),
    linear-gradient(160deg, rgba(45,212,191,.10), rgba(15,22,30,.94));
  border:1px solid rgba(45,212,191,.36);
  box-shadow:var(--nina-shadow), inset 0 0 0 1px rgba(255,255,255,.05);
  transition:transform .35s cubic-bezier(.2,.9,.25,1), box-shadow .35s, border-color .35s;
}
#nina-root .nina-pod:hover{transform:translateY(-4px) scale(1.03);border-color:rgba(45,212,191,.62)}
#nina-root .nina-pod:focus-visible{outline:3px solid var(--nina-teal);outline-offset:3px}
#nina-root .nina-pod canvas{display:block;width:100%;height:100%}
#nina-root.nina-open .nina-pod{display:none}

#nina-root .nina-fallback{
  position:absolute; inset:0; display:none; overflow:hidden; background-repeat:no-repeat;
}
#nina-root .nina-fallback.on{display:block}
#nina-root .nina-fallback .face{
  position:absolute; inset:0; background-repeat:no-repeat;
  transform-origin:50% 80%; animation:ninaFbBreath 4.4s ease-in-out infinite;
}
#nina-root .nina-fallback .lids{
  position:absolute; left:18%; right:18%; top:30%; height:9%;
  transform:scaleY(0); transform-origin:50% 50%;
  animation:ninaFbBlink 5.2s ease-in-out infinite;
  background:radial-gradient(60% 100% at 50% 50%, rgba(20,18,16,.5), rgba(20,18,16,0));
}
@keyframes ninaFbBreath{0%,100%{transform:scale(1.0) translateY(0)}50%{transform:scale(1.012) translateY(-1.4%)}}
@keyframes ninaFbBlink{0%,93%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}

#nina-root .nina-ring{
  position:absolute; inset:0; border-radius:28px; pointer-events:none;
  box-shadow:0 0 0 0 rgba(45,212,191,.45); animation:ninaPulse 3.6s ease-in-out infinite;
}
@keyframes ninaPulse{0%,100%{box-shadow:0 0 0 0 rgba(45,212,191,.34)}50%{box-shadow:0 0 0 10px rgba(45,212,191,0)}}
#nina-root .nina-badge{
  position:absolute; left:8px; bottom:8px;
  display:flex;align-items:center;gap:6px;
  background:rgba(8,12,16,.62);backdrop-filter:blur(6px);
  border:1px solid var(--nina-line);border-radius:999px;padding:4px 9px;
  font-size:10.5px;font-weight:800;letter-spacing:.4px;color:var(--nina-cream)
}
#nina-root .nina-badge .live{width:7px;height:7px;border-radius:50%;background:var(--nina-ok);box-shadow:0 0 8px var(--nina-ok);animation:ninaLiveb 1.6s infinite}
@keyframes ninaLiveb{0%,100%{opacity:1}50%{opacity:.35}}

/* Teaser flotante */
#nina-root .nina-teaser{
  max-width:236px; background:var(--nina-glass); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid var(--nina-line); border-radius:16px 16px 4px 16px; padding:13px 15px;
  font-size:13.5px; line-height:1.45; color:var(--nina-txt); box-shadow:var(--nina-shadow);
  transform-origin:bottom right; animation:ninaPop .5s cubic-bezier(.2,.9,.25,1) both;
}
#nina-root.nina-open .nina-teaser{display:none}
#nina-root .nina-teaser b{color:var(--nina-teal)}
#nina-root .nina-teaser .wave{display:inline-block;vertical-align:-3px;margin-left:2px;transform-origin:70% 80%;animation:ninaWavehand 2.4s ease-in-out 1s 3}
@keyframes ninaWavehand{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(16deg)}80%{transform:rotate(-8deg)}90%{transform:rotate(12deg)}}
#nina-root .nina-teaser .cta{margin-top:11px;display:flex;gap:8px;flex-wrap:wrap}
@keyframes ninaPop{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}

/* ---- Panel de chat ---- */
#nina-root .nina-panel{
  width:min(384px, calc(100vw - 32px)); height:min(620px, calc(100vh - 132px));
  background:linear-gradient(180deg, #131b23 0%, #0d141a 100%);
  border:1px solid var(--nina-line); border-radius:24px; box-shadow:var(--nina-shadow);
  display:none; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
}
#nina-root.nina-open .nina-panel{display:flex; animation:ninaPanelin .42s cubic-bezier(.2,.9,.25,1) both}
@keyframes ninaPanelin{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}

#nina-root .np-stage{
  position:relative; flex:0 0 auto; height:200px; overflow:hidden;
  background:
    radial-gradient(130% 100% at 50% 4%, rgba(45,212,191,.20) 0%, transparent 58%),
    radial-gradient(150% 130% at 50% 140%, rgba(45,212,191,.06) 0%, transparent 55%),
    linear-gradient(180deg, #0f1a20, #0c1419);
  border-bottom:1px solid var(--nina-line);
}
#nina-root .np-stage .halo{
  position:absolute; left:50%; top:42%; width:300px;height:300px;transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle, rgba(45,212,191,.16) 0%, transparent 64%);
  pointer-events:none; filter:blur(2px);
}
#nina-root .np-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#nina-root .np-stage .nina-fallback{inset:0}
#nina-root .np-idbar{
  position:absolute;left:0;right:0;bottom:0;z-index:4;
  display:flex;align-items:center;gap:11px;padding:10px 14px;
  background:linear-gradient(0deg, rgba(8,12,16,.82), transparent);
}
#nina-root .np-idbar .who{flex:1;min-width:0;line-height:1.18}
#nina-root .np-idbar .who .n{font-weight:850;font-size:16px;display:flex;align-items:center;gap:7px}
#nina-root .np-idbar .who .n .mark{font:800 9px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1px;
  color:var(--nina-teal);border:1px solid rgba(45,212,191,.4);border-radius:6px;padding:2px 5px;background:rgba(45,212,191,.08)}
#nina-root .np-idbar .who .s{font-size:12px;color:var(--nina-muted);display:flex;align-items:center;gap:6px;margin-top:3px}
#nina-root .np-idbar .who .s .live{width:7px;height:7px;border-radius:50%;background:var(--nina-ok);box-shadow:0 0 8px var(--nina-ok);animation:ninaLiveb 1.6s infinite}
#nina-root .np-x{appearance:none;border:1px solid var(--nina-line);background:rgba(8,12,16,.55);backdrop-filter:blur(6px);color:var(--nina-txt);
  width:34px;height:34px;border-radius:11px;cursor:pointer;display:grid;place-items:center;transition:.2s;flex:0 0 auto}
#nina-root .np-x:hover{background:rgba(255,255,255,.12)}
#nina-root .np-x:focus-visible{outline:2px solid var(--nina-teal);outline-offset:2px}

#nina-root .np-body{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
#nina-root .np-body::-webkit-scrollbar{width:8px}
#nina-root .np-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:8px}

#nina-root .nina-msg{max-width:84%;font-size:14px;line-height:1.5;padding:11px 13px;border-radius:14px;animation:ninaMsgin .35s cubic-bezier(.2,.9,.25,1) both}
@keyframes ninaMsgin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#nina-root .nina-msg.nina{align-self:flex-start;background:rgba(255,255,255,.05);border:1px solid var(--nina-line);border-bottom-left-radius:5px}
#nina-root .nina-msg.me{align-self:flex-end;background:linear-gradient(135deg,var(--nina-teal-deep),#0b5f59);color:#eafffb;border-bottom-right-radius:5px}
#nina-root .nina-msg b{color:var(--nina-teal)} #nina-root .nina-msg.me b{color:#bff6ee}

/* tarjeta de plan recomendado — escala compacta (chat, no póster) */
#nina-root .nina-plan-card{align-self:stretch;max-width:100%;border:1px solid rgba(45,212,191,.4);
  background:linear-gradient(165deg,rgba(45,212,191,.11),rgba(15,22,30,.5));
  border-radius:14px;padding:12px 13px;animation:ninaMsgin .4s both;box-shadow:0 10px 26px -18px var(--nina-teal-glow)}
#nina-root .nina-plan-card .pc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
#nina-root .nina-plan-card .tag{font-size:9.5px;font-weight:850;letter-spacing:.5px;color:var(--nina-teal);text-transform:uppercase;display:flex;align-items:center;gap:5px}
#nina-root .nina-plan-card .tag svg{flex:0 0 auto;width:12px;height:12px}
#nina-root .nina-plan-card .rec{font-size:9px;background:linear-gradient(135deg,var(--nina-amber),var(--nina-amber-deep));color:#2a1700;font-weight:850;padding:2px 8px;border-radius:999px;letter-spacing:.3px;display:inline-flex;align-items:center;gap:4px}
#nina-root .nina-plan-card .rec svg{width:10px;height:10px}
#nina-root .nina-plan-card .nm{font-size:16px;font-weight:850;margin:6px 0 0}
#nina-root .nina-plan-card .pr{font-size:14.5px;color:var(--nina-teal);font-weight:850}
#nina-root .nina-plan-card .pr small{color:var(--nina-muted);font-weight:600;font-size:11px}
#nina-root .nina-plan-card ul{margin:9px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
#nina-root .nina-plan-card li{display:flex;gap:7px;color:var(--nina-cream);font-size:12px;line-height:1.35}
#nina-root .nina-plan-card li svg{flex:0 0 auto;width:13px;height:13px;color:var(--nina-teal);margin-top:1px}
#nina-root .nina-plan-card .why{margin-top:9px;padding-top:9px;border-top:1px solid var(--nina-line);font-size:11.5px;color:var(--nina-muted);line-height:1.45}
#nina-root .nina-plan-card .why b{color:var(--nina-teal)}

/* chips */
#nina-root .nina-quick{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:100%;padding:0;min-height:0}
#nina-root .nina-quick:empty{display:none}
#nina-root .nina-quick .nina-chip{animation:ninaMsgin .3s both}
#nina-root .nina-chip{appearance:none;cursor:pointer;border:1px solid rgba(45,212,191,.4);background:rgba(45,212,191,.08);
  color:var(--nina-cream);padding:9px 13px;border-radius:999px;font-size:13px;font-weight:600;transition:.18s;font-family:inherit;display:inline-flex;align-items:center;gap:6px}
#nina-root .nina-chip:hover{background:rgba(45,212,191,.2);transform:translateY(-1px)}
#nina-root .nina-chip:focus-visible{outline:2px solid var(--nina-teal);outline-offset:2px}
#nina-root .nina-chip.cta{background:linear-gradient(135deg,var(--nina-amber),var(--nina-amber-deep));color:#241500;border-color:transparent;font-weight:800}
#nina-root .nina-chip.cta:hover{filter:brightness(1.07)}
#nina-root .nina-chip svg{flex:0 0 auto}

#nina-root .nina-typing{align-self:flex-start;display:flex;gap:5px;padding:12px 14px;background:rgba(255,255,255,.05);border:1px solid var(--nina-line);border-radius:14px;border-bottom-left-radius:5px}
#nina-root .nina-typing i{width:7px;height:7px;border-radius:50%;background:var(--nina-muted);animation:ninaTd 1.1s infinite}
#nina-root .nina-typing i:nth-child(2){animation-delay:.15s}#nina-root .nina-typing i:nth-child(3){animation-delay:.3s}
@keyframes ninaTd{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

#nina-root .np-foot{border-top:1px solid var(--nina-line);padding:11px 12px;display:flex;gap:9px;align-items:center}
#nina-root .np-foot input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--nina-line);color:var(--nina-txt);
  border-radius:12px;padding:12px 13px;font-size:14px;font-family:inherit;outline:none;transition:.2s}
#nina-root .np-foot input::placeholder{color:var(--nina-muted)}
#nina-root .np-foot input:focus{border-color:rgba(45,212,191,.6);background:rgba(45,212,191,.06);box-shadow:0 0 0 3px rgba(45,212,191,.12)}
#nina-root .np-foot button{appearance:none;cursor:pointer;border:none;width:44px;height:44px;border-radius:12px;
  background:linear-gradient(135deg,var(--nina-teal),var(--nina-teal-deep));display:grid;place-items:center;transition:.2s;flex:0 0 auto}
#nina-root .np-foot button:hover{filter:brightness(1.1)}
#nina-root .np-foot button:focus-visible{outline:2px solid var(--nina-cream);outline-offset:2px}

#nina-root .nina-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ============================================================
   ENTRADA: Nina entra desde la derecha y se asienta (settle slide-in).
   Anima SOLO transform/opacity de #nina-root (un compositor, cero layout).
   Distancia de fuga = ancho pod (108) + right (22) + colchón = 168px.
============================================================ */
#nina-root{ --nina-enter-x:168px; }
#nina-root.nina-entering{
  transform:translate3d(var(--nina-enter-x),0,0); opacity:0;
  pointer-events:none; will-change:transform,opacity;
}
#nina-root.nina-enter-run{
  pointer-events:none; will-change:transform,opacity;
  animation:ninaEnter .92s cubic-bezier(.16,.84,.30,1.02) both; /* overshoot leve = "aterriza" */
}
@keyframes ninaEnter{
  0%  {transform:translate3d(var(--nina-enter-x),0,0);opacity:0}
  55% {opacity:1}
  100%{transform:translate3d(0,0,0);opacity:1}
}
/* el teaser no se ve mientras Nina viaja; nace con su ninaPop al aterrizar */
#nina-root.nina-entering .nina-teaser,
#nina-root.nina-enter-run .nina-teaser{opacity:0;animation:none}
#nina-root.nina-arrived .nina-teaser{animation:ninaPop .5s cubic-bezier(.2,.9,.25,1) both}

/* ---- mano que saluda 👋 (FUERA del pod para no clipear; arriba-derecha,
   como mano levantada; visible sólo durante el gesto "saludo") ---- */
#nina-root .nina-hand{
  position:absolute; right:-4px; bottom:66px; z-index:7;
  font-size:32px; line-height:1; pointer-events:none;
  opacity:0; transform:translateY(8px) scale(.65); transform-origin:50% 90%;
  transition:opacity .2s ease, transform .2s ease;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.55));
}
#nina-root.nina-waving .nina-hand{
  opacity:1; transform:translateY(0) scale(1);
  animation:ninaHandWave .6s ease-in-out 2;   /* doble saludo rápido */
}
#nina-root.nina-open .nina-hand{display:none}  /* sin mano con el chat abierto */
@keyframes ninaHandWave{
  0%,100%{transform:rotate(-14deg)}
  30%{transform:rotate(16deg)}
  60%{transform:rotate(-8deg)}
}

@media (prefers-reduced-motion: reduce){
  /* degradación total de la entrada: Nina aparece en su lugar, sin slide/fade */
  #nina-root.nina-entering{transform:none;opacity:1;pointer-events:auto}
  #nina-root.nina-enter-run{animation:none}
  #nina-root.nina-entering .nina-teaser,
  #nina-root.nina-enter-run .nina-teaser{opacity:1;animation:none}
  #nina-root .nina-ring{animation:none}
  #nina-root .nina-fallback .face,
  #nina-root .nina-fallback .lids,
  #nina-root .nina-teaser .wave,
  #nina-root .nina-badge .live,
  #nina-root .np-idbar .who .s .live{animation:none}
  #nina-root *{scroll-behavior:auto !important}
}

/* En pantallas chicas, Nina se achica y se reubica para no chocar
   con el botón de WhatsApp (que en ≤480 pasa a right:14/bottom:14). */
@media (max-width:520px){
  #nina-root{right:12px;bottom:78px;gap:10px}
  #nina-root .nina-pod{width:92px;height:92px;border-radius:24px}
  #nina-root .nina-ring{border-radius:24px}
  #nina-root .nina-teaser{max-width:210px}
}