/* Custom Edit Listing UI Styles - Dark Theme */

/* ============================================
   EDIT PANEL - Main Container
   ============================================ */
.edit-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: #1a1a1a;
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Rubik', sans-serif;
  opacity: 0;
}

.edit-panel.active {
  transform: translateX(0);
  opacity: 1;
}

/* 🎬 SEAMLESS TRANSITION: Start with lower opacity when morphing from upload UI */
.edit-panel.morphing {
  opacity: 0;
}

.edit-panel.morphing.active {
  opacity: 1;
  transition: transform 0.35s ease-out, opacity 0.35s ease-out;
}

/* 📱 MOBILE TRANSITION: Slide in from right while upload panel slides out to left */
@media (max-width: 767px) {
  /* GPU acceleration hints for smoother mobile transitions */
  .edit-panel.morphing,
  .edit-panel.transitioning {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .edit-panel.morphing {
    opacity: 1 !important; /* Keep visible during slide on mobile */
    transform: translate3d(100%, 0, 0); /* Start from right - use 3d for GPU */
  }
  
  .edit-panel.morphing.active {
    transform: translate3d(0, 0, 0) !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  }
  
  /* Transitioning class for outgoing edit panel (to upload UI) */
  .edit-panel.transitioning {
    opacity: 0 !important;
    transition: opacity 0.3s ease-out !important;
  }
}

/* ============================================
   HEADER - Top Bar with Actions
   ============================================ */
.edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, #2d2d2d 0%, #252525 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 68px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================
   LISTING INDICATOR - Subtle subheading
   ============================================ */
.edit-listing-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease-out,
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.edit-listing-indicator.visible {
  max-height: 32px;
  opacity: 1;
  padding: 6px 24px 10px;
}

.listing-indicator-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Subtle decorative lines on either side */
.listing-indicator-text::before,
.listing-indicator-text::after {
  content: '';
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15));
}

.listing-indicator-text::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), transparent);
}

/* Hover effect - slightly more visible */
.edit-listing-indicator:hover .listing-indicator-text {
  color: rgba(255, 255, 255, 0.55);
}

/* ============================================
   FALLBACK INDICATOR - Backup service status
   ============================================ */
.edit-fallback-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.4s ease-out,
              padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              margin 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.edit-fallback-indicator.visible {
  max-height: 40px;
  opacity: 1;
  padding: 8px 16px;
  margin: 0 24px 8px;
}

.edit-fallback-indicator.visible .fallback-indicator-content {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 6px;
  backdrop-filter: blur(8px);
}

.fallback-indicator-icon {
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  animation: fallbackPulse 2s ease-in-out infinite;
}

.fallback-indicator-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* Pulsing animation for lightning bolt */
@keyframes fallbackPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 2px rgba(251, 191, 36, 0.4));
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
    filter: drop-shadow(0 0 4px rgba(251, 191, 36, 0.6));
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .fallback-indicator-icon {
    animation: none;
  }
}

.edit-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #4169E1;
  font-size: 16px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
  min-height: 44px;
}

.edit-back-btn:hover {
  background-color: rgba(65, 105, 225, 0.1);
}

.edit-back-btn svg {
  transition: transform 0.2s ease;
}

.edit-back-btn:hover svg {
  transform: translateX(-2px);
}

.edit-context {
  flex: 1;
  text-align: center;
  margin: 0 16px;
}

.edit-context h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.95);
}

.edit-context p {
  margin: 4px 0 0 0;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.6);
}

.edit-save-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.3s ease;
  min-height: 48px;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.edit-save-btn:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
}

.edit-save-btn:active {
  transform: translateY(0);
}

/* Tablet/Desktop (>= 768px) - Center the title regardless of Save button width or panel resize */
@media (min-width: 768px) {

  .edit-header {
    position: relative;
  }

  .edit-context {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none;
    margin: 0;
  }

  .edit-save-btn {
    margin-left: auto;
    position: relative;
    z-index: 1;
  }
}

/* ============================================
   CONTENT - Scrollable Form Area
   ============================================ */
.edit-content {
  flex: 1;
  padding: 32px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  background: #1a1a1a;
  /* Transition for blur effect - must be on base class so it animates in BOTH directions */
  /* Quick 150ms exit to clear before listing field animations start */
  transition: filter 0.15s ease-out;
}

/* Custom scrollbar for content area */
.edit-content::-webkit-scrollbar {
  width: 8px;
}

.edit-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 4px;
}

.edit-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

.edit-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ============================================
   FORM SECTIONS
   ============================================ */
.edit-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 8px; /* Add spacing between sections */
}

.edit-section-header {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.edit-section-title {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0.3px;
}

.edit-section-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.edit-section-half {
  min-width: 0; /* Prevent overflow */
}

.edit-label {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.3px;
  font-family: 'Inter', sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px; /* Consistent spacing between label and input/select - matches .edit-section gap */
}

.edit-char-count {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  font-family: 'Rubik', monospace;
}

/* ============================================
   INPUT FIELDS - Text, Textarea, Select
   ============================================ */
.edit-input {
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 15px;
  font-family: 'Rubik', sans-serif;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.edit-input:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(65, 105, 225, 0.3);
}

.edit-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.edit-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

/* Textarea specific styles */
.edit-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

.edit-textarea-large {
  min-height: 200px;
}

/* Select dropdown specific styles */
.edit-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='rgba(255,255,255,0.6)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}

.edit-select option {
  background: #2a2a2a;
  color: rgba(255, 255, 255, 0.95);
  padding: 10px;
}

/* Price input wrapper */
.price-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.price-currency {
  position: absolute;
  left: 16px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 1;
}

.edit-price-input {
  padding-left: 36px;
}

/* Price fields group - for multiple price inputs */
.price-fields-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  margin-bottom: 12px;
}

.price-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.price-field-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.2px;
  font-family: 'Inter', sans-serif;
}

/* Number input - remove spinners */
.edit-input[type="number"]::-webkit-inner-spin-button,
.edit-input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.edit-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* ============================================
   AI SUGGESTION BUTTONS
   ============================================ */
.ai-suggestion-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(65, 105, 225, 0.1);
  border: 1px solid rgba(65, 105, 225, 0.3);
  color: #4169E1;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  align-self: flex-start;
}

.ai-suggestion-btn:hover {
  background: rgba(65, 105, 225, 0.15);
  border-color: rgba(65, 105, 225, 0.5);
  transform: translateY(-1px);
}

.ai-suggestion-btn:active {
  transform: translateY(0);
}

.ai-suggestion-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* 🔄 LISTING LOADING: AI buttons disabled while listing is being prepared */
.ai-suggestion-btn.listing-loading {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: rgba(107, 114, 128, 0.1);
  border-color: rgba(107, 114, 128, 0.3);
  color: #6b7280;
  transform: none;
}

.ai-suggestion-btn svg {
  width: 16px;
  height: 16px;
}

/* Spinner animation for AI processing */
.ai-spinner {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   PRODUCT DETAILS GRID - Dynamic Aspects
   ============================================ */
.product-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}

.aspect-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 0.3s ease, transform 0.3s ease, max-height 0.3s ease, margin-bottom 0.3s ease;
}

.aspect-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.2px;
  font-family: 'Inter', sans-serif;
}

/* Aspect label row - contains label and required/optional indicator */
.aspect-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Required/Optional indicator for aspects */
.aspect-requirement-label {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  font-family: 'Rubik', sans-serif;
  text-transform: uppercase;
}

.aspect-requirement-label.required {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.aspect-requirement-label.optional {
  color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Required aspect input styling - subtle indicator */
.aspect-input[data-required="true"] {
  border-color: rgba(239, 68, 68, 0.2);
}

.aspect-input[data-required="true"]:focus {
  border-color: rgba(239, 68, 68, 0.4);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
}

.aspect-input {
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  transition: all 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.aspect-input:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(65, 105, 225, 0.3);
}

.aspect-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.08);
  border-color: #4169E1;
  box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.1);
}

.aspect-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* ============================================
   ASPECT ITEM ANIMATIONS - Category Change Updates
   ============================================ */

/* Fade out animation for removed aspects */
.aspect-item.aspect-fade-out {
  opacity: 0;
  transform: translateX(-20px) scale(0.95);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out, max-height 0.3s ease-out, margin-bottom 0.3s ease-out, padding 0.3s ease-out;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Initial state for new aspect items (hidden) */
.aspect-item.aspect-fade-in-start {
  opacity: 0;
  transform: translateX(20px) scale(0.95);
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Fade in animation for new aspects */
.aspect-item.aspect-fade-in {
  opacity: 1;
  transform: translateX(0) scale(1);
  max-height: 500px;
  margin-bottom: 0;
  transition: opacity 0.4s ease-in, transform 0.4s ease-in, max-height 0.4s ease-in;
  pointer-events: auto;
}

/* Pulse animation for grid container when aspects are added */
.aspect-grid-pulse {
  animation: aspectGridPulse 1s ease-out;
}

@keyframes aspectGridPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.3);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* Highlight animation for grid when aspects change */
.product-details-grid.aspect-grid-highlight {
  animation: aspectGridHighlight 2s ease-out;
  border-color: rgba(139, 92, 246, 0.4);
  background: rgba(139, 92, 246, 0.05);
}

@keyframes aspectGridHighlight {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4),
                inset 0 0 20px rgba(139, 92, 246, 0.1);
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.05);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.2),
                inset 0 0 30px rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.08);
  }
  60% {
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15),
                inset 0 0 25px rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.06);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0),
                inset 0 0 0 rgba(139, 92, 246, 0);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
  }
}

/* Highlight animation for individual fields that remain when count changes */
.aspect-input.aspect-field-highlight {
  animation: aspectFieldHighlight 1s ease-out;
}

@keyframes aspectFieldHighlight {
  0% {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.2);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  }
}

/* ============================================
   UNSAVED CHANGES WARNING
   ============================================ */
.unsaved-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  color: #F59E0B;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  margin-top: 8px;
}

.unsaved-warning svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ============================================
   CONFIRMATION DIALOG (Unsaved Changes)
   ============================================ */
.confirm-dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;
  animation: confirmOverlayFadeIn 0.2s ease-out;
}

@keyframes confirmOverlayFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.confirm-dialog {
  background: linear-gradient(145deg, #2a2a2a 0%, #1f1f1f 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 28px 24px;
  max-width: 340px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: confirmDialogSlideIn 0.25s ease-out;
}

@keyframes confirmDialogSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.confirm-dialog-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: rgba(245, 158, 11, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F59E0B;
}

.confirm-dialog-title {
  font-family: 'Rubik', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0 0 10px 0;
}

.confirm-dialog-message {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin: 0 0 24px 0;
}

.confirm-dialog-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.confirm-dialog-btn {
  padding: 12px 20px;
  border-radius: 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.confirm-dialog-stay {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}

.confirm-dialog-stay:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.confirm-dialog-leave {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.confirm-dialog-leave:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.4);
}

/* Spinner for confirm dialog loading state */
.confirm-dialog-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(245, 158, 11, 0.2);
  border-radius: 50%;
  border-top-color: #F59E0B;
  animation: spin 0.8s linear infinite;
}

/* Loading state: change icon background to blue for processing */
.confirm-dialog-icon.loading {
  background: rgba(65, 105, 225, 0.15);
}

.confirm-dialog-icon.loading .confirm-dialog-spinner {
  border: 3px solid rgba(65, 105, 225, 0.2);
  border-top-color: #4169E1;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .edit-panel {
    /* ⭐ SINGLE SOURCE OF TRUTH: See CustomEditUI.DRAG_CONFIG in edit-ui.js */
    width: var(--edit-panel-default-width); /* Dynamically set from DRAG_CONFIG.defaultPanelWidthVw */
    max-width: var(--edit-panel-max-width-tablet); /* Dynamically set from DRAG_CONFIG.tablet.maxWidthVw */
    right: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  }

  html body div#webchat-container.edit-active {
    /* ⭐ SINGLE SOURCE OF TRUTH: Bot takes remaining space (100vw - 55vw = 45vw) */
    width: calc(100vw - var(--edit-panel-default-width)) !important; /* Dynamically calculated from DRAG_CONFIG.defaultPanelWidthVw */
    transition: width 0.3s ease-out !important;
    position: relative !important;
    max-width: var(--edit-bot-max-width-tablet) !important; /* Dynamically set from DRAG_CONFIG.tablet.maxWidthVw */
  }

  html body #webchat-container.edit-active .bpWebchat {
    width: 100% !important;
    right: 0 !important;
    position: absolute !important;
  }

  html body #webchat-container.edit-active #webchat-root.bpheightfull {
    width: 100% !important;
  }

  html body #webchat-container.edit-active .bpOpen.bpWebchat {
    width: 100% !important;
    left: 0 !important;
    position: absolute !important;
    max-width: 100% !important;
  }

  .edit-content {
    padding: 28px 20px;
  }

  .product-details-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
}

/* Desktop (> 1024px) */
@media (min-width: 1025px) {
  .edit-panel {
    /* ⭐ SINGLE SOURCE OF TRUTH: See CustomEditUI.DRAG_CONFIG in edit-ui.js */
    width: var(--edit-panel-default-width); /* Dynamically set from DRAG_CONFIG.defaultPanelWidthVw */
    min-width: var(--edit-panel-min-width-desktop-px); /* Dynamically set from DRAG_CONFIG.desktop.minWidthPx */
    max-width: var(--edit-panel-max-width-desktop); /* Dynamically set from DRAG_CONFIG.desktop.maxWidthVw */
    right: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
  }

  html body div#webchat-container.edit-active {
    /* ⭐ SINGLE SOURCE OF TRUTH: Bot takes remaining space (100vw - 55vw = 45vw) */
    width: var(--edit-bot-default-width) !important; /* Dynamically calculated from DRAG_CONFIG.defaultPanelWidthVw */
    min-width: var(--edit-bot-min-width-desktop) !important; /* Dynamically set from DRAG_CONFIG.desktop.minWidthVw */
    transition: width 0.3s ease-out !important;
    position: relative !important;
  }

  html body #webchat-container.edit-active .bpWebchat {
    width: 100% !important;
    right: 0 !important;
    position: absolute !important;
    left: 0 !important;
  }

  html body #webchat-container.edit-active #webchat-root.bpheightfull {
    width: 100% !important;
    max-width: 100% !important;
  }

  html body #webchat-container.edit-active .bpOpen.bpWebchat {
    width: 100% !important;
    left: 0 !important;
    position: absolute !important;
    max-width: 100% !important;
    max-height: 100vh !important;
  }

  .edit-header {
    padding: 20px 32px;
  }

  .edit-content {
    padding: 40px 32px;
    gap: 32px;
  }

  .product-details-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  html body div.edit-panel {
    width: 100vw !important;
    right: 0 !important;
    left: 0 !important;
    position: fixed !important;
    z-index: 10000 !important;
    min-width: unset !important;
    max-width: unset !important;
    top: 0 !important;
    height: 100vh !important;
  }

  html body div.edit-panel.active {
    transform: translateX(0) !important;
    transition: transform 0.3s ease-out !important;
  }

  html body div.edit-panel:not(.active) {
    transform: translateX(100%) !important;
  }
  
  /* OVERRIDE: Transitioning class (Edit → Upload) uses fade, not slide */
  html body div.edit-panel.transitioning {
    transform: translateX(0) !important; /* Stay in place */
    opacity: 0 !important; /* Fade out */
    transition: opacity 0.3s ease-out !important;
  }

  /* Hide webchat on mobile when edit panel is open */
  html body div#webchat-container.edit-active {
    width: 0vw !important;
    overflow: hidden !important;
  }
  
  /* Hide Botpress elements completely on mobile when edit panel is active (unless bot panel is visible) */
  html body:not(.mobile-bot-panel-visible) div#webchat-container.edit-active .bpWebchat,
  html body:not(.mobile-bot-panel-visible) div#webchat-container.edit-active .bpOpen {
    display: none !important;
  }
  
  /* 📱 MOBILE TRANSITION: Keep Botpress hidden during panel transitions */
  html body.mobile-panel-transitioning:not(.mobile-bot-panel-visible) .bpWebchat,
  html body.mobile-panel-transitioning:not(.mobile-bot-panel-visible) .bpOpen {
    display: none !important;
  }

  .back-text {
    display: none;
  }

  .edit-header {
    padding: 12px 16px;
  }

  .edit-listing-indicator.visible {
    padding: 4px 16px 8px;
    max-height: 28px;
  }

  .listing-indicator-text {
    font-size: 11px;
    letter-spacing: 0.3px;
  }

  .listing-indicator-text::before,
  .listing-indicator-text::after {
    width: 16px;
  }

  .edit-context {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }

  .edit-context h2 {
    font-size: 16px;
  }

  .edit-context p {
    display: none; /* Hide subtitle on mobile for cleaner header */
  }

  .edit-save-btn {
    padding: 8px 12px;
    font-size: 15px;
    min-height: 36px;
  }

  .edit-save-btn .save-btn-text {
    display: inline;
  }

  .edit-save-btn svg {
    display: none; /* Hide checkmark icon on mobile for more compact button */
  }

  .edit-content {
    padding: 20px 16px;
    gap: 24px;
  }

  .edit-section-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .product-details-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 12px;
  }

  .edit-input {
    font-size: 14px;
    padding: 10px 14px;
  }

  /* 🔧 FIX: Preserve left padding for price inputs to show currency symbol */
  .edit-price-input {
    padding-left: 32px;
  }

  .price-currency {
    left: 12px;
    font-size: 14px;
  }

  .ai-suggestion-btn {
    font-size: 13px;
    padding: 8px 14px;
  }
}

/* ============================================
   SMOOTH TRANSITIONS FOR CONTAINER RESIZING
   ============================================ */
#webchat-container {
  position: relative !important;
  width: 100vw;
  height: 100vh !important;
  transition: width 0.3s ease-out, transform 0.3s ease-out;
  overflow: hidden !important;
}

/* Ensure webchat content stays within bounds during resize */
#webchat-container.edit-active {
  overflow: hidden !important;
  position: relative !important;
}

/* Additional support for Botpress iframe positioning */
#webchat-container iframe {
  width: 100% !important;
  height: 100% !important;
  transition: none !important; /* Let the container handle transitions */
}

/* Ensure Botpress elements respect container width changes */
#webchat-container.edit-active .bpw-layout,
#webchat-container.edit-active .bpw-chat-container,
#webchat-container.edit-active .bpw-header-container,
#webchat-container.edit-active .bpw-header {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================
   DARK MODE SUPPORT (System Preference)
   ============================================ */
@media (prefers-color-scheme: dark) {
  .edit-panel {
    background: #121212;
  }

  .edit-header {
    background: linear-gradient(135deg, #1e1e1e 0%, #1a1a1a 100%);
    border-bottom-color: rgba(255, 255, 255, 0.06);
  }

  .edit-content {
    background: #121212;
  }
}

/* ============================================
   LOADING STATES & ANIMATIONS
   ============================================ */
.edit-panel .loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(5px);
}

.edit-panel .loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-top-color: #4169E1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
.edit-input:focus-visible,
.edit-save-btn:focus-visible,
.edit-back-btn:focus-visible,
.ai-suggestion-btn:focus-visible {
  outline: 2px solid #4169E1;
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .edit-input {
    border-width: 2px;
  }

  .ai-suggestion-btn {
    border-width: 2px;
  }

  .edit-save-btn,
  .edit-back-btn {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .edit-panel,
  .edit-input,
  .ai-suggestion-btn,
  .edit-save-btn,
  .edit-back-btn {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================
   CRITICAL FIX: Ultra-specific overrides to ensure
   webchat container resizes when edit panel opens
   These rules MUST come last to override any conflicts
   ============================================ */

/* Force webchat container to resize - apply at all screen sizes */
html body div#webchat-container.edit-active[id="webchat-container"] {
  transition: width 0.3s ease-out !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Desktop: Force specific width */
@media (min-width: 1025px) {
  html body div#webchat-container.edit-active[id="webchat-container"] {
    /* ⭐ SINGLE SOURCE OF TRUTH: Bot takes remaining space */
    width: var(--edit-bot-default-width) !important; /* Dynamically calculated from DRAG_CONFIG.defaultPanelWidthVw */
    min-width: var(--edit-bot-min-width-desktop) !important; /* Dynamically set from DRAG_CONFIG.desktop.minWidthVw */
  }
}

/* Tablet: Force specific width */
@media (min-width: 768px) and (max-width: 1024px) {
  html body div#webchat-container.edit-active[id="webchat-container"] {
    /* ⭐ SINGLE SOURCE OF TRUTH: Bot takes remaining space */
    width: calc(100vw - var(--edit-panel-default-width)) !important; /* Dynamically calculated from DRAG_CONFIG.defaultPanelWidthVw */
    max-width: var(--edit-bot-max-width-tablet) !important; /* Dynamically set from DRAG_CONFIG.tablet.maxWidthVw */
  }
}

/* Mobile: Hide completely */
@media (max-width: 767px) {
  html body div#webchat-container.edit-active[id="webchat-container"] {
    width: 0vw !important;
  }
}

/* ============================================ */
/* ✨ AI FIELD UPDATE ANIMATIONS */
/* ============================================ */

/* Pulse animation when AI starts updating */
.ai-updating {
  animation: aiPulse 0.6s ease-in-out;
  border-color: #8B5CF6 !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

@keyframes aiPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.1);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  }
}

/* Fade out old content */
.ai-fade-out {
  opacity: 0.3;
  transition: opacity 0.2s ease-out;
  border-color: #8B5CF6 !important;
}

/* Fade in new content */
.ai-fade-in {
  opacity: 1;
  transition: opacity 0.3s ease-in;
  border-color: #8B5CF6 !important;
}

/* Success glow effect */
.ai-success-glow {
  animation: aiSuccessGlow 1.5s ease-out;
}

@keyframes aiSuccessGlow {
  0% {
    border-color: #10B981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6),
                inset 0 0 20px rgba(16, 185, 129, 0.2);
  }
  50% {
    border-color: #10B981;
    box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.4),
                inset 0 0 30px rgba(16, 185, 129, 0.3);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0),
                inset 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Subtle pulse when value is same (no change needed) */
.ai-updated-same {
  animation: aiSamePulse 2s ease-in-out;
}

@keyframes aiSamePulse {
  0%, 100% {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
  }
  25%, 75% {
    border-color: #3B82F6;
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.3);
  }
}

/* Enhanced AI suggestion button animation */
.ai-suggestion-btn {
  position: relative;
  overflow: hidden;
}

.ai-suggestion-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(139, 92, 246, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ai-suggestion-btn:active::after {
  width: 300px;
  height: 300px;
}

/* Spinner animation for AI button */
.ai-spinner {
  animation: aiSpinnerRotate 1s linear infinite;
}

@keyframes aiSpinnerRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Smooth transitions for all edit inputs */
.edit-input,
.edit-textarea,
.edit-select,
.edit-price-input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

/* Focus state enhancement */
.edit-input:focus,
.edit-textarea:focus,
.edit-select:focus,
.edit-price-input:focus {
  outline: none;
  border-color: #8B5CF6;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* ============================================
   CATEGORY FIELD STYLES
   ============================================ */

/* Container for read-only category display */
.category-readonly {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  transition: opacity 0.4s ease-out, max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
}

/* Initial hidden state */
.category-readonly.category-hidden,
#edit-category-dropdown.category-hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* Visible state */
.category-readonly.category-visible {
  opacity: 1;
  max-height: 300px;
  margin-bottom: 0;
  pointer-events: auto;
}

#edit-category-dropdown {
  transition: opacity 0.4s ease-out, max-height 0.4s ease-out;
  overflow: hidden;
}

#edit-category-dropdown.category-visible {
  opacity: 1;
  max-height: 200px;
}

/* Slide-in animation for category field on first appearance */
.category-readonly.category-slide-in {
  animation: categorySlideIn 0.5s ease-out forwards;
}

#edit-category-dropdown.category-slide-in {
  animation: categorySlideIn 0.5s ease-out forwards;
}

@keyframes categorySlideIn {
  0% {
    opacity: 0;
    max-height: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    max-height: 300px;
    transform: translateY(0);
  }
}

/* Read-only category input (catalogue-matched) */
.category-readonly input[readonly] {
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Hint text below read-only category */
.category-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 8px;
  font-size: 13px;
  font-family: 'Rubik', sans-serif;
  color: rgba(59, 130, 246, 0.9);
  line-height: 1.4;
}

.category-hint svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: rgba(59, 130, 246, 0.7);
}

/* Style for "Pick a different category" option */
#edit-category-dropdown option[value="PICK_DIFFERENT_CATEGORY"] {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 8px;
  margin-top: 4px;
  font-weight: 600;
  color: rgba(139, 92, 246, 1);
}

/* ============================================
   TRADING CARD FIELDS - Grouped Container
   ============================================ */

/* Add spacing above trading card section */
#trading-card-condition-section {
  margin-top: 8px;
}

/* Trading card fields container - similar to product details grid */
.trading-card-fields-container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 20px;
  margin-top: 12px;
  background: rgba(139, 92, 246, 0.03);
  border: 1px solid rgba(139, 92, 246, 0.15);
  border-radius: 12px;
  transition: all 0.3s ease;
}

/* Hover effect for trading card container */
.trading-card-fields-container:hover {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.2);
}

/* Remove extra gap for sections inside trading card container */
.trading-card-fields-container .edit-section {
  gap: 8px;
}

/* Note: Optional text is already in the HTML label, no need to add via CSS */

/* Subtle differentiation for graded vs ungraded (more neutral colors) */
#graded-card-fields .trading-card-fields-container {
  border-color: rgba(139, 92, 246, 0.15);
  background: rgba(139, 92, 246, 0.03);
}

#graded-card-fields .trading-card-fields-container:hover {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.2);
}

#ungraded-card-fields .trading-card-fields-container {
  border-color: rgba(139, 92, 246, 0.15);
  background: rgba(139, 92, 246, 0.03);
}

#ungraded-card-fields .trading-card-fields-container:hover {
  background: rgba(139, 92, 246, 0.05);
  border-color: rgba(139, 92, 246, 0.2);
}

/* Mobile adjustments for trading card fields */
@media (max-width: 767px) {
  .trading-card-fields-container {
    padding: 16px;
    gap: 16px;
  }
}

/* ============================================
   TRADING CARD ANIMATIONS
   ============================================ */

/* Initial state - container hidden */
#graded-card-fields,
#ungraded-card-fields {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Container slide-in animation when shown */
#graded-card-fields.card-container-animate-in,
#ungraded-card-fields.card-container-animate-in {
  animation: cardContainerSlideIn 0.5s ease-out forwards;
}

@keyframes cardContainerSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Pulse effect for container when first appearing */
.trading-card-fields-container.card-container-pulse {
  animation: cardContainerPulse 1s ease-out;
}

@keyframes cardContainerPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
    border-color: rgba(139, 92, 246, 0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.4);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
    border-color: rgba(139, 92, 246, 0.15);
  }
}

/* Individual field animation states */
.trading-card-fields-container .edit-section {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

/* Initial hidden state for fields */
.trading-card-fields-container .edit-section.card-field-hidden {
  opacity: 0;
  transform: translateX(-15px);
}

/* Animate-in state for fields */
.trading-card-fields-container .edit-section.card-field-animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Field highlight animation when populated */
.trading-card-fields-container .edit-input.card-field-highlight {
  animation: cardFieldHighlight 1s ease-out;
}

@keyframes cardFieldHighlight {
  0% {
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.08);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.3);
  }
  50% {
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(139, 92, 246, 0.12);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 0 rgba(139, 92, 246, 0);
  }
}

/* ============================================
   STREAMING TEXT ANIMATIONS
   ============================================ */

/* Streaming cursor effect - blinking cursor during text stream */
.edit-input.streaming.stream-cursor {
  position: relative;
  color: rgba(255, 255, 255, 0.85);
}

/* Blinking cursor animation */
@keyframes cursorBlink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Container glow during streaming */
.edit-section.streaming-active {
  position: relative;
}

.edit-section.streaming-active::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15));
  opacity: 0;
  animation: streamingGlow 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes streamingGlow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.01);
  }
}

/* Subtle text fade-in during stream for readability */
.edit-input.streaming {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.2s ease;
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2);
}

/* Complete state - text fully visible */
.edit-input.stream-complete {
  color: rgba(255, 255, 255, 0.95);
  transition: color 0.3s ease;
}

/* Aspect grid highlight during streaming updates */
.product-details-grid.aspect-grid-highlight {
  position: relative;
}

.product-details-grid.aspect-grid-highlight::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(5, 150, 105, 0.1));
  opacity: 0;
  animation: gridHighlightPulse 1.5s ease-out;
  pointer-events: none;
  z-index: -1;
}

@keyframes gridHighlightPulse {
  0% {
    opacity: 0;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.02);
  }
}

/* Aspect field highlight during streaming */
.aspect-input.streaming {
  color: rgba(255, 255, 255, 0.75);
  border-color: rgba(16, 185, 129, 0.3);
  background: rgba(16, 185, 129, 0.05);
  transition: all 0.2s ease;
}

.aspect-input.stream-complete {
  color: rgba(255, 255, 255, 0.95);
}

/* Smooth aspect field highlight animation */
.aspect-input.aspect-field-highlight {
  animation: aspectStreamHighlight 1.2s ease-out;
}

@keyframes aspectStreamHighlight {
  0% {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.08);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.3);
  }
  50% {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.12);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

/* Performance optimization - use GPU acceleration */
.edit-input.streaming,
.edit-input.stream-cursor,
.edit-section.streaming-active,
.aspect-input.streaming {
  will-change: color, border-color, box-shadow;
}

/* Clean up after animation */
.edit-input.stream-complete,
.aspect-input.stream-complete {
  will-change: auto;
}

/* ============================================
   DOT WAVE LOADING - Field-Level Processing State
   ============================================ */

/* Wrapper for field loading - provides positioning context */
.field-loading-wrapper {
  position: relative;
  display: block;
}

/* Field loading state - purple tint + readonly */
.edit-input.field-loading,
.edit-textarea.field-loading,
.edit-select.field-loading,
.aspect-input.field-loading,
.product-details-grid.field-loading {
  background: rgba(139, 92, 246, 0.08) !important;
  pointer-events: none;
  cursor: wait;
  position: relative;
  border-color: rgba(139, 92, 246, 0.2) !important;
}

/* Text-based fields should hide text during loading */
.edit-input.field-loading,
.edit-textarea.field-loading,
.edit-select.field-loading,
.aspect-input.field-loading {
  /* Ensure text remains invisible during loading - only dots visible */
  color: transparent !important;
}

/* Hide placeholder during loading */
.edit-input.field-loading::placeholder,
.edit-textarea.field-loading::placeholder {
  opacity: 0;
}

/* 🎯 FIELD LOADING INDICATOR - Real DOM element for compatibility */
/* Positioned absolutely over the field */
.field-loading-indicator {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(139, 92, 246, 0.95);
  font-size: 22px;
  letter-spacing: 8px;
  font-weight: 700;
  pointer-events: none;
  z-index: 10;
  animation: dotWavePulse 1.5s ease-in-out infinite;
  user-select: none;
  line-height: 1;
  margin-top: 1px; /* Fine-tune vertical centering */
}

/* Textarea variant - centered vertically in the textarea */
.field-loading-indicator.textarea-indicator {
  top: 50%;
  transform: translateY(-50%);
  animation: dotWavePulseTextarea 1.5s ease-in-out infinite;
  margin-top: 0; /* Reset margin for textarea */
}

/* Price input variant - account for currency symbol */
.field-loading-indicator.price-indicator {
  left: 42px;
}

/* Dot wave animation - opacity + scale pulse */
@keyframes dotWavePulse {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
}

/* Textarea animation - same Y centering as other fields */
@keyframes dotWavePulseTextarea {
  0%, 100% {
    opacity: 0.3;
    transform: translateY(-50%) scale(0.9);
  }
  50% {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
  }
}

/* Reduce motion support */
@media (prefers-reduced-motion: reduce) {
  .field-loading-indicator {
    animation: none !important;
    opacity: 0.7 !important;
    transform: translateY(-50%) scale(1) !important;
  }
  
  .field-loading-indicator.textarea-indicator {
    transform: translateY(-50%) scale(1) !important;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .field-loading-indicator {
    font-size: 20px;
    letter-spacing: 6px;
    left: 12px;
  }
  
  .field-loading-indicator.price-indicator {
    left: 36px;
  }
}

/* ============================================
   PACKAGE WEIGHT & SIZE STYLES
   ============================================ */

/* Collapsible button */
.package-collapse-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 15px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.package-collapse-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.package-collapse-btn .collapse-icon {
  transition: transform 0.3s ease;
  color: rgba(255, 255, 255, 0.6);
}

.package-collapse-btn.expanded .collapse-icon {
  transform: rotate(180deg);
}

/* Package fields container */
.package-fields-container {
  margin-top: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
  opacity: 1;
  max-height: 2000px; /* Large enough to fit content */
  transition: opacity 0.3s ease, max-height 0.4s ease, margin-top 0.3s ease, padding 0.3s ease;
}

/* Collapsed state */
.package-fields-container.collapsed {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}

/* AI Suggested badge */
.package-badge {
  display: inline-block;
  background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
}

/* Suggestion info (confidence & notes) */
.package-suggestion-info {
  padding: 12px;
  background: rgba(139, 92, 246, 0.08);
  border-left: 3px solid #8B5CF6;
  border-radius: 6px;
  margin-bottom: 8px;
}

.suggestion-confidence {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #8B5CF6;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.suggestion-confidence svg {
  fill: #8B5CF6;
}

.suggestion-notes {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

/* Show dimensions button */
.show-dimensions-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(139, 92, 246, 0.08);
  border: 1px dashed rgba(139, 92, 246, 0.3);
  border-radius: 8px;
  padding: 12px 16px;
  color: #8B5CF6;
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}

.show-dimensions-btn:hover {
  background: rgba(139, 92, 246, 0.12);
  border-color: rgba(139, 92, 246, 0.5);
  border-style: solid;
}

.show-dimensions-btn svg {
  transition: transform 0.2s ease;
}

.show-dimensions-btn:hover svg {
  transform: scale(1.1);
}

/* Remove dimensions button */
.remove-dimensions-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 10px 16px;
  color: #EF4444;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.remove-dimensions-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.4);
}

.remove-dimensions-btn svg {
  transition: transform 0.2s ease;
}

.remove-dimensions-btn:hover svg {
  transform: rotate(90deg);
}

/* Package field group */
.package-field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.package-field-group:last-child {
  margin-bottom: 0;
}

.package-field-label {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Field requirement indicator (Required/Optional) */
.field-requirement-label {
  color: rgba(255, 255, 255, 0.4);
  font-size: 12px;
  font-weight: 400;
  font-style: italic;
  font-family: 'Rubik', sans-serif;
}

/* Range selector */
.package-range-selector {
  width: 100%;
}

.range-options {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.range-option-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.range-option-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(139, 92, 246, 0.4);
}

.range-option-btn.selected {
  background: rgba(139, 92, 246, 0.15);
  border-color: #8B5CF6;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.1);
}

.range-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.5);
}

.range-option-btn.selected .range-label {
  color: #8B5CF6;
}

.range-value {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* Manual input */
.package-manual-input {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.package-input {
  flex: 1;
  min-width: 0;
  width: auto !important; /* Override .edit-input width: 100% to allow flex layout */
}

.package-unit {
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  white-space: nowrap;
}

.package-unit-select {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 70px;
}

.package-unit-select:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.2);
}

.package-unit-select:focus {
  outline: none;
  border-color: var(--primary-purple);
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.package-unit-select option {
  background: #1a1a1a;
  color: rgba(255, 255, 255, 0.9);
  padding: 8px;
}

/* Radio group for irregular shipping */
.package-radio-group {
  display: flex;
  gap: 16px;
}

.package-radio-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
}

.package-radio-label input[type="radio"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #8B5CF6;
}

.package-radio-label:hover {
  color: rgba(255, 255, 255, 1);
}

/* Responsive adjustments for package fields */
@media (max-width: 1024px) {
  .range-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .range-options {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .package-fields-container {
    padding: 16px;
  }
  
  .package-badge {
    font-size: 10px;
    padding: 3px 8px;
  }
}

/* ============================================
   LISTING PROGRESS STATE - Publishing to eBay
   ============================================ */

/* Listing Progress Banner */
.listing-progress-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(65, 105, 225, 0.4);
  animation: fadeInCenter 0.3s ease-out;
  will-change: opacity, transform;
  max-width: 90%;
  width: 500px;
}

/* Blur the edit content when listing is in progress */
.edit-content.listing-dimmed {
  position: relative;
  filter: blur(4px);
  transition: filter 0.3s ease-out;
  pointer-events: none;
}

.listing-progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.listing-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

.listing-refinement-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  animation: refinementPulse 1.5s ease-in-out infinite;
}

@keyframes refinementPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

.listing-refinement-fail-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 4px;
}

.listing-success-icon,
.listing-error-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
}

.listing-progress-content.success {
  background: transparent;
}

.listing-progress-content.success .listing-progress-banner {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
}

.listing-progress-content.error {
  background: transparent;
}

.listing-progress-content.error .listing-progress-banner {
  background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%);
}

.listing-success-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.listing-error-icon {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.listing-progress-banner h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
}

.listing-progress-banner p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeInCenter {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Save button listing states */
.edit-save-btn.listing-in-progress {
  background: linear-gradient(45deg, #4169E1, #6495ED);
  animation: pulse 2s infinite;
  cursor: not-allowed;
}

.edit-save-btn.listing-success {
  background: linear-gradient(45deg, #28a745, #20c997);
  cursor: default;
}

.edit-save-btn.listing-error {
  background: linear-gradient(45deg, #dc3545, #e74c3c);
}

/* 🔄 LISTING LOADING: Save button disabled while listing is being prepared */
.edit-save-btn.listing-loading {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}

.edit-save-btn.listing-loading:hover {
  transform: none;
  box-shadow: none;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* Responsive adjustments for listing progress */
@media (max-width: 767px) {
  .listing-progress-banner {
    padding: 20px;
    width: calc(100% - 32px);
    max-width: 400px;
  }
  
  .listing-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }
  
  .listing-success-icon,
  .listing-error-icon {
    width: 56px;
    height: 56px;
    font-size: 28px;
  }
  
  .listing-progress-banner h3 {
    font-size: 18px;
  }
  
  .listing-progress-banner p {
    font-size: 13px;
  }
}

/* ============================================
   NEXT LISTING LOADING STATE - Between Listings in Batch
   ============================================ */

/* Next Listing Loading Banner - similar to publishing but different color */
.next-listing-loading-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(139, 92, 246, 0.4);
  animation: fadeInCenter 0.3s ease-out;
  will-change: opacity, transform;
  max-width: 90%;
  width: 420px;
  /* Quick 150ms exit to clear before listing field animations start */
  transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

/* Blur the edit content when loading next listing */
.edit-content.next-listing-dimmed {
  position: relative;
  filter: blur(4px);
  pointer-events: none;
  /* GPU acceleration hint for smoother blur animation */
  will-change: filter;
}

.next-listing-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.next-listing-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: white;
  animation: spin 1s linear infinite;
}

.next-listing-loading-banner h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
}

.next-listing-loading-banner p {
  margin: 0;
  opacity: 0.9;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
}

/* Batch progress counter */
.batch-progress-counter {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  opacity: 0.95;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.batch-progress-counter .progress-main {
  color: white;
}

.batch-progress-counter .progress-failed {
  color: rgba(255, 255, 255, 0.85);
  margin-left: 4px;
}

/* Responsive adjustments for next listing loading */
@media (max-width: 767px) {
  .next-listing-loading-banner {
    padding: 20px;
    width: calc(100% - 32px);
    max-width: 360px;
  }
  
  .next-listing-spinner {
    width: 40px;
    height: 40px;
    border-width: 3px;
  }
  
  .next-listing-loading-banner h3 {
    font-size: 18px;
  }
  
  .next-listing-loading-banner p {
    font-size: 13px;
  }
  
  .batch-progress-counter {
    font-size: 12px;
    margin-top: 6px;
    padding-top: 10px;
  }
}

/* ============================================
   ORCHESTRATOR FAILED STATE - First Listing Failed
   ============================================ */

/* Orchestrator Failed Banner - warning/amber colors */
.orchestrator-failed-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  color: white;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(245, 158, 11, 0.4);
  animation: fadeInCenter 0.3s ease-out;
  will-change: opacity, transform;
  max-width: 90%;
  width: 440px;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.orchestrator-failed-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.orchestrator-failed-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.orchestrator-failed-banner h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
}

.orchestrator-failed-banner p {
  margin: 0;
  opacity: 0.95;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  line-height: 1.5;
}

.orchestrator-failed-continue {
  margin-top: 8px;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  color: white;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.orchestrator-failed-continue:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}

/* Responsive adjustments for orchestrator failed */
@media (max-width: 767px) {
  .orchestrator-failed-banner {
    padding: 24px;
    width: calc(100% - 32px);
    max-width: 380px;
  }
  
  .orchestrator-failed-icon {
    width: 48px;
    height: 48px;
    font-size: 28px;
  }
  
  .orchestrator-failed-banner h3 {
    font-size: 18px;
  }
  
  .orchestrator-failed-banner p {
    font-size: 13px;
  }
  
  .orchestrator-failed-continue {
    padding: 9px 20px;
    font-size: 13px;
  }
}

/* ============================================
   INLINE FIELD VALIDATION ERRORS
   ============================================ */

/* Error state for inputs and selects */
.edit-input.field-error,
.edit-select.field-error,
.edit-textarea.field-error,
.aspect-input.field-error {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.edit-input.field-error:focus,
.edit-select.field-error:focus,
.edit-textarea.field-error:focus,
.aspect-input.field-error:focus {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* Error message container */
.field-error-message {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(239, 68, 68, 0.1);
  border-radius: 6px;
  border-left: 3px solid #ef4444;
  animation: fieldErrorSlideIn 0.25s ease-out;
}

.field-error-message svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.field-error-message span {
  color: #fca5a5;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  font-family: 'Inter', sans-serif;
}

@keyframes fieldErrorSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Error state for field groups/sections (for complex fields like package dimensions) */
.edit-section.section-error {
  border-color: rgba(239, 68, 68, 0.4) !important;
  background: rgba(239, 68, 68, 0.05) !important;
}

/* Error state for package field groups */
.package-field-group.field-error .package-field-label {
  color: #fca5a5;
}

.package-field-group.field-error input {
  border-color: #ef4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
}

/* Smooth scroll behavior for error focus */
.edit-content {
  scroll-behavior: smooth;
}

/* Shake animation for invalid submission attempt */
@keyframes fieldErrorShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.field-error-shake {
  animation: fieldErrorShake 0.5s ease-out;
}

/* ============================================
   IMAGE GALLERY - Thumbnail Strip
   ============================================ */

.edit-images-section {
  padding: 16px 0;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  /* Start in hidden state for animation */
  opacity: 0;
  transform: translateY(-8px);
  margin-bottom: 0;
  transition: opacity 0.35s ease-out, 
              transform 0.35s ease-out, 
              margin-bottom 0.35s ease-out;
}

/* Visible state - animated in */
.edit-images-section.visible {
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 8px;
}

.edit-images-section.hidden {
  display: none;
}

/* Empty state - all images removed, show add button prominently */
.edit-images-section.empty {
  opacity: 1;
  transform: translateY(0);
  margin-bottom: 8px;
}

.edit-images-section.empty .edit-image-thumbnails {
  justify-content: center;
}

/* Make add button larger and more prominent when section is empty */
.edit-images-section.empty .edit-image-add-btn {
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  border-width: 2px;
  border-color: rgba(65, 105, 225, 0.5);
  background: rgba(65, 105, 225, 0.12);
}

/* Error state for images section */
.edit-images-section.field-error {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.05);
}

.edit-images-section.field-error-shake {
  animation: fieldErrorShake 0.5s ease-in-out;
}

/* Red-tinted add button when images section has error */
.edit-images-section.field-error .edit-image-add-btn {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.1);
}

.edit-images-section.field-error .edit-image-add-btn:hover {
  border-color: rgba(239, 68, 68, 0.8);
  background: rgba(239, 68, 68, 0.15);
}

.edit-images-section.field-error .add-image-content {
  color: rgba(239, 68, 68, 0.8);
}

.edit-images-section.field-error .edit-image-add-btn:hover .add-image-content {
  color: #ef4444;
}

.edit-images-section.empty .edit-image-add-btn:hover {
  transform: scale(1.08);
  border-color: rgba(65, 105, 225, 0.8);
  background: rgba(65, 105, 225, 0.2);
}

.edit-images-section.empty .edit-image-add-btn svg {
  width: 32px;
  height: 32px;
}

.edit-images-header {
  margin-bottom: 12px;
}

.edit-images-header .edit-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.edit-images-header .edit-label svg {
  opacity: 0.7;
}

.edit-image-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(65, 105, 225, 0.2);
  color: #6495ED;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  margin-left: 4px;
}

.edit-image-thumbnails {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 0 4px 20px;
  min-height: 60px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  -webkit-overflow-scrolling: touch;
}

.edit-image-thumbnails::-webkit-scrollbar {
  height: 6px;
}

.edit-image-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.edit-image-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.edit-image-thumbnails::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Individual Thumbnail */
.edit-image-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(45, 45, 45, 1);
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Initial state - hidden for animation */
  opacity: 0;
  transform: translateX(15px) scale(0.9);
  transition: opacity 0.3s ease-out, 
              transform 0.3s ease-out, 
              border-color 0.2s ease, 
              box-shadow 0.2s ease;
}

/* Animated in state */
.edit-image-thumb.thumb-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.edit-image-thumb.loaded {
  opacity: 1;
}

.edit-image-thumb.error {
  opacity: 0.5;
  border-color: rgba(239, 68, 68, 0.4);
}

.edit-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  background: #2d2d2d;
  transition: opacity 0.2s ease;
}

/* Image loading state */
.edit-image-thumb:not(.loaded) img {
  opacity: 0.7;
}

.edit-image-thumb.loaded img {
  opacity: 1;
}

.edit-image-thumb.removing {
  opacity: 0;
  transform: translateX(-15px) scale(0.9);
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}

.edit-image-thumb.thumb-visible:hover {
  border-color: rgba(65, 105, 225, 0.5);
  transform: translateX(0) scale(1.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.edit-image-thumb:focus {
  outline: none;
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.3);
}

/* ============================================
   REMOVE BUTTON STYLES
   ============================================ */
.edit-image-remove-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  font-size: 14px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
  z-index: 5;
}

/* Show remove button on thumbnail hover */
.edit-image-thumb:hover .edit-image-remove-btn,
.edit-image-thumb:focus .edit-image-remove-btn {
  opacity: 1;
  transform: scale(1);
}

.edit-image-remove-btn:hover {
  background: #dc3545;
  transform: scale(1.1);
}

.edit-image-remove-btn:active {
  transform: scale(0.95);
}

/* Hide remove button while dragging */
.edit-image-thumb.dragging .edit-image-remove-btn {
  opacity: 0 !important;
  pointer-events: none;
}

/* Thumbnail fade-in handled via opacity transition now */

/* ============================================
   DRAG AND DROP REORDERING STYLES
   ============================================ */

/* Cursor changes for draggable thumbnails */
.edit-image-thumb {
  cursor: grab;
  position: relative;
}

.edit-image-thumb:active {
  cursor: grabbing;
}

/* When the thumbnail strip is in drag mode */
.edit-image-thumbnails.drag-active {
  background: rgba(65, 105, 225, 0.05);
  border-radius: 12px;
  padding: 8px;
  margin: -4px;
}

/* The thumbnail being dragged */
.edit-image-thumb.dragging {
  opacity: 0.3;
  transform: scale(0.9);
  border-color: rgba(65, 105, 225, 0.3);
  box-shadow: none;
  cursor: grabbing;
}

/* 📱 Touch dragging styles for mobile */
.edit-image-thumb.touch-dragging {
  opacity: 0.5;
  transform: scale(0.85);
  z-index: 1000;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.4);
  transition: none; /* Disable transitions during drag for immediate feedback */
  border-color: rgba(65, 105, 225, 0.5);
}

/* Ensure remove button is hidden during touch drag too */
.edit-image-thumb.touch-dragging .edit-image-remove-btn {
  opacity: 0 !important;
  pointer-events: none;
}

/* Thumbnail being hovered over as drop target */
.edit-image-thumb.drag-over,
.edit-image-thumb.drop-target {
  transform: scale(1.05);
  border-color: rgba(65, 105, 225, 0.7);
  box-shadow: 0 0 15px rgba(65, 105, 225, 0.4);
  z-index: 10;
}

/* Drop indicator - show where the image will be dropped */
.edit-image-thumb.drop-before::before,
.edit-image-thumb.drop-after::after {
  content: '';
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 4px;
  background: linear-gradient(180deg, #4169E1 0%, #6B8DD6 100%);
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(65, 105, 225, 0.7), 0 0 4px rgba(65, 105, 225, 0.9);
  animation: dropIndicatorPulse 0.6s ease-in-out infinite;
  z-index: 20;
}

.edit-image-thumb.drop-before::before {
  left: -8px;
}

.edit-image-thumb.drop-after::after {
  right: -8px;
}

@keyframes dropIndicatorPulse {
  0%, 100% {
    opacity: 1;
    transform: scaleY(1);
    box-shadow: 0 0 12px rgba(65, 105, 225, 0.7), 0 0 4px rgba(65, 105, 225, 0.9);
  }
  50% {
    opacity: 0.85;
    transform: scaleY(0.98);
    box-shadow: 0 0 16px rgba(65, 105, 225, 0.9), 0 0 6px rgba(65, 105, 225, 1);
  }
}

/* ============================================
   END DROP ZONE - For dropping at the end
   ============================================ */

.edit-image-end-drop-zone {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border: 2px dashed rgba(65, 105, 225, 0.3);
  border-radius: 10px;
  background: rgba(65, 105, 225, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
  pointer-events: none;
}

.edit-image-end-drop-zone.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.edit-image-end-drop-zone.drag-over {
  border-color: rgba(65, 105, 225, 0.8);
  background: rgba(65, 105, 225, 0.15);
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(65, 105, 225, 0.4);
}

.end-drop-zone-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.end-drop-zone-icon {
  font-size: 24px;
  font-weight: 300;
  color: rgba(65, 105, 225, 0.5);
  line-height: 1;
  transition: all 0.2s ease;
}

.edit-image-end-drop-zone.drag-over .end-drop-zone-icon {
  color: rgba(65, 105, 225, 1);
  transform: scale(1.2);
}

/* Smooth transition for reorder animation */
.edit-image-thumbnails {
  transition: background 0.2s ease, padding 0.2s ease, margin 0.2s ease;
}

/* ============================================
   ADD IMAGE BUTTON
   ============================================ */

.edit-image-add-btn {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border: 2px dashed rgba(65, 105, 225, 0.4);
  border-radius: 10px;
  background: rgba(65, 105, 225, 0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.edit-image-add-btn:hover {
  border-color: rgba(65, 105, 225, 0.7);
  background: rgba(65, 105, 225, 0.15);
  transform: scale(1.05);
}

.edit-image-add-btn:active {
  transform: scale(0.98);
}

.edit-image-add-btn:focus {
  outline: none;
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.3);
}

.add-image-content {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(65, 105, 225, 0.7);
  transition: color 0.2s ease;
}

.edit-image-add-btn:hover .add-image-content {
  color: #4169E1;
}

.edit-image-add-btn svg {
  width: 24px;
  height: 24px;
}

/* Add button loading state */
.edit-image-add-btn.uploading {
  pointer-events: none;
  border-color: rgba(65, 105, 225, 0.5);
  background: rgba(65, 105, 225, 0.1);
}

.add-image-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid rgba(65, 105, 225, 0.3);
  border-radius: 50%;
  border-top-color: #4169E1;
  animation: addImageSpin 0.8s linear infinite;
}

@keyframes addImageSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   IMAGE LIGHTBOX OVERLAY
   ============================================ */

.edit-image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.edit-image-lightbox.active {
  opacity: 1;
  visibility: visible;
}

.edit-lightbox-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.edit-lightbox-container {
  position: relative;
  width: 90%;
  height: 75%;
  max-width: 900px;
  max-height: 700px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 0.15s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.edit-lightbox-close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.edit-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.edit-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  font-size: 28px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.edit-lightbox-nav:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-50%) scale(1.1);
}

.edit-lightbox-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.edit-lightbox-prev {
  left: -70px;
}

.edit-lightbox-next {
  right: -70px;
}

/* Bottom Navigation Bar */
.edit-lightbox-bottom-nav {
  position: absolute;
  bottom: -65px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 20px;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.edit-lightbox-bottom-btn {
  width: 34px;
  height: 34px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.edit-lightbox-bottom-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.1);
}

.edit-lightbox-bottom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.edit-lightbox-counter {
  color: white;
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  font-weight: 500;
  min-width: 60px;
  text-align: center;
}

/* Lightbox Thumbnails */
.edit-lightbox-thumbnails {
  position: absolute;
  bottom: -140px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  max-width: 90%;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.edit-lightbox-thumbnails::-webkit-scrollbar {
  display: none;
}

.edit-lightbox-thumb {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #2d2d2d;
  cursor: pointer;
  overflow: hidden;
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.edit-lightbox-thumb:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

.edit-lightbox-thumb.active {
  opacity: 1;
  border-color: #4169E1;
  transform: scale(1.1);
}

.edit-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* ============================================
   IMAGE GALLERY - Responsive
   ============================================ */

@media (max-width: 767px) {
  .edit-images-section.visible {
    padding: 14px 0;
  }
  
  .edit-image-thumbnails {
    gap: 8px;
    padding: 4px 0 4px 15px; /* Reduce left padding from 20px to 15px on mobile */
  }
  
  .edit-image-thumb {
    width: 52px;
    height: 52px;
    min-width: 52px;
    min-height: 52px;
  }
  
  .edit-image-remove-btn {
    width: 18px;
    height: 18px;
    font-size: 12px;
    top: 3px;
    right: 3px;
  }
  
  /* Lightbox on mobile */
  .edit-lightbox-container {
    width: 95%;
    height: 70%;
  }
  
  .edit-lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
  
  .edit-lightbox-prev {
    left: 10px;
  }
  
  .edit-lightbox-next {
    right: 10px;
  }
  
  .edit-lightbox-close {
    top: -48px;
    right: 0;
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
  
  .edit-lightbox-bottom-nav {
    bottom: -55px;
    padding: 8px 16px;
  }
  
  .edit-lightbox-thumbnails {
    bottom: -115px;
    max-width: 95%;
  }
  
  .edit-lightbox-thumb {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 480px) {
  .edit-image-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
  }
  
  .edit-image-end-drop-zone {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 8px;
  }
  
  .end-drop-zone-icon {
    font-size: 20px;
  }
  
  .edit-image-add-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 8px;
  }
  
  .edit-image-add-btn svg {
    width: 20px;
    height: 20px;
  }
  
  /* Empty state on mobile - slightly larger add button */
  .edit-images-section.empty .edit-image-add-btn {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
  }
  
  .edit-images-section.empty .edit-image-add-btn svg {
    width: 28px;
    height: 28px;
  }
  
  .edit-image-remove-btn {
    width: 18px;
    height: 18px;
    font-size: 12px;
    top: 3px;
    right: 3px;
    /* Always visible on mobile for easier touch targets */
    opacity: 0.9;
    transform: scale(1);
  }
  
  .edit-image-thumb:hover .edit-image-remove-btn,
  .edit-image-thumb:focus .edit-image-remove-btn {
    opacity: 1;
    transform: scale(1);
  }
  
  .add-image-spinner {
    width: 20px;
    height: 20px;
  }
  
  .edit-lightbox-thumbnails {
    bottom: -110px;
  }
  
  .edit-lightbox-thumb {
    width: 44px;
    height: 44px;
  }
}

/* Tablet/Desktop - nav buttons outside container */
@media (min-width: 768px) {
  .edit-lightbox-container {
    margin: 0 80px;
  }
}

/* ============================================
   MOBILE BOT PANEL - Split Screen View
   ============================================
   When user clicks AI suggestion buttons or changes category
   on mobile, the bot slides up from the bottom (35vh) and
   the edit UI shrinks to the top (65vh).
   
   Triggered by adding .mobile-bot-panel-visible class to body.
   Bot sends 'close-mobile-bot-panel' event to dismiss.
   
   IMPORTANT: These selectors must have HIGHER specificity than
   the existing mobile styles to override them properly.
   ============================================ */

@media (max-width: 767px) {
  /* 
   * EDIT PANEL: Shrink to 65vh from top
   * Must override: html body div.edit-panel { height: 100vh !important; }
   * Using: html body.mobile-bot-panel-visible div.edit-panel (higher specificity)
   */
  html body.mobile-bot-panel-visible div.edit-panel,
  html body.mobile-bot-panel-visible div.edit-panel.active {
    height: 65vh !important;
    top: 0 !important;
    bottom: auto !important;
    transition: height 0.35s ease-out, transform 0.3s ease-out !important;
  }
  
  /* 
   * WEBCHAT CONTAINER: Transform to bottom panel (35vh)
   * Must override: html body div#webchat-container.edit-active[id="webchat-container"] { width: 0vw !important; }
   * Using same selector pattern with body.mobile-bot-panel-visible prepended (higher specificity)
   */
  html body.mobile-bot-panel-visible div#webchat-container,
  html body.mobile-bot-panel-visible div#webchat-container.edit-active,
  html body.mobile-bot-panel-visible div#webchat-container.edit-active[id="webchat-container"],
  html body.mobile-bot-panel-visible div#webchat-container[id="webchat-container"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100vw !important;
    height: 35vh !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
    border-top: none !important;
  }
  
  /* Disable transition during drag for smooth resize */
  html body.mobile-bot-panel-visible.mobile-bot-dragging div#webchat-container,
  html body.mobile-bot-panel-visible.mobile-bot-dragging div#webchat-container.edit-active {
    transition: none !important;
  }
  
  html body.mobile-bot-panel-visible.mobile-bot-dragging div.edit-panel {
    transition: none !important;
  }
  
  html body.mobile-bot-dragging .mobile-bot-drag-handle {
    transition: none !important;
  }
  
  /* 
   * Visual separator / drag handle - POSITIONED ON BODY
   * This element is appended to body (not webchat-container) because
   * the Botpress iframe has cross-origin restrictions and would cover
   * any elements placed inside the webchat container.
   * 
   * Position: fixed, starts off-screen and slides up with bot panel
   */
  .mobile-bot-drag-handle {
    position: fixed;
    bottom: -28px; /* Start off-screen (below viewport) */
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    z-index: 10001; /* Above everything */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    transition: bottom 0.35s ease-out; /* Match bot panel transition */
  }
  
  /* When bot panel is visible, slide drag handle up to sit at top of bot panel */
  html body.mobile-bot-panel-visible .mobile-bot-drag-handle {
    bottom: 35vh;
  }
  
  /* The actual drag indicator pill */
  .mobile-bot-drag-handle::before {
    content: '';
    width: 48px;
    height: 5px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    transition: background 0.2s ease, width 0.2s ease;
  }
  
  /* Hover/active state for drag handle */
  .mobile-bot-drag-handle:hover::before,
  .mobile-bot-drag-handle:active::before {
    background: rgba(255, 255, 255, 0.6);
    width: 56px;
  }
  
  .mobile-bot-drag-handle:active {
    background: linear-gradient(180deg, #333333 0%, #282828 100%);
  }
  
  /* Ensure Botpress elements fill the webchat container */
  html body.mobile-bot-panel-visible div#webchat-container .bpWebchat,
  html body.mobile-bot-panel-visible div#webchat-container .bpOpen,
  html body.mobile-bot-panel-visible div#webchat-container .bpOpen.bpWebchat {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
  
  /* Ensure webchat-root fills container */
  html body.mobile-bot-panel-visible div#webchat-container #webchat-root,
  html body.mobile-bot-panel-visible div#webchat-container #webchat-root.bpheightfull {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}

/* Smooth transition when closing bot panel */
@media (max-width: 767px) {
  /* Default state (not visible) - ensure smooth transition back */
  html body:not(.mobile-bot-panel-visible) div.edit-panel {
    transition: height 0.35s ease-out !important;
  }
  
  html body:not(.mobile-bot-panel-visible) div#webchat-container {
    transition: height 0.35s ease-out, width 0.35s ease-out !important;
  }
}

/* ========================================
   🔄 HORIZONTAL DRAG: Disable transitions during resize
   ======================================== */
@media (min-width: 768px) {
  /* Disable transitions during drag for smooth resize */
  html body.upload-dragging div#webchat-container,
  html body.upload-dragging div#webchat-container.edit-active {
    transition: none !important;
  }
  
  html body.upload-dragging div.edit-panel,
  html body.upload-dragging div.edit-panel.active {
    transition: none !important;
  }
  
  /* Also disable transitions on Botpress elements during drag */
  html body.upload-dragging .bpWebchat,
  html body.upload-dragging .bpOpen,
  html body.upload-dragging .bpOpen.bpWebchat,
  html body.upload-dragging #webchat-root,
  html body.upload-dragging #webchat-root.bpheightfull {
    transition: none !important;
  }
}

/* ============================================
   📱 MOBILE CUSTOM DROPDOWNS (480px and below)
   ============================================ */
/* Custom dropdowns replace tiny native selects on mobile for better UX */

@media (max-width: 480px) {
  /* Custom dropdown wrapper for mobile */
  .custom-select-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: visible;
  }
  
  .custom-select-wrapper.open {
    z-index: 1001;
  }
  
  /* Allow dropdown menu to overflow parent container */
  .edit-section {
    overflow: visible !important;
  }
  
  /* Hide native select on mobile, show custom dropdown */
  .custom-select-wrapper .edit-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  
  /* Custom dropdown button */
  .custom-select-button {
    position: relative;
    width: 100%;
    padding: 12px 14px;
    padding-right: 36px;
    font-size: 16px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    -webkit-text-size-adjust: 100%;
  }
  
  .custom-select-button-text {
    flex: 1;
    text-align: left;
  }
  
  .custom-select-button:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(65, 105, 225, 0.4);
  }
  
  .custom-select-button:active {
    background: rgba(255, 255, 255, 0.1);
    transform: scale(0.98);
  }
  
  /* 🎨 SELECTION FEEDBACK: Subtle glow animation when option is selected */
  @keyframes selectionGlow {
    0% {
      box-shadow: 0 0 0 0 rgba(65, 105, 225, 0.4);
      border-color: rgba(65, 105, 225, 0.6);
    }
    50% {
      box-shadow: 0 0 8px 2px rgba(65, 105, 225, 0.3);
      border-color: rgba(65, 105, 225, 0.8);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(65, 105, 225, 0);
      border-color: rgba(255, 255, 255, 0.12);
    }
  }
  
  .custom-select-button.selection-confirmed {
    animation: selectionGlow 0.5s ease-out;
  }
  
  /* 🎨 OPTION CLICK FEEDBACK: Quick flash when option is clicked */
  @keyframes optionClick {
    0% {
      background: rgba(65, 105, 225, 0.25);
      transform: scale(0.98);
    }
    50% {
      background: rgba(65, 105, 225, 0.35);
      transform: scale(1);
    }
    100% {
      background: rgba(65, 105, 225, 0.2);
      transform: scale(1);
    }
  }
  
  .custom-select-option.clicked {
    animation: optionClick 0.3s ease-out;
  }
  
  .custom-select-button.disabled {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.4);
    cursor: not-allowed;
    opacity: 0.6;
  }
  
  /* Custom dropdown arrow */
  .custom-select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    margin-top: -4px;
    width: 12px;
    height: 8px;
    pointer-events: none;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: center center;
  }
  
  .custom-select-wrapper.open .custom-select-arrow {
    transform: rotate(180deg);
  }
  
  .custom-select-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  
  /* Custom dropdown menu */
  .custom-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1002;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }

  .custom-select-menu::-webkit-scrollbar {
    width: 6px;
  }

  .custom-select-menu::-webkit-scrollbar-track {
    background: transparent;
  }

  .custom-select-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
  
  .custom-select-wrapper.open .custom-select-menu {
    display: block !important;
  }
  
  /* Custom dropdown option */
  .custom-select-option {
    padding: 14px 16px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: background 0.15s ease;
    min-height: 44px;
    display: flex;
    align-items: center;
    -webkit-tap-highlight-color: transparent;
  }
  
  .custom-select-option:first-child {
    border-radius: 8px 8px 0 0;
  }
  
  .custom-select-option:last-child {
    border-radius: 0 0 8px 8px;
  }
  
  .custom-select-option:hover,
  .custom-select-option:active {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .custom-select-option.selected {
    background: rgba(65, 105, 225, 0.2);
    color: rgba(255, 255, 255, 1);
  }
  
  .custom-select-option.selected::before {
    content: '✓';
    margin-right: 8px;
    color: #4169E1;
    font-weight: 600;
  }
}

/* ============================================
   📋 POLICY MISMATCH MODAL
   Shown inside listing-progress-banner when
   error-refinement.js detects a policy mismatch.
   ============================================ */

.policy-mismatch-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 4px 0;
}

.policy-mismatch-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 2px;
}

.policy-mismatch-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: white;
}

.policy-mismatch-body {
  margin: 0;
  font-size: 13px;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  max-width: 400px;
}

.policy-mismatch-user-action {
  margin: 0;
  font-size: 12px;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  font-style: italic;
  max-width: 380px;
}

/* Policy dropdown row inside the modal */
.policy-mismatch-dropdown-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 360px;
  margin-top: 4px;
}

.policy-mismatch-dropdown-row label {
  font-size: 12px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  min-width: 60px;
  text-align: right;
}

.policy-mismatch-select {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 13px;
  font-family: 'Rubik', sans-serif;
  color: white;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='rgba(255,255,255,0.6)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.policy-mismatch-select:hover {
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.14);
}

.policy-mismatch-select:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
}

.policy-mismatch-select option {
  background: #1e293b;
  color: white;
}

/* Refresh button inside the modal dropdown row */
.policy-mismatch-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.policy-mismatch-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.policy-mismatch-refresh-btn svg {
  stroke: rgba(255, 255, 255, 0.7);
  transition: transform 0.3s ease;
}

.policy-mismatch-refresh-btn:hover svg {
  stroke: rgba(255, 255, 255, 0.9);
}

.policy-mismatch-refresh-btn.refreshing svg {
  animation: policyMismatchSpin 0.8s linear infinite;
}

.policy-mismatch-refresh-btn.refresh-success {
  border-color: rgba(52, 211, 153, 0.5);
  background: rgba(52, 211, 153, 0.15);
}

.policy-mismatch-refresh-btn.refresh-error {
  border-color: rgba(248, 113, 113, 0.5);
  background: rgba(248, 113, 113, 0.15);
}

@keyframes policyMismatchSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Create on eBay link inside the modal */
.policy-mismatch-create-link {
  font-size: 12px;
  font-weight: 500;
  color: rgba(165, 180, 252, 0.85);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  font-family: 'Rubik', sans-serif;
}

.policy-mismatch-create-link:hover {
  color: rgba(199, 210, 254, 1);
  text-decoration: underline;
}

/* Action buttons row */
.policy-mismatch-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 300px;
  margin-top: 6px;
}

.policy-mismatch-retry-btn {
  width: 100%;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #1e293b;
  background: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.policy-mismatch-retry-btn:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.policy-mismatch-retry-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.policy-mismatch-draft-btn {
  background: none;
  border: none;
  font-size: 12px;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s ease;
}

.policy-mismatch-draft-btn:hover {
  color: rgba(255, 255, 255, 0.9);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .policy-mismatch-title {
    font-size: 16px;
  }

  .policy-mismatch-body {
    font-size: 12px;
  }

  .policy-mismatch-dropdown-row {
    flex-direction: column;
    align-items: stretch;
  }

  .policy-mismatch-dropdown-row label {
    text-align: left;
    min-width: auto;
  }
}