/* GrowFleet Flo widget - shared mascot button + video thought-bubble popup.
   Drop-in: include this CSS + flo-widget.js, then put a [data-flo] button anywhere.
   Uses site design tokens (amber, panel-solid, line, text, muted). */

/* Mascot button */
.gft-flo{position:relative;margin-left:2px;width:60px;height:60px;flex:none;border:0;background:transparent;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}
.gft-flo-img{width:56px;height:56px;object-fit:contain;display:block;filter:drop-shadow(0 6px 12px rgba(20,20,40,.22));transform-origin:60% 75%}
.gft-flo-ring{position:absolute;inset:4px;border-radius:999px;pointer-events:none}
.gft-flo-hint{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;background:var(--text);color:var(--panel-solid);font-size:11px;font-weight:700;letter-spacing:.01em;padding:4px 9px;border-radius:999px;opacity:0;transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.gft-flo-hint::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--text)}
.gft-flo:hover .gft-flo-hint,.gft-flo:focus-visible .gft-flo-hint{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:no-preference){
  .gft-flo-img{animation:gftflobob 3.2s ease-in-out infinite}
  .gft-flo:hover .gft-flo-img,.gft-flo:focus-visible .gft-flo-img{animation:gftflowave .7s ease-in-out infinite}
  .gft-flo-ring{animation:gftfloring 2.6s ease-out infinite}
}
@keyframes gftflobob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes gftflowave{0%,100%{transform:translateY(-2px) rotate(-7deg)}50%{transform:translateY(-5px) rotate(9deg)}}
@keyframes gftfloring{0%{box-shadow:0 0 0 0 rgba(245,166,35,.5)}70%{box-shadow:0 0 0 15px rgba(245,166,35,0)}100%{box-shadow:0 0 0 0 rgba(245,166,35,0)}}

/* Video thought-bubble popup */
.gft-flopop{position:fixed;inset:0;z-index:1000;display:flex;align-items:flex-end;justify-content:flex-end;padding:24px 34px 64px}
.gft-flopop[hidden]{display:none}
.gft-flopop-dim{position:absolute;inset:0;background:rgba(10,12,20,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.gft-flopop-bubble{position:relative;z-index:1;width:min(92vw,412px);background:linear-gradient(90deg,var(--amber-deep),var(--amber-bright)) left top/100% 6px no-repeat,var(--panel-solid);background-clip:padding-box;border:1px solid var(--line);border-radius:30px;padding:20px 14px 16px;box-shadow:0 30px 80px -18px rgba(10,12,30,.62),0 0 0 4px rgba(245,166,35,.16);color:var(--text)}
.gft-flopop-head{display:flex;align-items:center;gap:11px;padding:6px 42px 12px 4px}
.gft-flopop-ava{width:44px;height:44px;border-radius:999px;flex:none;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 40% 35%,#fff6e2,var(--amber-soft));box-shadow:0 4px 12px -5px rgba(245,166,35,.7)}
.gft-flopop-ava img{width:38px;height:38px;object-fit:contain}
.gft-flopop-htx{display:flex;flex-direction:column;line-height:1.15}
.gft-flopop-htx b{font-size:15px;font-weight:700;color:var(--text)}
.gft-flopop-htx em{font-style:normal;font-size:11.5px;color:var(--muted)}
.gft-flopop-x{position:absolute;top:12px;right:12px;z-index:3;width:34px;height:34px;border-radius:999px;border:0;cursor:pointer;background:rgba(10,12,20,.5);color:#fff;display:flex;align-items:center;justify-content:center}
.gft-flopop-x:hover{background:rgba(10,12,20,.72)}
.gft-flopop-x svg{width:18px;height:18px}
.gft-flopop-vidwrap{position:relative;border-radius:18px;overflow:hidden;background:#fff;aspect-ratio:1/1}
.gft-flopop-vid{width:100%;height:100%;display:block;object-fit:cover;background:#fff}
.gft-flopop-cap{margin:12px 6px 2px;font-size:13px;line-height:1.5;color:var(--muted);text-align:center}
.gft-flopop-cap b{color:var(--text)}
.gft-flopop-trail{position:absolute;right:32px;bottom:-8px;z-index:2;pointer-events:none}
.gft-flopop-trail i{position:absolute;display:block;border-radius:999px;background:var(--panel-solid);border:1px solid var(--line);box-shadow:0 8px 18px -9px rgba(10,12,30,.55)}
.gft-flopop-trail i:nth-child(1){width:22px;height:22px;right:0;top:0}
.gft-flopop-trail i:nth-child(2){width:14px;height:14px;right:-15px;top:20px}
.gft-flopop-trail i:nth-child(3){width:9px;height:9px;right:-30px;top:36px;background:var(--amber-deep);border-color:var(--amber-deep)}
@media (prefers-reduced-motion:no-preference){
  .gft-flopop-dim{animation:gftfade2 .2s ease both}
  .gft-flopop-bubble{animation:gftpop .32s cubic-bezier(.2,.9,.3,1.25) both;transform-origin:bottom right}
  .gft-flopop-trail i{animation:gftdot .28s cubic-bezier(.2,.9,.3,1.5) both}
  .gft-flopop-trail i:nth-child(1){animation-delay:.14s}
  .gft-flopop-trail i:nth-child(2){animation-delay:.22s}
  .gft-flopop-trail i:nth-child(3){animation-delay:.29s}
}
@keyframes gftfade2{from{opacity:0}to{opacity:1}}
@keyframes gftpop{from{opacity:0;transform:scale(.86) translateY(12px)}to{opacity:1;transform:none}}
@keyframes gftdot{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
@media (max-width:560px){
  .gft-flopop{justify-content:center;padding:18px 16px 54px}
  .gft-flopop-bubble{width:min(94vw,412px)}
  .gft-flopop-trail{right:26px}
}
.gft-flo:focus-visible,.gft-flopop :focus-visible{outline:3px solid rgba(242,151,24,.55);outline-offset:2px;border-radius:8px}