/*! BADWOLF | Sprout guide */
.sb{position:fixed;z-index:60;right:clamp(14px,2vw,32px);bottom:clamp(14px,2vw,28px);font-family:var(--body);transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease}
.sb.away{opacity:0;pointer-events:none;transform:translateY(30px)}
.sb-hit{display:block;position:relative;padding:0;border:0;background:none;cursor:pointer;width:clamp(120px,9vw,170px);-webkit-tap-highlight-color:transparent}
.sb-hit:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:20px}
.sb-fig{display:block;width:100%;height:auto;overflow:visible}
.sb-x{position:absolute;top:4px;left:-6px;width:26px;height:26px;border-radius:50%;border:0;background:#fff;color:var(--ink-2);font-size:16px;line-height:26px;text-align:center;cursor:pointer;box-shadow:0 0 0 1px var(--line),0 8px 18px -8px rgba(23,58,82,.45);opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;padding:0}
.sb:hover .sb-x,.sb-x:focus-visible,.sb.touch .sb-x{opacity:1;transform:none}
.sb.open .sb-x{display:none}
.sb-tip{position:absolute;right:calc(100% + 10px);bottom:58%;width:max-content;max-width:min(250px,62vw);padding:13px 16px;border-radius:16px;border-bottom-right-radius:5px;background:#fff;color:var(--ink);font-size:15px;line-height:1.45;box-shadow:0 0 0 1px rgba(23,58,82,.07),0 22px 44px -22px rgba(11,31,46,.55);opacity:0;transform:translateY(8px) scale(.96);transform-origin:100% 100%;transition:opacity .3s,transform .35s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.sb-tip.on{opacity:1;transform:none}
.sb.open .sb-tip{display:none}

/* drawing parts */
.sb-fig *{transform-box:view-box}
.sb-body{transform-origin:60px 146px;animation:sbBob 3.6s ease-in-out infinite}
.sb-leaves{transform-origin:60px 41px;animation:sbLeaf 4.6s ease-in-out infinite}
.sb-eyes{transition:transform .25s ease-out}
.sb-open{transform-origin:60px 67px;transition:transform .09s}
.sb-fig.blink .sb-open{transform:scaleY(.12)}
.sb-happy,.sb-sleep{opacity:0}
.sb-fig.happy .sb-open,.sb-fig.sleep .sb-open{opacity:0}
.sb-fig.happy .sb-happy{opacity:1}
.sb-fig.sleep .sb-sleep{opacity:1}
.sb-fig.happy .sb-leaves{animation:sbPerk .7s cubic-bezier(.3,1.6,.5,1) both}
.sb-fig.sleep .sb-leaves{animation:sbDroop 5s ease-in-out infinite}
.sb-fig.sleep .sb-body{animation-duration:5.5s}
.sb-fig.think .sb-leaves{animation:sbTwirl .9s ease-in-out infinite}
.sb-z{opacity:0;font-family:var(--display);fill:var(--ink-3)}
.sb-fig.sleep .sb-z{animation:sbZ 3s ease-in-out infinite}
.sb-fig.sleep .sb-z2{animation-delay:1s}
.sb-fig.sleep .sb-z3{animation-delay:2s}
.sb-fig.hop{animation:sbHop .65s cubic-bezier(.3,1.5,.5,1)}
.sb-fig.wob{animation:sbWob .7s ease-in-out}
.sb-fig.look .sb-head{animation:sbLook 2.4s ease-in-out}
.sb-head{transform-origin:60px 96px}
.sb-arm-up{opacity:0;transform-origin:76px 103px}
.sb-fig.wave .sb-arm-hip{opacity:0}
.sb-fig.wave .sb-arm-up{opacity:1;animation:sbWave .5s ease-in-out 4 alternate}
.sb-fig.wave .sb-head{animation:sbTilt 2s ease-in-out}
.sb-fig.jump .sb-body{animation:sbJump .9s cubic-bezier(.3,1.4,.5,1)}
.sb-fig.spin .sb-leaves{animation:sbProp .22s linear 8}
.sb-fig.spin .sb-body{animation:sbLift 1.8s ease-in-out}
.sb-fig.dance{animation:sbDance .5s ease-in-out 4 alternate;transform-origin:60px 146px}
.sb-fig.dance .sb-arm-hip{opacity:0}
.sb-fig.dance .sb-arm-up{opacity:1;animation:sbWave .25s ease-in-out 8 alternate}
.sb-fig.nod .sb-head{animation:sbNod .6s ease-in-out 2}
.sb-fig.peek{animation:sbPeek 2.4s ease-in-out;transform-origin:60px 146px}
.sb-fig.wave .sb-open,.sb-fig.dance .sb-open,.sb-fig.jump .sb-open{opacity:0}
.sb-fig.wave .sb-happy,.sb-fig.dance .sb-happy,.sb-fig.jump .sb-happy{opacity:1}
@keyframes sbWave{from{transform:rotate(-22deg)}to{transform:rotate(8deg)}}
@keyframes sbTilt{0%,100%{transform:rotate(0)}30%,70%{transform:rotate(6deg)}}
@keyframes sbJump{0%{transform:none}20%{transform:translateY(3px) scaleY(.92)}45%{transform:translateY(-22px) scaleY(1.05)}70%{transform:translateY(0) scaleY(.94)}85%{transform:translateY(-3px)}100%{transform:none}}
@keyframes sbProp{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes sbLift{0%,100%{transform:none}35%,65%{transform:translateY(-14px)}}
@keyframes sbDance{from{transform:rotate(-7deg) translateY(0)}to{transform:rotate(7deg) translateY(-4px)}}
@keyframes sbNod{0%,100%{transform:rotate(0)}50%{transform:rotate(0) translateY(3px)}}
@keyframes sbPeek{0%,100%{transform:none}25%,45%{transform:rotate(-12deg) translateX(-6px)}60%,80%{transform:rotate(8deg) translateX(4px)}}
@keyframes sbBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
@keyframes sbLeaf{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes sbPerk{0%{transform:rotate(0) scale(1)}40%{transform:rotate(-8deg) scale(1.08)}70%{transform:rotate(6deg) scale(1.05)}100%{transform:rotate(0) scale(1.04)}}
@keyframes sbDroop{0%,100%{transform:rotate(-10deg) translateY(2px)}50%{transform:rotate(-6deg) translateY(3px)}}
@keyframes sbTwirl{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}
@keyframes sbZ{0%{opacity:0;transform:translate(0,0)}30%{opacity:1}100%{opacity:0;transform:translate(10px,-18px)}}
@keyframes sbHop{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-14px) scaleY(1.04)}60%{transform:translateY(0) scaleY(.95)}100%{transform:none}}
@keyframes sbWob{0%,100%{transform:rotate(0)}25%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}}
@keyframes sbLook{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}65%{transform:rotate(6deg)}}

/* tucked away tab */
.sb-tab{position:fixed;z-index:60;right:0;bottom:clamp(20px,3vw,40px);display:flex;align-items:center;gap:8px;padding:8px 16px 8px 10px;border:0;border-radius:16px 0 0 16px;background:#fff;color:var(--ink);font:600 15px/1 var(--body);cursor:pointer;box-shadow:0 0 0 1px var(--line),0 16px 34px -18px rgba(23,58,82,.55);transform:translateX(110%);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.sb-tab.on{transform:none}
.sb-tab svg{width:34px;height:auto}

/* chat panel */
.sb-chat{position:fixed;z-index:61;right:clamp(14px,2vw,32px);bottom:calc(clamp(14px,2vw,28px) + clamp(120px,9vw,170px)*1.3 + 6px);width:min(400px,calc(100vw - 28px));height:min(600px,calc(100vh - 320px));min-height:340px;display:flex;flex-direction:column;background:#fff;border-radius:24px;box-shadow:0 0 0 1px rgba(23,58,82,.08),0 40px 90px -36px rgba(11,31,46,.6);overflow:hidden;opacity:0;transform:translateY(16px) scale(.97);transform-origin:100% 100%;pointer-events:none;transition:opacity .25s ease,transform .35s cubic-bezier(.2,.7,.2,1)}
.sb-chat.on{opacity:1;transform:none;pointer-events:auto}
.sb-head2{display:flex;align-items:center;gap:12px;padding:16px 16px 14px 18px;border-bottom:1px solid var(--line)}
.sb-head2 svg{width:44px;height:auto;flex:none}
.sb-head2 b{display:block;font-family:var(--display);font-weight:400;font-size:21px;line-height:1.15;color:var(--ink)}
.sb-head2 small{display:block;font-size:13px;line-height:1.3;color:var(--ink-3)}
.sb-head2 div{flex:1;min-width:0}
.sb-close{width:38px;height:38px;flex:none;border:0;border-radius:50%;background:#F2F6F9;color:var(--ink);font-size:20px;line-height:38px;cursor:pointer;padding:0}
.sb-close:hover{background:#E6EEF3}
.sb-log{flex:1;overflow-y:auto;padding:18px 16px 8px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain;scroll-behavior:smooth}
.sb-m{max-width:86%;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;overflow-wrap:break-word;animation:sbIn .3s ease both}
.sb-m.bot{align-self:flex-start;background:#F2F6F9;color:var(--ink);border-bottom-left-radius:5px}
.sb-m.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.sb-m ul{margin:6px 0 2px;padding-left:18px}
.sb-m li{margin:2px 0}
.sb-m b{font-weight:600}
.sb-dots{align-self:flex-start;display:flex;gap:5px;padding:14px 16px;border-radius:16px;border-bottom-left-radius:5px;background:#F2F6F9}
.sb-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:typing 1.1s infinite}
.sb-dots i:nth-child(2){animation-delay:.15s}.sb-dots i:nth-child(3){animation-delay:.3s}
@keyframes sbIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sb-chips{display:flex;flex-wrap:wrap;gap:8px;padding:6px 16px 12px}
.sb-chips:empty{display:none}
.sb-chip{border:0;border-radius:999px;padding:9px 14px;background:var(--mint);color:var(--ink);font:600 14px/1.25 var(--body);cursor:pointer;box-shadow:inset 0 0 0 1px #CDEBD8;transition:background .2s,box-shadow .2s}
.sb-chip:hover{background:#D6F1E1}
.sb-chip.go{background:var(--blue);color:#fff;box-shadow:none}
.sb-chip.go:hover{background:#0668AE}
.sb-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.sb-form input{flex:1;min-width:0;height:46px;padding:0 16px;border:1px solid var(--line);border-radius:999px;font:16px var(--body);color:var(--ink);background:#fff}
.sb-form input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px rgba(37,181,244,.18)}
.sb-send{width:46px;height:46px;flex:none;border:0;border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.sb-send svg{width:20px;height:20px}
.sb-note{margin:0;padding:0 16px 12px;font-size:12px;line-height:1.4;color:var(--ink-3);text-align:center}
@media (max-width:640px){
  .sb-chat{right:0;left:0;bottom:0;width:100%;height:min(86vh,680px);height:min(86svh,680px);border-radius:24px 24px 0 0}
  .sb.open{opacity:0;pointer-events:none}
  .sb-hit{width:88px}
  .sb-tip{right:0;bottom:calc(100% + 8px);max-width:min(240px,70vw);border-bottom-right-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .sb-body,.sb-leaves,.sb-fig.sleep .sb-z{animation:none!important}
  .sb-fig.hop,.sb-fig.wob,.sb-fig.look .sb-head,.sb-fig.dance,.sb-fig.peek,.sb-fig.jump .sb-body,.sb-fig.spin .sb-leaves,.sb-fig.spin .sb-body,.sb-fig.nod .sb-head{animation:none}
  .sb-fig.wave .sb-arm-up{animation:none}
}
@media print{.sb,.sb-tab,.sb-chat{display:none!important}}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
