/* Scoped to the launcher; the existing guide and checkout retain their styles. */
#gtph-mascot{position:fixed;left:18px;bottom:20px;z-index:9990;display:flex;align-items:center;width:274px;max-width:calc(100vw - 36px);min-height:78px;padding:0 28px 0 0;border:1px solid #d9d8fc;border-radius:22px;background:linear-gradient(115deg,#f3f0ff 0%,#eef7ff 62%,#e6fbf3 100%);box-shadow:0 8px 30px rgba(57,50,115,.18),0 2px 6px rgba(57,50,115,.06);font:400 14px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;isolation:isolate;text-align:left;direction:ltr;color:#303365;box-sizing:border-box}
#gtph-mascot[hidden]{display:none!important}
#gtph-mascot *{box-sizing:border-box}
#gtph-mascot .gtph-mascot-launch,#gtph-mascot .gtph-mascot-dismiss{appearance:none;-webkit-appearance:none;font-family:inherit;text-transform:none;letter-spacing:normal;margin:0!important;border:0!important;box-shadow:none!important;cursor:pointer;background:transparent!important;color:#303365!important;min-width:0;max-width:none;height:auto;line-height:1.4;text-decoration:none}
#gtph-mascot .gtph-mascot-launch{display:flex;align-items:center;flex:1;gap:4px;min-height:78px;padding:4px 0 4px 6px!important;border-radius:21px;text-align:left;white-space:normal;overflow:visible}
#gtph-mascot .gtph-mascot-launch::before,#gtph-mascot .gtph-mascot-launch::after,#gtph-mascot .gtph-mascot-dismiss::before,#gtph-mascot .gtph-mascot-dismiss::after{content:none!important}
#gtph-mascot .gtph-mascot-picture{display:block;flex:none;width:76px;height:76px;margin-top:-12px;pointer-events:none;background-image:url("plush-wave.webp");background-repeat:no-repeat;background-size:200% 200%;background-position:0 0;transform-origin:50% 82%;will-change:transform,background-position;animation:gtph-mascot-pose 2.8s steps(1,end) infinite,gtph-mascot-sway 1.55s ease-in-out infinite}
#gtph-mascot .gtph-mascot-copy{display:flex;flex-direction:column;gap:4px;min-width:0;padding:5px 0}
#gtph-mascot .gtph-mascot-title{display:block;font-size:14px;font-weight:750;line-height:1.35;color:#303365}
#gtph-mascot .gtph-mascot-hint{display:block;font-size:11px;font-weight:650;line-height:1.4;color:#5750a5}
#gtph-mascot .gtph-mascot-arrow{display:inline-block;margin-left:3px;transition:transform .2s}
#gtph-mascot .gtph-mascot-launch:hover .gtph-mascot-hint{text-decoration:underline;text-underline-offset:3px}
#gtph-mascot .gtph-mascot-launch:hover .gtph-mascot-arrow{transform:translateX(3px)}
#gtph-mascot .gtph-mascot-launch:hover .gtph-mascot-picture{animation:gtph-mascot-pose-hover 1.35s steps(1,end) infinite,gtph-mascot-sway-hover .72s ease-in-out infinite}
#gtph-mascot .gtph-mascot-dismiss{position:absolute;right:0;top:0;display:flex;align-items:center;justify-content:center;width:30px;min-height:44px;padding:0!important;border-radius:0 21px 0 10px;font-size:21px;font-weight:400;color:#646380!important}
#gtph-mascot .gtph-mascot-dismiss:hover{background:#e7e6fb!important;color:#303365!important}
#gtph-mascot button:focus-visible{outline:3px solid #7062c9!important;outline-offset:3px}

/* Smooth wave: the four artwork poses play forward then backward quickly,
   while the whole plush keeps a gentle continuous sway/bob between poses. */
@keyframes gtph-mascot-pose{
  0%,4%,30%,100%{background-position:0 0}
  5%,9%,25%,29%{background-position:100% 0}
  10%,14%,20%,24%{background-position:0 100%}
  15%,19%{background-position:100% 100%}
}
@keyframes gtph-mascot-pose-hover{
  0%,16%,100%{background-position:0 0}
  17%,32%,84%,99%{background-position:100% 0}
  33%,48%,68%,83%{background-position:0 100%}
  49%,67%{background-position:100% 100%}
}
@keyframes gtph-mascot-sway{
  0%,100%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  25%{transform:translate3d(0,-1.5px,0) rotate(-1.4deg) scale(1.008)}
  50%{transform:translate3d(0,-2.5px,0) rotate(0deg) scale(1.012)}
  75%{transform:translate3d(0,-1.5px,0) rotate(1.4deg) scale(1.008)}
}
@keyframes gtph-mascot-sway-hover{
  0%,100%{transform:translate3d(0,0,0) rotate(-1deg) scale(1)}
  50%{transform:translate3d(0,-3px,0) rotate(1.7deg) scale(1.018)}
}

/* PHONE ONLY: replace the large floating card with a short bar at the very
   bottom. Desktop/laptop keeps the exact card layout above. */
@media(max-width:600px){
  #gtph-mascot{left:0;right:0;bottom:0;width:100%;max-width:none;min-height:50px;padding:0 36px max(0px,env(safe-area-inset-bottom,0px)) 6px;border-left:0;border-right:0;border-bottom:0;border-radius:14px 14px 0 0;box-shadow:0 -4px 18px rgba(57,50,115,.16),0 -1px 3px rgba(57,50,115,.05)}
  #gtph-mascot .gtph-mascot-launch{min-height:50px;padding:2px 0!important;gap:7px;border-radius:13px 0 0 0;overflow:hidden}
  #gtph-mascot .gtph-mascot-picture{width:44px;height:44px;margin:0;flex:0 0 44px}
  #gtph-mascot .gtph-mascot-copy{flex:1;flex-direction:row;align-items:center;gap:7px;padding:0;min-width:0;white-space:nowrap;overflow:hidden}
  #gtph-mascot .gtph-mascot-title{font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #gtph-mascot .gtph-mascot-hint{font-size:10px;line-height:1.2;white-space:nowrap;flex:none}
  #gtph-mascot .gtph-mascot-arrow{margin-left:1px}
  #gtph-mascot .gtph-mascot-dismiss{right:2px;top:2px;width:32px;min-height:44px;border-radius:10px;font-size:19px}
}
@media(max-width:360px){
  #gtph-mascot .gtph-mascot-hint{display:none}
}
@media(prefers-reduced-motion:reduce){#gtph-mascot *,#gtph-mascot *::before,#gtph-mascot *::after{animation:none!important;transition:none!important}}
@media print{#gtph-mascot{display:none!important}}