/* =========================================================================
   LENI — la esfera narradora (assets/leni.js). Misma esfera de vidrio del loader.
   ========================================================================= */
.leni{position:fixed;inset:0;z-index:70;pointer-events:none}
.leni-pos{--s:60px;position:absolute;left:var(--gutter);bottom:var(--gutter);width:var(--s);height:var(--s);will-change:transform}
.leni-orb{pointer-events:auto;position:relative;width:100%;height:100%;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.34) 0 3%,rgba(255,255,255,.1) 12%,transparent 30%),
    radial-gradient(circle at 70% 82%,rgba(var(--glow-warm),.32),transparent 46%),
    radial-gradient(circle at 50% 45%,#17181e 0%,#08080a 64%,#030303 100%);
  box-shadow:inset -10px -14px 26px rgba(0,0,0,.9),inset 5px 7px 16px rgba(255,255,255,.07),0 18px 40px -14px rgba(0,0,0,.9),0 0 34px -10px rgba(var(--glow),.6);
  transition:box-shadow .5s,filter .8s,opacity .8s}
.leni-orb::after{content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;background:conic-gradient(from 210deg,transparent 0 8%,rgba(var(--glow),.6) 16%,transparent 30%,rgba(var(--glow-warm),.4) 48%,transparent 62%,rgba(255,255,255,.3) 80%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.8}
.leni-orb:focus-visible{outline:2px solid #fff;outline-offset:4px}
/* rostro: pantalla de robot con ojos cian */
.leni-face{position:absolute;left:12%;top:16%;width:76%;height:66%;fill:#4cf2ff;stroke:#4cf2ff;stroke-width:0;filter:drop-shadow(0 0 2.5px rgba(76,242,255,.95)) drop-shadow(0 0 7px rgba(76,242,255,.45));pointer-events:none;overflow:visible;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.leni-face .ln{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.leni-face .look{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.leni-face .red{fill:#ff3b6b;stroke:#ff3b6b;filter:drop-shadow(0 0 3px rgba(255,59,107,.9))}
.leni-face .hrt{fill:#ff4d7a;stroke:none;filter:drop-shadow(0 0 3px rgba(255,77,122,.9));transform-box:fill-box;transform-origin:center;animation:leni-beat 1.1s ease-in-out infinite}
@keyframes leni-beat{0%,100%{transform:scale(1)}15%{transform:scale(1.22)}30%{transform:scale(.96)}45%{transform:scale(1.12)}}
.leni-face .eyes{transform-box:fill-box;transform-origin:center;animation:leni-blink 5.5s infinite}
.leni-face .mouth-o{transform-box:fill-box;transform-origin:center;animation:leni-talk .26s ease-in-out infinite alternate}
/* lip-sync: con audio, la boca la mueve la amplitud de la voz y no un temporizador */
.leni-face.is-sync .mouth-o{animation:none;transition:transform 60ms linear}
@keyframes leni-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
@keyframes leni-talk{from{transform:scaleY(.55)}to{transform:scaleY(1.25)}}
.leni-ring{position:absolute;inset:-7px;border-radius:50%;border:1.5px solid transparent;opacity:0;transition:opacity .4s,border-color .4s}
/* estados */
.leni-orb.is-idle{animation:leni-float 5s ease-in-out infinite,leni-breathe 4s ease-in-out infinite}
.leni-orb.is-talking{box-shadow:inset -10px -14px 26px rgba(0,0,0,.9),inset 5px 7px 16px rgba(255,255,255,.07),0 18px 40px -14px rgba(0,0,0,.9),0 0 46px -6px rgba(var(--glow-warm),.85);animation:leni-float 5s ease-in-out infinite}
.leni-orb.is-listening,.leni-orb.is-thinking{animation:leni-float 5s ease-in-out infinite}
.leni-orb.is-listening .leni-ring{opacity:1;border-color:rgba(var(--glow),.9)}
.leni-orb.is-thinking .leni-ring{opacity:1;border:0;padding:2px;background:conic-gradient(from 0deg,transparent 0 50%,#FF0A4E 70%,#2F6BFF 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:leni-spin 1.2s linear infinite}
@keyframes leni-float{50%{translate:0 -4px}}
@keyframes leni-breathe{50%{filter:brightness(1.18)}}
@keyframes leni-spin{to{transform:rotate(360deg)}}
/* dormida (botón): brillo atenuado, sin flotar, ojos «– –» y una Z de píxeles */
.leni.is-asleep .leni-orb{animation:none;filter:brightness(.62) saturate(.6);box-shadow:inset -10px -14px 26px rgba(0,0,0,.9),0 18px 40px -14px rgba(0,0,0,.9)}
.leni-face .zz{animation:leni-z 2.6s ease-in-out infinite}
@keyframes leni-z{0%{opacity:0;transform:translate(0,3px)}30%{opacity:1}100%{opacity:0;transform:translate(3px,-5px)}}
.leni-face .yawn{transform-box:fill-box;transform-origin:center;animation:leni-yawn 2.6s ease-in-out infinite}
@keyframes leni-yawn{0%,100%{transform:scale(.6)}40%{transform:scale(1.2,1.35)}}

/* burbuja de vidrio: junto a la esfera (posición calculada en leni.js) */
.leni-bubble{pointer-events:auto;position:absolute;left:var(--gutter);top:auto;bottom:calc(var(--gutter) + 76px);width:min(320px,calc(100vw - 32px));padding:16px 44px 16px 18px;border-radius:18px;color:var(--ink);background:rgba(16,16,20,.94);
  border:1px solid var(--stroke-hi);box-shadow:0 30px 70px -30px rgba(0,0,0,.95),0 0 50px -30px rgba(var(--glow),.8);animation:leni-in .35s cubic-bezier(.16,1,.3,1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.leni-bubble[style*="top"]{bottom:auto}
.leni-bubble[hidden]{display:none}
.leni-bubble p{font-size:15px;line-height:1.45}
.leni-bubble::after{content:"";position:absolute;left:var(--tx,22px);bottom:-7px;width:12px;height:12px;background:inherit;border-right:1px solid var(--stroke-hi);border-bottom:1px solid var(--stroke-hi);transform:rotate(45deg)}
.leni-bubble.is-below::after{bottom:auto;top:-7px;transform:rotate(225deg)}
.leni-actions{display:flex;flex-wrap:wrap;gap:8px}
.leni-actions:not(:empty){margin-top:12px}
.leni-actions .btn{font-size:11px;padding:10px 16px;min-height:44px;gap:8px}
.leni-actions .btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.leni-x{position:absolute;top:6px;right:6px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);font-size:12px;line-height:1;transition:color .3s,background .3s}
.leni-x:hover,.leni-x:focus-visible{color:var(--ink);background:rgba(255,255,255,.08)}
.leni-x:focus-visible{outline:2px solid #fff;outline-offset:1px}
@keyframes leni-in{from{opacity:0;scale:.96}}

/* despierta / dormida: un solo botón junto a la casa de LENI (≥ 44 × 44 px) */
.leni-power{pointer-events:auto;position:absolute;left:calc(var(--gutter) + 70px);bottom:calc(var(--gutter) + 8px);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:color .3s,box-shadow .3s,transform .3s}
.leni-power svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.leni-power .sun{display:none}
.leni-power[aria-pressed="true"]{box-shadow:0 0 22px -6px rgba(var(--glow),.9)}
.leni-power[aria-pressed="false"] .moon{display:none}
.leni-power[aria-pressed="false"] .sun{display:inline;color:#ffd166}
.leni-power:hover{transform:scale(1.06)}
.leni-power:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* el chat se abre desde LENI (abajo a la izquierda); WhatsApp queda solo a la derecha */
.leni-on .fab [data-chat-open]{display:none}
.leni-on .fab .chat{position:fixed;left:var(--gutter);right:auto;bottom:calc(var(--gutter) + 76px)}
.menu.is-open ~ .leni{opacity:0;pointer-events:none}
.leni.is-playing .leni-bubble{display:none}
/* modo juego: brillo que gira al rodar */
.leni-roll{position:absolute;inset:3px;border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 18%,rgba(255,255,255,.10) 22%,transparent 30% 60%,rgba(var(--glow),.16) 66%,transparent 74%)}

@media (max-width:600px){
  .leni-pos{--s:48px;left:16px;bottom:16px}
  .leni-bubble,.leni-bubble[style]{left:12px!important;right:12px;top:auto!important;bottom:80px!important;width:auto}
  .leni-bubble::after{display:none}
  .leni-power{left:72px;bottom:18px}
  .leni-on .fab .chat{left:12px;bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  .leni-orb,.leni-orb.is-idle,.leni-orb.is-talking,.leni-orb.is-listening,.leni-orb.is-thinking{animation:none}
  .leni-orb.is-thinking .leni-ring,.leni-bubble{animation:none}
  .leni-face .eyes,.leni-face .mouth,.leni-face .zz,.leni-face .yawn,.leni-face .hrt{animation:none!important}
}

/* chat: indicador de respuesta generada con Gemini y opción de leer en voz alta */
.chat-badge{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:9px;letter-spacing:.06em;color:var(--ink-2)}
.chat-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#4cf2ff;box-shadow:0 0 8px #4cf2ff}
.chat-read{margin-top:6px;min-height:32px;padding:0 10px;border-radius:999px;border:1px solid var(--stroke);font-size:9px;color:var(--ink-2);transition:color .3s,border-color .3s}
.chat-read[aria-pressed="true"]{color:var(--ink);border-color:rgba(var(--glow),.6)}
.chat-read:focus-visible{outline:2px solid #fff;outline-offset:2px}