/* Dictation Surface — the one voice-capture surface for every screen.
 *
 * Design source: dictationSurface3.zip (2026-10-10). Values are
 * literal on purpose: the app's --dr-* tokens are theme-gated and differ per
 * page (crater is #2F3947, #3C4858 or #4E5D71 depending on the sheet), so the
 * surface carries its own palette and looks the same wherever it mounts.
 *
 * Colour semantics (binding): teal = live · harvest = settling/retrying ·
 * scarlet = blocked · amber = check this word · brass = index/route ·
 * crema/bone = the doctor's own words. Radii are 0 everywhere.
 *
 * Only transform and opacity animate while the mic is open.
 */
@font-face {
  font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/IBMPlexSans.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url('../fonts/IBMPlexMono-SemiBold.woff2') format('woff2');
}

.ds {
  --ds-s0: #141821; --ds-void: #0C1016; --ds-cacao: #1B212C; --ds-grain: #232B38;
  --ds-crater: #2F3947; --ds-crater-lt: #3C4858; --ds-crater-hi: #4E5D71; --ds-key: #171C25;
  --ds-crema: #FFF7EE; --ds-bone: #EBE1D7; --ds-mocha: #8E97A6;
  --ds-amber: #E69A4C; --ds-harvest: #D4A040; --ds-brass: #BFA162;
  --ds-teal: #4CC4B4; --ds-sienna: #C75B39; --ds-scarlet: #C44C4C;
  --ds-teal-rgb: 76,196,180; --ds-harvest-rgb: 212,160,64; --ds-scarlet-rgb: 196,76,76;
  --ds-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ds-sans: 'IBM Plex Sans', system-ui, sans-serif;
  /* per-state, set below */
  --ds-accent-rgb: 0,0,0; --ds-accent-on: 0;
  --ds-label: var(--ds-mocha); --ds-scope: var(--ds-crater);
  --ds-inset: 12px;

  position: relative; display: flex; flex-direction: column; box-sizing: border-box;
  min-width: 0; max-width: 100%;
  background: var(--ds-s0); color: var(--ds-bone); font-family: var(--ds-sans);
  border: 1px solid var(--ds-crater-hi); border-top: 2px solid #6B7A8F; border-radius: 0;
  box-shadow: 0 0 0 1px #000, 0 0 0 2px rgba(255,247,238,.09),
    0 14px 28px -10px rgba(0,0,0,.95), 0 44px 80px -30px #000;
  text-align: left; line-height: 1.35;
}
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; border-radius: 0; }
.ds::after { /* inner overlay */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ds-crema) 9%, transparent), inset 0 -1px 0 var(--ds-void);
}
.ds[hidden] { display: none; }

/* A clipped paint layer never widens the card or takes a pointer event. */
.ds-busy { display: none; position: absolute; top: 0; left: 0; right: 0; height: 2px; overflow: hidden; pointer-events: none; z-index: 3; }
.ds:is([data-state="connecting"], [data-state="processing"], [data-state="reconnecting"]) > .ds-busy { display: block; }
.ds-busy::before { content: ''; display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--ds-label), transparent); animation: dsSweep 1.2s linear infinite; }

/* ── state → accent / label / scope hue ─────────────────────────────── */
.ds[data-tone="live"]  { --ds-accent-rgb: var(--ds-teal-rgb); --ds-accent-on: 1; --ds-label: var(--ds-teal); --ds-scope: var(--ds-teal); }
.ds[data-tone="settle"]{ --ds-accent-rgb: var(--ds-teal-rgb); --ds-accent-on: 1; --ds-label: var(--ds-harvest); --ds-scope: var(--ds-harvest); }
.ds[data-tone="wait"]  { --ds-label: var(--ds-bone); --ds-scope: var(--ds-crater-lt); }
.ds[data-tone="retry"] { --ds-accent-rgb: var(--ds-harvest-rgb); --ds-accent-on: 1; --ds-label: var(--ds-harvest); --ds-scope: var(--ds-harvest); }
.ds[data-tone="error"] { --ds-accent-rgb: var(--ds-scarlet-rgb); --ds-accent-on: 1; --ds-label: var(--ds-scarlet); --ds-scope: var(--ds-crater); }
.ds[data-tone="live"], .ds[data-tone="settle"], .ds[data-tone="retry"], .ds[data-tone="error"] {
  border-color: rgba(var(--ds-accent-rgb), .5); border-top-color: rgba(var(--ds-accent-rgb), .75);
}

/* ── header row ─────────────────────────────────────────────────────── */
.ds-head {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  height: 52px; padding: 4px var(--ds-inset) 4px 7px; background: var(--ds-void);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.ds-key {
  display: flex; align-items: center; justify-content: center; flex: none;
  position: relative; width: 38px; height: 38px; border-radius: 50%; padding: 0; margin: 0; cursor: pointer;
  color: var(--ds-bone); background: var(--ds-key); border: 1px solid var(--ds-crater-hi);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ds-crema) 18%, transparent), inset 0 -2px 0 color-mix(in srgb, var(--ds-void) 35%, transparent), 0 1px 2px rgba(0,0,0,.5);
  font: inherit; appearance: none; -webkit-appearance: none;
}
.ds-key:hover { border-color: var(--ds-crema); }
.ds-key:active { box-shadow: inset 0 2px 4px var(--ds-void); }
.ds-key:focus-visible { outline: 1px solid var(--ds-crema); outline-offset: 2px; }
.ds-key svg { width: 19px; height: 19px; display: none; fill: currentColor; }
.ds-key > :not([class^="ds-i-"]):not(.ds-level-halo) { display: none !important; } /* an adopted host button's own icons */
.ds-key[data-icon="mic"] .ds-i-mic,
.ds-key[data-icon="mic-fill"] .ds-i-mic-fill,
.ds-key[data-icon="mic-slash"] .ds-i-mic-slash,
.ds-key[data-icon="retry"] .ds-i-retry { display: block; }
.ds[data-tone="live"] .ds-key { color: var(--ds-void); background: var(--ds-teal); border-color: var(--ds-teal);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5), 0 0 14px rgba(var(--ds-teal-rgb), .35); }
.ds[data-tone="settle"] .ds-key { color: var(--ds-void); background: var(--ds-harvest); border-color: var(--ds-harvest);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.5), 0 0 14px rgba(var(--ds-harvest-rgb), .35); }
.ds[data-tone="wait"] .ds-key { border-color: var(--ds-bone); }
.ds[data-tone="retry"] .ds-key { color: var(--ds-harvest); border-color: var(--ds-harvest); }
.ds[data-tone="error"] .ds-key { color: var(--ds-scarlet); border-color: var(--ds-scarlet); }
.ds-key::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ds-crema) 18%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--ds-void) 30%, transparent); }
/* The ring fits inside the header's existing key gutter, even at full scale. */
.ds-level-halo { display: none; position: absolute; inset: -1px; border: 1px solid var(--ds-label); border-radius: inherit !important;
  pointer-events: none; transform: scale(1); opacity: .2; transition: transform 50ms linear, opacity 50ms linear; }
.ds:is([data-tone="live"], [data-state="armed"]):not([data-remote="1"]) .ds-level-halo { display: block; }

.ds-state {
  display: flex; align-items: center; gap: 7px; flex: none; white-space: nowrap;
  font: 700 10px/1 var(--ds-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ds-label);
}
.ds-state::before { content: ''; width: 6px; height: 6px; flex: none; background: currentColor; }
.ds[data-pulse="1"] .ds-state::before { animation: dsPulse 1.6s ease-in-out infinite; }

.ds-scope {
  position: relative; display: flex; align-items: center; gap: 1px; overflow: hidden;
  flex: 1 1 90px; min-width: 80px; height: 34px; padding: 0 6px;
  background: var(--ds-void); border: 1px solid var(--ds-crater);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.8);
}
.ds-scope::before { /* baseline */
  content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 0;
  border-top: 1px solid var(--ds-scope); opacity: .8; pointer-events: none;
}
.ds-scope-break { /* "signal ended here" */
  position: absolute; right: 6px; top: 50%; height: 0; left: 6px; display: none; transform: scaleX(0); transform-origin: right center;
  border-top: 1px dashed var(--ds-harvest); opacity: .7; pointer-events: none;
}
.ds[data-tone="retry"] .ds-scope-break { display: block; }
.ds[data-tone="error"] .ds-scope-break { display: block; border-top-color: var(--ds-sienna); opacity: .8; }
.ds-bar {
  flex: 1 1 0; min-width: 0; height: 30px; background: var(--ds-scope);
  transform: scaleY(0); will-change: transform; transition: transform 50ms linear;
}
.ds[data-state="paused"] .ds-bar { height: 15px; }

.ds-meta { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.ds-timer { font: 600 14px/1 var(--ds-mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--ds-mocha); }
.ds[data-tone="live"] .ds-timer, .ds[data-tone="settle"] .ds-timer { color: var(--ds-crema); }
.ds-link { display: flex; align-items: center; gap: 5px; white-space: nowrap;
  font: 400 9.5px/1 var(--ds-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ds-mocha); }
.ds-link::before { content: ''; width: 5px; height: 5px; flex: none; background: currentColor; }
.ds-link[data-tone="ok"] { color: var(--ds-teal); }
.ds-link[data-tone="warn"] { color: var(--ds-harvest); }
.ds-link[data-tone="open"] { color: var(--ds-bone); }
.ds-link[data-tone="bad"] { color: var(--ds-scarlet); }

/* ── hint / banner: one message band, never two ─────────────────────── */
.ds-band {
  position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 10px;
  padding: 10px var(--ds-inset); background: var(--ds-cacao);
  border-bottom: 1px solid var(--ds-crater-hi);
  box-shadow: 0 1px 0 rgba(0,0,0,.9), 0 4px 10px -4px rgba(0,0,0,.8);
  font-size: 12.5px; line-height: 1.35; color: var(--ds-bone); text-wrap: pretty;
}
.ds-band-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ds-band-text strong { font-weight: 600; color: var(--ds-label); }
.ds-text-echo { position: absolute !important; margin: 0 !important; pointer-events: none; overflow: hidden; contain: paint; max-width: 100%; max-height: 100%; }
.ds-text-echo::before { animation: none !important; }
.ds[data-banner="1"] .ds-band { border-bottom-color: rgba(var(--ds-accent-rgb), .55); line-height: 1.4; animation: dsIn .2s ease-out both; }
.ds-ghost {
  flex: none; cursor: pointer; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; margin: 0; background: transparent;
  font: 400 10.5px/1 var(--ds-mono); color: var(--ds-bone);
  border: 1px solid var(--ds-crater-hi); padding: 4px 8px; appearance: none; -webkit-appearance: none;
}
.ds-ghost:hover { border-color: var(--ds-crema); color: var(--ds-crema); }
.ds-ghost, button.ds-chip { position: relative; isolation: isolate; }
.ds-ghost::before, button.ds-chip::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background: var(--ds-crema); opacity: 0; transition: opacity .12s ease-out; }
.ds-ghost:is(:hover, :focus-visible)::before, button.ds-chip:is(:hover, :focus-visible)::before { opacity: .07; }
.ds-ghost:active::before, button.ds-chip:active::before { opacity: .14; }
.ds-ghost:active, button.ds-chip:active { box-shadow: inset 0 1px 3px var(--ds-void); }
.ds-ghost[hidden] { display: none; }
.ds-command-choices { display:flex; flex-wrap:wrap; gap:6px; min-width:0; max-width:100%; }
.ds-command-choices[hidden], .ds-command-choices:empty { display:none; }
.ds-command-choices .ds-ghost { max-width:100%; }
.ds-ghost--now { color: var(--ds-harvest); border-color: rgba(var(--ds-harvest-rgb), .55); }
.ds-ghost--now:hover { border-color: var(--ds-harvest); color: var(--ds-crema); }
.ds-ghost--drop:hover { border-color: var(--ds-sienna); color: var(--ds-sienna); }

/* ── transcript ─────────────────────────────────────────────────────── */
.ds-transcript {
  padding: 14px var(--ds-inset) 13px; min-width: 0;
  background: radial-gradient(120% 90% at 50% 0%, #10141B 0%, var(--ds-s0) 70%);
  box-shadow: inset 0 10px 14px -10px rgba(0,0,0,.95);
  font-size: 15.5px; line-height: 1.5; letter-spacing: -.005em; color: var(--ds-crema);
  text-wrap: pretty; overflow-wrap: anywhere; word-break: normal; white-space: normal;
  max-height: var(--ds-transcript-max, 9em); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--ds-crater) transparent;
  user-select: text; -webkit-user-select: text;
  /* a scrolled line fades out under the header instead of being sliced */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12px);
}
.ds-transcript:focus { outline: none; }
.ds-ph { color: var(--ds-mocha); }
.ds-w {
  padding-bottom: 1px; border-bottom: 1px solid transparent;
  transition: opacity .18s;
}
.ds-word-motion { position: absolute; pointer-events: none; contain: strict; overflow: hidden; }
.ds-word-motion > .ds-transcript { width: 100%; height: 100%; max-height: none; visibility: hidden; scrollbar-color: transparent transparent; }
.ds-w[data-i="1"] { opacity: .45; font-style: italic; }
.ds-w[data-v="1"] { font-weight: 600; }
.ds-w[data-k="idx"] { color: var(--ds-brass); border-bottom: 1px solid rgba(191,161,98,.8); }
.ds-w[data-k="new"] { color: var(--ds-brass); border-bottom: 1px dashed rgba(191,161,98,.8); }
.ds-w[data-low="1"] { border-bottom: 2px dotted var(--ds-amber); }
.ds-caret {
  display: none; width: 8px; height: 16px; vertical-align: -2px; margin-left: 1px;
  background: var(--ds-teal); animation: dsCaret 1s steps(1) infinite;
}
.ds[data-caret="1"] .ds-caret { display: inline-block; }

/* ── settle rail (armed only) ───────────────────────────────────────── */
.ds-rail { display: none; flex-direction: column; gap: 8px; margin: 0 var(--ds-inset); padding: 0 0 10px; animation: dsIn .2s ease-out both; }
.ds[data-state="armed"] .ds-rail { display: flex; }
.ds-drain { height: 2px; background: var(--ds-grain); overflow: hidden; }
.ds-drain-fill { height: 2px; width: 100%; background: var(--ds-harvest); transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 6px rgba(var(--ds-harvest-rgb), .5); transition: transform .07s linear; }
.ds-rail-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; min-width: 0; }
.ds-rail-text { font-size: 12.5px; color: var(--ds-bone); min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-right: auto; }
.ds-rail-text b { font-weight: 600; color: var(--ds-harvest); font-variant-numeric: tabular-nums; }

/* ── receipt (committed only) ───────────────────────────────────────── */
.ds-receipt { display: none; align-items: center; gap: 8px; margin: 0 var(--ds-inset); padding: 8px 0 10px;
  border-top: 1px solid rgba(var(--ds-teal-rgb), .45); white-space: nowrap; min-width: 0; animation: dsIn .25s ease-out both; }
.ds[data-receipt="1"] .ds-receipt { display: flex; }
.ds-receipt svg { width: 15px; height: 15px; flex: none; fill: var(--ds-teal); }
.ds-receipt-arrive svg { animation: dsCheck .26s cubic-bezier(.2,.8,.3,1) both; }
.ds-receipt svg path { stroke: var(--ds-void); transform-box: fill-box; transform-origin: left center; }
.ds-receipt-arrive svg path { animation: dsCheckStroke .2s .06s ease-out both; }
.ds-receipt-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--ds-bone); }
.ds-receipt-text strong { font-weight: 600; color: var(--ds-crema); }

/* ── routing row (always present) ───────────────────────────────────── */
.ds-route { display: flex; align-items: center; gap: 6px; margin: 0 var(--ds-inset); padding: 8px 0 10px;
  border-top: 1px solid var(--ds-crater); min-width: 0; min-height: 41px; flex-wrap: wrap; }
.ds-chips { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 140px; flex-wrap: wrap; }
.ds-chip[hidden] { display: none !important; }
.ds-chip {
  position: relative; flex: 0 1 auto; min-width: 4ch; overflow: hidden; text-overflow: ellipsis; white-space: normal; overflow-wrap: anywhere; line-height: 1.4; margin: 0; background: transparent;
  font: 400 10.5px/1 var(--ds-mono); color: var(--ds-brass);
  border: 1px solid rgba(191,161,98,.55); padding: 4px 8px 5px; appearance: none; -webkit-appearance: none;
  animation: dsIn .2s ease-out both;
}
button.ds-chip { cursor: pointer; }
button.ds-chip:hover { border-color: var(--ds-crema); color: var(--ds-crema); }
.ds-chip::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  width: 100%; background: currentColor; transform: scaleX(var(--ds-progress, 0)); transform-origin: left center; transition: transform .3s; }
.ds-chip[data-tone="weak"] { color: var(--ds-bone); border: 1px dashed var(--ds-crater-hi); }
.ds-chip[data-tone="weak"]::after { background: var(--ds-crater-hi); }
.ds-chip[data-tone="filed"] { color: var(--ds-teal); border-color: rgba(var(--ds-teal-rgb), .6); }
.ds-chip[data-tone="plain"] { color: var(--ds-bone); border-color: var(--ds-crater-hi); }
.ds-chip[data-tone="slot"] { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-mocha); border: 1px dashed var(--ds-crater); animation: none; }
.ds-chip[data-tone="slot"]::before { content: ''; width: 5px; height: 5px; flex: none; background: var(--ds-crater-lt); }
.ds[data-tone="live"] .ds-chip[data-tone="slot"]::before { animation: dsPulse 2.4s ease-in-out infinite; }
.ds-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 1 auto; flex-wrap: wrap; }
.ds-verify { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-amber); white-space: nowrap; flex: none; }
.ds-verify::before { content: ''; width: 14px; border-bottom: 2px dotted var(--ds-amber); }
.ds[data-verify="1"] .ds-verify { display: inline-flex; }

/* ── variants ───────────────────────────────────────────────────────── */
/* dock: the floating surface. Anchored near the bottom edge and grows UP, so
   its bottom edge never moves while the mic is open. At rest identity, destination and mode remain visible. --ds-dock-shift is set by the host page when a side rail is open. */
.ds-dock-host {
  position: fixed; z-index: 9999; display: block;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  left: calc(50% - var(--ds-dock-shift, 0px)); transform: translateX(-50%);
  width: clamp(374px, 40vw, 560px); max-width: calc(100vw - 16px);
  /* the host is a click-through frame; only the card takes clicks */
  height: auto; min-height: 0; padding: 0; margin: 0; gap: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; transition: none; animation: none;
  pointer-events: none;
}
.ds-dock-host > .ds { pointer-events: auto; }
.ds-dock-host:has(> .ds[data-rest="1"]) { width: 374px; } /* at rest: the smallest footprint */
.ds-dock-host > :not(.ds):not(.voice-iphone-panel) { display: none !important; } /* the host's legacy sections */
/* The phone pairing panel (QR, section cards) is a child of the bar and must
   stay usable. The host is transformed, so the panel anchors to it: it sits
   directly above the card. */
.ds-dock-host > .voice-iphone-panel {
  position: absolute; bottom: calc(100% + 8px); left: 50%; pointer-events: auto; border-radius: 0;
}
body.rail-open .ds-dock-host { --ds-dock-shift: calc(var(--rail-width-expanded, 920px) / 2); }
/* The floating bar collected per-page geometry over the years (Note Evolution
   desk, narrow clinical layouts, eight roast themes). As a dock host it has ONE
   geometry everywhere; those rules stay only for the flag-off bar. */
#voice-command-bar.ds-dock-host {
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  left: calc(50% - var(--ds-dock-shift, 0px)) !important; right: auto !important;
  transform: translateX(-50%) !important;
  width: clamp(374px, 40vw, 560px) !important; max-width: calc(100vw - 16px) !important;
  height: auto !important; min-height: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; transition: none !important;
}
#voice-command-bar.ds-dock-host:has(> .ds[data-rest="1"]) { width: 374px !important; }
@media (max-width: 420px) { #voice-command-bar.ds-dock-host { width: calc(100vw - 16px) !important; } }
.ds--dock { --ds-transcript-max: min(9em, 34vh); }
.ds--dock .ds-route { overflow: visible; } /* the mode menu opens out of this row */
.ds--dock[data-rest="1"] .ds-transcript { display: none; }
/* At rest, all revealed rows sit above the key. Reordering the existing row
   leaves its dimensions and the host's collapse/phone anchoring rules intact. */
.ds--dock[data-rest="1"] > .ds-head { order: 1; }

@media (max-width: 420px) { .ds-dock-host { width: calc(100vw - 16px); } }

/* the floating bar's own controls, re-homed in the routing row */
.ds .voice-mode-picker { position: relative; }
.ds .voice-mode-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; margin: 0; min-height: 0; height: auto;
  font: 400 10.5px/1 var(--ds-mono); letter-spacing: .06em; color: var(--ds-bone);
  background: transparent; border: 1px solid var(--ds-crater-hi); padding: 4px 8px 5px; box-shadow: none;
  border-radius: 0 !important;
}
.ds .voice-mode-btn:hover { border-color: var(--ds-crema); color: var(--ds-crema); }
.ds .voice-mode-btn .mode-icon { display: none; }
.ds .voice-mode-btn .mode-label { font: inherit; color: inherit; }
.ds .voice-mode-btn .mode-chevron { width: 10px; height: 10px; }
.ds .voice-mode-menu { left: auto; right: 0; bottom: calc(100% + 8px); border-radius: 0; }
.ds .voice-bar-actions, .ds .voice-bar-feedback { align-items: center; gap: 6px; margin: 0; }
.ds .voice-bar-feedback .feedback-label { font: 400 10.5px/1 var(--ds-mono); color: var(--ds-mocha); }
.ds .voice-action-btn, .ds .feedback-btn {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin: 0;
  width: auto; height: auto; min-width: 22px; padding: 3px 6px; font: 400 10.5px/1 var(--ds-mono);
  color: var(--ds-bone); background: transparent; border: 1px solid var(--ds-crater-hi); box-shadow: none;
}
.ds .voice-action-btn:hover, .ds .feedback-btn:hover { border-color: var(--ds-crema); color: var(--ds-crema); }
.ds .voice-action-btn.success { color: var(--ds-teal); border-color: var(--ds-teal); }

/* inline hosts: the surface replaces a legacy recorder cluster that stays in the
   DOM for the code and tests that reach it by id. */
.aw-recorder--ds > :not(.ds) { display: none !important; }
.aw-recorder--ds { display: block; padding: 0; border: 0; background: none; }
.aw-recorder--ds > .ds { margin: 3px; width: min(calc(100% - 6px), 560px); } /* fixed width: the card never reflows between states */
.ds .aw-route-pill[hidden] { display: none; }

/* Transfer: the band replaces the REC pill, timer and meter. With the clinical
   canvas on it takes the T6 palette (cyan = live, amber = decision, red = critical). */
.tc-recorder--ds > #tcRecIndicator, .tc-recorder--ds > #tcRecordTimer, .tc-recorder--ds > #tcAudioMeter { display: none !important; }
.tc-ds-band { flex: 1 1 320px; min-width: 0; max-width: 560px; }
.tc-ds-band .ds-key { cursor: default; opacity: 1; }
.tc-clinical-canvas-on .tc-ds-band .ds {
  --ds-s0: #121A24; --ds-void: #0B1017; --ds-cacao: #182230; --ds-grain: #1F2A38; --ds-key: #182230;
  --ds-crater: #2C3A4A; --ds-crater-lt: #3C4858; --ds-crater-hi: #4A5D73;
  --ds-crema: #F2F7FA; --ds-bone: #B7C4CE; --ds-mocha: #7C8F9C;
  --ds-teal: #59D6C5; --ds-teal-rgb: 89,214,197; --ds-harvest: #F2A93B; --ds-harvest-rgb: 242,169,59;
  --ds-scarlet: #E05B4F; --ds-scarlet-rgb: 224,91,79;
  --ds-mono: 'JetBrains Mono', ui-monospace, monospace; --ds-sans: 'DM Sans', system-ui, sans-serif;
  border-top-color: rgba(var(--ds-accent-rgb), .75);
}

/* band: header row only, for hosts that own their transcript (Transfer). */
.ds--band .ds-transcript, .ds--band .ds-route, .ds--band .ds-rail, .ds--band .ds-receipt { display: none !important; }
.ds--band .ds-band:empty { display: none; }

/* chip: the same mic key + state word, for small satellite indicators. */
.ds-pill { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font: 700 10px/1 'IBM Plex Mono', ui-monospace, Menlo, monospace; letter-spacing: .14em; text-transform: uppercase; color: #8E97A6; }
.ds-pill::before { content: ''; width: 6px; height: 6px; flex: none; background: currentColor; }
.ds-pill[data-tone="live"] { color: #4CC4B4; }
.ds-pill[data-tone="live"]::before { animation: dsPulse 1.6s ease-in-out infinite; }
.ds-pill[data-tone="settle"], .ds-pill[data-tone="retry"] { color: #D4A040; }
.ds-pill[data-tone="wait"] { color: #EBE1D7; }
.ds-pill[data-tone="error"] { color: #C44C4C; }

@keyframes dsCaret { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } }
@keyframes dsPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes dsIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes dsSweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
@keyframes dsCheck { 0% { opacity: 0; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes dsCheckStroke { from { opacity: 0; transform: scaleX(.2); } to { opacity: 1; transform: scaleX(1); } }

/* Snapshots are inert, viewport-contained paint, never another recorder. The
   real key remains the only visible and interactive key during a dock fold. */
.ds-motion-frame { position: fixed; z-index: 9998; pointer-events: none; contain: strict; overflow: hidden; }
.ds-motion-frame .ds-motion-copy { width: 100%; height: 100%; max-height: none; overflow: hidden; margin: 0; }
.ds-motion-copy *, .ds-motion-copy *::before, .ds-motion-copy *::after { animation: none !important; transition: none !important; }
.ds-motion-copy .ds-key { visibility: hidden; }
.ds.ds-dock-animating { background: transparent; border-color: transparent; box-shadow: none; }
.ds-dock-animating > :not(.ds-head), .ds-dock-animating::after, .ds-dock-animating > .ds-head > :not(.ds-key) { opacity: 0; }
.ds-dock-animating > .ds-head { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .ds, .ds::before, .ds::after, .ds *, .ds *::before, .ds *::after, .ds-pill::before { animation: none !important; transition: none !important; }
  .ds .ds-level-halo { transform: none !important; opacity: .25 !important; }
  .ds-busy::before { width: 100%; transform: none; opacity: .6; }
}

/* Surface 3 anatomy: context / source / delivery / message / words / actions. */
.ds-context { display:flex; flex-direction:column; gap:8px; padding:11px 12px 10px; background:var(--ds-cacao); border-bottom:1px solid var(--ds-crater); }
.ds-context-top { display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px 12px; }
.ds-identity { display:flex; align-items:flex-start; gap:8px; min-width:0; flex:1 1 150px; }
.ds-identity-pip { width:10px; height:10px; margin-top:4px; flex:none; border:1px dashed var(--ds-mocha); }
.ds-identity[data-bound="1"] .ds-identity-pip { background:var(--ds-brass); border-style:solid; border-color:var(--ds-brass); }
.ds-identity-words { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-identity-name { font-size:13px; font-weight:600; line-height:1.3; color:var(--ds-crema); overflow-wrap:anywhere; }
.ds-identity:not([data-bound="1"]) .ds-identity-name { color:var(--ds-bone); font-style:italic; }
.ds-identity-meta { font:400 10.5px/1.4 var(--ds-mono); color:var(--ds-bone); overflow-wrap:anywhere; }
.ds-modes { display:flex; flex:none; max-width:100%; }
.ds-mode-group { display:flex; border:1px solid var(--ds-crater-hi); background:var(--ds-key); }
.ds-mode { display:flex; align-items:center; justify-content:center; min-height:30px; padding:0 9px; border:0; border-right:1px solid var(--ds-crater); background:transparent; color:var(--ds-mocha); font:600 10.5px/1.2 var(--ds-mono); cursor:pointer; }
.ds-mode:last-child { border-right:0; }
.ds-mode[aria-checked="true"] { background:var(--ds-grain); color:var(--ds-crema); box-shadow:inset 0 -2px var(--ds-brass); }
.ds-mode:disabled { cursor:default; opacity:.65; }
.ds-mode[aria-checked="true"]:disabled { opacity:1; }
.ds-destination { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; }
.ds-dest-kind { font:600 9.5px/1.25 var(--ds-mono); letter-spacing:.1em; padding:3px 6px; color:var(--ds-brass); border:1px solid var(--ds-crater-hi); flex:none; }
.ds-dest-name { font-size:12.5px; line-height:1.4; font-weight:500; overflow-wrap:anywhere; min-width:0; flex:1 1 120px; }
.ds-device { color:var(--ds-mocha); font:400 9.5px/1.4 var(--ds-mono); }
.ds-key::after { content:''; position:absolute; inset:-4px; border-radius:50%; }
.ds-key:disabled { border-radius:0; cursor:default; }
.ds-key:disabled::after { display:none; }
.ds-head .ds-state { font-size:10px; letter-spacing:.12em; }
.ds-head .ds-meta { gap:6px; }
.ds-head .ds-scope { flex:1 1 80px; min-width:30px; border:0; padding:0; height:40px; background:none; box-shadow:none; }
.ds-status { display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; padding:6px 12px; background:#10141B; border-top:1px solid rgba(255,255,255,.03); border-bottom:1px solid var(--ds-crater); font:400 10px/1.4 var(--ds-mono); letter-spacing:.05em; }
.ds-mic-status { color:var(--ds-bone); }
.ds-mic-status::before { content:''; display:inline-block; width:5px; height:5px; background:var(--ds-label); margin-right:6px; vertical-align:1px; }
.ds-status .ds-link { font-size:10px; }
.ds-remote-label { display:none; font:400 9px/1.4 var(--ds-mono); color:var(--ds-bone); background:var(--ds-void); z-index:1; max-width:100%; }
.ds[data-remote="1"] .ds-scope::before { border-top-style:dashed; }
.ds[data-remote="1"] .ds-bar { visibility:hidden; }
.ds[data-remote="1"] .ds-remote-label { display:block; }
.ds-w[data-corrected="1"] { text-decoration:underline; text-decoration-color:var(--ds-teal); text-underline-offset:4px; }
.ds-verify { border:0; background:none; padding:6px 0; font:400 11px/1.4 var(--ds-mono); cursor:pointer; white-space:normal; text-align:left; }
.ds-verify::after { content:' →'; }
.ds-verify:hover { color:var(--ds-crema); }
.ds-follow { min-height:30px; white-space:normal; }
.ds :is(button,[tabindex]):focus-visible { outline:2px solid var(--ds-crema); outline-offset:2px; }
.ds [hidden], .ds-band[hidden] { display:none !important; }
.ds-route:has(.ds-chips:empty):has(.ds-tools:empty) { display:none; }
.ds--dock .ds-route { padding-top:7px; padding-bottom:7px; }
.ds--dock .ds-chips { display:none; }
.ds--dock .ds-tools { width:100%; margin:0; }
.ds--dock .ds-tools:has(> :not([hidden])) { justify-content:flex-end; }
.ds--dock .ds-tools #voiceModePicker { display:none; }
/* Keep controls reachable with the phone keyboard and compact landscape. */
.ds--dock { max-height:calc(100dvh - 24px - env(safe-area-inset-bottom,0px)); overflow:auto; overscroll-behavior:contain; }
@media(max-width:1300px) { body.rail-open .ds-dock-host { --ds-dock-shift:0px; } }
@media(max-height:550px) { .ds--dock { --ds-transcript-max:5em; } .ds--dock .ds-band { padding-top:5px; padding-bottom:5px; } }
/* FIX (2026-10-11): Surface 3 kept identity, destination, modes, status and
   hint open at rest, so the idle dock was a ~230px card parked over census rows
   and over Note Evolution's Send/Save buttons (owner screenshots 10-11). At rest
   it is the mic row again; pointing at it or tabbing into it opens the full
   card, and capture keeps it open (data-rest is 0 from Connecting onward). */
/* Measured 10-11 on prod at 390-2400 px: even the 374px resting bar covered
   Quick Progress/Quick D/C Generate, Tapestry lanes and rail buttons with the
   rail open, and the chat/menu buttons on a phone. At rest the dock is the mic
   key alone. It is anchored at the LEFT edge of the card it opens into, so the
   key never moves under the pointer when hover/focus/capture expands it, and
   it starts right of the bottom-left Guide pill (x 14-90). */
#voice-command-bar.ds-dock-host {
  --ds-dock-left: max(104px, calc(50% - var(--ds-dock-shift, 0px) - 187px));
  left: var(--ds-dock-left) !important; transform: none !important;
  max-width: calc(100vw - var(--ds-dock-left) - 8px) !important;
}
#voice-command-bar.ds-dock-host:has(> .ds[data-rest="1"]:not(:hover):not(:focus-within)):not(:has(> .voice-iphone-panel:not([hidden]))) { width: auto !important; }
#voice-command-bar.ds-dock-host:not(:has(> .voice-iphone-panel:not([hidden]))) > .ds--dock[data-rest="1"]:not(:hover):not(:focus-within) :is(.ds-context, .ds-status, .ds-band, .ds-route, .ds-scope, .ds-meta) { display: none !important; }
#voice-command-bar.ds-dock-host:not(:has(> .voice-iphone-panel:not([hidden]))) > .ds--dock[data-rest="1"]:not(:hover):not(:focus-within) .ds-head { padding-right: 7px; }
/* The Quick Generate modal carries its own capture card; a resting dock beside
   it was a second, unrelated mic over the modal overlay. */
body:has(#quickGenerateModal:not([hidden]) .ds) #voice-command-bar.ds-dock-host:has(> .ds[data-rest="1"]) { display: none !important; }
/* Phone: the open card spans the screen. The resting key sits bottom-centre,
   the one spot clear of the menu button and Guide (bottom-left) and chat
   (bottom-right); with the rail open it rides above the rail's Prior
   Notes/Generate row. A phone has no hover, so the key moving to the card's
   left edge happens only after the tap that starts capture. */
@media (max-width: 600px) {
  #voice-command-bar.ds-dock-host { --ds-dock-left: 8px; }
  #voice-command-bar.ds-dock-host, #voice-command-bar.ds-dock-host:has(> .ds[data-rest="1"]) { width: calc(100vw - 16px) !important; }
  #voice-command-bar.ds-dock-host:has(> .ds[data-rest="1"]:not(:hover):not(:focus-within)):not(:has(> .voice-iphone-panel:not([hidden]))) { --ds-dock-left: calc(50% - 27px); }
  body.rail-open #voice-command-bar.ds-dock-host { bottom: calc(102px + env(safe-area-inset-bottom, 0px)) !important; }
}
/* An empty transcript with no placeholder (error, review) drew a blank band. */
.ds:not([data-caret="1"]) .ds-transcript:not([contenteditable="true"]):not(:has(.ds-w)):has(> .ds-ph:empty) { display: none; }
/* Quick Progress / Quick D/C pin Generate at the input panel's bottom edge; at
   <=1600px wide the resting dock covered its right end. Reserve the resting
   dock (55px + 12px gap) under the panel. */
body:has(#voice-command-bar.ds-dock-host) .pn-input-panel { padding-bottom: 88px; }
/* An idle routing row with nothing visible drew a blank strip under the hint. */
.ds--dock:not([data-verify="1"]) .ds-route:not(:has(> .ds-tools > :not([hidden], [style*="display: none"], [style*="display:none"], #voiceModePicker, .ds-verify, .ds-command-choices:empty))) { display: none; }