/* Nat, the Natlig helper bot (js/bot.js). Pinned to the bottom-right corner of every page. */
.nbot{
  --nbot-ink:#241A15; --nbot-face:#ECE1CF; --nbot-acc:#BF5B2E; --nbot-eye:#F8F6F0; --nbot-shadow:rgba(36,26,21,.16);
  position:fixed; right:max(14px, env(safe-area-inset-right)); bottom:max(6px, env(safe-area-inset-bottom));
  z-index:90; width:104px;
  transition:transform .7s cubic-bezier(.34,1.56,.64,1);
}
.nbot.nbot--enter{transform:translateY(130%)}
.nbot.nbot--peek,.nbot.nbot--duck{transform:translateY(66%)}
.nbot.nbot--shy{transform:translateY(120%); pointer-events:none}
.nbot--dark{--nbot-ink:#F8F6F0; --nbot-face:#453026; --nbot-acc:#E0864F; --nbot-eye:#F8F6F0; --nbot-shadow:rgba(0,0,0,.35)}

.nbot-btn{display:block; width:100%; margin:0; padding:0; border:0; background:none; border-radius:24px; cursor:pointer; -webkit-tap-highlight-color:transparent}
.nbot-btn:focus-visible{outline:2px solid #BF5B2E; outline-offset:4px}
.nbot svg{display:block; width:100%; height:auto; overflow:visible}

.nbot .nb-ink{fill:var(--nbot-ink); transition:fill .4s}
.nbot .nb-face{fill:var(--nbot-face); transition:fill .4s}
.nbot .nb-acc{fill:var(--nbot-acc); transition:fill .4s}
.nbot .nb-eye{fill:var(--nbot-eye)}
.nbot .nb-limb{fill:none; stroke:var(--nbot-ink); stroke-linecap:round; transition:stroke .4s}
.nbot .nb-shadow{fill:var(--nbot-shadow)}
.nbot .nb-anim{transform-box:view-box}

/* Idle: gentle bob, swaying arms, glowing chest light */
.nbot .nb-rig{animation:nbot-bob 3.2s ease-in-out infinite}
.nbot .nb-shadow{transform-origin:80px 216px; animation:nbot-shadow 3.2s ease-in-out infinite}
.nbot .nb-arm-l{transform-origin:50px 134px; animation:nbot-sway 3.2s ease-in-out infinite}
.nbot .nb-arm-r{transform-origin:110px 134px; animation:nbot-sway-r 3.2s ease-in-out infinite}
.nbot .nb-leg-l{transform-origin:67px 178px}
.nbot .nb-leg-r{transform-origin:93px 178px}
.nbot .nb-led{transform-origin:80px 146px; animation:nbot-led 2.4s ease-in-out infinite}

/* Hover / greeting: wave. Scrolling: walk. Click: hop. Lots of clicks: flip. */
.nbot--wave .nb-arm-r{animation:nbot-wave .8s ease-in-out infinite}
.nbot--walk .nb-leg-l{animation:nbot-step .46s ease-in-out infinite}
.nbot--walk .nb-leg-r{animation:nbot-step .46s ease-in-out -.23s infinite}
.nbot--walk .nb-rig{animation:nbot-trot .23s ease-in-out infinite}
.nbot .nb-jump{transform-origin:80px 150px}
.nbot--hop .nb-jump{animation:nbot-hop .55s cubic-bezier(.3,.7,.4,1)}
.nbot--flip .nb-jump{animation:nbot-flip .95s cubic-bezier(.45,.05,.3,1)}

@keyframes nbot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes nbot-trot{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes nbot-shadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.88)}}
@keyframes nbot-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
@keyframes nbot-sway-r{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
@keyframes nbot-wave{0%,100%{transform:rotate(-125deg)}50%{transform:rotate(-160deg)}}
@keyframes nbot-step{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(16deg)}}
@keyframes nbot-led{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes nbot-hop{0%{transform:translateY(0) scale(1)}18%{transform:translateY(3px) scale(1.04,.95)}55%{transform:translateY(-20px) scale(.97,1.03)}100%{transform:translateY(0) scale(1)}}
@keyframes nbot-flip{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-34px) rotate(-120deg)}70%{transform:translateY(-34px) rotate(-300deg)}100%{transform:translateY(0) rotate(-360deg)}}

/* Speech bubble */
.nbot-bubble{
  position:absolute; right:4px; bottom:calc(100% + 2px);
  width:max-content; max-width:min(260px, calc(100vw - 32px));
  padding:14px 16px 12px; border:1px solid rgba(36,26,21,.14); border-radius:16px 16px 4px 16px;
  background:#F8F6F0; color:#241A15; box-shadow:0 18px 40px -18px rgba(24,15,11,.4);
  font:500 14px/1.45 Manrope,system-ui,-apple-system,'Segoe UI',sans-serif; text-align:left;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px) scale(.96); transform-origin:bottom right;
  transition:opacity .2s ease, transform .25s ease, visibility 0s linear .25s;
}
.nbot--talk .nbot-bubble{opacity:1; visibility:visible; pointer-events:auto; transform:none; transition:opacity .2s ease, transform .3s cubic-bezier(.34,1.56,.64,1)}
.nbot-bubble p{margin:0 24px 0 0}
.nbot-row{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin-top:10px}
.nbot-row:empty{display:none}
.nbot-cta{color:#A84E26; font-weight:700; text-decoration:none; border-bottom:1px solid currentColor}
.nbot-cta:hover{color:#8F421F}
.nbot-hide{padding:0; border:0; background:none; color:#6B5D4F; font:inherit; font-size:12px; text-decoration:underline; cursor:pointer}
.nbot-x{position:absolute; top:5px; right:5px; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:none; color:#6B5D4F; font:400 20px/1 system-ui,sans-serif; cursor:pointer}
.nbot-x:hover{background:rgba(36,26,21,.06); color:#241A15}
.nbot-bubble :focus-visible{outline:2px solid #BF5B2E; outline-offset:2px}

@media (max-width:640px){.nbot{width:70px}}
@media (prefers-reduced-motion:reduce){.nbot,.nbot *{animation:none !important; transition:none !important}}
@media print{.nbot{display:none}}
