/* ===================================================================
 * agimg-crop.css   ★ 2025-06-30
 * -------------------------------------------------------------------
 * Visual tweaks for the Crop tool
 * Works with Cropper.js and Tailwind-based plugin UI
 * =================================================================== */

/* Ensure the image stays within view */
#agimg-crop-left img {
  max-width: 100%;
  max-height: 70vh;
  display: block;
  margin: 0 auto;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Hide placeholder once image is active */
#agimg-crop-placeholder.hidden {
  display: none;
}

/* Hide download link until it's ready */
#agimg-crop-download.hidden {
  display: none;
}

/* Optional animation for transitions */
#agimg-crop-img,
#agimg-crop-download {
  transition: all 0.3s ease-in-out;
}

/* Improve buttons inside right panel */
#agimg-crop-tools button {
  transition: background 0.2s ease;
}

/* Responsive on small screens */
@media (max-width: 768px) {
  #agimg-crop-wrapper {
    flex-direction: column;
  }

  #agimg-crop-left, #agimg-crop-tools {
    width: 100%;
  }
}