/* ========== AI QUALITY SELECTOR & IMAGE PROCESSING IMPROVEMENTS ========== */

/* AI Quality Selector Styling */
#aiQualitySelector,
#editStoreAiQualitySelector {
  width: 100%;
  padding: 10px 14px;
  margin-top: 6px;
  border: 1.5px solid #e1e6f0;
  border-radius: 8px;
  background-color: #fff;
  color: #333;
  font-family: 'Inter Variable', sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  padding-right: 40px;
  pointer-events: auto !important;
  z-index: 10;
}

#aiQualitySelector:hover,
#editStoreAiQualitySelector:hover {
  border-color: #129ed9;
  box-shadow: 0 0 0 3px rgba(18, 158, 217, 0.1);
}

#aiQualitySelector:focus,
#editStoreAiQualitySelector:focus {
  outline: none;
  border-color: #129ed9;
  box-shadow: 0 0 0 3px rgba(18, 158, 217, 0.15);
}

/* Enhanced Image Action Buttons */
.image-action-buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.import-button-x {
  background: #fff !important;
  color: #129ed9 !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: 'Inter Variable', sans-serif !important;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 80px !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* ✅ FIX: Import button hover - NO TRANSFORM to prevent flicker */
.import-button-x:hover {
  background: #f8fbfd !important;
  border-color: #129ed9 !important;
  color: #0f8bb8 !important;
  box-shadow: 0 2px 4px rgba(18, 158, 217, 0.1) !important;
  /* ✅ REMOVED: transform - causes layout shift and flicker */
}

.import-button-x:active {
  background: #f3fafd !important;
  /* ✅ REMOVED: transform - causes layout shift and flicker */
  box-shadow: 0 1px 2px rgba(18, 158, 217, 0.1) !important;
}

.import-button-x i {
  color: #129ed9 !important;
  font-size: 11px !important;
}

/* Image Processing Preview Container */
#imageProcessingPreview {
  background: #fff !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Edit Store Image Processing Preview Container */
#editStoreImageProcessingPreview {
  background: #fff !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-top: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Select All Images Checkbox */
#selectAllImages {
  margin-right: 8px;
  accent-color: #129ed9;
}

/* Image Grid Layout */
#selectedImageProcessingList {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 16px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Edit Store Image Grid Layout */
#editStoreSelectedImageProcessingList {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 16px !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Individual Image Container */
#selectedImageProcessingList .image-container {
  position: relative !important;
  padding: 10px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #e1e6f0 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* ⚠️ DISABLED ALL TRANSITIONS - causing severe flickering with many images */
  transition: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* ⚠️ ADDED: contain: layout style paint - tells browser to isolate each image container's rendering */
  contain: layout style paint !important;
}

/* Edit Store Individual Image Container */
#editStoreSelectedImageProcessingList .image-container {
  position: relative !important;
  padding: 10px !important;
  border-radius: 8px !important;
  background: #fff !important;
  border: 1px solid #e1e6f0 !important;
  margin-bottom: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* ⚠️ DISABLED ALL TRANSITIONS - causing severe flickering with many images */
  transition: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  /* ⚠️ ADDED: contain: layout style paint - tells browser to isolate each image container's rendering */
  contain: layout style paint !important;
}

/* Image Wrapper to maintain aspect ratio */
#selectedImageProcessingList .image-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-top: 85% !important;
  margin-bottom: 8px !important;
  background: #fafafa !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

/* Edit Store Image Wrapper */
#editStoreSelectedImageProcessingList .image-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-top: 85% !important;
  margin-bottom: 8px !important;
  background: #fafafa !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

#selectedImageProcessingList .image-wrapper img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

/* Edit Store Image Wrapper Images */
#editStoreSelectedImageProcessingList .image-wrapper img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 4px !important;
}

/* Product Title Headers */
#selectedImageProcessingList .product-title {
  grid-column: 1 / -1 !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e1e6f0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  font-family: 'Inter Variable', sans-serif !important;
  width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: unset !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

/* Edit Store Product Title Headers */
#editStoreSelectedImageProcessingList .product-title {
  grid-column: 1 / -1 !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #e1e6f0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2d3748 !important;
  font-family: 'Inter Variable', sans-serif !important;
  width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  text-overflow: unset !important;
  overflow: visible !important;
  line-height: 1.4 !important;
}

/* Select All Container */
#selectedImageProcessingList .select-all-container {
  grid-column: 1 / -1 !important;
  margin-bottom: 16px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #e1e6f0 !important;
  width: 100% !important;
}

/* Edit Store Select All Container */
#editStoreSelectedImageProcessingList .select-all-container {
  grid-column: 1 / -1 !important;
  margin-bottom: 16px !important;
  padding: 8px 0 !important;
  border-bottom: 1px solid #e1e6f0 !important;
  width: 100% !important;
}

/* Image Controls */
#selectedImageProcessingList .image-controls {
  margin: 8px 0 !important;
  width: 100% !important;
}

/* Edit Store Image Controls */
#editStoreSelectedImageProcessingList .image-controls {
  margin: 8px 0 !important;
  width: 100% !important;
}

#selectedImageProcessingList .image-controls label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-family: 'Inter Variable', sans-serif !important;
  font-size: 13px !important;
  color: #666 !important;
}

/* Edit Store Image Controls Labels */
#editStoreSelectedImageProcessingList .image-controls label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  font-family: 'Inter Variable', sans-serif !important;
  font-size: 13px !important;
  color: #666 !important;
}

/* Edit Buttons Container */
#selectedImageProcessingList .edit-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
}

/* Edit Store Edit Buttons Container */
#editStoreSelectedImageProcessingList .edit-buttons {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  width: 100% !important;
}

/* Individual Edit Button */
#selectedImageProcessingList .edit-button {
  flex: 1 !important;
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: normal !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  /* ✅ CRITICAL: Only transition specific properties to prevent layout thrashing and flickering */
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 75px !important;
  max-width: 95px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* ⚠️ DISABLED - background/border changes cause extreme flickering with 5+ images
#selectedImageProcessingList .edit-button:hover {
  background-color: #f8f9fa !important;
  border-color: #129ed9 !important;
}
*/

/* Blue icons for image edit buttons */  
#selectedImageProcessingList .edit-button i {
  color: #129ed9 !important;
  font-size: 12px !important;
}

/* Edit Store Individual Edit Button */
#editStoreSelectedImageProcessingList .edit-button {
  flex: 1 !important;
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  padding: 4px 8px !important;
  font-size: 12px !important;
  font-weight: normal !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 75px !important;
  max-width: 95px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Removed - using new hover effects above */

/* Removed - using new hover effects above */

#selectedImageProcessingList .edit-button i {
  color: var(--primary-color) !important;
  font-size: 14px !important;
}

/* Edit Store Edit Button Icons */
#editStoreSelectedImageProcessingList .edit-button i {
  color: var(--primary-color) !important;
  font-size: 14px !important;
}

/* Minimal Download Icon - upper right corner */
#selectedImageProcessingList .image-download-icon,
#editStoreSelectedImageProcessingList .image-download-icon {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  /* ⚠️ REMOVED: backdrop-filter: blur(8px) - causes severe page glitching with 8+ images */
  color: #666 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: none !important; /* ⚠️ DISABLED - causing flickering */
  opacity: 1 !important;
  z-index: 10 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ⚠️ DISABLED - box-shadow and background changes cause extreme flickering with 5+ images
#selectedImageProcessingList .image-download-icon:hover,
#editStoreSelectedImageProcessingList .image-download-icon:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 1) !important;
  color: #129ed9 !important;
  box-shadow: 0 4px 12px rgba(18, 158, 217, 0.3) !important;
}
*/

#selectedImageProcessingList .image-download-icon i,
#editStoreSelectedImageProcessingList .image-download-icon i {
  font-size: 14px !important;
}

/* Heart/Like Icon for Saving to Library */
#selectedImageProcessingList .image-heart-icon,
#editStoreSelectedImageProcessingList .image-heart-icon {
  position: absolute !important;
  top: 8px !important;
  right: 48px !important; /* Position to the left of download icon */
  background: rgba(255, 255, 255, 0.98) !important;
  /* ⚠️ REMOVED: backdrop-filter: blur(8px) - causes severe page glitching with 8+ images */
  color: #999 !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: none !important; /* ⚠️ DISABLED - causing flickering */
  opacity: 1 !important;
  z-index: 3 !important;
}

/* ⚠️ DISABLED - box-shadow and background changes cause extreme flickering with 5+ images
#selectedImageProcessingList .image-heart-icon:hover,
#editStoreSelectedImageProcessingList .image-heart-icon:hover {
  opacity: 1 !important;
  background: rgba(255, 255, 255, 1) !important;
  color: #e74c3c !important;
  box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
}
*/

#selectedImageProcessingList .image-heart-icon.saved,
#editStoreSelectedImageProcessingList .image-heart-icon.saved {
  opacity: 1 !important;
  /* Beautiful gradient like Media Studio */
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
  border-color: #f5576c !important;
  color: white !important;
  /* Pop-in animation when saved */
  animation: likePopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* ⚠️ DISABLED - gradient changes cause extreme flickering with 5+ images
#selectedImageProcessingList .image-heart-icon.saved:hover,
#editStoreSelectedImageProcessingList .image-heart-icon.saved:hover {
  background: linear-gradient(135deg, #e081ea 0%, #e4465b 100%) !important;
  border-color: #e4465b !important;
  color: white !important;
}
*/

#selectedImageProcessingList .image-heart-icon.saved i,
#editStoreSelectedImageProcessingList .image-heart-icon.saved i {
  /* Heart beat animation when saved */
  animation: heartBeat 0.6s ease !important;
}

#selectedImageProcessingList .image-heart-icon i,
#editStoreSelectedImageProcessingList .image-heart-icon i {
  font-size: 14px !important;
}

/* ========================================
   ANIMATIONS - Matching Media Studio
   ======================================== */

@keyframes likePopIn {
  0% {
    transform: scale(0.9);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0%, 100% {
    transform: scale(1);
  }
  10%, 30% {
    transform: scale(0.9);
  }
  20%, 40% {
    transform: scale(1.15);
  }
}

/* Toggle Switch for UGC Video Settings */
.toggle-switch {
  display: inline-block !important;
  position: relative !important;
  width: 44px !important;
  height: 24px !important;
}

.toggle-switch input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

.toggle-slider {
  /* position: absolute !important; */
  cursor: pointer !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-color: #ccc !important;
  transition: .3s !important;
  border-radius: 24px !important;
}

.toggle-slider::before {
  /* position: absolute !important; */
  content: "" !important;
  height: 18px !important;
  width: 18px !important;
  left: 3px !important;
  bottom: 3px !important;
  background-color: white !important;
  transition: .3s !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #667eea !important;
}

.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px) !important;
}

/* Image Label - upper left (professional UX pattern for status info) */
#selectedImageProcessingList .image-label {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  z-index: 10 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  font-family: 'Inter Variable', sans-serif !important;
  /* ⚠️ REMOVED: backdrop-filter: blur(4px) - causes severe page glitching with 8+ images */
}

/* Edit Store Image Label */
#editStoreSelectedImageProcessingList .image-label {
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  z-index: 10 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  font-family: 'Inter Variable', sans-serif !important;
  /* ⚠️ REMOVED: backdrop-filter: blur(4px) - causes severe page glitching with 8+ images */
}

/* Modern Loading Glow Effect for Images - Enhanced Integration */
.loading-glow-img {
  position: relative !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0.8 !important;
  border-radius: 12px !important;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Enhanced glow for image processing containers */
#selectedImageProcessingList .loading-glow-img,
#editStoreSelectedImageProcessingList .loading-glow-img {
  border: 2px solid rgba(18, 158, 217, 0.3) !important;
  box-shadow: 
    0 0 20px rgba(18, 158, 217, 0.2),
    0 0 40px rgba(79, 70, 229, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

/* Enhanced shimmer - inherits from loading-glow.css but adds specific styling */
.loading-glow-img::before {
  border-radius: 12px !important;
  /* ⚠️ REMOVED: backdrop-filter: blur(2px) - causes flickering with multiple loading images */
}

.loading-glow-img::after {
  border-radius: 12px !important;
}

/* Edit Image Prompt Input */
#editImagePrompt {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 8px !important;
  font-family: 'Inter Variable', sans-serif !important;
  font-size: 14px !important;
  color: #374151 !important;
  background: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  margin-top: 8px !important;
}

#editImagePrompt:focus {
  outline: none !important;
  border-color: #129ed9 !important;
  box-shadow: 0 0 0 3px rgba(18, 158, 217, 0.1) !important;
}

#editImagePrompt::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
}

/* Responsive Grid Adjustments */
@media (max-width: 1200px) {
  #selectedImageProcessingList {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #editStoreSelectedImageProcessingList {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 900px) {
  #selectedImageProcessingList {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #editStoreSelectedImageProcessingList {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  #selectedImageProcessingList {
    grid-template-columns: repeat(1, 1fr) !important;
  }
  #editStoreSelectedImageProcessingList {
    grid-template-columns: repeat(1, 1fr) !important;
  }
}

/* ========== PRODUCT ROW GLOW EFFECT ========== */

/* Product row glow animation - similar to chat input */
.product-row {
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease,
              box-shadow 0.3s ease,
              background-color 0.3s ease;
}

.product-row.row-glow {
  position: relative;
  overflow: hidden;
}

.product-row.row-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(18, 158, 217, 0.15), 
    rgba(18, 158, 217, 0.3), 
    rgba(18, 158, 217, 0.15), 
    transparent
  );
  animation: productRowGlow 2s ease-in-out;
  z-index: 1;
  pointer-events: none;
}

@keyframes productRowGlow {
  0% { 
    left: -100%; 
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% { 
    left: 100%; 
    opacity: 0;
  }
}

/* Ensure content stays above the glow effect */
.product-row > * {
  position: relative;
  z-index: 2;
}

/* ⚠️ DISABLED - causing flickering with many images
.product-row:hover {
  background-color: rgba(18, 158, 217, 0.02);
  border-color: rgba(18, 158, 217, 0.1);
  box-shadow: 0 2px 8px rgba(18, 158, 217, 0.08);
}
*/

/* ========== IMAGE PROCESSING INDICATORS ========== */

/* AI/BG indicators for processed images */
.image-indicator {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  background: rgba(18, 158, 217, 0.95);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  /* ⚠️ REMOVED: backdrop-filter: blur(4px) - causes page glitching with many images */
}

.image-indicator.ai {
  background: linear-gradient(135deg, #129ed9, #0f8bb8);
}

.image-indicator.bg {
  background: linear-gradient(135deg, #10b981, #059669);
}

/* Enhanced image container styling */
#selectedImageProcessingList > div {
  border: 1px solid #e1e6f0 !important;
  /* ✅ FIX: Remove 'all' transition to prevent layout thrashing */
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  /* ✅ FIX: Add will-change for better performance */
  will-change: border-color, box-shadow;
}

/* ✅ FIX: Replace expensive :has() selectors with direct class-based approach */
/* These will be applied via JavaScript when indicators are added */
#selectedImageProcessingList > div.has-ai-indicator {
  border-color: rgba(18, 158, 217, 0.3) !important;
  box-shadow: 0 2px 8px rgba(18, 158, 217, 0.15) !important;
}

#selectedImageProcessingList > div.has-bg-indicator {
  border-color: rgba(18, 158, 217, 0.3) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

/* Edit Store Enhanced image container styling */
#editStoreSelectedImageProcessingList > div {
  border: 1px solid #e1e6f0 !important;
  /* ✅ FIX: Remove 'all' transition to prevent layout thrashing */
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  /* ✅ FIX: Add will-change for better performance */
  will-change: border-color, box-shadow;
}

/* ✅ FIX: Replace expensive :has() selectors with direct class-based approach */
#editStoreSelectedImageProcessingList > div.has-ai-indicator {
  border-color: rgba(18, 158, 217, 0.3) !important;
  box-shadow: 0 2px 8px rgba(18, 158, 217, 0.15) !important;
}

#editStoreSelectedImageProcessingList > div.has-bg-indicator {
  border-color: rgba(18, 158, 217, 0.3) !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15) !important;
}

/* ✅ FIX: REMOVED hover scale transform - it was causing flicker loop with :has() selectors */
/* Improved image thumbnails - NO TRANSITIONS to prevent flicker */
#selectedImageProcessingList img {
  /* ⚠️ DISABLED ALL TRANSITIONS - causing severe flickering with many images */
  transition: none !important;
  transform: translateZ(0) !important; /* Force GPU acceleration */
}

/* ⚠️ DISABLED - causing flickering with many images
#selectedImageProcessingList > div:hover img {
  opacity: 0.95 !important;
}
*/

/* Edit Store Improved image thumbnails - NO TRANSITIONS to prevent flicker */
#editStoreSelectedImageProcessingList img {
  /* ⚠️ DISABLED ALL TRANSITIONS - causing severe flickering with many images */
  transition: none !important;
  transform: translateZ(0) !important; /* Force GPU acceleration */
}

/* ⚠️ DISABLED - causing flickering with many images
#editStoreSelectedImageProcessingList > div:hover img {
  opacity: 0.95 !important;
}
*/

/* Edit Image Prompt Input */
#editImagePrompt {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 8px !important;
  font-family: 'Inter Variable', sans-serif !important;
  font-size: 14px !important;
  color: #374151 !important;
  background: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  margin-top: 8px !important;
}

#editImagePrompt:focus {
  outline: none !important;
  border-color: #129ed9 !important;
  box-shadow: 0 0 0 3px rgba(18, 158, 217, 0.1) !important;
}

#editImagePrompt::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
}

/* Edit Store Image Prompt Input */
#editStoreEditImagePrompt {
  width: 100% !important;
  padding: 10px 14px !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 8px !important;
  font-family: 'Inter Variable', sans-serif !important;
  font-size: 14px !important;
  color: #374151 !important;
  background: #fff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  margin-top: 8px !important;
}

#editStoreEditImagePrompt:focus {
  outline: none !important;
  border-color: #129ed9 !important;
  box-shadow: 0 0 0 3px rgba(18, 158, 217, 0.1) !important;
}

#editStoreEditImagePrompt::placeholder {
  color: #9ca3af !important;
  font-style: italic !important;
} 

/* Enhanced loading state for buttons */
.edit-button.loading-glow-img {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
  color: #9ca3af !important;
  border-color: #d1d5db !important;
  cursor: not-allowed !important;
  position: relative !important;
  overflow: hidden !important;
}

.edit-button.loading-glow-img::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(156, 163, 175, 0.3) 50%,
    transparent 100%
  ) !important;
  animation: buttonGlowFlow 1.5s ease-in-out infinite !important;
  z-index: 1 !important;
}

.edit-button.loading-glow-img > * {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes buttonGlowFlow {
  0% {
    left: -100% !important;
  }
  100% {
    left: 100% !important;
  }
}

/* Enhanced Image Container Loading Animation */
.image-wrapper {
  position: relative !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  transition: none !important; /* ⚠️ DISABLED - causing flickering */
  transform: translateZ(0) !important; /* Force GPU acceleration */
}

.image-wrapper.loading {
  position: relative !important;
}

.image-wrapper.loading::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(79, 70, 229, 0.3) 25%,
    rgba(139, 92, 246, 0.4) 50%,
    rgba(79, 70, 229, 0.3) 75%,
    transparent 100%
  ) !important;
  animation: imageGlowFlow 2s ease-in-out infinite !important;
  z-index: 2 !important;
  pointer-events: none !important;
  border-radius: 8px !important;
}

.image-wrapper.loading::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(79, 70, 229, 0.1) !important;
  backdrop-filter: blur(1px) !important;
  border-radius: 8px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

@keyframes imageGlowFlow {
  0% {
    left: -100% !important;
    opacity: 0 !important;
  }
  10% {
    opacity: 1 !important;
  }
  90% {
    opacity: 1 !important;
  }
  100% {
    left: 100% !important;
    opacity: 0 !important;
  }
}

/* Enhanced Edit Button Loading States */
.edit-button.loading-glow-img {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb) !important;
  color: #9ca3af !important;
  border-color: #d1d5db !important;
  cursor: not-allowed !important;
  position: relative !important;
  overflow: hidden !important;
}

.edit-button.loading-glow-img::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(156, 163, 175, 0.3) 50%,
    transparent 100%
  ) !important;
  animation: buttonGlowFlow 1.5s ease-in-out infinite !important;
  z-index: 1 !important;
}

.edit-button.loading-glow-img > * {
  position: relative !important;
  z-index: 2 !important;
}

@keyframes buttonGlowFlow {
  0% {
    left: -100% !important;
  }
  100% {
    left: 100% !important;
  }
}

/* Remove old circular loading spinner styles */
.loading-ring,
.loading-spinner,
.spinner-ring {
  display: none !important;
} 

/* ✅ Fix Select All Images styling and ensure clickability */
#selectAllImagesRow,
#editStoreSelectAllImagesRow {
  display: block !important;
  margin: 10px 0 !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none;
  font-family: 'Inter Variable', sans-serif;
  font-size: 14px;
  color: #333;
  position: relative;
  z-index: 100;
}

#selectAllImages,
#editStoreSelectAllImages {
  margin-right: 8px !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  accent-color: #129ed9;
  transform: scale(1.1);
  position: relative;
  z-index: 101;
}

/* ⚠️ DISABLED - causing flickering
#selectAllImagesRow:hover,
#editStoreSelectAllImagesRow:hover {
  color: #129ed9;
}
*/

/* ✅ Ensure individual image checkboxes are clickable */
.select-image-checkbox {
  cursor: pointer !important;
  pointer-events: auto !important;
  accent-color: #129ed9;
  margin-right: 6px;
  position: relative;
  z-index: 100;
}

.image-controls label {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter Variable', sans-serif;
  font-size: 13px;
  color: #333;
  user-select: none;
  position: relative;
  z-index: 100;
}

/* ⚠️ DISABLED - color changes cause flickering with 5+ images
.image-controls label:hover {
  color: #129ed9;
}
*/

/* ✅ Ensure image processing containers don't block clicks */
.image-processing-preview-card,
#imageProcessingPreview,
#editStoreImageProcessingPreview {
  pointer-events: auto !important;
  position: relative;
  z-index: 10;
}

.image-processing-preview-card * {
  pointer-events: auto !important;
}

/* ✅ PRODUCTION-SAFE: Targeted fix for MeshList image checkboxes only */
#selectedImageProcessingList .select-image-checkbox {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 100 !important;
  position: relative !important;
  accent-color: #129ed9 !important;
}

/* ✅ FIX: MeshStore image checkboxes to match MeshList styling exactly */
#editStoreSelectedImageProcessingList .select-image-checkbox {
  cursor: pointer !important;
  pointer-events: auto !important;
  z-index: 1000 !important;
  position: relative !important;
  accent-color: #129ed9 !important;
  margin-right: 6px !important;
}

#selectedImageProcessingList .image-controls label {
  cursor: pointer !important;
  pointer-events: auto !important;
}

/* ✅ FIX: MeshStore image controls and labels - match MeshList styling */
/* ⚠️ REMOVED: z-index: 1000 and position: relative - caused severe page glitching with 8+ images */
#editStoreSelectedImageProcessingList .image-controls label {
  cursor: pointer !important;
  pointer-events: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Inter Variable', sans-serif !important;
  font-size: 13px !important;
  color: #333 !important;
  user-select: none !important;
}

#editStoreSelectedImageProcessingList .image-controls {
  pointer-events: auto !important;
  /* ⚠️ REMOVED: z-index: 1000 and position: relative - caused severe page glitching with 8+ images */
}

/* ✅ Ensure MeshStore image containers don't block clicks */
#editStoreSelectedImageProcessingList .image-container {
  position: relative !important;
}

#editStoreSelectedImageProcessingList .image-wrapper {
  pointer-events: auto !important;
}

/* ⚠️ DISABLED - color changes cause flickering with 5+ images
#editStoreSelectedImageProcessingList .image-controls label:hover {
  color: #129ed9 !important;
}

#selectedImageProcessingList .image-controls label:hover {
  color: #129ed9 !important;
}
*/
.image-processing-preview-card input[type="checkbox"],
.image-processing-preview-card select,
.image-processing-preview-card label {
  pointer-events: auto !important;
  cursor: pointer !important;
} 

/* ========== IMPROVED AI IMAGE EDIT BUTTONS ========== */

/* Enhanced Edit Buttons with proper spacing and black text */
.edit-buttons .edit-button {
  background: #fff !important;
  color: #333 !important; /* Changed from blue to black */
  border: 1px solid #e1e6f0 !important;
  border-radius: 6px !important;
  padding: 6px 10px !important; /* Reduced padding */
  font-size: 11px !important;
  font-weight: 500 !important;
  font-family: 'Inter Variable', sans-serif !important;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  min-width: 70px !important; /* Reduced width */
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  margin: 2px !important; /* Reduced margin */
}

/* ✅ FIX: Edit button hover - NO TRANSFORM to prevent flicker */
.edit-buttons .edit-button:hover {
  background: #f8f9fa !important;
  border-color: #129ed9 !important;
  color: #333 !important; /* Keep black on hover */
  box-shadow: 0 2px 4px rgba(18, 158, 217, 0.1) !important;
  /* ✅ REMOVED: transform - causes layout shift and flicker */
}

.edit-buttons .edit-button i {
  color: #129ed9 !important; /* Keep icons blue */
  font-size: 10px !important;
}

/* Loading state for edit buttons - ensure proper glow animation */
.edit-button.loading-glow-img {
  background: linear-gradient(
    135deg,
    rgba(243, 244, 246, 0.9) 0%,
    rgba(229, 231, 235, 0.9) 100%
  ) !important;
  color: #9ca3af !important;
  border-color: #d1d5db !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

/* Ensure loading glow animation continues for multiple buttons */
.edit-button.loading-glow-img::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(18, 158, 217, 0.1) 0%,
    rgba(79, 70, 229, 0.15) 25%,
    rgba(139, 92, 246, 0.2) 50%,
    rgba(79, 70, 229, 0.15) 75%,
    rgba(18, 158, 217, 0.1) 100%
  ) !important;
  animation: modernPulse 2s ease-in-out infinite !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

/* Flowing shimmer effect for buttons */
.edit-button.loading-glow-img::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 25%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 100%
  ) !important;
  animation: modernFlow 2.5s ease-in-out infinite !important;
  z-index: 2 !important;
  border-radius: inherit !important;
  backdrop-filter: blur(1px) !important;
}

/* Ensure button content stays visible during loading */
.edit-button.loading-glow-img > * {
  position: relative !important;
  z-index: 3 !important;
  color: #9ca3af !important;
}

/* ========== SAVE TEMPLATE BUTTON IMPROVEMENTS ========== */

/* Better positioned and cleaner save template button */
.save-template-btn,
button[onclick*="onSaveTemplateBtnClick"],
button[onclick*="onSaveStoreTemplateBtnClick"] {
  background: #129ed9 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important; /* Reduced padding */
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Inter Variable', sans-serif !important;
  cursor: pointer !important;
  transition: background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 12px !important;
  margin-left: 0 !important; /* Left-align the button */
  box-shadow: 0 1px 3px rgba(18, 158, 217, 0.2) !important;
}

/* ✅ FIX: Save template button hover - NO TRANSFORM to prevent flicker */
.save-template-btn:hover,
button[onclick*="onSaveTemplateBtnClick"]:hover,
button[onclick*="onSaveStoreTemplateBtnClick"]:hover {
  background: #0f8bb8 !important;
  /* ✅ REMOVED: transform - causes layout shift and flicker */
  box-shadow: 0 2px 6px rgba(18, 158, 217, 0.25) !important;
}

/* ========== PROJECT FILTER CONTAINER GREY BOX REMOVAL ========== */

/* Remove grey background from project filter container */
.project-filter-container {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-bottom: 16px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.project-filter-container select {
  background: #fff !important;
  border: 1px solid #e1e6f0 !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: #333 !important;
  box-shadow: none !important;
}

/* ========== CONSISTENCY IMPROVEMENTS ========== */

/* Ensure consistent text alignment across tabs */
.bulk-edit-title,
.card-header h4,
.modern-card h3 {
  text-align: left !important;
  margin-bottom: 8px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

/* Consistent spacing for all sections */
.template-toggle-row,
.template-field-row {
  margin-bottom: 12px !important;
}

.info-box2 {
  margin-bottom: 16px !important;
  text-align: left !important;
}