@nexface/tools 0.1.15-alpha.0 → 0.1.15-alpha.10

package/dist/styles.css

@@ -1,80 +1,725 @@
-.agent-operation { --agent-operation-accent: #6366f1; --agent-operation-glow: #22d3ee; position: fixed; z-index: 9999; inset: 0; pointer-events: none; }
-.agent-operation__surface { position: fixed; z-index: 0; overflow: hidden; contain: paint; border: 1px solid rgba(96,156,245,.9); border-radius: 8px; background: rgba(96,156,245,.06); pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.72),0 0 8px rgba(96,156,245,.2); }
-.agent-operation__surface::before,.agent-operation__surface::after { position: absolute; z-index: 2; inset: 0; border-radius: inherit; content: ""; pointer-events: none; -webkit-mask-image: linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to left,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to top,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to right,#000 0,rgba(0,0,0,.7) 7px,transparent 28px); mask-image: linear-gradient(to bottom,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to left,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to top,#000 0,rgba(0,0,0,.7) 7px,transparent 28px),linear-gradient(to right,#000 0,rgba(0,0,0,.7) 7px,transparent 28px); }
-.agent-operation__surface::before { --agent-operation-edge-primary-angle: 0deg; background: conic-gradient(from var(--agent-operation-edge-primary-angle) at 50% 50%,transparent 0% 8%,rgba(139,92,246,.24) 11%,rgba(139,92,246,.76) 17%,rgba(34,211,238,.9) 23%,#3b82f6 26%,rgba(191,219,254,.92) 27.5%,transparent 31% 56%,rgba(139,92,246,.3) 61%,rgba(34,211,238,.46) 66%,transparent 72% 100%); filter: blur(32px); opacity: .68; animation: agent-operation-surface-edge-primary 6s linear infinite; }
-.agent-operation__surface::after { --agent-operation-edge-secondary-angle: 0deg; z-index: 3; background: conic-gradient(from var(--agent-operation-edge-secondary-angle) at 50% 50%,transparent 0% 18%,rgba(139,92,246,.5) 23%,rgba(34,211,238,.58) 30%,rgba(59,130,246,.88) 35%,transparent 41% 75%,rgba(34,211,238,.28) 80%,rgba(167,139,250,.46) 86%,transparent 91% 100%); filter: blur(44px); opacity: .52; mix-blend-mode: screen; animation: agent-operation-surface-edge-secondary 8s linear infinite; }
-.agent-operation__surface[style*="--agent-operation-cutout"] { -webkit-mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0); -webkit-mask-position: 0 0,var(--agent-operation-cutout-left) var(--agent-operation-cutout-top); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 100% 100%,var(--agent-operation-cutout-width) var(--agent-operation-cutout-height); -webkit-mask-composite: xor; mask-image: linear-gradient(#000 0 0),linear-gradient(#000 0 0); mask-position: 0 0,var(--agent-operation-cutout-left) var(--agent-operation-cutout-top); mask-repeat: no-repeat; mask-size: 100% 100%,var(--agent-operation-cutout-width) var(--agent-operation-cutout-height); mask-composite: exclude; }
-.agent-operation__target { position: fixed; z-index: 1; overflow: hidden; border: 2px solid #4f7cff; border-radius: 10px; background: transparent; pointer-events: none; box-shadow: 0 0 0 4px rgba(99,102,241,.16),0 0 22px rgba(34,211,238,.34),0 0 48px rgba(79,70,229,.2); transition: inset .12s ease,width .12s ease,height .12s ease; animation: agent-operation-pulse 2.6s ease-in-out infinite; }
-.agent-operation__pointer-effect { position: fixed; z-index: 2; top: 0; left: 0; width: 0; height: 0; opacity: 1; pointer-events: none; transform: translate3d(var(--agent-operation-pointer-x),var(--agent-operation-pointer-y),0); transition: transform var(--agent-operation-pointer-duration) cubic-bezier(.22,1,.36,1),opacity .12s ease-out; will-change: transform,opacity; }
-.agent-operation__pointer-cursor { position: absolute; z-index: 1; top: -4px; left: -3px; display: block; width: 24px; height: 24px; transform-origin: 4px 4px; }
-.agent-operation__pointer { position: relative; z-index: 2; display: block; color: #111827; filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(15,23,42,.32)); }
-.agent-operation__pointer-label { position: absolute; z-index: 2; top: 27px; left: 19px; display: flex; max-width: min(300px,48vw); overflow: hidden; align-items: center; gap: 9px; border: 1px solid rgba(24,24,27,.1); border-radius: 11px; padding: 7px 11px; color: #27272a; background: rgba(255,255,255,.97); box-shadow: 0 6px 20px rgba(15,23,42,.13); font: 500 13px/1.35 Inter,ui-sans-serif,system-ui,sans-serif; white-space: nowrap; }
-.agent-operation__pointer-label:is([data-operation-effect="read"],[data-operation-effect="navigate"]) { top: 12px; left: 10px; overflow: visible; gap: 5px; border: 0; padding: 0; background: transparent; box-shadow: none; }
-.agent-operation__pointer-label[data-browser-tool="true"] { top: 0; left: 0; transform: translate(-50%,-50%); }
-.agent-operation__pointer-label-text { overflow: hidden; text-overflow: ellipsis; }
-.agent-operation__pointer-label:is([data-operation-effect="read"],[data-operation-effect="navigate"]) .agent-operation__pointer-label-text { display: flex; box-sizing: border-box; height: 32px; align-items: center; border: 1px solid rgba(24,24,27,.08); border-radius: 12px; padding: 6px 12px; background: rgba(255,255,255,.97); box-shadow: 0 6px 20px rgba(15,23,42,.13); }
-.agent-operation__pointer-read-scan { display: flex; width: 36px; height: 32px; flex: none; align-items: center; justify-content: center; gap: 4px; pointer-events: none; }
-.agent-operation__pointer-read-scan i { width: 3px; height: 11px; border-radius: 999px; background: #609cf5; opacity: .34; transform: scaleY(.58); transform-origin: center; animation: agent-operation-pointer-read-bar 1.05s ease-in-out infinite; }
-.agent-operation__pointer-read-scan i:nth-child(2) { animation-delay: .1s; }
-.agent-operation__pointer-read-scan i:nth-child(3) { animation-delay: .2s; }
-.agent-operation__pointer-read-scan i:nth-child(4) { animation-delay: .3s; }
-.agent-operation__pointer-read-scan i:nth-child(5) { animation-delay: .4s; }
-.agent-operation__pointer-navigation-trail { position: relative; width: 36px; height: 32px; flex: none; filter: drop-shadow(0 1px 3px rgba(96,156,245,.32)); pointer-events: none; }
-.agent-operation__pointer-navigation-trail::before,.agent-operation__pointer-navigation-trail::after { position: absolute; top: 9px; width: 10px; height: 10px; border-top: 2px solid #609cf5; border-right: 2px solid #609cf5; border-radius: 2px; content: ""; transform: rotate(45deg); animation: agent-operation-pointer-navigation-chevron .9s ease-in-out infinite; }
-.agent-operation__pointer-navigation-trail::before { left: 1px; opacity: .3; }
-.agent-operation__pointer-navigation-trail::after { left: 11px; animation-delay: .15s; }
-.agent-operation__controller { --agent-operation-controller-x: -50%; position: fixed; z-index: 3; left: 50%; bottom: 22px; display: flex; width: 760px; min-width: min(760px,calc(100vw - 32px)); max-width: calc(100vw - 32px); align-items: center; gap: 10px; border: 1px solid rgba(165,180,252,.28); border-radius: 15px; padding: 9px 10px 9px 12px; color: #fff; background: linear-gradient(135deg,#3a3a40 0%,#303036 48%,#29292e 100%); box-shadow: inset 0 0 0 1px rgba(103,232,249,.06),0 16px 38px rgba(0,0,0,.28); pointer-events: auto; transform: translate(var(--agent-operation-controller-x),0); font-family: Inter,ui-sans-serif,system-ui,sans-serif; animation: agent-operation-controller-enter .4s cubic-bezier(.22,1,.36,1) both,agent-operation-edge-breathe 2.8s ease-in-out .4s infinite; will-change: transform,opacity; }
-.agent-operation__controller[data-visibility="exiting"] { pointer-events: none; animation: agent-operation-controller-exit .3s cubic-bezier(.4,0,1,1) both; }
-.agent-operation__controller::after { position: absolute; z-index: 0; inset: 1px; border-radius: 13px; background: linear-gradient(110deg,rgba(255,255,255,.13),transparent 30%,transparent 68%,rgba(129,140,248,.15)); content: ""; pointer-events: none; }
-.agent-operation__controller>:not(.agent-operation__edge-flow) { position: relative; z-index: 2; }
-.agent-operation__edge-flow { position: absolute; z-index: 1; inset: -1px; overflow: hidden; border-radius: inherit; pointer-events: none; }
-.agent-operation__edge-flow::before,.agent-operation__edge-flow::after { position: absolute; height: 2px; content: ""; }
-.agent-operation__edge-flow::before { top: 0; left: -34%; width: 34%; background: linear-gradient(90deg,transparent,rgba(165,180,252,.72),#e0f2fe,rgba(34,211,238,.9),transparent); animation: agent-operation-edge-flow 2.65s ease-in-out infinite; }
-.agent-operation__edge-flow::after { right: -12%; bottom: 0; width: 28%; background: linear-gradient(90deg,transparent,rgba(129,140,248,.78),rgba(103,232,249,.68),transparent); animation: agent-operation-edge-flow-reverse 3.1s ease-in-out infinite; }
-.agent-operation__pause-mark { display: flex; width: 9px; flex: 0 0 9px; justify-content: center; gap: 2px; opacity: .52; }
-.agent-operation__pause-mark i { width: 2px; height: 9px; border-radius: 2px; background: #d4d4d8; }
-.agent-operation__activity { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; }
-.agent-operation__activity-icon { display: none; }
-.agent-operation__activity i { position: absolute; inset: 3px; border: 1px solid rgba(255,255,255,.14); border-top-color: #c7d2fe; border-radius: 50%; animation: agent-operation-spin 1.8s linear infinite; }
-.agent-operation__activity b { color: #eef2ff; font-size: 17px; font-weight: 400; line-height: 1; }
-.agent-operation__controller>div { display: grid; min-width: 0; flex: 1; gap: 1px; }
-.agent-operation__heading { display: flex; min-width: 0; align-items: center; gap: 7px; }
-.agent-operation__controller strong { overflow: hidden; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
-.agent-operation__controller code { overflow: hidden; padding: 1px 5px; border-radius: 5px; color: #a1a1aa; background: rgba(255,255,255,.07); font: 500 8px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow: ellipsis; white-space: nowrap; }
-.agent-operation__description { display: flex; min-width: 0; overflow: hidden; align-items: center; color: #e4e4e7; font-size: 10px; white-space: nowrap; }
-.agent-operation__compact-status { display: none; }
-.agent-operation__controller button { border: 0; border-radius: 9px; padding: 7px 10px; color: #e4e4e7; background: #3f3f46; font-size: 10px; font-weight: 650; }
-.agent-operation__controller .agent-operation__activity { border: 0; padding: 0; cursor: pointer; }
-.agent-operation__controller .agent-operation__activity:disabled { cursor: default; opacity: .55; }
-.agent-operation__controller>.agent-operation__history { position: absolute; z-index: 4; bottom: calc(100% + 10px); left: 0; display: grid; width: 360px; max-width: 100%; max-height: min(320px,50vh); overflow: hidden; border: 1px solid rgba(165,180,252,.28); border-radius: 14px; color: #f4f4f5; background: #303036; box-shadow: 0 16px 38px rgba(0,0,0,.28); pointer-events: auto; }
-.agent-operation__history header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.08); padding: 11px 13px; }
-.agent-operation__history header span { display: grid; min-width: 20px; height: 20px; place-items: center; border-radius: 10px; color: #c7d2fe; background: rgba(129,140,248,.16); font-size: 10px; }
-.agent-operation__history ol { display: grid; overflow: auto; margin: 0; padding: 5px 0; list-style: none; }
-.agent-operation__history li { display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: start; gap: 8px; padding: 8px 13px; }
-.agent-operation__history li>span { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: #c7d2fe; background: rgba(129,140,248,.12); font-size: 9px; }
-.agent-operation__history p { margin: 1px 0 0; overflow-wrap: anywhere; color: #e4e4e7; font-size: 11px; line-height: 18px; }
-.agent-operation__controller .agent-operation__stop { color: #fecaca; background: #7f1d1d; }
-.agent-operation[data-status="completed"] .agent-operation__target { border-color: #609cf5; }
-.agent-operation[data-status="failed"] .agent-operation__target { border-color: #dc2626; animation: none; }
-.agent-operation[data-run-active="false"] .agent-operation__activity i,.agent-operation[data-run-active="false"] .agent-operation__edge-flow::before,.agent-operation[data-run-active="false"] .agent-operation__edge-flow::after,.agent-operation[data-run-active="false"] .agent-operation__surface::before,.agent-operation[data-run-active="false"] .agent-operation__surface::after { animation: none; }
-@keyframes agent-operation-spin { to { transform: rotate(360deg); } }
-@keyframes agent-operation-edge-flow { 0% { left: -24%; opacity: 0; } 12%,78% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
-@keyframes agent-operation-edge-flow-reverse { 0% { right: -20%; opacity: 0; } 18%,76% { opacity: .8; } 100% { right: 100%; opacity: 0; } }
-@keyframes agent-operation-edge-breathe { 50% { border-color: rgba(103,232,249,.42); } }
-@keyframes agent-operation-pulse { 50% { border-color: #38bdf8; box-shadow: 0 0 0 6px rgba(99,102,241,.12),0 0 28px rgba(34,211,238,.4),0 0 58px rgba(79,70,229,.24); } }
-@property --agent-operation-edge-primary-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
-@property --agent-operation-edge-secondary-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
-@keyframes agent-operation-surface-edge-primary { 0% { --agent-operation-edge-primary-angle: 0deg; animation-timing-function: cubic-bezier(.4,.25,.6,.75); } 100% { --agent-operation-edge-primary-angle: 360deg; } }
-@keyframes agent-operation-surface-edge-secondary { 0% { --agent-operation-edge-secondary-angle: 0deg; animation-timing-function: cubic-bezier(.4,.3,.6,.7); } 100% { --agent-operation-edge-secondary-angle: 360deg; } }
-@keyframes agent-operation-controller-enter { 0% { opacity: 0; transform: translate(var(--agent-operation-controller-x),calc(100% + 28px)); } 100% { opacity: 1; transform: translate(var(--agent-operation-controller-x),0); } }
-@keyframes agent-operation-controller-exit { 0% { opacity: 1; transform: translate(var(--agent-operation-controller-x),0); } 100% { opacity: 0; transform: translate(var(--agent-operation-controller-x),calc(100% + 28px)); } }
-@keyframes agent-operation-pointer-read-bar { 0%,18%,100% { opacity: .34; transform: scaleY(.58); box-shadow: none; } 42% { opacity: 1; transform: scaleY(1.27); box-shadow: 0 0 6px rgba(96,156,245,.52); } 68% { opacity: .58; transform: scaleY(.78); box-shadow: none; } }
-@keyframes agent-operation-pointer-navigation-chevron { 0%,100% { opacity: .24; transform: translateX(-3px) rotate(45deg); } 48% { opacity: 1; transform: translateX(2px) rotate(45deg); } 72% { opacity: .62; transform: translateX(4px) rotate(45deg); } }
-@media (prefers-reduced-motion: reduce) { .agent-operation__surface,.agent-operation__target,.agent-operation__controller,.agent-operation__activity i,.agent-operation__edge-flow::before,.agent-operation__edge-flow::after,.agent-operation__pointer-read-scan i,.agent-operation__pointer-navigation-trail::before,.agent-operation__pointer-navigation-trail::after { animation: none; } .agent-operation__pointer-effect { transition: none; } .agent-operation__surface::before,.agent-operation__surface::after { display: none; } }
-@media (max-width:520px) { .agent-operation__controller { --agent-operation-controller-x: 0%; right: 12px; bottom: 12px; left: 12px; width: auto; min-width: 0; } .agent-operation__controller>.agent-operation__history { width: 100%; } }
+.agent-operation {
+  --agent-operation-accent: #6366f1;
+  --agent-operation-glow: #22d3ee;
+  position: fixed;
+  z-index: 9999;
+  inset: 0;
+  pointer-events: none;
+}
+.agent-operation__surface {
+  position: fixed;
+  z-index: 0;
+  overflow: hidden;
+  contain: paint;
+  border: 1px solid rgba(96, 156, 245, 0.9);
+  border-radius: 8px;
+  background: rgba(96, 156, 245, 0.06);
+  pointer-events: none;
+  box-shadow:
+    inset 0 0 0 1px rgba(255, 255, 255, 0.72),
+    0 0 8px rgba(96, 156, 245, 0.2);
+}
+.agent-operation__surface::before,
+.agent-operation__surface::after {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  border-radius: inherit;
+  content: "";
+  pointer-events: none;
+  -webkit-mask-image:
+    linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px),
+    linear-gradient(to left, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px),
+    linear-gradient(to top, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px),
+    linear-gradient(to right, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px);
+  mask-image:
+    linear-gradient(to bottom, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px),
+    linear-gradient(to left, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px),
+    linear-gradient(to top, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px),
+    linear-gradient(to right, #000 0, rgba(0, 0, 0, 0.7) 7px, transparent 28px);
+}
+.agent-operation__surface::before {
+  --agent-operation-edge-primary-angle: 0deg;
+  background: conic-gradient(
+    from var(--agent-operation-edge-primary-angle) at 50% 50%,
+    transparent 0% 8%,
+    rgba(139, 92, 246, 0.24) 11%,
+    rgba(139, 92, 246, 0.76) 17%,
+    rgba(34, 211, 238, 0.9) 23%,
+    #3b82f6 26%,
+    rgba(191, 219, 254, 0.92) 27.5%,
+    transparent 31% 56%,
+    rgba(139, 92, 246, 0.3) 61%,
+    rgba(34, 211, 238, 0.46) 66%,
+    transparent 72% 100%
+  );
+  filter: blur(32px);
+  opacity: 0.68;
+  animation: agent-operation-surface-edge-primary 6s linear infinite;
+}
+.agent-operation__surface::after {
+  --agent-operation-edge-secondary-angle: 0deg;
+  z-index: 3;
+  background: conic-gradient(
+    from var(--agent-operation-edge-secondary-angle) at 50% 50%,
+    transparent 0% 18%,
+    rgba(139, 92, 246, 0.5) 23%,
+    rgba(34, 211, 238, 0.58) 30%,
+    rgba(59, 130, 246, 0.88) 35%,
+    transparent 41% 75%,
+    rgba(34, 211, 238, 0.28) 80%,
+    rgba(167, 139, 250, 0.46) 86%,
+    transparent 91% 100%
+  );
+  filter: blur(44px);
+  opacity: 0.52;
+  mix-blend-mode: screen;
+  animation: agent-operation-surface-edge-secondary 8s linear infinite;
+}
+.agent-operation__surface[style*="--agent-operation-cutout"] {
+  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  -webkit-mask-position:
+    0 0,
+    var(--agent-operation-cutout-left) var(--agent-operation-cutout-top);
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-size:
+    100% 100%,
+    var(--agent-operation-cutout-width) var(--agent-operation-cutout-height);
+  -webkit-mask-composite: xor;
+  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  mask-position:
+    0 0,
+    var(--agent-operation-cutout-left) var(--agent-operation-cutout-top);
+  mask-repeat: no-repeat;
+  mask-size:
+    100% 100%,
+    var(--agent-operation-cutout-width) var(--agent-operation-cutout-height);
+  mask-composite: exclude;
+}
+.agent-operation__target {
+  position: fixed;
+  z-index: 1;
+  overflow: hidden;
+  border: 2px solid #4f7cff;
+  border-radius: 10px;
+  background: transparent;
+  pointer-events: none;
+  box-shadow:
+    0 0 0 4px rgba(99, 102, 241, 0.16),
+    0 0 22px rgba(34, 211, 238, 0.34),
+    0 0 48px rgba(79, 70, 229, 0.2);
+  animation: agent-operation-pulse 2.6s ease-in-out infinite;
+}
+.agent-operation__pointer-effect,
+.agent-operation__floating-label {
+  position: fixed;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 0;
+  opacity: 1;
+  pointer-events: none;
+  transform: translate3d(var(--agent-operation-pointer-x), var(--agent-operation-pointer-y), 0);
+  transition:
+    transform var(--agent-operation-pointer-duration) cubic-bezier(0.22, 1, 0.36, 1),
+    opacity 0.12s ease-out;
+  will-change: transform, opacity;
+}
+.agent-operation__floating-label {
+  z-index: 10001;
+}
+.agent-operation__pointer-cursor {
+  position: absolute;
+  z-index: 1;
+  top: -4px;
+  left: -3px;
+  display: block;
+  width: 24px;
+  height: 24px;
+  transform-origin: 4px 4px;
+}
+.agent-operation__pointer {
+  position: relative;
+  z-index: 2;
+  display: block;
+  color: #111827;
+  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px rgba(15, 23, 42, 0.32));
+}
+.agent-operation__pointer-label {
+  position: absolute;
+  z-index: 2;
+  top: 27px;
+  left: 19px;
+  display: flex;
+  max-width: min(300px, 48vw, calc(100vw - 24px));
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid rgba(24, 24, 27, 0.1);
+  border-radius: 11px;
+  padding: 7px 11px;
+  color: #27272a;
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.13);
+  font:
+    500 13px / 1.35 Inter,
+    ui-sans-serif,
+    system-ui,
+    sans-serif;
+  white-space: nowrap;
+}
+.agent-operation__pointer-label:is(
+  [data-operation-effect="read"],
+  [data-operation-effect="navigate"]
+) {
+  top: 12px;
+  left: 10px;
+  overflow: visible;
+  gap: 5px;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  box-shadow: none;
+}
+.agent-operation__pointer-label[data-browser-tool="true"] {
+  top: 0;
+  left: 0;
+  transform: translate(-50%, -50%);
+}
+.agent-operation__pointer-label-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.agent-operation__pointer-label:is(
+    [data-operation-effect="read"],
+    [data-operation-effect="navigate"]
+  )
+  .agent-operation__pointer-label-text {
+  min-width: 0;
+  display: flex;
+  box-sizing: border-box;
+  height: 32px;
+  align-items: center;
+  border: 1px solid rgba(24, 24, 27, 0.08);
+  border-radius: 12px;
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.97);
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.13);
+}
+.agent-operation__pointer-read-scan {
+  display: flex;
+  width: 36px;
+  height: 32px;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  pointer-events: none;
+}
+.agent-operation__pointer-read-scan i {
+  width: 3px;
+  height: 11px;
+  border-radius: 999px;
+  background: #609cf5;
+  opacity: 0.34;
+  transform: scaleY(0.58);
+  transform-origin: center;
+  animation: agent-operation-pointer-read-bar 1.05s ease-in-out infinite;
+}
+.agent-operation__pointer-read-scan i:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.agent-operation__pointer-read-scan i:nth-child(3) {
+  animation-delay: 0.2s;
+}
+.agent-operation__pointer-read-scan i:nth-child(4) {
+  animation-delay: 0.3s;
+}
+.agent-operation__pointer-read-scan i:nth-child(5) {
+  animation-delay: 0.4s;
+}
+.agent-operation__pointer-navigation-trail {
+  position: relative;
+  width: 36px;
+  height: 32px;
+  flex: none;
+  filter: drop-shadow(0 1px 3px rgba(96, 156, 245, 0.32));
+  pointer-events: none;
+}
+.agent-operation__pointer-navigation-trail::before,
+.agent-operation__pointer-navigation-trail::after {
+  position: absolute;
+  top: 9px;
+  width: 10px;
+  height: 10px;
+  border-top: 2px solid #609cf5;
+  border-right: 2px solid #609cf5;
+  border-radius: 2px;
+  content: "";
+  transform: rotate(45deg);
+  animation: agent-operation-pointer-navigation-chevron 0.9s ease-in-out infinite;
+}
+.agent-operation__pointer-navigation-trail::before {
+  left: 1px;
+  opacity: 0.3;
+}
+.agent-operation__pointer-navigation-trail::after {
+  left: 11px;
+  animation-delay: 0.15s;
+}
+.agent-operation__controller {
+  --agent-operation-controller-x: -50%;
+  position: fixed;
+  z-index: 3;
+  left: 50%;
+  bottom: 22px;
+  display: flex;
+  width: 760px;
+  min-width: min(760px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  align-items: center;
+  gap: 10px;
+  border: 1px solid rgba(165, 180, 252, 0.28);
+  border-radius: 15px;
+  padding: 9px 10px 9px 12px;
+  color: #fff;
+  background: linear-gradient(135deg, #3a3a40 0%, #303036 48%, #29292e 100%);
+  box-shadow:
+    inset 0 0 0 1px rgba(103, 232, 249, 0.06),
+    0 16px 38px rgba(0, 0, 0, 0.28);
+  pointer-events: auto;
+  transform: translate(var(--agent-operation-controller-x), 0);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  animation:
+    agent-operation-controller-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both,
+    agent-operation-edge-breathe 2.8s ease-in-out 0.4s infinite;
+  will-change: transform, opacity;
+}
+.agent-operation__controller[data-visibility="exiting"] {
+  pointer-events: none;
+  animation: agent-operation-controller-exit 0.3s cubic-bezier(0.4, 0, 1, 1) both;
+}
+.agent-operation__controller::after {
+  position: absolute;
+  z-index: 0;
+  inset: 1px;
+  border-radius: 13px;
+  background: linear-gradient(
+    110deg,
+    rgba(255, 255, 255, 0.13),
+    transparent 30%,
+    transparent 68%,
+    rgba(129, 140, 248, 0.15)
+  );
+  content: "";
+  pointer-events: none;
+}
+.agent-operation__controller > :not(.agent-operation__edge-flow) {
+  position: relative;
+  z-index: 2;
+}
+.agent-operation__edge-flow {
+  position: absolute;
+  z-index: 1;
+  inset: -1px;
+  overflow: hidden;
+  border-radius: inherit;
+  pointer-events: none;
+}
+.agent-operation__edge-flow::before,
+.agent-operation__edge-flow::after {
+  position: absolute;
+  height: 2px;
+  content: "";
+}
+.agent-operation__edge-flow::before {
+  top: 0;
+  left: -34%;
+  width: 34%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(165, 180, 252, 0.72),
+    #e0f2fe,
+    rgba(34, 211, 238, 0.9),
+    transparent
+  );
+  animation: agent-operation-edge-flow 2.65s ease-in-out infinite;
+}
+.agent-operation__edge-flow::after {
+  right: -12%;
+  bottom: 0;
+  width: 28%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(129, 140, 248, 0.78),
+    rgba(103, 232, 249, 0.68),
+    transparent
+  );
+  animation: agent-operation-edge-flow-reverse 3.1s ease-in-out infinite;
+}
+.agent-operation__pause-mark {
+  display: flex;
+  width: 9px;
+  flex: 0 0 9px;
+  justify-content: center;
+  gap: 2px;
+  opacity: 0.52;
+}
+.agent-operation__pause-mark i {
+  width: 2px;
+  height: 9px;
+  border-radius: 2px;
+  background: #d4d4d8;
+}
+.agent-operation__activity {
+  position: relative;
+  display: grid;
+  width: 26px;
+  height: 26px;
+  flex: 0 0 26px;
+  place-items: center;
+}
+.agent-operation__activity-icon {
+  display: none;
+}
+.agent-operation__activity i {
+  position: absolute;
+  inset: 3px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-top-color: #c7d2fe;
+  border-radius: 50%;
+  animation: agent-operation-spin 1.8s linear infinite;
+}
+.agent-operation__activity b {
+  color: #eef2ff;
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 1;
+}
+.agent-operation__controller > div {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 1px;
+}
+.agent-operation__heading {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 7px;
+}
+.agent-operation__controller strong {
+  overflow: hidden;
+  font-size: 12px;
+  font-weight: 650;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-operation__controller code {
+  overflow: hidden;
+  padding: 1px 5px;
+  border-radius: 5px;
+  color: #a1a1aa;
+  background: rgba(255, 255, 255, 0.07);
+  font:
+    500 8px / 1.45 ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    monospace;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-operation__description {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+  align-items: center;
+  color: #e4e4e7;
+  font-size: 10px;
+  white-space: nowrap;
+}
+.agent-operation__compact-status {
+  display: none;
+}
+.agent-operation__controller button {
+  border: 0;
+  border-radius: 9px;
+  padding: 7px 10px;
+  color: #e4e4e7;
+  background: #3f3f46;
+  font-size: 10px;
+  font-weight: 650;
+}
+.agent-operation__controller .agent-operation__activity {
+  border: 0;
+  padding: 0;
+  cursor: pointer;
+}
+.agent-operation__controller .agent-operation__activity:disabled {
+  cursor: default;
+  opacity: 0.55;
+}
+.agent-operation__controller > .agent-operation__history {
+  position: absolute;
+  z-index: 4;
+  bottom: calc(100% + 10px);
+  left: 0;
+  display: grid;
+  width: 360px;
+  max-width: 100%;
+  max-height: min(320px, 50vh);
+  overflow: hidden;
+  border: 1px solid rgba(165, 180, 252, 0.28);
+  border-radius: 14px;
+  color: #f4f4f5;
+  background: #303036;
+  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.28);
+  pointer-events: auto;
+}
+.agent-operation__history header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 11px 13px;
+}
+.agent-operation__history header span {
+  display: grid;
+  min-width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 10px;
+  color: #c7d2fe;
+  background: rgba(129, 140, 248, 0.16);
+  font-size: 10px;
+}
+.agent-operation__history ol {
+  display: grid;
+  overflow: auto;
+  margin: 0;
+  padding: 5px 0;
+  list-style: none;
+}
+.agent-operation__history li {
+  display: grid;
+  grid-template-columns: 22px minmax(0, 1fr);
+  align-items: start;
+  gap: 8px;
+  padding: 8px 13px;
+}
+.agent-operation__history li > span {
+  display: grid;
+  width: 20px;
+  height: 20px;
+  place-items: center;
+  border-radius: 50%;
+  color: #c7d2fe;
+  background: rgba(129, 140, 248, 0.12);
+  font-size: 9px;
+}
+.agent-operation__history p {
+  margin: 1px 0 0;
+  overflow-wrap: anywhere;
+  color: #e4e4e7;
+  font-size: 11px;
+  line-height: 18px;
+}
+.agent-operation__controller .agent-operation__stop {
+  color: #fecaca;
+  background: #7f1d1d;
+}
+.agent-operation[data-status="completed"] .agent-operation__target {
+  border-color: #609cf5;
+}
+.agent-operation[data-status="failed"] .agent-operation__target {
+  border-color: #dc2626;
+  animation: none;
+}
+.agent-operation[data-run-active="false"] .agent-operation__activity i,
+.agent-operation[data-run-active="false"] .agent-operation__edge-flow::before,
+.agent-operation[data-run-active="false"] .agent-operation__edge-flow::after,
+.agent-operation[data-run-active="false"] .agent-operation__surface::before,
+.agent-operation[data-run-active="false"] .agent-operation__surface::after {
+  animation: none;
+}
+@keyframes agent-operation-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes agent-operation-edge-flow {
+  0% {
+    left: -24%;
+    opacity: 0;
+  }
+  12%,
+  78% {
+    opacity: 1;
+  }
+  100% {
+    left: 100%;
+    opacity: 0;
+  }
+}
+@keyframes agent-operation-edge-flow-reverse {
+  0% {
+    right: -20%;
+    opacity: 0;
+  }
+  18%,
+  76% {
+    opacity: 0.8;
+  }
+  100% {
+    right: 100%;
+    opacity: 0;
+  }
+}
+@keyframes agent-operation-edge-breathe {
+  50% {
+    border-color: rgba(103, 232, 249, 0.42);
+  }
+}
+@keyframes agent-operation-pulse {
+  50% {
+    border-color: #38bdf8;
+    box-shadow:
+      0 0 0 6px rgba(99, 102, 241, 0.12),
+      0 0 28px rgba(34, 211, 238, 0.4),
+      0 0 58px rgba(79, 70, 229, 0.24);
+  }
+}
+@property --agent-operation-edge-primary-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --agent-operation-edge-secondary-angle {
+  syntax: "<angle>";
+  inherits: false;
+  initial-value: 0deg;
+}
+@keyframes agent-operation-surface-edge-primary {
+  0% {
+    --agent-operation-edge-primary-angle: 0deg;
+    animation-timing-function: cubic-bezier(0.4, 0.25, 0.6, 0.75);
+  }
+  100% {
+    --agent-operation-edge-primary-angle: 360deg;
+  }
+}
+@keyframes agent-operation-surface-edge-secondary {
+  0% {
+    --agent-operation-edge-secondary-angle: 0deg;
+    animation-timing-function: cubic-bezier(0.4, 0.3, 0.6, 0.7);
+  }
+  100% {
+    --agent-operation-edge-secondary-angle: 360deg;
+  }
+}
+@keyframes agent-operation-controller-enter {
+  0% {
+    opacity: 0;
+    transform: translate(var(--agent-operation-controller-x), calc(100% + 28px));
+  }
+  100% {
+    opacity: 1;
+    transform: translate(var(--agent-operation-controller-x), 0);
+  }
+}
+@keyframes agent-operation-controller-exit {
+  0% {
+    opacity: 1;
+    transform: translate(var(--agent-operation-controller-x), 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--agent-operation-controller-x), calc(100% + 28px));
+  }
+}
+@keyframes agent-operation-pointer-read-bar {
+  0%,
+  18%,
+  100% {
+    opacity: 0.34;
+    transform: scaleY(0.58);
+    box-shadow: none;
+  }
+  42% {
+    opacity: 1;
+    transform: scaleY(1.27);
+    box-shadow: 0 0 6px rgba(96, 156, 245, 0.52);
+  }
+  68% {
+    opacity: 0.58;
+    transform: scaleY(0.78);
+    box-shadow: none;
+  }
+}
+@keyframes agent-operation-pointer-navigation-chevron {
+  0%,
+  100% {
+    opacity: 0.24;
+    transform: translateX(-3px) rotate(45deg);
+  }
+  48% {
+    opacity: 1;
+    transform: translateX(2px) rotate(45deg);
+  }
+  72% {
+    opacity: 0.62;
+    transform: translateX(4px) rotate(45deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agent-operation__surface,
+  .agent-operation__target,
+  .agent-operation__controller,
+  .agent-operation__activity i,
+  .agent-operation__edge-flow::before,
+  .agent-operation__edge-flow::after,
+  .agent-operation__pointer-read-scan i,
+  .agent-operation__pointer-navigation-trail::before,
+  .agent-operation__pointer-navigation-trail::after {
+    animation: none;
+  }
+  .agent-operation__pointer-effect {
+    transition: none;
+  }
+  .agent-operation__surface::before,
+  .agent-operation__surface::after {
+    display: none;
+  }
+}
+@media (max-width: 520px) {
+  .agent-operation__controller {
+    --agent-operation-controller-x: 0%;
+    right: 12px;
+    bottom: 12px;
+    left: 12px;
+    width: auto;
+    min-width: 0;
+  }
+  .agent-operation__controller > .agent-operation__history {
+    width: 100%;
+  }
+}
 
-.nexface-operation-surface { width: 100%; height: 100%; min-width: 0; min-height: 0; }
-.agent-operation .agent-operation__controller { box-sizing: border-box; min-width: 0; }
+.nexface-operation-surface {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+}
+.agent-operation .agent-operation__controller {
+  box-sizing: border-box;
+  min-width: 0;
+}
 .agent-operation__controller {
   top: auto;
   bottom: 14px;
@@ -103,7 +748,9 @@
 }
 .agent-operation__controller .agent-operation__edge-flow,
 .agent-operation__controller .agent-operation__pause-mark,
-.agent-operation__controller .agent-operation__compact-status { display: none; }
+.agent-operation__controller .agent-operation__compact-status {
+  display: none;
+}
 .agent-operation__controller .agent-operation__activity {
   width: 38px;
   height: 38px;
@@ -117,16 +764,57 @@
   cursor: pointer;
 }
 .agent-operation__controller .agent-operation__activity:not(:disabled):hover,
-.agent-operation__controller .agent-operation__activity[data-open="true"] { border-color: rgb(169 201 255 / 38%); background: rgb(169 201 255 / 14%); }
-.agent-operation__controller .agent-operation__activity:disabled { cursor: default; opacity: .82; }
-.agent-operation__controller .agent-operation__activity i { display: none; }
-.agent-operation__controller .agent-operation__activity-icon { display: block; }
-.agent-operation__controller .agent-operation__activity b { display: none; }
-.agent-operation__controller > div { display: grid; min-width: 0; flex: 1; gap: 1px; }
-.agent-operation__controller .agent-operation__heading { display: block; min-width: 0; }
-.agent-operation__controller .agent-operation__heading strong { display: block; overflow: hidden; color: rgb(255 255 255 / 96%); font-size: 12px; font-weight: 500; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
-.agent-operation__controller .agent-operation__description { display: block; overflow: hidden; color: rgb(255 255 255 / 58%); font-size: 10px; line-height: 13px; text-overflow: ellipsis; white-space: nowrap; }
-.agent-operation[data-human-control="true"] .agent-operation__controller .agent-operation__description { color: #9fc3ff; }
+.agent-operation__controller .agent-operation__activity[data-open="true"] {
+  border-color: rgb(169 201 255 / 38%);
+  background: rgb(169 201 255 / 14%);
+}
+.agent-operation__controller .agent-operation__activity:disabled {
+  cursor: default;
+  opacity: 0.82;
+}
+.agent-operation__controller .agent-operation__activity i {
+  display: none;
+}
+.agent-operation__controller .agent-operation__activity-icon {
+  display: block;
+}
+.agent-operation__controller .agent-operation__activity b {
+  display: none;
+}
+.agent-operation__controller > div {
+  display: grid;
+  min-width: 0;
+  flex: 1;
+  gap: 1px;
+}
+.agent-operation__controller .agent-operation__heading {
+  display: block;
+  min-width: 0;
+}
+.agent-operation__controller .agent-operation__heading strong {
+  display: block;
+  overflow: hidden;
+  color: rgb(255 255 255 / 96%);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-operation__controller .agent-operation__description {
+  display: block;
+  overflow: hidden;
+  color: rgb(255 255 255 / 58%);
+  font-size: 10px;
+  line-height: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-operation[data-human-control="true"]
+  .agent-operation__controller
+  .agent-operation__description {
+  color: #9fc3ff;
+}
 .agent-operation__controller .agent-operation__stop {
   min-width: 84px;
   height: 38px;
@@ -139,8 +827,13 @@
   font-size: 11px;
   font-weight: 500;
 }
-.agent-operation__controller .agent-operation__stop:focus:not(:focus-visible) { outline: none; }
-.agent-operation__controller .agent-operation__stop:focus-visible { outline: 2px solid #ff7187; outline-offset: 2px; }
+.agent-operation__controller .agent-operation__stop:focus:not(:focus-visible) {
+  outline: none;
+}
+.agent-operation__controller .agent-operation__stop:focus-visible {
+  outline: 2px solid #ff7187;
+  outline-offset: 2px;
+}
 .agent-operation__controller > .agent-operation__history {
   width: 360px;
   border: 1px solid rgb(255 255 255 / 12%);
@@ -151,36 +844,116 @@
   backdrop-filter: blur(16px) saturate(120%);
   -webkit-backdrop-filter: blur(16px) saturate(120%);
 }
-.agent-operation__history header { border-bottom-color: rgb(255 255 255 / 9%); padding: 12px 14px; }
-.agent-operation__history header strong { color: rgb(255 255 255 / 96%); font-size: 12px; font-weight: 600; }
-.agent-operation__history header span { color: #a9c9ff; background: rgb(169 201 255 / 14%); }
-.agent-operation__history li { padding: 8px 14px; }
-.agent-operation__history li > span { color: #a9c9ff; background: rgb(169 201 255 / 11%); }
-.agent-operation__history p { color: rgb(255 255 255 / 76%); font-size: 12px; line-height: 20px; }
-.agent-operation[data-interaction-pending="true"] .agent-operation__controller { box-shadow: none; }
-.agent-operation[data-interaction-pending="true"] .agent-operation__activity b { color: #609cf5; text-shadow: none; }
-.agent-operation__target { border: 1px solid #4f9cff; border-radius: 10px; box-shadow: 0 0 0 1px rgb(79 156 255 / 14%); animation: store-operation-target-in .16s ease-out both; }
-.agent-operation__pointer-label { border-color: #ebecf0; color: #525252; box-shadow: 0 4px 16px rgb(29 41 57 / 12%); }
+.agent-operation__history header {
+  border-bottom-color: rgb(255 255 255 / 9%);
+  padding: 12px 14px;
+}
+.agent-operation__history header strong {
+  color: rgb(255 255 255 / 96%);
+  font-size: 12px;
+  font-weight: 600;
+}
+.agent-operation__history header span {
+  color: #a9c9ff;
+  background: rgb(169 201 255 / 14%);
+}
+.agent-operation__history li {
+  padding: 8px 14px;
+}
+.agent-operation__history li > span {
+  color: #a9c9ff;
+  background: rgb(169 201 255 / 11%);
+}
+.agent-operation__history p {
+  color: rgb(255 255 255 / 76%);
+  font-size: 12px;
+  line-height: 20px;
+}
+.agent-operation[data-interaction-pending="true"] .agent-operation__controller {
+  box-shadow: none;
+}
+.agent-operation[data-interaction-pending="true"] .agent-operation__activity b {
+  color: #609cf5;
+  text-shadow: none;
+}
+.agent-operation__target {
+  border: 1px solid #4f9cff;
+  border-radius: 10px;
+  box-shadow: 0 0 0 1px rgb(79 156 255 / 14%);
+  animation: store-operation-target-in 0.16s ease-out both;
+}
+.agent-operation__pointer-label {
+  border-color: #ebecf0;
+  color: #525252;
+  box-shadow: 0 4px 16px rgb(29 41 57 / 12%);
+}
 .agent-operation__surface {
   border: 1px solid rgb(96 156 245 / 90%);
   border-radius: 12px;
   background: rgb(96 156 245 / 6%);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 72%), 0 0 8px rgb(96 156 245 / 20%);
-  animation: store-operation-mask-in .18s ease-out both;
+  box-shadow:
+    inset 0 0 0 1px rgb(255 255 255 / 72%),
+    0 0 8px rgb(96 156 245 / 20%);
+  animation: store-operation-mask-in 0.18s ease-out both;
 }
 .agent-operation__surface[style*="--agent-operation-cutout"] {
   -webkit-mask-image: none;
   mask-image: none;
 }
-@keyframes store-operation-mask-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes store-operation-target-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }
+@keyframes store-operation-mask-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes store-operation-target-in {
+  from {
+    opacity: 0;
+    transform: scale(0.985);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
 @media (prefers-reduced-motion: reduce) {
   .agent-operation__surface,
-  .agent-operation__target { animation: none; }
+  .agent-operation__target {
+    animation: none;
+  }
+}
+.agent-operation,
+.agent-operation *,
+.agent-operation::before,
+.agent-operation::after,
+.agent-operation *::before,
+.agent-operation *::after {
+  box-sizing: border-box;
+}
+.agent-operation__pointer-navigation-trail::before,
+.agent-operation__pointer-navigation-trail::after {
+  box-sizing: content-box;
 }
-.agent-operation, .agent-operation *, .agent-operation::before, .agent-operation::after, .agent-operation *::before, .agent-operation *::after { box-sizing: border-box; }
-.agent-operation__pointer-navigation-trail::before,.agent-operation__pointer-navigation-trail::after { box-sizing: content-box; }
 
-.agent-operation__pointer-processing { display: inline-block; flex: none; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: agent-operation-processing-spin .8s linear infinite; }
-@keyframes agent-operation-processing-spin { to { transform: rotate(360deg); } }
-@media (prefers-reduced-motion: reduce) { .agent-operation__pointer-processing { animation: none; } }
+.agent-operation__pointer-processing {
+  display: inline-block;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: agent-operation-processing-spin 0.8s linear infinite;
+}
+@keyframes agent-operation-processing-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .agent-operation__pointer-processing {
+    animation: none;
+  }
+}