.canvas {
  position: relative;
  overflow: hidden;
  background: #ededed;
  width: 100%;
  height: 100%;
}

.canvas .react-flow {
  width: 100%;
  height: 100%;
}

.workflow-node {
  max-width: 400px;
  background: #fff;
  border: 1px solid var(--rr-border);
  border-radius: 16px;
  padding: 10px 16px 10px 10px;
  color: #8f8f8f;
  font-size: 12px;
  transition:
    box-shadow 0.15s var(--cubic-enter, cubic-bezier(0.4, 0, 0.2, 1)),
    background-color 1s var(--cubic-enter, cubic-bezier(0.4, 0, 0.2, 1));
  cursor: pointer;
  position: relative;
}

.node-error {
  position: absolute;
  top: -12px;
  right: 3px;
  width: 12px;
  height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rr-danger, #ef4444);
  cursor: help;
  z-index: 5;
  font-size: 11px;
}

.node-error .tooltip {
  display: none;
  position: absolute;
  top: 22px;
  right: 0;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--rr-border, #e5e7eb);
  background: var(--rr-card, #fff);
  color: var(--rr-text, #111827);
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}

.node-error:hover .tooltip {
  display: block;
}

.node-error .tooltip .item {
  color: var(--rr-danger, #ef4444);
}

.workflow-node:hover {
  box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
  border-color: rgb(0 0 0 / 6%);
}

.workflow-node.selected {
  border-color: transparent !important;
  box-shadow: 0 0 0 1px #afafaf;
}

.node-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
}

.node-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
}

.icon-navigate {
  background: #667eea;
}

.icon-click {
  background: #f5576c;
}

.icon-fill {
  background: #4facfe;
}

.icon-wait {
  background: #43e97b;
}

.icon-extract {
  background: #fa709a;
}

.icon-http {
  background: #30cfd0;
}

.icon-script {
  background: #a8edea;
  color: #111;
}

.icon-screenshot {
  background: #06b6d4;
}

.icon-trigger {
  background: #f59e0b;
}

.icon-attr {
  background: #8b5cf6;
}

.icon-loop {
  background: #22c55e;
}

.icon-frame {
  background: #64748b;
}

.icon-download {
  background: #34d399;
}

.icon-if {
  background: #ff9a56;
}

.icon-foreach,
.icon-while {
  background: #fcb69f;
  color: #111;
}

.icon-assert {
  background: #16a34a;
}

.icon-key {
  background: #8ec5fc;
  color: #111;
}

.icon-dblclick {
  background: #fe5196;
}

.icon-drag {
  background: #f97316;
}

.icon-scroll {
  background: #0ea5e9;
}

.icon-openTab,
.icon-switchTab,
.icon-closeTab {
  background: #96fbc4;
  color: #111;
}

.icon-delay {
  background: #f6d365;
  color: #111;
}

.icon-triggerEvent {
  background: #f59e0b;
}

.icon-setAttribute {
  background: #8b5cf6;
}

.icon-loopElements {
  background: #22c55e;
}

.icon-switchFrame {
  background: #64748b;
}

.icon-handleDownload {
  background: #34d399;
}

.node-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.node-name {
  font-size: 12px;
  font-weight: 500;
  color: #0d0d0d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
  text-align: left;
}

.node-subtitle {
  font-size: 10px;
  color: #8f8f8f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.node-handle.react-flow__handle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px #cdcdcd;
  transition: all 0.15s ease;
  will-change: transform;
}

.react-flow__handle-left.node-handle {
  transform-origin: bottom right;
}

.react-flow__handle-right.node-handle {
  transform-origin: bottom left;
}

.react-flow__node .node-handle.unconnected.react-flow__handle {
  opacity: 1 !important;
}

.react-flow__node .node-handle.connected.react-flow__handle {
  opacity: 0 !important;
}

.react-flow__node:hover .node-handle.react-flow__handle {
  opacity: 1 !important;
}

.node-handle.react-flow__handle:hover {
  box-shadow: 0 0 0 2px #cdcdcd;
  transform: scale(1.4);
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke: #8f8f8f !important;
}

.react-flow__background {
  background-color: #ededed;
}

.react-flow__node.rr-node-plain {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.react-flow__node.rr-node-plain.selected {
  box-shadow: none !important;
}

.if-cases {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.case-row {
  position: relative;
  height: 26px;
  border-radius: 6px;
  background: rgb(0 0 0 / 3%);
  color: #8f8f8f;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.case-row.else-row {
  opacity: 0.85;
}

.case-label {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
