/* Floating help bot ("eyes" button). Only transform / opacity / colour transitions — cheap for the browser. */
.cpbot{--h:158;position:fixed;right:18px;bottom:18px;z-index:60;display:block;width:62px;height:62px;text-decoration:none;-webkit-tap-highlight-color:transparent}
.cpbot-face{position:absolute;inset:0;border-radius:50%;display:block;
  background:radial-gradient(circle at 32% 26%,hsl(var(--h) 72% 62%),hsl(var(--h) 80% 30%) 72%);
  box-shadow:0 10px 24px hsla(var(--h),80%,28%,.45),inset 0 -5px 9px rgba(0,0,0,.18);
  transition:background .9s ease,box-shadow .9s ease,transform .35s cubic-bezier(.34,1.56,.64,1);animation:cpbotFloat 3.2s ease-in-out infinite}
.cpbot:hover .cpbot-face{transform:scale(1.1) rotate(-4deg)}
.cpbot:active .cpbot-face{transform:scale(.94)}
.cpbot .eye{position:absolute;top:17px;width:17px;height:19px;background:#fff;border-radius:50%;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 -2px 3px rgba(0,0,0,.15);transition:height .12s,top .12s,border-radius .2s}
.cpbot .eye:nth-child(1){left:12px}.cpbot .eye:nth-child(2){right:12px}
.cpbot .pupil{width:8px;height:8px;border-radius:50%;background:#111827;position:relative;transition:transform .12s ease-out}
.cpbot .pupil::after{content:"";position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;top:1px;left:2px}
.cpbot .eye.blink{height:3px;top:25px}
.cpbot-mouth{position:absolute;left:50%;top:41px;width:18px;height:8px;margin-left:-9px;border:3px solid #fff;border-top:0;border-radius:0 0 18px 18px;transition:all .25s ease}
.cpbot-cheek{position:absolute;top:36px;width:9px;height:5px;border-radius:50%;background:#fda4af;opacity:0;transition:opacity .3s}
.cpbot-cheek.l{left:7px}.cpbot-cheek.r{right:7px}
/* moods */
.cpbot.m-laugh .cpbot-mouth{height:11px;top:39px;background:#7f1d1d;border-color:#fff;border-width:2px}
.cpbot.m-laugh .cpbot-cheek,.cpbot.m-shy .cpbot-cheek,.cpbot.m-love .cpbot-cheek{opacity:.9}
.cpbot.m-laugh .eye{height:7px;top:22px;border-radius:10px 10px 4px 4px}
.cpbot.m-laugh .pupil{opacity:0}
.cpbot.m-think .cpbot-mouth{width:10px;height:0;margin-left:-2px;border-radius:2px;border-width:2.5px 0 0 0;top:44px;transform:rotate(-12deg)}
.cpbot.m-wow .cpbot-mouth{width:10px;height:10px;margin-left:-5px;border-radius:50%;border-width:2.5px;border-top:2.5px solid #fff;top:40px}
.cpbot.m-wink .eye:nth-child(2){height:3px;top:25px}
.cpbot.m-shy .eye{height:12px;top:21px}
.cpbot.m-sleepy .eye{height:7px;top:24px}
.cpbot.m-sleepy .cpbot-mouth{width:8px;margin-left:-4px;height:4px}
.cpbot.m-love .pupil{background:#e11d48;border-radius:0;transform:rotate(45deg) scale(.9)!important}
.cpbot.m-love .pupil::after{display:none}
/* activities */
.cpbot.a-bounce .cpbot-face{animation:cpbotBounce .9s cubic-bezier(.28,.84,.42,1)}
.cpbot.a-tilt .cpbot-face{animation:cpbotTilt 1.4s ease-in-out}
.cpbot.a-wiggle .cpbot-face{animation:cpbotWiggle .7s ease-in-out}
.cpbot.a-spin .cpbot-face{animation:cpbotSpin 1s ease-in-out}
@keyframes cpbotFloat{50%{translate:0 -4px}}
@keyframes cpbotBounce{0%,100%{transform:translateY(0) scale(1)}30%{transform:translateY(-14px) scale(1.04,.96)}55%{transform:translateY(0) scale(1.08,.92)}75%{transform:translateY(-5px)}}
@keyframes cpbotTilt{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}65%{transform:rotate(10deg)}}
@keyframes cpbotWiggle{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px) rotate(-6deg)}40%{transform:translateX(4px) rotate(6deg)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes cpbotSpin{to{transform:rotate(360deg)}}
/* speech bubble */
.cpbot-bubble{position:absolute;right:70px;bottom:14px;max-width:min(230px,calc(100vw - 110px));width:max-content;background:#fff;color:#111827;font:600 13px/1.35 'Poppins',Arial,sans-serif;
  padding:9px 13px;border-radius:14px 14px 4px 14px;box-shadow:0 8px 24px rgba(0,0,0,.16);opacity:0;transform:translateY(6px) scale(.92);transform-origin:right bottom;
  transition:opacity .25s,transform .25s;pointer-events:none;white-space:normal}
.cpbot-bubble::after{content:"";position:absolute;right:-6px;bottom:8px;border:7px solid transparent;border-left-color:#fff;border-right:0}
.cpbot.talk .cpbot-bubble{opacity:1;transform:none}
.cpbot.talk .cpbot-mouth{animation:cpbotTalk .3s ease-in-out 6}
@keyframes cpbotTalk{50%{height:2px;top:44px}}
@media (max-width:760px){.cpbot{width:54px;height:54px;right:12px;bottom:12px}.cpbot .eye{top:14px;width:15px;height:17px}.cpbot .eye:nth-child(1){left:10px}.cpbot .eye:nth-child(2){right:10px}
  .cpbot-mouth{top:36px}.cpbot-cheek{top:32px}.cpbot-bubble{right:62px;font-size:12px}}
@media (prefers-reduced-motion:reduce){.cpbot-face{animation:none!important}.cpbot[class*=" a-"] .cpbot-face{animation:none!important}}