/* 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;-webkit-tap-highlight-color:transparent;
  transition:translate var(--mv,1s) var(--me,cubic-bezier(.45,.05,.35,1.2))}
.cpbot-btn{position:absolute;inset:0;display:block;border-radius:50%;text-decoration:none;outline-offset:3px}
.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.l{left:12px}.cpbot .eye.r{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 var(--ink,#fff);border-top:0;border-radius:0 0 18px 18px;transition:all .25s ease}
.cpbot-mouth::after{content:"";position:absolute;left:50%;top:2px;width:9px;height:0;margin-left:-4.5px;background:#fb7185;border-radius:0 0 6px 6px;transition:height .2s}
.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}
/* extra parts: eyebrows, hands, sunglasses, tears, floating emoji */
.cpbot-brow{position:absolute;top:11px;width:13px;height:3px;border-radius:3px;background:var(--ink,#fff);opacity:0;transition:all .2s}
.cpbot-brow.l{left:14px}.cpbot-brow.r{right:14px}
.cpbot-hand{position:absolute;bottom:-10px;width:23px;height:23px;border-radius:50% 50% 45% 45%;opacity:0;z-index:2;
  background:radial-gradient(circle at 35% 30%,#fff,#e2e8f0);border:2px solid hsl(var(--h) 70% 24%);box-shadow:0 3px 6px rgba(0,0,0,.25);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.cpbot-hand.l{left:8px}.cpbot-hand.r{right:8px}
.cpbot-glasses{position:absolute;left:8px;right:8px;top:16px;height:14px;opacity:0;transform:translateY(-26px);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .2s;z-index:2}
.cpbot-glasses::before,.cpbot-glasses::after{content:"";position:absolute;top:0;width:21px;height:13px;background:#0f172a;border-radius:4px 4px 10px 10px;box-shadow:inset 3px 2px 0 rgba(255,255,255,.35)}
.cpbot-glasses::before{left:0}.cpbot-glasses::after{right:0}
.cpbot-tear{position:absolute;top:31px;width:6px;height:8px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#7dd3fc;opacity:0}
.cpbot-tear.l{left:15px}.cpbot-tear.r{right:15px}
.cpbot-fx{position:absolute;left:50%;top:-6px;font:700 18px/1 Arial,sans-serif;pointer-events:none;opacity:0;white-space:nowrap;transform:translate(-50%,0)}
.cpbot-fx.on{animation:cpbotFx 1.6s ease-out}
@keyframes cpbotFx{0%{opacity:0;transform:translate(-50%,6px) scale(.6)}20%{opacity:1;transform:translate(-50%,-8px) scale(1.15)}100%{opacity:0;transform:translate(-30%,-34px) scale(1)}}
/* moods */
.cpbot.m-laugh .cpbot-mouth{height:11px;top:39px;background:#7f1d1d;border-color:var(--ink,#fff);border-width:2px}
.cpbot.m-laugh .cpbot-cheek,.cpbot.m-shy .cpbot-cheek,.cpbot.m-love .cpbot-cheek,.cpbot.m-tongue .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;border-color:var(--ink,#fff);top:44px;transform:rotate(-12deg)}
.cpbot.m-think .cpbot-brow.r,.cpbot.m-sus .cpbot-brow.r{opacity:1;transform:translateY(-3px) 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 var(--ink,#fff);top:40px}
.cpbot.m-wow .cpbot-brow{opacity:1;transform:translateY(-4px)}
.cpbot.m-wink .eye.r{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-sleep .eye{height:3px;top:25px}
.cpbot.m-sleep .cpbot-mouth{width:7px;height:7px;margin-left:-3.5px;border-radius:50%;border-width:2px;border-top:2px solid var(--ink,#fff);top:42px}
.cpbot.m-sleep .cpbot-face{animation:cpbotBreath 2.6s ease-in-out infinite}
.cpbot.m-love .pupil{background:#e11d48;border-radius:0;transform:rotate(45deg) scale(.9)!important}
.cpbot.m-love .pupil::after{display:none}
.cpbot.m-angry .cpbot-brow{opacity:1}
.cpbot.m-angry .cpbot-brow.l{transform:translateY(3px) rotate(22deg)}.cpbot.m-angry .cpbot-brow.r{transform:translateY(3px) rotate(-22deg)}
.cpbot.m-angry .eye{height:13px;top:21px}
.cpbot.m-angry .cpbot-mouth,.cpbot.m-sad .cpbot-mouth,.cpbot.m-cry .cpbot-mouth{border:3px solid var(--ink,#fff);border-bottom:0;border-radius:18px 18px 0 0;top:42px;height:6px;width:16px;margin-left:-8px}
.cpbot.m-sad .cpbot-brow,.cpbot.m-cry .cpbot-brow{opacity:1}
.cpbot.m-sad .cpbot-brow.l,.cpbot.m-cry .cpbot-brow.l{transform:rotate(-18deg)}.cpbot.m-sad .cpbot-brow.r,.cpbot.m-cry .cpbot-brow.r{transform:rotate(18deg)}
.cpbot.m-cry .cpbot-tear{animation:cpbotTear 1s ease-in infinite}.cpbot.m-cry .cpbot-tear.r{animation-delay:.45s}
@keyframes cpbotTear{0%{opacity:0;transform:translateY(0)}20%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
.cpbot.m-cool .cpbot-glasses{opacity:1;transform:none}
.cpbot.m-cool .cpbot-mouth{width:14px;margin-left:-5px;transform:rotate(-8deg)}
.cpbot.m-tongue .cpbot-mouth::after{height:9px}
.cpbot.m-tongue .eye.l{height:3px;top:25px}
.cpbot.m-dizzy .pupil{background:none;border:2.5px solid #111827;border-top-color:transparent;width:9px;height:9px;animation:cpbotSpinR .5s linear infinite}
.cpbot.m-dizzy .pupil::after{display:none}
.cpbot.m-dizzy .cpbot-mouth{transform:rotate(14deg) scaleY(.6)}
.cpbot.m-cover .cpbot-hand,.cpbot.m-peek .cpbot-hand{opacity:1}
.cpbot.m-cover .cpbot-hand.l{transform:translate(1px,-36px) rotate(-10deg)}.cpbot.m-cover .cpbot-hand.r{transform:translate(-1px,-36px) rotate(10deg)}
.cpbot.m-peek .cpbot-hand.l{transform:translate(1px,-36px) rotate(-10deg)}.cpbot.m-peek .cpbot-hand.r{transform:translate(4px,-18px) rotate(25deg)}
.cpbot.m-wave .cpbot-hand.r{opacity:1;transform:translate(24px,-24px);animation:cpbotWave .5s ease-in-out 4 alternate}
@keyframes cpbotWave{from{transform:translate(24px,-24px) rotate(15deg)}to{transform:translate(27px,-30px) rotate(-30deg)}}
/* 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}
.cpbot.a-shake .cpbot-face{animation:cpbotShake .45s linear 3}
.cpbot.a-dance .cpbot-face{animation:cpbotDance .5s ease-in-out 6 alternate}
.cpbot.a-jump .cpbot-face{animation:cpbotJump 1s cubic-bezier(.28,.84,.42,1)}
.cpbot.a-hide{transition:transform .45s cubic-bezier(.6,-.28,.74,.05),translate var(--mv,1s) var(--me,ease)}.cpbot.a-hide .cpbot-face{animation:none}
.cpbot.a-hide{transform:translateY(95px)}
.cpbot.a-pop{animation:cpbotPop .6s cubic-bezier(.34,1.56,.64,1)}
.cpbot.a-squash .cpbot-face{animation:cpbotSquash .6s ease-in-out}
.cpbot.a-hop .cpbot-face{animation:cpbotHop .55s cubic-bezier(.3,.7,.4,1)}
.cpbot.a-run .cpbot-face{animation:cpbotRun .22s linear infinite alternate}
.cpbot.a-moon .cpbot-face{animation:cpbotMoon .45s ease-in-out infinite alternate}
@keyframes cpbotHop{0%,100%{transform:translateY(0) scale(1)}15%{transform:scale(1.12,.86)}50%{transform:translateY(-26px) scale(.95,1.06)}85%{transform:scale(1.1,.9)}}
@keyframes cpbotRun{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(10deg) translateY(-6px)}}
@keyframes cpbotMoon{from{transform:scaleX(-1) rotate(-7deg)}to{transform:scaleX(-1) rotate(7deg) translateY(-3px)}}
/* festival accessory on the head */
.cpbot-hat{position:absolute;left:50%;top:-19px;transform:translateX(-50%) rotate(-12deg);font:24px/1 Arial,sans-serif;pointer-events:none;z-index:3;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
/* bubble on the right side when the bot roams near the left edge */
.cpbot.flip .cpbot-bubble{right:auto;left:70px;border-radius:14px 14px 14px 4px;transform-origin:left bottom}
.cpbot.flip .cpbot-bubble::after{right:auto;left:-6px;border:7px solid transparent;border-right-color:#fff;border-left:0}
@keyframes cpbotFloat{50%{translate:0 -4px}}
@keyframes cpbotBreath{50%{transform:scale(1.04,.97)}}
@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)}}
@keyframes cpbotSpinR{to{rotate:360deg}}
@keyframes cpbotShake{0%,100%{transform:translate(0)}25%{transform:translate(-3px,1px) rotate(-3deg)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0) rotate(3deg)}}
@keyframes cpbotDance{0%{transform:translateX(-6px) rotate(-12deg)}100%{transform:translateX(6px) rotate(12deg) translateY(-6px)}}
@keyframes cpbotJump{0%,100%{transform:translateY(0)}15%{transform:scale(1.15,.8)}45%{transform:translateY(-34px) rotate(-200deg)}70%{transform:translateY(0) rotate(-360deg) scale(1.1,.9)}}
@keyframes cpbotPop{0%{transform:translateY(95px)}60%{transform:translateY(-14px)}100%{transform:none}}
@keyframes cpbotSquash{0%,100%{transform:none}30%{transform:scale(1.25,.7) translateY(8px)}60%{transform:scale(.85,1.2) translateY(-6px)}}
/* 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-bubble.act{pointer-events:auto}
.cpbot-go{display:inline-block;margin-top:7px;padding:5px 12px;border-radius:999px;background:hsl(var(--h) 75% 32%);color:#fff!important;font-size:12px;font-weight:700;text-decoration:none}
.cpbot.open .cpbot-bubble{opacity:0!important;pointer-events:none!important}
/* help panel */
.cpbot-panel{position:fixed;right:18px;bottom:92px;z-index:61;width:min(350px,calc(100vw - 24px));max-height:min(540px,calc(100vh - 120px));display:flex;flex-direction:column;
  background:#fff;color:#111827;border-radius:18px;box-shadow:0 18px 48px rgba(15,23,42,.28);overflow:hidden;font:14px/1.45 'Poppins',Arial,sans-serif;
  opacity:0;transform:translateY(12px) scale(.96);transform-origin:right bottom;transition:opacity .2s,transform .2s;pointer-events:none}
.cpbot-panel.on{opacity:1;transform:none;pointer-events:auto}
.cpbp-head{display:flex;align-items:center;gap:10px;padding:12px 14px;background:linear-gradient(135deg,#035e3f,#0b8a5e);color:#fff}
.cpbp-head b{font-size:15px}.cpbp-head small{display:block;opacity:.85;font-size:11.5px}
.cpbp-ava{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#5eead4,#0f766e 72%);position:relative;flex:none}
.cpbp-ava::before,.cpbp-ava::after{content:"";position:absolute;top:10px;width:8px;height:9px;border-radius:50%;background:#fff;box-shadow:inset 2px 1px 0 2px #111827}
.cpbp-ava::before{left:7px}.cpbp-ava::after{right:7px}
.cpbp-x{margin-left:auto;background:rgba(255,255,255,.18);border:0;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1}
.cpbp-body{padding:14px;overflow:auto;flex:1;background:#f6faf8}
.cpbp-hi{font-weight:700;margin:0 0 12px}
.cpbp-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:14px;border:2px solid transparent;cursor:pointer;margin-bottom:10px;text-decoration:none;font:inherit}
.cpbp-opt i{font-style:normal;font-size:24px;flex:none}
.cpbp-opt span{display:block}.cpbp-opt b{display:block;font-size:14.5px}.cpbp-opt small{color:inherit;opacity:.8;font-size:12px}
.cpbp-care{background:#25d366;color:#fff;box-shadow:0 6px 16px rgba(37,211,102,.35)}
.cpbp-care:hover{filter:brightness(1.05)}
.cpbp-self{background:#fff;color:#0f172a;border-color:#d1e7dd}
.cpbp-self:hover{border-color:#0b8a5e}
.cpbp-carebar{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ecfdf3;border-bottom:1px solid #d1e7dd;font-size:12.5px}
.cpbp-carebar a{margin-left:auto;background:#25d366;color:#fff;padding:6px 12px;border-radius:999px;font-weight:700;text-decoration:none;white-space:nowrap}
.cpbp-msgs{display:flex;flex-direction:column;gap:8px}
.cpbp-m{max-width:88%;padding:9px 12px;border-radius:14px;white-space:pre-line;word-wrap:break-word}
.cpbp-m.bot{background:#fff;border:1px solid #e2ece7;border-bottom-left-radius:4px;align-self:flex-start}
.cpbp-m.me{background:#035e3f;color:#fff;border-bottom-right-radius:4px;align-self:flex-end}
.cpbp-m.typing{color:#64748b;font-style:italic}
.cpbp-links{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cpbp-links a{display:block;padding:7px 10px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0;color:#035e3f;font-weight:600;text-decoration:none;font-size:13px}
.cpbp-links a small{color:#64748b;font-weight:500;margin-left:4px}
.cpbp-links a.care{background:#25d366;border-color:#25d366;color:#fff;text-align:center}
.cpbp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cpbp-chips button{border:1px solid #cfe3d9;background:#fff;color:#035e3f;border-radius:999px;padding:6px 11px;font:600 12px/1.2 inherit;cursor:pointer}
.cpbp-chips button:hover{background:#ecfdf3}
.cpbp-form{display:flex;gap:8px;padding:10px;border-top:1px solid #e5efe9;background:#fff}
.cpbp-form input{flex:1;min-width:0;border:1px solid #cfe3d9;border-radius:999px;padding:9px 14px;font:inherit;outline:none}
.cpbp-form input:focus{border-color:#0b8a5e}
.cpbp-form button{border:0;background:#035e3f;color:#fff;border-radius:50%;width:40px;height:40px;cursor:pointer;font-size:16px;flex:none}
@media (max-width:760px){.cpbot-panel{right:12px;bottom:76px}}
.cpbot.talk .cpbot-mouth{animation:cpbotTalk .3s ease-in-out 6}
.cpbot.a-hide .cpbot-bubble{opacity:0}
@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.l{left:10px}.cpbot .eye.r{right:10px}
  .cpbot.flip .cpbot-bubble{left:62px}
  .cpbot-mouth{top:36px}.cpbot-cheek{top:32px}.cpbot-brow{top:8px}.cpbot-glasses{top:13px;left:6px;right:6px}.cpbot-tear{top:28px}.cpbot-bubble{right:62px;font-size:12px}
  .cpbot-hand{width:20px;height:20px}.cpbot.m-cover .cpbot-hand.l,.cpbot.m-peek .cpbot-hand.l{transform:translate(0,-32px) rotate(-10deg)}.cpbot.m-cover .cpbot-hand.r{transform:translate(0,-32px) rotate(10deg)}}
@media (prefers-reduced-motion:reduce){.cpbot-face{animation:none!important}.cpbot[class*=" a-"] .cpbot-face{animation:none!important}.cpbot-fx.on{animation:none}}

/* ================= Boy / girl bot with arms + legs (class .hb on .cpbot; look chosen in Admin -> Help Bot) =================
   Head size is unchanged (62px); the small body hangs below it. Activities move the whole figure (.cpbot-fig). */
.cpbot.hb{--ink:#7c2d12;bottom:52px}
.cpbot.hb.g-girl{--ink:#be123c}
.cpbot-fig{position:absolute;inset:0;display:block}
.cpbot.hb .cpbot-fig{animation:cpbotFloat 3.2s ease-in-out infinite;transform-origin:31px 31px}
.cpbot.hb .cpbot-btn{z-index:3}
.cpbot.hb .cpbot-face{animation:none;background:radial-gradient(circle at 34% 28%,#fff1e4,#f8cfaa 60%,#eeb48a);
  box-shadow:0 8px 18px rgba(124,45,18,.22),inset 0 -4px 7px rgba(0,0,0,.07)}
.cpbot.hb .eye{box-shadow:inset 0 -2px 3px rgba(0,0,0,.1),0 0 0 1.5px #3b2314}
.cpbot.hb .pupil{width:10px;height:10px;background:radial-gradient(circle at 40% 40%,#5b3a29,#1c1917 70%)}
.cpbot.hb .cpbot-cheek{opacity:.55;background:#fb7185}
.cpbot.hb .cpbot-brow{top:13px;height:2.5px}
.cpbot.hb .cpbot-hand{background:radial-gradient(circle at 35% 30%,#fff1e4,#f3c09a);border-color:#d99a6c}
/* hair: boy = short cap + quiff (in front of the face), girl = long hair behind the face + fringe + bow */
.cpbot-hair,.cpbot-bow,.cpbot-body{display:none}
.cpbot.hb .cpbot-body{display:block}
.cpbot.hb .cpbot-face::before{content:"";position:absolute;z-index:1;background:#2b1b12}
.cpbot.g-boy .cpbot-face::before{top:-4px;left:1px;right:1px;height:21px;border-radius:50% 50% 22% 45%/100% 100% 32% 48%}
.cpbot.g-boy .cpbot-face::after{content:"";position:absolute;z-index:1;top:-8px;left:22px;width:24px;height:13px;background:#2b1b12;border-radius:70% 60% 10% 70%;transform:rotate(-18deg)}
.cpbot.g-girl .cpbot-face::before{top:-4px;left:1px;right:1px;height:19px;background:#3b2314;border-radius:50% 50% 38% 58%/100% 100% 40% 60%}
.cpbot.g-girl .cpbot-hair{display:block;position:absolute;z-index:-1;top:-6px;left:-4px;width:70px;height:64px;background:linear-gradient(#4a2c1a,#3b2314);border-radius:50% 50% 40% 40%/58% 58% 42% 42%}
.cpbot.g-girl .cpbot-bow{display:block;position:absolute;z-index:4;top:-9px;right:-2px;width:10px;height:10px;border-radius:50%;background:#ec4899;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.cpbot.g-girl .cpbot-bow::before,.cpbot.g-girl .cpbot-bow::after{content:"";position:absolute;top:-3px;width:12px;height:16px;background:#f472b6;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
.cpbot.g-girl .cpbot-bow::before{left:-10px;transform:rotate(-55deg)}
.cpbot.g-girl .cpbot-bow::after{right:-10px;transform:rotate(55deg)}
.cpbot.g-girl .eye{border-top:2.5px solid #1c1917}
.cpbot.g-girl .cpbot-mouth{width:14px;margin-left:-7px}
/* body */
.cpbot-body{position:absolute;z-index:1;left:50%;top:49px;width:46px;height:48px;margin-left:-23px;pointer-events:none}
.cpbot-torso{position:absolute;left:9px;top:2px;width:28px;height:27px;border-radius:13px 13px 8px 8px;
  background:linear-gradient(hsl(var(--h) 68% 52%),hsl(var(--h) 74% 36%));box-shadow:inset 0 -3px 5px rgba(0,0,0,.15);transition:background .9s}
.cpbot.g-boy .cpbot-torso::before{content:"";position:absolute;left:7px;top:0;width:14px;height:8px;background:#fff;clip-path:polygon(0 0,100% 0,50% 100%)}
.cpbot-tie{position:absolute;left:11px;top:5px;width:6px;height:13px;background:#1e293b;clip-path:polygon(20% 0,80% 0,100% 70%,50% 100%,0 70%)}
.cpbot.g-girl .cpbot-tie{display:none}
.cpbot.g-girl .cpbot-torso{left:7px;width:32px;height:30px;border-radius:12px 12px 4px 4px;background:linear-gradient(hsl(var(--h) 75% 62%),hsl(var(--h) 72% 46%))}
.cpbot.g-girl .cpbot-torso::before{content:"";position:absolute;left:-4px;right:-4px;bottom:-2px;height:12px;border-radius:0 0 10px 10px;background:hsl(var(--h) 72% 46%)}
.cpbot.g-girl .cpbot-torso::after{content:"";position:absolute;left:12px;top:4px;width:8px;height:7px;background:#fde68a;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;transform:rotate(45deg)}
.cpbot-arm{position:absolute;top:5px;width:7px;height:21px;border-radius:4px;background:hsl(var(--h) 70% 44%);transform-origin:50% 2px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.cpbot-arm.l{left:4px;transform:rotate(16deg)}
.cpbot-arm.r{right:4px;transform:rotate(-16deg)}
.cpbot.g-girl .cpbot-arm.l{left:2px}
.cpbot.g-girl .cpbot-arm.r{right:2px}
.cpbot-arm i{position:absolute;left:-2px;bottom:-6px;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1e4,#f3c09a);border:1px solid #d99a6c}
.cpbot-leg{position:absolute;top:28px;width:7px;height:15px;border-radius:3px;background:#1f2937;transform-origin:50% 0}
.cpbot-leg.l{left:15px}
.cpbot-leg.r{right:15px}
.cpbot.g-girl .cpbot-leg{top:31px;height:12px;background:#f8cfaa}
.cpbot-leg i{position:absolute;bottom:-4px;left:-2px;width:12px;height:6px;border-radius:6px 6px 2px 2px;background:#111827}
.cpbot.g-girl .cpbot-leg i{background:#db2777}
/* walking (moving around the screen) */
.cpbot.hb.walking .cpbot-leg.l{animation:cpbotStep .36s ease-in-out infinite alternate}
.cpbot.hb.walking .cpbot-leg.r{animation:cpbotStep .36s ease-in-out infinite alternate-reverse}
.cpbot.hb.walking .cpbot-arm.l{animation:cpbotSwingL .36s ease-in-out infinite alternate-reverse}
.cpbot.hb.walking .cpbot-arm.r{animation:cpbotSwingR .36s ease-in-out infinite alternate}
@keyframes cpbotStep{from{transform:rotate(-26deg)}to{transform:rotate(26deg)}}
@keyframes cpbotSwingL{from{transform:rotate(-14deg)}to{transform:rotate(38deg)}}
@keyframes cpbotSwingR{from{transform:rotate(14deg)}to{transform:rotate(-38deg)}}
/* wave / point / dance with the arms */
.cpbot.hb.m-wave .cpbot-hand{opacity:0!important}
.cpbot.hb.m-wave .cpbot-arm.r{animation:cpbotArmWave .42s ease-in-out infinite alternate}
@keyframes cpbotArmWave{from{transform:rotate(-100deg)}to{transform:rotate(-138deg)}}
.cpbot.hb.pointing:not(.flip) .cpbot-arm.l{transform:rotate(95deg)}
.cpbot.hb.pointing.flip .cpbot-arm.r{transform:rotate(-95deg)}
.cpbot.hb.a-dance .cpbot-arm.l{animation:cpbotArmUpL .5s ease-in-out 6 alternate}
.cpbot.hb.a-dance .cpbot-arm.r{animation:cpbotArmUpR .5s ease-in-out 6 alternate}
@keyframes cpbotArmUpL{from{transform:rotate(35deg)}to{transform:rotate(112deg)}}
@keyframes cpbotArmUpR{from{transform:rotate(-35deg)}to{transform:rotate(-112deg)}}
.cpbot.hb.m-laugh .cpbot-arm.l,.cpbot.hb.m-love .cpbot-arm.l{transform:rotate(108deg)}
.cpbot.hb.m-laugh .cpbot-arm.r,.cpbot.hb.m-love .cpbot-arm.r{transform:rotate(-108deg)}
.cpbot.hb.m-sad .cpbot-arm.l,.cpbot.hb.m-cry .cpbot-arm.l{transform:rotate(4deg)}
.cpbot.hb.m-sad .cpbot-arm.r,.cpbot.hb.m-cry .cpbot-arm.r{transform:rotate(-4deg)}
.cpbot.hb.m-think .cpbot-arm.r{transform:rotate(-122deg)}
.cpbot.hb.m-angry .cpbot-arm.l{transform:rotate(-30deg)}
.cpbot.hb.m-angry .cpbot-arm.r{transform:rotate(30deg)}
/* activities move the whole figure (head + body) */
.cpbot.hb[class*=" a-"] .cpbot-face{animation:none}
.cpbot.hb.a-bounce .cpbot-fig{animation:cpbotBounce .9s cubic-bezier(.28,.84,.42,1)}
.cpbot.hb.a-tilt .cpbot-fig{animation:cpbotTilt 1.4s ease-in-out}
.cpbot.hb.a-wiggle .cpbot-fig{animation:cpbotWiggle .7s ease-in-out}
.cpbot.hb.a-spin .cpbot-fig{animation:cpbotSpin 1s ease-in-out}
.cpbot.hb.a-shake .cpbot-fig{animation:cpbotShake .45s linear 3}
.cpbot.hb.a-dance .cpbot-fig{animation:cpbotDance .5s ease-in-out 6 alternate}
.cpbot.hb.a-jump .cpbot-fig{animation:cpbotJump 1s cubic-bezier(.28,.84,.42,1)}
.cpbot.hb.a-squash .cpbot-fig{animation:cpbotSquash .6s ease-in-out}
.cpbot.hb.a-hop .cpbot-fig{animation:cpbotHop .55s cubic-bezier(.3,.7,.4,1)}
.cpbot.hb.a-run .cpbot-fig{animation:cpbotRun .22s linear infinite alternate}
.cpbot.hb.a-moon .cpbot-fig{animation:cpbotMoon .45s ease-in-out infinite alternate}
.cpbot.hb.a-hide{transform:translateY(170px)}
@keyframes cpbotPopHb{0%{transform:translateY(170px)}60%{transform:translateY(-14px)}100%{transform:none}}
.cpbot.hb.a-pop{animation:cpbotPopHb .6s cubic-bezier(.34,1.56,.64,1)}
.cpbot.hb .cpbot-hat{top:-30px}
.cpbot.hb .cpbot-fx{top:-20px}
.cpbot-panel.hb{bottom:142px}
/* admin preview */
.cpbot.demo{position:relative;right:auto;bottom:auto;display:inline-block;margin:12px 22px 46px;z-index:1}
.bot-pick{display:flex;gap:12px;flex-wrap:wrap}
.bot-opt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid #e5e7eb;border-radius:16px;padding:8px 16px;cursor:pointer;background:#fff}
.bot-opt.on{border-color:#7c3aed;box-shadow:0 0 0 3px rgba(124,58,237,.12)}
.bot-opt input{position:absolute;opacity:0;pointer-events:none}
.bot-notice{display:grid;grid-template-columns:auto 1.6fr 1fr;gap:8px;align-items:center;margin-bottom:8px}
@media (max-width:600px){.bot-notice{grid-template-columns:auto 1fr}.bot-notice input:last-child{grid-column:1/-1}}
@media (max-width:760px){
  .cpbot.hb{width:62px;height:62px;right:10px;bottom:44px;scale:.84;transform-origin:100% 100%}
  .cpbot.hb .eye{top:17px;width:17px;height:19px}
  .cpbot.hb .eye.l{left:12px}
  .cpbot.hb .eye.r{right:12px}
  .cpbot.hb .cpbot-mouth{top:41px}
  .cpbot.hb .cpbot-cheek{top:36px}
  .cpbot.hb .cpbot-brow{top:13px}
  .cpbot.hb .cpbot-glasses{top:16px;left:8px;right:8px}
  .cpbot.hb .cpbot-tear{top:31px}
  .cpbot.hb .cpbot-bubble{right:70px}
  .cpbot.hb.flip .cpbot-bubble{left:70px}
  .cpbot-panel.hb{bottom:120px}
}
@media (prefers-reduced-motion:reduce){.cpbot.hb .cpbot-fig,.cpbot.hb .cpbot-leg,.cpbot.hb .cpbot-arm{animation:none!important}}

/* chat: quick actions, ticket form, quiet toggle */
.cpbp-quick{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 4px}
.cpbp-quick button,.cpbp-quick a{border:0;background:#035e3f;color:#fff;border-radius:999px;padding:6px 11px;font:600 12px/1.2 'Poppins',Arial,sans-serif;cursor:pointer;text-decoration:none}
.cpbp-quick button:hover,.cpbp-quick a:hover{background:#0b8a5e}
.cpbp-links button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:10px;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;font:600 13px/1.3 'Poppins',Arial,sans-serif;cursor:pointer}
.cpbp-links button.yes{background:#035e3f;border-color:#035e3f;color:#fff}
.cpbp-tform{align-self:stretch;background:#fff;border:1px solid #d1e7dd;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px}
.cpbp-tform textarea{width:100%;min-height:78px;border:1px solid #cfe3d9;border-radius:10px;padding:8px 10px;font:13px/1.4 'Poppins',Arial,sans-serif;resize:vertical;box-sizing:border-box}
.cpbp-tform label{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#334155;cursor:pointer;border:1px dashed #94a3b8;border-radius:10px;padding:7px 10px}
.cpbp-tform input[type=file]{display:none}
.cpbp-tform img{max-width:100%;max-height:120px;border-radius:8px;border:1px solid #e2e8f0;align-self:flex-start}
.cpbp-tform .row{display:flex;gap:8px}
.cpbp-tform .row button{flex:1;border:0;border-radius:10px;padding:9px;font:700 13px 'Poppins',Arial,sans-serif;cursor:pointer}
.cpbp-tform .send{background:#035e3f;color:#fff}
.cpbp-tform .cancel{background:#f1f5f9;color:#334155}
.cpbp-tform .err{color:#b91c1c;font-size:12px}
.cpbp-quiet{background:rgba(255,255,255,.18);border:0;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;line-height:1;margin-left:auto}
.cpbp-quiet+.cpbp-x{margin-left:6px}

/* ================= Emoji throwing (kiss / tomato / flower …) + poses + night look ================= */
.cpb-throw{position:fixed;z-index:10001;font:34px/1 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;pointer-events:none;transform:translate(-50%,-50%);will-change:transform;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.cpb-throw.small{font-size:20px}
.cpb-throw.splat{width:74px;height:58px;border-radius:48% 52% 44% 56%/56% 42% 58% 44%;background:radial-gradient(circle at 40% 38%,#ff6b5a 0 18%,#e11d48 40%,#b91c1c 70%,transparent 72%),radial-gradient(circle at 78% 70%,#dc2626 0 14%,transparent 15%),radial-gradient(circle at 18% 78%,#ef4444 0 10%,transparent 11%);filter:none;opacity:.92}
.cpbot-hold{position:absolute;left:-10px;top:40px;z-index:4;font:22px/1 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;pointer-events:none;opacity:0;transform:scale(.3) rotate(-30deg);transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.cpbot-hold.on{opacity:1;transform:scale(1) rotate(-20deg)}
.cpbot.flip .cpbot-hold{left:auto;right:-10px}
/* propose: down on one knee, rose held out */
.cpbot.hb.a-kneel .cpbot-fig{transform:translateY(10px) rotate(-5deg);transition:transform .4s}
.cpbot.hb.a-kneel .cpbot-leg.l{transform:rotate(78deg)}
.cpbot.hb.a-kneel .cpbot-leg.r{transform:rotate(-8deg)}
.cpbot.hb.a-kneel .cpbot-arm.l{transform:rotate(100deg)}
.cpbot.hb.a-kneel .cpbot-arm.r{transform:rotate(-40deg)}
/* flying kiss: hand to the lips, then out */
.cpbot.hb.a-kiss .cpbot-arm.l{animation:cpbKiss 1.1s ease-in-out}
@keyframes cpbKiss{0%{transform:rotate(16deg)}35%,50%{transform:rotate(168deg)}75%{transform:rotate(95deg)}100%{transform:rotate(16deg)}}
/* wind-up throw */
.cpbot.hb.a-windup .cpbot-arm.l{animation:cpbWind .9s cubic-bezier(.5,0,.3,1.4)}
@keyframes cpbWind{0%{transform:rotate(16deg)}40%{transform:rotate(195deg)}65%{transform:rotate(75deg)}100%{transform:rotate(16deg)}}
.cpbot.flip.hb.a-windup .cpbot-arm.r{animation:cpbWindR .9s cubic-bezier(.5,0,.3,1.4)}
@keyframes cpbWindR{0%{transform:rotate(-16deg)}40%{transform:rotate(-195deg)}65%{transform:rotate(-75deg)}100%{transform:rotate(-16deg)}}
/* police mode (suspicious activity) */
.cpbot.police .cpbot-face,.cpbot.hb.police .cpbot-face{animation:cpbPolice .45s steps(1) infinite}
@keyframes cpbPolice{0%{box-shadow:0 0 0 3px #ef4444,0 0 24px #ef4444}50%{box-shadow:0 0 0 3px #3b82f6,0 0 24px #3b82f6}}
/* #58 night look in dark mode: night cap + twinkling stars + soft glow */
html[data-theme="dark"] .cpbot.hb .cpbot-btn::after{content:"";position:absolute;left:7px;top:-21px;width:46px;height:31px;z-index:4;pointer-events:none;
  background:linear-gradient(to top,#e0e7ff 0 6px,transparent 6px),linear-gradient(135deg,#312e81,#6366f1);clip-path:polygon(0 100%,100% 100%,88% 0);transform:rotate(8deg)}
html[data-theme="dark"] .cpbot.hb .cpbot-btn::before{content:"";position:absolute;left:44px;top:-27px;width:11px;height:11px;border-radius:50%;background:#f8fafc;box-shadow:0 0 8px #c7d2fe;z-index:5;pointer-events:none}
html[data-theme="dark"] .cpbot.hb:has(.cpbot-hat) .cpbot-btn::after,html[data-theme="dark"] .cpbot.hb:has(.cpbot-hat) .cpbot-btn::before{display:none}
html[data-theme="dark"] .cpbot::before,html[data-theme="dark"] .cpbot::after{position:absolute;pointer-events:none;font:12px/1 'Segoe UI Emoji','Apple Color Emoji',sans-serif;animation:cpbTw 2.2s ease-in-out infinite}
html[data-theme="dark"] .cpbot::before{content:"✨";left:-16px;top:2px}
html[data-theme="dark"] .cpbot::after{content:"⭐";left:-8px;top:-18px;font-size:10px;animation-delay:1.1s}
@keyframes cpbTw{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
html[data-theme="dark"] .cpbot.hb .cpbot-face{box-shadow:0 0 18px rgba(129,140,248,.45)}
@media (prefers-reduced-motion:reduce){.cpbot.hb .cpbot-arm{animation:none!important}html[data-theme="dark"] .cpbot::before,html[data-theme="dark"] .cpbot::after{animation:none}}

/* ================= Poses (assets/js/eyesbot.js pose()): sit on a stool, lie down, sleep (lie + m-sleep) ================= */
.cpbot.hb .cpbot-fig{transition:transform .55s cubic-bezier(.3,.8,.4,1)}
.cpbot.hb .cpbot-leg{transition:transform .4s ease}
.cpbot.hb.p-sit .cpbot-fig,.cpbot.hb.p-lie .cpbot-fig{animation:none}
.cpbot.hb.p-sit .cpbot-fig{transform:translateY(9px)}
.cpbot.hb.p-sit .cpbot-leg{transform:scaleY(.42)}
.cpbot.hb.p-sit .cpbot-leg i{bottom:-6px}
.cpbot.hb.p-sit .cpbot-arm.l{transform:rotate(22deg)}
.cpbot.hb.p-sit .cpbot-arm.r{transform:rotate(-22deg)}
.cpbot.hb.p-sit .cpbot-body::after{content:"";position:absolute;left:3px;right:3px;top:33px;height:6px;border-radius:4px;background:#b45309;box-shadow:0 4px 0 -1px #78350f,6px 9px 0 -2px #78350f,-6px 9px 0 -2px #78350f}
.cpbot.hb.p-lie .cpbot-fig{transform:translate(-8px,44px) rotate(90deg)}
.cpbot.hb.p-lie .cpbot-arm.l,.cpbot.hb.p-lie .cpbot-arm.r{transform:rotate(0)}
.cpbot.hb.p-lie::after{content:"";position:absolute;z-index:0;right:-4px;bottom:-60px;width:74px;height:14px;border-radius:8px;background:linear-gradient(#e0e7ff,#a5b4fc);box-shadow:0 2px 6px rgba(0,0,0,.15);pointer-events:none}
.cpbot.hb.p-lie.m-sleep .cpbot-fig{animation:cpbotSnore 2.6s ease-in-out infinite}
@keyframes cpbotSnore{0%,100%{transform:translate(-8px,44px) rotate(90deg) scale(1)}50%{transform:translate(-8px,44px) rotate(90deg) scale(1.04)}}
@media (prefers-reduced-motion:reduce){.cpbot.hb .cpbot-fig{transition:none}.cpbot.hb.p-lie.m-sleep .cpbot-fig{animation:none}}