/* Progress bar transition - smooth width changes from JavaScript */
.progress-bar-inner {
  transition: width 0.5s ease-out;
}

/* Dragover state for upload box */
.dragover {
  border-color: #667eea !important;
  background-color: rgba(102, 126, 234, 0.05) !important;
}

/* Copy button copied state */
.copy-btn.copied {
  background-color: #10b981 !important;
  border-color: #059669 !important;
  color: white !important;
}

/* Cookie banner show animation */
#cookie-banner.show {
  transform: translateY(0) !important;
}

/* Legal content pages (Terms, Privacy) */
.legal-content {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
  .legal-content {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }
}

@media (min-width: 768px) {
  .legal-content {
    padding: 2rem;
  }
}

.dark .legal-content {
  background-color: #1f2937;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.legal-content h1 {
  font-size: 2rem;
  color: #2c3e50;
  margin-bottom: 1.5rem;
  text-align: center;
}

.dark .legal-content h1 {
  color: #f3f4f6;
}

.legal-content section {
  margin-bottom: 2rem;
}

.legal-content h2 {
  font-size: 1.4rem;
  color: #2c3e50;
  margin-bottom: 1rem;
}

.dark .legal-content h2 {
  color: #e5e7eb;
}

.legal-content p, .legal-content li {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}

.dark .legal-content p, .dark .legal-content li {
  color: #d1d5db;
}

.legal-content ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

/* Rust port fix (PARITY.md): the banner's Tailwind v4 `translate-y-full` sets the
   `translate` property, which the Rails rule above (`transform`) does not reset,
   so the banner never slid into view. The right padding keeps the Accept button
   clear of the GTM support chat bubble (56px, fixed 20px from the bottom right). */
#cookie-banner.show {
  translate: 0 0;
  padding-right: 96px;
}