/* Nutshell — Generation Queue · shared primitives (used by all 3 options) */

/* ---- state dot / spinner -------------------------------------------------*/
.q-sdot{width:18px;height:18px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;}
.q-sdot--processing{background:transparent;}
.q-sdot--queued{background:var(--bg-sunken);color:var(--text-tertiary);box-shadow:inset 0 0 0 1px var(--border-control);}
.q-sdot--done{background:var(--success);}
.q-sdot--failed{background:var(--danger);}
.q-spin{width:13px;height:13px;border-radius:50%;border:2px solid var(--accent-tint);border-top-color:var(--accent);animation:qspin .8s linear infinite;}
@keyframes qspin{to{transform:rotate(360deg);}}

/* ---- linear progress bar -------------------------------------------------*/
.q-bar{height:5px;border-radius:999px;background:var(--shell-200);overflow:hidden;}
[data-appearance="dark"] .q-bar{background:var(--shell-700);}
.q-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--brand));transition:width .5s ease;}
.q-bar--queued i{background:var(--border-strong);}
.q-bar--failed i{background:var(--danger);}
.q-bar--done i{background:var(--success);}

/* ---- circular ring -------------------------------------------------------*/
.q-ring{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;}
.q-ring-in{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:700 10px/1 var(--font-mono,ui-monospace);color:var(--text-secondary);}

/* ---- state badge (text pill) --------------------------------------------*/
.q-badge{display:inline-flex;align-items:center;gap:5px;height:21px;padding:0 9px;border-radius:999px;flex:none;
  font:700 10px/1 var(--font-sans,inherit);letter-spacing:.02em;text-transform:uppercase;}
.q-badge--processing{background:var(--accent-tint);color:var(--text-accent);}
.q-badge--queued{background:var(--bg-sunken);color:var(--text-tertiary);}
.q-badge--done{background:color-mix(in oklab,var(--success),transparent 86%);color:var(--success);}
.q-badge--failed{background:color-mix(in oklab,var(--danger),transparent 86%);color:var(--danger);}

/* ---- generic job row (icon · meta · action) -----------------------------*/
.q-row{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;transition:background .12s;}
.q-row + .q-row{margin-top:2px;}
.q-row:hover{background:var(--bg-hover);}
.q-row--added{animation:qadd .5s ease;}
@keyframes qadd{from{background:var(--brand-tint);}to{background:transparent;}}
.q-row-ic{width:34px;height:34px;border-radius:10px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--bg-sunken);color:var(--text-secondary);border:.5px solid var(--border-hairline);}
.q-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.q-row-top{display:flex;align-items:center;gap:8px;}
.q-row-t{flex:1;min-width:0;font:600 13px/1.25 var(--font-sans,inherit);color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.q-row-sub{display:flex;align-items:center;gap:7px;font:500 11px/1.2 var(--font-sans,inherit);color:var(--text-tertiary);}
.q-row-sub .q-dotsep{width:3px;height:3px;border-radius:50%;background:var(--text-quaternary);flex:none;}
.q-row-eta{font:600 11px/1 var(--font-mono,ui-monospace);color:var(--text-tertiary);flex:none;}
.q-row-act{display:flex;align-items:center;gap:2px;flex:none;}

/* small round action button (cancel / retry / open) */
.q-act{width:28px;height:28px;border:none;background:transparent;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--text-tertiary);cursor:pointer;flex:none;transition:background .12s,color .12s;}
.q-act:hover{background:var(--bg-hover);color:var(--text-primary);}
.q-act--danger:hover{background:color-mix(in oklab,var(--danger),transparent 88%);color:var(--danger);}
.q-act--go{width:auto;padding:0 11px;gap:6px;height:28px;border-radius:999px;background:linear-gradient(180deg,var(--blue-400),var(--accent));color:#fff;
  font:600 11.5px/1 var(--font-sans,inherit);}
.q-act--go:hover{filter:brightness(1.05);color:#fff;}
.q-act--retry{width:auto;padding:0 11px;gap:6px;height:28px;border-radius:999px;border:.5px solid var(--border-control);background:var(--bg-raised);
  color:var(--text-primary);font:600 11.5px/1 var(--font-sans,inherit);}
.q-act--retry:hover{background:var(--bg-hover);}

/* ---- section label -------------------------------------------------------*/
.q-sec{display:flex;align-items:center;gap:8px;padding:0 4px 7px;font:700 10.5px/1 var(--font-sans,inherit);
  letter-spacing:.07em;text-transform:uppercase;color:var(--text-tertiary);}
.q-sec-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;
  background:var(--bg-sunken);color:var(--text-secondary);font:700 10px/1 var(--font-sans,inherit);letter-spacing:0;}
.q-sec-line{flex:1;height:.5px;background:var(--separator);}

/* ---- compose hint --------------------------------------------------------*/
.q-compose-hint{display:flex;align-items:center;gap:8px;margin-top:13px;padding:10px 12px;border-radius:11px;
  background:var(--bg-sunken);border:.5px solid var(--border-hairline);
  font:500 11.5px/1.4 var(--font-sans,inherit);color:var(--text-secondary);}
.q-compose-hint svg{color:var(--brand-strong);flex:none;}

/* ---- empty state ---------------------------------------------------------*/
.q-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:26px 18px;color:var(--text-tertiary);}
.q-empty svg{color:var(--success);}
.q-empty b{font:700 14px/1.2 var(--font-sans,inherit);color:var(--text-primary);}
.q-empty span{font:400 12px/1.4 var(--font-sans,inherit);max-width:240px;}