/* 9:16 holder with cover image */
#short-preview, #live-preview, #preview-holder, #ai-result-preview {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  overflow: hidden;
  border-radius: 12px;
}
#short-preview img,
#live-preview img,
#preview-holder img,
#ai-result-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#caption-overlay {
  z-index: 2;
}


/* Prevent AI result preview from growing too wide */
#ai-result-preview {
  max-width: 420px;
}

/* Phone-like live preview sizing */
#live-preview-container .relative {
  width: 360px;
  max-width: 480px;
}


/* --- Preview font parity with FFmpeg --- */
@font-face {
  font-family: "DejaVu Sans Local";
  src:
    url("/assets/fonts/DejaVuSans.woff2") format("woff2"),
    url("/assets/fonts/DejaVuSans.ttf") format("truetype"); /* fallback */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DejaVu Sans Local";
  src:
    url("/assets/fonts/DejaVuSans-Bold.woff2") format("woff2"),
    url("/assets/fonts/DejaVuSans-Bold.ttf") format("truetype"); /* fallback */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.caption-preview {
  font-family: "DejaVu Sans Local", "DejaVu Sans", "DejaVuSans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: normal;
  font-kerning: normal;
}