/* mylo companion: avatar flotante que acompaña al visitante */
.mc{position:fixed;left:0;top:0;z-index:40;width:76px;height:76px;pointer-events:none;font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,sans-serif;will-change:transform}
.mc.corner{left:auto;top:auto;right:22px;bottom:22px;width:88px;height:88px;transform:none!important}
.mc:not(.corner){display:flex;align-items:center;justify-content:center}
.mc:not(.corner) .mc-body{width:calc(76px * var(--mcs,1));height:calc(76px * var(--mcs,1))}
.mc:not(.corner) .mc-face{width:calc(52px * var(--mcs,1));height:calc(52px * var(--mcs,1))}
/* En ruta, la burbuja va al lado del avatar (nunca encima del texto de arriba) */
.mc:not(.corner) .mc-bubble{top:50%;bottom:auto;left:calc(100% + 12px);translate:0 -50%;border-radius:18px 18px 18px 6px;transform-origin:left center}
.mc:not(.corner).left .mc-bubble{left:auto;right:calc(100% + 12px);border-radius:18px 18px 6px 18px;transform-origin:right center}
.mc.moving .mc-bubble{opacity:0;pointer-events:none}
.mc[hidden]{display:none}
.mc-bubble{pointer-events:auto;position:absolute;bottom:calc(100% - 6px);left:calc(100% - 10px);width:max-content;max-width:min(250px,60vw);padding:11px 15px;border-radius:18px 18px 18px 4px;background:#FFFFFF;border:1px solid #EDEDF0;box-shadow:0 10px 30px rgba(28,28,30,.12);color:#1C1C1E;font-size:14px;line-height:1.5;text-wrap:pretty;transform-origin:bottom left;transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.25,1)}
.mc.left .mc-bubble,.mc.corner .mc-bubble{left:auto;right:calc(100% - 10px);border-radius:18px 18px 4px 18px;transform-origin:bottom right}
.mc-bubble[hidden]{display:block;opacity:0;transform:scale(.94);pointer-events:none}
.mc-bubble strong{color:#2E2A8C;font-weight:800}
.mc-body{pointer-events:auto;position:relative;width:88px;height:88px;border-radius:999px;background:#2E2A8C;box-shadow:0 0 0 3px #FFFFFF,0 12px 32px rgba(46,42,140,.32);cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.25,1);display:flex;align-items:center;justify-content:center}
.mc-body:hover{transform:scale(1.06)}
.mc-body:focus-visible{outline:0;box-shadow:0 0 0 3px #FFFFFF,0 0 0 7px #D9D6F5,0 12px 32px rgba(46,42,140,.32)}
.mc-close{pointer-events:auto;position:absolute;top:-4px;right:-4px;z-index:1;width:24px;height:24px;border-radius:999px;border:1px solid #EDEDF0;background:#fff;color:#6B6B72;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .2s ease}
.mc:hover .mc-close,.mc-body:focus-visible+.mc-close{opacity:1}
/* Rostro provisional: círculo negro con dos ojos-píldora (sin boca).
   Las expresiones se hacen solo con los ojos. Se sustituye por el avatar real
   cuando se compila companion-avatar.js. */
.mc-face{width:60px;height:60px}
.mc-face .eyes{transform-origin:30px 28px;transition:transform .25s cubic-bezier(.2,.8,.25,1)}
.mc-face .eye{fill:#fff;transform-box:fill-box;transform-origin:center;transition:transform .22s cubic-bezier(.2,.8,.25,1);animation:mcBlink 5.5s infinite}
.mc-face .eye.r{animation-delay:.05s}
.mc[data-state="wave"] .mc-body{animation:mcWave 1.2s ease-in-out 1}
.mc[data-state="happy"] .mc-face .eye{transform:scaleY(.72) translateY(1px)}
.mc[data-state="celebrate"] .mc-body{animation:mcBounce .7s cubic-bezier(.2,.8,.25,1) 2}
.mc[data-state="celebrate"] .mc-face .eye{transform:scale(1.12,.7)}
.mc[data-state="curious"] .mc-face .eye.r{transform:scale(1.25) translateY(-1px)}
.mc[data-state="curious"] .mc-face .eye.l{transform:scaleY(.9)}
.mc[data-state="thinking"] .mc-face .eyes{transform:translate(4px,-2px)}
.mc[data-state="thinking"] .mc-face .eye{transform:scaleY(.8)}
.mc[data-state="excited"] .mc-face .eye{transform:scale(1.28)}
.mc[data-state="listening"] .mc-body{transform:rotate(-8deg)}
.mc[data-state="listening"] .mc-face .eye{transform:scaleY(1.1)}
.mc[data-state="oops"] .mc-body{animation:mcShake .5s ease 1}
.mc[data-state="oops"] .mc-face .eye{transform:scale(.85,.55)}
.mc[data-state="sleeping"] .mc-face .eye{transform:scaleY(.14);animation:none}
.mc[data-state="sleeping"] .mc-body{animation:mcBreathe 3.2s ease-in-out infinite}
@keyframes mcBlink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes mcWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-8deg)}}
@keyframes mcBounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px) scale(1.05)}}
@keyframes mcShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes mcBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@media (max-width:759px){.mc{width:56px;height:56px}.mc.corner{right:12px;bottom:12px;width:56px;height:56px}.mc-body{width:56px;height:56px}.mc-face{width:38px;height:38px}.mc-bubble{font-size:13px;max-width:min(220px,62vw)}}
@media (prefers-reduced-motion:reduce){.mc *{animation:none!important;transition:none!important}}
/* Avatar real (isla React compilada en companion-avatar.js) */
.mc-avatar-real{width:76px;height:76px;display:flex;align-items:center;justify-content:center}
.mc-avatar-real>*{width:100%;height:100%}
@media (max-width:640px){.mc-avatar-real{width:58px;height:58px}}