/**
 * transcode-status.css — StreamKite
 * ===================================
 * Styles for file-processing states on slot cards and minimal-view rows.
 * Add to dashboard.html: <link rel="stylesheet" href="transcode-status.css">
 *
 * Classes applied dynamically by transcode-status.js:
 *   .sk-processing-badge   — gear icon + "Processing" label next to filename
 *   .sk-ready-badge        — green checkmark "Ready" label (brief flash on transition)
 *   .sk-error-badge        — red warning when conversion failed
 *   .sk-start-locked       — applied to the slot card when start is blocked
 *   .sk-start-locked-btn   — applied to the ▶ Start / ▶ tb-ib-go button itself
 */

/* ── Processing badge (inline, next to filename) ──────────────────────────── */
.sk-processing-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--accent, #f97316);
  background: rgba(249, 115, 22, 0.08);
  border: 1px solid rgba(249, 115, 22, 0.28);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
  animation: skProcessingPulse 2s ease-in-out infinite;
}

.sk-processing-badge .sk-gear {
  display: inline-block;
  font-size: 0.72rem;
  animation: skGearSpin 2s linear infinite;
}

@keyframes skGearSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes skProcessingPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.65; }
}

/* ── Ready badge (shown briefly on transition, then removed) ──────────────── */
.sk-ready-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--green, #10b981);
  background: rgba(16, 185, 129, 0.09);
  border: 1px solid rgba(16, 185, 129, 0.28);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
  animation: skReadyFlash 0.4s ease;
}

@keyframes skReadyFlash {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Error badge ─────────────────────────────────────────────────────────── */
.sk-error-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--red, #ef4444);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Processing notice bar (shown inside the slot card) ───────────────────── */
.sk-processing-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 4px 0 2px;
  background: rgba(249, 115, 22, 0.06);
  border: 1px solid rgba(249, 115, 22, 0.2);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--muted2, #94a3b8);
  line-height: 1.4;
  animation: skFadeIn 0.3s ease;
}

.sk-processing-notice .sk-notice-icon {
  font-size: 0.85rem;
  flex-shrink: 0;
  animation: skGearSpin 2.5s linear infinite;
}

.sk-processing-notice strong {
  color: var(--accent, #f97316);
}

@keyframes skFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Locked slot card — subtle left border pulse ─────────────────────────── */
.sk-start-locked {
  position: relative;
}

.sk-start-locked::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #f97316), rgba(249, 115, 22, 0.3));
  border-radius: 3px 0 0 3px;
  animation: skLockedBorderPulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes skLockedBorderPulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

/* ── Locked Start button ─────────────────────────────────────────────────── */
.sk-start-locked-btn,
.sk-start-locked-btn:hover,
.sk-start-locked-btn:focus {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: grayscale(40%);
  position: relative;
}

/* ── Minimal-view (table row) processing state ───────────────────────────── */
.tb-row.sk-start-locked .tb-ib-go {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
}

/* ── Playlist file row processing state ──────────────────────────────────── */
.pl-widget-file.sk-pl-processing .pl-file-name::after,
.playlist-item.sk-pl-processing .playlist-item-name::after {
  content: ' ⚙️';
  font-size: 0.7em;
  opacity: 0.7;
}

/* ── Upload zone: show processing overlay on the filename area ───────────── */
.upload-zone.sk-zone-processing .upload-filename,
.upload-zone.sk-zone-processing .upload-hint {
  position: relative;
}

.sk-fname-processing-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

/* ── Toast for "Ready" notification ─────────────────────────────────────── */
.sk-ready-toast {
  display: flex;
  align-items: center;
  gap: 8px;
  animation: skFadeIn 0.3s ease;
}