/* ==========================================================
   zuoekai-ai-pipeline.css — 视觉管线编辑器组件（Phase 3）
   命名空间：zuoekai-ai-pipeline-*
   ========================================================== */

/* ── 布局容器 ── */
.zuoekai-ai-pipeline-layout {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	background: #0f172a;
	color: #e2e8f0;
	overflow: hidden;
	position: relative;
}

/* ── 工具栏 ── */
.zuoekai-ai-pipeline-toolstrip {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	height: 48px;
	min-height: 48px;
	background: rgba(15,23,42,0.95);
	border-bottom: 1px solid rgba(148,163,184,0.1);
	flex-shrink: 0;
}

.zuoekai-ai-pipeline-toolstrip__left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex-shrink: 0;
}

.zuoekai-ai-pipeline-toolstrip__title {
	font-size: 12px;
	font-weight: 600;
	color: rgba(148,163,184,0.7);
	white-space: nowrap;
}

.zuoekai-ai-pipeline-toolstrip__workflow-name {
	font-size: 13px;
	font-weight: 500;
	color: #e2e8f0;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.zuoekai-ai-pipeline-toolstrip__center {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1;
	justify-content: center;
}

.zuoekai-ai-pipeline-toolstrip__right {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.zuoekai-ai-pipeline-toolstrip__divider {
	width: 1px;
	height: 20px;
	background: rgba(148,163,184,0.15);
	margin: 0 4px;
}

.zuoekai-ai-pipeline-toolstrip__btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: #94a3b8;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}
.zuoekai-ai-pipeline-toolstrip__btn svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.zuoekai-ai-pipeline-toolstrip__btn:hover {
	background: rgba(99,102,241,0.12);
	color: #e2e8f0;
}
.zuoekai-ai-pipeline-toolstrip__btn:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.zuoekai-ai-pipeline-toolstrip__btn--primary {
	background: rgba(99,102,241,0.18);
	color: #a5b4fc;
}
.zuoekai-ai-pipeline-toolstrip__btn--primary:hover {
	background: rgba(99,102,241,0.3);
	color: #c7d2fe;
}
.zuoekai-ai-pipeline-toolstrip__btn--accent {
	background: rgba(251,191,36,0.12);
	color: #fcd34d;
}
.zuoekai-ai-pipeline-toolstrip__btn--accent:hover {
	background: rgba(251,191,36,0.22);
	color: #fde68a;
}

/* ── 主体三栏 ── */
.zuoekai-ai-pipeline-body {
	display: flex;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

/* ── 左侧节点货架 ── */
.zuoekai-ai-pipeline-node-shelf {
	width: 200px;
	min-width: 160px;
	background: rgba(15,23,42,0.8);
	border-right: 1px solid rgba(148,163,184,0.1);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	flex-shrink: 0;
}

.zuoekai-ai-pipeline-node-shelf__header {
	padding: 10px 12px 6px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(148,163,184,0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}

.zuoekai-ai-pipeline-node-shelf__search-wrap {
	padding: 4px 10px 8px;
	flex-shrink: 0;
}

.zuoekai-ai-pipeline-node-shelf__list {
	flex: 1;
	overflow-y: auto;
	padding-bottom: 8px;
}

.zuoekai-ai-pipeline-node-shelf__group {
	margin-bottom: 4px;
}

.zuoekai-ai-pipeline-node-shelf__group-title {
	padding: 6px 12px 3px;
	font-size: 10px;
	font-weight: 600;
	color: rgba(148,163,184,0.45);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.zuoekai-ai-pipeline-node-shelf__item {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	cursor: grab;
	font-size: 12px;
	color: #94a3b8;
	border-radius: 4px;
	margin: 1px 6px;
	transition: background 0.12s, color 0.12s;
}
.zuoekai-ai-pipeline-node-shelf__item:hover {
	background: rgba(99,102,241,0.1);
	color: #e2e8f0;
}
.zuoekai-ai-pipeline-node-shelf__item--dragging {
	opacity: 0.5;
}
.zuoekai-ai-pipeline-node-shelf__item-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.zuoekai-ai-pipeline-node-shelf__item-label {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── 中间编辑器画布 ── */
.zuoekai-ai-pipeline-viewport {
	flex: 1;
	min-width: 0;
	position: relative;
	background: #111827;
	overflow: hidden;
}
.zuoekai-ai-pipeline-viewport canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* 执行进度浮层 */
.zuoekai-ai-pipeline-exec-overlay {
	position: absolute;
	inset: 0;
	background: rgba(15,23,42,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10;
	backdrop-filter: blur(2px);
}
.zuoekai-ai-pipeline-exec-overlay[hidden] { display: none; }

.zuoekai-ai-pipeline-exec-overlay__inner {
	background: rgba(30,41,59,0.95);
	border: 1px solid rgba(148,163,184,0.15);
	border-radius: 10px;
	padding: 20px 28px;
	min-width: 240px;
	text-align: center;
}
.zuoekai-ai-pipeline-exec-overlay__label {
	font-size: 13px;
	color: #94a3b8;
	margin-bottom: 12px;
}
.zuoekai-ai-pipeline-exec-overlay__progress {
	height: 4px;
	background: rgba(148,163,184,0.12);
	border-radius: 2px;
	overflow: hidden;
}
.zuoekai-ai-pipeline-exec-overlay__bar {
	height: 100%;
	background: #818cf8;
	border-radius: 2px;
	transition: width 0.4s ease;
}

/* ── 右侧属性面板 ── */
.zuoekai-ai-pipeline-props-panel {
	width: 220px;
	min-width: 180px;
	background: rgba(15,23,42,0.8);
	border-left: 1px solid rgba(148,163,184,0.1);
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	overflow: hidden;
}
.zuoekai-ai-pipeline-props-panel__header {
	padding: 10px 12px 6px;
	font-size: 11px;
	font-weight: 600;
	color: rgba(148,163,184,0.6);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	border-bottom: 1px solid rgba(148,163,184,0.08);
	flex-shrink: 0;
}
.zuoekai-ai-pipeline-props-panel__body {
	flex: 1;
	overflow-y: auto;
	padding: 10px;
}
.zuoekai-ai-pipeline-props-panel__empty {
	font-size: 12px;
	color: rgba(148,163,184,0.4);
	text-align: center;
	padding: 20px 0;
}
.zuoekai-ai-pipeline-props-panel__node-title {
	font-size: 13px;
	font-weight: 600;
	color: #e2e8f0;
	margin-bottom: 3px;
}
.zuoekai-ai-pipeline-props-panel__node-type {
	font-size: 10px;
	color: rgba(148,163,184,0.5);
	margin-bottom: 12px;
}
.zuoekai-ai-pipeline-props-panel__widgets {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* ── 底部信息栏 ── */
.zuoekai-ai-pipeline-infobar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 14px;
	height: 28px;
	min-height: 28px;
	background: rgba(15,23,42,0.9);
	border-top: 1px solid rgba(148,163,184,0.08);
	font-size: 11px;
	color: rgba(148,163,184,0.5);
	flex-shrink: 0;
}
.zuoekai-ai-pipeline-infobar__left,
.zuoekai-ai-pipeline-infobar__right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.zuoekai-ai-pipeline-infobar__center {
	color: #94a3b8;
}

/* ── 工作流列表 ── */
.zuoekai-ai-pipeline-workflow-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 0;
}
.zuoekai-ai-pipeline-workflow-list__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	border: 1px solid rgba(148,163,184,0.1);
	background: rgba(30,41,59,0.5);
}
.zuoekai-ai-pipeline-workflow-list__name {
	font-size: 13px;
	font-weight: 500;
	color: #e2e8f0;
	flex: 1;
}
.zuoekai-ai-pipeline-workflow-list__meta {
	font-size: 11px;
	color: rgba(148,163,184,0.5);
	flex-shrink: 0;
}

/* ── 打包表单绑定区 ── */
.zuoekai-ai-pipeline-publish-bindings {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 4px;
}