/* 2026-10-12 11:30 | y6y.io v2.02 | dictate layout (theme-neutral: colours, lines and shapes come from the shared theme.css tokens)
   Desktop: recorder, unfinished items and tidy-up options on the left; the editable text on the right.
   Phone: recorder, text, then options. Also the mini window (Document Picture-in-Picture). */

.dc-layout { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 22px; align-items: start; }
.dc-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* ---------- recorder ---------- */
.dc-recorder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 22px 18px; text-align: center; }
.dc-recorder__meta { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.dc-recorder.is-warning { border-color: var(--ui-failed); }

/* the record button: a large dial in the same style as drop_zone's + button */
.dc-rec {
  position: relative; width: 132px; height: 132px; flex: none; padding: 0; cursor: pointer;
  border-radius: 50%; border: var(--ui-line-thick); background: var(--ui-adder-ring); color: var(--ui-adder-ink); box-shadow: var(--ui-shadow);
  display: flex; align-items: center; justify-content: center; transition: transform 80ms ease, box-shadow 80ms ease;
}
.dc-rec::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: var(--ui-line-dashed); }
.dc-rec__hub {
  position: relative; width: 70px; height: 70px; border-radius: 50%; border: var(--ui-line);
  background: var(--ui-adder-hub); display: flex; align-items: center; justify-content: center;
}
.dc-rec:active { transform: var(--ui-press); box-shadow: none; }
.dc-rec:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 4px; }
.dc-rec:disabled { cursor: progress; opacity: 0.7; }
.dc-rec.is-recording { background: var(--ui-failed); }
.dc-rec.is-recording::before { animation: dc-spin 6s linear infinite; }
.dc-rec.is-recording .dc-rec__hub { background: var(--ui-surface); color: var(--ui-ink); }
@keyframes dc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dc-rec.is-recording::before { animation: none; } }

.dc-clock { font-size: 16px; font-variant-numeric: tabular-nums; }
.dc-level { width: min(260px, 100%); height: 10px; }
.dc-level .ui-progress__fill { transition: width 60ms linear; }
.dc-status { margin: 0; min-height: 1.4em; }
.dc-hint { margin: 0; }
.dc-countdown {
  font-weight: var(--ui-strong-weight); font-size: var(--ui-fs-label); padding: 6px 12px; border: var(--ui-line);
  border-radius: var(--ui-r-control); background: var(--ui-danger-bg); color: var(--ui-danger-ink); border-color: var(--ui-danger-line);
}

/* ---------- unfinished (held) dictations ---------- */
.dc-held { display: flex; flex-direction: column; gap: 12px; }
.dc-held .ui-title, .dc-options .ui-title, .dc-output .ui-title { margin: 0; }
.dc-held__row { align-items: flex-start; flex-wrap: wrap; }
.dc-held__row > .ui-dot { margin-top: 3px; }
.dc-held__row > .dz-device__body { flex: 1 1 0; }
.dc-held__actions { display: flex; gap: 8px; flex: 1 1 100%; padding-left: 24px; }

/* ---------- tidy-up options ---------- */
.dc-options { display: flex; flex-direction: column; gap: 14px; }
.dc-option.is-off, .dc-option--stack.is-off { opacity: 0.45; }
.dc-option--stack { display: flex; flex-direction: column; gap: 8px; }
.dc-option__label { font-size: var(--ui-fs-label); font-weight: 700; text-transform: var(--ui-chrome-case); }
.dc-ai-tag { margin-left: 8px; vertical-align: 1px; }
.dc-customs { display: flex; flex-direction: column; gap: 10px; }
.dc-custom { display: flex; align-items: flex-start; gap: 10px; }
.dc-custom__field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dc-custom .ui-switch, .dc-custom__delete { margin-top: 6px; flex: none; }
.dc-custom.is-paused .ui-field { opacity: 0.55; }
.dc-custom__count { align-self: flex-end; }
.dc-customs__foot { display: flex; align-items: center; gap: 12px; }
.dc-ai-tag.is-missing { background: var(--ui-tag-outline-bg); color: var(--ui-tag-outline-ink); }

/* ---------- output ---------- */
.dc-output { display: flex; flex-direction: column; gap: 14px; }
.dc-output__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dc-output__tools { display: flex; gap: 8px; }
.dc-output__meta { margin: 0; min-height: 1.2em; }
.dc-editor {
  min-height: 320px; max-height: 70vh; overflow: auto; padding: 16px 18px; line-height: 1.6;
  font-weight: var(--ui-content-weight); white-space: pre-wrap; overflow-wrap: anywhere; outline: none; user-select: text;
}
.dc-editor:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.dc-editor:empty::before { content: attr(data-placeholder); color: var(--ui-muted); }
.dc-editor > :first-child { margin-top: 0; }
.dc-editor > :last-child { margin-bottom: 0; }
.dc-editor p { margin: 0 0 0.9em; }
.dc-editor h1, .dc-editor h2, .dc-editor h3 { margin: 1em 0 0.5em; line-height: 1.25; }
.dc-editor h1 { font-size: 22px; }
.dc-editor h2 { font-size: 18px; }
.dc-editor h3 { font-size: 16px; }
.dc-editor ul, .dc-editor ol { margin: 0 0 0.9em; padding-left: 1.4em; }
.dc-editor li { margin: 0.2em 0; }
.dc-editor blockquote { margin: 0 0 0.9em; padding: 2px 0 2px 14px; border-left: var(--ui-line-thick); }
.dc-copy-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dc-notices { display: flex; flex-direction: column; gap: 8px; }
.dc-notices:empty { display: none; }
.dc-notice { margin: 0; padding: 8px 12px; border: var(--ui-line); border-radius: var(--ui-r-control); background: var(--ui-highlight-bg); color: var(--ui-highlight-ink); font-size: var(--ui-fs-label); font-weight: 600; }

/* ---------- settings: AI keys ---------- */
.dc-keys { display: flex; flex-direction: column; }
.dc-key { flex-direction: column; align-items: stretch; gap: 10px; }
.dc-key__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dc-key__fields { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

/* ---------- mini window ---------- */
.dc-mini-body { margin: 0; min-height: 100vh; background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); }
.dc-mini { display: flex; flex-direction: column; gap: 10px; padding: 12px; min-height: 100vh; box-sizing: border-box; }
.dc-mini.is-warning { box-shadow: inset 0 0 0 4px var(--ui-failed); }
.dc-mini__top { display: flex; align-items: center; gap: 12px; }
.dc-mini__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dc-mini__status { margin: 0; overflow-wrap: anywhere; }
.dc-rec--mini { width: 72px; height: 72px; box-shadow: var(--ui-shadow-sm); }
.dc-rec--mini::before { inset: 6px; }
.dc-rec--mini .dc-rec__hub { width: 40px; height: 40px; }
.dc-mini__preview { flex: 1; margin: 0; padding: 8px 10px; font-size: var(--ui-fs-label); overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 60px; user-select: text; }
.dc-mini__copy { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.dc-mini .dc-countdown { margin: 0; padding: 3px 8px; }

/* ---------- narrow desktop, tablet and phone ---------- */
@media (max-width: 900px) {
  .dc-layout { grid-template-columns: 1fr; }
  .dc-col { display: contents; }
  .dc-recorder { order: 1; }
  .dc-held { order: 2; }
  .dc-output { order: 3; }
  .dc-options { order: 4; }
}
@media (max-width: 640px) {
  .dc-layout { gap: 16px; }
  .dc-rec { width: 112px; height: 112px; }
  .dc-rec__hub { width: 60px; height: 60px; }
  .dc-editor { min-height: 220px; padding: 12px 14px; }
  .dc-copy-row { grid-template-columns: 1fr; }
  .dc-key__fields { grid-template-columns: 1fr; }
}