/*!
 * canvas-editor.css — 拖拽式画布（流程图 / 脑图）
 * 跟随 pc-app 设计 token；token 缺失时用兜底值，独立页面也能看。
 * 层级与 .txted-ov 一致：z-index 99999
 */

/* ── 根 ── */
.cnv-ov{
  position:fixed; inset:0; z-index:99999;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh;
  background:var(--bg0,#080c14);
  color:var(--text1,#edf1f8);
  font-family:var(--fn,'Noto Sans SC',system-ui,sans-serif);
  font-size:13px; line-height:1.5;
  -webkit-user-select:none; user-select:none;
  overflow:hidden;
}
.cnv-ov svg{display:block}

/* ── 顶栏 ── */
.cnv-bar{
  flex:none; height:52px;
  display:flex; align-items:center; gap:10px;
  padding:0 14px;
  background:var(--bg1,#0d1220);
  border-bottom:1px solid var(--border,rgba(255,255,255,.09));
}
.cnv-name{
  font-size:15px; font-weight:600; letter-spacing:.2px;
  color:var(--text1,#edf1f8);
  max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cnv-sp{flex:1}

/* 模式切换（分段控件） */
.cnv-seg{
  display:flex; align-items:center; gap:2px;
  padding:2px; margin-left:6px;
  background:var(--bg2,#121828);
  border:1px solid var(--border,rgba(255,255,255,.09));
  border-radius:9px;
}
.cnv-seg button{
  height:32px; min-width:62px; padding:0 12px;
  border:0; border-radius:7px; cursor:pointer;
  background:transparent; color:var(--text2,#a8b4c8);
  font-family:inherit; font-size:13px; font-weight:500;
  transition:background .14s,color .14s;
}
.cnv-seg button:hover{color:var(--text1,#edf1f8);background:var(--bg3,#1a2235)}
.cnv-seg button.on{
  background:var(--bg1,#0d1220); color:var(--text1,#edf1f8);
  font-weight:600;
  box-shadow:0 0 0 1px var(--border2,rgba(255,255,255,.16));
}

/* 按钮 */
.cnv-btn{
  height:36px; padding:0 14px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; cursor:pointer;
  border:1px solid var(--border2,rgba(255,255,255,.16));
  background:var(--bg3,#1a2235);
  color:var(--text1,#edf1f8);
  font-family:inherit; font-size:13px; font-weight:600;
  transition:background .14s,border-color .14s,color .14s;
  white-space:nowrap;
}
.cnv-btn:hover{background:var(--bg4,#222d42)}
.cnv-btn.pri{
  background:var(--acc-primary-fill,var(--acc-primary,#4a8ff0));
  border-color:transparent;
  color:var(--tx-on-accent,#fff);
}
.cnv-btn.pri:hover{background:var(--acc-primary,#4a8ff0)}
.cnv-btn:disabled{opacity:.38; cursor:not-allowed}
.cnv-btn:disabled:hover{background:var(--bg3,#1a2235)}

/* 导出下拉 */
.cnv-dd{position:relative}
.cnv-menu{
  position:absolute; right:0; top:calc(100% + 6px);
  min-width:158px; padding:5px;
  background:var(--bg1,#0d1220);
  border:1px solid var(--border2,rgba(255,255,255,.16));
  border-radius:9px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  display:none; z-index:3;
}
.cnv-dd.open .cnv-menu{display:block}
.cnv-menu button{
  display:block; width:100%; text-align:left;
  padding:8px 10px; border:0; border-radius:6px;
  background:transparent; color:var(--text1,#edf1f8);
  font-family:inherit; font-size:13px; cursor:pointer;
}
.cnv-menu button:hover{background:var(--bg3,#1a2235); color:var(--acc-primary,#4a8ff0)}

/* ── 画布区 ── */
.cnv-body{flex:1; min-height:0; position:relative; overflow:hidden}
.cnv-cv{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  cursor:default; touch-action:none;
}

/* ── 左侧工具栏 ── */
.cnv-left{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px;
  background:var(--bg1,#0d1220);
  border:1px solid var(--border,rgba(255,255,255,.09));
  border-radius:11px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.cnv-left > button{
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--text2,#a8b4c8);
  cursor:pointer; transition:background .14s,color .14s,border-color .14s;
}
.cnv-left > button svg{width:18px; height:18px}
.cnv-left > button:hover{background:var(--bg3,#1a2235); color:var(--text1,#edf1f8)}
.cnv-left > button.on{
  background:var(--bd,rgba(74,143,240,.15));
  border-color:var(--bb,rgba(74,143,240,.3));
  color:var(--acc-primary,#4a8ff0);
}
.cnv-left > button:disabled{opacity:.3; cursor:not-allowed; background:transparent}
.cnv-left > button:disabled:hover{background:transparent; color:var(--text2,#a8b4c8)}
.cnv-sep{
  width:22px; height:1px; margin:4px 0;
  background:var(--border,rgba(255,255,255,.09));
}
.cnv-sep-h{
  width:1px; height:20px; margin:0 4px; flex:none;
  background:var(--border,rgba(255,255,255,.09));
}

/* 节点颜色（跟随选中节点，未选中时置灰） */
.cnv-colors{
  display:flex; align-items:center; gap:6px; padding:0 3px;
  transition:opacity .14s;
}
.cnv-colors.dim{opacity:.36; pointer-events:none}
.cnv-sw{
  width:16px; height:16px; padding:0; border-radius:50%;
  border:1px solid var(--border2,rgba(255,255,255,.16));
  background:var(--sw,#6b7a92); cursor:pointer;
  transition:transform .12s,box-shadow .12s;
}
.cnv-sw:hover{transform:scale(1.14)}
.cnv-sw.on{
  box-shadow:0 0 0 2px var(--bg1,#0d1220), 0 0 0 3.5px var(--acc-primary,#4a8ff0);
}

/* ── 形状切换（底部居中） ── */
.cnv-shapes{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  display:flex; align-items:center; gap:2px; padding:4px;
  background:var(--bg1,#0d1220);
  border:1px solid var(--border,rgba(255,255,255,.09));
  border-radius:10px;
  box-shadow:0 6px 20px rgba(0,0,0,.18);
}
.cnv-shapes > button{
  width:34px; height:30px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid transparent; border-radius:7px;
  background:transparent; color:var(--text2,#a8b4c8); cursor:pointer;
  transition:background .14s,color .14s,border-color .14s;
}
.cnv-shapes > button svg{width:17px; height:17px}
.cnv-shapes > button:hover{background:var(--bg3,#1a2235); color:var(--text1,#edf1f8)}
.cnv-shapes > button.on{
  background:var(--bd,rgba(74,143,240,.15));
  border-color:var(--bb,rgba(74,143,240,.3));
  color:var(--acc-primary,#4a8ff0);
}

/* ── 缩放指示 ── */
.cnv-zoom{
  position:absolute; right:16px; bottom:18px;
  padding:3px 8px; border-radius:6px;
  font-family:var(--mo,'JetBrains Mono',monospace);
  font-size:12px; color:var(--text3,#6b7a92);
  background:var(--bg1,#0d1220);
  border:1px solid var(--border,rgba(255,255,255,.09));
  pointer-events:none;
}

/* ── 底部操作提示 ── */
.cnv-hint{
  position:absolute; left:16px; bottom:18px;
  max-width:calc(100% - 220px);
  font-size:12px; color:var(--text3,#6b7a92);
  pointer-events:none; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  opacity:.85;
}

/* ── 内联文字编辑 ── */
.cnv-edit{
  position:absolute; z-index:4;
  padding:6px 8px;
  border:1.5px solid var(--acc-primary,#4a8ff0);
  border-radius:8px;
  background:var(--bg1,#0d1220);
  color:var(--text1,#edf1f8);
  font-family:var(--fn,'Noto Sans SC',system-ui,sans-serif);
  line-height:1.45;
  text-align:center;
  outline:none; resize:none; overflow:hidden;
  box-shadow:0 0 0 3px rgba(74,143,240,.14);
}

/* ── 提示条 ── */
.cnv-toast{
  position:absolute; left:50%; bottom:64px; transform:translate(-50%,10px);
  padding:8px 16px; border-radius:8px;
  background:var(--bg3,#1a2235);
  border:1px solid var(--border2,rgba(255,255,255,.16));
  color:var(--text1,#edf1f8);
  font-size:13px;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease,transform .16s ease;
}
.cnv-toast.on{opacity:1; transform:translate(-50%,0)}
.cnv-toast.bad{
  border-color:var(--rb,rgba(232,85,85,.3));
  background:var(--rd,rgba(232,85,85,.12));
  color:var(--red-t,#f07070);
}

/* ── 窄屏（手机 / 小窗） ── */
@media (max-width:760px){
  .cnv-bar{height:52px; padding:0 8px; gap:6px; flex-wrap:nowrap}
  .cnv-name{min-width:0; flex:1; max-width:none; font-size:13.5px}
  .cnv-sp{display:none}
  .cnv-seg{margin-left:0; flex:none}
  .cnv-seg button{min-width:0; padding:0 9px; font-size:12.5px; height:30px}
  .cnv-btn{height:32px; padding:0 10px; font-size:12.5px; flex:none}
  .cnv-left{left:8px; padding:4px; gap:2px; border-radius:9px}
  .cnv-left > button{width:34px; height:34px}
  .cnv-left > button svg{width:17px; height:17px}
  .cnv-shapes{bottom:10px; padding:3px}
  .cnv-shapes > button{width:30px; height:28px}
  .cnv-hint{display:none}
  .cnv-zoom{right:10px; bottom:12px; font-size:12px}
}

/* 打印/导出时不带 UI */
@media print{
  .cnv-bar,.cnv-left,.cnv-shapes,.cnv-zoom,.cnv-hint{display:none}
}