/* ============================================================
   🍁 小枫（吉祥物）通用样式 —— 首页、登录页、编辑器都能挂
   对标 UUMit 登录页/首页的做法：那边是「111 帧 / 2226KB 动态 WebP + 一圈 3 秒脉冲光晕（pulse-glow）」；
   我们用 SVG + CSS 实现同样的观感，体积只有几 KB。
   布局类（放在哪、占多大）由各页面自己写，这里只管"小枫长什么样、怎么动"。
   ============================================================ */
.flmc-mascot {
  position: relative;
  --mx-look-x: 0px;
  --mx-look-y: 0px;
  animation: mx-float 4.2s ease-in-out infinite;
}
/* 外圈脉冲光晕（对标它的 pulse-glow 3000ms） */
.flmc-mascot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 128%;
  height: 128%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 99, 43, 0.42) 0%, rgba(232, 99, 43, 0.16) 45%, rgba(232, 99, 43, 0) 72%);
  animation: mx-pulse-glow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.flmc-mascot .mx-svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 26px rgba(232, 99, 43, 0.28)); }
.mx-petal { fill: #e8632b; stroke: #ffb340; stroke-width: 1.2; }
.mx-p0, .mx-p4 { fill: #cf4f1e; }
.mx-p1, .mx-p3 { fill: #e8632b; }
.mx-p2 { fill: #f0803c; }
.mx-stem { stroke: #a83f16; stroke-width: 4; stroke-linecap: round; fill: none; }
.mx-leaf { transform-origin: 100px 152px; animation: mx-breathe 3.4s ease-in-out infinite; }
.mx-eye ellipse { fill: #2a1408; }
.mx-glint { fill: #fff; opacity: 0.9; }
.mx-eye { transform-origin: center; transform-box: fill-box; animation: mx-blink 4.6s infinite; }
.mx-eye-r { animation-delay: 0.06s; }
.mx-face { transform: translate(var(--mx-look-x), var(--mx-look-y)); transition: transform 0.12s linear; }
.mx-mouth { stroke: #2a1408; stroke-width: 3; fill: none; stroke-linecap: round; }
.mx-cheek { fill: #ff8f6b; opacity: 0.55; }
.mx-arm { fill: #f0803c; stroke: #d0601f; stroke-width: 1; }
.mx-arm-l { transform: rotate(-6deg); transform-origin: 52px 132px; }
.mx-arm-r { transform: rotate(6deg); transform-origin: 148px 132px; }
.mx-dots, .mx-spark { opacity: 0; transition: opacity 0.25s ease; }
.mx-dots circle { fill: #9a9aa8; }
.mx-spark path { fill: #ffd479; }

/* 状态：打招呼 / 在听你说 / 思考 / 欢呼 */
.is-hello .mx-arm-r { animation: mx-wave 0.6s ease-in-out infinite; }
.is-hello .mx-leaf { animation: mx-breathe 1.8s ease-in-out infinite; }
.is-typing .mx-leaf { animation: mx-breathe 2.2s ease-in-out infinite; }
.is-typing .mx-eye { animation: mx-blink 2.4s infinite; }
.is-thinking .mx-face { transform: translate(var(--mx-look-x), calc(var(--mx-look-y) - 4px)); }
.is-thinking .mx-dots { opacity: 1; }
.is-thinking .mx-dots circle { animation: mx-dot 1.1s ease-in-out infinite; }
.is-thinking .mx-dots circle:nth-child(2) { animation-delay: 0.16s; }
.is-thinking .mx-dots circle:nth-child(3) { animation-delay: 0.32s; }
.is-cheer .mx-leaf { animation: mx-cheer 0.7s ease-in-out 2; }
.is-cheer .mx-spark { opacity: 1; }
.is-cheer .mx-spark path { animation: mx-spark 0.8s ease-in-out infinite; }
.is-cheer .mx-arm-l, .is-cheer .mx-arm-r { animation: mx-raise 0.7s ease-in-out 2; }

/* 台词气泡：默认（没给独立槽位时）浮在头顶；给了 sayHost 的页面会覆盖成"文档流里" */
.mx-bubble {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translate(-50%, 6px) scale(0.96);
  margin-bottom: 4px;
  max-width: 260px;
  padding: 9px 13px;
  border-radius: 14px;
  background: #23232a;
  border: 1px solid #3b3b45;
  color: #e8e8ee;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  white-space: pre-wrap;
  z-index: 3;
}
.mx-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: #23232a;
  border-right: 1px solid #3b3b45;
  border-bottom: 1px solid #3b3b45;
  transform: rotate(45deg);
}
.mx-bubble.open { opacity: 1; transform: translate(-50%, 0) scale(1); }

@keyframes mx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes mx-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }
@keyframes mx-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes mx-wave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(-46deg); } }
@keyframes mx-raise { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-70deg); } }
@keyframes mx-cheer { 0%, 100% { transform: translateY(0) scale(1); } 35% { transform: translateY(-16px) scale(1.04, 0.96); } 70% { transform: translateY(0) scale(0.98, 1.02); } }
@keyframes mx-dot { 0%, 100% { opacity: 0.35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
@keyframes mx-spark { 0%, 100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.15); } }
/* 脉冲光晕：跟 UUMit 的 pulse-glow 一样 3 秒一轮 */
@keyframes mx-pulse-glow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .flmc-mascot, .flmc-mascot::before, .mx-leaf, .mx-eye, .mx-arm-l, .mx-arm-r, .mx-dots circle, .mx-spark path { animation: none !important; }
}