/* MP3 to MP4 — local styles. Everything else reuses the shared design system. */

.a2v-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
}
.a2v-file-info { min-width: 0; }
.a2v-file-name { font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a2v-file-info p.small { margin: 0.15rem 0 0; }

/* ---- Preview ---- */
.a2v-preview { position: relative; padding: 1rem; }
/* pan-y: a vertical swipe over the picture always scrolls the page; a clearly sideways drag repositions it
   (see the pointerdown/pointermove logic in tool.js) instead of trapping the whole preview area. */
.a2v-preview canvas { border-radius: var(--radius-sm); background: var(--surface-sunken); touch-action: pan-y; }
.a2v-preview.is-draggable canvas { cursor: grab; }
.a2v-preview.is-draggable canvas:active,
.a2v-preview canvas.is-dragging { cursor: grabbing; }

.a2v-playbar { margin-top: 0.75rem; align-items: center; }
.a2v-scrub { flex: 1; }

.a2v-pic-thumb {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  overflow: hidden;
}
.a2v-pic-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Result ---- */
video.a2v-player {
  width: 100%;
  max-width: 24rem;
  max-height: 60vh;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: var(--shadow);
}

@media (max-width: 640px) {
  .a2v-preview { padding: 0.5rem; }
}