/* Images open a local preview; frame selection remains a separate action. */
body.cat-tool-page .tool-image-preview {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mat-copy, var(--text));
  cursor: zoom-in;
  overflow: hidden;
}
body.cat-tool-page .tool-image-preview img { display: block; }
body.cat-tool-page .tool-preview-hint {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 3px 7px;
  border: 1px solid var(--mat-line-soft, var(--line));
  border-radius: 7px;
  background: var(--mat-surface, var(--panel));
  color: var(--mat-accent, var(--text));
  font-size: 11px;
  line-height: 1.5;
  pointer-events: none;
}
body.cat-tool-page .tool-image-preview:focus-visible,
body.cat-tool-page .tool-frame-preview:focus-visible {
  outline: 2px solid var(--mat-accent, var(--green));
  outline-offset: 3px;
}
body.cat-tool-page .queue-item .tool-image-preview { width: 42px; height: 42px; flex: 0 0 42px; }
body.cat-tool-page .queue-item .tool-image-preview img { width: 42px; height: 42px; }
body.cat-tool-page .queue-item .tool-preview-hint { right: 0; bottom: 0; padding: 0 2px; font-size: 9px; }
body.cat-tool-page .sprite-preview > .tool-image-preview { width: auto; max-width: 100%; }
body.cat-tool-page .sprite-preview > .tool-image-preview img { margin: auto; }
body.cat-tool-page .tool-frame { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
body.cat-tool-page .tool-frame .sprite-cell { width: 100%; flex: 1; }
body.cat-tool-page .tool-frame-preview { align-self: end; min-height: 28px; padding: 3px 8px; font-size: 11px; cursor: zoom-in; }