.collecta-mascot{
  --collecta-mascot-size:132px;
  --collecta-mascot-frame-ratio:1;
  --mascot-safe-top:env(safe-area-inset-top,0px);--mascot-safe-right:env(safe-area-inset-right,0px);
  --mascot-safe-bottom:env(safe-area-inset-bottom,0px);--mascot-safe-left:env(safe-area-inset-left,0px);
  position:fixed;right:max(42px,env(safe-area-inset-right));bottom:max(40px,env(safe-area-inset-bottom));
  width:var(--collecta-mascot-size);z-index:75;isolation:isolate;
}
.collecta-mascot[hidden]{display:none!important}
.collecta-mascot__open{
  position:relative;display:block;width:100%;margin:0;padding:0;border:0;border-radius:24px;
  color:var(--text,#17201d);background:none;cursor:grab;-webkit-tap-highlight-color:transparent;
  touch-action:none;user-select:none;-webkit-user-select:none;
}
.collecta-mascot.is-dragging .collecta-mascot__open{cursor:grabbing}
.collecta-mascot.is-dragging :is(.collecta-mascot__sprite,.collecta-mascot__aura,.collecta-mascot__bubble){transform:none;transition:none}
.collecta-mascot[data-bubble-side="right"] .collecta-mascot__bubble{left:10px;right:auto;border-radius:14px 14px 14px 4px}
.collecta-mascot[data-bubble-side="right"] .collecta-mascot__bubble::after{left:12px;right:auto}
.collecta-mascot__open:focus-visible{outline:2px solid var(--accent,#c6ed5a);outline-offset:5px}
.collecta-mascot__aura{
  /* Warm reflections rise into the white registration bubble. */
  --mascot-shine-start:#ed827059;--mascot-shine-center:#ffd3a8db;--mascot-shine-end:#f2b28b59;
  position:absolute;inset:-10.75%;z-index:0;
  display:block;overflow:hidden;pointer-events:none;
  background:linear-gradient(145deg,#ed827010,#ffd3a800 70%);
  -webkit-mask-image:url("assets/mascot/collecta-monkey-sprite-v1.png");
  -webkit-mask-size:400% 300%;-webkit-mask-repeat:no-repeat;
  -webkit-mask-position:var(--mascot-frame-position,0% 0%);
  mask-image:url("assets/mascot/collecta-monkey-sprite-v1.png");
  mask-size:400% 300%;mask-repeat:no-repeat;mask-mode:alpha;
  mask-position:var(--mascot-frame-position,0% 0%);
  transition:transform .2s;
}
.collecta-mascot__aura::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(20deg,transparent 39%,var(--mascot-shine-start) 46%,var(--mascot-shine-center) 50%,var(--mascot-shine-end) 54%,transparent 61%);
  background-size:100% 300%;background-repeat:no-repeat;background-position:0 0%;
  opacity:0;animation:collecta-mascot-aura-shimmer 4.8s linear infinite;
}
@keyframes collecta-mascot-aura-shimmer{
  0%,6%{background-position:0 0%;opacity:0}
  10%{background-position:0 4%;opacity:1}
  58%{background-position:0 100%;opacity:1}
  62%,100%{background-position:0 100%;opacity:0}
}
.collecta-mascot[data-motion-paused="true"] :is(.collecta-mascot__aura,.collecta-mascot__bubble)::before,
.collecta-mascot[data-motion-paused="true"] .collecta-mascot__bubble::after{animation-play-state:paused}
.collecta-mascot__sprite{
  position:relative;z-index:1;display:block;width:100%;aspect-ratio:var(--collecta-mascot-frame-ratio);
  background-image:url("assets/mascot/collecta-monkey-sprite-v1.png");background-repeat:no-repeat;
  background-size:400% 300%;background-position:var(--mascot-frame-position,0% 0%);
  filter:drop-shadow(0 7px 7px #14201924);transition:filter .2s,transform .2s;
}
.collecta-mascot__open:hover .collecta-mascot__sprite{filter:drop-shadow(0 9px 9px #14201930);transform:translateY(-2px)}
.collecta-mascot__open:hover .collecta-mascot__aura{transform:translateY(-2px)}
.collecta-mascot__bubble{
  position:absolute;right:18px;bottom:calc(100% + 7px);z-index:3;display:flex;align-items:center;gap:10px;
  padding:10px 13px;border:1px solid var(--line,#d7d9cf);border-radius:14px 14px 4px 14px;
  --mascot-bubble-end:#fff;
  isolation:isolate;background:#fff;color:#17201d;box-shadow:0 4px 16px #16211b0c;
  font:600 12px/1.3 Manrope,Arial,sans-serif;white-space:nowrap;transition:transform .2s,border-color .2s;
}
/* In the same cycle, the pill lights up after the halo reaches its top. */
.collecta-mascot__bubble::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(20deg,transparent 30%,#ed827066 43%,#ffd3a899 50%,#f2b28b66 57%,transparent 70%);
  background-size:100% 450%;background-repeat:no-repeat;background-position:0 0%;
  opacity:0;animation:collecta-mascot-bubble-shimmer 4.8s linear infinite;
}
@keyframes collecta-mascot-bubble-shimmer{
  0%,56%{background-position:0 0%;opacity:0}
  60%{background-position:0 0%;opacity:1}
  84%{background-position:0 100%;opacity:1}
  88%,100%{background-position:0 100%;opacity:0}
}
@keyframes collecta-mascot-tail-shimmer{
  0%,57%,70%,100%{background-color:#fff}
  62%{background-color:#f5c2aa}
}
.collecta-mascot__bubble::after{
  content:"";position:absolute;right:12px;bottom:-5px;width:8px;height:8px;
  transform:rotate(45deg);background:var(--mascot-bubble-end);z-index:-1;animation:collecta-mascot-tail-shimmer 4.8s linear infinite;
  border-right:1px solid var(--line,#d7d9cf);border-bottom:1px solid var(--line,#d7d9cf);
}
.collecta-mascot__bubble>span{font-size:15px;line-height:1;color:#667169}
.collecta-mascot__open:hover .collecta-mascot__bubble,.collecta-mascot__open:focus-visible .collecta-mascot__bubble{transform:translateY(-2px)}
.collecta-mascot__dismiss{
  position:absolute;top:-2px;right:-2px;z-index:4;display:grid;place-items:center;width:26px;height:26px;
  padding:0;border:1px solid var(--line,#d7d9cf);border-radius:50%;background:var(--surface,#f8f7f1);
  color:var(--muted,#667169);cursor:pointer;opacity:.75;transition:opacity .2s;
}
.collecta-mascot__dismiss:hover,.collecta-mascot__dismiss:focus-visible{opacity:1;color:var(--text,#17201d)}
.collecta-mascot__dismiss:focus-visible{outline:2px solid var(--accent,#c6ed5a);outline-offset:3px}
.collecta-mascot__dismiss svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}

dialog.collecta-mascot-dialog{
  width:min(840px,calc(100vw - 36px));max-width:none;max-height:85vh;max-height:85dvh;
  margin:auto;padding:0;border:1px solid var(--line,#d7d9cf);border-radius:24px;
  background:var(--surface,#f8f7f1);color:var(--text,#17201d);box-shadow:0 24px 100px #0004;
  overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
}
dialog.collecta-mascot-dialog:not([open]){display:none}
.collecta-mascot-dialog::backdrop{background:#0b1417a8;backdrop-filter:blur(4px)}
.collecta-mascot-dialog__header{
  position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:25px 28px 21px;border-bottom:1px solid var(--line,#d7d9cf);background:var(--surface,#f8f7f1);
}
.collecta-mascot-dialog__eyebrow{font-size:9px;line-height:1.5;letter-spacing:.14em;color:var(--muted,#667169)}
.collecta-mascot-dialog .collecta-mascot-dialog__header h2{
  margin:10px 0 0;font:600 clamp(23px,3vw,30px)/1.2 Manrope,Arial,sans-serif;letter-spacing:-.035em;max-width:590px;
}
.collecta-mascot-dialog__close{
  flex-shrink:0;display:grid;place-items:center;width:39px;height:39px;margin:0;padding:0;border:1px solid var(--line,#d7d9cf);
  border-radius:50%;color:var(--text,#17201d);background:transparent;cursor:pointer;
}
.collecta-mascot-dialog__close:hover{background:var(--bg,#f0f1e9)}
.collecta-mascot-dialog__close:focus-visible{outline:2px solid var(--accent,#c6ed5a);outline-offset:3px}
.collecta-mascot-dialog__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.collecta-mascot-dialog__body{padding:22px 28px 26px}
.collecta-mascot-dialog .intro-feedback{
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0;padding:0;border:0;border-radius:0;background:transparent;
}
.collecta-mascot-dialog .intro-feedback-eyebrow,.collecta-mascot-dialog .intro-feedback h2,.collecta-mascot-dialog .intro-feedback-steps{display:none}
.collecta-mascot-dialog .intro-feedback-copy>p{max-width:670px;margin:0;font-size:13px;line-height:1.7}
.collecta-mascot-dialog .intro-feedback-form{gap:17px}
.collecta-mascot-dialog .intro-niches{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.collecta-mascot-dialog .intro-niche{scroll-margin-top:130px}
.collecta-mascot-dialog .intro-niche-card{min-height:106px;padding:11px;border-radius:12px}
.collecta-mascot-dialog .intro-niche-top{margin-bottom:8px}
.collecta-mascot-dialog .intro-niche-icon{width:22px;height:24px}
.collecta-mascot-dialog .intro-niche-card strong{font-size:13px;line-height:1.3}
.collecta-mascot-dialog .intro-niche-card small{font-size:10px;line-height:1.4}
.collecta-mascot-dialog .intro-feedback-email input{box-sizing:border-box}
.collecta-mascot-dialog .intro-feedback-note{
  display:block;padding:10px 12px;border:1px solid var(--line,#d7d9cf);border-radius:10px;font-size:11px;line-height:1.65;
}
.collecta-mascot-dialog .intro-feedback-actions{gap:12px}
.collecta-mascot-dialog .intro-feedback-actions .button{min-height:44px}

@media(max-width:600px){
  .collecta-mascot{--collecta-mascot-size:98px;right:max(32px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom))}
  .collecta-mascot__bubble{right:10px;bottom:calc(100% + 5px);padding:8px 11px;gap:7px;font-size:11px}
  .collecta-mascot__dismiss{width:25px;height:25px;right:-2px;top:0}
  dialog.collecta-mascot-dialog{width:calc(100vw - 20px);border-radius:18px}
  .collecta-mascot-dialog__header{padding:20px 18px 17px;gap:14px}
  .collecta-mascot-dialog .collecta-mascot-dialog__header h2{font-size:23px;line-height:1.22}
  .collecta-mascot-dialog__eyebrow{font-size:8px;letter-spacing:.1em}
  .collecta-mascot-dialog__close{width:34px;height:34px}
  .collecta-mascot-dialog__body{padding:18px 18px 22px}
  .collecta-mascot-dialog .intro-feedback{gap:17px}
  .collecta-mascot-dialog .intro-feedback-copy>p{font-size:12px}
  .collecta-mascot-dialog .intro-niches{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .collecta-mascot-dialog .intro-niche-card{min-height:103px}
  .collecta-mascot-dialog .intro-niche-card strong{font-size:14px}
  .collecta-mascot-dialog .intro-niche-card small{font-size:11px}
  .collecta-mascot-dialog .intro-feedback-actions .button{width:100%;justify-content:space-between}
}
@media(prefers-reduced-motion:reduce){
  .collecta-mascot__aura::before,.collecta-mascot__bubble::before{display:none;animation:none}
  .collecta-mascot__bubble::after{animation:none}
  .collecta-mascot__sprite,.collecta-mascot__aura,.collecta-mascot__bubble,.collecta-mascot__dismiss{transition:none}
  .collecta-mascot__open:hover .collecta-mascot__sprite,.collecta-mascot__open:hover .collecta-mascot__aura,.collecta-mascot__open:hover .collecta-mascot__bubble,.collecta-mascot__open:focus-visible .collecta-mascot__bubble{transform:none}
}
