/**
 * state.css
 * ---------------------------------------------------------------------------
 * Everything that changes with interaction or processing state: progress
 * bars (which only exist to communicate an in-flight operation), batch
 * item status transitions, button loading/disabled treatment. Depends on
 * the custom properties defined in imganva-tools.css (must load first).
 * This is the last of the four CSS files to load.
 *
 * WHY PROGRESS BARS LIVE HERE, NOT IN imganva-tools.css:
 *   Every other component styled in imganva-tools.css has a meaningful
 *   "resting" appearance — a button looks like a button whether or not
 *   anyone's about to click it. A progress bar has no resting state that
 *   means anything; it exists only to represent a value that changes
 *   over the course of an operation. That makes it a state concern by
 *   definition, not a base-theme one — it belongs here.
 *
 * THE LOADING SPINNER REUSES THE BRAND MARK:
 *   imganva-tools.css introduces one deliberately branded flourish: a
 *   small faceted cube before every tool's heading, described there as
 *   "the one deliberately branded flourish in an otherwise disciplined,
 *   utilitarian UI." This file reuses that exact same icon
 *   (--imganva-cube-icon) as the spinning indicator on a loading button,
 *   rather than introducing a second, unrelated spinner shape. The
 *   result: the brand mark and "something is happening" become the same
 *   visual idea throughout the plugin, instead of two competing pieces
 *   of iconography.
 *
 * PROGRESS BAR FIX THIS FILE ENCODES:
 *   The audit's OCR finding — "Progress bar moves during loading phase
 *   (not stuck at 0%)" — was fixed at the data layer in ocr.js
 *   (mapTesseractProgress reserves a 0–30% band for preparation phases
 *   instead of sitting at 0 until recognition starts). This file adds a
 *   subtle continuous shimmer to the fill itself, so even a bar that's
 *   only advanced a few percent still visibly reads as "live" rather
 *   than "frozen," reinforcing the fix rather than depending on it alone.
 * ---------------------------------------------------------------------------
 */

/** =========================================================================
 *  SINGLE PROGRESS BAR (templates/progress.js — createSingle)
 *  Also styles createBatch()'s summary row, which reuses these same
 *  class names (imganva-progress-message / imganva-progress /
 *  imganva-progress-fill) by design — see progress.js.
 *  ========================================================================= */
.imganva-progress-wrap {
  margin: var(--imganva-space-4) 0 var(--imganva-space-5) 0;
}

.imganva-progress-message {
  font-size: var(--imganva-text-sm);
  color: var(--imganva-text-muted);
  margin-bottom: var(--imganva-space-2);
  animation: imganva-pulse-fade 1.6s ease-in-out infinite;
}

.imganva-progress {
  position: relative;
  height: 6px;
  border-radius: var(--imganva-radius-full);
  background: var(--imganva-surface-raised);
  overflow: hidden;
}

.imganva-progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--imganva-radius-full);
  background: linear-gradient(90deg, var(--imganva-purple), var(--imganva-cyan));
  background-size: 200% 100%;
  transition: width 300ms ease;
  animation: imganva-progress-shimmer 1.4s linear infinite;
}
.imganva-batch-progress.imganva-batch-done .imganva-progress-fill {
  animation: none;
  background-position: 0% 0%;
}

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

@keyframes imganva-pulse-fade {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/** =========================================================================
 *  BATCH PROGRESS — SUMMARY ROW SPACING
 *  ========================================================================= */
.imganva-batch-progress {
  margin: var(--imganva-space-5) 0;
}

.imganva-batch-summary {
  margin-bottom: var(--imganva-space-4);
}

/** =========================================================================
 *  BATCH PROGRESS — PER-ITEM LIST
 *  ========================================================================= */
.imganva-batch-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--imganva-space-2);
  max-height: 280px;
  overflow-y: auto;
}

.imganva-batch-item {
  display: flex;
  align-items: center;
  gap: var(--imganva-space-3);
  padding: var(--imganva-space-2) var(--imganva-space-3);
  background: var(--imganva-surface);
  border: 1px solid var(--imganva-border);
  border-radius: var(--imganva-radius-sm);
  transition: background var(--imganva-transition-base), border-color var(--imganva-transition-base);
}

.imganva-batch-item-icon {
  flex: 0 0 auto;
  width: 1.25em;
  text-align: center;
  font-size: var(--imganva-text-base);
  line-height: 1;
  color: var(--imganva-text-faint);
}

.imganva-batch-item-name {
  flex: 1 1 auto;
  font-size: var(--imganva-text-sm);
  color: var(--imganva-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.imganva-batch-item-status {
  flex: 0 0 auto;
  font-family: var(--imganva-font-mono);
  font-size: var(--imganva-text-xs);
  color: var(--imganva-text-muted);
  white-space: nowrap;
}

/** ---- Status: pending (queued, untouched) ---- */
.imganva-batch-item-pending {
  opacity: 0.65;
}

/** ---- Status: processing (currently active) ---- */
.imganva-batch-item-processing {
  border-color: var(--imganva-cyan);
  background: rgba(80, 254, 254, 0.06);
}

.imganva-batch-item-processing .imganva-batch-item-icon {
  color: var(--imganva-cyan);
  animation: imganva-spin 900ms linear infinite;
}

.imganva-batch-item-processing .imganva-batch-item-status {
  color: var(--imganva-cyan);
}

/** ---- Status: done ---- */
.imganva-batch-item-done {
  border-color: rgba(52, 211, 153, 0.35);
}

.imganva-batch-item-done .imganva-batch-item-icon {
  color: var(--imganva-success);
}

.imganva-batch-item-done .imganva-batch-item-status {
  color: var(--imganva-text-muted);
}

/** ---- Status: error ---- */
.imganva-batch-item-error {
  border-color: rgba(248, 113, 113, 0.35);
  background: var(--imganva-error-bg);
}

.imganva-batch-item-error .imganva-batch-item-icon,
.imganva-batch-item-error .imganva-batch-item-status {
  color: var(--imganva-error);
}

/** ---- Status: skipped (validation-rejected before processing started) ---- */
.imganva-batch-item-skipped {
  opacity: 0.6;
}

.imganva-batch-item-skipped .imganva-batch-item-name {
  text-decoration: line-through;
  text-decoration-color: var(--imganva-text-faint);
}

@keyframes imganva-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/** =========================================================================
 *  BUTTON LOADING STATE
 *  Reuses the faceted-cube brand mark as a spinner — see file header.
 *  ========================================================================= */
.imganva-button-loading {
  cursor: progress;
  opacity: 0.9;
}

.imganva-button-loading::before {
  content: '';
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-image: var(--imganva-cube-icon);
  background-repeat: no-repeat;
  background-size: contain;
  animation: imganva-spin 900ms linear infinite;
}

/** =========================================================================
 *  GENERIC DISABLED STATE
 *  Covers every disabled path in the plugin: a primary/secondary button
 *  mid-operation, the same-format guard disabling Convert, or a ZIP
 *  button disabled because a batch produced zero successful results.
 *  One rule for all of them rather than a bespoke disabled treatment
 *  per component.
 *  ========================================================================= */
.imganva-tool-container button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.imganva-tool-container button:disabled:hover {
  background: inherit;
}

.imganva-button:disabled:hover {
  background: var(--imganva-purple);
}

.imganva-button.secondary:disabled:hover {
  background: var(--imganva-surface-raised);
  border-color: var(--imganva-border);
}

/** =========================================================================
 *  ERROR BLOCK INTERACTIVE POLISH
 *  Dismiss/retry buttons aren't built from templates/button.js (they're
 *  custom elements inside templates/error.js), so their hover/focus
 *  states aren't covered by the generic .imganva-button rules and need
 *  their own state treatment here.
 *  ========================================================================= */
.imganva-error-block-dismiss {
  transition: background var(--imganva-transition-fast), color var(--imganva-transition-fast);
}

.imganva-error-block-dismiss:hover {
  background: currentColor;
}

.imganva-error-block-warning .imganva-error-block-dismiss:hover {
  color: var(--imganva-bg);
}

.imganva-error-block-dismiss:focus-visible {
  outline: none;
  box-shadow: var(--imganva-focus-ring);
}

.imganva-error-retry:focus-visible {
  outline: none;
  box-shadow: var(--imganva-focus-ring);
}
/** =========================================================================
 *  MERGED BATCH RESULT CARD (replaces separate ZIP box + results list)
 *  ========================================================================= */
.imganva-batch-card {
  background: var(--imganva-surface);
  border: 1px solid var(--imganva-border);
  border-radius: var(--imganva-radius-md);
  padding: var(--imganva-space-5);
  margin-top: var(--imganva-space-5);
}

.imganva-batch-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--imganva-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--imganva-space-4);
}

.imganva-batch-badges {
  display: flex;
  gap: var(--imganva-space-2);
  flex-wrap: wrap;
}

.imganva-batch-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--imganva-space-1);
  font-family: var(--imganva-font-mono);
  font-size: var(--imganva-text-sm);
  font-weight: 600;
  padding: var(--imganva-space-1) var(--imganva-space-3);
  border-radius: var(--imganva-radius-full);
}

.imganva-batch-badge-success {
  color: var(--imganva-success);
  background: var(--imganva-success-bg);
}

.imganva-batch-badge-error {
  color: var(--imganva-error);
  background: var(--imganva-error-bg);
}

.imganva-batch-card-header .imganva-button {
  width: auto;
}

.imganva-batch-card-body .imganva-batch-result-list {
  margin: 0;
}

@media (max-width: 640px) {
  .imganva-batch-card-header {
    flex-direction: column;
    align-items: stretch;
  }
  .imganva-batch-card-header .imganva-button {
    width: 100%;
  }
}

/** =========================================================================
 *  ACCESSIBILITY
 *  imganva-tools.css already forces all animation/transition durations
 *  to ~0 under prefers-reduced-motion for the whole widget, which covers
 *  every keyframe animation introduced in this file (shimmer, spin,
 *  pulse-fade) without needing to repeat the query here.
 *  ========================================================================= */