.workflow--robotic {
  container: automation / inline-size;
  display: block;
  position: relative;
  isolation: isolate;
  padding: 29px 24px 18px;
  background: var(--robot-surface, #e5efdf);
  color: var(--robot-ink, #274d36);
  overflow: hidden;
  --robot-play: paused;
}
.workflow--robotic.is-running {
  --robot-play: running;
}
.workflow--robotic .workflow-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}
.workflow--robotic .workflow-title {
  font-size: clamp(32px, 3vw, 41px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
.automation-indicator {
  position: relative;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 50%;
  background: var(--robot-indicator, #f7faf3);
  color: var(--robot-muted, #50775a);
  flex-shrink: 0;
}
.automation-indicator i {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--robot-idle, #7b9d72);
}
.is-running .automation-indicator i {
  background: var(--robot-accent, #2e6b4c);
}
.automation-stage {
  position: relative;
  height: 446px;
  margin-top: 22px;
  isolation: isolate;
}
.automation-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: -1;
}
.automation-wire {
  stroke: var(--robot-wire, #a6bfa1);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  marker-end: url(#automation-arrow);
}
.automation-wire-signal {
  stroke: var(--robot-signal, #39794d);
  stroke-width: 1.25;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  animation: automation-wire 2.1s linear infinite;
  animation-play-state: var(--robot-play);
  transition: opacity 0.35s;
}
.automation-packet {
  fill: var(--robot-accent, #2e6b4c);
  opacity: 0;
  transition: opacity 0.35s;
}
.automation-packet--1 {
  fill: var(--robot-packet-soft, #62936a);
}
.automation-packet--2 {
  fill: var(--robot-packet-faint, #91b487);
}
.automation-wires[data-auto-ready]
  .automation-edge.is-active
  .automation-wire-signal,
.automation-wires[data-auto-ready]
  .automation-edge.is-active
  .automation-packet {
  opacity: 1;
}
.automation-edge.is-active .automation-wire {
  stroke: var(--robot-complete-border, #6b9b71);
}
.automation-edge[data-auto-edge='feedback'] .automation-wire {
  stroke-dasharray: 3 5;
}
.automation-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 10px;
  height: 65px;
  border: 1px solid var(--robot-border, #bbd1b3);
  border-radius: 10px;
  background: var(--robot-node, #f9fcf6);
  color: var(--robot-node-ink, #2b5239);
  transition:
    background 0.45s,
    border-color 0.45s,
    transform 0.65s var(--ease);
}
.automation-node-icon {
  display: grid;
  place-items: center;
  width: 20px;
  flex-shrink: 0;
}
.automation-node-copy {
  min-width: 0;
}
.automation-node b {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
}
.automation-node small {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--robot-muted, #537158);
}
.automation-node--request {
  left: 0;
  top: 3px;
  width: 44%;
}
.automation-node--context {
  right: 0;
  top: 3px;
  width: 44%;
}
.automation-node--bot {
  left: 0;
  bottom: 10px;
  width: 46%;
}
.automation-node--api {
  right: 0;
  bottom: 10px;
  width: 46%;
}
.automation-node-check {
  display: grid;
  place-items: center;
  position: absolute;
  top: -7px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--robot-check, #d3e8c7);
  color: var(--robot-check-ink, #2a613e);
  opacity: 0;
  transform: scale(0.3);
  transition:
    transform 0.5s var(--ease),
    opacity 0.3s;
}
.automation-node.is-complete .automation-node-check {
  opacity: 1;
  transform: scale(1);
}
.automation-node.is-complete {
  border-color: var(--robot-complete-border, #87af7f);
}
.automation-node.is-active {
  background: var(--robot-active-bg, #eef8e6);
  border-color: var(--robot-active-border, #669b67);
}
.automation-node-scan {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 4px;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
}
.automation-node-scan::after {
  content: '';
  display: block;
  width: 35%;
  height: 100%;
  background: var(--robot-scan, #76a76b);
  transform: translateX(-110%);
}
.automation-node.is-active .automation-node-scan::after {
  animation: automation-scan 1.55s var(--ease) infinite;
  animation-play-state: var(--robot-play);
}
.automation-tool {
  top: 239px;
  width: 76px;
  height: 66px;
  padding: 8px 4px;
  gap: 6px;
  flex-direction: column;
  justify-content: center;
  background: var(--robot-tool, #eaf3e4);
  border-color: var(--robot-border, #b5ccac);
}
.automation-tool b {
  font-size: 11px;
  font-weight: 500;
}
.automation-tool small {
  display: none;
}
.automation-node--memory {
  left: 0;
}
.automation-node--review {
  right: 0;
}
.automation-core {
  position: absolute;
  width: 166px;
  height: 166px;
  left: 50%;
  top: 111px;
  transform: translateX(-50%);
}
.automation-mechanism {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.automation-orbit {
  stroke: var(--robot-orbit, #b8cfaf);
  stroke-width: 0.75;
  stroke-dasharray: 21 3 1 3;
}
.automation-rotor {
  transform-origin: 100px 100px;
  animation-play-state: var(--robot-play) !important;
}
.automation-rotor--outer {
  stroke: var(--robot-rotor, #547f58);
  stroke-width: 1.5;
  animation: automation-rotate 26s linear infinite;
}
.automation-rotor--inner {
  stroke: var(--robot-rotor-soft, #6c9565);
  stroke-width: 1.4;
  animation: automation-rotate 17s linear infinite reverse;
}
.automation-satellite {
  fill: var(--robot-agent, #2d6546);
  stroke: var(--robot-surface, #e5efdf);
  stroke-width: 2;
}
.automation-satellite--small {
  fill: var(--robot-satellite, #7b9e6d);
  stroke: none;
}
.automation-core-track {
  stroke: var(--robot-track, #9ebf92);
  stroke-width: 1.2;
}
.automation-core-progress {
  stroke: var(--robot-accent, #2e6b4c);
  stroke-width: 3;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transform: rotate(-90deg);
  transform-origin: 100px 100px;
  transition: stroke-dashoffset 1.2s var(--ease);
}
.automation-core-body {
  position: absolute;
  inset: 29px;
  border-radius: 50%;
  padding: 15px 7px 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: var(--robot-agent, #2d6546);
  color: var(--robot-agent-ink, #fff);
  box-shadow: 0 10px 24px var(--robot-shadow, #244f3c20);
  transition: background 0.8s;
}
.automation-core-body b {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 600;
  margin-top: 7px;
}
.automation-core-body small {
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  margin-top: 3px;
  color: var(--robot-agent-muted, #deefd8);
  max-width: 90px;
  min-height: 26px;
}
.automation-pixels {
  width: 22px;
  height: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.automation-pixels i {
  background: var(--robot-pixel, #b8dca7);
  border-radius: 1px;
  transition: background 0.5s;
}
.automation-pixels i:nth-child(2n) {
  background: var(--robot-pixel-light, #f1f9e9);
}
.automation-stage[data-phase='2'] .automation-pixels i {
  animation: automation-pixel 1.8s var(--ease) infinite;
  animation-delay: calc(var(--cell) * -0.14s);
  animation-play-state: var(--robot-play);
}
.automation-stage[data-phase='2'] .automation-rotor--inner {
  animation-duration: 6s;
}
.automation-stage[data-phase='3'] .automation-core-body {
  background: var(--robot-agent-working, #245e3e);
}
.automation-stage[data-phase='3'] .automation-node--bot,
.automation-stage[data-phase='3'] .automation-node--api {
  animation: automation-action 0.75s var(--ease) both;
  animation-play-state: var(--robot-play);
}
.automation-stage[data-phase='3'] .automation-node--api {
  animation-delay: 0.18s;
}
.automation-core-seal {
  position: absolute;
  display: grid;
  place-items: center;
  right: 24px;
  bottom: 21px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--robot-seal, #e5f2dc);
  color: var(--robot-accent, #2e6b4c);
  opacity: 0;
  transform: scale(0.25) rotate(-30deg);
  transition:
    opacity 0.4s,
    transform 0.7s var(--ease);
}
.automation-stage[data-phase='5'] .automation-core-seal {
  opacity: 1;
  transform: scale(1) rotate(0);
}
.automation-stage[data-phase='5'] .automation-pixels i {
  background: var(--robot-pixel-done, #e2f4d5);
}
.automation-footer {
  display: block;
  margin-top: 5px;
}
.automation-progress {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  margin-bottom: 15px;
}
.automation-progress span {
  height: 3px;
  background: var(--robot-progress, #c6d9bd);
  border-radius: 2px;
  transition:
    background 0.5s,
    transform 0.5s;
}
.automation-progress span.is-complete {
  background: var(--robot-complete, #83a975);
}
.automation-progress span.is-active {
  background: var(--robot-accent, #2e6b4c);
  transform: scaleY(1.5);
}
.automation-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.automation-caption {
  font-size: 10px;
  color: var(--robot-muted, #54725b);
  line-height: 1.4;
  min-width: 0;
}
.automation-status {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--robot-status, #2f573b);
  margin-top: 5px;
  min-height: 34px;
  max-width: 250px;
}
.automation-controls {
  display: flex;
  flex-shrink: 0;
  gap: 2px;
}
.automation-controls[hidden] {
  display: none;
}
.automation-controls button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--robot-controls, #2d5e40);
  background: transparent;
  border-radius: 8px;
}
.automation-controls button:hover {
  background: var(--robot-hover, #d1e3c9);
}
.workflow--robotic.is-static .automation-packet {
  display: none;
}
.workflow--robotic.is-static .automation-rotor,
.workflow--robotic.is-static .automation-pixels i,
.workflow--robotic.is-static .automation-node,
.workflow--robotic.is-static .automation-node-scan::after,
.workflow--robotic.is-static .automation-wire-signal {
  animation: none !important;
}
@keyframes automation-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes automation-wire {
  to {
    stroke-dashoffset: -32;
  }
}
@keyframes automation-scan {
  0% {
    transform: translateX(-110%);
  }
  70%,
  100% {
    transform: translateX(390%);
  }
}
@keyframes automation-pixel {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate(calc(var(--cell-x) * 5px), calc(var(--cell-y) * 5px))
      scale(0.5);
    opacity: 0.4;
  }
  70% {
    transform: translate(0, 0) scale(0.85);
    opacity: 1;
  }
}
@keyframes automation-action {
  from {
    clip-path: inset(0 0 100%);
    transform: translateY(7px);
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
  }
}
@container automation (min-width: 590px) {
  .automation-stage {
    height: 390px;
    margin-top: 14px;
  }
  .automation-node--request {
    top: 74px;
    left: 0;
    width: 150px;
  }
  .automation-node--context {
    top: 244px;
    left: 0;
    right: auto;
    width: 150px;
  }
  .automation-node--bot {
    top: 74px;
    bottom: auto;
    right: 0;
    left: auto;
    width: 150px;
  }
  .automation-node--api {
    top: 244px;
    bottom: auto;
    right: 0;
    width: 150px;
  }
  .automation-core {
    top: 107px;
  }
  .automation-tool {
    left: calc(50% - 46px);
    right: auto;
    width: 92px;
    height: 56px;
    flex-direction: row;
    gap: 6px;
  }
  .automation-node--memory {
    top: 0;
  }
  .automation-node--review {
    top: 326px;
  }
  .automation-status {
    min-height: 17px;
    max-width: none;
  }
}
@media (max-width: 767px) {
  .workflow--robotic {
    padding: 25px 18px 15px;
  }
  .workflow--robotic .workflow-title {
    font-size: 34px;
  }
  .automation-stage {
    margin-top: 24px;
  }
  .automation-node {
    padding: 8px;
    gap: 6px;
  }
  .automation-node-icon {
    width: 17px;
  }
  .automation-node-icon svg {
    width: 17px;
    height: 17px;
  }
  .automation-tool {
    width: 70px;
    padding: 6px;
  }
  .automation-footer-row {
    gap: 8px;
  }
  .automation-caption {
    font-size: 10px;
  }
  .automation-status {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .workflow--robotic *,
  .workflow--robotic *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
  .automation-packet {
    display: none;
  }
}

.automation-arrow {
  stroke: var(--robot-arrow, #769773);
}