/* ================= 「操作流程归纳」样式 =================
   内容区：画布 + 右侧编辑面板（一整块）。
   流程文件夹树渲染进系统左侧菜单栏（#fl-nav），不再占内容区。
   注意：styles.css 只给 button 设了字体与光标，**没重置背景** →
   这里所有按钮都必须显式写 background/border，否则会露出浏览器默认白底。
   不改 styles.css / modules.css（仅本文件内声明 .nav 可滚动）。 */

/* 侧栏菜单过长时允许滚动（否则流程文件夹树会被侧栏裁掉）；
   菜单项保持自然高度、不参与压缩，空间不足时交给滚动 */
.nav { overflow-y: auto; }
.nav > .nav-item { flex: 0 0 auto; }

/* 内容区底：画布铺满（用内容区自身的大板块做底，不再另画框）
   网格背景挂在这一层 → 连顶部标题栏一起铺满 */
.fl-stage {
  position: relative; height: 100%; min-height: 420px;
  user-select: none; -webkit-user-select: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: 22px 22px;
}
/* 去掉内容区默认内边距，让画布铺满，圆角由内容区自己裁切 */
.content:has(> .fl-stage) { padding: 0; overflow: hidden; }
.fl-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: rgba(203, 229, 232, .6);
}
/* 画布内禁选文字（拖动时不会误选到节点文字），但输入框仍可正常选中 */
.fl-stage input, .fl-stage textarea { user-select: text; -webkit-user-select: text; }

/* ---------- 侧栏：流程文件夹树（渲染进系统左侧菜单栏 #fl-nav） ---------- */
.fl-nav { display: flex; flex-direction: column; flex: 0 0 auto; margin-top: 4px; }
.fl-nav-head { padding: 8px 12px 4px; font-size: 12px; letter-spacing: .04em; color: rgba(203, 229, 232, .55); }
.fl-nav-body { display: flex; flex-direction: column; gap: 2px; }

.fl-nav-group { margin-bottom: 4px; }
.fl-nav-grouphead { display: flex; align-items: center; gap: 6px; padding: 4px 12px; }
.fl-nav-groupname {
  flex: 1; min-width: 0; font-size: 12.5px; color: rgba(235, 250, 251, .92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-nav-flows { padding-left: 6px; margin-left: 12px; border-left: 1px solid rgba(255, 255, 255, .12); }

.fl-nav-flow {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: none; border: 0; border-radius: 7px; padding: 6px 9px; margin: 1px 0;
  font-size: 12.5px; color: rgba(203, 229, 232, .8); cursor: pointer;
}
.fl-nav-flow:hover { background: rgba(255, 255, 255, .1); color: #eafcfa; }
.fl-nav-flow.active { background: linear-gradient(90deg, rgba(84, 218, 207, .22), rgba(255, 255, 255, .08)); color: #dffcf8; }
.fl-nav-flow-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-nav-del { flex: none; font-size: 13px; line-height: 1; color: rgba(203, 229, 232, .4); background: none; border: 0; padding: 0 2px; cursor: pointer; }
.fl-nav-del:hover { color: #ff8a8e; }
.fl-nav-mini { flex: none; font-size: 11px; color: rgba(203, 229, 232, .45); background: none; border: 0; padding: 0; cursor: pointer; }
.fl-nav-mini:hover { color: #7fe3d8; }
.fl-nav-add {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 5px 9px; margin: 1px 0; font-size: 12px; color: #7fe3d8; cursor: pointer; border-radius: 7px;
}
.fl-nav-add:hover { background: rgba(127, 227, 216, .12); }
.fl-nav-addtop { margin-top: 8px; border: 1px dashed rgba(127, 227, 216, .35); text-align: center; }
.fl-nav-hint { font-size: 11.5px; color: rgba(203, 229, 232, .45); padding: 3px 12px; line-height: 1.6; }

.fl-mini { font-size: 11px; color: rgba(203, 229, 232, .45); cursor: pointer; background: none; border: 0; padding: 0; }
.fl-mini:hover { color: #7fe3d8; }
.fl-hint { font-size: 11.5px; color: rgba(203, 229, 232, .45); padding: 3px 8px; line-height: 1.6; }

/* ---------- 中：画布 ---------- */
.fl-mid { height: 100%; min-width: 0; display: flex; flex-direction: column; }
.fl-mid-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
/* 有悬浮编辑面板时，标题栏右侧让位，避免被浮层盖住 */
.fl-stage:has(.fl-right) .fl-mid-head { padding-right: 240px; }
.fl-mid-title { font-size: 13.5px; color: rgba(238, 252, 252, .95); }
.fl-mid-note { font-size: 11.5px; color: rgba(203, 229, 232, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fl-canvas {
  position: relative; flex: 1; min-height: 0; overflow: hidden; cursor: grab;
}
.fl-canvas.is-panning { cursor: grabbing; }
.fl-canvas-inner {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transform-origin: 0 0;
}
.fl-canvas-empty {
  max-width: 420px; padding: 18px 20px; text-align: center; line-height: 1.75;
  font-size: 12.5px; color: rgba(203, 229, 232, .6);
}
.fl-canvas-todo b { color: rgba(238, 252, 252, .92); font-weight: 500; }

.fl-canvas-tools {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  display: flex; align-items: center; gap: 5px;
  background: rgba(8, 40, 50, .82); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 9px; padding: 4px 6px;
}
.fl-tool {
  background: none; border: 0; border-radius: 6px; padding: 3px 8px;
  font-size: 13px; color: rgba(203, 229, 232, .8); cursor: pointer;
}
.fl-tool:hover { background: rgba(255, 255, 255, .1); color: #7fe3d8; }
.fl-tool:disabled { opacity: .32; cursor: default; }
.fl-tool:disabled:hover { background: none; color: rgba(203, 229, 232, .8); }
.fl-tool-wide { font-size: 11.5px; }
.fl-zoom { font-size: 11.5px; color: rgba(203, 229, 232, .6); min-width: 38px; text-align: center; }

/* ---------- 右：编辑面板 ---------- */
/* 编辑面板：悬浮在画布右上角的长方形浮层（平时不占位置）
   背景沿用「记一笔」选择框的玻璃配方，质感一致 */
.fl-right {
  position: absolute; top: 10px; right: 10px; z-index: 6;
  width: 218px; max-height: calc(100% - 20px);
  display: flex; flex-direction: column;
  border: 1px solid var(--g-panel-border, rgba(255, 255, 255, .15));
  border-radius: 10px;
  background: var(--g-panel-bg, rgba(10, 42, 50, .9));
  box-shadow: var(--g-panel-shadow, 0 14px 36px rgba(0, 0, 0, .34));
  -webkit-backdrop-filter: var(--g-panel-blur, blur(8px));
  backdrop-filter: var(--g-panel-blur, blur(8px));
  overflow: hidden;
}
.fl-right-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 12px 8px; font-size: 12px; color: rgba(203, 229, 232, .62);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.fl-right-body { flex: 1; overflow-y: auto; padding: 10px 10px 14px; }
.fl-right-label { font-size: 11px; color: rgba(203, 229, 232, .45); margin: 8px 0 5px; }

.fl-chip {
  display: flex; align-items: center; gap: 7px; margin-bottom: 4px;
  font-size: 12.5px; color: var(--chip, #cfe9e9);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 3px solid var(--chip, #cfe9e9);
  border-radius: 7px; padding: 5px 8px;
}
.fl-chip-k { font-size: 10.5px; opacity: .7; flex: none; }
.fl-chip-node {
  justify-content: center; color: rgba(238, 252, 252, .88);
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .26); border-radius: 7px;
  padding: 7px 8px; margin-bottom: 4px;
}
.fl-right-tip { margin-top: 10px; font-size: 10.5px; line-height: 1.6; color: rgba(203, 229, 232, .4); }

@media (max-width: 900px) {
  .fl-right { width: 200px; }
  .fl-right-body { max-height: 60%; }
  .fl-stage:has(.fl-right) .fl-mid-head { padding-right: 216px; }
  .fl-canvas { min-height: 320px; }
}

/* ---------- 画布世界层 / 连线 / 节点 ---------- */
.fl-world { position: absolute; inset: 0; transform-origin: 0 0; }

.fl-edges {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
.fl-edge { pointer-events: stroke; cursor: pointer; }
.fl-edge-line { fill: none; stroke: rgba(127, 227, 216, .5); stroke-width: 2; }
.fl-edge:hover .fl-edge-line { stroke: #7fe3d8; stroke-width: 3; }
.fl-edge-label { font-size: 11px; fill: rgba(203, 229, 232, .85); }

.fl-temp { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.fl-temp-line { stroke: #ffb84d; stroke-width: 2; stroke-dasharray: 6 4; }

.fl-node {
  position: absolute; background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
  padding: 9px 12px; cursor: move; box-shadow: 0 6px 18px rgba(0, 20, 28, .25);
}
.fl-node.selected { border-color: #7fe3d8; box-shadow: 0 0 0 2px rgba(127, 227, 216, .4); }
.fl-node-title { font-size: 13.5px; color: rgba(238, 252, 252, .95); }
.fl-node-desc { font-size: 11.5px; color: rgba(203, 229, 232, .6); margin-top: 3px; white-space: pre-wrap; }

.fl-node-panels { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.fl-node-panel {
  display: flex; gap: 7px; background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12); border-left: 3px solid var(--chip, #7fb2ff);
  border-radius: 6px; padding: 4px 8px;
}
.fl-np-k { flex: none; font-size: 11px; color: var(--chip, #7fb2ff); }
.fl-np-v { font-size: 11.5px; color: rgba(238, 252, 252, .85); word-break: break-word; }
.fl-np-dl {
  flex: none; margin-left: auto; font-size: 12px; color: #7fe3d8; cursor: pointer;
  text-decoration: none; padding: 0 2px;
}
.fl-np-dl:hover { color: #b4fff6; }

.fl-port {
  position: absolute; top: 50%; width: 13px; height: 13px; transform: translateY(-50%);
  border-radius: 50%; background: #0e2e37; border: 2px solid #7fe3d8; cursor: crosshair;
}
.fl-port-l { left: -8px; }
.fl-port-r { right: -8px; }
.fl-port:hover { background: #7fe3d8; }

.fl-save-state { margin-left: auto; font-size: 11px; color: rgba(203, 229, 232, .5); }

/* ---------- 右面板 · 节点编辑器 ---------- */
.fl-del-btn { margin-top: 14px; width: 100%; }
.fl-pe-row { margin-bottom: 7px; }
.fl-pe-t { font-size: 12px; color: var(--chip, #cfe9e9); margin-bottom: 3px; }
.fl-pe-input {
  margin-top: 4px; width: 100%; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px;
  color: rgba(238, 252, 252, .92); padding: 5px 8px; font-size: 12.5px;
}
.fl-pe-input::placeholder { color: rgba(203, 229, 232, .4); }
.fl-pe-file {
  margin-top: 5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.fl-pe-fname { font-size: 11.5px; color: rgba(203, 229, 232, .75); word-break: break-all; }