ps-gif-progress-indicator {
  position: fixed;
  right: 1rem;
  bottom: 5.25rem;
  z-index: 125;
  color: #fff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.gif-progress-pill,
.gif-progress-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border: 0;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.gif-progress-pill {
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #15803d, #22c55e);
  box-shadow: 0 0.75rem 2rem rgb(0 0 0 / 35%);
  animation: gif-progress-pulse 2s ease-in-out infinite;
}

.gif-progress-panel {
  width: min(20rem, calc(100vw - 2rem));
  overflow: hidden;
  border: 1px solid #374151;
  border-radius: 0.75rem;
  background: #1a1a1a;
  box-shadow: 0 1.25rem 3rem rgb(0 0 0 / 50%);
}

.gif-progress-header {
  width: 100%;
  padding: 0.8rem;
  justify-content: flex-start;
  border-bottom: 1px solid #374151;
  background: linear-gradient(90deg, rgb(22 163 74 / 22%), rgb(34 197 94 / 10%));
}

.gif-progress-header > :last-child { margin-left: auto; color: #9ca3af; }
.gif-progress-list { max-height: 16rem; overflow: auto; }
.gif-progress-job { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; padding: 0.8rem; border-bottom: 1px solid #262626; }
.gif-progress-job:last-child { border-bottom: 0; }
.gif-progress-job.is-ready { background: rgb(20 83 45 / 18%); }
.gif-progress-job div { min-width: 0; }
.gif-progress-job strong { display: block; overflow: hidden; color: #f9fafb; font-size: 0.8rem; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; }
.gif-progress-job small { display: block; margin-top: 0.2rem; color: #6b7280; font-size: 0.7rem; }
.gif-progress-job div > span { display: flex; gap: 0.45rem; margin-top: 0.5rem; }
.gif-progress-job button { padding: 0.28rem 0.55rem; border: 0; border-radius: 0.3rem; color: #fff; background: #15803d; font: inherit; font-size: 0.68rem; cursor: pointer; }
.gif-progress-job button + button { color: #d1d5db; background: #374151; }
.gif-progress-check { color: #22c55e; }
.gif-progress-spinner { width: 1rem; height: 1rem; border: 2px solid rgb(255 255 255 / 35%); border-top-color: #4ade80; border-radius: 50%; animation: gif-progress-spin 700ms linear infinite; }
.gif-progress-sparkle { color: #dcfce7; }

@keyframes gif-progress-spin { to { transform: rotate(360deg); } }
@keyframes gif-progress-pulse { 50% { box-shadow: 0 0.75rem 2.2rem rgb(34 197 94 / 38%); } }

@media (min-width: 769px) { ps-gif-progress-indicator { bottom: 1rem; } }
@media (prefers-reduced-motion: reduce) { .gif-progress-pill, .gif-progress-spinner { animation-duration: 1ms; animation-iteration-count: 1; } }