/* Kontener progressu jako kolumna */
#progress-container,
#uploaderProgressContainer{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Pasek jako "track" z overlayem tekstu */
#progress-container .progress-track,
#uploaderProgressContainer .progress-track{
  position:relative;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(0,0,0,.08);
}

/* Wypełnienie paska */
#progress-bar,
#uploaderProgressBar{
  height:100%;
  border-radius:999px;
  transition: width .2s ease;
}

/* Tekst na pasku (centrowany overlay) */
#progress-text,
#uploaderProgressText{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2px;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 1px rgba(0,0,0,.18);
  pointer-events:none;
}

/* Jedna linia statusu pod paskiem */
#upload-status,
#uploaderStatus{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:11px;
  line-height:1.2;
  color: rgba(0,0,0,.62);
}

/* Lewa część statusu */
#upload-status .status-left,
#uploaderStatus .status-left{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

/* Tekst statusu niech się ładnie ucina */
#upload-status .status-left .status-text,
#uploaderStatus .status-left .status-text{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Spinner (wspólna animacja) */
@keyframes spin { to { transform: rotate(360deg); } }

/* Spinner w overlay NA pasku (jasny, pod białe napisy) */
#progress-text .spinner,
#uploaderProgressText .spinner{
  width:12px;
  height:12px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.9);
  border-radius:999px;
  animation: spin 0.8s linear infinite;
  flex:0 0 auto;
  margin-right:6px;
  display:inline-block;
}

/* Etap 2/2: pasek pełny + delikatna zmiana “koloru” (premium processing state) */
@keyframes processingHue {
  0%   { filter: hue-rotate(0deg)  saturate(1.00) brightness(1.00); }
  50%  { filter: hue-rotate(18deg) saturate(1.15) brightness(1.02); }
  100% { filter: hue-rotate(0deg)  saturate(1.00) brightness(1.00); }
}

#progress-bar.is-processing,
#uploaderProgressBar.is-processing{
  animation: processingHue 1.6s ease-in-out infinite;
}