/* ============================================================================
   wb-ui · orbs（agent 活动指示光球，5 族 × 5 变体）
   1:1 移植自 aicss.dev Orb.module.css（fetched 2026-08-13）。
   几何在 28px 台面上手调、--orb-k 等比缩放；per-dot 相位/坐标由 JS 注入
   （orbs.js 移植上游 Orb.tsx 的几何函数）。keyframe 内的分段缓动按上游
   保留字面量（keyframe 里的 timing-function 不解析 var()）。
   族：Lattice(S) 3×3 点阵 / Lens(B) 景深圆 / Ring(C) 八点环 /
   Globe(G) 球面点 / Morph(M) 形变环。仅入库不接入（无对应 run event）。
   data-state：running / ok（动效暂停）/ error（染 danger）/ empty。
   零裸色：ink/surface/透明度常量全走 token。
   ========================================================================== */

.wbui-orb {
  --orb-ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --orb-ease-out: cubic-bezier(0.17, 1, 0.32, 1);
  --orb-ease-in-out: cubic-bezier(0.66, 0, 0.34, 1);

  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  color: var(--wbui-ink);
}
.wbui-orb[data-state="empty"] { display: none; }
.wbui-orb[data-state="ok"] * { animation-play-state: paused !important; }
.wbui-orb[data-state="error"] { color: var(--wbui-danger); }
.wbui-orb[data-state="error"] .wbui-orb-pill-label { color: var(--wbui-danger); }

/* 行内 pill 形态（hairline 环与输入框同值） */
.wbui-orb[data-pill] {
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 5px;
  border-radius: 999px;
  background: var(--wbui-surface);
  box-shadow: var(--wbui-pi-ring);
}
.wbui-orb-pill-label {
  font-family: var(--wbui-sans);
  font-size: 11.5px;
  font-weight: var(--wbui-fw-regular);
  line-height: 1;
  color: var(--wbui-ink-2);
  white-space: nowrap;
}

.wbui-orb-glyph {
  position: relative;
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
  contain: strict;
}

/* --- Lattice：3×3 固定点阵 --- */
.wbui-orb-lattice {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  transform-origin: 0 0;
  transform: scale(var(--orb-k, 1)) translate(6.5px, 6.5px);
  --orb-rest: var(--wbui-orb-rest);
  --orb-dim: var(--wbui-orb-dim);
}
.wbui-orb-cell {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: var(--orb-rest);
}
.wbui-orb-lattice[data-variant="S1"] .wbui-orb-cell,
.wbui-orb-lattice[data-variant="S2"] .wbui-orb-cell {
  animation: wbui-orb-wave 1.7s var(--orb-ease-in-out) infinite both;
}
.wbui-orb-lattice[data-variant="S4"] .wbui-orb-cell {
  animation: wbui-orb-wave 1.6s var(--orb-ease-in-out) infinite both;
}
.wbui-orb-lattice[data-variant="S3"] .wbui-orb-cell,
.wbui-orb-lattice[data-variant="S5"] .wbui-orb-cell {
  animation: wbui-orb-comet 1.7s var(--orb-ease-smooth) infinite both;
}
.wbui-orb-lattice[data-variant="S3"] .wbui-orb-cell[data-still],
.wbui-orb-lattice[data-variant="S5"] .wbui-orb-cell[data-still] {
  animation: none;
  opacity: var(--orb-dim);
}
@keyframes wbui-orb-wave {
  0% { opacity: var(--orb-rest); transform: scale(1); animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1); }
  28% { opacity: 1; transform: scale(1.18); animation-timing-function: cubic-bezier(0.66, 0, 0.34, 1); }
  56% { opacity: var(--orb-rest); transform: scale(1); }
  100% { opacity: var(--orb-rest); transform: scale(1); }
}
@keyframes wbui-orb-comet {
  0% { opacity: 1; transform: scale(1.2); animation-timing-function: linear; }
  45% { opacity: var(--orb-rest); transform: scale(1); }
  100% { opacity: var(--orb-rest); transform: scale(1); }
}

/* --- Lens：景深三/四圆 --- */
.wbui-orb-lens {
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  transform-origin: 0 0;
  transform: scale(var(--orb-k, 1));
}
.wbui-orb-shape {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--orb-d, 7px);
  height: var(--orb-d, 7px);
  margin: calc(var(--orb-d, 7px) / -2) 0 0 calc(var(--orb-d, 7px) / -2);
  border-radius: 50%;
  background: currentColor;
}
.wbui-orb-lens[data-variant="B1"] .wbui-orb-shape { --orb-d: 6px; animation: wbui-orb-focus 4s var(--orb-ease-smooth) infinite both; }
.wbui-orb-lens[data-variant="B1"] .shapeA { --orb-ox: -4.5px; --orb-oy: -4.5px; animation-delay: 0s; }
.wbui-orb-lens[data-variant="B1"] .shapeB { --orb-ox: 4.5px; --orb-oy: -4.5px; animation-delay: -3s; }
.wbui-orb-lens[data-variant="B1"] .shapeC { --orb-ox: 4.5px; --orb-oy: 4.5px; animation-delay: -2s; }
.wbui-orb-lens[data-variant="B1"] .shapeD { --orb-ox: -4.5px; --orb-oy: 4.5px; animation-delay: -1s; }
@keyframes wbui-orb-focus {
  0%, 100% { opacity: 0.05; filter: blur(2px); transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.12); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  12% { opacity: 1; filter: blur(0); transform: translate(var(--orb-ox), var(--orb-oy)) scale(1); animation-timing-function: linear; }
  22% { opacity: 1; filter: blur(0); transform: translate(var(--orb-ox), var(--orb-oy)) scale(1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  38% { opacity: 0.3; filter: blur(1.2px); transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.06); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
  58% { opacity: 0.1; filter: blur(1.8px); transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.1); animation-timing-function: linear; }
  82% { opacity: 0.05; filter: blur(2px); transform: translate(var(--orb-ox), var(--orb-oy)) scale(1.12); }
}
.wbui-orb-lens[data-variant="B2"] .wbui-orb-shape { animation: wbui-orb-revolve 3.3s linear infinite both; }
.wbui-orb-lens[data-variant="B2"] .shapeA { animation-delay: 0s; }
.wbui-orb-lens[data-variant="B2"] .shapeB { animation-delay: -1.1s; }
.wbui-orb-lens[data-variant="B2"] .shapeC { animation-delay: -2.2s; }
@keyframes wbui-orb-revolve {
  0% { opacity: 1; filter: blur(0); transform: rotate(0deg) translateY(6.5px) scale(1); }
  25% { opacity: 0.55; filter: blur(1.3px); transform: rotate(90deg) translateY(6.5px) scale(0.82); }
  50% { opacity: 0.28; filter: blur(2.4px); transform: rotate(180deg) translateY(6.5px) scale(0.66); }
  75% { opacity: 0.55; filter: blur(1.3px); transform: rotate(270deg) translateY(6.5px) scale(0.82); }
  100% { opacity: 1; filter: blur(0); transform: rotate(360deg) translateY(6.5px) scale(1); }
}
.wbui-orb-lens[data-variant="B3"] .wbui-orb-shape { animation: wbui-orb-bloom 4.2s linear infinite both; }
.wbui-orb-lens[data-variant="B3"] .shapeA { animation-delay: 0s; }
.wbui-orb-lens[data-variant="B3"] .shapeB { animation-delay: -1.4s; }
.wbui-orb-lens[data-variant="B3"] .shapeC { animation-delay: -2.8s; }
@keyframes wbui-orb-bloom {
  0% { opacity: 0; filter: blur(0); transform: scale(0.35); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
  8% { opacity: 1; filter: blur(0); transform: scale(0.55); animation-timing-function: linear; }
  24% { opacity: 1; filter: blur(0); transform: scale(0.72); animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
  42% { opacity: 0.1; filter: blur(1.8px); transform: scale(1.5); }
  62% { opacity: 0; filter: blur(2.8px); transform: scale(2.4); }
  100% { opacity: 0; filter: blur(2.8px); transform: scale(2.4); }
}
.wbui-orb-lens[data-variant="B4"] .shapeA { animation: wbui-orb-converge 3.6s linear infinite both; }
.wbui-orb-lens[data-variant="B4"] .shapeB { animation: wbui-orb-breathe 3.6s ease-in-out infinite both; }
.wbui-orb-lens[data-variant="B4"] .shapeC { display: none; }
@keyframes wbui-orb-converge {
  0% { transform: translate(0px, -5px) scale(1); filter: blur(0); animation-timing-function: linear; }
  10% { transform: translate(0px, -5px) scale(1); filter: blur(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  22% { transform: translate(2.15px, -1.25px) scale(0.72); filter: blur(0.8px); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  33% { transform: translate(4.3px, 2.5px) scale(1); filter: blur(0); animation-timing-function: linear; }
  43% { transform: translate(4.3px, 2.5px) scale(1); filter: blur(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  55% { transform: translate(0px, 2.5px) scale(0.72); filter: blur(0.8px); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  66% { transform: translate(-4.3px, 2.5px) scale(1); filter: blur(0); animation-timing-function: linear; }
  77% { transform: translate(-4.3px, 2.5px) scale(1); filter: blur(0); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
  88% { transform: translate(-2.15px, -1.25px) scale(0.72); filter: blur(0.8px); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  100% { transform: translate(0px, -5px) scale(1); filter: blur(0); }
}
.wbui-orb-lens[data-variant="B5"] .wbui-orb-shape { animation: wbui-orb-handoff 2.8s linear infinite both; }
.wbui-orb-lens[data-variant="B5"] .shapeA { animation-delay: 0s; }
.wbui-orb-lens[data-variant="B5"] .shapeC { animation-delay: -1.4s; }
.wbui-orb-lens[data-variant="B5"] .shapeB { animation-name: wbui-orb-breathe; animation-duration: 3.6s; }
@keyframes wbui-orb-handoff {
  0% { opacity: 0; filter: blur(2.4px); transform: translateX(-11px) scale(0.55); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  22% { opacity: 1; filter: blur(0); transform: translateX(-1px) scale(1); animation-timing-function: linear; }
  37% { opacity: 1; filter: blur(0); transform: translateX(0) scale(1); animation-timing-function: linear; }
  52% { opacity: 1; filter: blur(0); transform: translateX(1px) scale(1); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  70% { opacity: 0; filter: blur(2.4px); transform: translateX(11px) scale(0.55); }
  100% { opacity: 0; filter: blur(2.4px); transform: translateX(11px) scale(0.55); }
}
@keyframes wbui-orb-breathe {
  0%, 100% { opacity: 0.16; filter: blur(2.4px); transform: scale(1.2); }
  50% { opacity: 0.32; filter: blur(1.6px); transform: scale(0.98); }
}

/* --- Ring：八点固定环 --- */
.wbui-orb-ring {
  position: absolute;
  inset: 0;
  transform: scale(var(--orb-k, 1));
  --orb-ring-rest: var(--wbui-orb-ring-rest);
}
.wbui-orb-ring-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(var(--orb-rx), var(--orb-ry));
}
.wbui-orb-ring[data-variant="C1"] .wbui-orb-ring-dot { opacity: var(--orb-ring-rest); animation: wbui-orb-ring-chase 1.6s linear infinite both; }
@keyframes wbui-orb-ring-chase {
  0%, 11% { opacity: 1; }
  12.5%, 100% { opacity: var(--orb-ring-rest); }
}
.wbui-orb-ring[data-variant="C2"] .wbui-orb-ring-dot { animation: wbui-orb-ring-pulse 2s ease-in-out infinite both; }
@keyframes wbui-orb-ring-pulse {
  0%, 100% { opacity: 0.18; transform: translate(var(--orb-rx), var(--orb-ry)) scale(0.7); }
  50% { opacity: 1; transform: translate(var(--orb-rx), var(--orb-ry)) scale(1.15); }
}
.wbui-orb-ring[data-variant="C3"] .wbui-orb-ring-dot,
.wbui-orb-ring[data-variant="C5"] .wbui-orb-ring-dot { animation: wbui-orb-ring-comet 1.8s ease-in-out infinite both; }
@keyframes wbui-orb-ring-comet {
  0%, 100% { opacity: 0.08; transform: translate(var(--orb-rx), var(--orb-ry)); }
  12% { opacity: 1; transform: translate(var(--orb-rx), var(--orb-ry)); animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1); }
  35% { opacity: 0.5; transform: translate(var(--orb-rx), var(--orb-ry)); }
  60% { opacity: 0.12; transform: translate(var(--orb-rx), var(--orb-ry)); }
}
.wbui-orb-ring[data-variant="C4"] .wbui-orb-ring-dot { animation: wbui-orb-ring-stagger 1.6s ease-in-out infinite both; }
@keyframes wbui-orb-ring-stagger {
  0%, 100% { opacity: 1; transform: translate(var(--orb-rx), var(--orb-ry)); }
  50% { opacity: 0.15; transform: translate(var(--orb-rx), var(--orb-ry)); }
}

/* --- Globe（Helix 族）：球面点投影，坐标由 JS 逐帧注入 --- */
.wbui-orb-helix {
  position: absolute;
  inset: 0;
  transform: scale(var(--orb-k, 1));
}
.wbui-orb-helix-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  margin: -1px 0 0 -1px;
  border-radius: 50%;
  background: currentColor;
  will-change: transform, opacity;
}
.wbui-orb-helix[data-variant="G1"] .wbui-orb-helix-dot { animation: wbui-orb-globe-spin 4.5s linear infinite both; }
.wbui-orb-helix[data-variant="G2"] .wbui-orb-helix-dot { animation: wbui-orb-globe-spin 3.6s linear infinite both; }
.wbui-orb-helix[data-variant="G3"] .wbui-orb-helix-dot,
.wbui-orb-helix[data-variant="G4"] .wbui-orb-helix-dot { animation: wbui-orb-globe-ringturn 2.8s linear infinite both; }
.wbui-orb-helix[data-variant="G5"] .wbui-orb-helix-dot { animation: wbui-orb-globe-breathe 3.6s linear infinite both; }
@keyframes wbui-orb-globe-spin {
  0%, 100% { transform: translate(var(--g0x), var(--g0y)); opacity: var(--g0o); }
  12.5% { transform: translate(var(--g1x), var(--g1y)); opacity: var(--g1o); }
  25% { transform: translate(var(--g2x), var(--g2y)); opacity: var(--g2o); }
  37.5% { transform: translate(var(--g3x), var(--g3y)); opacity: var(--g3o); }
  50% { transform: translate(var(--g4x), var(--g4y)); opacity: var(--g4o); }
  62.5% { transform: translate(var(--g5x), var(--g5y)); opacity: var(--g5o); }
  75% { transform: translate(var(--g6x), var(--g6y)); opacity: var(--g6o); }
  87.5% { transform: translate(var(--g7x), var(--g7y)); opacity: var(--g7o); }
}
@keyframes wbui-orb-globe-ringturn {
  0% { transform: translate(var(--g0x), var(--g0y)); opacity: var(--g0o); }
  2.5% { transform: translate(var(--g1x), var(--g1y)); opacity: var(--g1o); }
  5% { transform: translate(var(--g2x), var(--g2y)); opacity: var(--g2o); }
  7.5%, 10% { transform: translate(var(--g3x), var(--g3y)); opacity: var(--g3o); }
  12.5% { transform: translate(var(--g4x), var(--g4y)); opacity: var(--g4o); }
  15% { transform: translate(var(--g5x), var(--g5y)); opacity: var(--g5o); }
  17.5%, 20% { transform: translate(var(--g6x), var(--g6y)); opacity: var(--g6o); }
  22.5% { transform: translate(var(--g7x), var(--g7y)); opacity: var(--g7o); }
  25% { transform: translate(var(--g8x), var(--g8y)); opacity: var(--g8o); }
  27.5%, 30% { transform: translate(var(--g9x), var(--g9y)); opacity: var(--g9o); }
  32.5% { transform: translate(var(--g10x), var(--g10y)); opacity: var(--g10o); }
  35% { transform: translate(var(--g11x), var(--g11y)); opacity: var(--g11o); }
  37.5%, 40% { transform: translate(var(--g12x), var(--g12y)); opacity: var(--g12o); }
  42.5% { transform: translate(var(--g13x), var(--g13y)); opacity: var(--g13o); }
  45% { transform: translate(var(--g14x), var(--g14y)); opacity: var(--g14o); }
  47.5%, 50% { transform: translate(var(--g15x), var(--g15y)); opacity: var(--g15o); }
  52.5% { transform: translate(var(--g16x), var(--g16y)); opacity: var(--g16o); }
  55% { transform: translate(var(--g17x), var(--g17y)); opacity: var(--g17o); }
  57.5%, 60% { transform: translate(var(--g18x), var(--g18y)); opacity: var(--g18o); }
  62.5% { transform: translate(var(--g19x), var(--g19y)); opacity: var(--g19o); }
  65% { transform: translate(var(--g20x), var(--g20y)); opacity: var(--g20o); }
  67.5%, 70% { transform: translate(var(--g21x), var(--g21y)); opacity: var(--g21o); }
  72.5% { transform: translate(var(--g22x), var(--g22y)); opacity: var(--g22o); }
  75% { transform: translate(var(--g23x), var(--g23y)); opacity: var(--g23o); }
  77.5%, 80% { transform: translate(var(--g24x), var(--g24y)); opacity: var(--g24o); }
  82.5% { transform: translate(var(--g25x), var(--g25y)); opacity: var(--g25o); }
  85% { transform: translate(var(--g26x), var(--g26y)); opacity: var(--g26o); }
  87.5%, 90% { transform: translate(var(--g27x), var(--g27y)); opacity: var(--g27o); }
  92.5% { transform: translate(var(--g28x), var(--g28y)); opacity: var(--g28o); }
  95% { transform: translate(var(--g29x), var(--g29y)); opacity: var(--g29o); }
  97.5%, 100% { transform: translate(var(--g30x), var(--g30y)); opacity: var(--g30o); }
}
@keyframes wbui-orb-globe-breathe {
  0% { transform: translate(var(--g0x), var(--g0y)); opacity: var(--g0o); }
  19% { transform: translate(var(--g1x), var(--g1y)); opacity: var(--g1o); }
  25% { transform: translate(var(--g2x), var(--g2y)); opacity: var(--g2o); }
  44% { transform: translate(var(--g3x), var(--g3y)); opacity: var(--g3o); }
  50% { transform: translate(var(--g4x), var(--g4y)); opacity: var(--g4o); }
  69% { transform: translate(var(--g5x), var(--g5y)); opacity: var(--g5o); }
  75% { transform: translate(var(--g6x), var(--g6y)); opacity: var(--g6o); }
  94% { transform: translate(var(--g7x), var(--g7y)); opacity: var(--g7o); }
  100% { transform: translate(var(--g8x), var(--g8y)); opacity: var(--g8o); }
}

/* --- Morph：八点形变环 --- */
.wbui-orb-morph {
  position: absolute;
  inset: 0;
  transform: scale(var(--orb-k, 1));
}
.wbui-orb-morph-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: currentColor;
  animation: wbui-orb-morph 4.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}
@keyframes wbui-orb-morph {
  0%, 5% { transform: translate(var(--m-1)); }
  25%, 30% { transform: translate(var(--m-2)); }
  50%, 55% { transform: translate(var(--m-3)); }
  75%, 80% { transform: translate(var(--m-4)); }
  100% { transform: translate(var(--m-1)); }
}
.wbui-orb-morph[data-variant="M2"],
.wbui-orb-morph[data-variant="M4"] { animation: wbui-orb-morph-twist 9.6s linear infinite; }
.wbui-orb-morph[data-variant="M5"] .wbui-orb-morph-dot { animation: wbui-orb-morph-scatter 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite both; }
@keyframes wbui-orb-morph-scatter {
  0%, 12% { transform: translate(var(--m-1)); opacity: 1; }
  38%, 62% { transform: translate(var(--m-2)); opacity: calc(1 - 0.6 * var(--m-depth, 0)); }
  88%, 100% { transform: translate(var(--m-1)); opacity: 1; }
}
@keyframes wbui-orb-morph-twist {
  from { transform: scale(var(--orb-k, 1)) rotate(0deg); }
  to { transform: scale(var(--orb-k, 1)) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wbui-orb-cell, .wbui-orb-shape, .wbui-orb-ring-dot, .wbui-orb-helix-dot, .wbui-orb-morph-dot { animation: none !important; }
  .wbui-orb-cell[data-mid] { opacity: 1 !important; }
  .wbui-orb-shape { opacity: 0.3 !important; filter: blur(1.4px) !important; transform: none !important; }
  .wbui-orb-shape.shapeA { opacity: 1 !important; filter: blur(0) !important; }
  .wbui-orb-ring-dot { opacity: 0.7 !important; }
  .wbui-orb-ring, .wbui-orb-helix, .wbui-orb-morph { animation: none !important; }
}