.rrsg{
  --rrsg-blue:#0c5cff;
  --rrsg-navy:#061a35;
  --rrsg-ink:#0a1626;
  --rrsg-muted:#5f7188;
  --rrsg-line:#dce6f2;
  position:fixed;
  z-index:99990;
  right:18px;
  bottom:14px;
  display:flex;
  align-items:flex-end;
  gap:14px;
  max-width:min(620px,calc(100vw - 28px));
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  pointer-events:none;
}
.rrsg[hidden]{display:none!important}
.rrsg--left{right:auto;left:18px;flex-direction:row-reverse}
.rrsg button,.rrsg a,.rrsg input,.rrsg__advice,.rrsg__chat-panel,.rrsg__character{pointer-events:auto}

/* v0.21.56 — Theme/Elementor isolation. Some ReadyTech pages apply global button/media
   backgrounds with higher specificity (and sometimes !important), which could put a blue
   rectangle behind Ranger even though the mascot PNG itself is transparent. These rules
   hard-reset only Ranger's character shell/portrait; the speech and chat cards are untouched. */
html body .rrsg{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
}
html body .rrsg .rrsg__character,
html body .rrsg .rrsg__character:hover,
html body .rrsg .rrsg__character:active,
html body .rrsg .rrsg__character:focus,
html body .rrsg .rrsg__portrait,
html body .rrsg .rrsg__portrait img{
  background:transparent!important;
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
html body .rrsg .rrsg__character{
  padding:0!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
html body .rrsg .rrsg__portrait{padding:0!important;overflow:visible!important}
html body .rrsg .rrsg__portrait img{padding:0!important;margin:0!important}
html body .rrsg .rrsg__character:before,
html body .rrsg .rrsg__character:after,
html body .rrsg .rrsg__portrait:before,
html body .rrsg .rrsg__portrait:after{
  content:none!important;
  display:none!important;
  background:none!important;
  box-shadow:none!important;
}

/* v0.21.56 — hard transparent Ranger shell across all public page/theme skins. */
.rrsg__character{
  position:relative;
  width:250px;
  min-width:250px;
  min-height:0;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  isolation:isolate;
  text-align:center;
  filter:drop-shadow(0 18px 24px rgba(0,10,28,.28));
  transition:transform .22s ease,filter .22s ease;
}
.rrsg__character:hover{transform:translateY(-5px);filter:drop-shadow(0 22px 30px rgba(0,10,28,.38))}
.rrsg__character:focus-visible{outline:3px solid rgba(12,92,255,.55);outline-offset:5px;border-radius:22px}
/* The old v0.21.50 stage/portrait frame made Ranger look like a badge. Keep it disabled. */
.rrsg__tech-stage,.rrsg__presence,.rrsg__tap-hint{display:none!important}
.rrsg__portrait{
  position:relative;
  z-index:2;
  display:block;
  width:250px;
  height:auto;
  margin:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.rrsg__portrait img{
  display:block;
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
  object-position:center bottom;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
}
/* The Community Engine guide asset is shown whole and never cropped into an avatar tile. */
.rrsg--mascot-contractor_guide .rrsg__portrait img,
.rrsg--mascot-original_technology .rrsg__portrait img{max-height:none}
.rrsg__click-hint{
  position:absolute;
  z-index:5;
  right:8px;
  bottom:5px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:5px 8px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#fff;
  box-shadow:none;
  text-shadow:0 2px 5px rgba(0,0,0,.75);
  font-size:7px;
  line-height:1;
  font-weight:950;
  letter-spacing:.09em;
  opacity:.88;
  pointer-events:none;
}
.rrsg__character:hover .rrsg__click-hint{opacity:1}

/* v0.21.60 — actual mascot animation engine. The transparent gorilla artwork moves;
   the button/speech shell remains anchored so Ranger never roams over page content. */
.rrsg__portrait{perspective:900px;transform-style:preserve-3d}
.rrsg__portrait img{transform-origin:50% 84%;transform-style:preserve-3d;backface-visibility:visible;will-change:transform}
.rrsg__gesture{
  position:absolute;z-index:8;top:18px;right:-2px;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;border:0;border-radius:50%;background:rgba(255,255,255,.96);
  box-shadow:0 10px 28px rgba(1,17,38,.24);font-size:29px;line-height:1;opacity:0;
  transform:translateY(8px) scale(.72);pointer-events:none
}
.rrsg--gesture .rrsg__gesture{animation:rrsg-gesture-pop 1.12s ease both}
.rrsg--motion-wave .rrsg__portrait img{animation:rrsg-mascot-wave .92s cubic-bezier(.2,.8,.2,1)}
.rrsg--motion-nod .rrsg__portrait img{animation:rrsg-mascot-nod .74s ease-in-out}
.rrsg--motion-thumbs .rrsg__portrait img{animation:rrsg-mascot-thumbs .82s cubic-bezier(.2,.8,.2,1)}
.rrsg--motion-point .rrsg__portrait img{animation:rrsg-mascot-point .78s ease-in-out}
.rrsg--motion-wink .rrsg__portrait img{animation:rrsg-mascot-wink .66s ease-in-out}
.rrsg--motion-celebrate .rrsg__portrait img{animation:rrsg-mascot-celebrate 1.02s cubic-bezier(.2,.8,.2,1)}
.rrsg--motion-spin .rrsg__portrait img{animation:rrsg-mascot-spin 1.18s cubic-bezier(.34,.02,.34,1)}
.rrsg--motion-leanin .rrsg__portrait img{animation:rrsg-mascot-leanin .86s cubic-bezier(.18,.82,.24,1)}
.rrsg--motion-highfive .rrsg__portrait img{animation:rrsg-mascot-highfive .94s cubic-bezier(.18,.82,.24,1)}
.rrsg--motion-tiphat .rrsg__portrait img{animation:rrsg-mascot-tiphat .9s cubic-bezier(.2,.8,.2,1)}
@keyframes rrsg-gesture-pop{0%{opacity:0;transform:translateY(8px) scale(.72)}18%,68%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-7px) scale(.9)}}
@keyframes rrsg-mascot-wave{0%,100%{transform:translate3d(0,0,0) rotate(0)}22%{transform:translate3d(-2px,-3px,0) rotate(-3deg)}44%{transform:translate3d(2px,-5px,0) rotate(3deg)}66%{transform:translate3d(-1px,-2px,0) rotate(-2deg)}}
@keyframes rrsg-mascot-nod{0%,100%{transform:translate3d(0,0,0) scale(1)}38%{transform:translate3d(0,6px,0) scale(.99)}68%{transform:translate3d(0,-2px,0) scale(1.012)}}
@keyframes rrsg-mascot-thumbs{0%,100%{transform:translate3d(0,0,0) scale(1)}34%{transform:translate3d(-7px,-9px,42px) scale(1.065) rotate(-1.4deg)}66%{transform:translate3d(-2px,-3px,16px) scale(1.025)}}
@keyframes rrsg-mascot-point{0%,100%{transform:translate3d(0,0,0) rotate(0)}42%{transform:translate3d(-10px,-2px,18px) rotate(-2deg) scale(1.035)}72%{transform:translate3d(-3px,0,8px) rotate(.8deg) scale(1.01)}}
@keyframes rrsg-mascot-wink{0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}42%{transform:translate3d(-2px,1px,8px) rotate(-1.6deg) scale(.992)}70%{transform:translate3d(1px,-1px,4px) rotate(.8deg) scale(1.008)}}
@keyframes rrsg-mascot-celebrate{0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}25%{transform:translate3d(-5px,-14px,28px) rotate(-2.5deg) scale(1.06)}50%{transform:translate3d(4px,-6px,18px) rotate(2.5deg) scale(1.03)}75%{transform:translate3d(-2px,-10px,22px) rotate(-1deg) scale(1.04)}}
@keyframes rrsg-mascot-spin{0%{transform:translate3d(0,0,0) rotateY(0deg) scale(1)}38%{transform:translate3d(0,-5px,30px) rotateY(150deg) scale(.96)}58%{transform:translate3d(0,-5px,30px) rotateY(230deg) scale(.96)}100%{transform:translate3d(0,0,0) rotateY(360deg) scale(1)}}
@keyframes rrsg-mascot-leanin{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0)}38%{transform:translate3d(-9px,-8px,50px) scale(1.105) rotate(-1.2deg)}70%{transform:translate3d(-3px,-3px,18px) scale(1.035) rotate(-.4deg)}}
@keyframes rrsg-mascot-highfive{0%,100%{transform:translate3d(0,0,0) scale(1) rotate(0)}30%{transform:translate3d(-14px,-12px,65px) scale(1.13) rotate(-2deg)}55%{transform:translate3d(-18px,-15px,82px) scale(1.17) rotate(-2.8deg)}78%{transform:translate3d(-5px,-4px,22px) scale(1.045) rotate(-.6deg)}}
@keyframes rrsg-mascot-tiphat{0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}32%{transform:translate3d(2px,3px,12px) rotate(2.4deg) scale(.995)}58%{transform:translate3d(-3px,-4px,24px) rotate(-2deg) scale(1.03)}78%{transform:translate3d(0,-1px,8px) rotate(.6deg) scale(1.01)}}

/* Passive advice bubble: this is what Ranger says while he stands on screen. */
.rrsg__advice{
  position:relative;
  width:min(345px,calc(100vw - 300px));
  margin-bottom:26px;
  padding:16px 17px 14px;
  border:1px solid rgba(12,92,255,.22);
  border-radius:22px;
  background:#fff;
  color:var(--rrsg-ink);
  box-shadow:0 24px 64px rgba(1,17,38,.27);
  transform-origin:bottom right;
}
.rrsg--left .rrsg__advice{transform-origin:bottom left}
.rrsg__advice[hidden]{display:none!important}
.rrsg__speech:before{
  content:"";
  position:absolute;
  left:-16px;
  bottom:34px;
  width:0;height:0;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  border-right:17px solid #fff;
  filter:drop-shadow(-2px 2px 1px rgba(1,17,38,.08));
}
.rrsg--left .rrsg__speech:before{left:auto;right:-16px;border-right:0;border-left:17px solid #fff;filter:drop-shadow(2px 2px 1px rgba(1,17,38,.08))}
.rrsg__dismiss{position:absolute;top:8px;right:8px;width:25px;height:25px;border:0;border-radius:50%;background:#eef4ff;color:#18324f;font-size:17px;line-height:1;cursor:pointer}
.rrsg__tag{display:inline-flex;margin:0 30px 8px 0;padding:5px 8px;border-radius:999px;background:#eaf1ff;color:#0751e7;font-size:8px;line-height:1;font-weight:950;letter-spacing:.10em}
.rrsg__hook{margin:0 0 6px;color:#08182c;font-size:15px;line-height:1.28;font-weight:950}
.rrsg__fact{margin:0;color:#45566d;font-size:12px;line-height:1.52}
.rrsg__advice-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.rrsg__advice-actions button,.rrsg__advice-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:33px;padding:8px 10px;border-radius:9px;font-size:8px;line-height:1;font-weight:950;letter-spacing:.055em;text-decoration:none!important;cursor:pointer}
.rrsg__advice-actions button{border:1px solid var(--rrsg-blue);background:var(--rrsg-blue);color:#fff}
.rrsg__advice-actions a{border:1px solid #c8d5e9;background:#f7faff;color:#16304f!important}
.rrsg__source{display:inline-flex;margin-top:8px;color:#46627f!important;text-decoration:underline!important;font-size:8px;font-weight:800;letter-spacing:.05em}
.rrsg__advice-actions .rrsg__whatsapp-link,.rrsg__whatsapp-link{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:31px;height:31px;min-width:31px;min-height:31px;padding:0!important;border:0!important;border-radius:50%!important;background:#25D366!important;color:#fff!important;text-decoration:none!important;box-shadow:0 5px 13px rgba(0,0,0,.16);font:950 14px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0!important;transition:transform .18s ease,box-shadow .18s ease}
.rrsg__whatsapp-link[hidden]{display:none!important}.rrsg__whatsapp-link:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(0,0,0,.22)}.rrsg__whatsapp-link span{display:block;transform:rotate(-8deg)}
.rrsg__chat-tools{display:flex;align-items:center;gap:7px}.rrsg__chat-tools .rrsg__whatsapp-link{width:29px;height:29px;min-width:29px;min-height:29px;box-shadow:none}.rrsg__chat-tools>button{flex:0 0 auto}
[data-rrsg-whatsapp-hidden="1"]{display:none!important}

.rrsg--coach .rrsg__advice{border-color:rgba(12,92,255,.55);box-shadow:0 24px 64px rgba(1,17,38,.27),0 0 0 3px rgba(12,92,255,.08)}
.rrsg--coach .rrsg__tag{background:#0c5cff;color:#fff}

/* Active chat only appears after Ranger is clicked. */
.rrsg__chat-panel{
  position:relative;
  width:min(390px,calc(100vw - 300px));
  max-height:min(620px,calc(100vh - 34px));
  margin-bottom:12px;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(12,92,255,.24);
  border-radius:24px;
  background:#fff;
  color:var(--rrsg-ink);
  box-shadow:0 28px 76px rgba(1,17,38,.34),0 0 0 3px rgba(12,92,255,.06);
}
.rrsg__chat-panel[hidden]{display:none!important}
.rrsg__chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:15px 16px 12px;border-bottom:1px solid #e7edf5;background:linear-gradient(135deg,#071d3b,#0b3972);color:#fff}
.rrsg__chat-head b{display:block;font-size:14px;letter-spacing:.035em}.rrsg__chat-head span{display:block;margin-top:2px;color:#c8dcf7;font-size:9px;font-weight:750}.rrsg__chat-head button{border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.10);color:#fff;width:29px;height:29px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
.rrsg__context-line{margin:11px 14px 7px;padding:8px 9px;border:1px solid #dbe7f4;border-radius:10px;background:#f6f9fd;color:#50657e;font-size:9px;line-height:1.38;font-weight:700}
.rrsg__ai-status{display:inline-flex;align-items:center;gap:5px;margin:0 14px 8px;padding:4px 7px;border-radius:999px;background:#e9f8ef;color:#087b36;font-size:7px;line-height:1;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.rrsg__ai-status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.rrsg__ai-status[data-state="thinking"]{background:#eef4ff;color:#0c5cff}.rrsg__ai-status[data-state="local"]{background:#fff6df;color:#8a5a00}.rrsg__ai-status[data-state="offline"]{background:#fff0f0;color:#b32d2e}
.rrsg__chatlog{display:flex;flex-direction:column;gap:7px;max-height:270px;overflow:auto;margin:0 14px 9px;padding:3px 1px;scrollbar-width:thin}
.rrsg__bubble{max-width:88%;padding:8px 10px;border-radius:12px;font-size:10.5px;line-height:1.46}.rrsg__bubble--user{align-self:flex-end;background:#0c5cff;color:#fff;border-bottom-right-radius:4px}.rrsg__bubble--ranger{align-self:flex-start;background:#eef5ff;color:#16304f;border:1px solid #d2e1f7;border-bottom-left-radius:4px}.rrsg__bubble--proactive{border-left:3px solid #0c5cff}
.rrsg__chat-actions{align-self:flex-start;display:flex;gap:6px;flex-wrap:wrap;max-width:92%;margin:-1px 0 3px}.rrsg__chat-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:31px;padding:7px 10px;border-radius:999px;background:#0c5cff;color:#fff!important;text-decoration:none!important;font-size:8px;font-weight:950;letter-spacing:.04em;box-shadow:0 5px 14px rgba(12,92,255,.2)}.rrsg__chat-actions a:hover{transform:translateY(-1px)}
.rrsg__suggestions{display:flex;gap:5px;overflow-x:auto;margin:0 14px 8px;padding-bottom:2px}.rrsg__suggestions button{flex:0 0 auto;max-width:200px;border:1px solid #cdd9e8;background:#fff;color:#244a72;border-radius:999px;padding:5px 8px;font-size:8px;font-weight:850;cursor:pointer;white-space:nowrap}.rrsg__suggestions button:hover{border-color:#0c5cff;color:#0c5cff}
.rrsg__ask{display:grid;grid-template-columns:1fr auto;gap:6px;margin:0 14px}.rrsg__ask input{min-width:0;border:1px solid #c9d8ea;border-radius:10px;padding:9px 10px;font:500 11px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#16304f;background:#fff}.rrsg__ask input:focus{outline:2px solid rgba(12,92,255,.18);border-color:#0c5cff}.rrsg__ask input:disabled{opacity:.7;background:#f4f7fb}.rrsg__ask button{border:0;border-radius:10px;background:#071d3b;color:#fff;padding:8px 10px;font-size:8px;font-weight:950;letter-spacing:.04em;cursor:pointer}.rrsg__ask button:disabled{opacity:.55;cursor:wait}
.rrsg__learn-note{display:block;margin:8px 14px 13px;color:#8291a4;font-size:7.5px;line-height:1.4}

.rrsg--hop .rrsg__portrait img{animation:rrsg-hop .72s cubic-bezier(.2,.8,.2,1)}
.rrsg--speaking .rrsg__advice{animation:rrsg-pop .26s ease-out}
.rrsg--chat-open .rrsg__character{transform:translateY(-2px)}
@keyframes rrsg-hop{0%,100%{transform:translateY(0)}35%{transform:translateY(-12px) rotate(-1.5deg)}65%{transform:translateY(-3px) rotate(.7deg)}}
@keyframes rrsg-pop{0%{opacity:.55;transform:scale(.97) translateY(5px)}100%{opacity:1;transform:scale(1) translateY(0)}}

@media(max-width:720px){
  .rrsg,.rrsg--left{right:7px;left:auto;bottom:7px;gap:7px;max-width:calc(100vw - 14px);flex-direction:row}
  .rrsg__character{width:124px;min-width:124px;min-height:0;padding:0}
  .rrsg__portrait{width:124px;height:auto}
  .rrsg__portrait img{max-height:none;width:100%;height:auto;object-fit:contain}
  .rrsg__click-hint{right:2px;bottom:2px;min-height:19px;padding:4px 6px;font-size:5.5px}
  .rrsg__gesture{top:2px;right:-1px;width:34px;height:34px;font-size:20px}
  .rrsg__advice-actions .rrsg__whatsapp-link{display:none!important}
  .rrsg__advice{width:min(276px,calc(100vw - 142px));margin-bottom:16px;padding:13px 13px 12px;border-radius:17px}
  .rrsg__speech:before{left:-11px;bottom:27px;border-top-width:8px;border-bottom-width:8px;border-right-width:12px}.rrsg--left .rrsg__speech:before{right:-11px;border-left-width:12px}
  .rrsg__hook{font-size:12.5px}.rrsg__fact{font-size:10.5px}.rrsg__advice-actions button,.rrsg__advice-actions a{font-size:7px;padding:7px 8px;min-height:29px}
  .rrsg__chat-panel{position:fixed;right:7px;left:7px;bottom:132px;width:auto;max-height:min(540px,calc(100vh - 147px));margin:0;border-radius:19px}
  .rrsg__chatlog{max-height:210px}.rrsg__suggestions{max-width:100%}.rrsg__bubble{font-size:10px}
}
/* v0.21.59 — on mobile the WhatsApp plugin must not own a floating corner.
   Ranger's own WhatsApp link remains available inside the opened Ranger chat. */
@media(max-width:720px){
  [data-rrsg-whatsapp-hidden="1"]{display:none!important}
  #ht-ctc-chat,#qlwapp,[id*="joinchat"],[class*="joinchat"],[class*="ht-ctc"],[class*="qlwapp"],[class*="floating-wpp"],[class*="whatsapp_chat_support"],[class*="wp-whatsapp"],[class*="njt-wa"]{display:none!important}
  .rrsg #ht-ctc-chat,.rrsg #qlwapp,.rrsg [class*="joinchat"],.rrsg [class*="ht-ctc"],.rrsg [class*="qlwapp"]{display:initial!important}
}
@media(max-width:430px){
  .rrsg__advice{width:min(245px,calc(100vw - 138px))}.rrsg__fact{font-size:10px}.rrsg__advice-actions a{display:none}
  .rrsg__chat-head{padding:13px 13px 10px}.rrsg__context-line,.rrsg__ai-status,.rrsg__chatlog,.rrsg__suggestions,.rrsg__ask,.rrsg__learn-note{margin-left:11px;margin-right:11px}
}
@media(prefers-reduced-motion:reduce){.rrsg *{animation:none!important;transition:none!important}.rrsg__character:hover{transform:none}}

/* v0.21.63 — conversation-starting Ranger dance moves. These animate the actual
   transparent contractor gorilla artwork, not a blue launcher/background shell. */
.rrsg--motion-dance .rrsg__portrait img{animation:rrsg-mascot-dance 1.56s cubic-bezier(.34,.05,.28,1)}
.rrsg--motion-thumbwiggle .rrsg__portrait img{animation:rrsg-mascot-thumbwiggle 1.46s cubic-bezier(.28,.06,.24,1)}
.rrsg--motion-thumbwiggle .rrsg__gesture{animation:rrsg-thumb-gesture-wiggle 1.42s ease-in-out both}
@keyframes rrsg-mascot-dance{
  0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  12%{transform:translate3d(-10px,-4px,18px) rotate(-4deg) scale(1.025)}
  26%{transform:translate3d(9px,-10px,28px) rotate(4deg) scale(1.045)}
  40%{transform:translate3d(-12px,-5px,20px) rotate(-5deg) scale(1.035)}
  54%{transform:translate3d(11px,-11px,30px) rotate(5deg) scale(1.05)}
  68%{transform:translate3d(-7px,-4px,16px) rotate(-3deg) scale(1.025)}
  82%{transform:translate3d(6px,-8px,22px) rotate(2.6deg) scale(1.035)}
}
@keyframes rrsg-mascot-thumbwiggle{
  0%,100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  14%{transform:translate3d(-13px,-3px,20px) rotate(-5.5deg) scale(1.035)}
  28%{transform:translate3d(12px,-7px,30px) rotate(5.5deg) scale(1.055)}
  42%{transform:translate3d(-14px,-5px,26px) rotate(-6deg) scale(1.045)}
  56%{transform:translate3d(13px,-9px,34px) rotate(6deg) scale(1.06)}
  70%{transform:translate3d(-8px,-4px,18px) rotate(-3.5deg) scale(1.03)}
  84%{transform:translate3d(7px,-6px,20px) rotate(3deg) scale(1.035)}
}
@keyframes rrsg-thumb-gesture-wiggle{
  0%{opacity:0;transform:translateY(8px) rotate(0) scale(.72)}
  14%{opacity:1;transform:translate(-6px,0) rotate(-13deg) scale(1)}
  30%{opacity:1;transform:translate(6px,-2px) rotate(13deg) scale(1.08)}
  46%{opacity:1;transform:translate(-7px,0) rotate(-15deg) scale(1.06)}
  62%{opacity:1;transform:translate(7px,-2px) rotate(15deg) scale(1.08)}
  78%{opacity:1;transform:translate(-3px,-1px) rotate(-7deg) scale(1.02)}
  100%{opacity:0;transform:translateY(-7px) rotate(0) scale(.9)}
}


/* v0.21.65 — subtle 3D alive motion */
.rrsg__portrait{perspective:1100px;transform-style:preserve-3d;animation:rrsg-mascot-alive 5.8s ease-in-out infinite;}
.rrsg--chat-open .rrsg__portrait{animation-duration:7.2s;}
@keyframes rrsg-mascot-alive{
  0%,100%{transform:translate3d(0,0,0) rotateZ(0deg) rotateY(0deg)}
  20%{transform:translate3d(-1px,-2px,0) rotateZ(-0.8deg) rotateY(-2.5deg)}
  40%{transform:translate3d(1px,-4px,0) rotateZ(0.6deg) rotateY(1.8deg)}
  60%{transform:translate3d(-1px,-2px,0) rotateZ(-0.5deg) rotateY(-1.5deg)}
  80%{transform:translate3d(1px,0,0) rotateZ(0.4deg) rotateY(1.2deg)}
}
@media(prefers-reduced-motion:reduce){.rrsg__portrait{animation:none!important}}


/* v0.21.66 — expressive 3D Ranger body language */
.rrsg--motion-shoulderbob .rrsg__portrait img{animation:rrsg-mascot-shoulderbob 1.16s cubic-bezier(.3,.06,.24,1)}
.rrsg--motion-laugh .rrsg__portrait img{animation:rrsg-mascot-laugh 1.28s cubic-bezier(.22,.72,.24,1)}
.rrsg--motion-clap .rrsg__portrait img{animation:rrsg-mascot-clap 1.24s cubic-bezier(.28,.08,.24,1)}
.rrsg--motion-peek .rrsg__portrait img{animation:rrsg-mascot-peek 1.18s cubic-bezier(.18,.82,.24,1)}
.rrsg--motion-laugh .rrsg__gesture,.rrsg--motion-clap .rrsg__gesture,.rrsg--motion-peek .rrsg__gesture{animation:rrsg-gesture-pop 1.15s ease-in-out both}
@keyframes rrsg-mascot-shoulderbob{
  0%,100%{transform:translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1)}
  18%{transform:translate3d(-7px,-4px,25px) rotateY(-5deg) rotateZ(-2.3deg) scale(1.035)}
  36%{transform:translate3d(7px,-8px,38px) rotateY(5deg) rotateZ(2.5deg) scale(1.05)}
  54%{transform:translate3d(-6px,-5px,28px) rotateY(-4deg) rotateZ(-2deg) scale(1.04)}
  72%{transform:translate3d(6px,-7px,34px) rotateY(4deg) rotateZ(2deg) scale(1.045)}
}
@keyframes rrsg-mascot-laugh{
  0%,100%{transform:translate3d(0,0,0) rotateY(0) rotateZ(0) scale(1)}
  20%{transform:translate3d(0,5px,22px) rotateZ(-1deg) scale(.99)}
  38%{transform:translate3d(-3px,-11px,44px) rotateY(-3deg) rotateZ(-2deg) scale(1.065)}
  56%{transform:translate3d(3px,-5px,30px) rotateY(3deg) rotateZ(2deg) scale(1.035)}
  74%{transform:translate3d(-2px,-9px,36px) rotateZ(-1.4deg) scale(1.05)}
}
@keyframes rrsg-mascot-clap{
  0%,100%{transform:translate3d(0,0,0) rotateY(0) scale(1)}
  18%{transform:translate3d(-4px,-3px,18px) rotateY(-4deg) scale(1.02)}
  34%{transform:translate3d(4px,-8px,48px) rotateY(4deg) scale(1.07)}
  50%{transform:translate3d(-3px,-4px,25px) rotateY(-3deg) scale(1.03)}
  66%{transform:translate3d(3px,-9px,52px) rotateY(3deg) scale(1.075)}
  82%{transform:translate3d(0,-2px,12px) scale(1.015)}
}
@keyframes rrsg-mascot-peek{
  0%,100%{transform:translate3d(0,0,0) rotateY(0deg) rotateZ(0deg) scale(1)}
  28%{transform:translate3d(-15px,-7px,72px) rotateY(-8deg) rotateZ(-2deg) scale(1.12)}
  52%{transform:translate3d(-19px,-10px,88px) rotateY(-10deg) rotateZ(-2.5deg) scale(1.15)}
  76%{transform:translate3d(-6px,-3px,28px) rotateY(-3deg) rotateZ(-.6deg) scale(1.045)}
}
/* deepen the always-alive illusion without adding a background box */
.rrsg__portrait img{filter:drop-shadow(0 14px 14px rgba(0,12,30,.22));}
@media(prefers-reduced-motion:reduce){
 .rrsg--motion-shoulderbob .rrsg__portrait img,.rrsg--motion-laugh .rrsg__portrait img,.rrsg--motion-clap .rrsg__portrait img,.rrsg--motion-peek .rrsg__portrait img{animation:none!important}
}


/* v0.21.67 — articulated full-motion Ranger rig.
   The same transparent contractor render is split into overlapping SVG body zones.
   Arms and legs therefore move independently instead of the entire PNG merely tilting. */
.rrsg__portrait{position:relative;display:block;isolation:isolate}
.rrsg--rigged .rrsg__portrait>.rrsg__rig-fallback{visibility:hidden!important;opacity:0!important}
.rrsg__rig{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 18px 22px rgba(0,10,28,.25))}
.rrsg__rig-part{transform-box:fill-box;will-change:transform}
.rrsg__rig-body{transform-origin:50% 64%;animation:rrsg-rig-breathe 4.6s ease-in-out infinite}
.rrsg__rig-left-arm{transform-origin:82% 19%;animation:rrsg-rig-arm-idle-l 5.8s ease-in-out infinite}
.rrsg__rig-right-arm{transform-origin:18% 18%;animation:rrsg-rig-arm-idle-r 6.2s ease-in-out infinite}
.rrsg__rig-left-leg{transform-origin:58% 7%}
.rrsg__rig-right-leg{transform-origin:42% 7%}

@keyframes rrsg-rig-breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1) rotateZ(0)}
  50%{transform:translate3d(0,-3px,10px) scale(1.012) rotateZ(.25deg)}
}
@keyframes rrsg-rig-arm-idle-l{
  0%,100%{transform:rotate(0deg) translate3d(0,0,0)}
  50%{transform:rotate(-1.6deg) translate3d(-1px,-2px,4px)}
}
@keyframes rrsg-rig-arm-idle-r{
  0%,100%{transform:rotate(0deg) translate3d(0,0,0)}
  50%{transform:rotate(1.2deg) translate3d(1px,-2px,3px)}
}

/* Walking: legs and arms counter-swing, while Ranger visibly takes a short trip left and back. */
.rrsg--motion-walk .rrsg__character{animation:rrsg-rig-walk-path 2.18s ease-in-out both!important}
.rrsg--motion-walk .rrsg__rig-left-leg{animation:rrsg-rig-leg-left  .55s ease-in-out 4!important}
.rrsg--motion-walk .rrsg__rig-right-leg{animation:rrsg-rig-leg-right .55s ease-in-out 4!important}
.rrsg--motion-walk .rrsg__rig-left-arm{animation:rrsg-rig-walk-arm-left .55s ease-in-out 4!important}
.rrsg--motion-walk .rrsg__rig-right-arm{animation:rrsg-rig-walk-arm-right .55s ease-in-out 4!important}
.rrsg--motion-walk .rrsg__rig-body{animation:rrsg-rig-walk-body .55s ease-in-out 4!important}
@keyframes rrsg-rig-walk-path{
  0%,100%{transform:translate3d(0,0,0)}
  46%{transform:translate3d(-36px,-2px,18px)}
  58%{transform:translate3d(-36px,-2px,18px)}
}
@keyframes rrsg-rig-leg-left{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg) translateY(-2px)}}
@keyframes rrsg-rig-leg-right{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg) translateY(-2px)}}
@keyframes rrsg-rig-walk-arm-left{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-10deg)}}
@keyframes rrsg-rig-walk-arm-right{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(8deg)}}
@keyframes rrsg-rig-walk-body{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(.7deg)}}

/* Gesture-specific limb articulation. */
.rrsg--motion-wave .rrsg__rig-left-arm{animation:rrsg-rig-wave-arm .92s ease-in-out!important}
@keyframes rrsg-rig-wave-arm{
  0%,100%{transform:rotate(0) translate3d(0,0,0)}
  18%{transform:rotate(-16deg) translate3d(-5px,-7px,20px)}
  38%{transform:rotate(7deg) translate3d(0,-10px,28px)}
  58%{transform:rotate(-18deg) translate3d(-5px,-9px,30px)}
  78%{transform:rotate(5deg) translate3d(0,-4px,14px)}
}
.rrsg--motion-thumbs .rrsg__rig-left-arm,
.rrsg--motion-highfive .rrsg__rig-left-arm{
  animation:rrsg-rig-highfive-arm 1.05s cubic-bezier(.18,.82,.24,1)!important
}
@keyframes rrsg-rig-highfive-arm{
  0%,100%{transform:rotate(0) translate3d(0,0,0) scale(1)}
  45%{transform:rotate(-14deg) translate3d(-18px,-28px,75px) scale(1.11)}
  68%{transform:rotate(-9deg) translate3d(-12px,-20px,48px) scale(1.06)}
}
.rrsg--motion-point .rrsg__rig-left-arm{animation:rrsg-rig-point-arm 1.04s ease-in-out!important}
@keyframes rrsg-rig-point-arm{
  0%,100%{transform:rotate(0) translate3d(0,0,0)}
  45%{transform:rotate(-11deg) translate3d(-17px,-5px,50px)}
  72%{transform:rotate(-6deg) translate3d(-8px,-2px,22px)}
}
.rrsg--motion-clap .rrsg__rig-left-arm{animation:rrsg-rig-clap-left .42s ease-in-out 3!important}
.rrsg--motion-clap .rrsg__rig-right-arm{animation:rrsg-rig-clap-right .42s ease-in-out 3!important}
@keyframes rrsg-rig-clap-left{0%,100%{transform:rotate(0)}50%{transform:rotate(14deg) translate3d(32px,-5px,18px)}}
@keyframes rrsg-rig-clap-right{0%,100%{transform:rotate(0)}50%{transform:rotate(-11deg) translate3d(-28px,-4px,18px)}}

/* Dance: separate shoulders, arms and legs, not just one-image sway. */
.rrsg--motion-dance .rrsg__rig-left-arm{animation:rrsg-rig-dance-arm-l .44s ease-in-out 4!important}
.rrsg--motion-dance .rrsg__rig-right-arm{animation:rrsg-rig-dance-arm-r .44s ease-in-out 4!important}
.rrsg--motion-dance .rrsg__rig-left-leg{animation:rrsg-rig-dance-leg-l .44s ease-in-out 4!important}
.rrsg--motion-dance .rrsg__rig-right-leg{animation:rrsg-rig-dance-leg-r .44s ease-in-out 4!important}
.rrsg--motion-dance .rrsg__rig-body{animation:rrsg-rig-dance-body .44s ease-in-out 4!important}
@keyframes rrsg-rig-dance-arm-l{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(12deg) translateY(-10px)}}
@keyframes rrsg-rig-dance-arm-r{0%,100%{transform:rotate(3deg)}50%{transform:rotate(-11deg) translateY(-8px)}}
@keyframes rrsg-rig-dance-leg-l{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(7deg) translateY(-5px)}}
@keyframes rrsg-rig-dance-leg-r{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-7deg) translateY(-5px)}}
@keyframes rrsg-rig-dance-body{0%,100%{transform:translate3d(-4px,0,0) rotate(-1.8deg)}50%{transform:translate3d(5px,-8px,24px) rotate(2deg)}}

/* Lean/laugh/peek/celebrate use torso depth plus independent arm action. */
.rrsg--motion-leanin .rrsg__rig-body,.rrsg--motion-peek .rrsg__rig-body{
  animation:rrsg-rig-lean-body 1.02s cubic-bezier(.18,.82,.24,1)!important
}
@keyframes rrsg-rig-lean-body{0%,100%{transform:translate3d(0,0,0) scale(1)}45%{transform:translate3d(-5px,-12px,75px) scale(1.085)}}
.rrsg--motion-laugh .rrsg__rig-body{animation:rrsg-rig-laugh-body .34s ease-in-out 4!important}
@keyframes rrsg-rig-laugh-body{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(-1.5deg)}}
.rrsg--motion-celebrate .rrsg__rig-left-arm{animation:rrsg-rig-celebrate-l .62s ease-in-out 2!important}
.rrsg--motion-celebrate .rrsg__rig-right-arm{animation:rrsg-rig-celebrate-r .62s ease-in-out 2!important}
@keyframes rrsg-rig-celebrate-l{0%,100%{transform:rotate(0)}50%{transform:rotate(-18deg) translateY(-20px)}}
@keyframes rrsg-rig-celebrate-r{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg) translateY(-18px)}}

/* Whole-character 3D turn while body zones stay articulated. */
.rrsg--motion-spin .rrsg__rig{animation:rrsg-rig-full-spin 1.35s cubic-bezier(.34,.02,.34,1)!important}
@keyframes rrsg-rig-full-spin{
  0%{transform:perspective(900px) rotateY(0) translateZ(0)}
  35%{transform:perspective(900px) rotateY(135deg) translateZ(24px) scale(.96)}
  64%{transform:perspective(900px) rotateY(235deg) translateZ(24px) scale(.96)}
  100%{transform:perspective(900px) rotateY(360deg) translateZ(0)}
}

/* Avoid the old whole-PNG animation fighting the articulated rig. */
.rrsg--rigged[class*="rrsg--motion-"] .rrsg__portrait>.rrsg__rig-fallback{animation:none!important}
@media (max-width:700px){
  .rrsg--motion-walk .rrsg__character{animation-name:rrsg-rig-walk-path-mobile!important}
  @keyframes rrsg-rig-walk-path-mobile{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-18px,-1px,10px)}}
}
@media(prefers-reduced-motion:reduce){
  .rrsg__rig,.rrsg__rig-part{animation:none!important;transition:none!important}
  .rrsg--motion-walk .rrsg__character{animation:none!important}
}