.canvas-image-resize-handle {
  position: absolute;
  z-index: 12;
  display: none;
  /* Keep controls on the actual edge; reduce hit areas before they cover the center. */
  width: clamp(2px, calc(.5px * var(--canvas-image-display-width, 420) / var(--canvas-ui-scale, 1)), 24px);
  height: clamp(2px, calc(.5px * var(--canvas-image-display-height, 420) / var(--canvas-ui-scale, 1)), 24px);
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: none;
  transform: translate(-50%, -50%) scale(calc(var(--canvas-ui-scale, 1) / var(--canvas-image-resize-scale, 1)));
  transform-origin: 50% 50%;
  --canvas-resize-dot: clamp(2px, min(
    calc(.25px * var(--canvas-image-display-width, 420) / var(--canvas-ui-scale, 1)),
    calc(.25px * var(--canvas-image-display-height, 420) / var(--canvas-ui-scale, 1))), 8px);
}
.canvas-board[data-image-resize-enabled="true"]:not(.is-marquee-mode):not([data-active-canvas-tool]):not(:has(.canvas-overlay-mask-root.is-interactive)) .canvas-image-frame.is-selected:not(.is-multi-selected):not(.is-cropping):not([data-canvas-resize-rotated]) > .canvas-image-resize-handle { display: grid; place-items: center; }
.canvas-image-resize-handle::after {
  pointer-events: none;
  content: '';
  display: block;
  width: var(--canvas-resize-dot);
  height: var(--canvas-resize-dot);
  margin: auto;
  box-sizing: border-box;
  border: 1px solid var(--primary, #00afe9);
  border-radius: 0;
  background: #fff;
}
.canvas-image-resize-handle:focus-visible { outline: 1px solid var(--primary, #00afe9); border-radius: var(--rect-radius); }
.canvas-image-resize-handle[data-resize-corner='nw'] { left: 0; top: 0; }
.canvas-image-resize-handle[data-resize-corner='ne'] { left: 100%; top: 0; }
.canvas-image-resize-handle[data-resize-corner='sw'] { left: 0; top: 100%; }
.canvas-image-resize-handle[data-resize-corner='se'] { left: 100%; top: 100%; }
.canvas-image-resize-handle[data-resize-corner='n'] { left: 50%; top: 0; }
.canvas-image-resize-handle[data-resize-corner='e'] { left: 100%; top: 50%; }
.canvas-image-resize-handle[data-resize-corner='s'] { left: 50%; top: 100%; }
.canvas-image-resize-handle[data-resize-corner='w'] { left: 0; top: 50%; }
.canvas-image-resize-handle[data-resize-visual-corner='n'],
.canvas-image-resize-handle[data-resize-visual-corner='s'] { cursor: ns-resize; }
.canvas-image-resize-handle[data-resize-visual-corner='e'],
.canvas-image-resize-handle[data-resize-visual-corner='w'] { cursor: ew-resize; }
.canvas-image-resize-handle[data-resize-visual-corner='nw'],
.canvas-image-resize-handle[data-resize-visual-corner='se'] { cursor: nwse-resize; }
.canvas-image-resize-handle[data-resize-visual-corner='ne'],
.canvas-image-resize-handle[data-resize-visual-corner='sw'] { cursor: nesw-resize; }
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame.is-image-resizing {
  will-change: transform;
  min-width: var(--canvas-image-preview-width, 0px);
  min-height: var(--canvas-image-preview-height, 0px);
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame.is-selected:where(:not(.is-multi-selected))::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
  /* Inverse canvas and preview scales keep the stroke at one screen pixel. */
  box-shadow: inset 0 0 0 calc(1px * var(--canvas-ui-scale, 1) / var(--canvas-image-resize-scale, 1)) rgba(0, 175, 233, .92);
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame.is-image-resizing > .canvas-image-hover-actions { top: calc(100% + 2px / var(--canvas-image-resize-scale, 1)); }

/* Preserve the image/overlay coordinate system while keeping its controls readable. */
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame { --canvas-image-ui-flip-x: 1; --canvas-image-ui-flip-y: 1; }
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame[data-flip-x='true'] { --canvas-image-ui-flip-x: -1; }
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame[data-flip-y='true'] { --canvas-image-ui-flip-y: -1; }
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame > .canvas-generated-prompt {
  transform: translateX(-50%) scale(
    calc(var(--canvas-image-prompt-scale, 1) * var(--canvas-image-ui-flip-x)),
    calc(var(--canvas-image-prompt-scale, 1) * var(--canvas-image-ui-flip-y)));
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame > .canvas-image-hover-actions {
  transform: translateX(-50%) scale(
    calc(var(--canvas-toolbar-resize-scale) * var(--canvas-image-ui-flip-x)),
    calc(var(--canvas-toolbar-resize-scale) * var(--canvas-image-ui-flip-y)));
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame > .canvas-image-size {
  transform: scale(
    calc(var(--canvas-image-size-ui-scale) * var(--canvas-image-ui-flip-x)),
    calc(var(--canvas-image-size-ui-scale) * var(--canvas-image-ui-flip-y)));
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame[data-flip-y='true'] > .canvas-generated-prompt {
  bottom: calc(-8px * var(--canvas-image-prompt-scale, 1));
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame[data-flip-y='true'] > .canvas-image-hover-actions {
  top: calc(-2px / var(--canvas-image-resize-scale, 1));
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame[data-flip-x='true'] > .canvas-image-size {
  right: calc(100% - 16px * var(--canvas-image-size-ui-scale));
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame[data-flip-y='true'] > .canvas-image-size {
  top: calc(100% - 16px * var(--canvas-image-size-ui-scale));
}

/* The new presentation contract is active only with this feature's exposure. */
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame > .canvas-generated-prompt {
  left: 50%; right: auto; width: var(--canvas-image-prompt-width, 100%);
  bottom: calc(100% + 8px * var(--canvas-image-prompt-scale, 1));
  transform-origin: 50% 100%;
}
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame .canvas-image-size {
  /* Keep the original label at the initial image size. Both resize and canvas
     zoom scale the whole group; do not counter-scale or cap this decoration. */
  --canvas-image-size-display-ratio: calc(var(--canvas-image-display-width, 420) / var(--canvas-image-size-baseline-width, 420));
  --canvas-image-size-ui-scale: calc(var(--canvas-image-size-display-ratio) / var(--canvas-image-resize-scale, 1));
  top: calc(16px * var(--canvas-image-size-ui-scale));
  right: calc(16px * var(--canvas-image-size-ui-scale));
}
/* The shared UI host already cancels image flip/rotation. Scale only the
   label's original geometry with the image inside that host. */
:where(.canvas-board[data-image-resize-enabled="true"]) .canvas-image-frame > .canvas-image-ui > .canvas-image-size {
  transform: scale(var(--canvas-image-size-ui-scale));
  /* A subpixel image previews on a temporary surface. The UI host retains
     the committed box, so bridge just this label to that surface's bounds. */
  top: calc(16px * var(--canvas-image-size-ui-scale) -
    (var(--canvas-image-preview-height, 0px) - var(--canvas-image-preview-source-height, var(--canvas-image-preview-height, 0px))) / 2);
  right: calc(16px * var(--canvas-image-size-ui-scale) -
    (var(--canvas-image-preview-width, 0px) - var(--canvas-image-preview-source-width, var(--canvas-image-preview-width, 0px))) / 2);
}