@nexface/tools 0.1.14 → 0.1.15-alpha.0

package/dist/styles.css

@@ -1,722 +1,80 @@
-.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);
-  transition:
-    inset 0.12s ease,
-    width 0.12s ease,
-    height 0.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(0.22, 1, 0.36, 1),
-    opacity 0.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, 0.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, 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 {
-  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, 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%;
-  }
-}
+.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%; } }
 
-.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;
@@ -745,9 +103,7 @@
 }
 .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;
@@ -761,57 +117,16 @@
   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: 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__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__stop {
   min-width: 84px;
   height: 38px;
@@ -824,13 +139,8 @@
   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%);
@@ -841,116 +151,36 @@
   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 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__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__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 0.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 .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(0.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(.985); } to { opacity: 1; transform: scale(1); } }
 @media (prefers-reduced-motion: reduce) {
   .agent-operation__surface,
-  .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__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__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;
-  }
-}
+.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; } }