.npai-floating{width:160px;transition:transform .55s cubic-bezier(.22,.82,.22,1),opacity .3s ease}
.npai-right.npai-drawer-awaiting,.npai-right.npai-drawer-hidden{transform:translateX(182px)}
.npai-left.npai-drawer-awaiting,.npai-left.npai-drawer-hidden{transform:translateX(-182px)}
.npai-drawer-awaiting{opacity:0;pointer-events:none}
.npai-drawer-hidden .npai-mascot{opacity:0}
.npai-mascot{position:absolute;z-index:1;right:-15px;bottom:30px;width:190px;height:150px;pointer-events:none;opacity:1;transition:bottom .45s ease}
.npai-left .npai-mascot{right:auto;left:-15px}
.npai-mascot.npai-mascot-show{bottom:35px}
.npai-launcher,.npai-panel{z-index:2}.npai-launcher{position:relative;width:160px;justify-content:center}
.npai-drawer-toggle{position:absolute;z-index:4;left:-36px;bottom:0;width:36px;height:96px;border:0;border-radius:12px 0 0 12px;background:#17202a;color:#fff;box-shadow:-3px 3px 10px rgba(0,0,0,.18);font:800 24px/1 sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:8px 0;cursor:pointer;transition:background .2s ease}
.npai-left .npai-drawer-toggle{left:auto;right:-36px;border-radius:0 12px 12px 0;box-shadow:3px 3px 10px rgba(0,0,0,.18)}
.npai-drawer-toggle:hover,.npai-drawer-toggle:focus{background:var(--npai-accent)}
.npai-drawer-toggle[hidden]{display:none}
.npai-mascot-robot{position:absolute;left:10px;bottom:0;width:170px;height:114px;overflow:hidden;border:0;background:transparent;padding:0;cursor:pointer;pointer-events:auto;filter:drop-shadow(0 7px 7px rgba(0,0,0,.24))}
.npai-mascot-robot img{position:absolute;width:170px;height:auto;left:0;bottom:-1px;display:block;animation:npai-peek-breathe 3.5s ease-in-out infinite}
.npai-mascot-bubble{position:absolute;right:28px;bottom:118px;max-width:205px;min-width:120px;background:#fff;color:#17202a;border:3px solid #17202a;border-radius:18px;padding:10px 13px;font:700 13px/1.3 Inter,system-ui,sans-serif;text-align:left;box-shadow:5px 5px 0 rgba(183,149,69,.9);pointer-events:auto;cursor:pointer;transform:scale(.72) rotate(2deg);transform-origin:bottom right;opacity:0;visibility:hidden;transition:transform .35s ease,opacity .3s ease,visibility 0s .35s}
.npai-left .npai-mascot-bubble{right:auto;left:28px;transform-origin:bottom left}
.npai-mascot-show .npai-mascot-bubble{transform:scale(1) rotate(-1deg);opacity:1;visibility:visible;transition-delay:0s}
.npai-mascot-bubble:after{content:"";position:absolute;right:25px;bottom:-14px;width:20px;height:20px;background:#fff;border-right:3px solid #17202a;border-bottom:3px solid #17202a;transform:rotate(45deg)}
@keyframes npai-peek-breathe{0%,100%{transform:translateY(3px)}50%{transform:translateY(0)}}
@media(max-width:520px){.npai-right.npai-drawer-awaiting,.npai-right.npai-drawer-hidden{transform:translateX(172px)}.npai-left.npai-drawer-awaiting,.npai-left.npai-drawer-hidden{transform:translateX(-172px)}.npai-mascot{right:23px;transform:scale(.6);transform-origin:bottom right}.npai-left .npai-mascot{left:23px;right:auto;transform-origin:bottom left}.npai-mascot-bubble{font-size:20px;max-width:280px;min-width:180px}}
@media(prefers-reduced-motion:reduce){.npai-mascot,.npai-mascot-bubble{transition:none}.npai-mascot-robot img{animation:none}}
.npai-name-picker{margin:0 12px 10px;padding:12px;background:#fff9e9;border:1px solid #dec778;border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.08);font-size:13px}
.npai-name-picker[hidden]{display:none}
.npai-name-picker strong{display:block;color:#17202a;margin-bottom:3px}
.npai-name-picker p{margin:0 0 9px;color:#5d6670}
.npai-name-options{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.npai-name-options button{border:1px solid var(--npai-accent);background:#fff;color:#17202a;border-radius:999px;padding:5px 10px;font:700 12px/1.2 inherit;cursor:pointer}
.npai-name-options button:hover,.npai-name-options button:focus{background:var(--npai-accent);color:#fff}
.npai-custom-name{display:flex;gap:6px}
.npai-custom-name input{min-width:0;flex:1;border:1px solid #c9cfd5;border-radius:8px;padding:7px 9px;font:inherit}
.npai-custom-name button{border:0;border-radius:8px;background:#17202a;color:#fff;padding:7px 10px;font-weight:700;cursor:pointer}
.npai-panel header{position:relative;z-index:1;min-height:110px;padding:18px 16px 20px 170px;overflow:visible}
.npai-avatar{position:absolute!important;left:10px;bottom:-10px;overflow:hidden;background:transparent!important;width:150px;height:100px;border-radius:0}
.npai-avatar img{position:absolute;width:150px;height:auto;left:0;bottom:0;object-fit:contain;object-position:center bottom;display:block;transform:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.28))}
.npai-panel .npai-messages{position:relative;z-index:2}
.npai-starstruck .npai-avatar:after{content:"✨";position:absolute;right:-12px;top:-12px;font-size:20px;animation:npai-starry .7s ease-in-out infinite alternate}
@keyframes npai-starry{from{transform:scale(.75) rotate(-12deg);opacity:.65}to{transform:scale(1.2) rotate(10deg);opacity:1}}

.npai-drawer-label{writing-mode:vertical-rl;text-orientation:mixed;font:700 13px/1.2 Inter,system-ui,sans-serif;letter-spacing:.4px;white-space:nowrap}
.npai-drawer-arrow{font:800 22px/1 sans-serif}
.npai-v-top .npai-drawer-toggle{top:0;bottom:auto}
.npai-drawer-toggle:focus-visible{outline:3px solid #fff;outline-offset:-4px}

/* Seasonal accessories retain the original Zippy artwork. */
.npai-mascot-robot{overflow:visible;cursor:pointer}.npai-draggable .npai-mascot-robot{cursor:grab}.npai-draggable .npai-mascot-robot:active{cursor:grabbing}
.npai-mascot-robot .npai-seasonal-hat{position:absolute!important;left:26px!important;top:-44px!important;bottom:auto!important;width:118px!important;height:84px!important;object-fit:contain;animation:none!important;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
.npai-panel .npai-avatar{overflow:visible}
.npai-avatar .npai-seasonal-hat{position:absolute!important;left:23px!important;top:-39px!important;bottom:auto!important;width:104px!important;height:74px!important;pointer-events:none;z-index:2}
.npai-drag-sweat{display:none;position:absolute;right:15px;top:36px;font-size:20px;z-index:3}
.npai-dragging .npai-drag-sweat{display:block}.npai-dragging .npai-mascot-robot{animation:npai-nervous .22s ease-in-out infinite alternate;cursor:grabbing}
.npai-relieved .npai-mascot-robot{animation:npai-relief .65s ease-out}
.npai-free.npai-floating{max-width:160px}
.npai-dragging .npai-mascot-bubble,.npai-relieved .npai-mascot-bubble{transform:scale(1);opacity:1;visibility:visible}
@keyframes npai-nervous{from{transform:rotate(-8deg) translateY(-2px)}to{transform:rotate(8deg) translateY(2px)}}
@keyframes npai-relief{0%{transform:rotate(-5deg) translateY(-5px)}45%{transform:rotate(3deg) translateY(2px)}100%{transform:rotate(0) translateY(0)}}
@media(prefers-reduced-motion:reduce){.npai-dragging .npai-mascot-robot,.npai-relieved .npai-mascot-robot{animation:none}.npai-floating{transition:none}}

.npai-draggable .npai-mascot-robot{user-select:none;-webkit-user-select:none}.npai-draggable .npai-mascot-robot img{-webkit-user-drag:none}

.npai-has-attire .npai-mascot-bubble{bottom:180px;z-index:5}
.npai-v-top.npai-has-mascot.npai-has-attire{top:245px}
.npai-has-attire .npai-panel header{min-height:135px}
.npai-drag-sweat{font-size:0;width:12px;height:17px;background:#83d3fc;border:1px solid #477b9e;border-radius:60% 60% 60% 0;transform:rotate(-45deg)}

/* 0.28.7: more visible right-side wave. Scale the right hand about its sleeve and
   offset it outward so the cuff stays clipped behind the viewport edge while
   the open palm reaches farther into the page. The good left-side wave is unchanged. */
.npai-wave-hand{
 position:absolute;top:-130px;right:-70px;left:auto;width:188px;height:188px;
 background:url('robot-wave-hand.png') center center / contain no-repeat;
 pointer-events:none;opacity:0;visibility:hidden;z-index:0;
 /* The mirrored hand pivots close to the cuff and reaches into the page.
    The cutoff end of the forearm remains outside the browser edge. */
 transform-origin:43% 94%;transform:translateX(16px) rotate(9deg) scaleX(-1);
 filter:drop-shadow(0 4px 5px rgba(0,0,0,.28));
}
.npai-left .npai-wave-hand,.npai-wave-docked-left .npai-wave-hand{
 left:-36px;right:auto;top:-82px;width:118px;height:118px;transform-origin:29% 94%;
 transform:translateX(-16px) rotate(-9deg);
}
/* The arrow and text remain above the decorative wave. */
.npai-drawer-toggle .npai-drawer-arrow,.npai-drawer-toggle .npai-drawer-label{position:relative;z-index:1}
.npai-drawer-hidden.npai-hand-waving .npai-wave-hand{
 visibility:visible;animation:npai-edge-wave-right 2.5s ease-in-out both;
}
.npai-left.npai-drawer-hidden.npai-hand-waving .npai-wave-hand,
.npai-wave-docked-left.npai-drawer-hidden.npai-hand-waving .npai-wave-hand{
 animation-name:npai-edge-wave-left;
}
/* Pivot at the off-screen sleeve, not the hand: never float mid-air. */
@keyframes npai-edge-wave-left{
 0%,100%{opacity:0;transform:translateX(-18px) rotate(-10deg)}
 17%{opacity:1;transform:translateX(0) rotate(-3deg)}
 33%,55%{opacity:1;transform:translateX(0) rotate(8deg)}
 44%,66%{opacity:1;transform:translateX(0) rotate(-7deg)}
 85%{opacity:1;transform:translateX(-1px) rotate(-2deg)}
}
@keyframes npai-edge-wave-right{
 0%,100%{opacity:0;transform:translateX(18px) rotate(10deg) scaleX(-1)}
 17%{opacity:1;transform:translateX(0) rotate(3deg) scaleX(-1)}
 33%,55%{opacity:1;transform:translateX(0) rotate(-8deg) scaleX(-1)}
 44%,66%{opacity:1;transform:translateX(0) rotate(7deg) scaleX(-1)}
 85%{opacity:1;transform:translateX(1px) rotate(2deg) scaleX(-1)}
}
@media(max-width:520px){
 .npai-wave-hand{top:-102px;right:-52px;width:140px;height:140px}
 .npai-left .npai-wave-hand,.npai-wave-docked-left .npai-wave-hand{left:-32px;right:auto;top:-70px;width:100px;height:100px}
}
/* Prevent overlap with the viewport's top edge for top-docked tabs. */
.npai-v-top .npai-wave-hand{top:101px}
.npai-v-top.npai-left .npai-wave-hand,.npai-v-top.npai-wave-docked-left .npai-wave-hand{top:83px}
@media(max-width:520px){.npai-v-top .npai-wave-hand{top:85px}.npai-v-top.npai-left .npai-wave-hand,.npai-v-top.npai-wave-docked-left .npai-wave-hand{top:83px}}
@media(prefers-reduced-motion:reduce){
 .npai-drawer-hidden.npai-hand-waving .npai-wave-hand,
 .npai-left.npai-drawer-hidden.npai-hand-waving .npai-wave-hand{animation:none;visibility:hidden}
}
