/* ============================================================
   Vision Studio 网页宠物「果冻小波」
   纯前端悬浮组件：右下角待机、拖拽移动、可隐藏；
   生成时接管进度播报（进度环 + 阶段台词 + 计时）。
   ============================================================ */

.webpet-root{position:fixed;z-index:13500;width:150px;height:176px;user-select:none;-webkit-user-select:none;font-family:inherit;transition:opacity .25s}
.webpet-root.is-hidden{display:none}

/* ---------- 舞台 ---------- */
.webpet-stage{position:absolute;left:0;bottom:0;width:150px;height:150px;cursor:grab;touch-action:none;filter:drop-shadow(0 16px 18px rgba(37,99,235,.24))}
.webpet-stage:active{cursor:grabbing}
.webpet-shadow{position:absolute;left:37px;bottom:-2px;width:76px;height:11px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,23,42,.20),transparent);animation:webpetShadow 3.4s ease-in-out infinite}
.webpet-svg{position:absolute;left:13px;bottom:8px;width:124px;height:124px;overflow:visible;animation:webpetFloat 4s ease-in-out infinite}

/* ---------- 进度环 ---------- */
.webpet-ring{position:absolute;left:0;top:0;width:150px;height:150px;opacity:0;transition:opacity .35s;pointer-events:none}
.webpet-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.webpet-ring-bg{stroke:rgba(96,165,250,.18)}
.webpet-ring-fg{stroke:#3b82f6;stroke-dasharray:439.823;stroke-dashoffset:439.823;transition:stroke-dashoffset .7s ease,opacity .35s}
.webpet-root.is-working .webpet-ring{opacity:1}

/* ---------- 说话气泡 ---------- */
.webpet-bubble{position:absolute;right:-10px;bottom:150px;width:max-content;max-width:238px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #bfdbfe;border-radius:14px;padding:9px 12px;box-shadow:0 16px 38px rgba(15,23,42,.16);opacity:0;transform:translateY(8px) scale(.94);transform-origin:80% 100%;transition:opacity .22s,transform .22s;pointer-events:none;z-index:3}
.webpet-bubble.show{opacity:1;transform:none}
.webpet-bubble:after{content:'';position:absolute;right:30px;bottom:-5px;width:10px;height:10px;background:#f8fbff;border-right:1px solid #bfdbfe;border-bottom:1px solid #bfdbfe;transform:rotate(45deg)}
.webpet-bubble-text{font-size:.78rem;font-weight:750;color:#1f2937;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.webpet-meta{display:none;margin-top:7px}
.webpet-root.is-working .webpet-bubble.show .webpet-meta{display:block}
.webpet-meta-bar{height:5px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.webpet-meta-bar i{display:block;height:100%;width:20%;border-radius:999px;background:linear-gradient(90deg,var(--accent,#3b82f6),#60a5fa);transition:width .7s ease}
.webpet-meta-time{margin-top:5px;font-size:.68rem;color:#64748b;font-weight:800;text-align:right}

/* ---------- 成果缩略图 ---------- */
.webpet-thumb{position:absolute;right:138px;bottom:10px;width:96px;border-radius:12px;border:1px solid #bfdbfe;box-shadow:0 16px 36px rgba(15,23,42,.22);overflow:hidden;background:#fff;opacity:0;pointer-events:none;transition:opacity .3s;z-index:2}
.webpet-thumb.show{opacity:1;animation:webpetThumbIn .45s ease}
.webpet-thumb img{display:block;width:100%;max-height:112px;object-fit:cover}

/* ---------- 隐藏 / 召回按钮 ---------- */
.webpet-close{position:absolute;top:2px;right:-2px;width:22px;height:22px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#94a3b8;font-size:13px;font-weight:800;cursor:pointer;opacity:0;transition:opacity .18s,background .18s,color .18s;line-height:1;padding:0}
.webpet-root:hover .webpet-close{opacity:1}
.webpet-close:hover{background:#fee2e2;border-color:#fecaca;color:#ef4444}
.webpet-restore{position:fixed;right:20px;bottom:20px;width:46px;height:46px;border-radius:50%;border:1px solid rgba(191,219,254,.9);background:linear-gradient(135deg,#60a5fa,#a78bfa);color:#fff;font-size:19px;cursor:pointer;box-shadow:0 14px 30px rgba(37,99,235,.3);display:none;z-index:13499;line-height:1;padding:0}
.webpet-restore.show{display:block}
.webpet-restore:hover{transform:translateY(-2px)}

/* ---------- 粒子特效层 ---------- */
.webpet-fx{position:absolute;inset:0;pointer-events:none;overflow:visible;z-index:2}
.wp-hb{position:absolute;left:50%;top:34%;font-size:var(--fs,14px);color:#ff7ea8;animation:webpetRise var(--d,1.4s) ease-out forwards;text-shadow:0 2px 6px rgba(255,126,168,.35)}
.wp-cf{position:absolute;left:50%;top:30%;width:var(--w,8px);height:var(--h,12px);border-radius:2px;background:var(--c,#60a5fa);animation:webpetRise var(--d,1.6s) ease-out forwards}

/* ---------- 形象部件显隐 ---------- */
.pet-ear{transition:transform .45s ease;transform-box:fill-box;transform-origin:50% 100%}
.pet-eyes-happy,.pet-eyes-sad,.pet-m-o,.pet-m-frown{opacity:0;transition:opacity .2s}
.pet-tear{opacity:0}
.pet-wand,.pet-spark{opacity:0}
.pet-spark{transform-box:fill-box;transform-origin:center}
.pet-body-g,.pet-face,.pet-eyes-open{transform-box:fill-box}
.pet-eyes-open{transform-origin:center;animation:webpetBlink 4.8s infinite}

/* ---------- 待机 ---------- */
@keyframes webpetFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes webpetShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.92);opacity:.75}}
@keyframes webpetBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(.985,1.028)}}
.pet-body-g{transform-origin:50% 100%;animation:webpetBreath 3.4s ease-in-out infinite}

/* ---------- 眨眼 ---------- */
@keyframes webpetBlink{0%,91.5%,100%{transform:scaleY(1)}94.5%{transform:scaleY(.08)}97.5%{transform:scaleY(1)}}

/* ---------- 工作中 ---------- */
@keyframes webpetSway{0%,100%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}}
.webpet-root.is-working .webpet-svg{animation:webpetSway 1.5s ease-in-out infinite}
@keyframes webpetWand{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(15deg)}}
.pet-wand{transform-box:fill-box;transform-origin:8% 92%}
.webpet-root.is-working .pet-wand{opacity:1;animation:webpetWand 1.1s ease-in-out infinite}
@keyframes webpetTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}50%{opacity:.95;transform:scale(1.05) rotate(40deg)}}
.webpet-root.is-working .pet-spark{animation:webpetTwinkle 1.6s ease-in-out infinite}
.pet-spark.s2{animation-delay:.5s}
.pet-spark.s3{animation-delay:1s}
.webpet-root.is-working .pet-m-smile{opacity:0}
.webpet-root.is-working .pet-m-o{opacity:1}

/* ---------- 庆祝（成功） ---------- */
@keyframes webpetJump{0%,100%{transform:translateY(0)}16%{transform:translateY(-26px)}34%{transform:translateY(0)}50%{transform:translateY(-15px)}64%{transform:translateY(0)}78%{transform:translateY(-6px)}90%{transform:translateY(0)}}
.webpet-root.do-jump .webpet-svg{animation:webpetJump 1.6s cubic-bezier(.34,.8,.4,1)}
.webpet-root.is-happy .pet-eyes-open{opacity:0}
.webpet-root.is-happy .pet-eyes-happy{opacity:1}

/* ---------- 安慰（失败） ---------- */
@keyframes webpetSadSway{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.webpet-root.is-sad .webpet-svg{animation:webpetSadSway 3s ease-in-out infinite}
.webpet-root.is-sad .pet-ear-l{transform:rotate(-15deg)}
.webpet-root.is-sad .pet-ear-r{transform:rotate(15deg)}
.webpet-root.is-sad .pet-body-g{animation:none;transform:scale(1.03,.955)}
.webpet-root.is-sad .pet-eyes-open{opacity:0}
.webpet-root.is-sad .pet-eyes-sad{opacity:1}
.webpet-root.is-sad .pet-m-smile{opacity:0}
.webpet-root.is-sad .pet-m-frown{opacity:1}
@keyframes webpetTear{0%{opacity:0;transform:translateY(0)}25%{opacity:1}100%{opacity:0;transform:translateY(11px)}}
.webpet-root.is-sad .pet-tear{animation:webpetTear 1.9s ease-in .4s infinite}

/* ---------- 被摸摸 / 互动 ---------- */
.webpet-root.is-petted .pet-eyes-open{opacity:0}
.webpet-root.is-petted .pet-eyes-happy{opacity:1}
@keyframes webpetWiggle{0%,100%{transform:rotate(0) translateY(0)}20%{transform:rotate(-6deg) translateY(-3px)}40%{transform:rotate(5deg) translateY(-2px)}60%{transform:rotate(-4deg) translateY(-2px)}80%{transform:rotate(3deg) translateY(-1px)}}
.webpet-root.do-wiggle .webpet-svg{animation:webpetWiggle .95s ease-in-out}
@keyframes webpetLook{0%,100%{transform:translateX(0)}30%{transform:translateX(3.5px)}65%{transform:translateX(-3.5px)}}
.webpet-root.do-look .pet-face{animation:webpetLook 1.4s ease-in-out}
@keyframes webpetSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.webpet-root.do-spin .webpet-svg{animation:webpetSpin .75s linear 2}

/* ---------- 粒子动画 ---------- */
@keyframes webpetRise{0%{opacity:0;transform:translate(0,0) scale(.5) rotate(0)}14%{opacity:1}100%{opacity:0;transform:translate(var(--tx,0),var(--ty,-90px)) scale(1.12) rotate(var(--r,0))}}
@keyframes webpetThumbIn{from{opacity:0;transform:translateY(10px) scale(.88)}to{opacity:1;transform:none}}

/* ---------- 互动菜单（右键 / 长按） ---------- */
.webpet-menu{position:absolute;right:-6px;bottom:148px;width:152px;background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #bfdbfe;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.18);padding:6px;display:none;z-index:5}
.webpet-menu.open{display:block;animation:webpetMenuIn .18s ease}
.webpet-menu.below{bottom:auto;top:148px}
@keyframes webpetMenuIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.webpet-menu button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;border-radius:9px;padding:8px 10px;font:inherit;font-size:.76rem;font-weight:800;color:#374151;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.webpet-menu button:hover{background:var(--accent-soft,#eff6ff);color:var(--accent,#2563eb)}
.webpet-menu .mi-ico{font-size:1.02rem;line-height:1}

/* ---------- 猜拳按钮 ---------- */
.webpet-rps{display:none;gap:6px;margin-top:8px;pointer-events:auto}
.webpet-rps.open{display:flex}
.rps-btn{flex:1;border:1px solid #bfdbfe;background:#fff;border-radius:10px;padding:7px 2px;font:inherit;font-size:.94rem;font-weight:800;color:#374151;cursor:pointer;line-height:1.15;transition:background .15s,transform .15s,border-color .15s}
.rps-btn small{display:block;font-size:.58rem;color:#64748b;font-weight:800}
.rps-btn:hover{background:var(--accent-soft,#eff6ff);border-color:#93c5fd;transform:translateY(-2px);color:var(--accent,#2563eb)}
.rps-btn:active{transform:translateY(0)}

/* ---------- 喂食掉落 ---------- */
@keyframes webpetFeed{0%{opacity:0;transform:translateY(-48px) scale(.6)}18%{opacity:1}62%{transform:translateY(8px) scale(1.06)}80%{transform:translateY(2px) scale(.94);opacity:1}100%{transform:translateY(6px) scale(.4);opacity:0}}
.wp-food{position:absolute;left:50%;top:16%;margin-left:-12px;font-size:22px;line-height:1;animation:webpetFeed 1.4s ease-in forwards;pointer-events:none;z-index:3}

/* ---------- 进食表情 ---------- */
.webpet-root.is-eating .pet-m-smile{opacity:0}
.webpet-root.is-eating .pet-m-o{opacity:1}
.webpet-root.is-eating .pet-eyes-open{opacity:0}
.webpet-root.is-eating .pet-eyes-happy{opacity:1}

/* ---------- 跳舞 ---------- */
@keyframes webpetDance{
  0%{transform:rotate(0) translateY(0)}
  10%{transform:rotate(-9deg) translateY(-6px) scale(1.02)}
  20%{transform:rotate(9deg) translateY(0)}
  30%{transform:rotate(-11deg) translateY(-12px) scale(1.04)}
  40%{transform:rotate(11deg) translateY(-2px)}
  50%{transform:rotate(-9deg) translateY(-13px) scale(1.05)}
  60%{transform:rotate(9deg) translateY(-2px)}
  70%{transform:rotate(-7deg) translateY(-9px)}
  80%{transform:rotate(7deg) translateY(0)}
  90%{transform:rotate(-3deg) translateY(-4px)}
  100%{transform:rotate(0) translateY(0)}
}
.webpet-root.do-dance .webpet-svg{animation:webpetDance 3s ease-in-out}

/* ---------- 小屏适配 ---------- */
@media(max-width:760px){
  .webpet-root{transform:scale(.82);transform-origin:100% 100%}
  .webpet-bubble{max-width:200px}
}

/* ---------- 动效偏好 ---------- */
@media(prefers-reduced-motion:reduce){
  .webpet-root,.webpet-root *{animation-duration:.01s!important;animation-iteration-count:1!important;transition-duration:.01s!important}
}