.photo-dialog { width: min(800px, calc(100% - 24px)); padding: 24px; }
.photo-options { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin: 16px 0; }
.photo-options > label { flex: 1 1 160px; min-width: 0; font-size: 14px; }
.photo-options select { display: block; margin-top: 4px; font-size: 16px; }
.photo-options .photo-mirror { display: flex; align-items: center; flex: 0 1 auto; min-height: 44px; gap: 8px; }
.photo-mirror input { width: 20px; min-height: 20px; height: 20px; margin: 0; accent-color: var(--blue); }
.photo-frame { position: relative; display: grid; place-items: center; height: min(48dvh, 440px); min-height: 160px; overflow: hidden; background: var(--soft); border: 1px solid var(--line); border-radius: 6px; }
.photo-frame video, .photo-frame img { display: block; width: 100%; height: 100%; max-height: 100%; min-height: 0; object-fit: contain; margin: 0; }
.photo-frame video.mirrored { transform: scaleX(-1); }
.photo-frame > p { padding: 16px; margin: 0; text-align: center; color: var(--muted); }
#photo-countdown { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); background: #18242c80; font-size: 64px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
#photo-camera-status { min-height: 24px; margin-top: 12px; }
.photo-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.photo-buttons button { flex: 1 1 auto; }
.photo-dialog .field-error:empty { display: none; }
@media (max-width: 600px) {
  .photo-dialog { padding: 16px; }
  .photo-options { gap: 8px 12px; }
  .photo-options > label { flex-basis: 110px; }
  .photo-options .photo-mirror { flex-basis: 100%; }
  .photo-dialog .dialog-heading { gap: 8px; }
}
@media (forced-colors: active) {
  #photo-countdown { color: CanvasText; background: Canvas; }
}