/* The DuVoca conversation screen (scripts/screen.mjs). Tokens: UI.md §9 / DESIGN.md §3.
   1 pt of the 393 x 852 pt iPhone = 100cqw / 393 of the .dv-display container. */
.dv-display { container-type: inline-size; width: 100%; }
.dv-screen {
  --pt: calc(100cqw / 393);
  --bg: #F8F6FC; --text: #1B1530; --text2: #4E4766; --quiet: #6E6880; --hair: #E6E1F2;
  --me: #4B2FBF; --me-fill: #4B2FBF; --me-fill-ink: #FFFFFF; --ring-me: #4B2FBF; --me-tint: transparent;
  --guest-shape: #C77700; --guest-ink: #996000; --guest-tint: #FFEFC7; --guest-edge: #7A4E00;
  --newest: transparent;
  --glass: rgba(255, 255, 255, 0.78); --glass-edge: rgba(27, 21, 48, 0.10); --glass-shadow: 0 calc(var(--pt) * 2) calc(var(--pt) * 8) rgba(27, 21, 48, 0.10);
  --island: #000;
  position: relative; box-sizing: border-box; width: 100%; aspect-ratio: 393 / 852; overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(var(--pt) * 67) 0 calc(var(--pt) * 42);
  background: var(--bg); color: var(--text);
  font-family: -apple-system, "SF Pro Text", system-ui, "Inter", "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.dv-screen[data-theme="dark"] {
  --bg: #141021; --text: #F4F1FB; --text2: #C9C3DB; --quiet: #ABA5BF; --hair: #2B2350;
  --me: #A99BFF; --me-fill: #8B6CFF; --me-fill-ink: #141021; --ring-me: #C4B2FF; --me-tint: #2B2350;
  --guest-shape: #FFBE45; --guest-ink: #FFD27A; --guest-tint: #3B2D0E; --guest-edge: #FFBE45;
  --newest: #2B2350;
  --glass: rgba(255, 255, 255, 0.10); --glass-edge: rgba(255, 255, 255, 0.14); --glass-shadow: none;
}
@media (prefers-color-scheme: dark) {
  .dv-screen[data-theme="auto"] {
    --bg: #141021; --text: #F4F1FB; --text2: #C9C3DB; --quiet: #ABA5BF; --hair: #2B2350;
    --me: #A99BFF; --me-fill: #8B6CFF; --me-fill-ink: #141021; --ring-me: #C4B2FF; --me-tint: #2B2350;
    --guest-shape: #FFBE45; --guest-ink: #FFD27A; --guest-tint: #3B2D0E; --guest-edge: #FFBE45;
    --newest: #2B2350;
    --glass: rgba(255, 255, 255, 0.10); --glass-edge: rgba(255, 255, 255, 0.14); --glass-shadow: none;
  }
  .dv-screen[data-theme="auto"] .dv-u--newest { padding-top: calc(var(--pt) * 4); padding-bottom: calc(var(--pt) * 4); padding-right: calc(var(--pt) * 8); }
}
@supports not (width: 1cqw) { .dv-screen { --pt: 0.72px; } }
.dv-screen *, .dv-screen *::before, .dv-screen *::after { box-sizing: border-box; }

/* Status bar and Dynamic Island stay in the owner's orientation. */
.dv-status { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--pt) * 54); }
.dv-time { position: absolute; left: calc(var(--pt) * 52); top: calc(var(--pt) * 19); font-size: calc(var(--pt) * 17); line-height: calc(var(--pt) * 22); font-weight: 600; letter-spacing: -0.01em; }
.dv-island { position: absolute; left: 50%; top: calc(var(--pt) * 11); width: calc(var(--pt) * 126); height: calc(var(--pt) * 37); margin-left: calc(var(--pt) * -63); border-radius: calc(var(--pt) * 19); background: var(--island); }
.dv-battery { position: absolute; right: calc(var(--pt) * 34); top: calc(var(--pt) * 23); width: calc(var(--pt) * 25); height: calc(var(--pt) * 12); border: calc(var(--pt) * 1.2) solid currentColor; border-radius: calc(var(--pt) * 3.5); opacity: 0.9; }
.dv-battery i { position: absolute; inset: calc(var(--pt) * 1.6); right: calc(var(--pt) * 6); border-radius: calc(var(--pt) * 1.6); background: currentColor; }
.dv-battery::after { content: ""; position: absolute; right: calc(var(--pt) * -3.6); top: calc(var(--pt) * 3); width: calc(var(--pt) * 1.6); height: calc(var(--pt) * 4); border-radius: 0 calc(var(--pt) * 1) calc(var(--pt) * 1) 0; background: currentColor; }

/* Panels (UI.md §2.2, §5): equal halves around the strip; the guest's half is turned 180 degrees. */
.dv-pane { position: relative; flex: 1 1 0; min-height: 0; overflow: hidden; }
.dv-pane--guest { transform: rotate(180deg); }
.dv-units { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(var(--pt) * 18); padding: calc(var(--pt) * 16) calc(var(--pt) * 20); }
.dv-u { margin: 0; border-left: calc(var(--pt) * 4) solid var(--me); padding-left: calc(var(--pt) * 12); font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; overflow-wrap: anywhere; hyphens: auto; }
.dv-u--guest { border-left-color: var(--guest-shape); }
.dv-u--aside { margin-left: calc(var(--pt) * 31); }
.dv-u--quiet { color: var(--quiet); }
.dv-u--strong { color: var(--text); }
.dv-u--newest { background: var(--newest); border-radius: 0 calc(var(--pt) * 10) calc(var(--pt) * 10) 0; }
.dv-screen[data-theme="dark"] .dv-u--newest { padding-top: calc(var(--pt) * 4); padding-bottom: calc(var(--pt) * 4); padding-right: calc(var(--pt) * 8); }
.dv-pane--guest .dv-u { font-size: calc(var(--pt) * 40); line-height: calc(var(--pt) * 48); font-weight: 700; }
.dv-pane--guest .dv-u--quiet { font-weight: 600; }
.dv-pane--me .dv-u { font-size: calc(var(--pt) * 22); line-height: calc(var(--pt) * 28); font-weight: 600; }
.dv-pane--me .dv-u--quiet { font-weight: 400; }
.dv-pane--me .dv-units { padding-bottom: calc(var(--pt) * 56); }
.dv-hair { height: calc(var(--pt) * 1); background: var(--hair); flex: none; }

/* Owner strip (UI.md §2.1, §4.1, S3): x, swap | Pause 56 with the listening ring | split, guest chip. */
.dv-strip { flex: none; height: calc(var(--pt) * 64); display: flex; align-items: center; justify-content: center; gap: calc(var(--pt) * 8); padding: 0 calc(var(--pt) * 12); }
.dv-glass { flex: none; width: calc(var(--pt) * 44); height: calc(var(--pt) * 44); border-radius: 50%; display: grid; place-items: center; background: var(--glass); border: calc(var(--pt) * 0.6) solid var(--glass-edge); box-shadow: var(--glass-shadow); color: var(--text); }
.dv-glyph { width: calc(var(--pt) * 20); height: calc(var(--pt) * 20); }
.dv-main { position: relative; flex: none; width: calc(var(--pt) * 56); height: calc(var(--pt) * 56); }
.dv-pause { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: var(--me-fill); color: var(--me-fill-ink); }
.dv-pause .dv-glyph { width: calc(var(--pt) * 26); height: calc(var(--pt) * 26); }
.dv-ring { position: absolute; inset: calc(var(--pt) * -4); border-radius: 50%; border: calc(var(--pt) * 2) solid var(--ring-me); transform: scale(1.12); opacity: 0.9; }
.dv-chip { flex: 0 1 auto; min-width: 0; height: calc(var(--pt) * 32); display: inline-flex; align-items: center; padding: 0 calc(var(--pt) * 12); border-radius: calc(var(--pt) * 16); background: var(--guest-tint); border: calc(var(--pt) * 1) solid var(--guest-edge); color: var(--guest-ink); font-size: calc(var(--pt) * 13); line-height: calc(var(--pt) * 18); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dv-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-row2 { flex: none; padding: calc(var(--pt) * 6) calc(var(--pt) * 16) calc(var(--pt) * 6); text-align: center; font-size: calc(var(--pt) * 13); line-height: calc(var(--pt) * 18); color: var(--text2); }
.dv-heard { position: absolute; left: calc(var(--pt) * 12); bottom: calc(var(--pt) * 12); height: calc(var(--pt) * 32); display: inline-flex; align-items: center; padding: 0 calc(var(--pt) * 12); border-radius: calc(var(--pt) * 16); background: var(--me-tint); border: calc(var(--pt) * 1) solid var(--me); color: var(--me); font-size: calc(var(--pt) * 13); line-height: calc(var(--pt) * 18); font-weight: 600; white-space: nowrap; }
.dv-home { position: absolute; left: 50%; bottom: calc(var(--pt) * 8); width: calc(var(--pt) * 134); height: calc(var(--pt) * 5); margin-left: calc(var(--pt) * -67); border-radius: calc(var(--pt) * 3); background: var(--text); opacity: 0.85; }

/* Live parts (screenHtml live: true; public/assets/js/motion.js plays them). Hidden on the static screen, which
   stays exactly the finished conversation the pictures show. */
.dv-src, .dv-strip--s1, .dv-idle, .dv-heard--guest { display: none; }

/* Live mode (data-live): like the app's list, a half holds only what was said, the newest at the strip; motion.js
   slides the older sentences up when one arrives. */
.dv-screen[data-live] .dv-pane--guest .dv-units { padding-bottom: calc(var(--pt) * 56); }
.dv-screen[data-live] .dv-u { display: grid; }
.dv-screen[data-live] .dv-u > span, .dv-screen[data-live] .dv-u::before { grid-area: 1 / 1; min-width: 0; }
.dv-screen[data-live] .dv-u .dv-src { display: block; visibility: hidden; color: var(--quiet); }
.dv-screen[data-live] .dv-pane--guest .dv-src { font-weight: 600; }
.dv-screen[data-live] .dv-pane--me .dv-src { font-weight: 400; }
.dv-screen[data-live] .dv-u:not([data-p]) { display: none; }
/* "…" while someone speaks: one line, no side yet (UI.md §5.4), so no colour on the rule. */
.dv-screen[data-live] .dv-u[data-p="tell"] { border-left-color: transparent; }
.dv-screen[data-live] .dv-u[data-p="tell"] > span { display: none; }
.dv-screen[data-live] .dv-u[data-p="tell"]::before { content: "\2026"; color: var(--quiet); font-weight: 800; }
/* The other half first shows the speaker's words, quiet, then the translation. */
.dv-screen[data-live] .dv-u[data-p="orig"] .dv-tx { visibility: hidden; }
.dv-screen[data-live] .dv-u[data-p="orig"] .dv-src { visibility: visible; }
.dv-screen[data-live] .dv-u[data-p="done"] .dv-src { display: none; }
/* The "Hearing" chip sits on the half of whoever spoke last; the ring takes their colour. */
.dv-screen[data-live] .dv-heard { opacity: 0; }
.dv-screen[data-live] .dv-heard--guest { display: inline-flex; background: var(--guest-tint); border-color: var(--guest-edge); color: var(--guest-ink); }
.dv-screen[data-live][data-side="me"] .dv-pane--me .dv-heard, .dv-screen[data-live][data-side="guest"] .dv-heard--guest { opacity: 1; }
.dv-screen[data-live] .dv-ring { transform: scale(1.04); opacity: 0.33; }
.dv-screen[data-live][data-side="guest"] .dv-ring { border-color: var(--guest-shape); }

/* The idle screen S1 (UI.md §4.1, §5.3): one quiet line per half, the Start strip. */
.dv-screen[data-live][data-state="idle"] :is(.dv-units, .dv-heard, .dv-strip:not(.dv-strip--s1)) { display: none; }
.dv-screen[data-live][data-state="idle"] .dv-strip--s1 { display: flex; }
.dv-screen[data-live][data-state="idle"] .dv-idle { display: flex; }
.dv-idle { position: absolute; inset: 0; margin: 0; padding: calc(var(--pt) * 16) calc(var(--pt) * 24); align-items: center; justify-content: center; text-align: center; color: var(--quiet); font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, sans-serif; font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.dv-pane--guest .dv-idle { font-size: calc(var(--pt) * 34); line-height: calc(var(--pt) * 40); }
.dv-pane--me .dv-idle { font-size: calc(var(--pt) * 22); line-height: calc(var(--pt) * 28); }
.dv-start { flex: none; min-width: calc(var(--pt) * 120); height: calc(var(--pt) * 56); padding: 0 calc(var(--pt) * 22); border-radius: calc(var(--pt) * 28); display: inline-flex; align-items: center; justify-content: center; background: var(--me-fill); color: var(--me-fill-ink); font-size: calc(var(--pt) * 17); line-height: calc(var(--pt) * 24); font-weight: 700; white-space: nowrap; }

/* Motion only for those who have not asked for less: the chip fades in 150 ms (CHIP_FADE_MS), the ring breathes
   while someone speaks. */
@media (prefers-reduced-motion: no-preference) {
  .dv-screen[data-live] .dv-heard { transition: opacity 0.15s linear; }
  .dv-screen[data-live][data-telling] .dv-ring { animation: dv-ring 0.9s ease-in-out infinite alternate; }
  @keyframes dv-ring { from { transform: scale(1.04); opacity: 0.45; } to { transform: scale(1.3); opacity: 0.9; } }
}
/* Reduced motion: the ring stands still (RING_STILL, UI.md §6.2). */
@media (prefers-reduced-motion: reduce) {
  .dv-screen[data-live] .dv-ring { transform: scale(1.17); opacity: 0.9; }
}
/* Print: every sentence in its final form, the idle screen included (its sentences, not S1). The originals take
   no room, as on the static screen (hidden, they pushed the guest's sentence down under the strip). A sentence
   caught while it slides (motion.js moves it with a transform for 260 ms after each "…" and each landing) prints
   where it lands: an author !important beats the animation. */
@media print {
  .dv-screen[data-live] .dv-u { transform: none !important; }
  .dv-screen[data-live] .dv-u { visibility: visible !important; border-left-color: var(--me) !important; }
  .dv-screen[data-live] .dv-u--guest { border-left-color: var(--guest-shape) !important; }
  .dv-screen[data-live] .dv-u { display: grid !important; }
  .dv-screen[data-live] .dv-u > .dv-tx { display: block !important; visibility: visible !important; }
  .dv-screen[data-live] .dv-u > .dv-src { display: none !important; }
  .dv-screen[data-live] .dv-u::before { visibility: hidden !important; }
  .dv-screen[data-live] .dv-units, .dv-screen[data-live] .dv-strip:not(.dv-strip--s1) { display: flex !important; }
  .dv-screen[data-live] .dv-strip--s1, .dv-screen[data-live] .dv-idle { display: none !important; }
}