/* Custom File Upload UI Styles */
.upload-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: #ffffff;
  z-index: 10000;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* Allow vertical scrolling when hub expands */
  font-family: 'Rubik', sans-serif;
  opacity: 1;
  /* Scrollbar styling — match dark theme */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  /* Container query context — lets header and siblings adapt to panel width */
  container-type: inline-size;
  container-name: upload-panel;
}

.upload-panel::-webkit-scrollbar {
  width: 6px;
}

.upload-panel::-webkit-scrollbar-track {
  background: transparent;
}

.upload-panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.upload-panel::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.45);
}

/* Desktop/tablet horizontal slide - mobile uses vertical peek animation below */
@media (min-width: 768px) {
  .upload-panel {
    transform: translateX(100%);
  }
  
  .upload-panel.active {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 🎬 SEAMLESS TRANSITION: Fade out upload panel while edit panel fades in */
.upload-panel.transitioning {
  opacity: 0;
  transition: transform 0.35s ease-out, opacity 0.35s ease-out;
}

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

.upload-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-bottom: 1px solid #e9ecef;
  min-height: 68px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.upload-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: background-color 0.2s;
  min-height: 44px;
  outline: none; /* Remove focus ring on all viewports */
}

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

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

.upload-context h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #212529;
}

.upload-context p {
  margin: 4px 0 0 0;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  color: #6c757d;
}

.upload-send-btn {
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  color: white;
  border: none;
  padding: 14px 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(65, 105, 225, 0.2);
}

.upload-send-btn:disabled {
  background: linear-gradient(135deg, #dee2e6 0%, #e9ecef 100%);
  color: #6c757d;
  cursor: not-allowed;
  box-shadow: none;
}

.upload-send-btn:not(:disabled):hover {
  background: linear-gradient(135deg, #3557c7 0%, #4a6bef 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(65, 105, 225, 0.3);
}

/* Send button text variants (desktop shows full, mobile shows short) */
.upload-send-btn .send-text-short {
  display: none;
}

.upload-send-btn .send-text-full {
  display: inline;
}

.upload-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  /* Container query context — lets children adapt to the panel's actual width
     rather than the viewport width (important when panel is narrow on desktop) */
  container-type: inline-size;
  container-name: upload-content;
  /* Scrollbar styling — match dark theme used in preferences-panels */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.upload-content::-webkit-scrollbar {
  width: 6px;
}

.upload-content::-webkit-scrollbar-track {
  background: transparent;
}

.upload-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

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

/* Listing Tabs Styles - Dark Theme Integration */
/* Listing Details Section - Between Tabs and Upload Zone */
.listing-details-container {
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.3s ease;
}

.listing-details-row {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  max-width: 500px;
}

.listing-detail-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.detail-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
}

.detail-select {
  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: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  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 12px center;
  padding-right: 36px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.detail-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(65, 105, 225, 0.4);
}

.detail-select: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);
}

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

.detail-select: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;
}

.detail-select:disabled:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

/* Listing Tabs Styles - Dark Theme Integration */
.listing-tabs-container {
  background: #2d2d2d;
  border-bottom: 1px solid #404040;
  padding: 8px 20px 0;
  flex-shrink: 0;
  position: relative;
}

.listing-tabs-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.listing-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
  scroll-behavior: smooth;
  flex: 1;
}

.listing-tabs::-webkit-scrollbar {
  display: none;
}

/* Navigation Arrows */
.tab-nav-arrow {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(65, 105, 225, 0.9);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.tab-nav-arrow:hover {
  background: rgba(65, 105, 225, 1);
  transform: translateY(-50%) scale(1.1);
}

.tab-nav-arrow.left {
  left: 0;
}

.tab-nav-arrow.right {
  right: 0;
}

.tab-nav-arrow.visible {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fade indicators for overflow */
.listing-tabs-container::before,
.listing-tabs-container::after {
  content: '';
  position: absolute;
  top: 8px;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.listing-tabs-container::before {
  left: 20px;
  background: linear-gradient(to right, #2d2d2d, transparent);
}

.listing-tabs-container::after {
  right: 20px;
  background: linear-gradient(to left, #2d2d2d, transparent);
}

.listing-tabs-container.show-left-fade::before {
  opacity: 1;
}

.listing-tabs-container.show-right-fade::after {
  opacity: 1;
}

.listing-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  position: relative;
  min-width: fit-content;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.listing-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(65, 105, 225, 0.3);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.listing-tab.active {
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  border-color: #4169E1;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(65, 105, 225, 0.3);
  transform: translateY(-1px);
}

.tab-label {
  font-weight: 600;
}

.tab-file-count {
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  transition: all 0.2s ease;
}

.listing-tab.active .tab-file-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.listing-tab:hover .tab-file-count {
  background: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.9);
}

.tab-remove-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-left: 2px;
}

.tab-remove-btn:hover {
  background: #dc3545;
  color: #ffffff;
  transform: scale(1.1);
}

.listing-tab.active .tab-remove-btn {
  color: rgba(255, 255, 255, 0.8);
}

.listing-tab.active .tab-remove-btn:hover {
  background: #dc3545;
  color: #ffffff;
}

.add-listing-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  min-width: fit-content;
  white-space: nowrap;
  backdrop-filter: blur(10px);
}

.add-listing-btn:hover {
  background: rgba(65, 105, 225, 0.1);
  border-color: rgba(65, 105, 225, 0.4);
  color: #4169E1;
  transform: translateY(-1px);
}

.add-listing-btn svg {
  transition: transform 0.3s ease;
  opacity: 0.8;
}

.add-listing-btn:hover svg {
  transform: rotate(90deg);
  opacity: 1;
}

.add-listing-btn.disabled,
.add-listing-btn:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  cursor: not-allowed;
  transform: none;
  opacity: 0.6;
}

.add-listing-btn.disabled:hover,
.add-listing-btn:disabled:hover {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
  transform: none;
}

.add-listing-btn.disabled svg,
.add-listing-btn:disabled svg {
  opacity: 0.3;
  transform: none;
}

.add-listing-btn.disabled:hover svg,
.add-listing-btn:disabled:hover svg {
  opacity: 0.3;
  transform: none;
}

/* 🚀 Upgrade CTA state — inviting purple gradient when limit reached */
.add-listing-btn.upgrade-cta {
  background: linear-gradient(135deg, #7C3AED 0%, #6366f1 100%);
  border: 1px solid rgba(124, 58, 237, 0.5);
  border-style: solid;
  color: #ffffff;
  cursor: pointer;
  opacity: 1;
  font-weight: 600;
}

.add-listing-btn.upgrade-cta:hover {
  background: linear-gradient(135deg, #8B5CF6 0%, #7C7CFF 100%);
  border-color: rgba(139, 92, 246, 0.7);
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
}

.add-listing-btn.upgrade-cta svg {
  opacity: 1;
  transform: none;
}

.add-listing-btn.upgrade-cta:hover svg {
  opacity: 1;
  transform: translateY(-1px);
}

.upload-zone {
  border: 2px dashed #dee2e6;
  border-radius: 16px;
  padding: 48px 20px;
  text-align: center;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Scale down upload zone when files are present */
.upload-zone.has-files {
  min-height: 160px;
  padding: 24px 20px;
}

.upload-zone.has-files .upload-icon {
  font-size: 32px;
  padding: 12px;
  margin-bottom: 6px;
}

.upload-zone.has-files h3 {
  font-size: 16px;
  margin-bottom: 4px;
}

.upload-zone.has-files p {
  font-size: 13px;
  margin-bottom: 12px;
  max-width: 240px;
}

.upload-zone.has-files .upload-zone-content {
  gap: 12px;
}

.upload-zone.has-files .browse-btn {
  padding: 8px 16px;
  font-size: 13px;
}

.upload-zone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(65, 105, 225, 0.02) 0%, rgba(65, 105, 225, 0.08) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: #4169E1;
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(65, 105, 225, 0.15);
}

.upload-zone:hover::before,
.upload-zone.drag-over::before {
  opacity: 1;
}

.upload-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.upload-icon {
  color: #6c757d;
  transition: all 0.3s ease;
  font-size: 48px;
  background: rgba(108, 117, 125, 0.1);
  border-radius: 50%;
  padding: 20px;
  margin-bottom: 8px;
}

.upload-zone:hover .upload-icon,
.upload-zone.drag-over .upload-icon {
  color: #4169E1;
  background: rgba(65, 105, 225, 0.1);
  transform: translateY(-4px) scale(1.05);
}

.upload-zone h3 {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #212529;
  line-height: 1.3;
}

.upload-zone p {
  margin: 0 0 20px 0;
  font-size: 15px;
  font-family: 'Rubik', sans-serif;
  color: #6c757d;
  line-height: 1.5;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
}

/* Disabled upload zone styles - Dark theme to match UI */
.upload-zone.disabled {
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #252525 0%, #2d2d2d 100%);
  cursor: not-allowed;
  pointer-events: none;
}

.upload-zone.disabled::before {
  display: none;
}

.upload-zone.disabled:hover {
  border-color: rgba(255, 255, 255, 0.15);
  border-style: dashed;
  transform: none;
  box-shadow: none;
  background: linear-gradient(135deg, #252525 0%, #2d2d2d 100%);
}

.upload-zone.disabled .upload-icon {
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.upload-zone.disabled:hover .upload-icon {
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
  transform: none;
}

.upload-zone.disabled h3 {
  color: rgba(255, 255, 255, 0.4);
}

.upload-zone.disabled p {
  color: rgba(255, 255, 255, 0.3);
}

.upload-zone.disabled .browse-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  box-shadow: none;
}

.upload-zone.disabled .browse-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
  box-shadow: none;
}

.browse-btn {
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  color: white;
  border: none;
  padding: 14px 28px;
  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(65, 105, 225, 0.2);
  position: relative;
  overflow: hidden;
}

.browse-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.browse-btn:hover {
  background: linear-gradient(135deg, #3557c7 0%, #4a6bef 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(65, 105, 225, 0.3);
}

.browse-btn:hover::before {
  left: 100%;
}

.file-preview-container {
  display: none;
}

.file-preview-container.has-files {
  display: block;
}

.file-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.file-preview-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #212529;
}

.file-count {
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  color: #6c757d;
  background: #e9ecef;
  padding: 4px 12px;
  border-radius: 16px;
}

.file-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 12px;
  padding: 6px;
}

.file-preview-item {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  cursor: grab;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f0f0;
}

.file-preview-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #4169E1;
}

.file-preview-item.dragging {
  opacity: 0.5;
  transform: rotate(5deg);
  cursor: grabbing;
}

/* 📱 Touch dragging styles for mobile */
.file-preview-item.touch-dragging {
  opacity: 0.6;
  transform: scale(0.95) rotate(3deg);
  z-index: 1000;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transition: none; /* Disable transitions during drag for immediate feedback */
}

/* Drop target indicator for touch drag */
.file-preview-item.drop-target {
  transform: scale(1.05);
  border-color: rgba(65, 105, 225, 0.8);
  box-shadow: 0 0 20px rgba(65, 105, 225, 0.5);
  background-color: rgba(65, 105, 225, 0.1);
}

.file-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-preview-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 12px;
  text-align: center;
  padding: 8px;
}

.file-preview-item:hover .file-preview-overlay {
  opacity: 1;
}

.file-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}

.file-remove-btn:hover {
  background: #dc3545;
}

.upload-progress {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #e9ecef;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.progress-fill {
  height: 100%;
  background: #4169E1;
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}

.progress-text {
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  color: #6c757d;
  font-weight: 500;
}



/* Tablet & Desktop: Hide "Back to Chat" button (chat is visible alongside panel)
   and truly center the title regardless of Send button width or panel resize */
@media (min-width: 768px) {
  .upload-back-btn {
    display: none;
  }

  .upload-header {
    position: relative;
  }

  .upload-context {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    pointer-events: none; /* Clicks pass through to send button beneath */
    margin: 0;
  }

  .upload-send-btn {
    margin-left: auto; /* Push to right edge (only flow child after back-btn hidden) */
    position: relative;
    z-index: 1; /* Render above the absolute-positioned title */
  }
}

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

  .upload-panel.active {
    transform: translateX(0);
  }

  /* Ultra-specific selectors to override main app CSS and Botpress external stylesheet */
  html body div#webchat-container.upload-active {
    width: calc(100vw - var(--upload-panel-default-width)) !important; /* Dynamically calculated from DRAG_CONFIG.defaultPanelWidthVw */
    transition: width 0.3s ease-out !important;
    position: relative !important;
    max-width: var(--upload-bot-max-width-tablet) !important; /* Dynamically set from DRAG_CONFIG.tablet.maxWidthVw */
  }

  /* Override Botpress webchat positioning for tablet */
  html body #webchat-container.upload-active .bpWebchat {
    width: 100% !important;
    right: 0 !important;
    position: absolute !important;
  }

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

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

  .upload-header {
    padding: 16px 24px;
  }

  .file-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
  }

  .upload-zone.has-files {
    min-height: 140px;
    padding: 20px 20px;
  }

  .upload-zone.has-files .upload-icon {
    font-size: 28px;
    padding: 10px;
  }

  .upload-zone.has-files h3 {
    font-size: 15px;
  }

  .upload-zone.has-files p {
    font-size: 12px;
    margin-bottom: 10px;
  }
}

/* Desktop Specific Styles (> 1024px) */
@media (min-width: 1025px) {
  .upload-panel {
    /* ⭐ SINGLE SOURCE OF TRUTH: See CustomUploadUI.DRAG_CONFIG in upload-ui.js */
    width: var(--upload-panel-default-width); /* Dynamically set from DRAG_CONFIG.defaultPanelWidthVw */
    min-width: var(--upload-panel-min-width-desktop-px); /* Dynamically set from DRAG_CONFIG.desktop.minWidthPx */
    /*max-width: 50vw;*/ /* OLD VALUE - Allow up to 50vw for larger screens */
    max-width: var(--upload-panel-max-width-desktop); /* Dynamically set from DRAG_CONFIG.desktop.maxWidthVw */
    right: 0;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  }

  .upload-panel.active {
    transform: translateX(0);
  }

  /* Ultra-specific selectors to override main app CSS and Botpress external stylesheet */
  html body div#webchat-container.upload-active {
    /* ⭐ SINGLE SOURCE OF TRUTH: Webchat takes remaining space (100vw - panel width) */
    width: var(--upload-bot-default-width) !important; /* Dynamically calculated from DRAG_CONFIG.defaultPanelWidthVw */
    /*min-width: 50vw !important; /* OLD VALUE - matches drag min (upload panel max 50vw) */
    min-width: var(--upload-bot-min-width-desktop) !important; /* Dynamically set from DRAG_CONFIG.desktop.minWidthVw */
    transition: width 0.3s ease-out !important;
    position: relative !important;
    max-width: var(--upload-bot-max-width-desktop) !important; /* Dynamically set from DRAG_CONFIG.desktop.maxWidthVw */
  }

  /* Override Botpress webchat positioning for desktop */
  html body #webchat-container.upload-active .bpWebchat {
    width: 100% !important;
    right: 0 !important;
    position: absolute !important;
    left: 0 !important;
  }

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

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

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

  .upload-content {
    padding: 32px;
  }

  .file-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
  }

  .upload-zone {
    padding: 50px 32px;
  }

  .upload-zone.has-files {
    min-height: 180px;
    padding: 28px 32px;
  }

  .upload-zone.has-files .upload-icon {
    font-size: 30px;
    padding: 11px;
  }

  .upload-zone.has-files h3 {
    font-size: 17px;
  }

  .upload-zone.has-files p {
    font-size: 13px;
    margin-bottom: 11px;
  }
}

/* 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.upload-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.upload-active .bpw-layout,
#webchat-container.upload-active .bpw-chat-container,
#webchat-container.upload-active .bpw-header-container,
#webchat-container.upload-active .bpw-header {
  width: 100% !important;
  max-width: 100% !important;
}

/* Mobile Specific Styles (< 768px) */
@media (max-width: 767px) {
  /* Ultra-specific mobile selector to override all other styles */
  html body div.upload-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;
    overflow-y: auto !important; /* Allow scrolling when hub expands */
  }

  /* Only apply horizontal slide when NOT in peek mode */
  html body:not(.mobile-upload-peek-visible) div.upload-panel.active {
    transform: translate3d(0, 0, 0) !important; /* Explicit 3D transform prevents Y-axis interference */
  }

  /* Mobile: Use RESIZING approach like tablet/desktop instead of overlay */
  html body div#webchat-container.upload-active {
    width: 0vw !important; /* Shrink bot to zero width instead of sliding out */
    transition: width 0.3s ease-out !important;
    overflow: hidden !important; /* Hide any overflow */
  }

  .back-text {
    display: none;
  }

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

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

  .upload-context p {
    font-size: 13px;
  }

  .upload-content {
    padding: 16px;
  }

  .upload-zone {
    padding: 30px 16px;
    min-height: 160px;
  }

  .upload-zone.has-files {
    min-height: 120px;
    padding: 18px 16px;
  }

  .upload-zone h3 {
    font-size: 16px;
  }

  .upload-zone.has-files h3 {
    font-size: 14px;
    margin-bottom: 3px;
  }

  .upload-zone.has-files .upload-icon {
    font-size: 24px;
    padding: 8px;
    margin-bottom: 4px;
  }

  .upload-zone.has-files p {
    font-size: 11px;
    margin-bottom: 8px;
    max-width: 200px;
  }

  .upload-zone.has-files .upload-zone-content {
    gap: 8px;
  }

  .upload-zone.has-files .browse-btn {
    padding: 6px 12px;
    font-size: 11px;
  }

  .file-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 8px;
  }

  /* 🚫 MOBILE ONLY: Hide upload zone completely when exhausted to maximize banner space */
  .upload-panel.usage-exhausted .upload-zone {
    display: none;
  }

}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .upload-panel {
    background: #1a1a1a;
    color: #ffffff;
  }

  .upload-header {
    background: #2d2d2d;
    border-bottom-color: #404040;
  }

  .upload-context h2 {
    color: #ffffff;
  }

  .upload-context p {
    color: #a0a0a0;
  }

  .upload-zone {
    background: #2d2d2d;
    border-color: #404040;
  }

  .upload-zone:hover,
  .upload-zone.drag-over {
    background: rgba(65, 105, 225, 0.1);
  }

  .file-preview-item {
    background: #2d2d2d;
  }

  .upload-progress {
    background: #2d2d2d;
  }

  .progress-bar {
    background: #404040;
  }

  .file-count {
    background: #404040;
    color: #a0a0a0;
  }

  .listing-tabs-container {
    background: #2d2d2d;
    border-bottom-color: #404040;
  }
}

/* ========================================
   MOBILE SPECIFIC STYLES (< 768px) 
   ⚠️  CRITICAL: These styles MUST be at the end 
   to override tablet/desktop styles above
   ======================================== */
@media (max-width: 767px) {
  /* 🔥 ULTRA-SPECIFIC mobile selector to override ALL other styles */
  html body div.upload-panel,
  html body div.upload-panel.active {
    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;
    overflow-y: auto !important; /* Allow scrolling when hub expands */
    /* Removed background override to allow proper header/content styling */
  }

  /* 🔥 CRITICAL: Mobile panel visibility - ONLY when NOT in peek mode */
  html body:not(.mobile-upload-peek-visible) div.upload-panel.active {
    transform: translate3d(0, 0, 0) !important; /* Explicit 3D transform prevents Y-axis interference */
    transition: transform 0.3s ease-out !important;
  }

  /* 🔥 CRITICAL: Mobile panel hidden state - ONLY when NOT in peek mode */
  html body:not(.mobile-upload-peek-visible) div.upload-panel:not(.active) {
    transform: translate3d(100%, 0, 0) !important; /* Explicit 3D transform prevents Y-axis interference */
    transition: transform 0.3s ease-out !important; /* Smooth slide-out when closing from full-screen mobile */
  }
  
  /* OVERRIDE: Morphing class (Edit → Upload) uses fade, not slide */
  html body.mobile-upload-peek-visible div.upload-panel.morphing {
    transform: translate3d(0, 0, 0) !important; /* Stay in place */
    opacity: 0 !important; /* Start invisible */
    transition: opacity 0.3s ease-in !important;
    height: 100vh !important;
  }
  
  html body.mobile-upload-peek-visible div.upload-panel.morphing.active {
    transform: translate3d(0, 0, 0) !important; /* Stay in place */
    opacity: 1 !important; /* Fade in */
    transition: opacity 0.3s ease-in !important;
    height: 100vh !important;
  }

  /* 🔥 Mobile webchat container - shrink when upload panel is active */
  html body div#webchat-container.upload-active {
    width: 0vw !important;
    overflow: hidden !important;
  }
  
  /* Hide Botpress elements completely on mobile when upload panel is active */
  html body:not(.mobile-bot-panel-visible) div#webchat-container.upload-active .bpWebchat,
  html body:not(.mobile-bot-panel-visible) div#webchat-container.upload-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;
  }

  /* Mobile UI adjustments */
  .back-text {
    display: none !important;
  }

  .upload-header {
    padding: 12px 16px !important;
  }

  .upload-context {
    margin: 0 16px !important;
    transform: translateX(12px) !important;
  }

  .upload-context h2 {
    font-size: 16px !important;
  }

  .upload-context p {
    font-size: 13px !important;
  }

  .upload-content {
    padding: 16px !important;
  }

  .upload-zone {
    padding: 30px 16px !important;
  }

  .file-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)) !important;
    gap: 12px !important;
  }

  /* 📱 Mobile Send button - show short text and increase font size */
  .upload-send-btn {
    font-size: 15px !important;
    padding: 12px 20px !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    white-space: nowrap;
  }
  
  .upload-send-btn .send-text-full {
    display: none;
  }
  
  .upload-send-btn .send-text-short {
    display: inline;
  }

  /* Debug styles removed - panel should now be fully visible */
}

/* Image Lightbox Styles */
.image-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

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

.lightbox-container {
  position: relative;
  width: 90%;
  height: 80%;
  max-width: 800px;
  max-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: transform 0.3s ease;
}

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

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

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

.lightbox-nav:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

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

.lightbox-nav:disabled:hover {
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

/* Hide the right-side counter completely */
.image-lightbox .lightbox-counter {
  display: none !important;
}

/* Desktop bottom navigation styles */
.lightbox-bottom-nav {
  position: absolute;
  bottom: -70px;
  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);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-nav-prev,
.bottom-nav-next {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  transition: all 0.2s ease;
}

.bottom-nav-prev:hover,
.bottom-nav-next:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.bottom-nav-prev:disabled,
.bottom-nav-next:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.bottom-nav-prev:disabled:hover,
.bottom-nav-next:disabled:hover {
  transform: none;
  background: rgba(255, 255, 255, 0.2);
}

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

.lightbox-thumbnails {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

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

.lightbox-thumbnail {
  width: 60px;
  height: 60px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  /* Optimized transitions - only animate specific properties */
  transition: opacity 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  border: 2px solid transparent;
  flex-shrink: 0;
  background: #2d2d2d; /* Consistent background to prevent white flicker */
  /* Performance optimizations */
  image-rendering: -webkit-optimize-contrast;
  will-change: opacity, transform, border-color; /* Hint browser for GPU acceleration */
  backface-visibility: hidden; /* Prevent flickering during transforms */
  -webkit-backface-visibility: hidden;
  transform: translateZ(0); /* Force hardware acceleration */
}

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

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

/* ============================================
   📋 COLLAPSIBLE BUSINESS POLICIES SECTION
   ============================================ */

.listing-policies-collapsible {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  margin: 16px 0 0 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Toggle Header */
.policies-toggle-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.policies-toggle-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.policies-toggle-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  font-family: 'Rubik', sans-serif;
}

.policies-toggle-icon {
  font-size: 16px;
  line-height: 1;
}

.policies-toggle-label {
  white-space: nowrap;
}

/* Preview Badges Container */
.policies-preview-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0; /* Allow flex shrinking but not below content */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  container-type: inline-size;
  container-name: badges;
}

.policies-preview-badges::-webkit-scrollbar {
  display: none;
}

.policy-preview-badge {
  display: inline-block; /* Changed from inline-flex to support text-overflow */
  vertical-align: middle; /* Maintain alignment */
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  font-family: 'Rubik', sans-serif;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4; /* Ensure proper vertical centering */
}

/* Responsive badge display: individual badges on wide, count on narrow */
.policy-preview-badge-count {
  display: none; /* Hide count badge by default */
  white-space: nowrap;
  flex-shrink: 0;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
}

/* Container query: When badges container is narrow (< 350px), switch to count badge */
@container badges (max-width: 350px) {
  .policy-preview-badge-individual {
    display: none;
  }
  
  .policy-preview-badge-count {
    display: inline-flex;
  }
  
  /* Count badge is small enough to always fit -- don't clip it */
  .policies-preview-badges {
    overflow: visible;
  }
}

/* Fallback for browsers without container query support: use viewport media query */
@supports not (container-type: inline-size) {
  @media (max-width: 600px) {
    .policy-preview-badge-individual {
      display: none;
    }
    
    .policy-preview-badge-count {
      display: inline-flex;
    }
    
    .policies-preview-badges {
      overflow: visible;
    }
  }
}

/* Toggle Button */
.policies-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.policies-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.policies-toggle-btn svg {
  stroke: rgba(255, 255, 255, 0.9);
  transition: transform 0.3s ease;
}

/* Expanded State */
.listing-policies-collapsible.expanded .policies-toggle-btn svg {
  transform: rotate(180deg);
}

/* ── Refresh Policies Button ── */
.policies-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.policies-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

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

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

.policies-refresh-btn.refreshing svg {
  animation: spin-refresh 0.8s linear infinite;
}

.policies-refresh-btn.refresh-success {
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.1);
}

.policies-refresh-btn.refresh-success svg {
  stroke: rgba(74, 222, 128, 0.9);
}

.policies-refresh-btn.refresh-error {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.1);
}

.policies-refresh-btn.refresh-error svg {
  stroke: rgba(248, 113, 113, 0.9);
}

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

/* ── Policy Label Row (label + "Create" link) ── */
.policy-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.policy-create-link {
  font-size: 11px;
  font-weight: 500;
  color: rgba(129, 140, 248, 0.7);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
  white-space: nowrap;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Rubik', sans-serif;
}

.policy-create-link:hover {
  color: rgba(165, 180, 252, 1);
}

.policy-create-link.active {
  color: rgba(248, 113, 113, 0.8);
}

/* ── Create Location Form ── */
.create-location-form {
  margin-top: 10px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.create-location-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.create-location-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-family: 'Rubik', sans-serif;
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
}

.create-location-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.create-location-input:focus {
  border-color: rgba(129, 140, 248, 0.5);
}

.create-location-input-short {
  max-width: 100%;
}

.create-location-error {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  border-radius: 6px;
  color: rgba(248, 113, 113, 0.9);
  font-size: 12px;
  font-family: 'Rubik', sans-serif;
}

.create-location-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.create-location-submit-btn {
  padding: 7px 14px;
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 6px;
  color: rgba(199, 210, 254, 1);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Rubik', sans-serif;
}

.create-location-submit-btn:hover {
  background: rgba(99, 102, 241, 0.3);
}

.create-location-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.create-location-cancel-btn {
  padding: 7px 14px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: 'Rubik', sans-serif;
}

.create-location-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.8);
}

/* Expandable Content */
.policies-expandable-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  border-top: 1px solid transparent;
}

.listing-policies-collapsible.expanded .policies-expandable-content {
  max-height: 600px; /* Increased to accommodate create location form */
  padding: 16px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Policy Row Inside Collapsible */
.policies-expandable-content .listing-policies-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 100%;
}

/* Ensure grid items can shrink properly */
.policies-expandable-content .listing-detail-group {
  min-width: 0;
}

/* ── Policy Apply Mode Toggle (This Listing / All Listings) ── */
.policy-apply-toggle {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.policy-apply-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  position: relative;
}

.policy-apply-btn-icon {
  font-size: 13px;
  line-height: 1;
}

.policy-apply-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.policy-apply-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.6);
}

.policy-apply-btn:active {
  transform: scale(0.97);
}

/* "All Listings" active state — indigo accent */
.policy-apply-toggle.all-listings-active {
  border-color: rgba(129, 140, 248, 0.3);
  background: rgba(99, 102, 241, 0.06);
}

.policy-apply-toggle.all-listings-active .policy-apply-btn[data-mode="all-listings"].active {
  background: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
  box-shadow: 0 1px 6px rgba(99, 102, 241, 0.2);
}

/* Hint text below toggle */
.policy-apply-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-align: center;
  margin: 6px 0 12px 0;
  transition: color 0.3s ease;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.2px;
  line-height: 1.3;
}

.policy-apply-hint.all-listings-active {
  color: rgba(165, 180, 252, 0.7);
}

/* Tablet Responsive Adjustments - Switch to single column for policies */
@media (max-width: 950px) {
  .policies-expandable-content .listing-policies-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .policy-apply-btn {
    padding: 8px 10px;
    font-size: 12px;
  }
}

/* Listing Details Responsive Adjustments */
@media (max-width: 768px) {
  .listing-details-container {
    padding: 12px 16px;
  }
  
  .listing-details-row {
    gap: 12px;
  }
  
  .detail-label {
    font-size: 12px;
  }
  
  .detail-select {
    padding: 12px 14px;
    font-size: 16px; /* Larger font for mobile readability */
    padding-right: 36px;
    min-height: 44px; /* iOS recommended touch target size */
    -webkit-text-size-adjust: 100%; /* Prevent iOS text shrinking */
    -webkit-appearance: none;
    appearance: none;
  }
  
  /* Style dropdown options for better mobile readability */
  .detail-select option {
    font-size: 16px;
    padding: 12px 14px;
    min-height: 44px;
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.95);
  }
  
  /* Custom dropdown wrapper for mobile */
  .custom-select-wrapper {
    position: relative;
    width: 100%;
    z-index: 1;
    overflow: visible; /* Override parent overflow: hidden */
  }
  
  .custom-select-wrapper.open {
    z-index: 1001;
  }
  
  /* Allow dropdown menu to overflow parent container */
  .listing-detail-group {
    overflow: visible !important;
  }
  
  /* Hide native select on mobile, show custom dropdown */
  .custom-select-wrapper .detail-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; /* Half of arrow height (8px / 2) for perfect centering */
    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;
  }
  
  /* Collapsible policies on mobile */
  .listing-policies-collapsible {
    margin: 12px 0 0 0;
  }
  
  .policies-toggle-header {
    padding: 12px 14px;
  }
  
  .policies-toggle-title {
    font-size: 13px;
  }
  
  .policies-preview-badges {
    gap: 4px;
    padding: 0 6px;
  }
  
  .policy-preview-badge {
    font-size: 10px;
    padding: 2px 6px;
    max-width: 120px; /* Smaller on mobile */
  }
  
  .policies-expandable-content .listing-policies-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .listing-policies-collapsible.expanded .policies-expandable-content {
    max-height: 720px; /* More room for single-column layout + toggle + create form */
    padding: 14px 14px;
  }
}

@media (max-width: 480px) {
  .listing-details-row {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
  }
  
  .listing-detail-group {
    flex: 1;
    min-width: calc(50% - 4px);
  }
  
  /* Duration field takes full width when visible */
  #listing-duration-group {
    flex-basis: 100%;
    min-width: 100%;
  }

  /* 📱 Extra-small screen Send button optimization */
  .upload-send-btn {
    font-size: 14px !important;
    padding: 10px 18px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    white-space: nowrap;
  }
  
  .upload-send-btn .send-text-full {
    display: none;
  }
  
  .upload-send-btn .send-text-short {
    display: inline;
  }
}

/* Mobile Listing Tabs Adjustments */
@media (max-width: 767px) {
  .listing-tabs-container {
    padding: 8px 16px 0;
  }
  
  .listing-tabs {
    gap: 6px;
  }
  
  .listing-tab {
    padding: 8px 12px;
    font-size: 13px;
    gap: 6px;
  }
  
  .tab-file-count {
    padding: 1px 6px;
    font-size: 11px;
    min-width: 18px;
  }
  
  .tab-remove-btn {
    width: 18px;
    height: 18px;
    font-size: 14px;
    margin-left: 2px;
  }
  
  .add-listing-btn {
    padding: 8px 12px;
    font-size: 13px;
    gap: 4px;
  }
  
  .add-listing-btn svg {
    width: 14px;
    height: 14px;
  }
}

/* Mobile Lightbox Adjustments */
@media (max-width: 767px) {
  .lightbox-container {
    width: 95%;
    height: 70%;
  }
  
  .lightbox-close {
    top: -40px;
    right: -10px;
    width: 36px;
    height: 36px;
    font-size: 18px;
  }
  
  .lightbox-nav {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  
  .lightbox-prev {
    left: 10px;
  }
  
  .lightbox-next {
    right: 10px;
  }
  
  /* Mobile bottom navigation adjustments */
  .lightbox-bottom-nav {
    bottom: -60px;
    padding: 8px 16px;
    border-radius: 20px;
  }
  
  .bottom-nav-prev,
  .bottom-nav-next {
    width: 30px;
    height: 30px;
    font-size: 14px;
  }
  
  .nav-counter {
    font-size: 13px;
    min-width: 55px;
  }
  
  .lightbox-thumbnails {
    bottom: -130px;
    gap: 6px;
  }
  
  .lightbox-thumbnail {
    width: 50px;
    height: 50px;
  }
}

/* ============================================
   📊 DASHBOARD OVERLAY
   Full dashboard view as overlay (no redirect)
   ============================================ */
.dashboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10002; /* Above lightbox (10001) */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  backdrop-filter: blur(12px);
  padding: 20px;
}

.dashboard-overlay.active {
  opacity: 1;
  visibility: visible;
}

.dashboard-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 90vh;
  max-height: 900px;
  background: #121212;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.dashboard-overlay.active .dashboard-container {
  transform: translateY(0);
}

/* Dashboard Header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: linear-gradient(135deg, #1E1E1E 0%, #2a2a2a 100%);
  border-bottom: 1px solid #333;
  flex-shrink: 0;
}

.dashboard-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #4169E1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.dashboard-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

/* Dashboard Content Area */
.dashboard-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  background: #121212;
}

.dashboard-content::-webkit-scrollbar {
  width: 8px;
}

.dashboard-content::-webkit-scrollbar-track {
  background: #1E1E1E;
}

.dashboard-content::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

.dashboard-content::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Responsive Dashboard Overlay */
@media (max-width: 767px) {
  .dashboard-overlay {
    padding: 0;
  }
  
  .dashboard-container {
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
  
  .dashboard-header {
    padding: 16px 20px;
  }
  
  .dashboard-header h2 {
    font-size: 18px;
  }
  
  .dashboard-content {
    padding: 16px;
  }
}

/* ============================================
   🎉 LISTING SUCCESS BANNER
   ============================================ */
.listing-success-banner {
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  border-radius: 12px;
  padding: 16px 20px 20px 20px;
  margin: 8px 4px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 4px 15px rgba(65, 105, 225, 0.3);
  animation: successBannerSlideIn 0.4s ease-out;
  position: relative;
  overflow: hidden;
  flex-shrink: 0; /* Prevent flex from squeezing banner — scroll parent instead */
}

@keyframes successBannerSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle shimmer effect */
.listing-success-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: successShimmer 2s ease-in-out infinite;
}

@keyframes successShimmer {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.success-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.success-banner-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.success-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.success-banner-title {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.success-banner-dismiss {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.success-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(1.1);
}

/* Action buttons row */
.success-banner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.success-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  transition: all 0.2s ease;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.success-banner-link:hover {
  background: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.success-banner-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* View Details toggle button (for multiple listings) */
.success-banner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.success-banner-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

.success-banner-toggle svg {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}

.success-banner-toggle.expanded svg {
  transform: rotate(180deg);
}

/* ============================================
   LISTING PREFERENCES BANNER
   ============================================ */

.listing-preferences-banner {
  background: linear-gradient(135deg, #2C3E50 0%, #34495E 100%);
  border-radius: 12px;
  margin: 16px 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  /* Enable container queries to detect narrow widths (for draggable panel) */
  container-type: inline-size;
  container-name: hub-banner;
}

.listing-preferences-banner.expanded {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* Preferences Header (Collapsible) */
.preferences-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  min-height: 56px;
  cursor: pointer;
  transition: background 0.2s ease;
  user-select: none;
}

.preferences-header:hover {
  background: rgba(255, 255, 255, 0.05);
}

.preferences-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  font-family: 'Rubik', sans-serif;
  line-height: 1.4;
}

.preferences-icon {
  width: 20px;
  height: 20px;
  stroke: rgba(255, 255, 255, 0.9);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Badges Container */
.preferences-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  margin-left: auto;
  min-height: 24px;
}

.pref-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  white-space: nowrap;
}

.pref-badge-drafts {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  color: #1a1a1a;
  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

/* Toggle Button */
.preferences-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.preferences-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.preferences-toggle svg {
  width: 18px;
  height: 18px;
  stroke: rgba(255, 255, 255, 0.9);
  transition: transform 0.3s ease;
}

.listing-preferences-banner.expanded .preferences-toggle svg {
  transform: rotate(180deg);
}

/* Preferences Content (Expandable) */
.preferences-content {
  max-height: 0;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: max-height 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
  position: relative;
  padding-bottom: 0; /* No padding when closed */
}

.listing-preferences-banner.expanded .preferences-content {
  max-height: 40vh; /* Default height when expanded - JS can override during drag */
  border-top-color: rgba(255, 255, 255, 0.1);
  transition: max-height 0.1s ease-out; /* Smooth transition for drag */
  overflow: hidden; /* Prevent content from scrolling - only panels scroll */
  padding-bottom: 16px; /* Make room for drag handle at bottom */
}

/* Drag Handle for All Viewports */
.preferences-drag-handle {
  display: none; /* Hidden by default, only shown when expanded */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 16px;
  cursor: grab;
  touch-action: none;
  z-index: 10;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  user-select: none;
  -webkit-user-select: none;
}

/* Show drag handle when hub is expanded (all viewports) */
.listing-preferences-banner.expanded .preferences-drag-handle {
  display: flex;
}

/* Hide drag handle when hub is closed */
.listing-preferences-banner:not(.expanded) .preferences-drag-handle {
  display: none;
}

.preferences-drag-handle:active {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.08);
}

.drag-handle-bar {
  width: 32px;
  height: 2px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 1px;
  transition: background 0.2s ease;
  pointer-events: none;
}

.preferences-drag-handle:active .drag-handle-bar {
  background: rgba(255, 255, 255, 0.7);
}

/* Preferences Tabs */
.preferences-tabs {
  display: flex;
  gap: 0;
  padding: 12px 18px 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  /* Hide scrollbar by default */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.preferences-tabs::-webkit-scrollbar {
  display: none;
}

.preferences-tab {
  display: flex;
  align-items: center;
  justify-content: center; /* Center content within each tab */
  gap: 6px;
  padding: 10px 16px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  white-space: nowrap; /* Prevent text wrapping */
  flex: 1; /* Distribute tabs evenly across full width */
  min-width: 0; /* Allow flex items to shrink below content size if needed */
}

.preferences-tab:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
}

.preferences-tab.active {
  color: #4169E1;
  border-bottom-color: #4169E1;
}

.preferences-tab .tab-icon {
  font-size: 14px;
}

.preferences-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: #F59E0B;
  color: #1a1a1a;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
}

/* ============================================
   CONTAINER QUERY: Narrow Hub Banner
   When banner width < 500px, enable horizontal scroll
   ============================================ */
@container hub-banner (max-width: 500px) {
  .preferences-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 14px 0 14px;
  }
  
  .preferences-tab {
    padding: 8px 12px;
    font-size: 12px;
    gap: 5px;
    flex: 0 0 auto; /* Override flex: 1 - allow tabs to size based on content for scrolling */
    justify-content: flex-start; /* Left-align content when scrolling */
  }
  
  .preferences-tab .tab-icon {
    font-size: 13px;
  }
}

/* Fallback for browsers without container query support */
@supports not (container-type: inline-size) {
  @media (max-width: 550px) {
    .preferences-tabs {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding: 10px 14px 0 14px;
    }
    
    .preferences-tab {
      padding: 8px 12px;
      font-size: 12px;
      gap: 5px;
      white-space: nowrap;
      flex: 0 0 auto; /* Override flex: 1 - allow tabs to size based on content for scrolling */
      justify-content: flex-start; /* Left-align content when scrolling */
    }
    
    .preferences-tab .tab-icon {
      font-size: 13px;
    }
  }
}


/* ============================================
   CONTAINER QUERY: Narrow Panel — Header & Hub
   When the upload panel itself is very narrow (e.g., dragged small
   on desktop), compact the header and hub header row so nothing
   gets clipped.
   ============================================ */

/* Compact header when panel is narrow */
@container upload-panel (max-width: 400px) {
  .upload-header {
    padding: 10px 12px;
    min-height: 48px;
    gap: 6px;
  }

  /* Show short "Send" text instead of "Send to Bot" */
  .upload-send-btn .send-text-full {
    display: none;
  }

  .upload-send-btn .send-text-short {
    display: inline;
  }

  .upload-send-btn {
    padding: 8px 14px;
    font-size: 13px;
    min-height: 38px;
    border-radius: 8px;
  }

  .upload-back-btn {
    padding: 6px 8px;
    font-size: 14px;
    min-height: 38px;
    gap: 4px;
  }

  /* Hide "Back to Chat" text, keep arrow */
  .upload-back-btn .back-text {
    display: none;
  }

  .upload-context {
    margin: 0 8px;
  }

  .upload-context h2 {
    font-size: 15px;
  }

  .upload-context p {
    font-size: 12px;
  }
}

/* Compact hub header row when banner is narrow */
@container hub-banner (max-width: 350px) {
  .preferences-header {
    padding: 10px 12px;
    min-height: 44px;
    gap: 8px;
  }

  .preferences-title {
    font-size: 13px;
    gap: 6px;
    flex-shrink: 0;
  }

  .preferences-icon {
    width: 16px;
    height: 16px;
  }

  .preferences-badges {
    flex-wrap: wrap;
    gap: 4px;
    overflow: hidden;
    min-width: 0;
  }

  .pref-badge {
    padding: 2px 7px;
    font-size: 11px;
    gap: 4px;
  }

  .preferences-toggle {
    width: 24px;
    height: 24px;
  }

  .preferences-toggle svg {
    width: 14px;
    height: 14px;
  }
}

/* Preferences Panels */
.preferences-panels {
  position: relative;
  /* Enable scrolling when hub is expanded - JS will set max-height dynamically */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar styling */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.preferences-panels::-webkit-scrollbar {
  width: 6px;
}

.preferences-panels::-webkit-scrollbar-track {
  background: transparent;
}

.preferences-panels::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.preferences-panel {
  display: none;
  padding: 18px;
  opacity: 0;
  transition: opacity 0.2s ease;
  /* NOTE: overflow is intentionally NOT set here.
     The parent .preferences-panels handles scrolling.
     Setting overflow here would break position:sticky on child elements. */
}

.preferences-panel.active {
  display: block;
  opacity: 1;
}

/* ============================================
   MARKETPLACES PANEL
   ============================================ */

.marketplace-section {
  padding: 4px 0;
}

.marketplace-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.marketplace-option:hover:not(.disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(65, 105, 225, 0.4);
  transform: translateX(2px);
}

.marketplace-option.active {
  background: rgba(65, 105, 225, 0.15);
  border-color: rgba(65, 105, 225, 0.5);
}

.marketplace-option.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.marketplace-icon {
  font-size: 28px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  flex-shrink: 0;
}

.marketplace-info {
  flex: 1;
}

.marketplace-name {
  font-size: 15px;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 4px;
}

.marketplace-status {
  font-size: 12px;
  color: #888;
}

.marketplace-status.connected {
  color: #4caf50;
  font-weight: 500;
}

.marketplace-badge {
  padding: 4px 10px;
  background: rgba(65, 105, 225, 0.2);
  color: #4169E1;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ============================================
   LISTINGS PANEL
   ============================================ */

.listings-overview {
  padding: 4px 0;
}

.session-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.stat-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
}

.stat-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: #4169E1;
}

.listings-list {
  margin-top: 16px;
}

/* ============================================
   SETTINGS PANEL
   ============================================ */

.settings-section {
  padding: 4px 0;
}

.setting-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.setting-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.setting-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 14px;
  color: #e0e0e0;
  font-weight: 500;
}

.setting-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #4169E1;
}

.setting-description {
  margin: 8px 0 0 28px;
  font-size: 12px;
  color: #888;
  line-height: 1.5;
}

/* ============================================
   DRAFTS PANEL
   ============================================ */

/* Resume All Button - In Header Next to Badge */
.resume-all-btn-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(139, 92, 246, 0.2);
  color: #A855F7;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.resume-all-btn-header:hover {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.6);
  color: #C084FC;
  box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}

.resume-all-btn-header:active {
  background: rgba(139, 92, 246, 0.25);
  transform: scale(0.98);
}

.resume-all-btn-header svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}

.drafts-empty {
  text-align: center;
  padding: 32px 20px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
}

.drafts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.draft-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
}

.draft-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
}

.draft-image {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.draft-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.draft-no-image svg {
  width: 24px;
  height: 24px;
  stroke: rgba(255, 255, 255, 0.3);
}

.draft-info {
  flex: 1;
  min-width: 0;
}

.draft-title {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  line-height: 1.3;
  flex-wrap: nowrap;
}

.draft-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Draft badges */
.draft-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  white-space: nowrap;
}

.draft-badge-autosave {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.3);
}

.draft-badge-failed {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.draft-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.draft-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.draft-resume-btn,
.draft-delete-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.draft-resume-btn svg,
.draft-delete-btn svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255, 255, 255, 0.9);
}

.draft-resume-btn:hover {
  background: #4169E1;
  border-color: #4169E1;
}

.draft-resume-btn:hover svg {
  stroke: #ffffff;
}

.draft-delete-btn:hover {
  background: #dc3545;
  border-color: #dc3545;
}

.draft-delete-btn:hover svg {
  stroke: #ffffff;
}

/* ============================================
   DRAFT MULTI-SELECT
   ============================================ */

/* Toolbar with Select toggle button */
.drafts-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0 0 10px 0;
}

.drafts-select-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.drafts-select-toggle-btn svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, 0.5);
  transition: stroke 0.2s ease;
}

.drafts-select-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.drafts-select-toggle-btn:hover svg {
  stroke: rgba(255, 255, 255, 0.8);
}

.drafts-select-toggle-btn.active {
  background: rgba(139, 92, 246, 0.15);
  color: #C084FC;
  border-color: rgba(139, 92, 246, 0.35);
}

.drafts-select-toggle-btn.active svg {
  stroke: #C084FC;
}

/* Selectable card (in selection mode) */
.draft-card-selectable {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.draft-card-selectable:hover {
  background: rgba(139, 92, 246, 0.06);
  border-color: rgba(139, 92, 246, 0.2);
}

.draft-card-selected {
  background: rgba(139, 92, 246, 0.1) !important;
  border-color: rgba(139, 92, 246, 0.35) !important;
}

.draft-card-selected:hover {
  background: rgba(139, 92, 246, 0.14) !important;
  border-color: rgba(139, 92, 246, 0.45) !important;
}

/* Checkbox */
.draft-checkbox-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.draft-checkbox {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.draft-checkbox svg {
  width: 14px;
  height: 14px;
  stroke: transparent;
  transition: stroke 0.15s ease;
}

.draft-checkbox.checked {
  background: #8B5CF6;
  border-color: #8B5CF6;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.35);
}

.draft-checkbox.checked svg {
  stroke: #ffffff;
}

/* Selection Action Bar (sticky at top of drafts panel, beneath tabs) */
.drafts-selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: linear-gradient(145deg, #1e1e2e 0%, #1a1a28 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 8px;
  gap: 8px;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.drafts-selection-bar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.drafts-selection-bar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.drafts-selection-count {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Rubik', sans-serif;
  white-space: nowrap;
}

.drafts-select-all-btn {
  padding: 5px 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.drafts-select-all-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Resume Selected button */
.drafts-action-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(139, 92, 246, 0.2);
  color: #A855F7;
  border: 1px solid rgba(139, 92, 246, 0.4);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.drafts-action-resume-btn svg {
  width: 14px;
  height: 14px;
  fill: #A855F7;
  transition: fill 0.2s ease;
}

.drafts-action-resume-btn:hover:not(:disabled) {
  background: rgba(139, 92, 246, 0.3);
  border-color: rgba(139, 92, 246, 0.6);
  color: #C084FC;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25);
}

.drafts-action-resume-btn:hover:not(:disabled) svg {
  fill: #C084FC;
}

.drafts-action-resume-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Delete Selected button */
.drafts-action-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.drafts-action-delete-btn svg {
  width: 14px;
  height: 14px;
  stroke: #f87171;
  transition: stroke 0.2s ease;
}

.drafts-action-delete-btn:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.5);
  color: #fca5a5;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.drafts-action-delete-btn:hover:not(:disabled) svg {
  stroke: #fca5a5;
}

.drafts-action-delete-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Cancel selection button */
.drafts-action-cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  margin-left: 2px;
}

.drafts-action-cancel-btn svg {
  width: 14px;
  height: 14px;
  stroke: rgba(255, 255, 255, 0.5);
  transition: stroke 0.2s ease;
}

.drafts-action-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
}

.drafts-action-cancel-btn:hover svg {
  stroke: rgba(255, 255, 255, 0.9);
}

/* Inline notification (replaces toast for draft multi-select actions) */
.drafts-inline-notification {
  padding: 10px 14px;
  margin-bottom: 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: draftNotifSlideIn 0.25s ease-out;
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.drafts-inline-notification.dismissing {
  animation: draftNotifSlideOut 0.2s ease-in forwards;
}

.drafts-inline-notification.notif-success {
  background: #1a2e26;
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6EE7B7;
}

.drafts-inline-notification.notif-error {
  background: #2e1a1a;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #FCA5A5;
}

.drafts-inline-notification .notif-icon {
  flex-shrink: 0;
  font-size: 15px;
  line-height: 1;
}

.drafts-inline-notification .notif-text {
  flex: 1;
  min-width: 0;
}

@keyframes draftNotifSlideIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes draftNotifSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* ============================================
   POLICIES PANEL
   ============================================ */

.policy-section {
  margin-bottom: 16px;
}

.policy-section:last-child {
  margin-bottom: 0;
}

.policy-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 8px;
  font-family: 'Rubik', sans-serif;
}

.policy-label span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.policy-select {
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.95);
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M10.293 3.293L6 7.586 1.707 3.293A1 1 0 00.293 4.707l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.policy-select:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
}

.policy-select:focus {
  outline: none;
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.policy-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

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

/* Mobile Responsive */
@media (max-width: 767px) {
  .listing-preferences-banner {
    margin: 12px 16px;
    overflow: visible; /* Allow hub to expand vertically on mobile */
  }

  .preferences-header {
    padding: 14px 16px;
    min-height: 52px;
  }

  .preferences-title {
    font-size: 14px;
  }

  /* 📱 Mobile tabs: Ensure horizontal scrolling and compact sizing */
  .preferences-tabs {
    padding: 10px 16px 0 16px !important;
    padding-right: 16px !important; /* Ensure last tab is fully visible when scrolled */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .preferences-tab {
    padding: 6px 10px !important;
    font-size: 11px !important;
    gap: 4px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important; /* Override flex: 1 - allow tabs to size based on content for scrolling */
    justify-content: flex-start !important; /* Left-align content when scrolling */
    min-width: fit-content !important; /* Ensure tabs don't shrink below content size */
  }
  
  .preferences-tab .tab-icon {
    font-size: 12px !important;
  }
  
  .preferences-tab .tab-count {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 3px !important;
  }

  /* 📱 Mobile-specific: Adjust padding for mobile */
  .preferences-panel {
    padding: 16px;
  }
  
  .preferences-panel.active {
    display: block !important;
    opacity: 1 !important;
  }

  /* Resume All Button - Mobile */
  .resume-all-btn-header {
    padding: 3px 8px;
    font-size: 11px;
    gap: 4px;
  }

  .resume-all-btn-header svg {
    width: 10px;
    height: 10px;
  }

  .draft-card {
    padding: 10px;
  }

  .draft-image {
    width: 42px;
    height: 42px;
  }

  .draft-title {
    font-size: 13px;
  }
  
  .draft-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
  }

  .draft-meta {
    font-size: 11px;
  }

  .draft-actions {
    gap: 6px;
  }

  .draft-resume-btn,
  .draft-delete-btn {
    width: 28px;
    height: 28px;
  }

  .draft-resume-btn svg,
  .draft-delete-btn svg {
    width: 14px;
    height: 14px;
  }

  /* Draft Multi-Select - Mobile */
  .drafts-toolbar {
    padding: 0 0 8px 0;
  }

  .drafts-select-toggle-btn {
    padding: 4px 10px;
    font-size: 11px;
    gap: 5px;
  }

  .drafts-select-toggle-btn svg {
    width: 12px;
    height: 12px;
  }

  .draft-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 5px;
  }

  .draft-checkbox svg {
    width: 12px;
    height: 12px;
  }

  .drafts-selection-bar {
    padding: 8px 10px;
    margin-bottom: 8px;
    gap: 6px;
  }

  .drafts-selection-bar-left {
    gap: 6px;
  }

  .drafts-selection-bar-right {
    gap: 4px;
  }

  .drafts-selection-count {
    font-size: 11px;
  }

  .drafts-select-all-btn {
    padding: 4px 8px;
    font-size: 10px;
  }

  .drafts-action-resume-btn,
  .drafts-action-delete-btn,
  .drafts-action-cancel-btn {
    padding: 5px 8px;
    font-size: 11px;
    gap: 3px;
    border-radius: 6px;
  }

  .drafts-action-resume-btn svg,
  .drafts-action-delete-btn svg,
  .drafts-action-cancel-btn svg {
    width: 12px;
    height: 12px;
  }
}

/* ============================================
   RETRY BUTTONS (Failed Listings Recovery)
   ============================================ */

/* Warning banner variant - for mixed success/failure */
.listing-success-banner.has-failures {
  background: linear-gradient(135deg, #F59E0B 0%, #FBBF24 100%);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.listing-success-banner.has-failures::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
}

/* Retry Now button - Primary action */
.success-banner-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.95);
  color: #F59E0B;
  border: 1px solid rgba(255, 255, 255, 1);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.success-banner-retry-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.success-banner-retry-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.success-banner-retry-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Retry Later button - Secondary action */
.success-banner-later-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}

.success-banner-later-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
  color: #ffffff;
}

.success-banner-later-btn:active {
  transform: scale(0.98);
}

/* Optional subtitle text */
.success-banner-subtitle {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.9);
  margin: 2px 0 0 0;
  line-height: 1.3;
}

/* Expandable listings dropdown */
.success-banner-dropdown {
  display: none;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.success-banner-dropdown.expanded {
  display: block;
  max-height: 200px;
  padding: 10px 12px;
  overflow-y: auto;
}

.success-banner-dropdown::-webkit-scrollbar {
  width: 6px;
}

.success-banner-dropdown::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.success-banner-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.success-banner-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.95);
}

.success-banner-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.success-banner-item:first-child {
  padding-top: 0;
}

.success-banner-item-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 12px;
}

.success-banner-item-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  transition: background 0.2s ease;
}

.success-banner-item-link:hover {
  background: rgba(255, 255, 255, 0.2);
}

.success-banner-item-link svg {
  width: 12px;
  height: 12px;
}

/* Fade out animation for dismiss */
.listing-success-banner.dismissing {
  animation: successBannerSlideOut 0.3s ease-out forwards;
}

@keyframes successBannerSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Mobile adjustments for success banner */
@media (max-width: 767px) {
  .listing-success-banner {
    margin: 8px 0 8px 0;
    padding: 12px 16px 18px 16px;
  }
  
  .success-banner-title {
    font-size: 15px;
  }
  
  .success-banner-subtitle {
    font-size: 12px;
  }
  
  .success-banner-actions {
    gap: 8px;
  }
  
  .success-banner-link {
    padding: 7px 12px;
    font-size: 12px;
  }
  
  .success-banner-toggle {
    padding: 7px 10px;
    font-size: 12px;
  }
  
  /* Retry buttons on mobile */
  .success-banner-retry-btn {
    padding: 7px 12px;
    font-size: 12px;
  }
  
  .success-banner-retry-btn svg {
    width: 13px;
    height: 13px;
  }
  
  .success-banner-later-btn {
    padding: 7px 12px;
    font-size: 12px;
  }
}

/* ============================================
   🚫 USAGE EXHAUSTED STATE - Style elements when user has no listings left
   Applied via class on .upload-panel BEFORE it becomes visible
   ============================================ */

/* Hide listing tabs and details, but keep upload zone visible */
.upload-panel.usage-exhausted #listing-tabs-container,
.upload-panel.usage-exhausted #listing-details-container {
  display: none !important;
}

/* Dark-themed disabled upload zone for exhausted state - Desktop/Tablet only */
.upload-panel.usage-exhausted .upload-zone {
  border-color: rgba(255, 255, 255, 0.15);
  background: linear-gradient(135deg, #252525 0%, #2d2d2d 100%);
  cursor: not-allowed;
  pointer-events: none;
}

.upload-panel.usage-exhausted .upload-zone::before {
  display: none;
}

.upload-panel.usage-exhausted .upload-zone:hover {
  border-color: rgba(255, 255, 255, 0.15);
  border-style: dashed;
  transform: none;
  box-shadow: none;
}

.upload-panel.usage-exhausted .upload-zone .upload-icon {
  color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05);
}

.upload-panel.usage-exhausted .upload-zone h3 {
  color: rgba(255, 255, 255, 0.4);
}

.upload-panel.usage-exhausted .upload-zone p {
  color: rgba(255, 255, 255, 0.3);
}

.upload-panel.usage-exhausted .upload-zone .browse-btn {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  box-shadow: none;
}

.upload-panel.usage-exhausted .upload-zone .browse-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: none;
  box-shadow: none;
}


/* ============================================
   💳 USAGE LIMIT BANNER - CTA when user runs out of listings
   ============================================ */
.usage-limit-banner {
  background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
  border-radius: 12px;
  padding: 20px 20px 24px 20px;
  margin: 0 4px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35);
  animation: usageLimitBannerSlideIn 0.4s ease-out;
  position: relative;
  overflow: hidden; /* Contain shimmer effect within the box */
  z-index: 10;
  flex-shrink: 0; /* Prevent flex from squeezing banner — scroll parent instead */
}

@keyframes usageLimitBannerSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtle shimmer effect - contained within border-radius */
.usage-limit-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.usage-limit-banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  animation: usageLimitShimmer 3s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
  border-radius: 12px;
}

@keyframes usageLimitShimmer {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

.usage-limit-banner-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.usage-limit-banner-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}

.usage-limit-banner-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.usage-limit-banner-title {
  font-size: 16px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  color: #ffffff;
  margin: 0;
  line-height: 1.3;
}

.usage-limit-banner-message {
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  line-height: 1.5;
}

.usage-limit-banner-dismiss {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  transition: all 0.2s ease;
  flex-shrink: 0;
  line-height: 1;
}

.usage-limit-banner-dismiss:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.usage-limit-banner-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.usage-limit-banner-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  flex: 1;
  min-width: 140px;
}

.usage-limit-banner-link.primary {
  background: #ffffff;
  color: #6D28D9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.usage-limit-banner-link.primary:hover {
  background: #faf5ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.usage-limit-banner-link.secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

.usage-limit-banner-link.secondary:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.usage-limit-banner-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Fade out animation for dismiss */
.usage-limit-banner.dismissing {
  animation: usageLimitBannerSlideOut 0.3s ease-out forwards;
}

@keyframes usageLimitBannerSlideOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Mobile adjustments for usage limit banner */
@media (max-width: 767px) {
  .usage-limit-banner {
    margin: 0 0 8px 0;
    padding: 12px 16px 24px 16px;
  }
  
  .usage-limit-banner-title {
    font-size: 15px;
  }
  
  .usage-limit-banner-message {
    font-size: 13px;
  }
  
  .usage-limit-banner-links {
    gap: 8px;
    flex-direction: column;
  }
  
  .usage-limit-banner-link {
    padding: 10px 14px;
    font-size: 13px;
    justify-content: center;
    width: 100%;
  }
}

/* ============================================
   NARROW PANEL CONTAINER QUERIES
   ============================================
   When the upload panel shares width with the chat on desktop,
   the panel can be quite narrow. These container queries adapt
   the banner content based on the panel's ACTUAL width, not the
   viewport width. This fixes wrapping issues at intermediate sizes
   where the viewport is wide (desktop breakpoints active) but the
   panel itself is narrow.
   
   Requires: container-type: inline-size on .upload-content (set above)
   Affects: success banner, usage limit banner
   Does NOT affect: mobile (<768px), full-width panel, hub/preferences
   ============================================ */

@container upload-content (max-width: 500px) {
  /* --- Blue success banner: compact layout --- */
  .listing-success-banner {
    padding: 12px 16px 16px 16px;
    gap: 10px;
  }

  .success-banner-header {
    gap: 8px;
  }

  .success-banner-icon {
    font-size: 20px;
  }

  .success-banner-title {
    font-size: 14px;
  }

  .success-banner-subtitle {
    font-size: 12px;
  }

  .success-banner-actions {
    gap: 6px;
    flex-wrap: wrap;
  }

  .success-banner-link {
    padding: 6px 10px;
    font-size: 12px;
  }

  .success-banner-toggle {
    padding: 6px 10px;
    font-size: 12px;
  }

  .success-banner-retry-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  .success-banner-later-btn {
    padding: 6px 10px;
    font-size: 12px;
  }

  /* --- Purple usage limit banner: stack buttons vertically --- */
  .usage-limit-banner {
    padding: 14px 16px 20px 16px;
    gap: 12px;
  }

  .usage-limit-banner-header {
    gap: 8px;
  }

  .usage-limit-banner-icon {
    font-size: 22px;
  }

  .usage-limit-banner-title {
    font-size: 15px;
  }

  .usage-limit-banner-message {
    font-size: 13px;
  }

  .usage-limit-banner-links {
    flex-direction: column;
    gap: 8px;
  }

  .usage-limit-banner-link {
    padding: 10px 14px;
    font-size: 13px;
    justify-content: center;
    width: 100%;
    min-width: unset;
  }
}

/* Even narrower panel — further compaction */
@container upload-content (max-width: 380px) {
  .listing-success-banner {
    padding: 10px 12px 14px 12px;
  }

  .success-banner-title {
    font-size: 13px;
  }

  .success-banner-actions {
    flex-direction: column;
    gap: 6px;
  }

  .success-banner-link,
  .success-banner-toggle,
  .success-banner-retry-btn,
  .success-banner-later-btn {
    width: 100%;
    justify-content: center;
  }

  .usage-limit-banner {
    padding: 12px 14px 16px 14px;
  }

  .usage-limit-banner-title {
    font-size: 14px;
  }

  .usage-limit-banner-message {
    font-size: 12px;
  }

  .usage-limit-banner-link {
    padding: 8px 12px;
    font-size: 12px;
  }
}

/* ============================================
   HORIZONTAL DRAG HANDLE - Resizable Side-by-Side Layout
   ============================================
   When upload panel is open on tablet/desktop, users can drag
   the boundary between webchat and upload panel to resize.
   
   Mirrors the mobile vertical drag approach from edit-ui.css
   ============================================ */

@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.upload-active {
    transition: none !important;
  }
  
  html body.upload-dragging div.upload-panel,
  html body.upload-dragging div.upload-panel.active {
    transition: none !important;
  }
  
  html body.upload-dragging .upload-drag-handle {
    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;
  }
  
  /* Drag handle - vertical bar between panels */
  .upload-drag-handle {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 12px;
    background: linear-gradient(90deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.08) 50%, rgba(0,0,0,0.02) 100%);
    cursor: ew-resize;
    z-index: 10001;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    /* 🎬 SYNCHRONIZED SLIDE-IN: Start off-screen by panel width, slide in WITH panel */
    /* Uses same CSS variable as panel for perfect synchronization */
    transform: translateX(var(--upload-panel-default-width));
    transition: transform 0.3s ease-out, background 0.2s ease;
    opacity: 1; /* Visible from start, position animation provides the effect */
  }
  
  /* Active state - slide into final position */
  .upload-drag-handle.active {
    transform: translateX(0);
  }
  
  /* Visible indicator pill in center */
  .upload-drag-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4px;
    height: 48px;
    background: rgba(100, 100, 100, 0.4);
    border-radius: 2px;
    transition: background 0.2s ease, height 0.2s ease;
  }
  
  .upload-drag-handle:hover {
    background: linear-gradient(90deg, rgba(65,105,225,0.05) 0%, rgba(65,105,225,0.15) 50%, rgba(65,105,225,0.05) 100%);
  }
  
  .upload-drag-handle:hover::before,
  .upload-drag-handle:active::before {
    background: rgba(65, 105, 225, 0.6);
    height: 64px;
  }
  
  .upload-drag-handle:active {
    background: linear-gradient(90deg, rgba(65,105,225,0.1) 0%, rgba(65,105,225,0.2) 50%, rgba(65,105,225,0.1) 100%);
  }
}

/* ============================================
   ⚙️ SETTINGS TAB STYLES
   ============================================ */

.settings-overview {
  padding: 0;
}

.settings-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.settings-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.settings-label {
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.settings-value {
  font-size: 15px;
  font-weight: 600;
  color: #e0e0e0;
}

.settings-sublabel {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* Usage Bar */
.usage-bar {
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin: 8px 0;
}

.usage-bar-fill {
  height: 100%;
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 4px;
}

/* Settings Actions */
.settings-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.settings-btn {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #e0e0e0;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.settings-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

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

/* ============================================
   📊 LISTINGS TAB - ACTION BUTTONS
   ============================================ */

/* Responsive container: side-by-side on wide screens, stacked on narrow */
.listings-actions-container {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap; /* Allows buttons to wrap on narrow screens */
}

/* Individual action button */
.listings-action-btn {
  flex: 1 1 calc(50% - 6px); /* Take 50% width minus gap on wide screens */
  min-width: 200px; /* Minimum width before wrapping */
  padding: 14px 20px;
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.3);
}

.listings-action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(65, 105, 225, 0.4);
}

.listings-action-btn:active {
  transform: translateY(0);
}

/* On narrow screens (< 500px or when panel is narrow), stack buttons */
@media (max-width: 500px) {
  .listings-actions-container {
    flex-direction: column;
  }
  
  .listings-action-btn {
    width: 100%;
    min-width: unset;
  }
}

/* ============================================
   📥 CSV EXPORT - LOADING OVERLAY & SPINNER
   ============================================ */

.csv-export-modal {
  background: #1E1E1E;
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.csv-export-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Spinning circle animation */
.spinner-circle {
  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;
}

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

.spinner-text {
  font-size: 16px;
  color: #e0e0e0;
  font-weight: 500;
  font-family: 'Rubik', sans-serif;
}

/* ============================================
   CONFIRMATION DIALOG (Virtual Instances Modal)
   ============================================ */
.confirm-dialog-overlay {
  position: fixed;
  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: 10000;
  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(65, 105, 225, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4169E1;
  font-size: 28px;
  transition: all 0.3s ease;
}

/* Success state - green */
.confirm-dialog-icon.success {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}

/* Warning state - amber */
.confirm-dialog-icon.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}

/* Error state - red */
.confirm-dialog-icon.error {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}

.confirm-dialog-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(65, 105, 225, 0.2);
  border-radius: 50%;
  border-top-color: #4169E1;
  animation: spin 0.8s linear infinite;
}

.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;
}

/* ============================================
   🔢 CUSTOM QUANTITY INPUT MODAL
   ============================================ */

.quantity-input-overlay {
  position: fixed;
  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: 10005;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.quantity-input-overlay.active {
  opacity: 1;
  visibility: visible;
}

.quantity-input-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: 360px;
  width: calc(100% - 48px);
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.9) translateY(-10px);
  opacity: 0;
  transition: transform 0.25s ease-out, opacity 0.25s ease-out;
}

.quantity-input-overlay.active .quantity-input-dialog {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.quantity-input-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  background: rgba(65, 105, 225, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4169E1;
  font-size: 24px;
  font-weight: 600;
}

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

.quantity-input-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 24px 0;
}

.quantity-input-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 14px 16px;
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  color: #ffffff;
  text-align: center;
  margin-bottom: 24px;
  transition: all 0.2s ease;
  outline: none;
}

.quantity-input-field:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: #4169E1;
  box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15);
}

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

.quantity-input-field.error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.quantity-input-error {
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  color: #EF4444;
  margin: -16px 0 16px 0;
  min-height: 18px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.quantity-input-error.visible {
  opacity: 1;
}

.quantity-input-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.quantity-input-btn {
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  flex: 1;
  min-width: 100px;
}

.quantity-input-btn-primary {
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  color: white;
}

.quantity-input-btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.4);
}

.quantity-input-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.quantity-input-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.quantity-input-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

.quantity-input-btn:active {
  transform: translateY(0);
}

/* Mobile responsive */
@media (max-width: 480px) {
  .quantity-input-dialog {
    max-width: calc(100% - 32px);
    padding: 24px 20px;
  }
  
  .quantity-input-title {
    font-size: 18px;
  }
  
  .quantity-input-buttons {
    flex-direction: column-reverse; /* Reverse order: Confirm on top, Cancel below */
  }
  
  .quantity-input-btn {
    width: 100%;
  }
}

/* ============================================
   📥 CSV EXPORT - ERROR MODAL
   ============================================ */

.csv-export-error-modal {
  background: #1E1E1E;
  border: 2px solid #EF4444;
  border-radius: 16px;
  padding: 40px;
  max-width: 460px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.csv-error-btn {
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
}

.csv-error-btn-primary {
  background: linear-gradient(135deg, #4169E1 0%, #5a7bff 100%);
  color: white;
}

.csv-error-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(65, 105, 225, 0.4);
}

.csv-error-btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.csv-error-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.csv-error-btn:active {
  transform: translateY(0);
}

/* ============================================
   ANIMATIONS
   ============================================ */

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

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

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

/* ============================================
   📋 MOBILE POLICIES BOTTOM SHEET OVERLAY
   ============================================ */

/* Hide overlay by default on all viewports */
.policies-overlay {
  display: none;
}

/* Mobile-only overlay styles */
@media (max-width: 480px) {
  /* Hide inline expandable content on mobile */
  .policies-expandable-content {
    display: none !important;
  }
  
  /* Keep the toggle header visible as the trigger */
  .policies-toggle-header {
    cursor: pointer;
  }
  
  /* Hide the expand/collapse arrow on mobile (we use overlay instead) */
  .policies-toggle-btn svg {
    transform: rotate(0deg) !important;
    transition: none !important;
  }
  
  /* Policies Overlay */
  .policies-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10003;
    opacity: 0;
    visibility: hidden;
    /* Keep centering properties always to prevent jump during close */
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  
  .policies-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
  }
  
  /* Bottom Sheet Container */
  .policies-bottom-sheet {
    position: relative;
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    background: #1a1a1a;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    transform: scale(0.92) translateY(8px);
    opacity: 0;
    /* Smooth ease-out for closing */
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    pointer-events: auto;
  }
  
  .policies-overlay.active .policies-bottom-sheet {
    transform: scale(1) translateY(0);
    opacity: 1;
    /* Spring effect for opening */
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.05s;
  }
  
  /* Sheet Header */
  .policies-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1E1E1E 0%, #252525 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px 16px 0 0;
    flex-shrink: 0;
  }
  
  /* Push refresh + close buttons to the right */
  .policies-sheet-header .policies-refresh-btn {
    margin-left: auto;
  }
  
  .policies-sheet-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-family: 'Rubik', sans-serif;
  }
  
  .policies-sheet-icon {
    font-size: 18px;
  }
  
  .policies-sheet-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
  }
  
  .policies-sheet-close-btn:hover,
  .policies-sheet-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.95);
  }
  
  /* Sheet Content */
  .policies-sheet-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #1a1a1a;
    border-radius: 0 0 16px 16px;
    -webkit-overflow-scrolling: touch;
  }
  
  .policies-sheet-content::-webkit-scrollbar {
    width: 6px;
  }
  
  .policies-sheet-content::-webkit-scrollbar-track {
    background: #1E1E1E;
  }
  
  .policies-sheet-content::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
  }
  
  /* Policy Apply Toggle in Overlay */
  .policies-sheet-content .policy-apply-toggle {
    margin-bottom: 4px;
  }

  .policies-sheet-content .policy-apply-btn {
    padding: 10px 14px;
    font-size: 13px;
  }

  .policies-sheet-content .policy-apply-hint {
    margin: 6px 0 16px 0;
  }

  /* Policy Groups */
  .policies-sheet-row {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .policies-sheet-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .policies-sheet-label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
  }
  
  .policies-sheet-select {
    padding: 14px 16px;
    padding-right: 40px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 16px;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-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;
    width: 100%;
    min-height: 48px;
    -webkit-text-size-adjust: 100%;
  }
  
  .policies-sheet-select:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(65, 105, 225, 0.4);
  }
  
  .policies-sheet-select:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #4169E1;
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.15);
  }
  
  .policies-sheet-select option {
    background: #2a2a2a;
    color: rgba(255, 255, 255, 0.95);
    padding: 12px;
  }
  
  /* Policy overlay custom dropdowns support */
  .policies-sheet-group {
    position: relative;
    overflow: visible;
  }
  
  /* Custom dropdown styling within overlay */
  .policies-sheet-group .custom-select-wrapper {
    width: 100%;
  }
  
  .policies-sheet-group .custom-select-wrapper .policies-sheet-select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  /* Custom dropdown menu positioning within overlay */
  .policies-sheet-group .custom-select-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: #2a2a2a;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: none;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
  }

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

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

  .policies-sheet-group .custom-select-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
  
  .policies-sheet-group .custom-select-wrapper.open .custom-select-menu {
    display: block !important;
  }
  
  .policies-sheet-group .custom-select-option {
    padding: 14px 16px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.95);
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
  }
  
  .policies-sheet-group .custom-select-option:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .policies-sheet-group .custom-select-option.selected {
    background: rgba(65, 105, 225, 0.2);
    color: #ffffff;
  }
  
  .policies-sheet-group .custom-select-option:active {
    background: rgba(255, 255, 255, 0.15);
  }
}

/* ============================================
   📱 MOBILE UPLOAD PEEK PANEL - Split Screen View
   ============================================
   On mobile, the upload panel peeks from the top (25vh) and
   the bot stays visible at the bottom (75vh).
   
   Triggered by adding .mobile-upload-peek-visible class to body.
   User can drag the handle to resize (25vh to 100vh).
   
   IMPORTANT: These selectors must have HIGHER specificity than
   the existing mobile styles to override them properly.
   ============================================ */

@media (max-width: 767px) {
  /* 
   * UPLOAD PANEL: Peek mode - slides DOWN with drag handle
   * 
   * KEY CONCEPT: Panel starts hidden above viewport and slides down WITH the drag handle.
   * Both elements animate together as one cohesive unit.
   * Using .peek-mode class avoids CSS specificity wars with legacy horizontal slide.
   */
  html body.mobile-upload-peek-visible div.upload-panel.peek-mode {
    height: 0vh !important; /* Start collapsed */
    top: 0 !important;
    bottom: auto !important;
    width: 100vw !important;
    transform: translate3d(0, 0, 0) !important; /* Already at final position */
    transition: opacity 0.3s ease-out, height 0.3s ease-out !important; /* Animate opacity AND height */
    opacity: 0 !important; /* Start invisible */
    position: fixed !important;
    right: 0 !important;
    left: 0 !important;
    overflow: hidden !important; /* Prevent panel scroll — .upload-content handles its own scrolling */
  }
  
  /* Active state - slide down to 25vh while fading in */
  html body.mobile-upload-peek-visible div.upload-panel.peek-mode.active {
    height: 25vh !important; /* Slide down to 25vh */
    opacity: 1 !important; /* Fade in */
  }
  
  /* 
   * WEBCHAT CONTAINER: Transform to bottom panel (75vh)
   * Must override: html body div#webchat-container.upload-active { width: 0vw !important; }
   * Using same selector pattern with body.mobile-upload-peek-visible prepended (higher specificity)
   */
  html body.mobile-upload-peek-visible div#webchat-container,
  html body.mobile-upload-peek-visible div#webchat-container.upload-active,
  html body.mobile-upload-peek-visible div#webchat-container.upload-active[id="webchat-container"],
  html body.mobile-upload-peek-visible div#webchat-container[id="webchat-container"] {
    position: fixed !important;
    top: 0vh !important;  /* Start at top, will animate to 25vh */
    bottom: auto !important;  /* Not needed — top + height fully define positioning */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;  /* Explicit height in initial state */
    z-index: 9999 !important;
    overflow: hidden !important;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5) !important;
    border-top: none !important;
    transition: top 0.3s ease-out, height 0.3s ease-out !important;
  }
  
  /* Active state - webchat container top slides down, height shrinks */
  html body.mobile-upload-peek-visible.mobile-upload-peek-active div#webchat-container,
  html body.mobile-upload-peek-visible.mobile-upload-peek-active div#webchat-container.upload-active,
  html body.mobile-upload-peek-visible.mobile-upload-peek-active div#webchat-container.upload-active[id="webchat-container"],
  html body.mobile-upload-peek-visible.mobile-upload-peek-active div#webchat-container[id="webchat-container"] {
    top: 25vh !important;  /* Slide top edge down below upload panel */
    height: 75vh !important;  /* Explicit height - shrink to 75vh */
  }
  
  /* Disable transition during drag for smooth resize */
  html body.mobile-upload-peek-visible.mobile-upload-dragging div#webchat-container,
  html body.mobile-upload-peek-visible.mobile-upload-dragging div#webchat-container.upload-active {
    transition: none !important;
  }
  
  html body.mobile-upload-peek-visible.mobile-upload-dragging div.upload-panel {
    transition: none !important;
  }
  
  html body.mobile-upload-dragging .mobile-upload-drag-handle {
    transition: none !important;
  }
  
  /* Disable transitions on Botpress elements during drag for instant resize (prevents lag) */
  /* CRITICAL: Use BOTH classes for higher specificity to override .mobile-upload-peek-visible rules */
  html body.mobile-upload-peek-visible.mobile-upload-dragging .bpWebchat,
  html body.mobile-upload-peek-visible.mobile-upload-dragging .bpOpen,
  html body.mobile-upload-peek-visible.mobile-upload-dragging .bpOpen.bpWebchat,
  html body.mobile-upload-peek-visible.mobile-upload-dragging #webchat-root,
  html body.mobile-upload-peek-visible.mobile-upload-dragging #webchat-root.bpheightfull {
    transition: none !important;
  }
  
  /* 
   * Visual separator / drag handle - POSITIONED ON BODY
   * This element is appended to body (not upload-panel) because
   * we need it to sit between the two panels visually.
   * 
   * Position: fixed, starts off-screen and slides down with upload panel
   */
  .mobile-upload-drag-handle {
    position: fixed;
    top: -28px; /* Start hidden above viewport */
    left: 0;
    right: 0;
    height: 28px;
    background: linear-gradient(180deg, #2a2a2a 0%, #1f1f1f 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 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);
    opacity: 0; /* Start invisible */
    transition: opacity 0.3s ease-out, top 0.3s ease-out; /* Fade in AND slide down with panel */
  }
  
  /* Slide down and fade in drag handle when active class is added (controlled by JS timing) */
  .mobile-upload-drag-handle.active {
    top: calc(25vh - 28px); /* Slide down to bottom of upload panel */
    opacity: 1; /* Fade in */
  }
  
  /* The actual drag indicator pill */
  .mobile-upload-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-upload-drag-handle:hover::before,
  .mobile-upload-drag-handle:active::before {
    background: rgba(255, 255, 255, 0.6);
    width: 56px;
  }
  
  .mobile-upload-drag-handle:active {
    background: linear-gradient(180deg, #333333 0%, #282828 100%);
  }
  
  /* 🔑 KEY FIX: Use fixed positioning with 75vh height (like desktop horizontal split)
     Position bot in bottom 75vh, leaving top 25vh for upload panel
     🎬 ANIMATION: Bot elements slide down in sync with upload panel */
  html body.mobile-upload-peek-visible .bpWebchat,
  html body.mobile-upload-peek-visible .bpOpen,
  html body.mobile-upload-peek-visible .bpOpen.bpWebchat {
    position: fixed !important;
    top: 0vh !important;  /* Start at top, will animate to 25vh */
    bottom: auto !important;  /* Not needed — top + height fully define positioning */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;  /* Explicit height - start full viewport */
    max-width: 100% !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    transition: top 0.3s ease-out, height 0.3s ease-out, max-height 0.3s ease-out !important;
  }
  
  /* Active state - bot top slides down, height shrinks */
  html body.mobile-upload-peek-visible.mobile-upload-peek-active .bpWebchat,
  html body.mobile-upload-peek-visible.mobile-upload-peek-active .bpOpen,
  html body.mobile-upload-peek-visible.mobile-upload-peek-active .bpOpen.bpWebchat {
    top: 25vh !important;  /* Slide top edge down below upload panel */
    height: 75vh !important;  /* Explicit height - shrink to 75vh */
    max-height: 75vh !important;
  }
  
  /* Same for webchat-root */
  html body.mobile-upload-peek-visible #webchat-root,
  html body.mobile-upload-peek-visible #webchat-root.bpheightfull {
    position: fixed !important;
    top: 0vh !important;  /* Start at top */
    bottom: auto !important;  /* Not needed — top + height fully define positioning */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100vh !important;  /* Explicit height in initial state */
    max-width: 100% !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    transition: top 0.3s ease-out, height 0.3s ease-out, max-height 0.3s ease-out !important;
  }
  
  /* Active state - webchat-root top slides down, height shrinks */
  html body.mobile-upload-peek-visible.mobile-upload-peek-active #webchat-root,
  html body.mobile-upload-peek-visible.mobile-upload-peek-active #webchat-root.bpheightfull {
    top: 25vh !important;
    height: 75vh !important;  /* Explicit height - shrink to 75vh */
    max-height: 75vh !important;
  }
}

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

/* ============================================
   SHORT VIEWPORT ADJUSTMENTS
   Targets MacBook Pro 14" (~982px logical height, ~830-860px viewport)
   and similar short desktop/tablet screens.
   Only activates on viewports ≤900px tall AND ≥768px wide (tablet/desktop).
   Mobile (<768px) is unaffected — it has its own layout.
   Taller screens (1080p, 1440p, etc.) are unaffected — they never match.
   ============================================ */

/* --- Moderate adjustments for viewports up to 900px tall --- */
@media (max-height: 900px) and (min-width: 768px) {
  .upload-header {
    padding: 12px 24px;
    min-height: 56px;
  }

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

  /* Upload zone — reduce generous desktop padding and min-height */
  .upload-zone {
    padding: 28px 24px;
    min-height: 180px;
  }

  .upload-zone.has-files {
    min-height: 120px;
    padding: 14px 20px;
  }

  .upload-zone.has-files .upload-icon {
    font-size: 26px;
    padding: 9px;
    margin-bottom: 4px;
  }

  .upload-zone.has-files h3 {
    font-size: 14px;
    margin-bottom: 2px;
  }

  .upload-zone.has-files p {
    font-size: 12px;
    margin-bottom: 8px;
  }

  .upload-zone.has-files .browse-btn {
    padding: 7px 14px;
    font-size: 12px;
    min-height: 36px;
  }

  /* Upload icon — slightly smaller on short screens */
  .upload-icon {
    font-size: 36px;
    padding: 14px;
    margin-bottom: 4px;
  }

  .upload-zone h3 {
    font-size: 17px;
  }

  .upload-zone p {
    font-size: 13px;
  }

  .browse-btn {
    padding: 10px 22px;
    font-size: 14px;
    min-height: 40px;
  }

  /* File preview — tighter spacing */
  .file-preview-header {
    margin-bottom: 10px;
  }

  .file-preview-grid {
    gap: 8px;
  }

  /* Success banner — compact */
  .listing-success-banner {
    padding: 12px 16px 14px 16px;
    margin: 6px 4px 8px 4px;
    gap: 8px;
  }

  /* Listing preferences hub banner — tighter */
  .listing-preferences-banner {
    margin: 10px 16px;
    border-radius: 10px;
  }

  .preferences-header {
    padding: 12px 16px;
    min-height: 48px;
  }

  .preferences-title {
    font-size: 14px;
  }

  /* Listing details row — tighter */
  .listing-details-container {
    padding: 12px 20px;
  }

  /* Listing tabs — slightly tighter */
  .listing-tabs-container {
    padding: 6px 20px 0;
  }
}

/* --- More aggressive adjustments for very short viewports (≤750px) --- */
@media (max-height: 750px) and (min-width: 768px) {
  .upload-header {
    padding: 8px 20px;
    min-height: 48px;
  }

  .upload-content {
    padding: 12px 16px;
    gap: 12px;
  }

  .upload-zone {
    padding: 20px 20px;
    min-height: 140px;
  }

  .upload-zone.has-files {
    min-height: 100px;
    padding: 10px 16px;
  }

  .upload-icon {
    font-size: 28px;
    padding: 10px;
  }

  .browse-btn {
    padding: 8px 18px;
    font-size: 13px;
    min-height: 36px;
  }

  .listing-preferences-banner {
    margin: 8px 12px;
  }

  .preferences-header {
    padding: 10px 14px;
    min-height: 44px;
  }
}


/* ============================================
   🛡️ PRE-FLIGHT VALIDATION BANNER
   ============================================ */

.preflight-validation-banner {
  display: none;
  margin: 0 16px 8px 16px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  border-radius: 10px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  box-shadow: 0 2px 10px rgba(239, 68, 68, 0.2);
  animation: preflightSlideIn 0.3s ease-out;
  flex-shrink: 0;
  z-index: 10;
}

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

.preflight-validation-content {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.preflight-validation-icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #fca5a5;
}

.preflight-validation-messages {
  flex: 1;
  min-width: 0;
}

.preflight-error-line {
  margin: 0 0 6px 0;
  padding: 0;
  color: #fef2f2;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}

.preflight-error-line:last-child {
  margin-bottom: 0;
}

.preflight-validation-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  margin-left: 4px;
}

.preflight-fix-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #fef2f2;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.preflight-fix-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
}

.preflight-override-btn {
  background: transparent;
  color: #fca5a5;
  border: 1px solid rgba(252, 165, 165, 0.3);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.preflight-override-btn:hover {
  background: rgba(252, 165, 165, 0.1);
  color: #fef2f2;
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .preflight-validation-banner {
    margin: 0 10px 6px 10px;
    padding: 10px 12px;
  }

  .preflight-validation-content {
    flex-wrap: wrap;
  }

  .preflight-validation-actions {
    flex-direction: row;
    width: 100%;
    margin-left: 0;
    margin-top: 8px;
  }

  .preflight-fix-btn,
  .preflight-override-btn {
    flex: 1;
    text-align: center;
  }
}