/* ============================================================
 * 纯眼晴方案 · MascotEyes 组件样式
 *
 * 设计稿落地要点:
 *  - SVG 实现:形状变形(d 路径插值) + transform
 *  - 缓动 cubic-bezier(0.2, 0, 0.2, 1),切换总时长 0.4–1.2s
 *  - 主色 #111(可用 --mxe-ink 跟随主题色),点缀 #6366F1,错误 #F43F5E
 *  - 最小 16px 保持可读;先动眼睛,再动周围元素(点缀入场延迟)
 *
 * 眼睛几何(各状态的 d 路径)由 mascot.js 计算并注入 #mxe-geom 样式,
 * 本文件只负责过渡、循环微动与点缀元素。
 * ============================================================ */

.mxe {
  --mx-ink: var(--mxe-ink, var(--text-primary, #111));
  --mx-accent: var(--mxe-accent, var(--accent, #6366F1));
  --mx-bulb: var(--mxe-bulb, #F7B500);   /* 灵光灯泡:黄色 */
  --mx-sweat: var(--mxe-sweat, #56B6F7); /* 执行中汗滴:天蓝 */
  --mx-err: var(--mxe-err, #F43F5E);
  --mx-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --mx-dur: 0.48s;      /* 状态切换时长,落在设计建议 0.4–1.2s 区间 */
  --mx-br: 1.04;        /* 呼吸幅度(待机 104%) */
  display: inline-block;
  width: var(--mxe-size, 24px);
  height: var(--mxe-size, 24px);
  vertical-align: middle;
}
.mxe-svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- 真眼(填充形,CSS d 路径插值变形) ---------- */
.mxe .mx-eye {
  fill: var(--mx-ink);
  transition: d var(--mx-dur) var(--mx-ease), opacity 0.3s var(--mx-ease);
}

/* ---------- 变换容器(呼吸 > 眨眼 > 注视 > 游移 > 眼神跟随 五层嵌套,互不干扰) ---------- */
.mxe .mx-breathe,
.mxe .mx-blink,
.mxe .mx-gaze,
.mxe .mx-drift,
.mxe .mx-look { transform-box: view-box; transform-origin: 12px 12.3px; }
.mxe .mx-gaze { transition: transform var(--mx-dur) var(--mx-ease); }

/* 眼神跟随层与双眼:短过渡让跟随/复位平滑滞后(有机感) */
.mxe .mx-look { transition: transform 0.18s ease-out; }
.mxe .mx-eye {
  transform-box: fill-box;
  transform-origin: center;
  transition: d var(--mx-dur) var(--mx-ease), opacity 0.3s var(--mx-ease), transform 0.18s ease-out;
}

/* 待机眨眼(实例 JS 按随机间隔加 .mxe-blink,仅 idle 状态触发) */
.mxe.mxe-blink .mx-blink { animation: mxe-blink 0.19s ease-in-out; }
@keyframes mxe-blink {
  0%, 100% { transform: scaleY(1); }
  45% { transform: scaleY(0.08); }
}

/* ---------- 特殊眼形(描边形,与真眼交叉淡入淡出) ---------- */
.mxe .mx-spec {
  opacity: 0;
  transform: scale(0.45);
  transform-box: view-box;
  transform-origin: 12px 12.3px;
  transition: opacity 0.26s var(--mx-ease), transform 0.4s var(--mx-ease);
}
.mxe .mx-spec path {
  fill: none; stroke: var(--mx-ink);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mxe .mx-spec-error path { stroke: var(--mx-err); }
.mxe .mx-spec-surprised circle { fill: var(--mx-ink); }
.mxe .mx-spec-surprised .mx-ring { fill: none; stroke: var(--mx-ink); stroke-width: 1.4; }

/* 特殊眼形激活时隐藏真眼 */
.mxe[data-state="processing"] .mx-eye,
.mxe[data-state="poseStrong"] .mx-eye,
.mxe[data-state="success"] .mx-eye,
.mxe[data-state="error"] .mx-eye,
.mxe[data-state="poseSurprised"] .mx-eye { opacity: 0; }

.mxe[data-state="processing"] .mx-spec-strong,
.mxe[data-state="poseStrong"] .mx-spec-strong,
.mxe[data-state="success"] .mx-spec-happy,
.mxe[data-state="error"] .mx-spec-error,
.mxe[data-state="poseSurprised"] .mx-spec-surprised { opacity: 1; transform: scale(1); }

/* ---------- 点缀元素:默认隐藏;入场延迟 ~0.1s(先动眼睛,再动周围元素) ---------- */
.mxe .mx-acc {
  opacity: 0;
  transform: translateY(1.4px) scale(0.8);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.22s var(--mx-ease), transform 0.34s var(--mx-ease);
}
.mxe .mx-acc-i { transform-box: fill-box; transform-origin: center; }

/* 点缀配色 */
.mxe .mx-acc-sparkle path,
.mxe .mx-acc-sparkles path,
.mxe .mx-acc-dots circle { fill: var(--mx-accent); }
.mxe .mx-acc-spin circle {
  fill: none; stroke: var(--mx-accent); stroke-width: 0.95; stroke-linecap: round;
  stroke-dasharray: 7.4 3.3;
}
.mxe .mx-acc-bulb .mx-bulb-fill { fill: var(--mx-bulb); }
.mxe .mx-acc-bulb .mx-bulb-glow { fill: var(--mx-bulb); opacity: 0.16; }
.mxe .mx-acc-bulb .mx-rays path {
  fill: none; stroke: var(--mx-bulb); stroke-width: 0.75; stroke-linecap: round;
}
.mxe .mx-acc-wrench path {
  fill: none; stroke: var(--mx-accent);
  stroke-width: 5.5; stroke-linecap: round; stroke-linejoin: round;
}
.mxe .mx-acc-motion path {
  fill: none; stroke: var(--mx-accent); stroke-width: 1.3; stroke-linecap: round;
}
.mxe .mx-acc-sweat path { fill: var(--mx-sweat); }
.mxe .mx-acc-exclaim path {
  fill: none; stroke: var(--mx-err); stroke-width: 1.1; stroke-linecap: round;
}
.mxe .mx-acc-exclaim circle { fill: var(--mx-err); }

/* 冥想光晕(聚焦):垫在眼睛下层的径向渐变圆,跟随点缀色 */
.mxe .mx-halo {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 12px 12.3px;
  transition: opacity 0.4s var(--mx-ease);
}
.mxe .mx-halo-a { stop-color: var(--mx-accent); stop-opacity: 0.4; }
.mxe .mx-halo-b { stop-color: var(--mx-accent); stop-opacity: 0.13; }
.mxe .mx-halo-c { stop-color: var(--mx-accent); stop-opacity: 0; }

/* ---------- 各状态:注视偏移 / 入场动效 ---------- */
/* 出发执行:3D 空间向右 —— 整体水平右移(双眼近大远小由几何承担) */
.mxe[data-state="toolCall"] .mx-gaze { transform: translate(1.2px, 0); }
/* 放松:双眼同步微斜 */
.mxe[data-state="poseRelaxed"] .mx-gaze { transform: rotate(-13deg); }
/* 完成:入场小跳 */
.mxe[data-state="success"] .mx-gaze { animation: mxe-hop 0.5s var(--mx-ease); }
@keyframes mxe-hop {
  0% { transform: translateY(0); }
  35% { transform: translateY(-1.1px); }
  100% { transform: translateY(0); }
}
/* 出错:入场轻颤 */
.mxe[data-state="error"] .mx-gaze { animation: mxe-shake 0.34s var(--mx-ease); }
@keyframes mxe-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-0.45px); }
  55% { transform: translateX(0.4px); }
  80% { transform: translateX(-0.18px); }
}

/* ---------- 循环微动(克制节奏) ---------- */
/* 待机呼吸 100%→104%→100% · 2.4s */
.mxe[data-state="idle"] .mx-breathe { animation: mxe-breathe 2.4s ease-in-out infinite; }
/* 专注呼吸 100%→105%→100% · 1.6s */
.mxe[data-state="focus"] .mx-breathe { animation: mxe-breathe 1.6s ease-in-out infinite; --mx-br: 1.05; }
/* 工具准备:极轻呼吸 */
.mxe[data-state="toolReady"] .mx-breathe { animation: mxe-breathe 2.4s ease-in-out infinite; --mx-br: 1.03; }
@keyframes mxe-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(var(--mx-br)); }
}

/* 思考:微眯(几何承担) + 右眼右上角加载圈 */
.mxe[data-state="thinking"] .mx-acc-spin { opacity: 1; transform: none; transition-delay: 0.12s; }
.mxe[data-state="thinking"] .mx-acc-spin .mx-acc-i { animation: mxe-spin 0.9s linear infinite; }
@keyframes mxe-spin { to { transform: rotate(360deg); } }

/* 执行中:轻微发力脉冲 */
.mxe[data-state="processing"] .mx-breathe { animation: mxe-breathe 0.9s ease-in-out infinite; --mx-br: 1.03; }

/* ---------- 点缀:各状态显隐与循环 ---------- */
/* 聚焦 · 冥想光晕(眼睛下层,1.6s 与专注呼吸同步) */
.mxe[data-state="focus"] .mx-halo { opacity: 1; animation: mxe-halo 1.6s ease-in-out infinite; }
@keyframes mxe-halo {
  0%, 100% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
}

/* 灵光一现 · 灯泡(黄色,辉光同步脉冲) */
.mxe[data-state="aha"] .mx-acc-bulb { opacity: 1; transform: none; transition-delay: 0.08s; }
.mxe[data-state="aha"] .mx-acc-bulb .mx-rays { animation: mxe-rays 2s ease-in-out infinite; }
.mxe[data-state="aha"] .mx-acc-bulb .mx-bulb-glow { animation: mxe-glow 2s ease-in-out infinite; }
@keyframes mxe-rays { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes mxe-glow { 0%, 100% { opacity: 0.12; } 50% { opacity: 0.3; } }

/* 睁眼决定 · 四角星 */
.mxe[data-state="decision"] .mx-acc-sparkle { opacity: 1; transform: none; transition-delay: 0.1s; }
.mxe[data-state="decision"] .mx-acc-sparkle .mx-acc-i { animation: mxe-twinkle 1.8s ease-in-out infinite; }
@keyframes mxe-twinkle {
  0%, 100% { transform: scale(0.85) rotate(-6deg); }
  50% { transform: scale(1.08) rotate(6deg); }
}

/* 工具准备 / 出发执行 · 扳手 */
.mxe[data-state="toolReady"] .mx-acc-wrench,
.mxe[data-state="toolCall"] .mx-acc-wrench { opacity: 1; transform: none; transition-delay: 0.1s; }
.mxe[data-state="toolReady"] .mx-acc-wrench .mx-acc-i { animation: mxe-wiggle 2.2s ease-in-out infinite; }
@keyframes mxe-wiggle {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
.mxe[data-state="toolCall"] .mx-acc-wrench { transform: rotate(-14deg); }

/* 出发执行 · 速度线(左后拖尾,向后滑动反衬向右冲刺) */
.mxe[data-state="toolCall"] .mx-acc-motion { opacity: 1; transform: none; transition-delay: 0.16s; }
.mxe[data-state="toolCall"] .mx-acc-motion path { animation: mxe-streak 0.9s ease-in-out infinite; }
.mxe[data-state="toolCall"] .mx-acc-motion path:nth-child(2) { animation-delay: 0.18s; }
.mxe[data-state="toolCall"] .mx-acc-motion path:nth-child(3) { animation-delay: 0.36s; }
@keyframes mxe-streak {
  0%, 100% { opacity: 0.3; transform: translateX(0.5px); }
  50% { opacity: 0.95; transform: translateX(-0.6px); }
}

/* 执行中 · 滋汗:从眼角滋出上扬,过顶点后抛物线落下,双滴交错 */
.mxe[data-state="processing"] .mx-acc-sweat { opacity: 1; transform: none; transition-delay: 0.16s; }
.mxe .mx-acc-sweat path { opacity: 0; transform-box: fill-box; transform-origin: center; }
.mxe[data-state="processing"] .mx-sweat-1 { animation: mxe-sweat 1.3s linear infinite; }
.mxe[data-state="processing"] .mx-sweat-2 { animation: mxe-sweat 1.3s linear 0.65s infinite; }
@keyframes mxe-sweat {
  0%   { opacity: 0; transform: translate(0, 0.3px) scale(0.45); }
  12%  { opacity: 1; transform: translate(0.4px, -0.6px) scale(0.95); }
  25%  { opacity: 1; transform: translate(0.9px, -1.0px) scale(1); }   /* 顶点 */
  45%  { opacity: 1; transform: translate(1.4px, -0.5px); }
  65%  { opacity: 1; transform: translate(1.8px, 0.6px); }
  82%  { opacity: 1; transform: translate(2.1px, 2.0px); }
  100% { opacity: 0; transform: translate(2.3px, 3.4px) scale(0.9); }
}

/* 执行中 · 省略点 */
.mxe[data-state="processing"] .mx-acc-dots { opacity: 1; transform: none; transition-delay: 0.14s; }
.mxe[data-state="processing"] .mx-acc-dots circle { animation: mxe-dotseq 1.05s ease-in-out infinite; }
.mxe[data-state="processing"] .mx-acc-dots circle:nth-child(2) { animation-delay: 0.15s; }
.mxe[data-state="processing"] .mx-acc-dots circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes mxe-dotseq { 0%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* 完成 · 双星闪 */
.mxe[data-state="success"] .mx-acc-sparkles { opacity: 1; transform: none; transition-delay: 0.18s; }
.mxe[data-state="success"] .mx-acc-sparkles path { animation: mxe-twinkle 1.7s ease-in-out infinite; }
.mxe[data-state="success"] .mx-acc-sparkles path:nth-child(2) { animation-delay: 0.4s; }

/* 出错 · 红色叹号 */
.mxe[data-state="error"] .mx-acc-exclaim { opacity: 1; transform: none; transition-delay: 0.2s; }

/* ---------- 循环动画阶梯化(260822 CPU 治理) ----------
   动画容器是 SVG 内部 <g>——Chromium 不会把 SVG 子元素的 CSS 动画交给合成器,
   平滑缓动下每一帧都走主线程 style→paint→矢量重光栅;144Hz 显示器实测空载
   常烧 ~55% 单核(idle 呼吸)~75%(processing 滋汗/省略点),禁用动画后 ~0。
   steps() 阶梯化后仅在台阶变化时重绘,步数按周期取 ~10-13fps,微动观感基本不变。
   will-change 对 SVG 子元素无效(实测不降),勿走该方向;一次性动画(眨眼/hop/shake)保持平滑 */
.mxe[data-state] .mx-breathe { animation-timing-function: steps(24); }
.mxe[data-state="processing"] .mx-breathe { animation-timing-function: steps(12); }
.mxe[data-state] .mx-halo { animation-timing-function: steps(16); }
.mxe[data-state] .mx-acc-spin .mx-acc-i { animation-timing-function: steps(12); }
.mxe[data-state] .mx-acc-bulb .mx-rays,
.mxe[data-state] .mx-acc-bulb .mx-bulb-glow { animation-timing-function: steps(20); }
.mxe[data-state] .mx-acc-sparkle .mx-acc-i,
.mxe[data-state] .mx-acc-sparkles path { animation-timing-function: steps(18); }
.mxe[data-state] .mx-acc-wrench .mx-acc-i { animation-timing-function: steps(22); }
.mxe[data-state] .mx-acc-motion path { animation-timing-function: steps(12); }
.mxe[data-state] .mx-sweat-1,
.mxe[data-state] .mx-sweat-2 { animation-timing-function: steps(10); }
.mxe[data-state] .mx-acc-dots circle { animation-timing-function: steps(9); }

/* ---------- 工具类 ---------- */
/* 立即切换(无过渡),由 setState(state, {immediate:true}) 使用 */
.mxe-cut *, .mxe-cut *::before, .mxe-cut *::after {
  transition: none !important;
  animation: none !important;
}
/* 页面级暂停全部循环动画(演示页检查用) */
.mxe-paused .mxe * { animation-play-state: paused !important; }

/* 全局开关:设置「界面形象」关闭时隐藏全部实例(body.mascot-off) */
body.mascot-off .mxe { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .mxe * { animation: none !important; }
}