#quote-float-btn {
 --quote-open-width:238px;
 position:fixed; right:max(20px,env(safe-area-inset-right)); bottom:calc(80px + env(safe-area-inset-bottom)); z-index:99999;
 display:flex; align-items:center; width:52px; max-width:calc(100vw - 40px); height:52px;
 box-sizing:border-box; padding:0; margin:0; overflow:hidden; isolation:isolate;
 border:1px solid rgba(255,255,255,.18); border-radius:999px;
 background:linear-gradient(120deg,#c9623e,#b94c2b); color:#fff;
 font-size:15px; font-weight:700; line-height:1.4; letter-spacing:.02em; text-decoration:none; white-space:nowrap;
 box-shadow:0 4px 14px rgba(80,35,20,.16);
 filter:brightness(.8); transform-origin:right center; -webkit-tap-highlight-color:transparent;
 transition:width .65s cubic-bezier(.22,1,.36,1),filter .4s ease,box-shadow .4s ease;
}
#quote-float-btn .jj-quote-icon {
 display:grid; place-items:center; flex:0 0 50px; width:50px; height:50px;
 font-size:22px; line-height:1; position:relative; z-index:1;
}
#quote-float-btn .jj-quote-label {
 display:block; flex:0 0 auto; padding-right:22px; opacity:0;
 transform:perspective(300px) translateX(-14px) rotateY(-45deg); transform-origin:left center;
 transition:transform .65s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
/* A narrow highlight at the rolling edge gives the closing capsule depth. */
#quote-float-btn::after {
 content:""; position:absolute; inset:0 0 0 auto; width:14px; pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.14)); opacity:1;
 transition:opacity .45s ease;
}
#quote-float-btn.is-intro {
 animation:
  jj-quote-unroll .65s cubic-bezier(.22,1,.36,1) backwards,
  jj-quote-pulse 1s ease-in-out .65s 3;
}
#quote-float-btn.is-paused { animation-play-state:paused; }
#quote-float-btn.is-intro,
#quote-float-btn.is-touch-open,
#quote-float-btn:focus-visible { width:var(--quote-open-width); filter:brightness(1); box-shadow:0 8px 24px rgba(80,35,20,.22); }
#quote-float-btn.is-intro .jj-quote-label,
#quote-float-btn.is-touch-open .jj-quote-label,
#quote-float-btn:focus-visible .jj-quote-label { opacity:1; transform:perspective(300px) translateX(0) rotateY(0); }
#quote-float-btn.is-intro::after,
#quote-float-btn.is-touch-open::after,
#quote-float-btn:focus-visible::after { opacity:0; }
#quote-float-btn:focus-visible { outline:3px solid #dfc79f; outline-offset:4px; }
@media (hover:hover) and (pointer:fine) {
 #quote-float-btn:hover { width:var(--quote-open-width); filter:brightness(1); box-shadow:0 8px 24px rgba(80,35,20,.22); }
 #quote-float-btn:hover .jj-quote-label { opacity:1; transform:perspective(300px) translateX(0) rotateY(0); }
 #quote-float-btn:hover::after { opacity:0; }
}
@keyframes jj-quote-unroll {
 from { width:52px; filter:brightness(.8); }
 to { width:var(--quote-open-width); filter:brightness(1); }
}
@keyframes jj-quote-pulse {
 0%,100% { transform:scale(1); }
 50% { transform:scale(1.04); }
}
@media (prefers-reduced-motion:reduce) {
 #quote-float-btn,#quote-float-btn .jj-quote-label,#quote-float-btn::after { animation:none; transition:none; }
}