/**
 * 信风画布样式 — 暗色系 + 毛玻璃质感
 *
 * 遵循项目 CSS Custom Properties 体系。
 */

/* ─── 页面布局 ──────────────────────────────────────── */

.tw-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: transparent;
  overflow: hidden;
}

.tw-page__body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.tw-canvas {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.tw-page__error {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-2) var(--space-4);
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--border-radius-md);
  color: var(--color-error);
  font-size: var(--text-sm);
  backdrop-filter: blur(8px);
  animation: fadeInUp 0.3s var(--ease-out-expo) both;
  white-space: pre-wrap;
  max-width: 80vw;
  max-height: 50vh;
  overflow-y: auto;
}

/* ─── 工具栏 ────────────────────────────────────────── */

.tw-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
}

.tw-toolbar__left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tw-toolbar__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.02em;
  cursor: default;
}

.tw-toolbar__name-input {
  padding: var(--space-1) var(--space-2);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-accent);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  outline: none;
  width: 180px;
}

.tw-toolbar__name-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  cursor: default;
}

.tw-toolbar__id {
  font-size: 10px;
  color: var(--color-text-quaternary);
  font-family: var(--font-mono);
  opacity: 0.5;
}

.tw-toolbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.tw-toolbar__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
  background: transparent;
}

.tw-toolbar__btn--run {
  color: var(--color-success);
  border-color: rgba(34, 197, 94, 0.3);
}
.tw-toolbar__btn--run:hover {
  background: rgba(34, 197, 94, 0.1);
  border-color: rgba(34, 197, 94, 0.5);
}

.tw-toolbar__btn--stop {
  color: var(--color-error);
  border-color: rgba(239, 68, 68, 0.3);
}
.tw-toolbar__btn--stop:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
}

.tw-toolbar__btn--save {
  color: var(--color-accent);
  border-color: rgba(59, 130, 246, 0.3);
}
.tw-toolbar__btn--save:hover {
  background: rgba(59, 130, 246, 0.1);
  border-color: rgba(59, 130, 246, 0.5);
}

.tw-toolbar__saved-hint {
  font-size: var(--text-xs);
  color: var(--color-success);
  opacity: 1;
  animation: saved-fade 3s ease-out forwards;
}

.tw-toolbar__btn--ghost {
  color: var(--color-text-tertiary);
  border-color: transparent;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-base);
}
.tw-toolbar__btn--ghost:hover {
  color: var(--color-text-primary);
  background: var(--glass-bg-hover);
}

.tw-toolbar__btn-icon {
  font-size: 10px;
}

.tw-toolbar__status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.tw-toolbar__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-tertiary);
  transition: background var(--duration-normal) var(--ease-out-expo);
}

.tw-toolbar__status--running .tw-toolbar__dot {
  background: var(--color-success);
  animation: pulse-glow 1.5s ease-in-out infinite;
}

/* ─── 画布容器 ──────────────────────────────────────── */

.tw-canvas {
  flex: 1;
  height: 100%;
}

.tw-canvas .react-flow__background {
  background: transparent !important;
}

/* 覆盖 xyflow 默认节点样式（白色背景 + padding） */
.tw-canvas .react-flow__node {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tw-controls {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius-md) !important;
  backdrop-filter: blur(var(--glass-blur));
}

.tw-controls button {
  background: transparent !important;
  border: none !important;
  color: var(--color-text-secondary) !important;
  transition: color var(--duration-fast) var(--ease-out-expo);
}
.tw-controls button:hover {
  color: var(--color-text-primary) !important;
}

.tw-minimap {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--border-radius-md) !important;
}

/* ─── 节点通用 ──────────────────────────────────────── */

.tw-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  min-width: 100px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(12px);
  transition: all var(--duration-normal) var(--ease-out-expo);
  cursor: grab;
}

.tw-node:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.tw-node--selected {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 2px var(--color-accent-subtle), var(--shadow-glow);
}

/* 节点运行时态：信封工作中（琥珀色静态光环） */
.tw-node--envelope {
  box-shadow:
    0 0 0 3px rgba(245, 158, 11, 0.6),
    0 0 28px 6px rgba(245, 158, 11, 0.45);
}

/* 节点运行时态：busy 工作中（蓝色脉冲闪烁） */
@keyframes tw-node-busy-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(59, 130, 246, 0.8),
      0 0 24px 4px rgba(59, 130, 246, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(59, 130, 246, 0.5),
      0 0 38px 10px rgba(59, 130, 246, 0.85);
  }
}
.tw-node--busy {
  animation: tw-node-busy-pulse 1.2s ease-in-out infinite;
}

/* 同时 busy + envelope：内圈蓝色闪烁 + 外圈琥珀色静态扩散
   蓝色集中在贴近节点（0-24px），琥珀色推到外圈（24-56px），不再叠合发白 */
@keyframes tw-node-busy-envelope-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(59, 130, 246, 0.85),
      0 0 18px 2px rgba(59, 130, 246, 0.6),
      0 0 0 8px rgba(245, 158, 11, 0.55),
      0 0 48px 14px rgba(245, 158, 11, 0.45);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(59, 130, 246, 0.55),
      0 0 28px 6px rgba(59, 130, 246, 0.85),
      0 0 0 10px rgba(245, 158, 11, 0.5),
      0 0 56px 18px rgba(245, 158, 11, 0.4);
  }
}
.tw-node--busy.tw-node--envelope {
  animation: tw-node-busy-envelope-pulse 1.4s ease-in-out infinite;
}

.tw-node__icon {
  font-size: var(--text-lg);
  line-height: 1;
}

.tw-node__label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
  white-space: nowrap;
}

.tw-node__sub {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tw-node__memo {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  padding: 3px 6px;
  border-left: 2px solid rgba(99, 179, 237, 0.4);
  background: rgba(99, 179, 237, 0.05);
  border-radius: 2px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 80px;
  overflow: hidden;
  line-height: 1.4;
}
.tw-node__memo::before {
  content: '备注：';
  font-weight: 600;
  color: var(--color-text-tertiary);
}

.tw-node__chat-btn {
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--glass-border);
  background: transparent;
  font-size: var(--text-xs);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}
.tw-node__chat-btn--active {
  color: var(--color-text-secondary);
  border-color: rgba(59, 130, 246, 0.3);
}
.tw-node__chat-btn--active:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--color-accent-subtle);
}
.tw-node__chat-btn--idle {
  color: var(--color-text-quaternary);
  border-color: transparent;
  background: rgba(255, 255, 255, 0.02);
  cursor: default;
  font-style: italic;
}

/* 节点变体色 */
.tw-node--entry { border-color: rgba(59, 130, 246, 0.3); }
.tw-node--entry:hover { border-color: rgba(59, 130, 246, 0.5); }

.tw-node--output { border-color: rgba(34, 197, 94, 0.3); }
.tw-node--output:hover { border-color: rgba(34, 197, 94, 0.5); }

.tw-node--agent { border-color: rgba(245, 158, 11, 0.3); }
.tw-node--agent:hover { border-color: rgba(245, 158, 11, 0.5); }

.tw-node--meeting { border-color: rgba(168, 85, 247, 0.3); }
.tw-node--meeting:hover { border-color: rgba(168, 85, 247, 0.5); }

.tw-node--note {
  border-color: rgba(251, 191, 36, 0.25);
  background: rgba(251, 191, 36, 0.05);
}
.tw-node--note:hover { border-color: rgba(251, 191, 36, 0.4); }

/* Handle 样式 — 光边效果，颜色跟随节点主色调 */
.tw-handle {
  width: 10px !important;
  height: 10px !important;
  background: var(--color-bg-primary) !important;
  border: 2px solid var(--color-accent) !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.4), 0 0 12px rgba(59, 130, 246, 0.15) !important;
  transition: all var(--duration-fast) var(--ease-out-expo);
}
.tw-handle:hover {
  transform: scale(1.5);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.6), 0 0 20px rgba(59, 130, 246, 0.3) !important;
}

/* Handle 光边 — 按节点类型着色 */
.tw-node--entry .tw-handle {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 6px rgba(59, 130, 246, 0.5), 0 0 14px rgba(59, 130, 246, 0.2) !important;
}
.tw-node--entry .tw-handle:hover {
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.7), 0 0 22px rgba(59, 130, 246, 0.35) !important;
}

.tw-node--output .tw-handle {
  border-color: #22c55e !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5), 0 0 14px rgba(34, 197, 94, 0.2) !important;
}
.tw-node--output .tw-handle:hover {
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.7), 0 0 22px rgba(34, 197, 94, 0.35) !important;
}

.tw-node--agent .tw-handle {
  border-color: #f59e0b !important;
  box-shadow: 0 0 6px rgba(245, 158, 11, 0.5), 0 0 14px rgba(245, 158, 11, 0.2) !important;
}
.tw-node--agent .tw-handle:hover {
  box-shadow: 0 0 10px rgba(245, 158, 11, 0.7), 0 0 22px rgba(245, 158, 11, 0.35) !important;
}

.tw-node--meeting .tw-handle {
  border-color: #a855f7 !important;
  box-shadow: 0 0 6px rgba(168, 85, 247, 0.5), 0 0 14px rgba(168, 85, 247, 0.2) !important;
}
.tw-node--meeting .tw-handle:hover {
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.7), 0 0 22px rgba(168, 85, 247, 0.35) !important;
}

.tw-node--note .tw-handle {
  border-color: #fbbf24 !important;
  box-shadow: 0 0 6px rgba(251, 191, 36, 0.5), 0 0 14px rgba(251, 191, 36, 0.2) !important;
}
.tw-node--note .tw-handle:hover {
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.7), 0 0 22px rgba(251, 191, 36, 0.35) !important;
}

/* ─── 节点面板 ──────────────────────────────────────── */

.tw-palette {
  width: 160px;
  padding: var(--space-4) var(--space-3);
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tw-palette__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tw-palette__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.tw-palette__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--border-radius-sm);
  cursor: grab;
  transition: all var(--duration-fast) var(--ease-out-expo);
  user-select: none;
}

.tw-palette__item:hover {
  background: var(--glass-bg-hover);
}

.tw-palette__item:active {
  cursor: grabbing;
  transform: scale(0.96);
}

.tw-palette__icon {
  font-size: var(--text-base);
  line-height: 1;
}

.tw-palette__label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ─── 配置面板（画布内右侧同级） ───────────────────── */

.tw-config {
  width: 320px;
  height: 100%;
  background: var(--glass-bg);
  border-left: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s var(--ease-out-expo) both;
  flex-shrink: 0;
}

@keyframes slideInRight {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.tw-config__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.tw-config__type {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
  padding: 2px var(--space-2);
  border-radius: var(--border-radius-sm);
}

.tw-config__title {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-primary);
}

.tw-config__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--text-lg);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
}
.tw-config__close:hover {
  background: var(--glass-bg-hover);
  color: var(--color-text-primary);
}

.tw-config__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tw-config__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tw-config__label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tw-config__input {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}
.tw-config__input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}
.tw-config__input::placeholder {
  color: var(--color-text-tertiary);
}

.tw-config__textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
}
.tw-config__textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}
.tw-config__textarea::placeholder {
  color: var(--color-text-tertiary);
}

.tw-config__hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-style: italic;
}

.tw-config__select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  outline: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out-expo);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2371717a'%3E%3Cpath d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  padding-right: var(--space-8);
}
.tw-config__select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-subtle);
}
.tw-config__select option {
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
}

.tw-config__checklist {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-height: 160px;
  overflow-y: auto;
  padding: var(--space-2);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-sm);
}
.tw-config__check-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  transition: background var(--duration-fast) var(--ease-out-expo);
}
.tw-config__check-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
}
.tw-config__check-item input[type="checkbox"] {
  accent-color: var(--color-accent);
  width: 14px;
  height: 14px;
}

/* ─── 右键菜单 ──────────────────────────────────────── */

.tw-ctxmenu {
  position: absolute;
  z-index: 200;
  min-width: 160px;
  padding: var(--space-1);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius-md);
  backdrop-filter: blur(20px);
  box-shadow: var(--shadow-lg);
  animation: fadeInUp 0.15s var(--ease-out-expo) both;
}

.tw-ctxmenu__title {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tw-ctxmenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
  text-align: left;
}

.tw-ctxmenu__item:hover {
  background: var(--glass-bg-hover);
  color: var(--color-text-primary);
}

.tw-ctxmenu__item--danger:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error);
}

.tw-ctxmenu__icon {
  font-size: var(--text-xs);
  width: 16px;
  text-align: center;
}

.tw-ctxmenu__divider {
  height: 1px;
  margin: var(--space-1) var(--space-2);
  background: var(--glass-border);
}

/* ─── 工作流列表面板 ────────────────────────────────── */

.tw-wflist {
  width: 240px;
  height: 100%;
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  animation: slideInLeft 0.25s var(--ease-out-expo) both;
}

@keyframes slideInLeft {
  from { transform: translateX(-20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.tw-wflist__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.tw-wflist__title {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.tw-wflist__close {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--text-base);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
}
.tw-wflist__close:hover {
  background: var(--glass-bg-hover);
  color: var(--color-text-primary);
}

.tw-wflist__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tw-wflist__new {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px dashed var(--glass-border);
  border-radius: var(--border-radius-sm);
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out-expo);
  margin-bottom: var(--space-2);
}
.tw-wflist__new:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-subtle);
}

.tw-wflist__hint {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: var(--space-4) 0;
}

.tw-wflist__item {
  display: flex;
  align-items: center;
  border-radius: var(--border-radius-sm);
  transition: all var(--duration-fast) var(--ease-out-expo);
}
.tw-wflist__item:hover {
  background: var(--glass-bg-hover);
}

.tw-wflist__item--active {
  background: var(--color-accent-subtle);
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.tw-wflist__item-main {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tw-wflist__item-name {
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tw-wflist__item-id {
  font-size: 10px;
  color: var(--color-text-quaternary);
  font-family: var(--font-mono);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.6;
}

.tw-wflist__item-meta {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
}

.tw-wflist__item-del {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  font-size: 10px;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  opacity: 0;
  transition: all var(--duration-fast) var(--ease-out-expo);
  margin-right: var(--space-1);
}
.tw-wflist__item:hover .tw-wflist__item-del {
  opacity: 1;
}
.tw-wflist__item-del:hover {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-error);
}


/* ─── Human Gate 节点（暂停点） ─── */
/* 普通矩形节点，金黄色边框，跟其他节点同构 */
.tw-node--gate { border-color: rgba(234, 179, 8, 0.3); }
.tw-node--gate:hover { border-color: rgba(234, 179, 8, 0.5); }

.tw-node--gate .tw-node__icon {
  font-size: 22px;
  color: #eab308;
}
.tw-node--gate .tw-node__sub {
  color: #eab308;
  font-weight: var(--font-medium);
}

/* waiting 时琥珀色脉冲闪烁（信封暂停，等待人类介入） */
@keyframes tw-gate-waiting-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(245, 158, 11, 0.8),
      0 0 20px 4px rgba(245, 158, 11, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(245, 158, 11, 0.5),
      0 0 36px 8px rgba(245, 158, 11, 0.8);
  }
}
.tw-node--gate-waiting {
  animation: tw-gate-waiting-pulse 1.2s ease-in-out infinite;
}

.tw-node--gate .tw-handle {
  border-color: #eab308 !important;
  box-shadow: 0 0 6px rgba(234, 179, 8, 0.5), 0 0 14px rgba(234, 179, 8, 0.2) !important;
}
.tw-node--gate .tw-handle:hover {
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.7), 0 0 22px rgba(234, 179, 8, 0.35) !important;
}
