/* App workspace: the link form stays in a left panel; progress and clips fill the right.
   Loaded after theme.css on index.html. */

.shell { max-width: 1320px !important; padding: 0 24px 64px !important; }
.hdr { padding: 18px 0 !important; margin-bottom: 24px; }

.workspace { display: grid; grid-template-columns: 372px minmax(0, 1fr); gap: 24px; align-items: start; }

/* ── Left: new video ── */
.compose {
  position: sticky; top: 16px;
  padding: 22px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
}
.compose .hero { margin: 0 !important; }
.compose .hero-eyebrow { display: none !important; }
.compose .hero-title { font-size: 1.45rem !important; line-height: 1.12 !important; margin: 0 0 6px !important; letter-spacing: -0.035em !important; }
.compose .hero-title br { display: none; }
.compose .hero-sub { font-size: 0.9rem !important; margin: 0 0 18px !important; max-width: none !important; }
.compose .url-row { padding: 5px 5px 5px 16px !important; }
.compose .url-input { font-size: 0.92rem !important; min-width: 0; }
.compose .settings { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; padding: 16px !important; background: var(--c-raised) !important; border: 1px solid var(--c-border) !important; }
.compose .setting-controls { flex-wrap: wrap; }
.compose .count-row { display: flex; align-items: center; gap: 12px; }
.compose .count-slider { flex: 1; width: auto !important; }

/* While a job runs the form stays visible but locked */
.compose #heroSection.hidden { display: block !important; }
.compose #heroSection.hidden .input-block { opacity: 0.5; pointer-events: none; }

.quota { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--c-border); font-size: 0.84rem; color: var(--c-muted); }
.quota b { color: var(--c-text); font-weight: 600; }
.quota a { color: var(--c-accent); font-weight: 600; text-decoration: none; white-space: nowrap; }
.quota a:hover { text-decoration: underline; }
.quota-bar { height: 4px; margin-top: 10px; border-radius: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.quota-bar i { display: block; height: 100%; border-radius: 4px; background: var(--c-accent); transition: width 0.3s ease; }

/* ── Right: stage ── */
.stage { min-width: 0; min-height: 520px; }
.stage > section, .stage > .err-card { margin-top: 0 !important; }

.empty-state { padding: 40px 32px; border: 1px dashed var(--c-border-hi); border-radius: var(--r-xl); }
/* The empty state gives way as soon as there is progress, a result or an error */
.stage:has(.proc-section.active, .results-section.active, .err-card:not(.hidden)) .empty-state { display: none; }
.empty-state h2 { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.035em; }
.empty-state > p { margin-top: 6px; color: var(--c-muted); max-width: 52ch; }
.empty-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 26px; counter-reset: es; }
.empty-steps li { list-style: none; padding: 18px; border-radius: var(--r-lg); background: var(--c-surface); border: 1px solid var(--c-border); font-size: 0.9rem; color: var(--c-muted); }
.empty-steps li::before { counter-increment: es; content: counter(es); display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 12px; border-radius: 50%; background: var(--c-accent-dim); color: var(--c-accent); font-weight: 700; font-size: 0.8rem; }
.empty-steps b { display: block; color: var(--c-text); font-weight: 600; margin-bottom: 4px; }
.recent { margin-top: 30px; }
.recent-hdr { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.recent-hdr h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
.recent-hdr button { background: none; border: 0; color: var(--c-accent); font: 500 0.84rem var(--ff-body); cursor: pointer; }
.recent-list { display: grid; gap: 8px; }
.recent-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: var(--r-md); background: var(--c-surface); border: 1px solid var(--c-border); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s; }
.recent-item:hover { border-color: var(--c-border-hi); }
.recent-item img { width: 64px; height: 36px; object-fit: cover; border-radius: 6px; background: var(--c-raised); flex-shrink: 0; }
.recent-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.recent-item small { color: var(--c-dim); font-size: 0.78rem; white-space: nowrap; }

/* ── Progress ── */
.proc-section.active { padding: 24px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); }
.eta-display {
  font-family: var(--ff-body) !important; font-weight: 500 !important; font-size: 0.9rem !important;
  color: var(--c-text) !important; letter-spacing: 0 !important;
  background: rgba(255,255,255,0.05) !important; border: 1px solid var(--c-border-hi) !important;
  border-radius: var(--r-pill) !important; box-shadow: none !important;
  padding: 9px 18px !important; min-width: 0 !important;
}
.eta-display::before { content: '' !important; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); animation: eta-pulse 1.4s ease-in-out infinite; }
.eta-display.done { color: var(--c-green) !important; border-color: var(--c-green) !important; }
.eta-display.done::before { content: '' !important; background: var(--c-green); animation: none; }
@keyframes eta-pulse { 50% { opacity: 0.3; transform: scale(0.7); } }
.stage-msg { font-family: var(--ff-body) !important; font-size: 0.88rem !important; text-align: center; height: auto !important; min-height: 20px; }
.prog-pct { font-family: var(--ff-body) !important; font-weight: 600; }

/* ── Results ── */
.results-hdr { align-items: center !important; gap: 12px; flex-wrap: wrap; margin-bottom: 16px !important; }
.results-tools { display: flex; align-items: center; gap: 8px; }
.sort-select { padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--c-border-hi); background: rgba(255,255,255,0.04); color: var(--c-text); font: 500 0.85rem var(--ff-body); cursor: pointer; }
.clips-grid { gap: 12px !important; }
.clip-card.open { border-color: var(--c-border-hi); }
.card-body-inner { grid-template-columns: 260px minmax(0, 1fr) !important; }

/* ── Smaller screens: one column, form first ── */
@media (max-width: 1023px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .compose { position: static; }
  .stage { min-height: 0; }
  .empty-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .shell { padding: 0 14px 48px !important; }
  .compose { padding: 16px; border-radius: var(--r-lg); }
  .empty-state { padding: 24px 18px; }
  .card-body-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .proc-section.active { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .eta-display::before { animation: none; } }

.video-meta p { font-family: var(--ff-body) !important; }

/* Clear the phone notch */
.ph-screen .pui-top { padding-top: 16cqw; }
.ph-screen .pui::before { height: 28%; }

/* The nav row sits on the page, not on its own dark strip */
.hdr .nav { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; }
.modal .s-label { font-size: 0.9rem !important; color: var(--c-text) !important; font-weight: 600 !important; margin-bottom: 4px; }
.modal .s-desc { font-size: 0.8rem !important; color: var(--c-muted) !important; }
.stab { text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85rem !important; border-radius: 999px !important; }