/* 模板选择：workflow templates 与流程图画布 */
/* ═══════════════════════════════════════════
   模板选择 (workflow templates + flowchart canvas)
   ═══════════════════════════════════════════ */
#panel-wftemplates { display: none; flex-direction: column; }
#panel-wftemplates.active { display: flex; }
.wft-generate-bar { display: flex; gap: 10px; align-items: center; padding: 16px; flex-wrap: wrap; }
.wft-generate-bar input { flex: 1; min-width: 220px; max-width: 420px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 14px; }
.wft-generate-bar select { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; color: var(--text); font-size: 13px; cursor: pointer; }
#wft-step-count { flex: 0 0 auto; min-width: 0; width: 104px; }
#wft-generate-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 10px 18px; cursor: pointer; font-size: 14px; font-weight: 600; white-space: nowrap; }
#wft-generate-btn:disabled { opacity: .7; cursor: default; }
#wft-generate-hint { width: 100%; font-size: 12px; color: var(--primary); min-height: 16px; padding: 0 2px; }
.wft-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 0 16px 20px; overflow-y: auto; }
.wft-empty { grid-column: 1/-1; text-align: center; padding: 48px 24px; color: var(--text); max-width: 420px; margin: 0 auto; }
.wft-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .1s; display: flex; flex-direction: column; gap: 6px; }
.wft-card:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); box-shadow: 0 4px 14px rgba(0,0,0,0.18); transform: translateY(-1px); }
.wft-card-head { display: flex; align-items: center; }
.wft-tag { font-size: 11px; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); padding: 2px 8px; border-radius: 10px; }
.wft-card-del { margin-left: auto; background: none; border: none; color: var(--text2); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 4px; opacity: 0; transition: opacity .15s; }
.wft-card:hover .wft-card-del { opacity: 1; }
.wft-card-del:hover { color: var(--red); }
.wft-card-name { font-size: 15px; font-weight: 700; }
.wft-card-desc { font-size: 12px; color: var(--text2); }
.wft-card-meta { display: flex; gap: 6px; font-size: 11px; color: var(--text2); }
.wft-card-open { font-size: 12px; color: var(--primary); font-weight: 600; margin-top: 2px; }
/* Canvas view */
#wft-canvas-view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.wft-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.wft-toolbar .wft-tb-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 6px 12px; font-size: 12.5px; cursor: pointer; }
.wft-toolbar .wft-tb-btn:hover { border-color: var(--primary); color: var(--primary); }
.wft-toolbar .wft-tb-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
#wft-canvas-title { font-size: 15px; font-weight: 700; margin-right: 4px; }
#wft-canvas-stats { font-size: 12px; color: var(--text2); }
#wft-save-state { font-size: 11.5px; color: var(--text2); margin-left: auto; }
#wft-zoom-label { font-size: 12px; color: var(--text2); min-width: 40px; text-align: center; }
.wft-canvas-wrap { flex: 1; display: flex; min-height: 0; position: relative; }
#wft-viewport { flex: 1; position: relative; overflow: hidden; background: var(--bg);
  background-image: radial-gradient(color-mix(in srgb, var(--text2) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px; cursor: grab; }
#wft-viewport:active { cursor: grabbing; }
#wft-viewport.link-mode { cursor: crosshair; }
#wft-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.wft-phase-label { position: absolute; font-size: 12.5px; font-weight: 700; padding: 3px 12px; border-radius: 14px; border: 1.5px solid; background: var(--surface); white-space: nowrap; }
.wft-phase-count { opacity: .75; font-weight: 600; margin-left: 2px; }
.wft-node { position: absolute; width: 210px; height: 78px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; padding: 8px 10px; cursor: pointer; user-select: none; display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow .12s; }
.wft-node:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.25); z-index: 5; }
.wft-node.selected { outline: 2px solid var(--primary); outline-offset: 1px; z-index: 6; }
.wft-node.link-from { outline: 2px dashed var(--orange); outline-offset: 1px; }
.wft-node.done { opacity: .78; }
.wft-node.prio-1 { background: color-mix(in srgb, var(--red) 9%, var(--surface)); }
.wft-node.prio-2 { background: color-mix(in srgb, var(--yellow) 5%, var(--surface)); }
.wft-node.prio-3 { background: color-mix(in srgb, var(--green) 5%, var(--surface)); }
.wft-node-top { display: flex; gap: 7px; align-items: flex-start; min-height: 0; }
.wft-node-idx { flex-shrink: 0; min-width: 20px; height: 20px; border-radius: 10px; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.wft-node-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wft-node-foot { display: flex; gap: 6px; align-items: center; font-size: 10.5px; color: var(--text2); }
.wft-node-duration { white-space: nowrap; }
.wft-node-assignee { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90px; }
.wft-node-assignee.assigned { color: var(--primary); font-weight: 600; }
.wft-node-chat { color: var(--primary); font-weight: 600; white-space: nowrap; }
.wft-node-check { color: var(--green); font-weight: 800; }
/* Drawer */
#wft-drawer { position: absolute; top: 0; right: -360px; width: 340px; height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -8px 0 24px rgba(0,0,0,0.22); transition: right .2s ease; display: flex; flex-direction: column; z-index: 20; }
#wft-drawer.open { right: 0; }
.wft-drawer-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
#wft-drawer-idx { color: #fff; font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 10px; background: var(--primary); }
#wft-drawer-phase-name { font-size: 12px; color: var(--text2); flex: 1; }
.wft-drawer-body { flex: 1; overflow-y: auto; padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.wft-drawer-body label { font-size: 11.5px; color: var(--text2); font-weight: 600; margin-bottom: -6px; }
.wft-drawer-body input, .wft-drawer-body select, .wft-drawer-body textarea { width: 100%; box-sizing: border-box; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; color: var(--text); font-size: 13px; }
.wft-drawer-body textarea { height: 76px; resize: vertical; font-family: inherit; }
.wft-drawer-row { display: flex; gap: 8px; }
.wft-drawer-row > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.wft-assign-box { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: color-mix(in srgb, var(--primary) 4%, var(--surface2)); }
.wft-assign-box .wft-assign-title { font-size: 12px; font-weight: 700; }
#wft-drawer-task-state { font-size: 11.5px; color: var(--text2); line-height: 1.5; }
#wft-drawer-assign-btn { background: var(--primary); color: #fff; border: none; border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
#wft-drawer-assign-btn:disabled { opacity: .6; cursor: default; }
#wft-drawer-discuss-btn { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; }
#wft-drawer-discuss-btn:hover { border-color: var(--primary); color: var(--primary); }
.wft-drawer-danger { background: none; border: 1px solid color-mix(in srgb, var(--red) 40%, var(--border)); color: var(--red); border-radius: var(--radius); padding: 7px 12px; font-size: 12.5px; cursor: pointer; }
.wft-drawer-danger:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.wft-drawer-close { margin-left: auto; background: none; border: none; color: var(--text2); font-size: 16px; cursor: pointer; }
.wft-rel-entry { border: 1px solid color-mix(in srgb, #0ea5e9 42%, var(--border)); border-radius: 8px; background: color-mix(in srgb, #0ea5e9 9%, var(--surface2)); padding: 10px 12px; color: var(--text); cursor: pointer; text-align: left; }
.wft-rel-entry:hover { border-color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 14%, var(--surface2)); }
.wft-rel-entry-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.wft-rel-entry-title span:last-child { margin-left: auto; color: #38bdf8; font-size: 15px; }
/* Relation knowledge graph */
#wft-relations-view { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg); }
.wft-rel-toolbar { min-height: 52px; display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.wft-rel-back, .wft-rel-icon-btn, .wft-rel-action { height: 32px; box-sizing: border-box; border: 1px solid var(--border); border-radius: 7px; background: var(--surface2); color: var(--text); cursor: pointer; font-size: 12px; }
.wft-rel-back, .wft-rel-action { padding: 0 11px; }
.wft-rel-icon-btn { width: 32px; padding: 0; font-size: 17px; }
.wft-rel-back:hover, .wft-rel-icon-btn:hover, .wft-rel-action:hover { border-color: var(--primary); color: var(--primary); }
.wft-rel-heading { min-width: 170px; margin-right: 2px; }
.wft-rel-heading strong { display: block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.wft-rel-heading span { display: block; margin-top: 1px; color: var(--text2); font-size: 10.5px; }
.wft-rel-source { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 8px; border: 1px solid color-mix(in srgb, #0ea5e9 38%, var(--border)); color: #38bdf8; background: color-mix(in srgb, #0ea5e9 8%, transparent); font-size: 10.5px; font-weight: 700; white-space: nowrap; }
.wft-rel-source::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: wft-rel-source-pulse 2s ease-out infinite; }
.wft-rel-source.workflow { color: var(--yellow); border-color: color-mix(in srgb, var(--yellow) 38%, var(--border)); background: color-mix(in srgb, var(--yellow) 8%, transparent); }
.wft-rel-segments { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; padding: 2px; background: var(--surface2); }
.wft-rel-segments button { height: 26px; padding: 0 9px; border: 0; border-radius: 5px; background: transparent; color: var(--text2); cursor: pointer; font-size: 11.5px; white-space: nowrap; }
.wft-rel-segments button.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.wft-rel-spacer { flex: 1; }
.wft-rel-zoom { display: flex; align-items: center; gap: 4px; }
#wft-rel-zoom-label { min-width: 38px; color: var(--text2); text-align: center; font-size: 11px; }
.wft-rel-main { flex: 1; min-height: 0; display: flex; }
#wft-rel-viewport { flex: 1; min-width: 0; position: relative; overflow: hidden; cursor: grab; touch-action: none; background-color: var(--bg); background-image: radial-gradient(color-mix(in srgb, var(--text2) 18%, transparent) 1px, transparent 1px); background-size: 24px 24px; animation: wft-rel-grid-drift 24s linear infinite; }
#wft-rel-viewport.dragging { cursor: grabbing; }
#wft-rel-world { position: absolute; left: 0; top: 0; width: 1500px; height: 960px; transform-origin: 0 0; }
#wft-rel-svg { position: absolute; inset: 0; width: 1500px; height: 960px; overflow: visible; pointer-events: none; }
.wft-rel-edge-group { opacity: 1; transition: opacity .22s ease; }
.wft-rel-edge, .wft-rel-edge-glow, .wft-rel-edge-flow { fill: none; stroke-linecap: round; }
.wft-rel-edge-glow { opacity: .13; filter: blur(2px); }
.wft-rel-edge-flow { stroke-dasharray: 4 17; animation: wft-rel-edge-flow 1.25s linear infinite; }
.wft-rel-edge-group.is-entering { animation: wft-rel-edge-in .55s cubic-bezier(.22,.8,.28,1) backwards; animation-delay: var(--rel-delay, 0ms); }
.wft-rel-edge-group.selected .wft-rel-edge-glow { opacity: .3; }
.wft-rel-edge-group.selected .wft-rel-edge { stroke-width: 4px; }
.wft-rel-edge-group.selected .wft-rel-edge-label { font-size: 12px; }
.wft-rel-edge-label { font-size: 10.5px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--bg); stroke-width: 5px; stroke-linejoin: round; transition: opacity .2s ease; }
.wft-rel-particle { pointer-events: none; filter: drop-shadow(0 0 4px currentColor); }
.wft-rel-node { position: absolute; width: 210px; height: 88px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; padding: 10px 11px; border: 1px solid var(--border); border-top: 3px solid var(--primary); border-radius: 8px; background: var(--surface); box-shadow: 0 5px 16px rgba(0,0,0,.2); cursor: move; user-select: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .22s ease, filter .22s ease; will-change: transform, opacity; }
.wft-rel-node.is-entering { animation: wft-rel-node-in .58s cubic-bezier(.18,.88,.3,1.15) backwards; animation-delay: var(--rel-delay, 0ms); }
.wft-rel-node:hover, .wft-rel-node.hovered, .wft-rel-node.selected { transform: translateY(-3px) scale(1.025); border-color: color-mix(in srgb, var(--primary) 65%, var(--border)); box-shadow: 0 10px 26px rgba(0,0,0,.3); z-index: 4; }
.wft-rel-node.drag-active { transform: scale(1.045); box-shadow: 0 13px 32px color-mix(in srgb, var(--primary) 24%, rgba(0,0,0,.35)); transition-duration: .08s; z-index: 8; }
.wft-rel-node.drop-feedback { animation: wft-rel-node-drop .38s cubic-bezier(.2,.9,.32,1.2); }
.wft-rel-node.center { width: 240px; height: 108px; padding: 13px 14px; border: 2px solid var(--primary); border-top-width: 4px; cursor: move; box-shadow: 0 9px 28px color-mix(in srgb, var(--primary) 22%, transparent); animation: wft-rel-center-breathe 3.2s ease-in-out infinite; z-index: 3; }
.wft-rel-node.center.is-entering { animation: wft-rel-node-in .62s cubic-bezier(.18,.88,.3,1.15) backwards, wft-rel-center-breathe 3.2s .65s ease-in-out infinite; }
.wft-rel-node.center:hover, .wft-rel-node.center.drag-active { animation-play-state: paused; }
#wft-rel-world.has-rel-hover .wft-rel-node:not(.center):not(.hovered) { opacity: .22; filter: saturate(.35); }
#wft-rel-world.has-rel-hover .wft-rel-edge-group:not(.hovered) { opacity: .1; }
#wft-rel-world.has-rel-hover .wft-rel-edge-group.hovered .wft-rel-edge-glow { opacity: .34; }
#wft-rel-world.has-rel-hover .wft-rel-edge-group.hovered .wft-rel-edge { stroke-width: 4px; }
#wft-rel-world.has-rel-hover .wft-rel-edge-group.hovered .wft-rel-edge-label { font-size: 12px; }
#wft-rel-viewport.node-dragging .wft-rel-particle { display: none; }
.wft-rel-node-head { display: flex; align-items: center; gap: 7px; min-width: 0; }
.wft-rel-node-phase { min-width: 0; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
.wft-rel-node-score { margin-left: auto; flex: 0 0 auto; border-radius: 4px; padding: 2px 5px; color: #fff; font-size: 10px; font-weight: 800; }
.wft-rel-node-title { color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wft-rel-node.center .wft-rel-node-title { font-size: 15px; }
.wft-rel-node-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; color: var(--text2); font-size: 10px; }
.wft-rel-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wft-rel-direct { flex: 0 0 auto; color: var(--green); font-weight: 700; }
.wft-rel-loading { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: color-mix(in srgb, var(--bg) 88%, transparent); }
.wft-rel-loading[hidden] { display: none; }
.wft-rel-loader { width: 30px; height: 30px; border: 3px solid color-mix(in srgb, var(--primary) 20%, transparent); border-top-color: var(--primary); border-radius: 50%; animation: wft-rel-spin .8s linear infinite; }
@keyframes wft-rel-spin { to { transform: rotate(360deg); } }
@keyframes wft-rel-grid-drift { to { background-position: 48px 24px; } }
@keyframes wft-rel-source-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes wft-rel-edge-flow { to { stroke-dashoffset: -42; } }
@keyframes wft-rel-edge-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wft-rel-node-in { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
@keyframes wft-rel-node-drop { 0% { transform: scale(1.045); } 55% { transform: scale(.975); } 100% { transform: scale(1); } }
@keyframes wft-rel-center-breathe { 0%, 100% { box-shadow: 0 9px 28px color-mix(in srgb, var(--primary) 18%, transparent); } 50% { box-shadow: 0 9px 35px color-mix(in srgb, var(--primary) 38%, transparent); } }
.wft-rel-motion-paused #wft-rel-viewport, .wft-rel-motion-paused .wft-rel-source::before, .wft-rel-motion-paused .wft-rel-edge-flow, .wft-rel-motion-paused .wft-rel-node { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  #wft-rel-viewport, .wft-rel-source::before, .wft-rel-edge-flow, .wft-rel-edge-group, .wft-rel-node { animation: none !important; transition-duration: .01ms !important; }
  .wft-rel-particle { display: none; }
}
.wft-rel-loading strong { font-size: 13px; }
.wft-rel-loading span { color: var(--text2); font-size: 11.5px; }
.wft-rel-inspector { width: 310px; flex: 0 0 310px; min-height: 0; overflow-y: auto; border-left: 1px solid var(--border); background: var(--surface); }
.wft-rel-inspector-section { padding: 14px 15px; border-bottom: 1px solid var(--border); }
.wft-rel-inspector-label { margin-bottom: 7px; color: var(--text2); font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
#wft-rel-summary { color: var(--text); font-size: 12.5px; line-height: 1.65; }
.wft-rel-detail-empty { padding: 22px 4px; color: var(--text2); text-align: center; font-size: 12px; }
.wft-rel-detail-title { font-size: 14px; font-weight: 700; line-height: 1.4; }
.wft-rel-detail-phase { margin-top: 3px; color: var(--text2); font-size: 11px; }
.wft-rel-meter-row { display: flex; align-items: center; gap: 9px; margin: 12px 0 10px; }
.wft-rel-meter { flex: 1; height: 6px; overflow: hidden; border-radius: 3px; background: var(--surface2); }
.wft-rel-meter > span { display: block; height: 100%; border-radius: inherit; }
.wft-rel-meter-row b { min-width: 34px; font-size: 13px; }
.wft-rel-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.wft-rel-detail-tags span { padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--text2); font-size: 10.5px; }
.wft-rel-reason { margin: 0 0 12px; color: var(--text); font-size: 12px; line-height: 1.6; }
.wft-rel-focus-btn { width: 100%; height: 32px; border: 1px solid var(--primary); border-radius: 7px; background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); cursor: pointer; font-size: 12px; font-weight: 700; }
.wft-rel-focus-btn:hover { background: color-mix(in srgb, var(--primary) 16%, transparent); }
.wft-rel-list { display: flex; flex-direction: column; }
.wft-rel-list-item { width: 100%; display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 9px 0; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.wft-rel-list-item:last-child { border-bottom: 0; }
.wft-rel-list-item:hover, .wft-rel-list-item.active { color: var(--primary); }
.wft-rel-list-dot { width: 7px; height: 7px; border-radius: 50%; }
.wft-rel-list-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.wft-rel-list-score { color: var(--text2); font-size: 10.5px; font-weight: 700; }
.wft-toolbar-search { width:128px; padding:5px 7px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--text); font-size:11px; }
.wft-edge-type { padding:5px 6px; border:1px solid var(--border); border-radius:6px; background:var(--surface2); color:var(--text); font-size:11px; }