/* ============================================
   Loading Bar - YouTube-style progress indicator
   ============================================ */

.loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.loading-bar.active {
  opacity: 1;
}

.loading-bar.complete {
  opacity: 0;
}

.loading-bar-progress {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #00d4ff, #00b8e6);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.7),
              0 0 5px rgba(0, 212, 255, 0.5);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-out;
  position: relative;
}

/* Pulsing glow effect while loading */
.loading-bar.active .loading-bar-progress::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
  animation: loadingShimmer 1s ease-in-out infinite;
}

@keyframes loadingShimmer {
  0% { opacity: 0.4; }
  50% { opacity: 1; }
  100% { opacity: 0.4; }
}

/* Light theme adjustments */
[data-theme="light"] .loading-bar-progress {
  background: linear-gradient(90deg, #0099cc, #007aa3);
  box-shadow: 0 0 10px rgba(0, 153, 204, 0.5),
              0 0 5px rgba(0, 153, 204, 0.3);
}

/* ============================================
   Loading Skeleton for Icons
   ============================================ */
.icon.loading {
  background: linear-gradient(90deg,
    var(--bg-tertiary) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    var(--bg-tertiary) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s infinite;
  border-radius: 8px;
}

.icon.loading .icon-img {
  opacity: 0;
}

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