:root {
  --surface-lime: #f3f6d6;
  --surface-mid: #f4f1fa;
  --surface-lavender: #ede8fc;
  --surface: #ffffff;
  --ink: #1e1b2e;
  --ink-soft: #3a3650;
  --ink-muted: #565370;
  --ink-on-pastel: #3b3852;
  --accent: #6b4def;
  --accent-strong: #5b3fe0;
  --accent-light: #a48cf9;
  --accent-soft: #f1edfe;
  --staff-fill: #dcd1fb;
  --staff-half: #ece6fd;
  --patient-fill: #a8e9d3;
  --patient-card: #c9f0e0;
  --patient-half: #d7f4e8;
  --patient-ink: #0b6e52;
  --patient-dock-light: #7fddbc;
  --patient-dock: #22a97f;
  --peach: #ffd37a;
  --pink: #ffc3d0;
  --sun: #f2b800;
  --record: #e30a17;
  --line: #d8d4e8;
  --line-soft: #e2ddf5;
  --scrim: #1e1b2e73;
  --status-connecting: #b45309;
  --status-offline: #b91c1c;
  --alert-soft: #fde8e8;
  --alert-ink: var(--status-offline);
  --mic-waiting-staff: #9a93b8;
  --mic-waiting-patient: #7c9a8f;
  --link: var(--accent-strong);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-14: 56px;
  --radius-chip: 19px;
  --radius-control: 24px;
  --radius-button: 32px;
  --radius-mic: 38px;
  --radius-card: 20px;
  --radius-blob: 36px;
  --radius-blob-pull: 56px;
  --radius-sheet: 36px;
  --radius-dock: 40px;
  --shadow-card: 0 8px 24px rgba(30,27,46,0.08);
  --shadow-chip: 0 4px 12px rgba(30,27,46,0.06);
  --shadow-float: 0 12px 32px rgba(30,27,46,0.14);
  --shadow-pill: 0 10px 28px rgba(30,27,46,0.16);
  --shadow-button: 0 14px 30px rgba(30,27,46,0.22);
  --shadow-mic-staff: 0 12px 28px rgba(91,63,224,0.32);
  --shadow-mic-patient: 0 12px 28px rgba(11,110,82,0.30);
  --size-touch: 44px;
  --size-control: 48px;
  --size-chip: 38px;
  --size-button: 64px;
  --size-mic: 76px;
  --size-dock: 128px;
  --size-flag: 28px;
  --size-phone: 390px;
  --font-sans: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Turnspeak components: plain CSS on the tokens (tokens.css loads first). Prefix: ts- */

.ts { font-family: var(--font-sans); color: var(--ink); -webkit-font-smoothing: antialiased; }
.ts *, .ts *::before, .ts *::after { box-sizing: border-box; }
.ts button { font-family: inherit; cursor: pointer; }
.ts button:disabled { cursor: default; }
.ts a { color: var(--link); }

/* Ground */
.ts-ground { background: linear-gradient(165deg, var(--surface-lime) 0%, var(--surface-mid) 50%, var(--surface-lavender) 100%); }

/* Flag disc */
.ts-flag { width: var(--size-flag); height: var(--size-flag); border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 2px var(--surface); }
.ts-flag--lg { width: 30px; height: 30px; }

/* Chips */
.ts-chip { height: var(--size-chip); padding: 0 14px; border: 0; border-radius: var(--radius-chip); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 500; box-shadow: var(--shadow-chip); }
.ts-chip[aria-pressed="true"] { background: var(--accent); color: #ffffff; font-weight: 600; }
.ts-chip--phrase { height: 36px; border: 1px solid var(--line-soft); border-radius: 18px; box-shadow: none; }

/* Pill buttons */
.ts-btn { display: flex; align-items: center; justify-content: space-between; height: var(--size-button); padding: 6px 6px 6px var(--space-8); border: 0; border-radius: var(--radius-button); background: var(--ink); color: #ffffff; text-decoration: none; font-size: 18px; font-weight: 600; }
.ts-btn--floating { box-shadow: var(--shadow-button); }
.ts-btn__arrow { width: 52px; height: 52px; border-radius: 26px; background: var(--ink-soft); display: flex; align-items: center; justify-content: center; }
.ts-btn--wide { justify-content: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-6); border-radius: 26px; font-size: 15px; white-space: nowrap; }
.ts-btn--secondary { justify-content: center; gap: var(--space-2); height: 52px; padding: 0 var(--space-5); border: 1.5px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--ink); font-size: 14px; }
.ts-btn--pill { height: 40px; padding: 0 16px 0 12px; gap: var(--space-2); border-radius: 20px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-card); justify-content: center; }
.ts-iconbtn { width: var(--size-touch); height: var(--size-touch); border: 0; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); text-decoration: none; padding: 0; }
.ts-iconbtn--flat { box-shadow: none; background: transparent; }
.ts-iconbtn--tint { box-shadow: none; background: var(--accent-soft); }
.ts-iconbtn--sm { width: 40px; height: 40px; }

/* Blob cards */
.ts-blob { position: relative; }
.ts-blob__shadow { position: absolute; left: 0; top: 0; right: 0; bottom: 0; opacity: 0.5; border-radius: 44px 60px 40px 40px; transform: rotate(5deg) translate(4px, -6px); }
.ts-blob__body { position: relative; width: 100%; border: 0; border-radius: var(--radius-blob) var(--radius-blob-pull) 32px 32px; padding: 12px 12px 12px 16px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); }
.ts-blob--mirror .ts-blob__shadow { border-radius: 60px 44px 40px 40px; transform: rotate(-5deg) translate(-4px, -6px); }
.ts-blob--mirror .ts-blob__body { border-radius: var(--radius-blob-pull) var(--radius-blob) 32px 32px; }
.ts-blob--staff .ts-blob__shadow, .ts-blob--staff .ts-blob__body { background: var(--staff-fill); }
.ts-blob--patient .ts-blob__shadow, .ts-blob--patient .ts-blob__body { background: var(--patient-fill); }
.ts-blob--peach .ts-blob__shadow, .ts-blob--peach .ts-blob__body { background: var(--peach); }
.ts-blob--pink .ts-blob__shadow, .ts-blob--pink .ts-blob__body { background: var(--pink); }
.ts-blob__label { font-size: 12px; font-weight: 500; color: var(--ink-on-pastel); }
.ts-blob__title { font-size: 18px; font-weight: 600; line-height: 1.15; }
.ts-blob__sub { font-size: 12px; color: var(--ink-on-pastel); }
.ts-blob__disc { width: 34px; height: 34px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ts-blob__badge { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }

/* Language selector pair */
.ts-selectors { position: relative; display: flex; gap: var(--space-3); }
.ts-selectors > .ts-blob { flex: 1 1 0; min-width: 0; }
.ts-selectors .ts-blob__body { height: 112px; padding: 16px 14px 14px 18px; }
.ts-selectors__swap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; box-shadow: 0 8px 24px rgba(30,27,46,0.14); }

/* Voice dock */
.ts-dock { position: relative; height: var(--size-dock); border-radius: 50% 50% 0 0 / var(--radius-dock) var(--radius-dock) 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 18px; }
.ts-dock--staff { background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%); }
.ts-dock--patient { background: linear-gradient(180deg, var(--patient-dock-light) 0%, var(--patient-dock) 100%); }
.ts-dock--waiting { opacity: 0.6; }
.ts-dock__row { position: absolute; left: 50%; top: -38px; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; }
.ts-dock__mic { position: relative; width: var(--size-mic); height: var(--size-mic); border: 0; border-radius: var(--radius-mic); background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 0; }
.ts-dock--staff .ts-dock__mic { box-shadow: var(--shadow-mic-staff); }
.ts-dock--patient .ts-dock__mic { box-shadow: var(--shadow-mic-patient); }
.ts-dock__mic[aria-pressed="true"] { background: var(--accent-strong); box-shadow: 0 12px 28px rgba(91,63,224,0.45); }
.ts-dock__mic:disabled { box-shadow: none; }
.ts-dock__ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255,255,255,0.75); left: -9px; top: -9px; width: 94px; height: 94px; pointer-events: none; }
.ts-dock__ring--outer { left: -18px; top: -18px; width: 112px; height: 112px; border-color: rgba(255,255,255,0.45); }
.ts-dock__caption { background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 16px; }

/* Language pill (split-screen boundary) */
.ts-langpill { height: var(--size-control); padding: 0 var(--space-2); background: var(--surface); border-radius: var(--radius-control); box-shadow: var(--shadow-pill); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.ts-langpill__pair { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; padding: 0 6px; }


/* Transcript card */
.ts-card { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.ts-card--staff { background: var(--staff-fill); border-radius: 22px 30px 22px 22px; }
.ts-card--patient { background: var(--patient-card); border-radius: 30px 22px 22px 22px; }
.ts-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--ink-on-pastel); }
.ts-card__meta time { font-weight: 400; }
.ts-card__text { font-size: 15px; font-weight: 600; line-height: 1.3; }
.ts-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ts-card__trans { font-size: 13px; line-height: 1.35; color: var(--ink-on-pastel); }
.ts-card__replay { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; border: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; padding: 0; }
.ts-card__verified { display: inline-flex; align-items: center; gap: 4px; color: var(--patient-ink); }

/* Live indicator */
.ts-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--patient-ink); }
.ts-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ts-live--recording { color: var(--accent-strong); }

/* Timer pill */
.ts-timer { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; background: var(--surface); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-card); }
.ts-timer::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--record); }

/* Split screen halves */
.ts-half { position: relative; display: flex; flex-direction: column; }
.ts-half--patient { background: var(--patient-half); transform: rotate(180deg); }
.ts-half--staff { background: var(--staff-half); margin-top: -24px; z-index: 1; border-radius: 58% 42% 0 0 / 40px 36px 0 0; }
.ts-half__content { flex-grow: 1; padding: 36px 24px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.ts-half--staff .ts-half__content { padding-top: 56px; }
.ts-half__center { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding-bottom: 10px; }
.ts-half__translation { margin: 0; font-size: 26px; line-height: 1.25; font-weight: 600; letter-spacing: -0.3px; }
.ts-half__said { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-on-pastel); }
/* ---- App layout (screens, sheets, states). Tokens and ts- components come first in styles.css. ---- */

html, body { height: 100%; margin: 0; }
body { background: var(--surface-lime); color: var(--ink); font-family: var(--font-sans); -webkit-text-size-adjust: 100%; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.app { position: fixed; inset: 0; margin: 0 auto; max-width: 520px; overflow: hidden; }
@media (min-width: 560px) { .app { box-shadow: 0 0 0 1px var(--line), 0 24px 80px rgba(30,27,46,0.18); } body { background: var(--surface-lavender); } }
.grow { flex-grow: 1; }
[hidden] { display: none !important; }
.ts a.ts-btn { color: #ffffff; }
.linklike { border: 0; background: none; padding: 0; color: var(--link); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.section-row { display: flex; align-items: baseline; justify-content: space-between; }
.section-title { font-size: 16px; font-weight: 600; }
.hint { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-muted); }
.hint--small { font-size: 11px; }
.input { height: 48px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); width: 100%; box-sizing: border-box; }
.input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.setup__scroll { flex-grow: 1; overflow-y: auto; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + var(--space-14)) var(--space-6) calc(env(safe-area-inset-bottom, 0px) + 112px); display: flex; flex-direction: column; gap: var(--space-4); }
.setup__header { display: flex; align-items: center; gap: var(--space-3); }
.setup__header .ts-iconbtn + .ts-iconbtn { margin-inline-start: calc(var(--space-2) * -1); }
.mark { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(107,77,239,0.25); }
.setup__hello { font-size: 13px; color: var(--ink-muted); }
.setup__desk { font-size: 16px; font-weight: 600; line-height: 1.2; }
.setup__headline { margin: 0; font-size: 34px; line-height: 1.15; font-weight: 600; letter-spacing: -0.5px; }
.setup__headline b { font-weight: inherit; }
.setup__headline span { font-weight: 400; color: var(--ink-muted); }
.chips { display: flex; gap: var(--space-2); align-items: center; overflow-x: auto; scrollbar-width: none; flex-shrink: 0; padding: 6px 0 10px; margin: -6px 0 -10px; }
.chips::-webkit-scrollbar { display: none; }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
.chips .ts-chip { flex-shrink: 0; }
.sel__row { display: flex; align-items: center; gap: var(--space-2); }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.quick-grid .ts-blob__body { height: 76px; padding: 0 14px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.quick-grid .ts-flag { width: 32px; height: 32px; }
.quick-grid .ts-blob__names { display: flex; flex-direction: column; min-width: 0; }
.quick-grid .ts-blob__title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quick-grid .ts-blob__sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup__footer { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-6) calc(env(safe-area-inset-bottom, 0px) + var(--space-4)); background: var(--surface-lavender); }
.search { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border-radius: var(--radius-control); background: var(--surface-mid); flex-shrink: 0; }
.search input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.ts-blob__body[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Consent */
.screen--consent { background: linear-gradient(170deg, var(--surface-lime) 0%, var(--surface-mid) 55%, var(--surface-lavender) 100%); }
.wave { position: absolute; border-radius: 50%; pointer-events: none; }
.wave--peach { left: -160px; right: -60px; bottom: -230px; height: 360px; background: var(--peach); opacity: 0.85; }
.wave--lavender { left: 40px; right: -220px; bottom: -250px; height: 360px; background: var(--staff-fill); opacity: 0.9; }
.consent__scroll { position: relative; flex-grow: 1; overflow-y: auto; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + var(--space-14)) var(--space-6) 200px; display: flex; flex-direction: column; gap: var(--space-4); }
.consent__header { display: flex; align-items: center; justify-content: space-between; }
.consent__step { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.illo { position: relative; height: 220px; display: flex; align-items: center; justify-content: center; }
.illo__ring { position: absolute; left: 50%; bottom: 10px; width: 270px; height: 96px; margin-left: -135px; border: 3px solid rgba(107,77,239,0.4); border-radius: 50%; transform: rotate(-8deg); }
.illo__bubble { display: flex; align-items: center; justify-content: center; }
.illo__bubble--purple { position: relative; width: 124px; height: 124px; margin: 0 48px 30px 0; border-radius: 40px 40px 40px 10px; background: var(--accent); box-shadow: 0 16px 32px rgba(107,77,239,0.28); }
.illo__bubble--mint { position: absolute; left: 50%; top: 88px; margin-left: 6px; width: 98px; height: 98px; border-radius: 32px 32px 10px 32px; background: var(--patient-dock); box-shadow: 0 14px 28px rgba(23,165,122,0.28); }
.illo__spark { position: absolute; }
.illo__spark--a { left: 36px; top: 20px; }
.illo__spark--b { right: 40px; top: 6px; }
.consent__title { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.5px; }
.consent__text { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500; }
.consent__text--other { font-size: 14px; color: var(--ink-muted); font-weight: 400; }
.consent__check { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border-radius: var(--radius-card); padding: 12px 16px; box-shadow: var(--shadow-card); font-size: 15px; font-weight: 500; line-height: 1.3; cursor: pointer; }
.consent__check input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--accent); }
.consent__link { font-size: 13px; font-weight: 500; align-self: flex-start; }
.consent__dots { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 118px); display: flex; justify-content: center; gap: 6px; }
.consent__dots span { width: 8px; height: 8px; border-radius: 4px; background: var(--line); }
.consent__dots span.on { width: 28px; background: var(--accent); }
.consent__continue { position: absolute; left: var(--space-6); right: var(--space-6); bottom: calc(env(safe-area-inset-bottom, 0px) + 36px); }
.consent__continue:disabled { opacity: 0.45; cursor: default; }

/* Flip view */
.screen--talk { background: var(--staff-half); }
.half { flex: 1 1 0; min-height: 0; }
.ts-half--patient { padding-top: env(safe-area-inset-bottom, 0px); }
.ts-half--staff { padding-bottom: env(safe-area-inset-bottom, 0px); }
.ts-half__content { min-height: 0; overflow: hidden; }
.half__header { display: flex; align-items: center; gap: 10px; }
.half__who { display: flex; flex-direction: column; }
.half__lang { font-size: 20px; font-weight: 700; line-height: 1.1; }
.half__role { font-size: 12px; color: var(--ink-on-pastel); }
.ts-live--amber { color: var(--status-connecting); }
.ts-live--red { color: var(--status-offline); }
.ts-half__translation { overflow-wrap: anywhere; }
.ts-half__translation.len-m { font-size: 21px; }
.ts-half__translation.len-l { font-size: 17px; line-height: 1.3; }
.ts-half__translation.is-muted { color: var(--ink-on-pastel); font-weight: 500; font-size: 20px; }
.ts-half__translation.is-accent { color: var(--accent-strong); }
.half__heard { font-style: italic; }
.half__actions { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.bars { display: flex; align-items: center; gap: 4px; height: 28px; }
.bars span { width: 3px; height: 4px; border-radius: 2px; background: var(--accent); transition: height 60ms linear; }
.ts-half--patient .bars span { background: var(--patient-ink); }
.ts-half--patient .ts-live--amber, .ts-half--patient .ts-live--red { color: inherit; }
.correction { background: var(--surface); border-radius: var(--radius-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-card); }
.correction__label { font-size: 11px; font-weight: 600; color: var(--ink-muted); }
.correction__text { font-size: 15px; font-weight: 600; line-height: 1.3; }
.talk__pill { position: absolute; left: 0; right: 0; top: 50%; margin: 0 auto; transform: translateY(-50%); width: max-content; z-index: 3; }
.mic-icon { pointer-events: none; }
.ts-dock__mic { touch-action: none; -webkit-user-select: none; user-select: none; }
.ts-dock__mic[aria-pressed="true"] .mic-icon { stroke: #ffffff; }
.ts-dock__mic:disabled .mic-icon { stroke: var(--mic-waiting-patient); }
.ts-half--staff .ts-dock__mic:disabled .mic-icon { stroke: var(--mic-waiting-staff); }
.dock-wave.is-flat path { d: path('M4 10h6'); }

/* Sheets */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 8; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; box-sizing: border-box; background: var(--surface); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; box-shadow: 0 -12px 40px rgba(30,27,46,0.2); padding: 10px var(--space-5) calc(env(safe-area-inset-bottom, 0px) + var(--space-5)); display: flex; flex-direction: column; gap: var(--space-3); z-index: 9; }
.sheet--full { top: 0; max-height: none; border-radius: 0; padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-5)); }
.sheet--full .sheet__handle { display: none; }
.sheet__handle { width: 44px; height: 5px; border-radius: 3px; background: var(--line); align-self: center; }
.sheet__header { display: flex; align-items: center; gap: 10px; }
.sheet__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; }
.sheet__chip { font-size: 12px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft); padding: 4px 10px; border-radius: 12px; }
.sheet__close { background: var(--surface-mid); box-shadow: none; }
.sheet__body { overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.sheet__empty { margin: 0; font-size: 14px; color: var(--ink-muted); }
.sheet__footer { display: flex; gap: 10px; }
.sheet__iconbtn { width: 52px; padding: 0; flex-shrink: 0; }
.turns { display: flex; flex-direction: column; gap: 10px; }
.quick { display: flex; flex-direction: column; gap: 8px; }
.lang-list { display: flex; flex-direction: column; gap: 8px; }
.lang-row { display: flex; align-items: center; gap: 6px; border-radius: var(--radius-control); background: var(--surface-mid); }
.lang-row:has(.lang-row__pick[aria-pressed="true"]) { background: var(--accent-soft); outline: 2px solid var(--accent); }
.lang-row__pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; text-align: start; }
.lang-row__star { width: 48px; height: 48px; margin-inline-end: 4px; border: 0; border-radius: 50%; background: none; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lang-list .lang__en { font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.meter { height: 12px; border-radius: 6px; background: var(--line-soft); overflow: hidden; }
.meter__fill { display: block; height: 100%; width: 0; border-radius: 6px; background: var(--patient-dock); transition: width 80ms linear; }

/* Toast */
.toast { position: absolute; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 16px); transform: translateX(-50%); z-index: 20; background: var(--ink); color: #ffffff; padding: 10px 16px; border-radius: 20px; font-size: 13px; font-weight: 500; max-width: 90%; box-shadow: var(--shadow-float); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Right-to-left chrome (Arabic staff): forward arrows point left. The Flip view halves set their own dir. */
[dir="rtl"] .ts-btn__arrow svg, [dir="rtl"] .ts-blob__disc svg, [dir="rtl"] #btn-consent-back svg, [dir="rtl"] #btn-talk-back svg { transform: scaleX(-1); }

/* Start / Continue: alive when enabled: the arrow nudges forward and the pill squeezes on press. No gradients (brandbook).
   The global prefers-reduced-motion rule stops all of it. */
.ts-btn:not(.ts-btn--wide):not(.ts-btn--secondary):not(.ts-btn--pill) { position: relative; overflow: hidden; transition: transform 160ms cubic-bezier(.3,1.6,.5,1); }
.ts-btn:not(.ts-btn--wide):not(.ts-btn--secondary):not(.ts-btn--pill):active:not(:disabled) { transform: scale(0.97); }
.ts-btn:not(:disabled) .ts-btn__arrow svg { animation: ts-nudge 1.8s ease-in-out infinite; }
[dir="rtl"] .ts-btn:not(:disabled) .ts-btn__arrow svg { animation-name: ts-nudge-rtl; }
@keyframes ts-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes ts-nudge-rtl { 0%, 100% { transform: scaleX(-1) translateX(0); } 50% { transform: scaleX(-1) translateX(5px); } }

/* Access screen (QR or redeem code) */
.screen--access { background: linear-gradient(165deg, var(--surface-lime) 0%, var(--surface-mid) 50%, var(--surface-lavender) 100%); }
.access__scroll { flex-grow: 1; overflow-y: auto; box-sizing: border-box; padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--space-6) calc(env(safe-area-inset-bottom, 0px) + var(--space-8)); display: flex; flex-direction: column; gap: var(--space-4); }
.access__top { display: flex; justify-content: flex-end; }
.access__top .ts-flag { width: 22px; height: 22px; }
.access__hero { display: flex; justify-content: center; padding: var(--space-8) 0 var(--space-2); }
.access__mark { width: 112px; height: 112px; border-radius: 36px; background: var(--accent); display: flex; align-items: center; justify-content: center; box-shadow: 0 18px 36px rgba(107,77,239,0.3); }
.access__title { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -0.5px; text-align: center; }
.access__sub { margin: 0 0 var(--space-2); font-size: 15px; line-height: 1.45; color: var(--ink-muted); text-align: center; }
.access__form { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-card); }
.access__label { font-size: 12px; font-weight: 600; color: var(--ink-on-pastel); }
.access__input { height: 56px; font-size: 22px; font-weight: 600; letter-spacing: 2px; text-align: center; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.access__input::placeholder { letter-spacing: 0; font-size: 15px; font-weight: 400; text-transform: none; font-family: var(--font-sans); }
.access__error { margin: 0; font-size: 13px; font-weight: 500; color: var(--status-offline); text-align: center; }
.access__hint { text-align: center; }
.scanner { position: absolute; inset: 0; z-index: 12; background: #000; display: flex; align-items: center; justify-content: center; }
.scanner video { width: 100%; height: 100%; object-fit: cover; }
.scanner__frame { position: absolute; width: 64vw; max-width: 280px; aspect-ratio: 1; border: 3px solid #fff; border-radius: 28px; box-shadow: 0 0 0 100vmax rgba(0,0,0,0.45); }
.scanner__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; }
.org-logo { height: 48px; max-width: 220px; object-fit: contain; object-position: left center; }

/* Settings for end users: grouped white cards on a light ground */
.sheet--full#sheet-settings { background: var(--surface-mid); }
.settings { gap: var(--space-4); padding-bottom: var(--space-8); }
.set-group { display: flex; flex-direction: column; gap: 8px; }
.set-group__title { font-size: 13px; font-weight: 600; color: var(--ink-muted); padding-inline-start: 4px; }
.set-card { background: var(--surface); border-radius: var(--radius-card); box-shadow: var(--shadow-chip); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.set-card--rows { padding: 4px var(--space-4); gap: 0; }
.set-access__top { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; }
.set-access__logo { max-height: 40px; max-width: 160px; object-fit: contain; }
.set-access__org { font-size: 17px; font-weight: 600; }
.set-access__hello { font-size: 15px; font-weight: 600; }
.set-danger { border: 0; border-top: 1px solid var(--line-soft); background: none; padding: 14px 0 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--status-offline); cursor: pointer; }
.set-row { display: flex; align-items: center; gap: 12px; min-height: 60px; border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-align: start; cursor: pointer; }
.set-row + .set-row { border-top: 1px solid var(--line-soft); }
.set-row .ts-flag { width: 32px; height: 32px; }
.set-row__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.set-row__label { font-size: 12px; color: var(--ink-muted); }
.set-row__value { font-size: 16px; font-weight: 600; }
[dir="rtl"] .set-row svg { transform: scaleX(-1); }
.set-footer { text-align: center; }

/* Category picker (setup): one white capsule, equal segments, a sliding accent highlight. Flat colours only. */
.cat-segments { position: relative; display: grid; grid-template-columns: repeat(var(--hl-count, 4), minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--surface); border-radius: 26px; box-shadow: var(--shadow-chip); flex-shrink: 0; }
.cat-segments__hl { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px - (var(--hl-count, 4) - 1) * 4px) / var(--hl-count, 4)); border-radius: 22px; background: var(--accent); box-shadow: 0 5px 12px rgba(107,77,239,0.3); transform: translateX(calc(var(--hl-index, 0) * (100% + 4px))); transition: transform 280ms cubic-bezier(.3,1.25,.5,1); }
[dir="rtl"] .cat-segments__hl { left: auto; right: 4px; transform: translateX(calc(var(--hl-index, 0) * -1 * (100% + 4px))); }
.cat-seg { position: relative; z-index: 1; height: 58px; border: 0; background: none; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: inherit; font-size: 12px; font-weight: 500; color: var(--ink-soft); cursor: pointer; min-width: 0; transition: color 200ms; }
.cat-seg span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-seg[aria-pressed="true"] { color: #ffffff; font-weight: 600; }
.cat-seg:active { transform: scale(0.97); }
/* Settings: tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cat-tile { height: 92px; border: 2px solid transparent; border-radius: 18px; background: var(--surface-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); cursor: pointer; min-width: 0; }
.cat-tile span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 6px; }
.cat-tile__disc { width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--accent-strong); display: flex; align-items: center; justify-content: center; }
.cat-tile[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.cat-tile[aria-pressed="true"] .cat-tile__disc { background: var(--accent); color: #ffffff; }
/* Setup rhythm: 20 between text blocks, 28 before blob cards (their rotated shadows reach up). */
.setup__scroll { gap: 0; }
.setup__scroll > .setup__headline, .setup__scroll > .cat-segments { margin-top: var(--space-5); }
.setup__scroll > .ts-selectors, .setup__scroll > .section-row { margin-top: 28px; }
.setup__scroll > .quick-grid { margin-top: var(--space-4); row-gap: var(--space-4); }
.setup__scroll > #quick-hint { margin-top: var(--space-3); }
/* Selected outlines are drawn inside, so a scrolling list never clips them. */
.lang-row:has(.lang-row__pick[aria-pressed="true"]) { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.ts-blob__body[aria-pressed="true"] { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }

/* Safety check: a number, dose, date, allergy or side differs. Flat alert-soft fill, alert-ink text. */
.correction--critical { background: var(--alert-soft); box-shadow: none; }
.correction--critical .correction__label { color: var(--alert-ink); font-size: 13px; font-weight: 600; }
.correction__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.correction__list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 15px; color: var(--ink); }
.correction__list li b { color: var(--ink); font-weight: 700; }
.correction__list li s { color: var(--alert-ink); font-weight: 600; text-decoration-thickness: 2px; }
[dir="rtl"] .correction__list li span[aria-hidden] { transform: scaleX(-1); }
.ts-card__alert { font-size: 11px; font-weight: 600; color: var(--alert-ink); background: var(--alert-soft); border-radius: 10px; padding: 2px 8px; }

/* "Don't know their language?": one white capsule under the language cards, patient colours (it is for them) */
.detect-btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 18px 8px 8px; border: 0; border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-chip); font: inherit; color: var(--ink); cursor: pointer; text-align: start; flex-shrink: 0; }
.detect-btn__disc { width: 40px; height: 40px; border-radius: 50%; background: var(--patient-card); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.detect-btn__text { font-size: 14px; font-weight: 500; }
.detect-btn__action { font-size: 13px; font-weight: 600; color: var(--patient-ink); white-space: nowrap; }
.detect-btn:active { transform: scale(0.98); }
.setup__scroll > .detect-btn { margin-top: var(--space-4); }
/* Find their language (full screen) */
#sheet-detect { background: var(--surface); }
.detect__hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-muted); }
.detect__stage { flex: 1 1 auto; min-height: 0; background: var(--patient-card); border-radius: var(--radius-sheet); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-6) var(--space-5); text-align: center; }
.detect__prompt { font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--ink); min-height: 94px; display: flex; align-items: center; justify-content: center; transition: opacity 300ms ease; }
.detect__prompt.is-fading { opacity: 0; }
.detect__status { font-size: 15px; font-weight: 500; color: var(--ink-on-pastel); min-height: 20px; }
.detect__result { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.detect__flag { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--surface); }
.detect__name { font-size: 30px; font-weight: 700; letter-spacing: -0.4px; }
.detect__english { font-size: 15px; color: var(--ink-on-pastel); }
.detect__heard { font-size: 14px; font-style: italic; color: var(--ink-on-pastel); max-width: 300px; }
.detect__mic-wrap { position: relative; width: 112px; height: 112px; display: flex; align-items: center; justify-content: center; }
.detect__mic { position: relative; z-index: 1; width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--surface); box-shadow: 0 10px 24px rgba(11,110,82,0.22); display: flex; align-items: center; justify-content: center; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.detect__mic:disabled { opacity: 0.5; cursor: default; }
.detect__mic[aria-pressed="true"] { background: var(--patient-ink); }
.detect__mic[aria-pressed="true"] .mic-icon { stroke: #ffffff; }
.detect__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--patient-ink); opacity: 0; }
.detect__mic-wrap.is-held .detect__ring { animation: detect-ring 1.2s ease-out infinite; }
@keyframes detect-ring { from { transform: scale(0.85); opacity: 0.6; } to { transform: scale(1.35); opacity: 0; } }
.detect__actions { display: flex; flex-direction: column; gap: 10px; }
.detect__notice { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) { .detect__mic-wrap.is-held .detect__ring { animation: none; opacity: 0.5; } .detect__prompt { transition: none; } }

/* Dark pill buttons: flat accent arrow disc (brand colour, no gradient), a faint white edge.
   Start adds the language pair under its label and both flags, overlapping, before the arrow. */
.ts-btn:not(.ts-btn--wide):not(.ts-btn--secondary) { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 14px 30px rgba(30,27,46,0.16); padding-inline-start: 28px; gap: 12px; }
.ts-btn__arrow { background: var(--accent); box-shadow: 0 4px 12px rgba(107,77,239,0.45); flex-shrink: 0; }
.ts-btn:disabled .ts-btn__arrow { box-shadow: none; }
.ts-btn--wide .ts-btn__arrow, .ts-btn--secondary .ts-btn__arrow { box-shadow: none; }
.ts-btn__text { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; line-height: 1.2; }
.ts-btn__text small { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-btn__text small:empty { display: none; }
.ts-btn__flags { display: flex; flex-shrink: 0; }
.ts-btn__flags img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--ink); }
.ts-btn__flags img + img { margin-inline-start: -8px; }
.ts-btn__flags img:first-child { position: relative; z-index: 1; }

/* Quick phrases in history: tap to have one spoken (speaker icon), disabled outside a conversation */
.quick__hint { margin: -4px 0 0; font-size: 12px; color: var(--ink-muted); }
.ts-chip--phrase { display: inline-flex; align-items: center; gap: 6px; height: auto; min-height: 36px; padding: 6px 14px 6px 10px; text-align: start; white-space: normal; line-height: 1.3; cursor: pointer; }
.ts-chip--phrase svg { flex-shrink: 0; }
.ts-chip--phrase:disabled { opacity: 0.55; cursor: default; }
.ts-chip--phrase:not(:disabled):active { transform: scale(0.97); }
/* Disabled dark pill stays solid over the waves: only its label and arrow dim, the disc turns ink-soft. */
.consent__continue:disabled { opacity: 1; color: rgba(255,255,255,0.45); }
.ts-btn:disabled .ts-btn__arrow { background: var(--ink-soft); }
.ts-btn:disabled .ts-btn__arrow svg { opacity: 0.45; }

/* Settings: small segmented choice (Off · 2 · 5 · 10 min) */
.set-seg { display: flex; gap: 4px; padding: 4px; background: var(--surface-mid); border-radius: 22px; }
.set-seg button { flex: 1 1 0; height: 36px; border: 0; border-radius: 18px; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.set-seg button[aria-pressed="true"] { background: var(--accent); color: #ffffff; }
.set-tip { padding-top: 10px; border-top: 1px solid var(--line-soft); }
/* Clear-after-inactivity warning: a dark capsule above everything, with the seconds left and Keep */
.idle-warning { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; width: min(calc(100vw - 32px), 420px); box-sizing: border-box; padding: 8px 8px 8px 10px; background: var(--ink); color: #ffffff; border-radius: 32px; box-shadow: var(--shadow-float); }
.idle-warning[hidden] { display: none; }
.idle-warning__ring { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--accent); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.idle-warning__text { flex: 1 1 auto; font-size: 14px; font-weight: 500; line-height: 1.3; }
.idle-warning__keep { flex-shrink: 0; height: 44px; padding: 0 20px; border: 0; border-radius: 22px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }

/* Flag docks (web twin of iOS FlagDock). Layer clipped to the wave; the mic overhangs outside it. No gradients:
   the painting or the flat tint, under one flat white veil so the halo, waves and caption pill stay crisp. */
.ts-dock__art { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ts-dock__art::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.14); }
.ts-dock__caption { position: relative; } /* above the art layer (the mic row is already positioned) */
.ts-dock--flag { background: none; }
.ts-dock__art--painted { background: var(--dock-art) center / cover no-repeat; }
.ts-dock__art--drawn { background: var(--dock-tint); }
.ts-dock__art--drawn::before { content: ""; position: absolute; left: -22%; top: -45%; width: 135%; height: 190%;
  background: var(--dock-flag) center / cover no-repeat; transform: rotate(-12deg); opacity: 0.55; filter: blur(0.8px); }

/* First run (no sentence yet): numbered hints in each half's language; both mics breathe (off under reduced motion) */
.first-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.first-hints[hidden] { display: none; }
.first-hints__step { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 16px; background: rgba(255,255,255,0.7); font-size: 13px; font-weight: 500; color: var(--ink); }
.first-hints__step b { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #ffffff; background: var(--accent); }
.ts-half--patient .first-hints__step b { background: var(--patient-ink); }
.first-hints__arrow { color: var(--ink-muted); font-size: 14px; }
[dir="rtl"] .first-hints__arrow { transform: scaleX(-1); }
.is-first-run .ts-dock__mic:not(:disabled)::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: rgba(255,255,255,0.35); z-index: -1; animation: ts-breathe 1.4s ease-in-out infinite alternate; }
@keyframes ts-breathe { from { transform: scale(1); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .is-first-run .ts-dock__mic::before { animation: none; } }
.ts-dock__row { z-index: 1; } /* own layer: the breathing halo stays above the flag art */

/* The organisation's own phrases come first, on a soft accent fill */
.ts-chip--own { background: var(--accent-soft); border-color: transparent; }
.ts-chip--phrase { max-width: 100%; box-sizing: border-box; } .ts-chip--phrase span { min-width: 0; overflow-wrap: anywhere; }