/**
 * Recortar imagem — tool-specific studio styles.
 * Shared chrome: image-studio-shell.css (canonical; see AGENTS.md).
 * Tokens: --is-* (aliases --ic-* set by shell). Crop-only vars below.
 */

/* Crop-only tokens */
body.is-fullscreen .fs-workspace.icrop-fs {
  --ic-handle: #fff;
  --ic-dim: rgba(15, 23, 42, 0.45);
  --ic-crop-line: #2563eb;
}

html[data-theme="dark"] body.is-fullscreen .fs-workspace.icrop-fs {
  --ic-handle: #fff;
  --ic-dim: rgba(0, 0, 0, 0.62);
  --ic-crop-line: #93c5fd;
}

/* Undo/redo cluster in topbar */
.icrop-hist-btns {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 2px;
}

.icrop-hist-btns .icrop-btn {
  padding: 8px 11px;
  min-width: 0;
}

.icrop-btn-primary {
  min-width: 120px;
}

/* Result card in sidebar */
.icrop-result {
  display: none;
  flex-direction: column;
  gap: 8px;
}

.icrop-app.has-result .icrop-result {
  display: flex;
}

.icrop-result-name {
  font-size: 0.78rem;
  font-weight: 700;
  word-break: break-all;
  color: var(--is-text, var(--ic-text));
}

.icrop-result-sub {
  font-size: 0.72rem;
  color: var(--is-muted, var(--ic-muted));
}

.icrop-result-img {
  display: block;
  width: 100%;
  max-height: 140px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--is-line, var(--ic-line));
  background:
    linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
    linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  background-color: #f8fafc;
}

html[data-theme="dark"] .icrop-result-img {
  background-color: #1a2030;
}

/* Canvas viewport */
.icrop-viewport {
  display: none;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  touch-action: none;
  user-select: none;
}

.icrop-app:not(.is-empty) .icrop-viewport {
  display: block;
}

.icrop-viewport canvas {
  display: block;
  max-width: 100%;
  max-height: min(70vh, 100%);
  width: auto;
  height: auto;
  cursor: crosshair;
  border-radius: 4px;
  box-shadow: var(--is-canvas-shadow, var(--ic-canvas-shadow));
  border: 1px solid var(--is-line, var(--ic-line));
}

/* Clean preview after crop — no marquee chrome on the bitmap */
.icrop-app.is-preview .icrop-viewport canvas {
  cursor: default;
}

.icrop-app.is-preview .icrop-meta-bar {
  opacity: 0.85;
}

@media (max-width: 480px) {
  .icrop-hist-btns .icrop-btn {
    padding: 7px 8px;
    font-size: 0.72rem;
  }
}