/* Konvertor videa — jen to, co vp-ui nemá: seznam souborů, zaškrtávátka
   a ukazatel průběhu. Zbytek (karty, pole, tlačítka) je čistě vp-ui. */

.cv-root .vp-card { margin-bottom: 14px; }

/* ── seznam vybraných souborů ── */
.cv-files {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.cv-file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-sm);
}

/* Náhled prvního snímku — ať je poznat, který soubor je který. */
.cv-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--vp-bg-alt);
  border: 1px solid var(--vp-border);
  display: grid;
  place-items: center;
}
.cv-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-thumb-empty { font-size: 18px; opacity: .45; }

.cv-file-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cv-file-name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Řádek „co to je": kontejner, kodek, rozlišení, fps, tok, délka, zvuk. */
.cv-file-meta {
  font-family: var(--vp-font-mono);
  font-size: 11px;
  color: var(--vp-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cv-file-meta .cv-dim { opacity: .6; }
.cv-file-meta .cv-warn { color: var(--vp-danger); }
.cv-file-size {
  flex: 0 0 auto;
  font-family: var(--vp-font-mono);
  font-size: 11.5px;
  color: var(--vp-text-muted);
}
.cv-empty {
  padding: 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--vp-text-muted);
  border: 1px dashed var(--vp-border);
  border-radius: var(--vp-radius-sm);
}

/* ── zaškrtávátko s vysvětlením ── */
.cv-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
  border-radius: var(--vp-radius-sm);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}
.cv-check input { margin-top: 2px; accent-color: var(--vp-accent); }
.cv-check .vp-help { margin-top: 2px; }

/* ── průběh ── */
.cv-prog-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.cv-prog {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--vp-surface-alt);
  border: 1px solid var(--vp-border);
  overflow: hidden;
}
.cv-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--vp-accent);
  transition: width .3s ease;
}
.cv-prog-pct {
  flex: 0 0 auto;
  min-width: 46px;
  text-align: right;
  font-family: var(--vp-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--vp-text-muted);
}

/* Skryté sekce formuláře nesmí nechat mezeru po sobě. */
.cv-root [hidden] { display: none !important; }

/* Posuvník míry zmenšení. vp-ui vlastní range styl nemá. */
.cv-range {
  width: 100%;
  accent-color: var(--vp-accent);
  margin: 4px 0 2px;
}

/* ── obrazovka „Companion neběží" ──
   Dřív to byl jen nadpis, odstavec a tlačítka. Teď rozlišuje „nemáš ho"
   od „máš, jen neběží" a sama pozná, kdy naskočí. */
.cv-gate { display: grid; gap: 14px; }
.cv-gate-head { display: flex; gap: 14px; align-items: flex-start; }
.cv-gate-icon { width: 52px; height: 52px; flex: 0 0 auto; border-radius: 12px; }
.cv-gate-head .vp-card-title { margin: 0 0 4px; }

.cv-steps {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 7px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--vp-text-muted);
}
.cv-steps b { color: var(--vp-text); }

.cv-gate-actions { flex-wrap: wrap; gap: 10px; align-items: center; }

.cv-gate-wait {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 12.5px;
  color: var(--vp-text-muted);
}
.cv-dot {
  width: 9px; height: 9px; flex: 0 0 auto;
  border-radius: 50%;
  background: var(--vp-accent);
  animation: cv-pulse 1.4s ease-in-out infinite;
}
@keyframes cv-pulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cv-dot { animation: none; opacity: .7; }
}