/* 梦境空间设计工作室 · 内容节点层样式 V0.5.0
   设计原则：画布上只有图，没有卡片。
   所有 chrome（边框、控制点、名称、尺寸、工具条）只在选中时出现，
   和 Lovart 的观感一致。只描述 .cnode 这一族，不动 style.css 的 .node。 */

:root{
  --cn-sel:#2f81f7;         /* Lovart 的选中蓝 */
  --cn-sel-soft:#2f81f71c;
  --cn-chrome:#1c2023;
  --cn-chrome-bd:#3a4247;
  --cn-chrome-tx:#d7dcd9;
}

/* 内容层：与 #nodes 同级，叠在工具面板之上。
   本身不接事件，只有卡片接 —— 否则会挡住画布操作。 */
#contentLayer{
  position:absolute;left:0;top:0;
  width:1px;height:1px;
  overflow:visible;
  pointer-events:none;
  z-index:2;
}

/* ── 节点本体：裸图 ── */
.cnode{
  position:absolute;
  pointer-events:auto;
  overflow:visible;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
  border-radius:6px;
  transition:box-shadow .14s;
}
.cnode.locked{cursor:not-allowed}

.cnode-body{
  width:100%;height:100%;
  border-radius:6px;
  overflow:hidden;
  background:#14181a;
  box-shadow:0 4px 14px #0c0d0e55;
  cursor:inherit;
}
.cnode-body img{
  width:100%;height:100%;
  object-fit:fill;
  display:block;
  pointer-events:none;
}

/* 悬停：只有一点点提示，不要抢戏 */
.cnode:hover .cnode-body{box-shadow:0 0 0 1px #ffffff2e, 0 8px 22px #0c0d0e88}
.cnode.sel .cnode-body{box-shadow:0 10px 28px #0c0d0ecc}
.cnode.dragging{cursor:grabbing}
.cnode.dragging .cnode-body{box-shadow:0 18px 44px #000b;transition:none}
.cnode.resizing .cnode-body{box-shadow:0 0 0 1px var(--cn-sel), 0 14px 34px #000a}

/* ── 选中框 ── */
.cnode::after{
  content:'';
  position:absolute;inset:0;
  border:1px solid var(--cn-sel);
  border-radius:6px;
  pointer-events:none;
  opacity:0;
  transition:opacity .12s;
}
.cnode.sel::after{opacity:1}

/* ── 名称标签 / 尺寸：框外左上、右上（Lovart 就是这样）── */
.cnode-tag,.cnode-size{
  position:absolute;
  top:-21px;
  font-size:10px;line-height:15px;
  padding:0 5px;
  border-radius:3px;
  white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity .12s;
  font-variant-numeric:tabular-nums;
}
.cnode-tag{
  left:0;
  max-width:70%;
  overflow:hidden;text-overflow:ellipsis;
  background:var(--cn-sel);color:#fff;
}
.cnode-size{
  right:0;
  background:var(--cn-sel);color:#fff;
}
.cnode.sel .cnode-tag,.cnode.sel .cnode-size{opacity:1}

/* ── 8 个控制点 ── */
.cnh{
  position:absolute;
  width:9px;height:9px;
  background:#fff;
  border:1px solid var(--cn-sel);
  border-radius:2px;
  display:none;
  z-index:2;
}
.cnode.sel .cnh{display:block}
.cnode.locked .cnh{display:none}

/* 多选时只留整组包围框，不逐个画控制点和名字 ——
   Lovart 多选实测就是这样：图上只有蓝边，控制点收起来，避免一片小白点。 */
#contentLayer.multi .cnode .cnh{display:none}
#contentLayer.multi .cnode .cnode-tag,
#contentLayer.multi .cnode .cnode-size{opacity:0}

.cnh-nw{left:-5px;top:-5px;cursor:nwse-resize}
.cnh-n {left:50%;top:-5px;margin-left:-4.5px;cursor:ns-resize}
.cnh-ne{right:-5px;top:-5px;cursor:nesw-resize}
.cnh-e {right:-5px;top:50%;margin-top:-4.5px;cursor:ew-resize}
.cnh-se{right:-5px;bottom:-5px;cursor:nwse-resize}
.cnh-s {left:50%;bottom:-5px;margin-left:-4.5px;cursor:ns-resize}
.cnh-sw{left:-5px;bottom:-5px;cursor:nesw-resize}
.cnh-w {left:-5px;top:50%;margin-top:-4.5px;cursor:ew-resize}

/* ── 多选整组包围框 ── */
#cnGroupBox{
  position:absolute;
  display:none;
  border:1px dashed var(--cn-sel);
  border-radius:4px;
  background:var(--cn-sel-soft);
  pointer-events:none;
  z-index:1;
}

/* ── 框选 marquee ── */
#cnMarquee{
  position:absolute;
  display:none;
  border:1px solid var(--cn-sel);
  background:var(--cn-sel-soft);
  border-radius:2px;
  pointer-events:none;
  z-index:6;
}

/* ── 浮动工具条 ──
   position:fixed —— 要能浮到画布上方，不能被 #stage 的 overflow 裁掉。 */
.cn-bar{
  position:fixed;
  display:none;
  align-items:center;gap:2px;
  height:32px;
  padding:0 4px;
  background:var(--cn-chrome);
  border:1px solid var(--cn-chrome-bd);
  border-radius:8px;
  box-shadow:0 8px 24px #0009;
  z-index:8;
  white-space:nowrap;
}
.cn-bar button{
  border:0;background:transparent;
  color:var(--cn-chrome-tx);
  font-size:11.5px;line-height:1;
  padding:7px 9px;border-radius:5px;
  cursor:pointer;
  font-family:inherit;
}
.cn-bar button:hover{background:#ffffff17;color:#fff}
.cn-bar-sep{
  width:1px;height:16px;flex:none;
  background:var(--cn-chrome-bd);
  margin:0 3px;
}

/* ── 右键菜单 ── */
.cn-menu{
  position:fixed;
  display:none;
  min-width:186px;
  padding:5px;
  background:var(--cn-chrome);
  border:1px solid var(--cn-chrome-bd);
  border-radius:8px;
  box-shadow:0 14px 38px #000b;
  z-index:9999;
}
.cn-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  width:100%;
  border:0;background:transparent;
  color:var(--cn-chrome-tx);
  font-size:12px;line-height:1;
  padding:7px 9px;border-radius:5px;
  cursor:pointer;text-align:left;
  font-family:inherit;
}
.cn-menu button:hover{background:#ffffff17;color:#fff}
.cn-menu button em{
  font-style:normal;font-size:10px;color:#7b848a;
  font-variant-numeric:tabular-nums;
}
.cn-menu button.danger{color:#e88a8a}
.cn-menu button.danger:hover{background:#3a2a2a;color:#ff9c9c}
.cn-menu-sep{height:1px;background:var(--cn-chrome-bd);margin:4px 6px}

/* 小屏：控制点小一点，别太占 */
@media(max-width:1100px){
  .cnode-tag,.cnode-size{font-size:9.5px}
}

/* Keep floating editing controls above the title and focus workspace. */
#cnBar{z-index:1001;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 16px);height:auto;min-height:32px;padding:3px 4px}#cnBar button{flex:0 0 auto}#cnMenu{z-index:1002}
body.focus-edit #cnBar,body.focus-edit #cnMenu,body:has(dialog[open]) #cnBar,body:has(dialog[open]) #cnMenu{display:none!important}

/* Header buttons must remain interactive inside the transparent title overlay. */
body .canvas-heading > button{pointer-events:auto;flex:none}


/* Keep every image action reachable at narrow viewport widths. */
.cn-bar{max-width:calc(100vw - 16px);height:auto;min-height:32px;flex-wrap:wrap;padding:3px 4px;white-space:normal}
.cn-bar button{flex:none;white-space:nowrap}