@tailwind base;
@tailwind components;
@tailwind utilities;

/* Preflight equivalent, scoped to plugin roots only (global Tailwind preflight stays off). */
@import "./ai-image-preflight.css";

/* Default link color inside plugin UI (after scoped preflight’s inherit). */
.ai-image-wrap a {
  color: #2271b1;
}

.ai-image-wrap .search-input-field {
  @apply w-full h-full pl-9 pr-28 py-3 rounded-md border-0 bg-transparent text-sm text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-0 !important;
}

.ai-title-settings {
  font-weight: 600;
  font-size: 16px;
}

#media-upload .ai-image-wrap {
  padding: 1.6em;
}

#ai-image-generator .ai-image-title {
  margin: 0 0 20px !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

.swal2-styled.swal2-confirm {
  background-color: #576df2 !important;
}

/* Ensure SweetAlert2 modals appear above the image preview modal (z-index: 999999) */
.swal2-container {
  z-index: 9999999 !important;
}

/* Focus visible for accessibility */
.ai-image-wrap button:focus-visible,
.ai-image-wrap a:focus-visible,
.ai-image-wrap input:focus-visible,
.ai-image-wrap select:focus-visible,
.ai-image-wrap [tabindex="0"]:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* Minimum touch target for mobile */
@media (max-width: 640px) {
  .ai-image-wrap button:not(.inline),
  .ai-image-wrap .bdt-aimg-download-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Masonry Grid Layout */
.masonry-grid {
  display: flex;
  margin-left: -24px; /* Gutter size offset */
  width: auto;
}

.masonry-grid-column {
  padding-left: 24px; /* Gutter size */
  background-clip: padding-box;
}

.masonry-grid-column > * {
  margin-bottom: 24px;
}

/* Smooth transitions for hover effects */
.ai-image-wrap [role="listitem"] img {
  transition: transform 0.3s ease-out;
}

/* Smooth transitions for interactive elements */
.ai-image-wrap button,
.ai-image-wrap input,
.ai-image-wrap select {
  transition: all 0.2s ease-in-out;
}


/* Smooth transitions for filter buttons */
.ai-image-wrap [role="group"] button {
  transition: all 0.2s ease-in-out;
}

/* Loading spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.ai-image-wrap .animate-spin {
  animation: spin 1s linear infinite;
}

/* Shimmer animation for image loading */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Custom Scrollbar Styling */
.scrollbar-thin {
  scrollbar-width: thin;
  scrollbar-color: #d1d5db #f3f4f6;
}

.scrollbar-thin::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: #f3f4f6;
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Hide scrollbar for Firefox */
.scrollbar-track-gray-100 {
  scrollbar-color: #9ca3af #f3f4f6;
}

/* Border-bottom-3 utility */
.border-b-3 {
  border-bottom-width: 3px;
}

/* Mobile Responsive Improvements */
@media (max-width: 640px) {
  /* Smaller card padding on mobile */
  .ai-image-wrap .rounded-xl {
    border-radius: 0.75rem;
  }
  
  /* Better touch targets */
  .ai-image-wrap button[role="tab"] {
    min-height: 44px;
  }
  
  /* Prevent horizontal overflow */
  .ai-image-wrap [role="tablist"] {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Smaller gaps on mobile */
  .ai-image-wrap [role="group"] {
    gap: 0.5rem;
  }
}

/* Tablet Responsive Improvements */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Moderate padding for tablet */
  .ai-image-wrap .rounded-xl {
    border-radius: 0.875rem;
  }
}

/* Media Modal specific styles */
.media-modal .ai-image-media-modal {
  height: 100%;
  overflow-y: auto;
  padding: 12px 16px;
  background: #f0f0f1;

  .ai-image-branding {
    display: none;
  }
}

.media-modal .ai-image-media-modal .ai-image-wrap {
  max-width: 100%;
}

/* Hide version/branding header in media modal for compact view */
.media-modal .ai-image-media-modal .ai-ig-version-badge {
  display: none;
}

/* Save toast: slide in from top-right, then slide out */
@keyframes saveToastSlideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes saveToastSlideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}
.save-toast-enter {
  animation: saveToastSlideIn 0.3s ease-out forwards;
}
.save-toast-exit {
  animation: saveToastSlideOut 0.3s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .save-toast-enter,
  .save-toast-exit {
    animation: none;
    opacity: 1;
  }
}

/* Skeleton loading animation for AI image generation */
.ai-image-generating {
  position: relative;
  animation: shimmer 1.5s infinite;
  background: linear-gradient(
    90deg,
    #f3f4f6 0%,
    #e5e7eb 20%,
    #f3f4f6 40%,
    #f3f4f6 100%
  );
  background-size: 200% 100%;
  min-height: 300px;
}

.ai-image-generating::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  border: 4px solid #e5e7eb;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  transform-origin: center;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .ai-image-wrap [role="listitem"],
  .ai-image-wrap [role="presentation"],
  .ai-image-wrap [role="list"] {
    animation: none !important;
  }
  
  .ai-image-wrap [role="listitem"] img,
  .ai-image-wrap button,
  .ai-image-wrap input,
  .ai-image-wrap select {
    transition: none !important;
  }
  
  .ai-image-wrap button:hover:not(:disabled),
  .ai-image-wrap button:active:not(:disabled) {
    transform: none !important;
  }
  
  /* Disable skeleton animations for reduced motion */
  .ai-image-generating {
    animation: none !important;
    background: #f3f4f6;
  }
  
  .ai-image-generating::after {
    animation: none !important;
  }
}