/* Image-save nodes (图片保存) render exactly like image-asset nodes: the
   generated result keeps the same look, aspect-ratio sizing, and selected/
   hovered states as a loaded image. Mirrors the image_asset rules from
   nodes.css / media.css / tapnow-theme.css under the image_save class token.
   Loaded last so it wins where the tapnow theme targets asset nodes. */

.canvas-node-image_save .canvas-node-body {
  grid-template-rows: minmax(0, 1fr);
  align-content: stretch;
}

.canvas-node-image_save:has(.canvas-media-thumb img[src]) {
  border-color: rgba(255,255,255,0.08);
  background: transparent;
  box-shadow: 0 18px 42px rgba(0,0,0,0.3);
}

.canvas-node-image_save.selected:has(.canvas-media-thumb img[src]) {
  border-color: rgba(125,211,252,0.74);
  box-shadow: 0 0 0 2px rgba(56,189,248,0.14), 0 18px 42px rgba(0,0,0,0.32);
}

.canvas-node-image_save:has(.canvas-media-thumb img[src]) .canvas-node-body {
  padding: 0;
}

.canvas-node-image_save:has(.canvas-asset-task-placeholder) .canvas-node-body {
  padding: 0;
}

/* A save node waiting for its result shows the shared 生成等待 animation
   (renderStrandsLoader) instead of the generation node's floating panel. */
.canvas-node-image_save .canvas-asset-task-placeholder.is-generating {
  position: relative;
}

.canvas-node-image_save .canvas-asset-task-placeholder.is-generating .canvas-asset-task-progress {
  position: absolute;
  left: 50%;
  bottom: 12%;
  z-index: 2;
  transform: translateX(-50%);
  color: rgba(224,242,254,0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.canvas-node-image_save .canvas-result-grid[data-count="1"] {
  display: block;
}

.canvas-node-image_save .canvas-result-grid[data-count="1"] .canvas-media-thumb {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 7px;
  background: transparent;
}

.canvas-node-image_save .canvas-result-grid[data-count="1"] .canvas-media-thumb img {
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 7px;
}

/* Tapnow theme parity (mirrors tapnow-theme.css asset-node rules). */
.canvas-page .canvas-node-image_save.selected:has(.canvas-media-thumb img[src]) {
  border-color: rgb(122, 122, 122);
  background: #1f1f1f;
  box-shadow: 0 0 0 1px rgb(122, 122, 122);
}

.canvas-page .canvas-node-image_save:has(.canvas-media-thumb img[src]) {
  border-color: rgba(255, 255, 255, 0.2);
  background: #0f0f0f;
  box-shadow: none;
}

.canvas-page .canvas-node-image_save.hovered:not(.selected):has(.canvas-media-thumb img[src]) {
  border-color: rgba(255, 255, 255, 0.45);
}