/* Styles the capture panel and its editable composition preview across desktop and touch workspaces. */
#recording-dialog { width: min(1000px, 96vw); max-height: 94dvh; padding: 0; color: #e4e8ef; background: #191d24; border: 1px solid #404854; border-radius: 14px; overflow: auto; }
#recording-dialog::backdrop { background: #0009; }
.recording-heading { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #343b46; }
.recording-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recording-body { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; padding: 18px; }
.recording-picture { min-width: 0; align-self: start; }
.recording-stage { position: relative; background: #080a0e; width: min(100%, calc(55dvh * var(--recording-aspect, 1.7778))); overflow: hidden; margin: auto; }
.recording-stage > video, .recording-stage > canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.recording-stage [hidden], #recording-dialog [hidden] { display: none !important; }
.recording-face { position: absolute; z-index: 2; touch-action: none; cursor: move; outline: 1px solid #ffffff9c; background: #15191f; }
.recording-face video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.recording-face span { position: absolute; bottom: 0; left: 0; right: 0; background: #0008; color: #fff; font-size: 10px; padding: 3px; text-align: center; pointer-events: none; }
.recording-face:focus-visible { outline: 3px solid #74baff; }
.recording-layout { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.recording-layout label, .recording-controls label { display: flex; gap: 8px; align-items: center; justify-content: space-between; font-size: 12px; }
.recording-controls { display: grid; align-content: start; gap: 12px; }
.recording-settings { display: grid; gap: 10px; }
.recording-controls .recording-check { justify-content: start; }
#recording-dialog select { min-height: 34px; max-width: 100%; background: #252c36; color: #edf1f6; border: 1px solid #46505e; border-radius: 5px; }
.recording-device { display: flex; gap: 6px; min-width: 0; }
.recording-device select { min-width: 0; flex: 1; }
.recording-level canvas, .recording-controls details canvas { width: 100%; background: #0d1117; border-radius: 3px; margin-top: 6px; }
.recording-status { margin: 0; padding: 8px 18px; min-height: 40px; font-size: 13px; color: #b3c1d0; }
.recording-status[data-error="true"] { color: #ffad9c; }
.recording-transport { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 18px; background: #191d24; border-top: 1px solid #343b46; }
.recording-transport button { min-height: 44px; }
.recording-time { font: 20px ui-monospace, monospace; margin-right: auto; }
#recording-dialog[data-state="recording"] .recording-time { color: #ff727d; }
.recording-start { background: #a62538; color: white; border-color: #c93c50; }
@media (max-width: 760px) {
  #recording-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .recording-body { display: flex; flex-direction: column; padding: 12px; gap: 12px; }
  .recording-picture { width: 100%; }
  .recording-stage { width: min(100%, calc(38dvh * var(--recording-aspect, 1.7778))); }
  .recording-controls { grid-template-columns: 1fr 1fr; gap: 10px; }
  .recording-settings { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .recording-controls label { min-height: 32px; }
  .recording-transport { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .recording-transport button { font-size: 12px; padding: 8px; }
}

#recording-dialog #preview-canvas { outline: none; box-shadow: none; }

#recording-dialog.recording-audio-only { width: min(620px, 96vw); }
.recording-audio-only .recording-picture { display: none; }
.recording-audio-only .recording-body { grid-template-columns: 1fr; }
.recording-audio-only .recording-level canvas { height: 72px; }

.recording-transport .recording-status { flex-basis: 100%; padding: 0; min-height: 0; }

.recording-transport .icon-button { width: 44px; min-width: 44px; padding: 10px; }
.recording-db { display: block; font: 11px ui-monospace, monospace; color: #b3c1d0; margin: 3px 0; }
.recording-close-choices { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid #46505e; padding-top: 10px; }
.recording-close-choices p { flex-basis: 100%; margin: 0; }
#media-import-menu { max-height: min(420px, 65dvh); overflow-y: auto; }