/* 梦境空间设计工作室 · 画布评论样式 V0.4.1 */

/* ── 世界层：只放虚线框，跟着画布缩放 ── */
#commentLayer{
  position:absolute;left:0;top:0;
  width:1px;height:1px;
  overflow:visible;
  pointer-events:none;
  z-index:3;
}
.cn-rect{
  position:absolute;
  border:1.5px dashed var(--accent);
  background:#dab78314;
  border-radius:3px;
  pointer-events:none;
}
.cn-draft{
  position:absolute;
  border:1.5px dashed #ecd0a3;
  background:#dab78322;
  border-radius:3px;
  pointer-events:none;
}

/* ── 屏幕层：编号 + 卡片，不随缩放变小 ── */
#commentOverlay{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:8500;
}
.cn-item{
  position:absolute;
  width:0;height:0;
}

/* ── 队列条：几条评论 + 全部执行（Lovart 的 Run All） ── */
#cnQueue{
  position:absolute;
  right:14px;
  top:92px;
  z-index:8600;
  display:flex;
  align-items:center;
  gap:4px;
  padding:4px 5px 4px 12px;
  border:1px solid #4a5257;
  border-radius:999px;
  background:#24292ceb;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 20px #0008;
  max-width:calc(100% - 28px);
  flex-wrap:wrap;
}
.cn-q-count{font-size:11px;color:var(--muted);margin-right:4px}
#cnQueue button{
  border:0;
  background:transparent;
  color:var(--accent);
  font-size:11px;
  padding:4px 9px;
  border-radius:999px;
}
#cnQueue button:hover:not(:disabled){background:#3a3226}
#cnQueue button[data-act="runall"]{background:#3a3226;color:#ecd0a3}
#cnQueue button[data-act="runall"]:hover:not(:disabled){background:#4a3f2e}
#cnQueue button:disabled{opacity:.35;cursor:not-allowed}
#cnQueue button[data-act="clear"],
#cnQueue button[data-act="exit"]{color:var(--muted)}

/* ── 编号：默认只露这一颗，点开才出卡片 ── */
.cn-pin{
  position:absolute;
  left:0;top:0;
  transform:translate(-50%,-50%);
  width:20px;height:20px;
  padding:0;
  border-radius:50%;
  border:1px solid var(--accent);
  background:#3a3226;
  color:var(--accent);
  font-size:11px;
  line-height:1;
  display:grid;place-items:center;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 2px 8px #0008;
}
.cn-item.done .cn-pin{background:#2f3b32;border-color:var(--success);color:var(--success)}
.cn-item.running .cn-pin{border-color:#ecd0a3;color:#ecd0a3}
.cn-item.open .cn-pin{background:var(--accent);color:#211c15;border-color:#ecd0a3}

/* 卡片贴着编号往下展开，宽度收窄一点，别把缩略图盖死 */
.cn-card{
  position:absolute;
  left:16px;top:10px;
  width:196px;
  background:#24292c;
  border:1px solid #4a5257;
  border-radius:8px;
  box-shadow:0 8px 26px #0008;
  pointer-events:auto;
  overflow:hidden;
}
.cn-text{
  margin:0;
  padding:8px 10px 7px;
  font-size:12px;
  line-height:1.55;
  color:#d7dcd9;
  max-height:96px;
  overflow:auto;
  overflow-wrap:anywhere;
}
.cn-acts{
  display:flex;
  gap:2px;
  padding:0 6px 6px;
}
.cn-acts button{
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  padding:4px 7px;
  border-radius:5px;
}
.cn-acts button:hover{color:var(--accent);background:#33383a}
.cn-item.running .cn-acts button[data-act="run"]{color:#ecd0a3;cursor:progress}

/* ── 输入弹层 ── */
.cn-pop{
  position:fixed;
  z-index:9990;
  width:268px;
  background:#24292c;
  border:1px solid #50595d;
  border-radius:10px;
  box-shadow:0 16px 48px #000a;
  padding:10px;
}
.cn-pop-head{
  font-size:10px;
  color:var(--dim);
  letter-spacing:.5px;
  margin-bottom:7px;
}
.cn-pop textarea{
  width:100%;
  min-height:58px;
  max-height:140px;
  resize:vertical;
  font-size:12px;
  line-height:1.6;
  padding:8px 9px;
}
.cn-pop-foot{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  margin-top:8px;
}
.cn-pop-foot button{font-size:11px;padding:5px 11px}

/* ── 底部工具条上的评论开关 ── */
#commentToggle{
  pointer-events:auto;
  border:1px solid var(--line);
  border-radius:6px;
  padding:5px 10px;
  font-size:11px;
  color:var(--muted);
  background:#222729;
}
#commentToggle:hover{color:var(--accent);border-color:var(--accent)}
#commentToggle.active{
  color:#211c15;
  background:var(--accent);
  border-color:var(--accent);
  font-weight:600;
}

/* 评论模式下画布光标变十字，明确「现在可以拖框」 */
#stage.comment-mode{cursor:crosshair}
#stage.comment-mode .cnode-body img{cursor:crosshair}