:root {
  /* Light Mode Colors */
  --handle-color-string-light: #1890ff;
  --handle-color-integer-light: #52c41a;
  --handle-color-float-light: #13c2c2;
  --handle-color-boolean-light: #fa8c16;
  --handle-color-combo-light: #722ed1;
  --handle-color-code-light: #8c8c8c;
  --handle-color-object-light: #4F46E5; /* 深蓝紫 (Indigo) */
  --handle-color-array-light: #DB2777; /* 粉红 (Pink) */
  --handle-color-binary-light: #475569; /* 岩灰 (Slate) */
  --handle-color-any-border-light: #1890ff;
  --handle-color-default-light: #9CA3AF; /* 默认灰色 */

  /* Dark Mode Colors */
  --handle-color-string-dark: #63b3ed;
  --handle-color-integer-dark: #a0d911;
  --handle-color-float-dark: #36cfc9;
  --handle-color-boolean-dark: #ffa940;
  --handle-color-combo-dark: #b37feb;
  --handle-color-code-dark: #bfbfbf;
  --handle-color-object-dark: #818CF8; /* 亮蓝紫 (Indigo) */
  --handle-color-array-dark: #F472B6; /* 亮粉红 (Pink) */
  --handle-color-binary-dark: #94A3B8; /* 亮岩灰 (Slate) */
  --handle-color-any-border-dark: #63b3ed;
  --handle-color-default-dark: #6B7280; /* 默认灰色 */

  /* Other shared variables */
  --handle-border-light: white;
  --handle-border-dark: #4a5568; /* gray-700 */
  --handle-any-bg-light: rgba(249, 250, 251, 1); /* gray-50 */
  --handle-any-bg-dark: rgba(31, 41, 55, 1); /* gray-800 */
  --handle-hover-border-light: #faad14;
  --handle-hover-border-dark: #f6e05e; /* yellow-400 */
  --handle-any-hover-bg-light: rgba(24, 144, 255, 0.1);
  --handle-any-hover-bg-dark: rgba(99, 179, 237, 0.1);
}

/* 插槽 Handle 样式 */
.handle {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--handle-border-light) !important;
  /* 提高层级，确保在拖拽手柄之上 */
  z-index: 20;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* 默认使用 STRING 颜色，因为它是最常见的？或者用一个通用默认色？ */
  /* 暂时保留 STRING 蓝色作为基础背景，具体类型会覆盖 */
  background-color: var(--handle-color-string-light) !important;
  border-radius: 50%; /* 确保是圆形 */
  box-sizing: border-box; /* 包含边框 */
}

/* 暗色模式基础边框 */
:global(.dark) .handle {
  border-color: var(--handle-border-dark) !important;
  background-color: var(--handle-color-string-dark) !important; /* 暗色模式基础背景 */
}


/* 'WILDCARD' 或 'CONVERTIBLE_ANY' 类型插槽样式 */
.handleAny {
  background-color: var(--handle-any-bg-light) !important;
  border-width: 2px !important;
  border-style: dashed !important;
  border-color: var(--handle-color-any-border-light) !important;
}

:global(.dark) .handleAny {
  background-color: var(--handle-any-bg-dark) !important;
  border-color: var(--handle-color-any-border-dark) !important;
}

.handleAny:hover {
  background-color: var(--handle-any-hover-bg-light) !important;
  border-color: var(--handle-hover-border-light) !important;
}

:global(.dark) .handleAny:hover {
  background-color: var(--handle-any-hover-bg-dark) !important;
  border-color: var(--handle-hover-border-dark) !important;
}

/* Handle 位置 */
.handleLeft {
  left: -6px !important;
  cursor: w-resize !important;
}

.handleRight {
  right: -6px !important;
  cursor: e-resize !important;
}

/* 新增：预览图标状态下的位置调整 */
.handleAsPreviewIcon.handleLeft {
  left: -9px !important; /* 18px width / 2 = 9px */
}
.handleAsPreviewIcon.handleRight {
  right: -9px !important; /* 18px width / 2 = 9px */
}


/* Handle 悬停效果 */
.handle:hover {
  /* 移除 handle-any 的悬停背景覆盖 (通过特异性) */
  border-color: var(--handle-hover-border-light) !important;
  transform: translateY(-50%) scale(1.2) !important;
}

:global(.dark) .handle:hover {
  border-color: var(--handle-hover-border-dark) !important;
}

/* --- 按类型定义样式 --- */

/* STRING (蓝色) */
.handleTypeSTRING { background-color: var(--handle-color-string-light) !important; }
:global(.dark) .handleTypeSTRING { background-color: var(--handle-color-string-dark) !important; }
.handleTypeSTRING.handleAny { border-color: var(--handle-color-string-light) !important; }
:global(.dark) .handleTypeSTRING.handleAny { border-color: var(--handle-color-string-dark) !important; }

/* INTEGER (绿色) */
.handleTypeINTEGER { background-color: var(--handle-color-integer-light) !important; }
:global(.dark) .handleTypeINTEGER { background-color: var(--handle-color-integer-dark) !important; }
.handleTypeINTEGER.handleAny { border-color: var(--handle-color-integer-light) !important; }
:global(.dark) .handleTypeINTEGER.handleAny { border-color: var(--handle-color-integer-dark) !important; }

/* COMBO (紫色) */
.handleTypeCOMBO { background-color: var(--handle-color-combo-light) !important; }
:global(.dark) .handleTypeCOMBO { background-color: var(--handle-color-combo-dark) !important; }
.handleTypeCOMBO.handleAny { border-color: var(--handle-color-combo-light) !important; }
:global(.dark) .handleTypeCOMBO.handleAny { border-color: var(--handle-color-combo-dark) !important; }

/* FLOAT (青色) */
.handleTypeFLOAT { background-color: var(--handle-color-float-light) !important; }
:global(.dark) .handleTypeFLOAT { background-color: var(--handle-color-float-dark) !important; }
.handleTypeFLOAT.handleAny { border-color: var(--handle-color-float-light) !important; }
:global(.dark) .handleTypeFLOAT.handleAny { border-color: var(--handle-color-float-dark) !important; }

/* BOOLEAN (橙色) */
.handleTypeBOOLEAN { background-color: var(--handle-color-boolean-light) !important; }
:global(.dark) .handleTypeBOOLEAN { background-color: var(--handle-color-boolean-dark) !important; }
.handleTypeBOOLEAN.handleAny { border-color: var(--handle-color-boolean-light) !important; }
:global(.dark) .handleTypeBOOLEAN.handleAny { border-color: var(--handle-color-boolean-dark) !important; }

/* CODE (灰色) */
.handleTypeCODE { background-color: var(--handle-color-code-light) !important; }
:global(.dark) .handleTypeCODE { background-color: var(--handle-color-code-dark) !important; }
.handleTypeCODE.handleAny { border-color: var(--handle-color-code-light) !important; }
:global(.dark) .handleTypeCODE.handleAny { border-color: var(--handle-color-code-dark) !important; }

/* OBJECT (深蓝紫/亮蓝紫) */
.handleTypeOBJECT { background-color: var(--handle-color-object-light) !important; }
:global(.dark) .handleTypeOBJECT { background-color: var(--handle-color-object-dark) !important; }
.handleTypeOBJECT.handleAny { border-color: var(--handle-color-object-light) !important; }
:global(.dark) .handleTypeOBJECT.handleAny { border-color: var(--handle-color-object-dark) !important; }

/* ARRAY (粉红/亮粉红) */
.handleTypeARRAY { background-color: var(--handle-color-array-light) !important; }
:global(.dark) .handleTypeARRAY { background-color: var(--handle-color-array-dark) !important; }
.handleTypeARRAY.handleAny { border-color: var(--handle-color-array-light) !important; }
:global(.dark) .handleTypeARRAY.handleAny { border-color: var(--handle-color-array-dark) !important; }

/* BINARY (岩灰/亮岩灰) */
.handleTypeBINARY { background-color: var(--handle-color-binary-light) !important; }
:global(.dark) .handleTypeBINARY { background-color: var(--handle-color-binary-dark) !important; }
.handleTypeBINARY.handleAny { border-color: var(--handle-color-binary-light) !important; }
:global(.dark) .handleTypeBINARY.handleAny { border-color: var(--handle-color-binary-dark) !important; }


/* 支持多个连接的输入插槽 (方形) */
.handleMulti {
  /* border-radius: 0 !important; */ /* 方形 - 已由 JS 动态控制 */
}

/* BUTTON: 不显示 Handle，无需样式 */
/* WILDCARD: 使用 .handleAny 样式 */
/* CONVERTIBLE_ANY: 使用 .handleAny 样式 */

/* 新增：当 Handle 作为预览图标时的样式 */
.handleAsPreviewIcon {
  width: 18px !important; /* 增大图标尺寸 */
  height: 18px !important; /* 增大图标尺寸 */
  background-color: transparent !important; /* 强制背景透明 */
  border-color: transparent !important; /* 强制边框透明 */
  border-width: 0 !important; /* 强制无边框宽度 */
  border-style: none !important; /* 强制无边框样式 */
  box-shadow: none !important; /* 移除可能的阴影 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%233B82F6' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E%0A") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important; /* 确保图标完整显示 */
  border-radius: 0 !important; /* 图标通常不需要圆角 */
  /* cursor: default !important; */ /* 移除这个，让 Handle 自身的 cursor 生效以允许拖拽 */
  /* 确保覆盖所有可能的 ::before 和 ::after 伪元素样式 */
  /* 通常不需要，但以防万一 */
}
.handleAsPreviewIcon::before,
.handleAsPreviewIcon::after {
  display: none !important;
}


:global(.dark) .handleAsPreviewIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%2360A5FA' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z' /%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 12a3 3 0 11-6 0 3 3 0 016 0z' /%3E%3C/svg%3E%0A") !important;
  background-color: transparent !important; /* 再次确保暗色模式背景透明 */
  border-color: transparent !important; /* 再次确保暗色模式边框透明 */
}

/* 移除旧的隐藏样式 */
/* .handleHiddenWhenPreviewing { ... } */

/* 新增：多输入插槽的子 Handle 样式 */
.childHandle {
  /* 使 Handle 组件本身完全透明并填充其父容器 (.runwaySlice) */
  background-color: transparent !important;
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important; /* 无独立圆角 */
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  /* 确保它在视觉上不贡献任何样式，仅作为交互层 */
  /* position, top, transform 等由 .handle 类或 Vue Flow 默认处理，或由父级控制 */
  /* 移除在 BaseNode.vue 中 getStandardHandleStyles(true) 设置的特定尺寸和圆点样式 */
}

/* .dark .childHandle 不需要特殊规则，因为基础 .childHandle 已设为透明 */

/* 新增：跑道式多输入容器的样式 */
.multiInputRunway {
  background-color: var(--handle-color-string-light); /* 跑道本身负责填充颜色 */
  border: 2px solid var(--handle-border-light); /* 改为2px并使用与单Handle一致的边框颜色 */
  border-radius: 6px; /* 对应 Tailwind rounded-md */
  /* padding, display: flex, flex-direction: column, gap: 0px 等由 BaseNode.vue 中的 multiInputSlotContainerStyle 设置 */
  overflow: hidden; /* 确保子元素的任何溢出（理论上不应有）被裁剪 */
  position: relative; /* 确保内部绝对定位的元素（如隐藏的主Handle）正确对齐 */
}

:global(.dark) .multiInputRunway {
  background-color: var(--handle-color-string-dark); /* 跑道本身负责填充颜色 */
  border: 2px solid var(--handle-border-dark); /* 改为2px并使用与单Handle一致的边框颜色 */
}

/* 新增：跑道中每个逻辑切片（包裹子Handle的div）的样式 */
.runwaySlice {
  /* 这个切片现在应该是透明的，让父级 .multiInputRunway 的背景显示出来 */
  background-color: transparent !important;
  /* height 由 BaseNode.vue 中的 :style 设置 */
  /* display: flex, alignItems: center, position: relative 也由 BaseNode.vue 中的 :style 设置 */
  /* 无独立边框或外边距，以实现融合效果 */
  border: none; /* 切片自身无边框，边框在 .multiInputRunway 上 */
  margin: 0;
  padding: 0;
  /* 如果需要，可以添加一个非常细微的内部边框来模拟Blender中插槽之间的分隔，但这会使其不完全融合 */
  /* box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.1); */
}

/* :global(.dark) .runwaySlice 的特定暗色模式规则不再需要，因为它总是透明的 */
