/* ========== 梵林精灵向导（fl- 前缀，组件作用域） ========== */
.fl-root{ position:fixed; right:18px; bottom:calc(86px + env(safe-area-inset-bottom,0px)); z-index:80; }
.fl-sprite{ position:relative; border:none; background:none; cursor:pointer; padding:0; display:block;
  filter:drop-shadow(0 10px 24px rgba(0,180,255,.35)); transition:transform .2s; }
.fl-sprite:hover{ transform:scale(1.07); }
.fl-sprite svg{ display:block; }
.fl-bob{ animation:fl-bob 3.2s ease-in-out infinite; transform-origin:48px 50px; }
@keyframes fl-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-6px) } }
.fl-eyes{ animation:fl-blink 4.2s infinite; }
@keyframes fl-blink{ 0%,92%,100%{ transform:scaleY(1) } 95%{ transform:scaleY(.08) } }
.fl-leaf{ animation:fl-sway 3.2s ease-in-out infinite; transform-origin:52px 14px; }
@keyframes fl-sway{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(9deg) } }
.fl-spark{ animation:fl-tw 2.2s ease-in-out infinite; fill:#FFD65A; }
.fl-spark2{ animation:fl-tw 2.2s ease-in-out .8s infinite; fill:#7CE7FF; }
@keyframes fl-tw{ 0%,100%{ opacity:.25 } 50%{ opacity:1 } }
.fl-shadow{ animation:fl-sh 3.2s ease-in-out infinite; }
@keyframes fl-sh{ 0%,100%{ opacity:.35; transform:scaleX(1) } 50%{ opacity:.18; transform:scaleX(.82) } }

.fl-tip{ position:absolute; right:64px; top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; font-size:12px; color:#EAF6FF; background:rgba(7,20,46,.85); border:1px solid rgba(0,194,255,.35);
  padding:6px 12px; border-radius:999px; opacity:0; pointer-events:none; transition:.4s; backdrop-filter:blur(6px); }
.fl-tip.show{ opacity:1; transform:translateY(-50%) translateX(0); }

/* 对话面板 */
.fl-panel{ position:fixed; right:16px; bottom:calc(150px + env(safe-area-inset-bottom,0px)); z-index:81;
  width:min(360px, calc(100vw - 32px)); height:min(480px, 62vh);
  background:#0A1830; border:1px solid rgba(0,194,255,.3); border-radius:20px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.7); display:flex; flex-direction:column;
  opacity:0; pointer-events:none; transform:translateY(14px) scale(.97); transition:.28s; overflow:hidden; }
.fl-panel.open{ opacity:1; pointer-events:auto; transform:none; }
.fl-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(120deg, rgba(0,194,255,.12), rgba(106,90,224,.10)); }
.fl-ava{ width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#00C2FF,#6A5AE0);
  display:flex; align-items:center; justify-content:center; font-size:16px; }
.fl-who{ flex:1; line-height:1.25; }
.fl-who b{ color:#fff; font-size:14px; display:block; }
.fl-who i{ color:rgba(234,246,255,.55); font-size:11px; font-style:normal; }
.fl-close{ border:none; background:none; color:rgba(234,246,255,.6); font-size:16px; cursor:pointer; padding:4px; }
.fl-msgs{ flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.fl-m{ max-width:82%; padding:9px 12px; border-radius:14px; font-size:13.5px; line-height:1.6; }
.fl-m-bot{ align-self:flex-start; background:rgba(255,255,255,.06); color:#EAF6FF; border:1px solid rgba(255,255,255,.07); }
.fl-m-me{ align-self:flex-end; background:linear-gradient(135deg,#00C2FF,#0091FF); color:#04121F; font-weight:500; }
.fl-links{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.fl-links a{ font-size:12px; color:#7CE7FF; border:1px solid rgba(0,194,255,.4); border-radius:999px;
  padding:3px 10px; text-decoration:none; transition:.2s; }
.fl-links a:hover{ background:rgba(0,194,255,.12); }
.fl-typing span{ display:inline-block; width:6px; height:6px; border-radius:50%; background:rgba(234,246,255,.6);
  margin-right:4px; animation:fl-typ 1.1s infinite; }
.fl-typing span:nth-child(2){ animation-delay:.18s } .fl-typing span:nth-child(3){ animation-delay:.36s }
@keyframes fl-typ{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(-4px); opacity:1 } }
.fl-chips{ display:flex; gap:6px; padding:8px 12px 0; flex-wrap:wrap; }
.fl-chips button{ font-size:11.5px; color:rgba(234,246,255,.75); background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1); border-radius:999px; padding:4px 10px; cursor:pointer; transition:.2s; }
.fl-chips button:hover{ color:#fff; border-color:rgba(0,194,255,.5); }
.fl-input{ display:flex; gap:8px; padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px)); }
.fl-input input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:12px; padding:10px 12px; color:#fff; font-size:13.5px; outline:none; }
.fl-input input:focus{ border-color:rgba(0,194,255,.55); }
.fl-input button{ width:42px; border:none; border-radius:12px; background:linear-gradient(135deg,#00C2FF,#0091FF);
  color:#04121F; font-size:16px; cursor:pointer; }
@media (max-width:560px){
  .fl-root{ right:14px; bottom:calc(80px + env(safe-area-inset-bottom,0px)); }
  .fl-sprite svg{ width:50px; height:50px; }
  .fl-panel{ right:10px; width:calc(100vw - 20px); height:min(56vh, 440px); }
  .fl-tip{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .fl-bob,.fl-eyes,.fl-leaf,.fl-spark,.fl-spark2,.fl-shadow,.fl-typing span{ animation:none; }
}

/* ===== VRHANDS: 手臂挥手 + 腿脚摆动（transform-box 使 SVG 局部动画生效） ===== */
.fl-arm-r{ transform-box:fill-box; transform-origin:50% 0%; animation:fl-wave 2.6s ease-in-out infinite; }
.fl-arm-l{ transform-box:fill-box; transform-origin:50% 0%; animation:fl-wave2 2.6s ease-in-out infinite .9s; }
@keyframes fl-wave{ 0%,100%{ transform:rotate(0deg) } 38%{ transform:rotate(16deg) } 50%{ transform:rotate(-8deg) } 62%{ transform:rotate(12deg) } }
@keyframes fl-wave2{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(6deg) } }
.fl-leg-l{ transform-box:fill-box; transform-origin:50% 0%; animation:fl-step 3.2s ease-in-out infinite; }
.fl-leg-r{ transform-box:fill-box; transform-origin:50% 0%; animation:fl-step 3.2s ease-in-out infinite .5s; }
@keyframes fl-step{ 0%,100%{ transform:rotate(0deg) } 50%{ transform:rotate(5deg) } }
.fl-bob{ animation:fl-bob 3.2s ease-in-out infinite; transform-origin:48px 42px; }
@keyframes fl-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-5px) } }
.fl-eyes{ animation:fl-blink 4.2s infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fl-blink{ 0%,92%,100%{ transform:scaleY(1) } 95%{ transform:scaleY(.08) } }
@media (prefers-reduced-motion:reduce){ .fl-arm-l,.fl-arm-r,.fl-leg-l,.fl-leg-r,.fl-bob,.fl-eyes{ animation:none } }

/* ===== QQPET: QQ 萌宠模式（散步 + 跳舞） ===== */
.fl-root{ transition:right 2.8s linear, bottom 2.8s linear; }
.fl-sprite svg{ transition:transform .35s; }
.fl-sprite.flip svg{ transform:scaleX(-1); }
.fl-sprite.dance .fl-bob{ animation:fl-dzbob .48s ease-in-out infinite; }
@keyframes fl-dzbob{ 0%,100%{ transform:translateY(0) rotate(-7deg) } 25%{ transform:translateY(-11px) rotate(0deg) } 50%{ transform:translateY(0) rotate(7deg) } 75%{ transform:translateY(-11px) rotate(0deg) } }
.fl-sprite.dance .fl-arm-l{ animation:fl-wave .34s ease-in-out infinite; }
.fl-sprite.dance .fl-arm-r{ animation:fl-wave .34s ease-in-out infinite reverse; }
.fl-sprite.dance .fl-leg-l{ animation:fl-step .34s ease-in-out infinite; }
.fl-sprite.dance .fl-leg-r{ animation:fl-step .34s ease-in-out infinite reverse; }
.fl-sprite.dance .fl-leaf{ animation:fl-sway .48s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ .fl-sprite.flip svg{ transform:none } .fl-root{ transition:none } }