/* 新版工作流管理（业务流程编排）—— 列表页 / 编排器 / 运行页 */

:root {
    --bw-primary: #2563eb;
    --bw-primary-soft: #eff4ff;
    --bw-border: #e5e7eb;
    --bw-text: #1f2937;
    --bw-muted: #6b7280;
    --bw-bg: #f5f7fb;
    --bw-card: #ffffff;
    --bw-danger: #dc2626;
    --bw-success: #16a34a;
    --bw-warning: #d97706;
    --bw-radius: 10px;
}

/* ─────────── 通用控件 ─────────── */

.bw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border: 1px solid var(--bw-border);
    border-radius: 8px;
    background: #fff;
    color: var(--bw-text);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.bw-btn:hover { border-color: #c7d2fe; color: var(--bw-primary); }
.bw-btn:disabled { opacity: .55; cursor: not-allowed; }
.bw-btn-primary { background: var(--bw-primary); border-color: var(--bw-primary); color: #fff; }
.bw-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.bw-btn-danger { background: var(--bw-danger); border-color: var(--bw-danger); color: #fff; }
.bw-btn-danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.bw-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; border-radius: 6px; }
.bw-btn-ghost { border-color: transparent; background: transparent; }
.bw-btn-ghost:hover { background: #f3f4f6; border-color: transparent; }
.bw-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border: 0; border-radius: 6px; background: transparent;
    color: var(--bw-muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.bw-icon-btn:hover { background: #f3f4f6; color: var(--bw-text); }
.bw-icon-btn.bw-danger:hover { color: var(--bw-danger); background: #fef2f2; }

.bw-input, .bw-select, .bw-textarea {
    width: 100%;
    border: 1px solid var(--bw-border);
    border-radius: 8px;
    background: #fff;
    padding: 6px 10px;
    font-size: 13px;
    color: var(--bw-text);
    outline: none;
}
.bw-input, .bw-select { height: 32px; }
.bw-textarea { min-height: 72px; resize: vertical; line-height: 1.55; font-family: inherit; }
.bw-textarea.bw-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; min-height: 220px; white-space: pre; tab-size: 2; }
.bw-input:focus, .bw-select:focus, .bw-textarea:focus { border-color: var(--bw-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }

.bw-field { margin-bottom: 14px; }
.bw-field > label, .bw-field-label {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 6px;
}
.bw-field-name { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.bw-info {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; color: #94a3b8; cursor: help; flex: 0 0 auto;
}
.bw-info:hover, .bw-info:focus { color: #2563eb; outline: none; }
.bw-info svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.bw-info-tip {
    position: fixed; z-index: 1300; box-sizing: border-box; padding: 8px 11px;
    background: #fff; color: #334155; font-size: 12px; font-weight: 400; line-height: 1.55;
    text-align: left; white-space: pre-wrap; border: 1px solid #e8edf5; border-radius: 10px;
    box-shadow: 0 16px 36px -18px rgba(15, 23, 42, .38);
}
.bw-tool-pick {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px;
    padding: 4px 10px; border: 1px solid var(--bw-border); border-radius: 8px;
    background: #fff; cursor: pointer; font-size: 13px; color: var(--bw-text); text-align: left;
}
.bw-tool-pick:hover, .bw-tool-pick:focus { border-color: var(--bw-primary); outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.bw-tool-face { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.bw-tool-icon {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 6px; overflow: hidden;
    background: #f3f0ff; color: #6d28d9; display: inline-flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 650;
}
.bw-tool-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bw-tool-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-tool-caret { color: var(--bw-muted); margin-left: auto; flex: 0 0 auto; }
.bw-tool-group {
    margin: 6px 4px 2px;
    padding: 4px 6px 0;
    color: var(--bw-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .02em;
}
.bw-picker button.is-active { background: #eff6ff; }
.bw-field-label small, .bw-hint { font-weight: 400; color: var(--bw-muted); font-size: 12px; }
.bw-hint { display: block; margin-top: 4px; line-height: 1.5; }
.bw-row { display: flex; gap: 6px; align-items: center; }
.bw-row > .bw-grow { flex: 1 1 auto; min-width: 0; }
.bw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bw-text); cursor: pointer; }

.bw-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; font-size: 12px; line-height: 18px; font-weight: 500;
}
.bw-status-running { background: #eff6ff; color: #1d4ed8; }
.bw-status-success { background: #ecfdf5; color: #047857; }
.bw-status-failed { background: #fef2f2; color: #b91c1c; }
.bw-status-stopped { background: #f3f4f6; color: #4b5563; }
.bw-status-exception { background: #fffbeb; color: #b45309; }
.bw-status-waiting { background: #f5f3ff; color: #6d28d9; }

.bw-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; font-size: 12px; background: #f3f4f6; color: #4b5563; }
.bw-tag-draft { background: #fff7ed; color: #c2410c; }
.bw-tag-published { background: #ecfdf5; color: #047857; }
.bw-tag-offline { background: #f3f4f6; color: #6b7280; }

.bw-toast {
    position: fixed; left: 50%; top: 72px; z-index: 3000;
    transform: translate(-50%, -12px); opacity: 0; pointer-events: none;
    padding: 9px 18px; border-radius: 8px; background: #111827; color: #fff; font-size: 13px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: opacity .2s, transform .2s; max-width: 80vw;
}
.bw-toast-show { opacity: 1; transform: translate(-50%, 0); }
.bw-toast-error { background: #b91c1c; }
.bw-toast-success { background: #047857; }

.bw-dialog-mask {
    position: fixed; inset: 0; z-index: 2500; background: rgba(17, 24, 39, .42);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bw-dialog {
    width: 480px; max-width: 100%; max-height: calc(100vh - 40px);
    background: #fff; border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .22);
    display: flex; flex-direction: column; overflow: hidden;
}
.bw-dialog-wide { width: 760px; }
.bw-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; font-size: 15px; font-weight: 600; border-bottom: 1px solid #f0f1f3; }
.bw-dialog-body { padding: 16px 18px; overflow: auto; }
.bw-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #f0f1f3; }
.bw-dialog-text { margin: 0; color: #374151; line-height: 1.6; white-space: pre-wrap; }

.bw-json {
    margin: 0; padding: 10px 12px; border-radius: 8px; background: #f8fafc; border: 1px solid #eef0f3;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-all; max-height: 360px; overflow: auto; color: #1f2937;
}
.bw-empty { padding: 36px 12px; text-align: center; color: var(--bw-muted); font-size: 13px; }

/* ─────────── 列表页 ─────────── */

.bw-page { padding: 24px 4px 40px; }
.bw-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.bw-page-head h1 { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.bw-page-head p { margin: 0; color: var(--bw-muted); font-size: 13px; }
.bw-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.bw-toolbar .bw-input { width: 260px; }
.bw-toolbar .bw-select { width: 140px; }
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.bw-card {
    position: relative; display: flex; flex-direction: column; gap: 10px;
    padding: 16px; border: 1px solid var(--bw-border); border-radius: 12px; background: #fff;
    cursor: pointer; transition: box-shadow .15s, border-color .15s; min-height: 170px;
}
.bw-card:hover { box-shadow: 0 10px 28px rgba(15, 23, 42, .08); border-color: #c7d2fe; }
.bw-card-head { display: flex; gap: 12px; align-items: center; }
.bw-app-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; font-size: 22px; line-height: 1;
}
.bw-card-title { min-width: 0; flex: 1 1 auto; }
.bw-card-title h3 { margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-card-title small { color: var(--bw-muted); font-size: 12px; }
.bw-card-desc { margin: 0; color: #4b5563; font-size: 13px; line-height: 1.55; flex: 1 1 auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bw-card-meta { margin: 0; color: var(--bw-muted); font-size: 12px; line-height: 1.4; }
.bw-card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: nowrap; border-top: 1px solid #f3f4f6; padding-top: 10px; }
.bw-card-more { margin-left: auto; }
.bw-card-more .bw-menu-list { min-width: 148px; }
.bw-menu-list button.is-danger { color: var(--bw-danger); }
.bw-menu-list button.is-danger:hover { background: #fef2f2; color: var(--bw-danger); }
.bw-pager { display: flex; justify-content: center; gap: 10px; align-items: center; margin-top: 20px; font-size: 13px; color: var(--bw-muted); }

.bw-icon-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.bw-icon-picker button {
    width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--bw-border); background: #fff; font-size: 18px; cursor: pointer;
}
.bw-icon-picker button.active { border-color: var(--bw-primary); box-shadow: 0 0 0 2px rgba(37, 99, 235, .2); }
.bw-color-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.bw-color-picker button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--bw-border); cursor: pointer; }
.bw-color-picker button.active { box-shadow: 0 0 0 2px var(--bw-primary); }

/* ─────────── 编排器整体布局 ─────────── */

/* 站点导航是 fixed，body 自带 padding-top。这里必须吃掉全局 margin-bottom，
   否则文档比视口高出一截，滚到底时工作流标题行会滑到导航下面。 */
html:has(body.bw-editor-page) { height: 100%; overflow: hidden; }
body.bw-editor-page {
    display: flex; flex-direction: column; box-sizing: border-box;
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    margin: 0 !important; padding-bottom: 0 !important; overflow: hidden;
}
body.bw-editor-page .app-header { flex: 0 0 auto; }
body.bw-editor-page > .container {
    flex: 1 1 auto; min-height: 0; min-width: 0; max-width: none !important; width: 100%;
    margin: 0 !important; padding: 0 !important; display: flex;
}
body.bw-editor-page main { flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; display: flex; padding: 0 !important; }
body.bw-editor-page .footer, body.bw-editor-page .app-mobile-tabbar { display: none !important; }

.bw-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; max-width: 100%; min-height: 0; background: var(--bw-bg); position: relative; }
.bw-topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
    background: #fff; border-bottom: 1px solid var(--bw-border); position: relative; z-index: 30;
}
.bw-topbar-title { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.bw-topbar-title strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.bw-topbar-title small { color: var(--bw-muted); font-size: 12px; white-space: nowrap; }
.bw-topbar-actions { display: flex; gap: 8px; align-items: center; }
.bw-badge-count { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fef3c7; color: #b45309; font-size: 11px; align-items: center; justify-content: center; }
.bw-badge-count.ok { background: #dcfce7; color: #15803d; }
.bw-menu { position: relative; }
.bw-menu-list {
    position: absolute; right: 0; top: calc(100% + 6px); min-width: 200px; z-index: 50;
    background: #fff; border: 1px solid var(--bw-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .14);
    padding: 6px; display: none;
}
.bw-menu.open .bw-menu-list { display: block; }
.bw-menu-list button {
    display: flex; width: 100%; align-items: center; gap: 8px; text-align: left;
    border: 0; background: transparent; padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--bw-text);
}
.bw-menu-list button:hover { background: #f3f4f6; }
.bw-menu-list button small { margin-left: auto; color: var(--bw-muted); }
.bw-menu-sep { height: 1px; background: #f0f1f3; margin: 4px 0; }

.bw-body { flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; position: relative; }
.bw-palette {
    flex: 0 0 200px; background: #fff; border-right: 1px solid var(--bw-border); overflow-y: auto; padding: 10px 8px;
}
.bw-palette-group { margin-bottom: 12px; }
.bw-palette-group h4 { margin: 0 6px 6px; font-size: 12px; color: var(--bw-muted); font-weight: 600; }
.bw-palette-item {
    display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; cursor: grab; font-size: 13px; user-select: none;
}
.bw-palette-item:hover { background: #f3f4f6; }
.bw-node-icon {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 700; line-height: 1;
}

/* ─────────── 画布 ─────────── */

.bw-canvas {
    flex: 1 1 auto; position: relative; overflow: hidden; min-width: 0; cursor: default;
    background-color: #f5f7fb;
    background-image: radial-gradient(#d5dae3 1px, transparent 1px);
    background-size: 18px 18px;
}
.bw-canvas.bw-panning { cursor: grabbing; }
.bw-viewport { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: 0; height: 0; }
.bw-edges { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; z-index: 1; pointer-events: none; }
.bw-edges path.bw-edge { fill: none; stroke: #b6bfcd; stroke-width: 2; pointer-events: stroke; cursor: pointer; }
.bw-edges path.bw-edge-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
.bw-edges path.bw-edge.selected, .bw-edges g[data-edge]:hover path.bw-edge { stroke: var(--bw-primary); }
.bw-edge-del {
    position: absolute; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
    border: 1px solid #fecaca; background: #fff; color: var(--bw-danger); font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.bw-edge-del:hover { background: #fef2f2; }
.bw-edges path.bw-edge.taken { stroke: #22c55e; }
.bw-edges path.bw-edge.fail { stroke-dasharray: 5 4; }
.bw-edges path.bw-edge-temp { fill: none; stroke: var(--bw-primary); stroke-width: 2; stroke-dasharray: 6 4; }

.bw-node {
    position: absolute; z-index: 2; width: 240px; background: #fff; border: 1.5px solid #e3e7ee; border-radius: 12px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .06); user-select: none; cursor: pointer;
}
.bw-node:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .1); }
.bw-node.selected { border-color: var(--bw-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .16); }
.bw-node.st-running { border-color: #3b82f6; }
.bw-node.st-success { border-color: #22c55e; }
.bw-node.st-failed { border-color: #ef4444; }
.bw-node.st-exception { border-color: #f59e0b; }
.bw-node.st-waiting { border-color: #8b5cf6; }
.bw-node-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 6px; }
.bw-node-title { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-node-state { font-size: 11px; color: var(--bw-muted); white-space: nowrap; }
.bw-node-state.running::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; border: 2px solid #3b82f6; border-right-color: transparent; animation: bw-spin .8s linear infinite; margin-right: 4px; vertical-align: -1px; }
.bw-node-state.success { color: #16a34a; }
.bw-node-state.failed { color: #dc2626; }
.bw-node-state.exception { color: #d97706; }
.bw-node-state.waiting { color: #7c3aed; }
.bw-files { display: flex; flex-direction: column; gap: 6px; align-items: stretch; width: 100%; }
.bw-file-chip { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 8px; border-radius: 8px; background: #f6f7f9; font-size: 12px; }
.bw-file-native { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.bw-file-btn { position: relative; cursor: pointer; }
.bw-file-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.bw-file-url { display: flex; gap: 6px; flex: 1 1 220px; min-width: 0; }
.bw-file-url .bw-input { flex: 1 1 auto; min-width: 0; }
.bw-message.is-streaming .bw-result-text::after { content: "▍"; margin-left: 2px; color: #0f766e; animation: bw-spin 1s steps(2) infinite; }
@keyframes bw-spin { to { transform: rotate(360deg); } }
.bw-node-body { padding: 0 12px 10px; font-size: 12px; color: #4b5563; }
.bw-node-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.5; word-break: break-all; }
.bw-node-summary:empty { display: none; }
.bw-node-vars { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.bw-node-var { display: flex; align-items: center; gap: 6px; background: #f6f7f9; padding: 3px 8px; border-radius: 6px; overflow: hidden; }
.bw-node-var code { color: #2563eb; font-size: 11px; background: none; padding: 0; }
.bw-node-var span { margin-left: auto; color: var(--bw-muted); font-size: 11px; }
.bw-node-branches { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.bw-node-branch { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 22px; padding-right: 4px; font-size: 11px; font-weight: 600; color: #6b7280; }
.bw-node-branch .bw-branch-text { margin-right: auto; font-weight: 400; color: #4b5563; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }

.bw-handle {
    position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #94a3b8;
    z-index: 3; cursor: crosshair; transition: transform .1s, border-color .1s;
}
.bw-handle:hover { transform: scale(1.25); border-color: var(--bw-primary); background: var(--bw-primary-soft); }
.bw-handle-in { left: -8px; top: 18px; cursor: default; }
.bw-handle-out { right: -8px; top: 18px; }
.bw-node-branch .bw-handle-out { right: -20px; top: 4px; }
.bw-handle-out.bw-handle-fail { border-color: #f59e0b; }
.bw-node.connect-target .bw-handle-in { border-color: var(--bw-primary); transform: scale(1.3); }

/* 迭代容器：不建立层叠上下文，子节点与连线按全局 z-index 叠放 */
.bw-node.bw-node-iteration { z-index: auto; background: rgba(240, 253, 244, .55); border-style: dashed; border-color: #86efac; cursor: default; }
.bw-node.bw-node-iteration.selected { border-color: var(--bw-primary); }
.bw-node-iteration > .bw-node-head { background: #fff; border-radius: 12px 12px 0 0; border-bottom: 1px solid #dcfce7; cursor: pointer; padding-bottom: 8px; }
.bw-iter-body { position: absolute; left: 0; right: 0; bottom: 0; top: 40px; }
.bw-iter-resize { position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 3; border-right: 2px solid #86efac; border-bottom: 2px solid #86efac; border-radius: 0 0 8px 0; }
.bw-iter-body.drop-over { background: rgba(37, 99, 235, .06); border-radius: 0 0 12px 12px; }
.bw-node.bw-node-iteration-start { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border-color: #86efac; }
.bw-node.bw-node-iteration-start .bw-handle-out { top: 13px; }

.bw-zoombar {
    position: absolute; left: 12px; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 2px;
    background: #fff; border: 1px solid var(--bw-border); border-radius: 10px; padding: 3px; box-shadow: 0 4px 12px rgba(15, 23, 42, .06);
}
.bw-zoombar span { min-width: 44px; text-align: center; font-size: 12px; color: var(--bw-muted); }

.bw-picker {
    position: fixed; z-index: 1200; width: 220px; max-height: 360px; overflow: auto; background: #fff;
    border: 1px solid var(--bw-border); border-radius: 10px; box-shadow: 0 16px 40px rgba(15, 23, 42, .16); padding: 6px;
}
.bw-var-picker { width: auto; max-width: calc(100vw - 16px); box-sizing: border-box; max-height: 440px; display: flex; flex-direction: column; overflow: hidden; padding: 8px; }
.bw-var-picker-body { display: flex; min-height: 180px; max-height: 320px; margin-top: 8px; border-top: 1px solid #f0f1f3; }
.bw-var-picker-nodes, .bw-var-picker-vars { overflow: auto; min-width: 0; }
.bw-var-picker-nodes { flex: 0 0 42%; max-width: 168px; border-right: 1px solid #f0f1f3; }
.bw-var-picker-sep { height: 1px; margin: 6px 8px; background: #e5e7eb; flex: 0 0 auto; }
.bw-var-picker-vars { flex: 1 1 auto; }
.bw-var-picker-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-var-picker button.active { background: #eff6ff; }
.bw-var-picker button.is-dim { opacity: .55; }
.bw-var-picker-fold { color: var(--bw-muted) !important; font-size: 12px !important; }
.bw-var-chip { display: flex; align-items: center; gap: 4px; }
.bw-var-chip-btn {
    flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--bw-border); border-radius: 8px;
    background: #fff; text-align: left; cursor: pointer; font-size: 13px; color: var(--bw-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bw-var-chip-btn.is-empty { color: var(--bw-muted); }
.bw-var-chip-btn:hover { border-color: #c7d2fe; }
.bw-picker h5 { margin: 6px 8px 4px; font-size: 11px; color: var(--bw-muted); font-weight: 600; }
.bw-picker button {
    display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 6px 8px;
    border-radius: 6px; cursor: pointer; font-size: 13px; text-align: left; color: var(--bw-text);
}
.bw-picker button:hover { background: #f3f4f6; }
.bw-picker button code { color: #2563eb; font-size: 12px; background: none; }
.bw-picker button small { margin-left: auto; color: var(--bw-muted); font-size: 11px; }

/* ─────────── 右侧面板（节点配置 / 运行 / 历史） ─────────── */

.bw-panel {
    position: absolute; top: 10px; right: 10px; bottom: 10px; width: 420px; max-width: calc(100% - 20px); z-index: 25;
    background: #fff; border: 1px solid var(--bw-border); border-radius: 14px; box-shadow: 0 16px 40px rgba(15, 23, 42, .12);
    display: flex; flex-direction: column; overflow: hidden;
}
.bw-panel[hidden] { display: none; }
.bw-panel-head { flex: 0 0 auto; padding: 12px 14px 0; border-bottom: 1px solid #f0f1f3; }
.bw-panel-title { display: flex; align-items: center; gap: 8px; }
.bw-panel-title input { flex: 1 1 auto; border: 1px solid transparent; border-radius: 6px; font-size: 15px; font-weight: 600; padding: 3px 6px; outline: none; min-width: 0; background: transparent; }
.bw-panel-title input:hover { border-color: var(--bw-border); }
.bw-panel-title input:focus { border-color: var(--bw-primary); background: #fff; }
.bw-panel-title > strong { flex: 1 1 auto; font-size: 15px; }
.bw-panel-desc { width: 100%; border: 0; resize: none; font-size: 12px; color: var(--bw-muted); padding: 4px 6px; outline: none; background: transparent; margin-top: 2px; }
.bw-tabs { display: flex; gap: 16px; margin-top: 6px; }
.bw-tabs button { border: 0; background: transparent; padding: 8px 0; font-size: 13px; color: var(--bw-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.bw-tabs button.active { color: var(--bw-primary); border-bottom-color: var(--bw-primary); font-weight: 600; }
.bw-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; }
.bw-panel-foot { flex: 0 0 auto; padding: 10px 14px; border-top: 1px solid #f0f1f3; display: flex; gap: 8px; justify-content: flex-end; }

.bw-section { border-top: 1px solid #f0f1f3; padding-top: 12px; margin-top: 6px; }
.bw-section-title { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.bw-list-item { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.bw-list-item > .bw-input, .bw-list-item > .bw-select { min-width: 0; }
.bw-cascade-wrap { flex: 0 0 210px; min-width: 0; }
.bw-cascade { position: relative; width: 100%; }
.bw-cascade-trigger {
    display: flex; align-items: center; gap: 8px; width: 100%; height: 32px;
    padding: 0 8px 0 6px; border: 1px solid var(--bw-border); border-radius: 8px;
    background: #fff; color: var(--bw-text); cursor: pointer; text-align: left;
}
.bw-cascade-trigger:hover { border-color: #c7d2fe; }
.bw-cascade.open .bw-cascade-trigger { border-color: var(--bw-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.bw-cascade-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.bw-cascade-caret { color: var(--bw-muted); font-size: 11px; }
.bw-cascade-ico {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; border-radius: 6px; background: #eef2ff; color: #4338ca;
    font-size: 10px; font-weight: 700; line-height: 1;
}
.bw-cascade-drop {
    position: fixed; z-index: 1400; display: flex; flex-direction: row-reverse;
    max-height: min(420px, calc(100vh - 24px));
    background: #fff; border: 1px solid var(--bw-border); border-radius: 12px;
    box-shadow: 0 18px 48px rgba(15, 23, 42, .18); overflow: hidden;
}
.bw-cascade-col {
    display: flex; flex-direction: column;
    min-width: 188px; max-width: 220px; overflow-y: auto; padding: 6px;
    border-left: 1px solid #f0f1f3;
}
.bw-cascade-col:last-child { border-left: 0; }
.bw-cascade-foot {
    position: sticky; bottom: 0; margin-top: auto; padding-top: 6px;
    background: linear-gradient(#ffffffd8, #fff 8px);
    border-top: 1px solid #eef0f3;
}
.bw-cascade-sep { height: 1px; background: #eef0f3; margin: 6px 8px; }
.bw-cascade-item {
    display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent;
    padding: 7px 8px; border-radius: 8px; cursor: pointer; text-align: left; color: var(--bw-text);
}
.bw-cascade-item:hover, .bw-cascade-item.is-active { background: #f5f7ff; }
.bw-cascade-item.is-active .bw-cascade-ico { background: #dbeafe; color: #1d4ed8; }
.bw-cascade-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bw-cascade-item-label { font-size: 13px; line-height: 1.2; }
.bw-cascade-item small { color: var(--bw-muted); font-size: 11px; line-height: 1.2; }
.bw-cascade-arrow { color: #94a3b8; font-size: 16px; line-height: 1; }
.bw-media { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.bw-media img, .bw-media video {
    display: block; max-width: 100%; max-height: 420px; border-radius: 10px; background: #0f172a;
}
.bw-media audio { width: 100%; }
.bw-media-file {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 8px;
    background: #f8fafc; border: 1px solid #eef0f3; color: #1d4ed8; font-size: 13px; text-decoration: none;
    word-break: break-all;
}
.bw-media-file:hover { background: #eff4ff; }
.bw-var-card { border: 1px solid #eef0f3; border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #fafbfc; }
.bw-step-label { flex: 0 0 auto; color: var(--bw-muted); font-size: 12px; white-space: nowrap; }
.bw-out-list { display: flex; flex-direction: column; gap: 4px; }
.bw-out-item { display: flex; gap: 8px; align-items: center; font-size: 12px; }
.bw-out-item code { color: #2563eb; background: none; padding: 0; }
.bw-out-item span { color: var(--bw-muted); }
.bw-ref-input { position: relative; }
.bw-ref-btn {
    position: absolute; right: 6px; top: 6px; z-index: 2; height: 22px; padding: 0 6px; border-radius: 5px;
    border: 1px solid var(--bw-border); background: #fff; font-size: 11px; color: var(--bw-primary); cursor: pointer; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.bw-ref-btn:hover { background: var(--bw-primary-soft); }
.bw-ref-input .bw-textarea, .bw-ref-input .bw-input { padding-right: 44px; }
.bw-case { border: 1px solid #eef0f3; border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.bw-case-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 600; font-size: 13px; }
.bw-cond { display: grid; grid-template-columns: 1fr 110px; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px dashed #eef0f3; }
.bw-cond .bw-cond-value { grid-column: 1 / 2; }

.bw-issue { display: flex; gap: 10px; padding: 9px 10px; border-radius: 8px; border: 1px solid #fde68a; background: #fffbeb; margin-bottom: 8px; cursor: pointer; font-size: 13px; }
.bw-issue-warn { border-color: #e2e8f0; background: #f8fafc; }
.bw-issue strong { white-space: nowrap; }

.bw-run-form .bw-field label .req { color: var(--bw-danger); margin-left: 2px; }
.bw-result-text { font-size: 14px; line-height: 1.7; color: #111827; word-break: break-word; }
.bw-result-text p:last-child { margin-bottom: 0; }
.bw-kv { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; font-size: 13px; }
.bw-kv dt { color: var(--bw-muted); font-weight: 400; }
.bw-kv dd { margin: 0; }
.bw-trace-item { border: 1px solid #eef0f3; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.bw-trace-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; font-size: 13px; background: #fff; }
.bw-trace-head:hover { background: #f9fafb; }
.bw-trace-head .bw-trace-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.bw-trace-head small { color: var(--bw-muted); }
.bw-trace-body { padding: 8px 10px 10px; border-top: 1px solid #f3f4f6; display: none; }
.bw-trace-item.open > .bw-trace-body { display: block; }
.bw-trace-body h6 { margin: 8px 0 4px; font-size: 12px; color: var(--bw-muted); }
.bw-trace-children { margin-left: 14px; }
.bw-io { border: 1px solid #eef0f3; border-radius: 10px; margin-top: 8px; overflow: hidden; background: #fff; }
.bw-io-head {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 0; padding: 8px 10px;
    border: 0; background: #f8fafc; color: #374151; font: inherit; font-size: 12px; font-weight: 600;
    line-height: 1.4; text-align: left;
}
button.bw-io-head { cursor: pointer; }
button.bw-io-head:hover { background: #f3f4f6; }
.bw-io-caret { flex: 0 0 12px; width: 12px; text-align: center; color: #94a3b8; font-size: 10px; transition: transform .15s ease; }
.bw-io.open > .bw-io-head .bw-io-caret { transform: rotate(90deg); }
.bw-io-title { flex: 1 1 auto; min-width: 0; }
.bw-io-body { display: none; border-top: 1px solid #f3f4f6; }
.bw-io.open > .bw-io-body, .bw-io.bw-io-static > .bw-io-body { display: block; }
.bw-copy-wrap { position: relative; max-width: 100%; min-width: 0; }
.bw-io, .bw-io-body, .bw-trace-detail, .bw-panel-body { min-width: 0; max-width: 100%; }
.bw-copy-btn {
    position: absolute; top: 6px; right: 6px; z-index: 1;
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 1px solid var(--bw-border); border-radius: 6px;
    background: #fff; color: #6b7280; cursor: pointer;
}
.bw-copy-btn:hover { color: var(--bw-primary); border-color: #c7d2fe; background: var(--bw-primary-soft); }
.bw-copy-wrap > .bw-json { margin: 0; border: 0; border-radius: 0; max-height: 280px; max-width: 100%; box-sizing: border-box; padding-right: 40px; }
.bw-error-box { padding: 10px 12px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 13px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.bw-history-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; font-size: 13px; }
.bw-history-item:hover { background: #f9fafb; border-color: #eef0f3; }
.bw-history-item.is-active { background: #eff6ff; border-color: #c7d2fe; }
.bw-history-item .bw-grow { flex: 1 1 auto; min-width: 0; }
.bw-history-item small { color: var(--bw-muted); display: block; }

.bw-conflict {
    position: absolute; left: 50%; top: 62px; transform: translateX(-50%); z-index: 40;
    background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; border-radius: 10px; padding: 8px 14px; font-size: 13px;
    display: flex; gap: 10px; align-items: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

/* ─────────── 运行页：铺满视口的左右屏 ─────────── */

html:has(body.bw-app-page) { height: 100%; overflow: hidden; }
body.bw-app-page {
    display: flex; flex-direction: column; box-sizing: border-box;
    height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    margin: 0 !important; padding-bottom: 0 !important; overflow: hidden;
}
body.bw-app-page .app-header { flex: 0 0 auto; }
body.bw-app-page > .container {
    flex: 1 1 auto; min-height: 0; min-width: 0; max-width: none !important; width: 100%;
    margin: 0 !important; padding: 0 !important; display: flex;
}
body.bw-app-page main { flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; display: flex; padding: 0 !important; }
body.bw-app-page .footer, body.bw-app-page .app-mobile-tabbar { display: none !important; }

.bw-app { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f5f7fb; }
.bw-app-split { flex: 1 1 auto; min-height: 0; min-width: 0; display: grid; grid-template-columns: 400px minmax(0, 1fr); }
.bw-app-side {
    position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: #fff; border-right: 1px solid var(--bw-border);
}
.bw-app-side-head {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    padding: 14px 14px 12px; border-bottom: 1px solid #f0f1f3;
}
.bw-app-side-title { min-width: 0; flex: 1 1 auto; }
.bw-app-side-title h1 { margin: 0; font-size: 16px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-app-side-title p { margin: 2px 0 0; color: var(--bw-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-app-side-stack { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.bw-app-side-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 16px 8px; }
.bw-app-side-foot {
    flex: 0 0 auto; display: flex; gap: 8px; align-items: center; justify-content: flex-end;
    padding: 12px 14px; border-top: 1px solid #f0f1f3; background: #fff;
}
.bw-app-side-foot .bw-btn-primary { min-width: 108px; }
.bw-app-history-btn {
    width: 32px; height: 32px; border: 1px solid var(--bw-border); border-radius: 8px; background: #fff; color: #4b5563;
}
.bw-app-history-btn:hover, .bw-app-history-btn.is-active { border-color: #c7d2fe; color: var(--bw-primary); background: var(--bw-primary-soft); }
.bw-app-history {
    position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; background: #fff;
}
.bw-app-history[hidden] { display: none !important; }
.bw-app-history-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 14px 14px 12px; border-bottom: 1px solid #f0f1f3; font-size: 14px;
}
.bw-app-history-list { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 8px; }
.bw-app-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #f5f7fb; }
.bw-app-main-head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--bw-border);
}
.bw-app-main-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.bw-app-main-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 18px 20px 28px; }
.bw-app > .bw-empty { margin: auto; }
.bw-steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bw-step { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 10px; border-radius: 8px; background: #f9fafb; }
.bw-step .bw-grow { flex: 1 1 auto; }
.bw-step small { color: var(--bw-muted); }
.bw-output-block { margin-bottom: 14px; }
.bw-output-block h3 { font-size: 12px; color: var(--bw-muted); margin: 0 0 6px; font-weight: 600; }
.bw-review-text { white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--bw-border); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.6; max-height: 280px; overflow: auto; }
.bw-var-card .bw-row { margin-top: 8px; }
.bw-clarify-question { margin: 10px 0 6px; font-weight: 600; }
.bw-clarify-option { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; cursor: pointer; }
.bw-clarify-option input { margin-top: 3px; }
.bw-tag-rec { margin-left: 6px; color: #7c3aed; font-size: 12px; }
.bw-revise-item { border: 1px solid #eef0f3; border-radius: 8px; padding: 8px; margin-bottom: 8px; background: #fff; }
.bw-revise-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bw-revise-thumb { display: block; max-width: 160px; max-height: 120px; margin-bottom: 6px; border-radius: 6px; object-fit: cover; }

@media (max-width: 860px) {
    .bw-palette { display: none; }
    .bw-panel { width: calc(100% - 20px); }
    .bw-app-split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 42%) minmax(0, 1fr); }
    .bw-app-side { border-right: 0; border-bottom: 1px solid var(--bw-border); }
}