/* Canvas 擦除功能（image_erase）专属样式 —— 本文件是擦除前端表示的唯一样式归属
   （原先挤在 nodes.css 里的擦除块已整体迁入此处）。
   主题层（theme.css / theme-panel.css / tapnow-*）继续通过
   .canvas-image-eraser-tools / button / input[type="range"] 同名选择器覆盖配色，
   本文件只负责几何、布局与新增元素（引导行、积分 chip、笔刷读数、禁用态）。
   设计说明见仓库内「Canvas 擦除工具栏重设计」规划文档。 */

.canvas-image-eraser-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.canvas-image-eraser-canvas {
  position: absolute;
  z-index: 1;
  touch-action: none;
  pointer-events: auto;
  cursor: crosshair;
  border-radius: 6px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.24),
    0 0 0 1px rgba(8,13,20,0.7);
}

/* 工具栏顶边锚定在节点下缘之下：分辨率徽标（.canvas-asset-info-badge，
   bottom:-30px）在擦除模式下保持默认位置、永不偏移；工具栏只向下生长，
   触屏下按钮被 responsive.css 抬到 44px 也不会与徽标重叠。
   不再需要旧的 is-image-erasing 徽标让位硬编码。 */
.canvas-image-eraser-tools {
  position: absolute;
  left: 50%;
  top: calc(100% + 40px);
  bottom: auto;
  z-index: 14;
  width: min(380px, calc(100% + 60px));
  min-width: 300px;
  display: grid;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  background: rgba(9,13,20,0.9);
  box-shadow: 0 12px 28px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
  transform: translateX(-50%);
  backdrop-filter: blur(14px);
}

/* 引导行：左侧步骤文案（① 涂抹 → ② 生成），右侧积分消耗 chip。 */
.canvas-image-eraser-guide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.canvas-image-eraser-step {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--canvas-text-muted, #94a3b8);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: color 0.16s ease;
}

.canvas-image-eraser-tools.has-strokes .canvas-image-eraser-step {
  color: var(--canvas-text, #e2e8f0);
}

/* 「本次消耗」chip：复用 .canvas-point-cost-preview 统一外观（深色胶囊 +
   bolt 图标，配色由主题层覆盖，与生成节点面板 / 文本 AI chip 完全同步），
   这里只做节点工具栏场景的尺寸收放（与 nodes-text.css 的文本 AI 适配同法）。 */
.canvas-image-eraser-tools .canvas-point-cost-preview {
  flex: none;
  height: 22px;
  gap: 5px;
  padding: 0 8px;
  font-size: 11px;
}

.canvas-image-eraser-tools .canvas-point-cost-preview strong {
  font-size: 13px;
}

.canvas-image-eraser-tools .canvas-point-cost-icon svg {
  width: 12px;
  height: 12px;
}

/* 控件行：画笔滑块 + 直径读数 + 撤销 / 清空 / 取消 / 生成。 */
.canvas-image-eraser-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.canvas-image-eraser-brush-label {
  flex: none;
  color: var(--canvas-text-muted, #94a3b8);
  font-size: 11px;
  font-weight: 850;
}

.canvas-image-eraser-tools input[type="range"] {
  flex: 1;
  min-width: 70px;
  width: auto;
  accent-color: #38bdf8;
}

.canvas-image-eraser-brush-value {
  flex: none;
  min-width: 24px;
  color: rgba(224,242,254,0.82);
  font-size: 11px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.canvas-image-eraser-tools button {
  flex: none;
  height: 26px;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.82);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 0 8px;
  white-space: nowrap;
}

.canvas-image-eraser-tools button:hover {
  border-color: rgba(125,211,252,0.42);
  color: #fff;
}

.canvas-image-eraser-tools button.primary {
  border-color: rgba(56,189,248,0.64);
  background: rgba(14,165,233,0.34);
  color: #e0f2fe;
}

/* 无笔画时「生成」「撤销」禁用：把过去的静默无反应变成可见状态。 */
.canvas-image-eraser-tools button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.canvas-image-eraser-tools button.primary:disabled {
  border-color: rgba(56,189,248,0.3);
  background: rgba(14,165,233,0.14);
}