/* Canvas 扩图功能（image_outpaint）专属样式 —— 本文件是扩图前端表示的唯一样式归属
   （原先挤在 nodes.css 455–685 行的扩图块已整体迁入此处）。
   主题层（theme.css / theme-panel.css / theme-controls.css / tapnow-*）继续通过
   .canvas-image-outpaint-tools / -actions button / -main select / -frame / -pad / -handle
   同名选择器覆盖配色，本文件负责几何、布局与新增元素（引导行、积分 chip、禁用态）。
   设计说明见仓库内「Canvas 扩图工具栏重设计」规划文档。 */

.canvas-node.is-image-outpainting,
.canvas-node.is-image-outpainting .canvas-node-body,
.canvas-node.is-image-outpainting .canvas-asset-preview {
  overflow: visible;
}

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

.canvas-image-outpaint-frame {
  position: absolute;
  left: calc(-1 * var(--outpaint-left, 0%));
  top: calc(-1 * var(--outpaint-top, 0%));
  right: calc(-1 * var(--outpaint-right, 0%));
  bottom: calc(-1 * var(--outpaint-bottom, 0%));
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 2px rgba(125,211,252,0.32),
    0 0 0 1px rgba(8,13,20,0.72);
  pointer-events: none;
}

.canvas-image-outpaint-original {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(8,13,20,0.42);
}

.canvas-image-outpaint-pad {
  position: absolute;
  opacity: 0.86;
  background-color: rgba(226, 232, 240, 0.22);
  background-image:
    linear-gradient(45deg, rgba(15,23,42,0.28) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(15,23,42,0.28) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(15,23,42,0.28) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(15,23,42,0.28) 75%);
  background-size: 28px 28px;
  background-position: 0 0, 0 14px, 14px -14px, -14px 0;
}

.canvas-image-outpaint-pad.is-left {
  right: 100%;
  top: 0;
  bottom: 0;
  width: var(--outpaint-left, 0%);
}

.canvas-image-outpaint-pad.is-right {
  left: 100%;
  top: 0;
  bottom: 0;
  width: var(--outpaint-right, 0%);
}

.canvas-image-outpaint-pad.is-top {
  left: calc(-1 * var(--outpaint-left, 0%));
  right: calc(-1 * var(--outpaint-right, 0%));
  top: 0;
  transform: translateY(-100%);
  height: var(--outpaint-top, 0%);
}

.canvas-image-outpaint-pad.is-bottom {
  left: calc(-1 * var(--outpaint-left, 0%));
  right: calc(-1 * var(--outpaint-right, 0%));
  bottom: 0;
  transform: translateY(100%);
  height: var(--outpaint-bottom, 0%);
}

.canvas-image-outpaint-handle {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 6px;
  background: rgba(8,13,20,0.78);
  box-shadow: 0 8px 18px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: grab;
  pointer-events: auto;
}

.canvas-image-outpaint-handle:active {
  cursor: grabbing;
}

.canvas-image-outpaint-handle.is-left,
.canvas-image-outpaint-handle.is-right {
  top: 50%;
  width: 13px;
  height: 48px;
  transform: translate(-50%, -50%);
}

.canvas-image-outpaint-handle.is-left {
  left: calc(-1 * var(--outpaint-left, 0%));
}

.canvas-image-outpaint-handle.is-right {
  left: calc(100% + var(--outpaint-right, 0%));
}

.canvas-image-outpaint-handle.is-top,
.canvas-image-outpaint-handle.is-bottom {
  left: 50%;
  width: 48px;
  height: 13px;
  transform: translate(-50%, -50%);
}

.canvas-image-outpaint-handle.is-top {
  top: calc(-1 * var(--outpaint-top, 0%));
}

.canvas-image-outpaint-handle.is-bottom {
  top: calc(100% + var(--outpaint-bottom, 0%));
}

.canvas-image-outpaint-layer.is-left-max .canvas-image-outpaint-handle.is-left,
.canvas-image-outpaint-layer.is-top-max .canvas-image-outpaint-handle.is-top,
.canvas-image-outpaint-layer.is-right-max .canvas-image-outpaint-handle.is-right,
.canvas-image-outpaint-layer.is-bottom-max .canvas-image-outpaint-handle.is-bottom {
  border-color: rgba(251,191,36,0.86);
  box-shadow: 0 0 0 3px rgba(251,191,36,0.12), 0 8px 18px rgba(0,0,0,0.28);
}

/* 分辨率徽标在扩图模式下保持默认位置（bottom:-30px）永不偏移；只提级到
   半透明棋盘扩展区（layer z-index 9）之上保证可读。徽标 pointer-events:none，
   不会挡住手柄拖拽。不再有旧的 bottom:-110px 让位硬编码。 */
.canvas-node.is-image-outpainting .canvas-asset-info-badge {
  z-index: 16;
}

/* 工具栏顶边锚定在节点下缘之下（与擦除同法）：只向下生长，不与徽标重叠。 */
.canvas-image-outpaint-tools {
  position: absolute;
  left: 50%;
  top: calc(100% + 40px);
  bottom: auto;
  z-index: 15;
  width: min(420px, max(300px, calc(100% + 60px)));
  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 18px 38px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  pointer-events: auto;
  transform: translateX(-50%);
  backdrop-filter: blur(16px);
}

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

.canvas-image-outpaint-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-outpaint-tools.has-expansion .canvas-image-outpaint-step {
  color: var(--canvas-text, #e2e8f0);
}

/* 「本次消耗」chip：复用 .canvas-point-cost-preview 统一外观，只做尺寸收放。 */
.canvas-image-outpaint-tools .canvas-point-cost-preview {
  flex: none;
  height: 22px;
  gap: 5px;
  padding: 0 8px;
  font-size: 11px;
}

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

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

/* 控件行：比例选择器（select-menu.js 会包进 .canvas-select-shell）+ 归零/取消/生成。 */
.canvas-image-outpaint-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.canvas-image-outpaint-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.canvas-image-outpaint-main select {
  width: min(136px, 100%);
  height: 30px;
  min-width: 0;
  border: 1px solid rgba(52,211,153,0.36);
  border-radius: 7px;
  background: rgba(8,13,20,0.72);
  color: rgba(209,250,229,0.95);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  outline: none;
  padding: 0 8px;
}

.canvas-image-outpaint-main select:focus-visible {
  border-color: rgba(52,211,153,0.72);
  box-shadow: 0 0 0 2px rgba(52,211,153,0.12);
}

.canvas-image-outpaint-actions {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 42px);
  gap: 5px;
}

.canvas-image-outpaint-actions button {
  height: 30px;
  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 4px;
  white-space: nowrap;
}

.canvas-image-outpaint-actions button:hover {
  border-color: rgba(125,211,252,0.46);
  color: #fff;
}

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

/* 无扩展时「生成」「归零」禁用：把过去的静默无反应变成可见状态。 */
.canvas-image-outpaint-actions button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

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