/* Video to GIF — the video with a shape/caption overlay, the part picker (track + two handles), the result. */

/* The video fills the preview's width, as tall as the screen allows (--ar = width / height, set from the file). */
.v2g-preview { display: block; }
.v2g-stage { position: relative; width: min(100%, calc(var(--preview-max-h, 68vh) * var(--ar, 1.7778))); margin: 0 auto; line-height: 0; }
.v2g-stage video, .v2g-stage .v2g-still {
  display: block; width: 100%; height: auto; border-radius: var(--radius-sm); background: #000;
}
.v2g-stage video[hidden] { display: none; }
.v2g-overlay { position: absolute; left: 0; top: 0; pointer-events: none; border-radius: var(--radius-sm); }

/* The part picker */
.v2g-trim { margin-top: 1rem; padding: 0 12px; }
.v2g-track {
  position: relative; height: 44px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1px solid var(--border); cursor: pointer; touch-action: pan-y;
}
.v2g-range {
  position: absolute; top: -1px; bottom: -1px; background: var(--primary-soft);
  border-top: 2px solid var(--primary); border-bottom: 2px solid var(--primary);
}
.v2g-head { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--text); border-radius: 1px; pointer-events: none; z-index: 1; }
.v2g-handle {
  position: absolute; top: 50%; width: 20px; height: 54px; margin-left: -10px; transform: translateY(-50%); z-index: 2;
  border-radius: 7px; background: var(--primary); box-shadow: var(--shadow-sm); cursor: ew-resize; touch-action: none;
  display: grid; place-items: center;
}
/* A bigger invisible grip, so fingers find the handle easily */
.v2g-handle::before { content: ''; position: absolute; inset: -6px -12px; }
.v2g-handle::after { content: ''; width: 6px; height: 18px; border-left: 2px solid var(--on-primary); border-right: 2px solid var(--on-primary); opacity: .85; }
.v2g-handle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.v2g-handle.is-dragging { background: var(--primary-hover); }
@media (hover: hover) { .v2g-handle:hover { background: var(--primary-hover); } }
.v2g-times { display: flex; justify-content: space-between; gap: .5rem; margin-top: .55rem; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.v2g-length { font-weight: 600; color: var(--text); }
.v2g-buttons { margin-top: .75rem; flex-wrap: wrap; }
.v2g-file { margin: .75rem 0 0; overflow-wrap: anywhere; }
.v2g-summary { margin: .75rem 0 0; padding: .6rem .8rem; border-radius: var(--radius-sm); background: var(--surface-2); font-size: .9rem; color: var(--text-soft); }

/* The result */
.v2g-result { max-width: 760px; margin-inline: auto; }
.v2g-result-preview { min-height: 0; padding: 1rem; }
.v2g-result-preview img { display: block; max-width: 100%; max-height: var(--preview-max-h, 68vh); width: auto; height: auto; margin: 0 auto; }
.v2g-result .actions { justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .v2g-trim { padding: 0 10px; }
  .v2g-buttons .btn { min-height: 44px; }
}

/* Several numbered steps in one panel */
.workspace-side .panel > .step ~ .step { margin-top: 1.6rem; }