/* public/ui/orb-states.css —— 语音光球【四态色彩+光晕】(UI 步5·小查执行单 2026-06-24·小六)
   纯样式·独立模块(落点宪法:新功能新建文件·别堆 index.html/app.js)。
   只【消费】orb.js 加的 class(idle=无 class / listening / thinking / speaking)+ orb.js 每帧写的 --lvl(VAD 音量 0..1)。
   绝不碰状态机/app.js 业务逻辑。作用对象:首屏大球 #welcome .wmic + header 常驻小球 #avatar(同步)。
   依赖:index.html :root 的 --orb/--orb-2/--orb-listen/think/speak(+ -glow) token;keyframes orbbreath/orbglow 在 index.html(base 用),本文件加 orbpulse/orbsweep。
   四态一眼拉开:idle 冷静低饱和 → listening 亮青绿+音量胀缩 → thinking 暖琥珀+流转环 → speaking 主绿+脉冲。 */

/* —— 平滑过渡(切态不硬跳) —— */
#welcome .wmic { transition: background .35s ease, box-shadow .35s ease, filter .35s ease, transform .2s ease; }
#avatar       { transition: border-color .3s ease, box-shadow .3s ease; }

/* —— 待命 idle(无 state class):冷静低饱和·一进活跃态就明显"亮起来"(拉开对比) —— */
#welcome .wmic:not(.listening):not(.thinking):not(.speaking) { filter: saturate(.82) brightness(.95); }

/* —— 在听 listening:活跃青绿 + ③光晕半径/亮度随 VAD 音量 --lvl 涨 + 体量随音量胀缩 —— */
#welcome .wmic.listening {
  animation: none; filter: saturate(1.18) brightness(1.06);
  transform: scale(calc(1 + var(--lvl,0) * 0.22));
  transition: transform .07s ease-out, filter .2s ease, box-shadow .12s ease-out;
  background: radial-gradient(circle at 37% 31%, #5cf2d3, var(--orb-listen) 50%, var(--orb-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -10px 30px rgba(0,0,0,.22),
    0 12px calc(40px + var(--lvl,0) * 64px) -4px var(--orb-listen-glow),
    0 0 calc(58px + var(--lvl,0) * 96px) -8px var(--orb-listen-glow);   /* 光晕半径随音量实时涨 */
}

/* —— 在想 thinking:暖琥珀(替转圈)+ 绕球流转环(表示"在干活") —— */
#welcome .wmic.thinking {
  animation: orbbreath 2.6s ease-in-out infinite; filter: saturate(1.06);
  background: radial-gradient(circle at 37% 31%, #ffd9a0, var(--orb-think) 52%, #b06a1e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -10px 30px rgba(0,0,0,.22),
    0 10px 48px -6px var(--orb-think-glow), 0 0 72px -12px var(--orb-think-glow);
}
#welcome .wmic.thinking::after {   /* 流转环=思考/在干活(prefers-reduced-motion 时全局规则会停它) */
  content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, var(--orb-think-glow) 55deg, transparent 130deg);
  animation: orbsweep 1.5s linear infinite;
}

/* —— 在说 speaking:主绿 + 节奏脉冲(输出态律动) —— */
#welcome .wmic.speaking {
  animation: orbpulse 1.0s ease-in-out infinite; filter: saturate(1.12) brightness(1.05);
  background: radial-gradient(circle at 37% 31%, var(--orb-2), var(--orb) 50%, var(--orb-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -10px 30px rgba(0,0,0,.22),
    0 14px 64px -4px var(--orb-speak-glow), 0 0 100px -6px var(--orb-speak-glow);
}

/* —— header 常驻小球 #avatar:同四态色(聊天时也显在途态);idle 纯色圆不发光。③ 听态发光随 --lvl 强弱 —— */
#avatar.listening { border-color: var(--orb-listen); box-shadow: 0 0 calc(5px + var(--lvl,0) * 16px) var(--orb-listen-glow); transition: box-shadow .08s ease-out; }
#avatar.thinking  { border-color: var(--orb-think);  box-shadow: 0 0 9px var(--orb-think-glow); }
#avatar.speaking  { border-color: var(--orb);        box-shadow: 0 0 11px var(--orb-speak-glow); }

@keyframes orbpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.09); } }   /* 在说:大幅脉冲 */
@keyframes orbsweep { to { transform: rotate(360deg); } }                                   /* 在想:流转环 */