/* BrowserZip Custom Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Tab button states */
.tab-btn {
  color: rgb(107 114 128); /* gray-500 */
}

.tab-btn:hover {
  color: rgb(55 65 81); /* gray-700 */
}

.dark .tab-btn {
  color: rgb(156 163 175); /* gray-400 */
}

.dark .tab-btn:hover {
  color: rgb(229 231 235); /* gray-200 */
}

.tab-btn.active {
  background: white;
  color: rgb(17 24 39); /* gray-900 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

.dark .tab-btn.active {
  background: rgb(31 41 55); /* gray-800 */
  color: white;
}

/* Drop zone drag active state */
#drop-zone.drag-active {
  border-color: rgb(249 115 22); /* primary-500 */
  background: rgb(249 115 22 / 0.05);
}

#drop-zone.drag-active #drop-zone-default {
  display: none;
}

#drop-zone.drag-active #drop-zone-active {
  display: flex !important;
}

/* File tree item hover */
.file-item {
  transition: background-color 0.15s ease;
}

.file-item:hover {
  background: rgb(243 244 246); /* gray-100 */
}

.dark .file-item:hover {
  background: rgb(31 41 55); /* gray-800 */
}

/* Progress bar animation */
#progress-bar {
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Toast animations */
.toast-enter {
  animation: slideIn 0.3s ease-out;
}

.toast-exit {
  animation: slideOut 0.3s ease-in;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Scrollbar styling */
.overflow-y-auto::-webkit-scrollbar {
  width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgb(209 213 219); /* gray-300 */
  border-radius: 3px;
}

.dark .overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgb(75 85 99); /* gray-600 */
}

/* Trust bar padding for content */
body {
  padding-bottom: 60px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
  #trust-bar {
    font-size: 0.75rem;
  }
  
  #drop-zone {
    padding: 2rem 1rem;
  }
}