:root {
  color-scheme: light;

  --bg: #f3f4f8;
  --panel: #ffffff;
  --panel-subtle: #f6f7fb;
  --panel-raised: #ffffff;

  --ink: #1a1d24;
  --ink-soft: #454a54;
  --muted: #6b7280;
  --muted-light: #6b7280;   /* was #9aa1ad -- 2.60:1 on white, unreadable */

  --line: rgba(20, 24, 38, 0.08);
  --line-subtle: rgba(20, 24, 38, 0.05);
  --line-strong: rgba(20, 24, 38, 0.14);

  --brand: #4f6dff;
  --brand-hover: #3c57e6;
  --brand-dark: #2c3fb0;
  --brand-soft: #eef1ff;
  /* Link colour, distinct from --brand: --brand is tuned for buttons and fills,
     where it sits behind white text. A link sits ON the bubble, so it needs its
     own contrast budget -- #4f6dff only reaches 4.23:1 on white, under AA. */
  --link: #4560f0;
  --link-hover: #3547c8;
  /* Referenced as var(--danger, ...) / var(--warn, ...) in several places but
     never actually declared, so the hardcoded light fallback applied in BOTH
     themes -- 2.88:1 and 3.53:1 on a dark panel. */
  --danger: #c0392b;
  --warn: #b45309;
  --scrim: rgba(10, 12, 18, 0.55);

  /* Stacking order, as one scale instead of ad-hoc numbers.
     Four separate things sat at 1000 (the call dock, the Ask AI overlay, the
     @mention modal and an admin modal) and the photo viewer sat at 200 -- below
     all of them -- so opening a photo left the call dock and the bug-report pill
     painted on top of the darkened overlay. Layers only compose predictably if
     they are named and ordered in one place.

     The order encodes intent: a call must interrupt anything, because a ringing
     phone is the one thing a person cannot defer. */
  --z-sticky: 20;      /* sticky headers inside a scroll area */
  --z-dropdown: 300;   /* menus anchored to an input */
  --z-dock: 700;       /* the persistent call dock: above content, below modals */
  --z-overlay: 900;    /* modal scrims and their dialogs */
  --z-lightbox: 1000;  /* media viewer -- opens FROM a modal, so it sits above */
  --z-toast: 1100;     /* transient feedback, never blocked by a dialog */
  --z-incoming-call: 1200;
  /* Text variants. --accent and --brand are FILL colours: they sit behind white
     text. Used AS text on a light surface they only reach 3.3:1 and 3.8:1, so
     each needs a darker sibling rather than a reuse. */
  --accent-ink: #9333ad;
  --brand-ink: #3d55e0;
  --brand-soft-strong: #dde4ff;

  --inbound: #ffffff;
  --outbound-from: #5b7bff;
  --outbound-to: #4f6dff;
  --outbound-ink: #ffffff;

  --call: #f1f2f6;
  --reaction: #fdf1fb;
  --reaction-line: #f3c9ec;
  --accent: #c45fdc;

  --note-bg: #fff8d6;
  --note-bg-strong: #fdf0b5;
  --note-line: #e7d27a;
  --note-ink: #5b4a12;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --bubble-radius: 18px;
  --bubble-tail: 5px;

  --shadow-sm: 0 1px 2px rgba(20, 24, 38, 0.06), 0 1px 1px rgba(20, 24, 38, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 24, 38, 0.08), 0 2px 6px rgba(20, 24, 38, 0.05);
  --shadow-lg: 0 16px 48px rgba(20, 24, 38, 0.16), 0 4px 12px rgba(20, 24, 38, 0.08);

  --avatar-ink: #ffffff;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0e1015;
  --panel: #16181f;
  --panel-subtle: #1c1f28;
  --panel-raised: #20232d;

  --ink: #f1f2f6;
  --ink-soft: #c7cad3;
  --muted: #8b919e;
  --muted-light: #7d838f;   /* was #5c6270 -- 2.90:1 on --panel, unreadable */

  --line: rgba(255, 255, 255, 0.08);
  --line-subtle: rgba(255, 255, 255, 0.05);
  --line-strong: rgba(255, 255, 255, 0.14);

  --brand: #6e87ff;
  --brand-hover: #8298ff;
  --brand-dark: #c2cdff;
  --brand-soft: rgba(110, 135, 255, 0.16);
  --link: #8298ff;        /* 5.89:1 on the dark inbound bubble */
  --link-hover: #a5b5ff;
  --danger: #f28b82;      /* 6.56:1 on a dark panel */
  --warn: #fcd34d;        /* 12.29:1 */
  --scrim: rgba(0, 0, 0, 0.62);
  --accent-ink: #e29bf0;   /* on a dark panel the fill colour is already legible */
  --brand-ink: #8298ff;
  --brand-soft-strong: rgba(110, 135, 255, 0.28);

  --inbound: #20232d;
  --outbound-from: #6e87ff;
  --outbound-to: #5468e0;
  --outbound-ink: #ffffff;

  --call: #1c1f28;
  --reaction: #2a1f2c;
  --reaction-line: #4a2f4d;
  --accent: #e29bf0;

  --note-bg: #3a3415;
  --note-bg-strong: #4a4019;
  --note-line: #6b5d24;
  --note-ink: #f0e4b0;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36), 0 2px 6px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 220ms ease, color 220ms ease;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Subtle scrollbars */
.conversation-list,
.thread-scroller {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.conversation-list::-webkit-scrollbar,
.thread-scroller::-webkit-scrollbar {
  width: 8px;
}

.conversation-list::-webkit-scrollbar-thumb,
.thread-scroller::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.app-shell {
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  height: 100vh;
  /* On mobile browsers 100vh includes the area behind the URL bar, which pushes
     the composer/send button off-screen. dvh tracks the *visible* viewport. */
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  padding: 12px;
  gap: 12px;
  transition: grid-template-columns 200ms ease;
}

.app-shell.call-insights-open {
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) minmax(320px, 440px);
}

/* With Call Insights open the middle column is narrow, and the thread header's
   three groups — patient identity, the Call/Leave Note/Ask AI actions, and the
   account chip — fight for one row, truncating the patient name to "Vin…". Keep
   identity + account chip on row one (name gets the width back) and drop the
   patient actions onto their own row beneath, left-aligned under the identity they
   act on. Only needed in this state; the full-width header fits all three inline. */
.app-shell.call-insights-open .thread-header {
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 10px;
}
.app-shell.call-insights-open .account-area-thread {
  order: 2;
}
.app-shell.call-insights-open .thread-actions {
  order: 3;
  flex: 1 0 100%;
  justify-content: flex-start;
}

.sidebar,
.thread-panel {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transition: background-color 220ms ease, box-shadow 220ms ease;
}

.sidebar {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  background: var(--panel);
  overflow: hidden;
}

.sidebar-header,
.thread-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-header {
  justify-content: space-between;
  min-height: 76px;
  align-items: flex-start;
  padding: 22px 18px 18px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: end;
  flex-wrap: wrap;
  row-gap: 8px;
}

.eyebrow {
  margin: 0 0 3px;
  color: var(--muted-light);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.icon-button,
.toolbar-button {
  display: inline-grid;
  place-items: center;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease,
    box-shadow 140ms ease, transform 80ms ease;
}

.icon-button {
  width: 38px;
  font-size: 1.35rem;
  font-weight: 700;
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.icon-button input {
  display: none;
}

.toolbar-button {
  min-width: 72px;
  padding: 0 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  border-radius: var(--radius-pill);
}

.toolbar-button:hover,
.icon-button:hover {
  background: var(--line-subtle);
  color: var(--ink);
}

.toolbar-button:active,
.icon-button:active {
  transform: scale(0.96);
}

.icon-button.is-active {
  /* Was white on --accent: 2.06:1 in dark, a pale pink smudge. --brand with the
     outbound ink is the pairing the app already uses for a filled active state
     (.inbox-filter.active, .unread-badge). */
  background: var(--brand);
  color: var(--outbound-ink);
}

.conversation-row:hover {
  background: var(--panel-subtle);
}

/* Theme toggle icon swap */
#themeToggle .icon-sun {
  display: none;
}

#themeToggle .icon-moon {
  display: block;
}

:root[data-theme="dark"] #themeToggle .icon-sun {
  display: block;
}

:root[data-theme="dark"] #themeToggle .icon-moon {
  display: none;
}

.search-wrap {
  padding: 4px 14px 12px;
}

/* Inbox status filter tabs (All / Unread / Unreplied / Read / Replied / Error).
   Horizontally scrollable so they never wrap or overflow the sidebar. */
/* Three pills and a "More" button, which fit at every width this rail is ever
   given. This used to be seven pills in a horizontally scrolling strip that hid
   its own scrollbar - so the tabs past the fold were invisible AND unreachable
   without a trackpad, and staff simply could not open Scheduled. Nothing here
   scrolls or clips any more; the overflow moved into a menu instead. */
.inbox-filters {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 14px 10px;
}

/* The anchor for the overflow menu. It must not clip, which is the other half
   of why the old scrolling strip could not have held a dropdown. */
.inbox-more {
  position: relative;
  flex: 0 0 auto;
}

.inbox-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.inbox-more-chevron {
  font-size: 0.6rem;
  line-height: 1;
  opacity: 0.75;
}

.inbox-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-raised, var(--panel));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}

.inbox-more-item {
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.inbox-more-item:hover,
.inbox-more-item:focus-visible {
  background: var(--line-subtle);
}

.inbox-more-item.active {
  color: var(--brand);
}

.inbox-more-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--line-subtle);
}

.inbox-filter {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.inbox-filter:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.inbox-filter.active {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 14px;
  width: 16px;
  height: 16px;
  color: var(--muted-light);
  pointer-events: none;
}

input,
select,
textarea {
  width: 100%;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
  color: var(--ink);
  outline: none;
  font-size: 0.875rem;
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input,
textarea {
  padding: 0 14px;
}

.search-field input {
  padding-left: 38px;
}

textarea {
  min-height: 38px;
  max-height: 160px;
  padding: 9px 14px;
  resize: none;
  line-height: 1.4;
  border-radius: var(--radius-lg);
}

select {
  width: 140px;
  padding: 0 36px 0 14px;
  border-radius: var(--radius-pill);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

input:focus,
select:focus,
textarea:focus,
button:focus-visible,
.icon-button:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.conversation-list {
  overflow-y: auto;
  padding: 4px 10px 10px;
  background: var(--panel);
}

.conversation-row {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  width: 100%;
  min-height: 78px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}

.conversation-row:active {
  transform: scale(0.99);
}

/* The per-conversation options menu (app.js `conversation-menu-dropdown`) is a child of its card and hangs
   below it. Two things used to bury its lower half behind the NEXT card, so only the top half was clickable:
   pressing a menu item counts as pressing the card, and the card's press `transform` turns it into a new
   stacking context that traps the menu's z-index. So: no press transform while a menu is open, and lift the
   whole card (and its menu) above its sibling cards. */
.conversation-row:has(.conversation-menu-dropdown) {
  z-index: 50;
}
.conversation-row:active:has(.conversation-menu-dropdown) {
  transform: none;
}

.conversation-row.active {
  background: var(--brand-soft);
}

.conversation-row.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--brand);
}

/* First row of the Scheduled rail: the way back to the queue and its settings
   once a patient's thread has taken over the right-hand pane. Deliberately not
   shaped like the patient rows under it -- it is a destination, not a person. */
.scheduled-queue-row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  text-align: left;
}
.scheduled-queue-row:hover {
  background: var(--panel-subtle);
}
.scheduled-queue-row[aria-selected="true"] {
  background: var(--brand-soft);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--brand);
}
.scheduled-queue-row .count {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.conversation-row:has(.unread-badge:not([hidden])) .conversation-name {
  color: var(--ink);
  font-weight: 800;
}

.avatar,
.mini-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  color: var(--avatar-ink);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.avatar {
  width: 48px;
  height: 48px;
  font-size: 1rem;
}

.mini-avatar {
  width: 46px;
  height: 46px;
  font-size: 0.84rem;
}

/* Household face cluster (face-cluster.js): replaces the initials circle when someone in the household has a photo. */
.avatar.has-faces,
.mini-avatar.has-faces {
  position: relative;
  display: block;
  background: none !important;
  box-shadow: none;
  overflow: visible;
  cursor: zoom-in;
}
.face-tile {
  position: absolute;
  box-sizing: border-box;
  border-radius: 50%;
  border: var(--face-border, 2px) solid var(--panel);
  background: var(--panel-subtle);
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.15);
}
.face-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.face-tile--more {
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 700;
}
.avatar.has-faces:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 50%; }
.face-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--scrim);
}
.face-lightbox__panel {
  position: relative;
  max-width: min(960px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 20px;
  border-radius: 14px;
  background: var(--panel);
  color: var(--ink);
}
.face-lightbox__close {
  position: sticky;
  top: 0;
  float: right;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  background: var(--panel-subtle);
  color: inherit;
}
.face-lightbox__grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; clear: both; }
.face-lightbox__person { margin: 0; width: min(280px, 100%); text-align: center; }
.face-lightbox__frame { aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--panel-subtle); }
.face-lightbox__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.face-lightbox figcaption { display: grid; gap: 2px; margin-top: 8px; font-size: 0.9rem; }
.face-lightbox figcaption span { opacity: 0.7; font-size: 0.8rem; }

.conversation-main {
  min-width: 0;
}

.conversation-top {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Leading status dot, mirroring Weave's per-row read status. Hidden for
   already-handled (replied + read) rows; colored for the states that need
   attention so the inbox is scannable at a glance. */
.status-dot {
  display: none;
  flex: 0 0 auto;
  align-self: center;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-radius: 50%;
}

.conversation-row[data-readstatus="unread"] .status-dot {
  display: block;
  background: var(--brand);
}

.conversation-row[data-readstatus="unreplied"] .status-dot {
  display: block;
  background: #f59e0b;
}

.conversation-row[data-error="true"] .status-dot {
  display: block;
  background: #dc2626;
}

/* Unreplied rows (a patient is waiting) get a slightly emphasized name even
   when already read, so they don't blend in with handled conversations. */
.conversation-row[data-readstatus="unreplied"] .conversation-name {
  color: var(--ink);
  font-weight: 800;
}

.conversation-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-date,
.conversation-phone,
.conversation-household,
.conversation-preview,
.meta-line,
.message-meta {
  color: var(--muted);
  font-size: 0.8125rem;
}

.conversation-household {
  margin-top: 2px;
  overflow: hidden;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.conversation-date {
  flex: 0 0 auto;
  font-size: 0.75rem;
}

.conversation-preview {
  display: -webkit-box;
  margin-top: 4px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.35;
}

.conversation-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.unread-badge {
  display: inline-grid;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.thread-panel {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  background: var(--panel-subtle);
  overflow: hidden;
  position: relative; /* positioning context for the floating intake checklist */
}

/* New-patient intake checklist — floats over the bottom-right of the conversation
   area (sits left of the copilot panel). Anchored above the composer so it never
   covers the message input. */
.intake-checklist {
  --ck-ok: #21a36b;
  position: absolute;
  right: 16px;
  bottom: 92px;
  width: 320px;
  max-width: calc(100% - 32px);
  max-height: 62%;
  display: flex;
  flex-direction: column;
  background: var(--panel-raised);
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 30;
  overflow: hidden;
  font-size: 0.8125rem;
}
.intake-checklist[hidden] { display: none; }
.ck-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-subtle);
}
.ck-head .ck-title {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 7px;
}
.ck-head .ck-track {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  text-transform: none;
  letter-spacing: 0;
}
.ck-head .ck-count { font-size: 0.75rem; color: var(--muted-light); white-space: nowrap; }
.ck-head .ck-save {
  font-size: 0.6875rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}
.ck-head .ck-save:hover { filter: brightness(1.05); }
.ck-head .ck-save[disabled] { opacity: 0.6; cursor: default; }
.ck-saved {
  font-size: 0.75rem;
  color: var(--muted);
  padding: 6px 13px 0;
}
.ck-saved a { color: var(--brand); font-weight: 600; }
.ck-saved.err { color: var(--danger, #c0392b); }
.ck-next {
  margin: 10px 13px 4px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.4;
}
.ck-next b { font-weight: 700; }
.ck-next .q { font-style: italic; }
.ck-scroll { overflow-y: auto; padding: 6px 13px 12px; }
.ck-subhead {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 12px 0 5px;
}
.ck-row {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
  margin-bottom: 4px;
}
.ck-row .mk { flex: none; width: 15px; text-align: center; line-height: 1.3; color: var(--muted-light); }
.ck-row.done .mk { color: var(--ck-ok); }
.ck-row.na { opacity: 0.5; }
.ck-row.next { background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand); }
.ck-row .lab { flex: none; width: 116px; color: var(--muted); }
.ck-row.done .lab { color: var(--ink-soft); }
.ck-row .val { font-weight: 600; color: var(--ink); }
.ck-row .hint { color: var(--muted-light); font-style: italic; }
.ck-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  padding: 4px 7px;
  font: inherit;
  font-weight: 600;
}
.ck-input::placeholder {
  color: var(--muted-light);
  font-weight: 400;
  font-style: italic;
}
.ck-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-soft);
}
.ck-row.inform { align-items: center; }
.ck-row.inform .lab { width: auto; color: var(--ink-soft); }

.thread-header {
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 22px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-subtle);
}

/* Back-to-inbox button: only relevant on small screens (master/detail). */
.thread-back {
  display: none;
  flex: none;
}

.identity {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.identity-copy {
  min-width: 0;
}

.identity-copy h2 {
  overflow: hidden;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.thread-actions {
  display: flex;
  flex: 0 1 auto;
  gap: 8px;
  /* Same guard as .header-actions: thread action buttons (call, transfer, hold,
     etc.) must wrap rather than overflow a narrow thread header. */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.thread-scroller {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px;
  background: var(--panel-subtle);
}

.composer {
  flex: 0 0 auto;
  background: var(--panel);
  padding: 12px 16px 16px;
  border-top: 1px solid var(--line-subtle);
}

.composer-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 5px 7px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-lg);
  background: var(--panel-subtle);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.composer-bar:focus-within {
  border-color: var(--brand);
  background: var(--panel);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.composer-bar textarea {
  flex: 1;
  min-height: 40px;
  max-height: 160px;
  padding: 9px 6px;
  border: none;
  background: transparent;
  border-radius: 0;
}

.composer-bar textarea:focus {
  border: none;
  box-shadow: none;
}

.composer-icon-button,
.send-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, transform 80ms ease, opacity 140ms ease;
}

.composer-icon-button {
  background: transparent;
  color: var(--muted);
}

.composer-icon-button:hover {
  background: var(--line-subtle);
  color: var(--ink);
}

.composer-icon-button svg,
.send-button svg {
  width: 18px;
  height: 18px;
}

.composer-bar > .send-button {
  align-self: center;
  width: 42px;
  height: 42px;
  margin-left: 4px;
}

.composer-bar > .send-button svg {
  width: 19px;
  height: 19px;
}

.composer-icon-button input {
  display: none;
}

/* AI assist button + popover menu (sits between Attach and the textarea). The
   sparkle button mirrors the suggestion chip's accent so it reads as the same
   assistant; the menu floats above the composer bar. */
.composer-ai {
  position: relative;
  flex: 0 0 auto;
}

.composer-ai-btn {
  color: var(--brand);
}

.composer-ai-btn:hover,
.composer-ai-btn[aria-expanded="true"] {
  background: var(--brand-soft);
  color: var(--brand-hover);
}

.composer-ai-menu {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  z-index: 30;
  width: 270px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(20, 24, 38, 0.16));
  animation: suggestion-in 120ms ease;
}

.composer-ai-menu[hidden] {
  display: none;
}

.composer-ai-menu .cai-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.composer-ai-menu .cai-item:hover {
  background: var(--brand-soft);
  color: var(--brand-hover);
}

.composer-ai-menu .cai-item:disabled {
  color: var(--muted-light);
  cursor: not-allowed;
  background: transparent;
}

.composer-ai-menu .cai-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--line-subtle);
}

.composer-ai-menu .cai-instruct {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
}

.composer-ai-menu .cai-input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
  color: var(--ink);
  font-size: 13px;
}

.composer-ai-menu .cai-input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.composer-ai-menu .cai-send {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease, opacity 120ms ease;
}

.composer-ai-menu .cai-send:hover {
  background: var(--brand-hover);
}

.composer-ai-menu .cai-send:active {
  transform: scale(0.92);
}

.composer-ai-menu .cai-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.send-button {
  background: var(--brand);
  color: #ffffff;
  box-shadow: var(--shadow-sm);
}

.send-button:hover {
  background: var(--brand-hover);
}

.send-button:active {
  transform: scale(0.92);
}

.send-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

/* AI "Suggested" message chip above the composer bar. Mirrors the brand-soft
   accents used by the copilot panel so it reads as the same assistant. */
.composer-suggestion {
  margin: 0 0 8px;
  padding: 9px 12px;
  border: 1px solid var(--brand-soft-strong);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--ink);
  animation: suggestion-in 140ms ease;
}

@keyframes suggestion-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: translateY(0); }
}

.composer-suggestion .cs-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}

.composer-suggestion .cs-head svg {
  width: 13px;
  height: 13px;
}

.composer-suggestion .cs-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--brand-soft-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: cs-spin 600ms linear infinite;
}

@keyframes cs-spin { to { transform: rotate(360deg); } }

/* The suggested text itself — italic, clickable to apply. */
.composer-suggestion .cs-body {
  display: block;
  width: 100%;
  text-align: left;
  font-style: italic;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  font: inherit;
  font-style: italic;
}

.composer-suggestion .cs-body:hover {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 2px;
}

.composer-suggestion .cs-translation {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--brand-soft-strong);
  color: var(--muted);
}

.composer-suggestion .cs-translation-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.composer-suggestion .cs-translation-text {
  min-width: 0;
  color: var(--muted);
  font-size: 0.8125rem;
  font-style: normal;
}

/* Grounding facts: the real chart/practice values the AI used, so staff can verify. */
.composer-suggestion .cs-grounding {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--brand-soft-strong);
}

.composer-suggestion .cs-ground-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}

.composer-suggestion .cs-ground-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--line-subtle);
  font-size: 0.75rem;
  color: var(--ink);
  font-style: normal;
}

.composer-suggestion .cs-ground-k {
  color: var(--muted);
  font-weight: 600;
}

.composer-suggestion .cs-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.composer-suggestion .cs-apply {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.composer-suggestion .cs-apply:hover { color: var(--brand-hover); }

.composer-suggestion .cs-dismiss {
  font-size: 0.75rem;
  color: var(--muted);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-left: auto;
}

.composer-suggestion .cs-dismiss:hover { color: var(--ink); }

/* "Applied — Undo" state after the staffer accepts a suggestion. */
.composer-suggestion.applied {
  border-color: var(--line-subtle);
  background: var(--panel-subtle);
}

.composer-suggestion.applied .cs-head { color: var(--muted); }

.composer-suggestion .cs-undo {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--brand);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.composer-suggestion .cs-undo:hover { color: var(--brand-hover); }

.attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.attachment-chip {
  display: inline-flex;
  max-width: 260px;
  min-height: 38px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 0.875rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.attachment-chip button {
  display: inline-grid;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(79, 109, 255, 0.16);
  color: var(--brand-dark);
  cursor: pointer;
  font-weight: 700;
}

.attachment-chip-image {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.message-list {
  display: flex;
  flex-direction: column;
  max-width: 920px;
  min-height: 100%;
  margin: 0 auto;
}

.thread-empty-note {
  align-self: center;
  margin: auto 0;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
}

.date-divider {
  align-self: center;
  margin: 18px 0 10px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.load-more-row {
  align-self: center;
  margin: 4px 0 14px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.message-row {
  display: flex;
  width: 100%;
  margin-top: 12px;
  /* No entrance animation: renderMessages() rebuilds every row from scratch on
     each thread render (open, the 12s refresh, seen/note events, live merges),
     so a per-row `animation: message-in` REPLAYED on every rebuild — fading the
     whole thread from opacity 0 -> 1 each time. That was the "messages flash
     blank then reappear" flicker. Rows now just appear; if we want a slide-in
     for genuinely new inbound messages later, gate it to new rows in JS. */
}

.message-row:first-child,
.date-divider + .message-row {
  margin-top: 0;
}

.message-row.merge-prev {
  margin-top: 2px;
}

.message-row.outbound {
  justify-content: flex-end;
}

.message-card {
  display: flex;
  flex-direction: column;
  max-width: min(640px, 76%);
}

/* Hug the content: the bubble and the meta line each shrink to their own
   width and align to the message side, so a short bubble ("hi!") isn't
   stretched to match the wider meta line ("Business 12:28 AM delivered"). */
.message-row.inbound .message-card {
  align-items: flex-start;
}

.message-row.outbound .message-card {
  align-items: flex-end;
}

.bubble {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: var(--bubble-radius);
  padding: 10px 14px;
  background: var(--inbound);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-size: 0.925rem;
  line-height: 1.45;
}

.message-row.inbound .bubble {
  border-bottom-left-radius: var(--bubble-tail);
}

.message-row.inbound.merge-next .bubble {
  border-bottom-left-radius: var(--bubble-radius);
}

.message-row.outbound .bubble {
  border-bottom-right-radius: var(--bubble-tail);
}

.message-row.outbound.merge-next .bubble {
  border-bottom-right-radius: var(--bubble-radius);
}

.bubble.attachment-only {
  padding: 4px;
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-md);
}

/* Links inside a message.
   There was no rule for these at all, so they fell back to the browser default
   (#0000EE) -- on a dark inbound bubble (#20232d) that is close to unreadable,
   and on the blue outbound gradient it disappears entirely. A patient's booking
   link is often the whole point of the message, so it has to be obvious in both
   themes and on both bubble colours. */
.bubble a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 600;
  /* Long booking URLs must wrap rather than force the bubble wide. */
  overflow-wrap: anywhere;
}

.bubble a:hover {
  color: var(--link-hover);
  text-decoration-thickness: 2px;
}

/* Outbound bubbles are a saturated blue gradient, so a blue link vanishes into
   it: use the bubble's own foreground colour and lean on the underline. */
.message-row.outbound .bubble a,
.message-row.outbound .bubble a:hover {
  color: var(--outbound-ink);
  text-decoration-color: rgba(255, 255, 255, 0.65);
}

.message-row.outbound .bubble a:hover {
  text-decoration-color: var(--outbound-ink);
}

/* A note is a yellow card in both themes; brand blue on it is muddy. */
.message-row .bubble.note a,
.note-body a {
  color: var(--brand-dark);
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.message-image-link {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  box-shadow: var(--shadow-sm);
  /* Now a <button> (it enlarges in place rather than navigating), so strip the
     control chrome a button brings and keep the thumbnail looking identical. */
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: zoom-in;
  /* Grow to fill the line, but be willing to share it. A single photo beside a
     caption expands to the width the caption already gave the bubble -- the old
     fixed 320px cap left dead space to its right -- while two photos sit side by
     side and wrap only when they genuinely cannot fit. */
  flex: 1 1 240px;
  min-width: 0;
}

/* Photo on its own: nothing else defines the bubble's width, so the image does. */
.bubble.attachment-only .message-image-link {
  flex: 0 1 auto;
  width: min(320px, 100%);
}

.message-image {
  display: block;
  width: 100%;
  height: auto;
  /* `cover` cropped every photo to a 320px square -- a portrait shot of a tooth
     lost its top and bottom, which is exactly the part someone is being shown.
     `contain` keeps the whole frame; the cap stops a tall screenshot from
     swallowing the thread. */
  max-height: 460px;
  object-fit: contain;
}

.message-attachment {
  display: inline-flex;
  max-width: 220px;
  min-height: 28px;
  align-items: center;
  padding: 4px 10px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outbound .bubble {
  background: linear-gradient(135deg, var(--outbound-from), var(--outbound-to));
  color: var(--outbound-ink);
}

.message-row.orthocalc .bubble,
.message-row.ascend .bubble {
  border: 1px solid color-mix(in srgb, var(--muted) 20%, transparent);
  background: color-mix(in srgb, var(--panel) 78%, var(--muted) 10%);
  color: color-mix(in srgb, var(--ink) 78%, var(--muted));
  box-shadow: none;
}

.message-row.orthocalc .message-card,
.message-row.ascend .message-card {
  opacity: 0.84;
}

/* Automation, not a person. Kept legible but visibly quieter than a real
   exchange, so a patient's question is never lost in a run of scheduled
   marketing texts. */
.message-row.campaign .bubble {
  opacity: 0.72;
  font-style: italic;
}

.message-source {
  font-weight: 700;
  color: color-mix(in srgb, var(--muted) 82%, var(--ink));
}

/* Auto-translated English gloss under a foreign-language bubble. Sits inside the
   bubble, separated by a hairline rule, and reads quieter than the original
   text so the patient's own words stay primary. */
.message-translation {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
}

.message-translation-label {
  display: block;
  margin-bottom: 2px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.6;
}

.message-translation-text {
  display: block;
  font-size: 0.86rem;
  line-height: 1.4;
  opacity: 0.85;
}

/* Outbound bubbles are a dark gradient with white ink, so the hairline needs to
   be a translucent light, not a translucent dark. */
.outbound .bubble .message-translation {
  border-top-color: color-mix(in srgb, var(--outbound-ink) 35%, transparent);
}

.outbound .message-attachment {
  background: rgba(255, 255, 255, 0.16);
  color: var(--outbound-ink);
}

.reaction .bubble {
  background: var(--reaction);
  box-shadow: var(--shadow-sm);
}

.call .bubble {
  background: var(--call);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.bubble.call-bubble {
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 150ms ease, box-shadow 150ms ease;
}

.bubble.call-bubble:hover,
.bubble.call-bubble:focus-visible {
  background: var(--brand-soft);
  outline: none;
}

.call-bubble-content {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.call-icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--panel);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}

.call-icon.phone-missed {
  color: #e0473e;
  background: rgba(224, 71, 62, 0.12);
}

.call-icon.voicemail {
  color: var(--accent-ink);
  background: rgba(196, 95, 220, 0.12);
}

.call-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.call-label {
  font-size: 0.9rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}

/* Voicemail transcript shown inline in the call bubble. Wraps to full text so
   staff can read the message without opening Call Insights. */
.call-vm-transcript {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Gemma summary of a call/voicemail — the "what this call needed" line staff
   scan for. Same divider as the raw transcript, but upright (it is our prose,
   not a quote of the caller). */
.call-summary {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.call-play-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--panel);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
  transition: background-color 150ms ease, color 150ms ease, transform 120ms ease;
}

.call-play-icon svg {
  width: 13px;
  height: 13px;
  margin-left: 1px; /* optically center the triangle */
  fill: currentColor;
  stroke: none;
}

.bubble.call-bubble:hover .call-play-icon,
.bubble.call-bubble:focus-visible .call-play-icon {
  background: var(--brand);
  color: #fff;
  transform: scale(1.06);
}

.message-meta {
  display: flex;
  gap: 7px;
  /* Let the children shrink inside the card instead of forcing it wider; the
     seen-by tag is the one that gives way. */
  min-width: 0;
  margin: 5px 4px 0;
  font-size: 0.75rem;
}

.message-row.merge-next .message-meta {
  display: none;
}

.outbound .message-meta {
  justify-content: flex-end;
}

/* Delivery status as a compact icon (text status was noisy). */
.delivery-status {
  display: inline-flex;
  align-items: center;
}
.delivery-status svg {
  display: block;
}
.delivery-status--delivered {
  color: var(--muted);
}
.delivery-status--pending {
  color: var(--muted-light);
}
.delivery-status--failed {
  color: #e0473e;
}

/* "Resend" next to a failed outbound bubble. Deliberately quiet -- it sits in
   the meta line, not in the bubble, so a thread full of delivered messages
   looks unchanged. */
.message-resend {
  border: none;
  background: transparent;
  color: #e0473e;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 0 2px;
  text-decoration: underline;
}
.message-resend:hover:not(:disabled) {
  opacity: 0.8;
}
.message-resend:disabled {
  color: var(--muted);
  cursor: default;
  text-decoration: none;
}

.empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 100%;
  color: var(--muted);
  text-align: center;
}

.empty-state svg {
  width: 56px;
  height: 56px;
  color: var(--muted-light);
}

.empty-state strong {
  color: var(--ink);
  font-size: 1.05rem;
}

.new-message-start {
  display: block;
  min-height: 100%;
  padding: 18px;
  color: var(--ink);
  text-align: left;
}

.new-message-shell {
  display: grid;
  gap: 14px;
  width: min(680px, 100%);
  margin: 0 auto;
}

.new-message-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.new-message-head strong {
  display: block;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.25;
}

.new-message-status {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
}

.new-message-search {
  position: relative;
}

.new-message-search .search-icon {
  top: 50%;
  transform: translateY(-50%);
}

.new-message-search input {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.new-message-results {
  display: grid;
  gap: 8px;
}

.new-message-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.new-message-result:hover {
  border-color: var(--line-strong);
  background: var(--panel-subtle);
}

.new-message-result:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.new-message-result__avatar {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-pill);
  background: var(--line-subtle);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 900;
}

.new-message-result__copy {
  min-width: 0;
}

.new-message-result__copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
}

.new-message-result__copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  /* Wrap (don't clip) — the detail line carries status + chart number + account origin,
     which staff need to read in full to tell shared-phone accounts apart. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.new-message-result__action {
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 900;
}

.new-message-empty,
.new-message-error {
  padding: 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  color: var(--muted);
  font-size: 0.86rem;
}

.new-message-error {
  border-color: rgba(220, 38, 38, 0.24);
  color: #dc2626;
}

.new-message-manual {
  justify-self: start;
}

@media (max-width: 640px) {
  .new-message-start {
    padding: 14px;
  }

  .new-message-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .new-message-result {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .new-message-result__action {
    display: none;
  }
}

.hidden {
  display: none;
}

[hidden] {
  display: none !important;
}

.dialog {
  width: min(420px, calc(100vw - 32px));
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}

.dialog::backdrop {
  background: rgba(10, 12, 20, 0.4);
  backdrop-filter: blur(2px);
}

.dialog-panel {
  display: grid;
  gap: 14px;
  padding: 20px;
}

.dialog-header,
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialog-header {
  padding-bottom: 4px;
}

.dialog-header h2 {
  font-size: 1.125rem;
  font-weight: 800;
}

.field-label {
  display: grid;
  gap: 6px;
  color: var(--ink-soft);
  font-size: 0.8125rem;
  font-weight: 700;
}

.dialog-actions {
  justify-content: flex-end;
  padding-top: 2px;
}

.dialog-actions .send-button {
  width: auto;
  height: 38px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 700;
}

/* --- Call Insights side panel --- */
.call-insights-panel {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: panel-in 200ms ease both;
}

/* Call copilot panel — same slide-in treatment as Call Insights. The body is an
   on-prem-origin iframe, so it owns its own (clean) styling. */
.app-shell.copilot-open {
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr) minmax(340px, 460px);
}
.copilot-panel {
  display: flex;
  min-height: 0;
  min-width: 0;
  flex-direction: column;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: panel-in 200ms ease both;
}
/* Native copilot body (port of connector/live.html, app-themed). */
.copilot-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  overflow: hidden;
  background: var(--panel);
}
.copilot-context {
  min-height: 0;
  max-height: min(34dvh, 300px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.cop-patient { display: flex; flex-direction: column; gap: 8px; }
.cop-patient[hidden] { display: none; }
.cop-who { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.cop-verdicts { display: flex; flex-direction: column; gap: 6px; }
.cop-verdict {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--brand-soft); color: var(--brand-ink);
  border-radius: 8px; padding: 7px 11px; font-size: 0.85rem;
}
.cop-verdict.muted { opacity: 0.6; }
.cop-verdict b { font-weight: 700; }
.cop-verdict .muted { opacity: 0.7; }
.cop-snap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cop-snap > div { background: var(--surface, var(--bg)); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.cop-snap .k { font-size: 0.7rem; color: var(--muted-light); }
.cop-snap .v { font-size: 0.85rem; font-weight: 600; color: var(--ink); word-break: break-word; }
.cop-note {
  background: var(--surface, var(--bg)); border-radius: 8px;
  padding: 8px 10px; font-size: 0.8rem; color: var(--ink-soft);
}
.cop-note[hidden] { display: none; }
.cop-details { min-width: 0; }
.cop-details summary { cursor: pointer; color: var(--brand-ink); font-size: .75rem; font-weight: 700; }
.cop-details[open] summary { margin-bottom: 8px; }
/* Transcript + suggestions are the panel's primary moving surface. The DOM is
   newest-first too, so keyboard and assistive-technology order match the view. */
.cop-stream-region {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding-top: 2px;
}
.cop-stream-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cop-stream-heading h4 { margin: 0; color: var(--ink); font-size: 0.8rem; }
.cop-stream-heading__tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.cop-stream-heading__tools > span { color: var(--muted-light); font-size: 0.68rem; white-space: nowrap; }
.cop-suggestions-toggle {
  min-height: 30px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink-soft); font: inherit; font-size: 0.68rem;
  font-weight: 700; white-space: nowrap; cursor: pointer;
}
.cop-suggestions-toggle:hover { background: var(--panel-subtle); color: var(--ink); }
.cop-suggestions-toggle[aria-pressed="false"] { background: var(--surface, var(--bg)); color: var(--muted); }
.cop-suggestions-toggle:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }
.cop-stream {
  min-height: 60px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 12px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
.cop-turn { max-width: 85%; }
.cop-turn .who { font-size: 0.62rem; color: var(--muted-light); margin: 0 0 2px; }
.cop-turn .bub { font-size: 0.85rem; line-height: 1.45; padding: 7px 11px; border-radius: 9px; }
.cop-turn.patient { align-self: flex-start; }
.cop-turn.patient .bub { background: var(--surface, var(--bg)); color: var(--ink); }
.cop-turn.staff { align-self: flex-end; }
.cop-turn.staff .who { text-align: right; }
.cop-turn.staff .bub { background: var(--brand-soft); color: var(--ink); }
.cop-turn.partial .bub { opacity: 0.5; font-style: italic; }
.cop-sgwrap { display: flex; flex-direction: column; gap: 2px; }
.cop-sgwrap.live::after {
  content: "revising as they speak…"; font-size: 0.62rem;
  color: var(--muted-light); font-style: italic; padding-left: 2px;
}
.cop-sgwrap.settled .cop-sg { opacity: 0.82; }
.cop-sg {
  border-left: 3px solid var(--brand); background: var(--surface, var(--bg));
  padding: 8px 11px; margin: 2px 0; border-radius: 0 7px 7px 0;
}
.cop-sgwrap.live .cop-sg { border-left-style: dashed; }
.cop-sg.info { border-left-color: var(--ck-ok); }
.cop-sg .h {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--brand); margin: 0 0 3px;
}
.cop-sg.info .h { color: var(--ck-ok); }
.cop-sg .b { font-size: 0.85rem; margin: 0; line-height: 1.45; color: var(--ink); }
.cop-sg.say .b { font-style: italic; }
.cop-thinking { font-size: 0.75rem; color: var(--muted-light); font-style: italic; }

/* Interpreter belongs to the call workspace, not the compact phone dock. The
   existing copilot transcript remains the one conversation surface. */
.cop-interpreter {
  display: grid;
  gap: 8px;
  min-height: 0;
  padding-block: 10px;
  border-block: 1px solid var(--line-subtle);
}
.cop-interpreter[hidden] { display: none; }
.cop-interpreter__setup { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cop-interpreter__setup label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.cop-interpreter__setup select {
  width: 100%; min-width: 0; min-height: 40px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink);
}
.cop-interpreter__setup p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.cop-interpreter__start {
  grid-column: 1 / -1; min-height: 42px; border: 0; border-radius: 9px;
  background: var(--brand); color: #fff; font-weight: 750; cursor: pointer;
}
.cop-interpreter__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cop-interpreter__bar > div { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.cop-interpreter__bar strong { color: var(--ink); font-size: 0.86rem; }
.cop-interpreter__bar span { color: var(--muted); font-size: 0.7rem; }
.cop-interpreter__bar button { border: 0; background: transparent; color: var(--danger); font-weight: 700; cursor: pointer; }
.cop-interpreter__ptt {
  min-height: 52px; border: 0; border-radius: 11px; background: var(--brand); color: #fff;
  font-weight: 800; cursor: pointer; touch-action: none; user-select: none;
}
.cop-interpreter__ptt.is-recording { background: #b42318; box-shadow: 0 2px 14px rgba(180, 35, 24, .24); }
.cop-interpreter__ptt:disabled, .cop-interpreter__start:disabled { cursor: wait; opacity: .65; }
.cop-interpreter__status { margin: 0; color: var(--muted); font-size: 0.72rem; line-height: 1.4; }
.cop-interpreter button:focus-visible, .cop-interpreter select:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent); outline-offset: 2px; }

.cop-turn-translation {
  display: grid; gap: 2px; margin-top: 5px; padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
/* Shown only when translation_confidence capped the turn at <=39, i.e. the
   recognizers materially disagreed or the model flagged its own output LOW.
   Deliberately a sentence, not a score: it tells staff what to DO. */
.cop-turn-translation__uncertain { display: block; margin-top: 2px; color: var(--warn, #b45309); font-size: 0.62rem; font-weight: 700; }
.cop-turn-translation__label { color: var(--muted); font-size: 0.62rem; font-weight: 750; letter-spacing: .025em; text-transform: uppercase; }
.cop-turn-translation__text { color: var(--ink); font-size: 0.82rem; line-height: 1.42; font-weight: 650; }

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ci-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line-subtle);
}

.ci-header h3 {
  /* The global reset covers h1/h2 but not h3, so the UA's 1em top+bottom margin
     pushed this header ~24px taller than the thread header beside it. */
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.ci-export-button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel); color: var(--ink-soft);
  font-size: 0.76rem; font-weight: 700; cursor: pointer;
}
.ci-export-button:hover { background: var(--panel-subtle); color: var(--ink); }
.ci-export-button:disabled { cursor: wait; opacity: .62; }
.ci-export-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 35%, transparent); outline-offset: 2px; }

@media (max-width: 420px) {
  .cop-interpreter__setup { grid-template-columns: 1fr; }
  .cop-interpreter__setup p, .cop-interpreter__start { grid-column: auto; }
  .ci-export-button span { display: none; }
  .ci-export-button { width: 40px; justify-content: center; padding-inline: 0; }
}

.ci-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  padding: 18px;
  overflow-y: auto;
  background: var(--panel-subtle);
}

.ci-contact {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ci-contact-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ci-phone {
  font-size: 1rem;
  font-weight: 800;
}

.ci-label {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.ci-audio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.ci-play-button {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ci-play-button:hover {
  background: var(--brand-hover);
}

.ci-scrubber-wrap {
  --ci-thumb: 14px;
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  height: var(--ci-thumb, 14px);
}

/* The track is drawn on the WRAPPER, edge to edge, so it lines up with the
   thumb's full travel. A native range keeps the thumb's BOX inside the track,
   so its centre stops half a thumb short at each end -- playback looked like it
   started late and ended early. */
.ci-scrubber-wrap::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(var(--brand), var(--brand)) 0 / var(--ci-fill, 0%) 100% no-repeat,
    color-mix(in srgb, var(--brand) 20%, transparent);
  pointer-events: none;
}

/* The knob is DRAWN here, from the same --ci-fill that paints the bar, so the
   two cannot drift apart. Relying on the native thumb meant the bar ran the
   full width while the thumb stayed inset by half its own size: they lined up
   only at the midpoint, and the bar visibly overshot the knob at the end. */
.ci-scrubber-wrap::after {
  content: "";
  position: absolute;
  left: var(--ci-fill, 0%);
  width: var(--ci-thumb, 14px);
  height: var(--ci-thumb, 14px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--brand);
  pointer-events: none;
}

.ci-scrubber {
  --ci-thumb: 14px;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  /* Overhang by half a thumb on each side and pull back, so value 0 puts the
     thumb's CENTRE on the left edge and max puts it on the right. */
  width: calc(100% + var(--ci-thumb));
  margin-inline: calc(var(--ci-thumb) / -2);
  height: var(--ci-thumb);
  background: transparent;
}

.ci-scrubber::-webkit-slider-runnable-track { height: var(--ci-thumb); background: transparent; }
.ci-scrubber::-moz-range-track { height: var(--ci-thumb); background: transparent; }
.ci-scrubber::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--ci-thumb);
  height: var(--ci-thumb);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ci-scrubber::-moz-range-thumb {
  width: var(--ci-thumb);
  height: var(--ci-thumb);
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.ci-scrubber:focus-visible { outline: none; }
.ci-scrubber:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }
.ci-scrubber:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent); }

.ci-time {
  min-width: 72px;
  color: var(--muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.ci-no-audio {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.ci-section h4 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ci-transcript {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  font-size: 0.875rem;
  line-height: 1.5;
}

.ci-transcript .ci-empty {
  padding: 6px 0;
  color: var(--muted);
  text-align: center;
}

.ci-transcript .ci-empty .ci-sub {
  margin-top: 4px;
  font-size: 0.78rem;
}

.ci-details-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 12px;
  list-style: none;
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}

.ci-details-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.875rem;
}

.ci-detail-label {
  color: var(--muted);
  font-weight: 700;
}

.ci-detail-value {
  font-weight: 700;
  text-align: right;
}

/* Medium widths: three columns (list + thread + insights) crush the thread
   to a sliver. When Call Insights is open here, hide the conversation list
   and give the thread + insights the full width side by side; the list
   returns when the panel is closed. Below 820px the panel goes fullscreen
   instead (next block). */
@media (max-width: 1100px) {
  .app-shell.call-insights-open {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  }

  .app-shell.call-insights-open .sidebar {
    display: none;
  }
}

@media (max-width: 820px) {
  /* Master/detail: show one view at a time. The inbox list fills the screen;
     opening a conversation (.conversation-open, set in app.js) swaps to the
     thread full-screen with a back button. No more stacked top/bottom split. */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 8px;
    gap: 8px;
  }

  .app-shell .thread-panel {
    display: none;
  }

  .app-shell.conversation-open .sidebar {
    display: none;
  }

  .app-shell.conversation-open .thread-panel {
    display: flex;
  }

  .thread-back {
    display: inline-flex;
  }

  /* The avatar is redundant on the full-screen conversation (it's shown in the
     inbox list) and crowds the header — drop it so the name has room. */
  .thread-header .avatar {
    display: none;
  }

  .sidebar,
  .thread-panel {
    border-radius: var(--radius-md);
  }

  .thread-header {
    min-height: 76px;
    padding: 12px 14px;
  }

  .thread-scroller {
    padding: 14px;
  }

  .message-card {
    max-width: 88%;
  }

  .composer {
    padding: 10px;
  }

  .app-shell.call-insights-open {
    grid-template-columns: 1fr;
  }

  .call-insights-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    border-radius: 0;
  }
}

@keyframes telephony-pop-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Telephony: call dock (see telephony-service/frontend-integration) ---
   One row per in-progress call (ringing/dialing/active/held), so multiple
   receptionists can each pick up a different call, and a single
   receptionist can hold one call to switch to another. */
.telephony-call-dock {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: var(--z-dock);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 280px;
  transition: right 200ms ease;
}

/* When a right-hand panel is open it occupies the right column; slide the
   floating call dock LEFT of it so the call controls don't cover the panel's
   content (e.g. the copilot's verdict/snapshot). The dock is appended to
   <body> after the app shell, so it's a following sibling of it. */
.app-shell.copilot-open ~ .telephony-call-dock {
  right: calc(460px + 28px);
}
.app-shell.call-insights-open ~ .telephony-call-dock {
  right: calc(440px + 28px);
}

.telephony-call-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--panel, #fff);
  color: var(--ink, var(--text, #1a1a1a));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--line, var(--border, rgba(0, 0, 0, 0.08)));
  animation: telephony-pop-in 0.2s ease-out;
  transition: border-color 220ms ease, background-color 220ms ease, opacity 220ms ease,
    box-shadow 220ms ease;
}

.telephony-call-row--ringing {
  border-color: #16a34a;
  animation: telephony-pop-in 0.2s ease-out, telephony-ring-pulse 1.7s ease-in-out 0.2s infinite;
}

.telephony-call-row--updating {
  animation: none;
}

.telephony-call-row--updating.telephony-call-row--ringing {
  animation: telephony-ring-pulse 1.7s ease-in-out infinite;
}

.telephony-call-row--ringing .telephony-call-row__status {
  color: #16a34a;
}

@keyframes telephony-ring-pulse {
  0%,
  100% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 0 rgba(22, 163, 74, 0);
  }
  50% {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 0 0 4px rgba(22, 163, 74, 0.2);
  }
}

/* On hold: a calm "paused" treatment (amber accent + faint tint) rather than
   a dimmed/disabled look, so it's clearly an intentional state. */
.telephony-call-row--held {
  border-color: #f59e0b;
  background: linear-gradient(0deg, rgba(245, 158, 11, 0.08), rgba(245, 158, 11, 0.08)),
    var(--panel, #fff);
}

.telephony-call-row--held .telephony-call-row__status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f59e0b;
}

.telephony-call-row__held-time {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* Gentle blink next to "On hold" signals the hold music is live. */
.telephony-call-row--held .telephony-call-row__status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: telephony-hold-blink 1.3s ease-in-out infinite;
}

@keyframes telephony-hold-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.telephony-call-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.telephony-call-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.telephony-call-row__phone {
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.telephony-call-row__status {
  font-size: 12px;
  color: var(--brand, var(--accent, #2563eb));
  font-weight: 600;
}

.telephony-call-row__number {
  font-size: 12px;
  opacity: 0.7;
}

.telephony-call-row__timer {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--ink-soft, #6b7280);
  white-space: nowrap;
}

/* Patient snapshot strip inside an inbound call-pop: who's calling + their
   next appt / balance / recare, fetched from the on-prem connector. */
.telephony-call-row__snapshot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line, var(--border, rgba(0, 0, 0, 0.08)));
}

.telephony-call-row__snapshot.is-pending {
  font-size: 12px;
  color: var(--ink-soft, #6b7280);
  font-style: italic;
}

.telephony-chip {
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--chip-bg, rgba(37, 99, 235, 0.1));
  color: var(--brand, var(--accent, #2563eb));
}

.telephony-chip--appt {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}

.telephony-chip--balance {
  background: rgba(245, 158, 11, 0.16);
  color: #b45309;
}

.telephony-chip--recare {
  background: rgba(139, 92, 246, 0.14);
  color: #7c3aed;
}

/* New-patient lead strip on an inbound ring: this caller submitted the online
   form, we texted them a scheduling link, and nobody has booked them. Sits
   above the patient snapshot because it is the more actionable of the two. */
.telephony-call-row__lead {
  align-items: center;
}

.telephony-chip--lead {
  background: rgba(37, 99, 235, 0.16);
  color: #1d4ed8;
}

.telephony-chip--warn {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}

/* Its own line, always. `margin-left: auto` resolves per FLEX LINE, so in a
   wrapping strip the link was pulled to the right of line 1 while chips carried
   on to line 2 -- reading as though it came before content it follows. The call
   dock is only ~400px wide, so the strip wraps far more often than not. */
.telephony-call-row__lead-link {
  flex-basis: 100%;
  text-align: right;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  color: var(--brand, var(--accent, #2563eb));
  text-decoration: none;
}

.telephony-call-row__lead-link:hover,
.telephony-call-row__lead-link:focus-visible {
  text-decoration: underline;
}

.telephony-call-row__actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.telephony-call-row__actions button {
  width: 100%;
  border: 1px solid var(--line-strong, rgba(0, 0, 0, 0.14));
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--panel-subtle, rgba(0, 0, 0, 0.06));
  color: var(--ink, #1a1a1a);
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease,
    transform 80ms ease, filter 140ms ease;
}

/* A lone action (e.g. "Cancel" while dialing) spans the full width. */
.telephony-call-row__actions button:only-child {
  grid-column: 1 / -1;
}

.telephony-call-row__actions button:hover {
  border-color: transparent;
  background: var(--line-subtle, rgba(0, 0, 0, 0.05));
  color: var(--ink, #1a1a1a);
}

.telephony-call-row__actions button:active {
  transform: scale(0.95);
}

.call-interpreter {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--brand, #2563eb) 24%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--brand, #2563eb) 5%, var(--panel));
}

.call-interpreter__setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.call-interpreter__setup label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.call-interpreter__setup select {
  width: 100%;
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}

.call-interpreter__start {
  grid-column: 1 / -1;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: var(--brand, #2563eb);
  color: #fff;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}

.call-interpreter__privacy,
.call-interpreter__status,
.call-interpreter__empty {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.call-interpreter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}

.call-interpreter__head button {
  border: 0;
  background: transparent;
  color: #b42318;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.call-interpreter__turns {
  display: grid;
  gap: 7px;
  max-height: 190px;
  overflow-y: auto;
}

.call-interpreter__turn {
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, #8b5cf6 30%, var(--line));
}

.call-interpreter__turn--staff { border-color: color-mix(in srgb, var(--brand, #2563eb) 30%, var(--line)); }
.call-interpreter__turn span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .04em; }
.call-interpreter__turn strong { color: var(--ink); font-size: 13px; line-height: 1.35; }
.call-interpreter__turn small { color: var(--muted); font-size: 11px; line-height: 1.35; }

.call-interpreter__ptt {
  min-height: 52px;
  border: 1px solid color-mix(in srgb, var(--brand, #2563eb) 60%, var(--line));
  border-radius: 12px;
  background: var(--brand, #2563eb);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  touch-action: none;
  user-select: none;
}

.call-interpreter__ptt.is-recording {
  background: #b42318;
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .16);
}

.call-interpreter__ptt:disabled { cursor: wait; opacity: .68; }

.call-interpreter button:focus-visible,
.call-interpreter select:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand, #2563eb) 38%, transparent);
  outline-offset: 2px;
}

@media (max-width: 560px) {
  .call-interpreter__setup { grid-template-columns: 1fr; }
  .call-interpreter__start { grid-column: auto; }
  .call-interpreter__ptt { min-height: 58px; }
}

.telephony-call-row__actions button[data-action="answer"] {
  border-color: transparent;
  background: #16a34a;
  color: #fff;
}

.telephony-call-row__actions button[data-action="reject"],
.telephony-call-row__actions button[data-action="hangup"] {
  border-color: transparent;
  background: #dc2626;
  color: #fff;
}

.telephony-call-row__actions button[data-action="answer"]:hover,
.telephony-call-row__actions button[data-action="reject"]:hover,
.telephony-call-row__actions button[data-action="hangup"]:hover {
  filter: brightness(1.08);
  color: #fff;
}

/* --- Telephony: error toast --- */
.telephony-error-toast {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: var(--z-toast);
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 12px;
  background: #dc2626;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  animation: telephony-pop-in 0.2s ease-out;
}

/* --- App toasts (showToast in app.js) ---
   Stacks bottom-right so it never collides with the bottom-left
   .telephony-error-toast used for call errors. */
.toast-stack {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 11px 14px;
  border-radius: var(--radius-md);
  background: var(--panel-raised);
  color: var(--ink);
  font-size: 0.82rem;
  line-height: 1.35;
  box-shadow: var(--shadow-lg);
  border-left: 3px solid var(--muted-light);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.toast--in {
  opacity: 1;
  transform: translateY(0);
}

.toast--leaving {
  opacity: 0;
  transform: translateY(8px);
}

.toast--error {
  border-left-color: #dc2626;
}

.toast--success {
  border-left-color: #16a34a;
}

.toast--warn {
  border-left-color: #d97706;
}

.toast__text {
  flex: 1;
  min-width: 0;
}

.toast__close {
  flex: none;
  margin: -2px -2px 0 0;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.toast__close:hover {
  color: var(--ink);
}

/* Inbox load-failure row with inline Retry. */
.inbox-error-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.inbox-retry-button {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.inbox-retry-button:hover {
  background: var(--panel-subtle);
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: none;
  }
}

/* --- Login page --- */
.login-shell {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  background: var(--bg);
}

.login-card {
  display: grid;
  gap: 16px;
  width: min(380px, 100%);
  padding: 28px;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}

.login-head h1 {
  margin-top: 2px;
  font-size: 1.5rem;
}

.login-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.4;
}

.login-card .field-label input {
  margin-top: 2px;
}

.login-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 700;
}

.login-checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 42px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
}

.login-error {
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
  font-size: 0.85rem;
}

.login-error.is-info {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent-ink);
}

.login-link-button {
  justify-self: center;
  border: 0;
  background: transparent;
  color: var(--accent-ink);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.password-reset-panel {
  display: grid;
  gap: 12px;
  padding-top: 2px;
  border-top: 1px solid var(--line-subtle);
}

.login-reset-actions {
  display: flex;
  justify-content: flex-end;
}

/* --- Admin modal (manage users / audit log) --- */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 12, 20, 0.45);
  backdrop-filter: blur(2px);
  animation: telephony-pop-in 0.15s ease-out;
}

.admin-modal {
  display: flex;
  flex-direction: column;
  width: min(820px, 100%);
  max-height: 86vh;
  border-radius: var(--radius-lg);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.admin-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-subtle);
}

.admin-modal__head h2 {
  font-size: 1.1rem;
  font-weight: 800;
}

.admin-modal__body {
  padding: 18px 20px;
  overflow-y: auto;
}

/* Lead capture drawer: desktop uses a right-side transcript-style panel; mobile
   uses a full-screen drawer so the form never crushes the thread/composer. */
.lead-form-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(480px, 46vw);
  min-width: 360px;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line-subtle);
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  box-shadow: var(--shadow-lg);
  z-index: 45;
  overflow: hidden;
  animation: panel-in 180ms ease both;
}
.lead-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-subtle);
}
.lead-form-kicker {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lead-form-title { margin: 0; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.lead-form-head-actions { display: flex; align-items: center; gap: 4px; }
.lead-form-min-name { display: none; }

/* Minimized: collapse the drawer to a compact pill at the bottom-right so the call
   transcript/copilot behind it is fully usable. The form DOM stays mounted (state
   is preserved live) — clicking the pill restores it. */
.lead-form-panel.is-minimized {
  top: auto; left: auto; right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  width: auto; min-width: 0; max-width: min(320px, calc(100vw - 32px));
  height: auto; border: 1px solid var(--line-subtle); border-radius: 14px;
  cursor: pointer; overflow: hidden;
}
.lead-form-panel.is-minimized .lead-form-body,
.lead-form-panel.is-minimized .lead-form-actions,
.lead-form-panel.is-minimized [data-lead-min] { display: none; }
.lead-form-panel.is-minimized .lead-form-head {
  min-height: 0; padding: 10px 12px 10px 16px; border-bottom: 0;
}
.lead-form-panel.is-minimized .lead-form-min-name {
  display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-top: 2px;
}
.lead-form-close {
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--muted-light);
}
.lead-form-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
  background: var(--panel-subtle);
}
.lead-form-status {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
  box-shadow: var(--shadow-sm);
}
.lead-form-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
}
.lead-form-section h4 {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lead-form-fields {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.lead-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lead-wide { grid-column: 1 / -1; }
.lead-form-field { display: flex; flex-direction: column; gap: 3px; }
.lead-form-field span { font-size: 0.72rem; font-weight: 600; color: var(--muted); }
.lead-form-field input,
.lead-form-field select {
  width: 100%;
  padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font-size: 0.85rem;
}
.lead-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lead-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--ink);
  font-size: 0.82rem;
}
.lead-check input { flex: none; }
.lead-duplicates-list { display: flex; flex-direction: column; gap: 8px; }
.lead-duplicate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px;
  border: 1px solid var(--line-subtle);
  border-radius: 7px;
  background: var(--panel-subtle);
}
.lead-duplicate-row div { min-width: 0; }
.lead-duplicate-row b,
.lead-duplicate-row span { display: block; overflow-wrap: anywhere; }
.lead-duplicate-row span { color: var(--muted); font-size: 0.75rem; }
.lead-form-actions {
  flex: none;
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-subtle);
  background: var(--panel);
}
.cop-create-lead {
  background: var(--brand-soft); color: var(--brand-ink);
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font-size: 0.72rem; font-weight: 600; padding: 3px 10px; cursor: pointer;
  white-space: nowrap;
}
.cop-create-lead:hover { filter: brightness(0.97); }

/* "Intake lead draft" resume card in the thread — styled like the call/voicemail
   bubble so it reads as a native timeline item. */
.lead-draft-bubble {
  cursor: pointer;
  border: 1px dashed var(--brand);
  background: var(--brand-soft);
  color: var(--ink);
  min-width: 220px;
}
.lead-draft-bubble:hover { filter: brightness(0.98); }
.lead-draft-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.lead-draft-title { font-weight: 600; color: var(--brand); }
.lead-draft-count { font-size: 0.72rem; color: var(--muted); }
.lead-draft-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }

/* A message that has NOT been sent, drawn where it will land.
   It keeps the outbound column and the outbound reading order, because that is
   where the patient will see it - but the edge is dashed and the fill is hollow,
   so nothing about it can be mistaken for something the practice already said.
   The dash IS the meaning here: solid would be a lie. */
.scheduled-ghost-row .message-card { max-width: min(78%, 560px); }

.message-row.outbound .bubble.scheduled-ghost-bubble {
  background: transparent;
  border: 1px dashed var(--brand);
  box-shadow: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 240px;
}

.scheduled-ghost-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.scheduled-ghost-bubble .scheduled-ghost-badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--brand);
}

/* One still waiting on a person reads differently from one already ticked off:
   the whole point of the bubble is answering "is anyone going to look at this?" */
.scheduled-ghost-bubble .scheduled-ghost-badge[data-status="needs_approval"] { color: #b45309; }
/* The amber that reads as "someone still has to look at this" on paper-white is
   nearly unreadable on the dark panel, so it lifts rather than inverts. */
[data-theme="dark"] .scheduled-ghost-bubble .scheduled-ghost-badge[data-status="needs_approval"] { color: #fbbf24; }

.scheduled-ghost-bubble .scheduled-ghost-when { font-size: 0.72rem; color: var(--muted); }

.scheduled-ghost-bubble .scheduled-ghost-body {
  margin: 0;
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}

.scheduled-ghost-actions { margin-top: 2px; }

.scheduled-ghost-bubble .scheduled-editor-field { width: 100%; }

@media (max-width: 820px) {
  .lead-form-panel {
    inset: 0;
    width: auto;
    min-width: 0;
    max-width: none;
    z-index: 60;
  }
  .lead-form-head {
    min-height: 62px;
    padding: 10px 12px;
  }
  .lead-form-body {
    padding: 12px;
    gap: 12px;
  }
  .lead-form-grid-2,
  .lead-check-grid {
    grid-template-columns: 1fr;
  }
  .lead-form-actions {
    position: sticky;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  }
  .lead-form-actions .lab-btn {
    min-height: 40px;
  }
}

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-section h3 {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.settings-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-tile {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
}

.settings-tile:hover {
  background: var(--line-subtle);
  border-color: var(--line-strong);
}

.settings-tile:active {
  transform: scale(0.99);
}

.settings-tile__icon {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--brand);
}

.settings-tile__icon svg {
  width: 18px;
  height: 18px;
}

.settings-tile__copy {
  min-width: 0;
}

.settings-tile__copy strong,
.settings-tile__copy small {
  display: block;
  overflow-wrap: anywhere;
}

.settings-tile__copy strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.settings-tile__copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.25;
}

@media (max-width: 640px) {
  .settings-list {
    grid-template-columns: 1fr;
  }
}

.admin-hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.82rem;
}

.admin-error {
  margin: 8px 0 0;
  color: #dc2626;
  font-size: 0.82rem;
}

.admin-success {
  margin: 8px 0 0;
  color: #16a34a;
  font-size: 0.82rem;
}

/* In-app replacements for native prompt()/confirm() dialogs. */
.admin-prompt {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-prompt__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.admin-prompt__input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
}

.admin-prompt__input:focus {
  outline: none;
  border-color: var(--accent, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

.admin-confirm__message {
  margin: 0 0 16px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-prompt__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
}

.admin-prompt__cancel {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.admin-prompt__cancel:hover {
  background: var(--panel-subtle);
}

.admin-danger-button {
  background: #dc2626;
  border-color: #dc2626;
}

.admin-danger-button:hover {
  background: #b91c1c;
  border-color: #b91c1c;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line-subtle);
  vertical-align: middle;
}

.admin-table th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Audit review uses a readable activity list instead of forcing six technical
   columns into a table. The dialog can still use the extra desktop width; the
   standard mobile bottom-sheet rule wins on phones. */
.admin-modal--wide { width: min(960px, 100%); }

.audit-review-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.audit-review-count {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
}
.audit-review-head .admin-hint { margin: 0; max-width: 620px; }
/* The toggle lives in a <label>; reset the checkbox out of the global
   `input { width:100%; min-height:38px; border-radius:pill }` sizing that was
   rendering it as a full-width pill, and sit it inline with its text. */
.audit-review-head label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  white-space: nowrap;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.audit-review-head input[type="checkbox"] {
  width: auto;
  min-height: 0;
  height: auto;
  margin: 0;
  flex: none;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--brand);
  cursor: pointer;
}

.admin-audit-list {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.admin-audit-entry {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(340px, 1.35fr) auto;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-subtle);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.admin-audit-entry:last-child { border-bottom: 0; }

.audit-entry-action,
.audit-entry-meta,
.audit-entry-user,
.audit-entry-time { min-width: 0; }
.audit-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 14px;
}
.audit-entry-user { flex: 1 1 140px; }
.audit-entry-time { flex: 1 1 185px; }
.audit-entry-user { overflow-wrap: anywhere; }
.audit-action-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 7px;
  font-size: 0.9rem;
  font-weight: 760;
}
.audit-resource-summary,
.audit-time-start {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.69rem;
  line-height: 1.25;
}
.audit-entry-time time { display: block; white-space: nowrap; }
.audit-field-label { display: none; }
.audit-kind {
  display: inline-block;
  margin-bottom: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.audit-event-count,
.audit-outcome {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}
.audit-outcome.is-bad {
  background: rgba(180, 35, 24, 0.12);
  color: #b42318;
}
.audit-details-toggle {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  min-width: 88px;
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: right;
  cursor: pointer;
}
.audit-details-toggle:hover,
.audit-details-toggle:focus-visible { color: var(--ink); text-decoration: underline; }
.audit-entry-details {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  padding-top: 7px;
  border-top: 1px solid var(--line-subtle);
}
.audit-entry-details[hidden] { display: none; }
.audit-entry-details dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 9px 0 2px;
}
.audit-entry-details dl > div { min-width: 0; }
.audit-entry-details dt {
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.audit-entry-details dd { margin: 0; }
.audit-entry-details code {
  display: inline-block;
  margin: 0 3px 3px 0;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}
.audit-detail-wrap { overflow-wrap: anywhere; }

[data-theme="dark"] .audit-outcome.is-bad {
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
}

/* Phone: stack the controls and entries. Technical identifiers stay tucked
   behind Details instead of requiring horizontal scrolling. */
@media (max-width: 640px) {
  .audit-review-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .admin-audit-entry {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    padding: 8px 10px;
  }
  .audit-entry-action { grid-column: 1; grid-row: 1; }
  .audit-entry-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 2px 10px;
    color: var(--muted);
    font-size: 0.72rem;
  }
  .audit-details-toggle { grid-column: 2; grid-row: 1; align-self: start; }
  .audit-entry-details { grid-column: 1 / -1; grid-row: 3; }
  .audit-entry-time time { white-space: normal; }
  .audit-entry-details dl { grid-template-columns: 1fr; }
}

.admin-tag {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--brand-soft);
  color: var(--brand-dark);
  font-size: 0.68rem;
  font-weight: 700;
}
.admin-tag-warn { background: rgba(180, 35, 24, 0.14); color: #b42318; }
.admin-roster-link, .admin-roster-merge { max-width: 220px; }

.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --- Call analytics (admin copilot observability) --- */
.ca-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ca-call {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  overflow: hidden;
}

.ca-call > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
}

.ca-call > summary::-webkit-details-marker {
  display: none;
}

.ca-call__id {
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--ink);
}

.ca-call__sub {
  font-size: 0.72rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ca-call__time {
  margin-left: auto;
  font-size: 0.7rem;
  color: var(--muted-light);
  font-variant-numeric: tabular-nums;
}

.ca-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 12px 12px;
}

.ca-event {
  border-left: 2px solid var(--line-strong);
  padding-left: 10px;
}

.ca-event.ca-predict {
  border-left-color: var(--brand);
}

.ca-event__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.ca-tag {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--brand-dark);
  background: var(--brand-soft);
  padding: 1px 6px;
  border-radius: var(--radius-pill);
}

.ca-tag--turn {
  color: var(--muted);
  background: var(--line-subtle);
}

.ca-meta {
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.ca-verdicts {
  margin: 0;
  padding-left: 16px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.ca-conf {
  font-variant-numeric: tabular-nums;
  color: var(--brand-dark);
  font-weight: 700;
}

.ca-src {
  font-size: 0.66rem;
  color: var(--muted-light);
  text-transform: uppercase;
}

.ca-patient {
  margin: 2px 0 6px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--ink-soft);
}

.ca-sugg {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line-subtle);
  margin-bottom: 4px;
}

.ca-sugg--info {
  background: var(--brand-soft);
}

.ca-sugg__head {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.ca-sugg__body {
  font-size: 0.82rem;
  color: var(--ink);
}

.ca-empty {
  font-size: 0.74rem;
  color: var(--muted-light);
  margin: 0;
}

.admin-row-actions button {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.admin-row-actions button:hover {
  background: var(--line-subtle);
}

.admin-add-user {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-subtle);
}

.admin-add-user h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 800;
}

.admin-add-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
}

.admin-add-grid input[type="text"],
.admin-add-grid input[type="email"],
.admin-add-grid input[type="password"],
.admin-add-grid input:not([type]) {
  border: 1px solid var(--line-strong);
}

.admin-check {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-soft);
  font-size: 0.85rem;
  font-weight: 600;
}

.admin-check input {
  width: auto;
  min-height: 0;
}

.admin-submit {
  width: auto;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-weight: 700;
}

/* Tag picker chips (Manage users add/edit forms) — shared vocabularies,
   checkboxes instead of free-typed comma lists. */
.admin-role-group {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
}

.admin-role-group legend {
  padding: 0 6px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-role-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.admin-role-chip {
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  cursor: pointer;
}

.admin-role-chip:has(input:checked) {
  border-color: var(--line-strong);
  background: var(--panel-subtle);
  color: var(--ink);
}

.admin-hint-warn {
  color: #b45309;
}

.admin-edit-user .admin-prompt__actions {
  margin-top: 14px;
}

.mfa-secret {
  display: block;
  width: 100%;
  margin: 10px 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  color: var(--ink);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

@media (max-width: 560px) {
  .admin-add-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Telephony: directed-transfer extension picker --- */
.telephony-transfer-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 6px;
  border-radius: 12px;
  background: var(--panel-subtle, rgba(0, 0, 0, 0.06));
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  font-size: 12px;
  color: var(--muted, #6b7280);
  animation: telephony-pop-in 0.15s ease-out;
}

.telephony-transfer-item {
  display: flex;
  gap: 4px;
  align-items: stretch;
}

.telephony-transfer-target {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: var(--ink, #1a1a1a);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.telephony-transfer-target:hover:not(:disabled) {
  background: var(--brand-soft, rgba(79, 109, 255, 0.12));
  color: var(--brand-dark, var(--brand, #4f6dff));
}

.telephony-transfer-target:disabled,
.telephony-transfer-warm:disabled {
  cursor: not-allowed;
  opacity: 0.56;
}

.telephony-transfer-presence {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #9ca3af;
  box-shadow: 0 0 0 2px rgba(156, 163, 175, 0.16);
  flex: 0 0 auto;
}

.telephony-transfer-item.is-ready .telephony-transfer-presence {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.18);
}

.telephony-transfer-item.is-busy .telephony-transfer-presence {
  background: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.telephony-transfer-item.is-held .telephony-transfer-presence {
  background: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

.telephony-transfer-status {
  margin-left: auto;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
}

.telephony-transfer-item.is-held .telephony-transfer-status {
  color: #1d4ed8;
}

.telephony-transfer-warm {
  flex: 0 0 auto;
  border: none;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted, #6b7280);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.telephony-transfer-warm:hover:not(:disabled) {
  background: var(--line-subtle, rgba(0, 0, 0, 0.05));
  color: var(--ink, #1a1a1a);
}

/* A call mid warm-transfer gets an amber accent (like hold). */
.telephony-call-row:has(.telephony-call-row__actions [data-action="wt-complete"]) {
  border-color: #f59e0b;
}

.telephony-call-row__actions button[data-action="wt-complete"] {
  border-color: transparent;
  background: #16a34a;
  color: #fff;
}

/* --- Call Insights: labeled real-time transcript --- */
.ci-transcript-line {
  display: grid;
  grid-template-columns: minmax(72px, auto) 1fr;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

.ci-transcript-line + .ci-transcript-line {
  border-top: 1px solid var(--line-subtle);
}

.ci-transcript-who {
  font-weight: 800;
  font-size: 0.78rem;
  white-space: nowrap;
}

.ci-transcript-line--patient .ci-transcript-who {
  color: var(--accent-ink);
}

.ci-transcript-line--staff .ci-transcript-who {
  color: var(--brand);
}

.ci-transcript-text {
  color: var(--ink);
}

/* Karaoke transcript sync: dim every line, then light up the one being spoken
   as the recording plays. Lines are click-to-seek. */
.ci-transcript--karaoke .ci-transcript-line {
  opacity: 0.45;
  border-radius: 8px;
  padding: 5px 8px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.ci-transcript-line.is-seekable {
  cursor: pointer;
}

.ci-transcript--karaoke .ci-transcript-line.is-seekable:hover {
  opacity: 0.75;
  background-color: var(--brand-soft);
}

.ci-transcript--karaoke .ci-transcript-line.is-active {
  opacity: 1;
  background-color: var(--brand-soft);
}

/* The dim/active state replaces the divider lines for a cleaner karaoke look. */
.ci-transcript--karaoke .ci-transcript-line + .ci-transcript-line {
  border-top: none;
}

/* Lifecycle events (hold/resume/transfer) — a centered system note in the
   call timeline, visually distinct from speaker lines. */
.ci-transcript-event {
  margin: 8px 0;
  padding: 4px 10px;
  text-align: center;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.ci-transcript-event::before {
  content: "•  ";
  opacity: 0.5;
}

/* Admin-only copilot test bench (simulate a call / caller-ID override). */
.cop-test {
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  padding: 10px;
  margin: 0;
  background: var(--line-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cop-test-h {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.6;
}
.cop-test-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cop-test input[type="text"] {
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface, #fff);
  color: inherit;
}
.cop-test-btn {
  padding: 7px 11px;
  font: inherit;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.cop-test-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.cop-test-btn:hover {
  border-color: var(--accent);
}
.cop-test-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cop-test-quick button {
  font: inherit;
  font-size: 12px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.cop-test-quick button:hover {
  border-color: var(--accent);
}
.cop-test-override {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.85;
  cursor: pointer;
}
/* Override the global `input { width:100%; min-height:38px }` that otherwise
   blows the checkbox up into a giant square. */
.cop-test-override input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-height: 0;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border-radius: 3px;
  appearance: auto;
  -webkit-appearance: checkbox;
  accent-color: var(--accent);
  cursor: pointer;
}
.cop-test-override span {
  flex: 1;
}
.cop-test-override em {
  font-style: italic;
  opacity: 0.9;
}

/* ---------------------------------------------------------------------
   Leave Note: internal office notes — yellow composer + centered sticky
   --------------------------------------------------------------------- */
.toolbar-button.active {
  background: var(--note-bg-strong);
  border-color: var(--note-line);
  color: var(--note-ink);
}

.composer-bar.note-mode {
  background: var(--note-bg);
  border-color: var(--note-line);
}
.composer-bar.note-mode:focus-within {
  border-color: var(--note-line);
  background: var(--note-bg-strong);
  /* Was the light --note-line hardcoded, so in dark the ring glowed brighter
     than the bar it surrounds. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--note-line) 55%, transparent);
}
.composer-bar.note-mode textarea {
  color: var(--note-ink);
}
.composer-bar.note-mode textarea::placeholder {
  color: var(--note-ink);
  opacity: 0.6;
}
.composer-bar.note-mode .send-button {
  /* Both tokens already carry correct dark values; the hardcoded pair made this
     the only send button in the app that ignored the theme. */
  background: var(--note-line);
  color: var(--note-ink);
}
.composer-bar.note-mode .send-button:hover {
  background: #cf9f12;
}

/* Notes sit centered in the thread — neither patient (left) nor staff (right). */
.message-row.note {
  justify-content: center;
}
.message-row.note .message-card {
  align-items: center;
  max-width: min(560px, 84%);
}
.message-row.note .bubble {
  width: 100%;
  text-align: left;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-radius: var(--radius-md);
  color: var(--note-ink);
  box-shadow: var(--shadow-sm);
}
.message-row.note .message-meta {
  justify-content: center;
  gap: 6px;
  color: var(--note-ink);
  opacity: 0.85;
}
.note-byline {
  font-style: italic;
}
.note-delete {
  border: none;
  background: transparent;
  color: var(--note-ink);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 2px;
  opacity: 0;
  transition: opacity 120ms ease;
}
.message-row.note:hover .note-delete,
.note-delete:focus-visible {
  opacity: 0.75;
}
.note-delete:hover {
  opacity: 1;
}

/* ---------------------------------------------------------------------
   SMS opt-out: in-thread blocked banner + suppression-list dialog
   --------------------------------------------------------------------- */
.opt-out-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  padding: 9px 12px;
  border: 1px solid var(--note-line);
  background: var(--note-bg);
  color: var(--note-ink);
  border-radius: var(--radius-md);
  font-size: 0.83rem;
  line-height: 1.35;
}
.opt-out-banner svg {
  flex: 0 0 auto;
}

.optout-add {
  margin-bottom: 10px;
}
.optout-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
}
.optout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
}
.optout-row__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.optout-meta {
  font-size: 0.75rem;
  color: var(--muted);
}
.optout-remove {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.optout-remove:hover:not(:disabled) {
  background: var(--brand-soft);
  color: var(--brand-dark);
}
.optout-remove:disabled {
  opacity: 0.5;
  cursor: default;
}

/* --- Mass-text campaigns --------------------------------------------------- */
.campaign-list-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.campaign-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 58vh;
  overflow-y: auto;
}
.campaign-row {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
}
.campaign-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.campaign-meta {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 4px;
}
.campaign-badge {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--line);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.campaign-badge--sending { background: var(--brand-soft); color: var(--brand-dark); }
.campaign-badge--scheduled { background: #fff3d6; color: #8a6300; }
.campaign-badge--paused { background: #fde8cf; color: #8a4b00; }
.campaign-badge--completed { background: #dcf3e3; color: #1d7a40; }
.campaign-badge--canceled { background: #f3d6d6; color: #9a2b2b; }
.campaign-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--line);
  overflow: hidden;
  margin-top: 8px;
}
.campaign-progress__bar {
  height: 100%;
  background: var(--brand);
  transition: width 200ms ease;
}
.campaign-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.campaign-action {
  padding: 5px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.8rem;
  cursor: pointer;
}
.campaign-action:hover:not(:disabled) { background: var(--brand-soft); color: var(--brand-dark); }
.campaign-action:disabled { opacity: 0.5; cursor: default; }
.campaign-action--danger { color: #9a2b2b; }
.campaign-action--danger:hover:not(:disabled) { background: #f3d6d6; color: #7a1f1f; }

.campaign-back {
  border: none;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 0 10px;
}
.campaign-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 62vh;
  overflow-y: auto;
}
.campaign-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.85rem;
  border: none;
  margin: 0;
  padding: 0;
}
.campaign-field > span { color: var(--ink-soft); font-weight: 600; }
.campaign-field input:not([type="radio"]):not([type="file"]),
.campaign-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.campaign-field input[type="radio"] { width: auto; accent-color: var(--brand); }

.campaign-primary {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, opacity 140ms ease;
}
.campaign-primary:hover:not(:disabled) { background: var(--brand-hover); }
.campaign-primary:disabled { opacity: 0.5; cursor: default; }
.campaign-phones {
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}
.campaign-preview {
  background: var(--panel-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.campaign-preview__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.campaign-preview__bubble {
  margin-top: 6px;
  padding: 9px 12px;
  border-radius: var(--bubble-radius);
  background: var(--outbound-to);
  color: var(--outbound-ink);
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.88rem;
}
.campaign-schedule {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  gap: 8px;
}
.campaign-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  font-size: 0.85rem;
}
.campaign-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.campaign-reclassify-link {
  margin-top: 12px;
  border: none;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  font-size: 0.82rem;
  padding: 4px 0;
  align-self: flex-start;
}
.campaign-reclassify-link:hover {
  text-decoration: underline;
}
.campaign-reclassify-result {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
  border: 1px solid var(--line);
}
.campaign-seg {
  margin-top: -4px;
  font-size: 0.78rem;
}
.campaign-seg--over {
  color: #dc2626;
  font-weight: 600;
}
.campaign-cost {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  padding: 10px 12px;
  color: var(--ink-soft);
}
.campaign-cost__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  font-weight: 600;
}
.campaign-cost__head strong {
  color: var(--ink);
  font-size: 1.05rem;
  white-space: nowrap;
}
.campaign-cost__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--muted);
}
.campaign-cost__grid span {
  min-width: 0;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--panel);
  border: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.campaign-cost__grid b {
  color: var(--ink-soft);
  font-weight: 700;
}
.campaign-cost__note {
  margin-top: 8px;
  font-size: 0.74rem;
  color: var(--muted);
}
.campaign-cost__note--warn {
  color: #dc2626;
  font-weight: 600;
}

@media (max-width: 560px) {
  .campaign-cost__head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .campaign-cost__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Ask AI: header button + receptionist Q&A dialog ───────────────────────── */
.toolbar-button-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--accent-ink);
  border-color: var(--brand-soft-strong);
}
.toolbar-button-ai svg { width: 14px; height: 14px; }
.toolbar-button-ai:hover { background: var(--brand-soft); }
/* Ask AI + Copilot travel together: one flex item in .thread-actions that never
   wraps internally, so when the toolbar runs out of room the pair drops to the
   next line as a unit — Copilot is never left alone on a row. */
.toolbar-ai-group {
  display: inline-flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px; /* matches .thread-actions gap so spacing stays uniform */
}

.askai-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 5vh 16px 16px;
  background: rgba(10, 12, 18, 0.45);
  backdrop-filter: blur(2px);
}
@media (min-width: 720px) {
  .askai-overlay { align-items: center; }
}

.askai-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  background: var(--panel);
  border: 1px solid var(--line-subtle);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.askai-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-subtle);
}
.askai-title-wrap { display: flex; align-items: center; gap: 10px; }
.askai-spark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--brand));
}
.askai-spark svg { width: 17px; height: 17px; }
.askai-header h2 { margin: 0; font-size: 1rem; font-weight: 650; color: var(--ink); }
.askai-subtitle { font-size: 0.78rem; color: var(--muted); }

.askai-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.askai-empty { color: var(--muted); font-size: 0.85rem; }
.askai-empty p { margin: 0 0 10px; }
.askai-suggestions { display: flex; flex-wrap: wrap; gap: 7px; }
.askai-chip {
  padding: 6px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-subtle);
  background: var(--panel-subtle);
  color: var(--ink);
  font-size: 0.78rem;
  cursor: pointer;
}
.askai-chip:hover { background: var(--brand-soft); border-color: var(--brand-soft-strong); }

.askai-row { max-width: 100%; font-size: 0.875rem; line-height: 1.45; }
.askai-q {
  /* Was white on --accent: 3.49:1 light, 2.06:1 dark -- the staffer's own
     question was the least readable text in the dialog. Matches the outbound
     message bubble, which is the same "this is mine" signal. */
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: var(--brand);
  color: var(--outbound-ink);
}
.askai-a {
  align-self: flex-start;
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--panel-subtle);
  border: 1px solid var(--line-subtle);
  color: var(--ink);
}
.askai-answer { white-space: normal; }
.askai-loading { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.askai-error { color: var(--muted); font-style: italic; }
.askai-a .cs-spinner {
  width: 12px; height: 12px;
  border: 1.5px solid var(--brand-soft-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: cs-spin 600ms linear infinite;
}

.askai-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line-subtle);
}
.askai-src-label {
  width: 100%;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted);
}
.askai-src {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  max-width: 100%;
  padding: 3px 9px;
  border-radius: 9px;
  background: var(--panel);
  border: 1px solid var(--line-subtle);
  font-size: 0.74rem;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.askai-src-k { color: var(--muted); font-weight: 600; flex: none; }

/* Clickable carrier tracking links (FedEx/USPS/UPS) for shipped lab cases. */
.askai-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.askai-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 11px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.askai-link:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Inline links the model may emit inside an answer (e.g. a tracking URL). */
.askai-answer a { color: var(--accent); overflow-wrap: anywhere; }

.askai-form {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line-subtle);
}
.askai-form input {
  flex: 1;
  padding: 10px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-subtle);
  background: var(--panel-subtle);
  color: var(--ink);
  font-size: 0.875rem;
}
.askai-form input:focus { outline: none; border-color: var(--accent); }
.askai-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--brand);
  color: var(--outbound-ink);
  cursor: pointer;
}
.askai-send:hover { filter: brightness(1.05); }

/* ============================================================================
   Landing page (Staff Workspace) + secondary workspace pages
   ========================================================================== */
.home-shell {
  max-width: 864px;
  margin: 0 auto;
  /* Trim top padding: the sticky .home-header now supplies its own top spacing. */
  padding: 8px 24px 64px;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Homepage header shares the skinny, sticky, bottom-ruled shell with the
   workspace .page-header so every non-Messages page has an identical bar. */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  margin-bottom: 14px; padding: 10px 0 8px;
  box-shadow: 0 1px 0 var(--line);
}
.home-brand .eyebrow {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.home-brand h1 { margin: 0; font-size: 1.4rem; color: var(--ink); }
.home-header-actions { display: flex; align-items: center; gap: 10px; }
@media (max-width: 640px) {
  .home-header { padding: 8px 0 6px; gap: 8px; }
  .home-brand h1 { font-size: 1.15rem; }
}

.account-area {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.account-chip {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 220px;
  min-height: 38px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink);
  line-height: 1.1;
}
.account-name,
.account-email {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-name { font-size: 0.82rem; font-weight: 800; }
.account-email { margin-top: 2px; font-size: 0.68rem; color: var(--muted); }
.account-signout {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.account-signout:hover { background: var(--panel-subtle); color: var(--ink); }
.account-area-message { margin-top: 2px; }
.account-area-message .account-chip { max-width: 170px; }
/* Account chip + sign out pinned to the far right of the messages thread header,
   set off from the action buttons by a divider. */
.account-area-thread { flex: none; margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line-subtle); }
.account-area-thread .account-chip { max-width: 180px; }

.home-btn {
  font: inherit;
  font-size: 0.86rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
.home-btn:hover { background: var(--panel-subtle); }
.home-btn:active { transform: translateY(1px); }
.home-btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.home-btn-primary:hover { background: var(--brand-hover); }
.home-btn-ghost { background: transparent; }
.home-btn-icon { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; }

.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.home-loading { color: var(--muted); padding: 24px 4px; grid-column: 1 / -1; }

.home-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  min-height: 150px;
  position: relative;
}
.home-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--brand-soft-strong); }

/* Action-required badge — shown only when there's real work; red when urgent. */
.home-card-badge {
  position: absolute; top: 14px; right: 14px;
  min-width: 22px; height: 22px; padding: 0 7px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.74rem; font-weight: 700; line-height: 1; color: #fff;
  background: var(--muted); border-radius: var(--radius-pill);
  box-shadow: 0 0 0 3px var(--panel);
}
.home-card-badge[hidden] { display: none; }
.home-card-badge.is-urgent { background: #d1495b; }

/* "Handle first" priorities strip above the card grid. */
.home-priorities {
  margin: 0 0 4px; padding: 11px 16px;
  font-size: 0.9rem; font-weight: 500; color: var(--ink-soft);
  background: var(--panel-subtle); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--radius-md);
}
.home-priorities[hidden] { display: none; }
.home-preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 10px 14px;
  font-size: 0.9rem; color: var(--ink);
  background: var(--brand-soft); border: 1px solid var(--brand-soft-strong); border-left: 3px solid var(--brand);
  border-radius: var(--radius-md);
}
.home-preview-muted { color: var(--muted); margin-left: 6px; }

/* "You don't have access to X" banner, shown after a blocked-card redirect. */
.home-notice {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px; padding: 11px 16px;
  font-size: 0.9rem; font-weight: 500; color: var(--ink);
  background: var(--panel-subtle); border: 1px solid var(--line);
  border-left: 3px solid var(--warning, #d98324); border-radius: var(--radius-md);
}
.home-notice[hidden] { display: none; }
.home-notice-text { flex: 1; }
.home-notice-dismiss {
  flex: none; cursor: pointer; border: 0; background: transparent;
  font-size: 1.2rem; line-height: 1; color: var(--ink-soft); padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.home-notice-dismiss:hover { background: var(--line); color: var(--ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── iCare AI card ───────────────────────────────────────────────────────── */
.icare-ai-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.icare-ai-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.icare-ai-shell .page-header {
  flex: 0 0 auto;
}
.icare-ai-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-sm); overflow: hidden;
}
.icare-ai-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  width: 100%;
}
.icare-ai-mode {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 6px 10px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.15;
  cursor: pointer;
}
.icare-ai-mode:hover {
  border-color: var(--brand);
  color: var(--ink);
}
.icare-ai-mode.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.icare-ai-mode:disabled {
  opacity: 0.62;
  cursor: wait;
}
.icare-ai-admin-logs {
  margin-left: auto;
  border-style: dashed;
}
.icare-ai-log {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 22px; display: flex; flex-direction: column; gap: 12px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.icare-ai-row { display: flex; align-items: flex-end; }
.icare-ai-me { justify-content: flex-end; }
.icare-ai-ai { justify-content: flex-start; }
.icare-ai-bubble {
  max-width: min(760px, 86%);
  padding: 12px 14px; border-radius: 16px;
  font-size: 0.95rem; line-height: 1.5; color: var(--ink);
}
.icare-ai-me .icare-ai-bubble {
  color: #fff; background: var(--brand); border-bottom-right-radius: 5px;
}
.icare-ai-ai .icare-ai-bubble {
  background: var(--panel-subtle); border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}
.icare-ai-bubble code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em;
  background: var(--panel); padding: 1px 5px; border-radius: 5px;
}
.icare-ai-bubble p { margin: 0 0 0.72em; }
.icare-ai-bubble p:last-child { margin-bottom: 0; }
.icare-ai-bubble h2,
.icare-ai-bubble h3,
.icare-ai-bubble h4 {
  margin: 0.9em 0 0.35em;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: 0;
}
.icare-ai-bubble h2:first-child,
.icare-ai-bubble h3:first-child,
.icare-ai-bubble h4:first-child { margin-top: 0; }
.icare-ai-bubble ul,
.icare-ai-bubble ol {
  margin: 0.25em 0 0.85em;
  padding-left: 1.35em;
}
.icare-ai-bubble li { margin: 0.18em 0; }
.icare-ai-bubble hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0.95em 0;
}
.icare-ai-thinking-trace {
  margin: 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.035);
  color: var(--muted);
  font-size: 0.82rem;
}
.icare-ai-thinking-trace summary {
  cursor: pointer;
  padding: 7px 10px;
  font-weight: 650;
  color: var(--ink-soft);
}
.icare-ai-thinking-body {
  max-height: min(240px, 32vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 10px 9px;
  white-space: normal;
  scrollbar-width: thin;
}
.icare-ai-answer { white-space: normal; }
.icare-ai-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.icare-ai-choice {
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.86rem;
  line-height: 1.2;
  cursor: pointer;
}
.icare-ai-choice:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}
.icare-ai-choice:disabled {
  opacity: 0.55;
  cursor: default;
}
.icare-ai-row.is-thinking .icare-ai-bubble { color: var(--ink-soft); }
.icare-ai-thinking-label { margin-right: 9px; }
.icare-ai-dots { display: inline-flex; gap: 4px; vertical-align: middle; }
.icare-ai-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--brand);
  animation: icare-ai-dot 0.9s infinite ease-in-out;
}
.icare-ai-dots i:nth-child(2) { animation-delay: 0.12s; }
.icare-ai-dots i:nth-child(3) { animation-delay: 0.24s; }
@keyframes icare-ai-dot {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.icare-ai-cursor {
  display: inline-block; width: 7px; height: 1.05em; margin-left: 2px;
  background: var(--brand); vertical-align: -0.18em; animation: icare-ai-cursor 0.75s steps(2) infinite;
}
@keyframes icare-ai-cursor { 50% { opacity: 0; } }
.icare-ai-sources {
  align-self: flex-start; margin: -5px 0 3px 8px;
  font-size: 0.76rem; color: var(--muted);
}
.icare-ai-sources span {
  display: inline-flex; margin-left: 5px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel-subtle); white-space: nowrap;
}
.icare-ai-form {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  padding: 14px; border-top: 1px solid var(--line); background: var(--panel-raised);
}
.icare-ai-composer-row {
  display: flex; gap: 10px; align-items: flex-end;
}
.icare-ai-input {
  flex: 1; min-width: 0; max-height: 180px; resize: none;
  font: inherit; font-size: 0.96rem; line-height: 1.45;
  padding: 11px 13px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--panel); color: var(--ink);
}
.icare-ai-input:focus { outline: 2px solid var(--brand-soft-strong); border-color: var(--brand); }
.icare-ai-mic,
.icare-ai-send {
  width: 44px; height: 44px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease, transform 80ms ease;
}
.icare-ai-mic {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink-soft);
}
.icare-ai-mic:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}
.icare-ai-mic.is-listening {
  border-color: var(--danger, #d64545);
  background: rgba(214, 69, 69, 0.11);
  color: var(--danger, #d64545);
  box-shadow: 0 0 0 4px rgba(214, 69, 69, 0.12);
  animation: icare-ai-mic-pulse 1.1s ease-in-out infinite;
}
.icare-ai-mic:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  animation: none;
}
.icare-ai-mic:active,
.icare-ai-send:active {
  transform: scale(0.94);
}
@keyframes icare-ai-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.10); }
  50% { box-shadow: 0 0 0 7px rgba(214, 69, 69, 0.17); }
}
.icare-ai-send {
  border: 1px solid var(--brand); border-radius: 50%;
  background: var(--brand); color: #fff; cursor: pointer;
}
.icare-ai-send:hover { background: var(--brand-hover); }
.icare-ai-send:disabled { opacity: 0.58; cursor: wait; }
.icare-ai-log-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(10, 12, 20, 0.58);
}
.icare-ai-log-modal[hidden] { display: none; }
.icare-ai-log-panel {
  width: min(1120px, 100%);
  max-height: min(820px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-lg);
}
.icare-ai-log-head,
.icare-ai-log-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.icare-ai-log-head h2 {
  margin: 0 0 3px;
  font-size: 1.05rem;
  letter-spacing: 0;
}
.icare-ai-log-head p {
  color: var(--muted);
  font-size: 0.84rem;
}
.icare-ai-log-close,
.icare-ai-log-refresh {
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.icare-ai-log-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
}
.icare-ai-log-refresh {
  min-height: 34px;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  font-size: 0.84rem;
  font-weight: 700;
}
.icare-ai-log-list {
  overflow: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.icare-ai-log-empty {
  padding: 22px;
  color: var(--muted);
  text-align: center;
}
.icare-ai-log-session {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-subtle);
}
.icare-ai-log-session summary {
  cursor: pointer;
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  list-style-position: inside;
}
.icare-ai-log-session summary span {
  color: var(--muted);
  font-size: 0.78rem;
}
.icare-ai-log-session summary b {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.icare-ai-log-detail {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.42;
}
.icare-ai-log-detail > div {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.icare-ai-log-messages {
  display: grid;
  gap: 7px;
  margin-top: 4px;
}
.icare-ai-log-message {
  display: grid;
  gap: 3px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.icare-ai-log-message b {
  color: var(--brand);
  font-size: 0.74rem;
  text-transform: uppercase;
}
.icare-ai-log-message span {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 640px) {
  .icare-ai-shell { padding: 4px 10px 10px; }
  .icare-ai-shell .page-header { margin-bottom: 8px; }
  .icare-ai-workspace { border-radius: var(--radius-md); }
  .icare-ai-form { padding: 10px; }
  .icare-ai-modes { gap: 6px; }
  .icare-ai-mode { font-size: 0.78rem; padding: 6px 8px; }
  .icare-ai-admin-logs { margin-left: 0; }
  .icare-ai-log { padding: 14px; }
  .icare-ai-bubble { max-width: 92%; }
  .icare-ai-log-modal { padding: 10px; }
  .icare-ai-log-panel { max-height: 94vh; }
}
.home-card-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--brand-soft);
  color: var(--brand);
  margin-bottom: 4px;
}
.home-card-icon svg { width: 24px; height: 24px; }
.home-card-title { font-size: 1.08rem; font-weight: 650; }
.home-card-desc { font-size: 0.85rem; color: var(--muted); line-height: 1.35; }

/* Homepage workbench: bounded actionable work on the left, compact permission-
   filtered workspace navigation on the right. The owning apps remain the source
   of truth; this surface shows only a small projection of their current work. */
.home-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, .8fr);
  gap: 20px;
  align-items: start;
}
.home-work-column,
.home-workspaces { min-width: 0; }
.home-mobile-tabs { display: none; }
.home-workspaces {
  position: sticky;
  top: 82px;
  /* Let the document own vertical scrolling. A nested viewport-height scroller
     trapped wheel/touchpad input when this left rail reached its end, even
     though the attention column still had content below it. */
  max-height: none;
  overflow: visible;
}
.home-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 9px;
}
.home-section-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.14rem;
  letter-spacing: -.015em;
}
.home-section-heading p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.4;
}
.home-section-actions { display: flex; align-items: center; gap: 7px; }
.home-work-list { display: grid; gap: 9px; }
.mentions-section-priority { margin-top: 0; margin-bottom: 12px; }
.home-work-module {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  overflow: hidden;
}
.home-work-module-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-subtle);
  box-shadow: 0 1px 0 var(--line);
}
.home-work-module-head h3 { margin: 0; color: var(--ink); font-size: .9rem; }
.home-work-module-head p { margin: 2px 0 0; color: var(--muted); font-size: .74rem; }
.home-work-module-head a {
  flex: none;
  color: var(--brand);
  font-size: .75rem;
  font-weight: 650;
  text-underline-offset: 3px;
}
.home-work-count {
  display: inline-flex;
  min-width: 22px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-left: 5px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
}
.home-work-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 12px;
  box-shadow: 0 1px 0 var(--line-subtle);
}
.home-work-item:last-of-type { box-shadow: none; }
.home-work-item.tone-urgent { background: color-mix(in srgb, var(--danger, #b3261e) 5%, var(--panel)); }
.home-work-item.tone-attention { background: color-mix(in srgb, var(--brand) 5%, var(--panel)); }
.home-work-item-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-work-item-copy strong { color: var(--ink); font-size: .84rem; line-height: 1.25; }
.home-work-item-copy span { color: var(--muted); font-size: .73rem; line-height: 1.3; overflow-wrap: anywhere; }
.home-work-item-actions { display: flex; align-items: center; gap: 6px; }
.home-work-item-actions .home-btn { padding: 5px 9px; font-size: .73rem; min-height: 32px; }
.home-work-freshness {
  margin: 0;
  padding: 6px 12px;
  color: var(--muted);
  background: var(--panel-subtle);
  font-size: .69rem;
  line-height: 1.4;
}
.home-work-more { display: none; }
.home-caught-up {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
}
.home-caught-up span { color: var(--muted); font-size: .86rem; }

.home-workspaces .home-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.home-workspace-column { display: contents; }
.home-workspace-group h3 {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.home-workspace-links {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.home-workspaces .home-card {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 var(--line-subtle);
  transition: background .12s ease, color .12s ease;
}
.home-workspaces .home-card:last-child { box-shadow: none; }
.home-workspaces .home-card:hover { transform: none; box-shadow: 0 1px 0 var(--line-subtle); background: var(--panel-subtle); }
.home-workspaces .home-card:last-child:hover { box-shadow: none; }
.home-workspaces .home-card-icon {
  width: 34px;
  height: 34px;
  margin: 0;
  border-radius: var(--radius-sm);
}
.home-workspaces .home-card-icon svg { width: 18px; height: 18px; }
.home-card-copy { display: flex; flex-direction: column; min-width: 0; }
.home-workspaces .home-card-title { font-size: .86rem; line-height: 1.25; }
.home-workspaces .home-card-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .72rem;
}
.home-card-arrow { color: var(--muted); font-size: .9rem; }

@media (max-width: 880px) {
  .home-dashboard { grid-template-columns: 1fr; }
  .home-workspaces { position: static; max-height: none; overflow: visible; }
  .home-workspaces .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .home-mobile-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 10px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--panel-subtle);
  }
  .home-mobile-tabs button {
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: .88rem;
    font-weight: 700;
    cursor: pointer;
  }
  .home-mobile-tabs button[aria-selected="true"] {
    background: var(--panel);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
  }
  .home-mobile-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .home-mobile-tab-count {
    display: inline-flex;
    min-width: 21px;
    height: 21px;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--panel);
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
  }
  .home-mobile-tab-count[hidden] { display: none; }
  .home-work-module:not(.is-expanded) .home-work-item ~ .home-work-item { display: none; }
  .home-work-more {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 8px 15px;
    border: 0;
    box-shadow: 0 -1px 0 var(--line-subtle);
    background: var(--panel);
    color: var(--link);
    text-align: left;
    font: inherit;
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
  }
  .home-work-more:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
  .home-dashboard { gap: 14px; }
  .home-section-actions { gap: 5px; }
  .home-section-actions .home-btn { padding-inline: 11px; }
  .home-work-item { grid-template-columns: 1fr; gap: 6px; }
  .home-work-item-actions { justify-content: flex-start; }
  .home-work-item-actions .home-btn { min-height: 38px; }
  .home-workspaces .home-cards { grid-template-columns: 1fr; }
  .home-section-heading { align-items: center; }
}

/* Gate manager modal */
.gate-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gate-modal[hidden] { display: none; }
#updateModal { z-index: 60; } /* must stack above #detailModal */
.gate-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 12, 20, 0.5); }
.gate-modal-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: 85vh;
  overflow: auto;
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 24px;
}
.gate-modal-header { display: flex; align-items: center; justify-content: space-between; }
.gate-modal-header h2 { margin: 0; font-size: 1.25rem; color: var(--ink); }
.gate-modal-close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.gate-modal-help { font-size: 0.86rem; color: var(--muted); margin: 8px 0 16px; line-height: 1.4; }
.gate-list { display: flex; flex-direction: column; gap: 14px; }
.gate-card { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px 16px; background: var(--panel-subtle); }
.gate-card-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.gate-card-head strong { color: var(--ink); }
.gate-card-sub { font-size: 0.8rem; color: var(--muted); }
.gate-shared-note {
  border-top: 1px dashed var(--line);
  padding-top: 9px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--ink-soft);
}
.gate-access { display: flex; gap: 18px; font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 8px; }
.gate-access label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
/* The global `input` rule sizes ALL inputs (width:100%, 38px, pill bg) — reset the
   modal's radios/checkboxes back to native controls so they aren't giant circles. */
.gate-access input[type="radio"],
.gate-person input[type="checkbox"] {
  width: auto;
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  flex: none;
  margin: 0;
  accent-color: var(--brand);
}
.gate-people { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; border-top: 1px dashed var(--line); }
.gate-people[hidden] { display: none; }
.gate-person { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-soft); }
.gate-managers-head,
.gate-alerts-head { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); font-size: 0.85rem; font-weight: 600; color: var(--ink); display: flex; flex-direction: column; gap: 2px; }
.gate-managers-head .gate-card-sub,
.gate-alerts-head .gate-card-sub { font-weight: 400; }
.gate-managers,
.gate-alert-roles { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-top: 8px; }
.gate-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.gate-status { font-size: 0.82rem; color: var(--muted); margin-right: auto; }
.gate-status.is-error { color: #d1495b; }

/* Secondary pages (lab cases / documents / requests) */
/* Small top padding only — the sticky .page-header carries its own top padding
   + bottom rule, so the old 24px top stacked into too much space above the title. */
.page-shell { max-width: 1180px; margin: 0 auto; padding: 6px 24px 24px; min-height: 100vh; min-height: 100dvh; }
.page-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-header h1 { margin: 0; font-size: 1.4rem; color: var(--ink); flex: 1; }
.page-home { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--brand); font-size: 0.9rem; font-weight: 600; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); }
.page-home svg { display: block; flex: none; }
.page-home:hover { background: var(--brand-soft); }
.page-body { display: flex; flex-direction: column; gap: 16px; }
/* Board/tracker tabs sit on their own row below the header (not crowding the
   title row), left-aligned so the header's right cluster is just account + theme. */
.page-board-switch { align-self: flex-start; flex-wrap: wrap; max-width: 100%; }
.placeholder-banner {
  font-size: 0.82rem; color: var(--note-ink);
  background: var(--note-bg); border: 1px solid var(--note-line);
  border-radius: var(--radius-md); padding: 8px 14px;
}

.sheet-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet-search { font: inherit; padding: 8px 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); min-width: 220px; }
.sheet-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.sheet-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); }
.sheet { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.sheet th, .sheet td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-subtle); white-space: nowrap; }
.sheet thead th { background: var(--panel-subtle); color: var(--muted); font-weight: 600; position: sticky; top: 0; }
.sheet tbody tr:hover { background: var(--panel-subtle); }

.pill { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.pill-sent { background: #ffe8a8; color: #4b3510; }
.pill-received { background: #c9e6fb; color: #0759b8; }
.pill-received-implant { background: #14814f; color: #fff; }
.pill-approval { background: #ffd1d1; color: #c40000; }
.pill-delayed { background: #c00000; color: #fff; }
.pill-ordered { background: #d948df; color: #1d0020; }
.pill-rendered { background: #cceec1; color: #087543; }
.pill-rendered-implant { background: #1260b3; color: #fff; }
.pill-not-ready { background: #3d3d3d; color: #fff; }
.pill-ready-restore { background: #e1c6f5; color: #6f3da6; }
.pill-osseo { background: #ececec; color: #222; }
.pill-seated { background: #6d4297; color: #fff; }
.pill-restored { background: #14814f; color: #fff; }
.pill-complete { background: #ececec; color: #222; }
.pill-refund { background: #ffc9c2; color: #d10000; }
.pill-progress { background: #fff3da; color: #9a6a00; }
.pill-attention { background: #fdecec; color: #c0392b; }
.pill-ready { background: #cceec1; color: #087543; }
.pill-stage-one { background: #ffe8a8; color: #4b3510; }
.pill-stage-planning, .pill-stage-two, .pill-stage-cap, .pill-stage-default { background: #ececec; color: #222; }
.pill-stage-three { background: #ffc8aa; color: #6d3218; }
.pill-stage-abutment { background: #c5e9f7; color: #0759b8; }
.pill-stage-scan { background: #cde5ec; color: #1b5c6d; }
.pill-stage-bone { background: #c00000; color: #fff; }

/* ── Task Center ─────────────────────────────────────────────────────────── */
.task-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.task-toolbar .lab-spacer,
.task-form-actions .lab-spacer { flex: 1; }
.task-view-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
}
.task-view-btn {
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}
.task-view-btn.is-active {
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.task-assignee-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--ink-soft);
}
.task-assignee-filter select,
.task-field select,
.task-field input,
.task-field textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
}
.task-assignee-filter select {
  min-height: 36px;
  padding: 6px 32px 6px 10px;
  border-radius: var(--radius-pill);
}
.task-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
.task-col {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  overflow: hidden;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.task-col.is-drop-target {
  border-color: var(--brand-soft-strong);
  background: color-mix(in srgb, var(--brand-soft) 14%, var(--panel-subtle));
  box-shadow: inset 0 0 0 1px var(--brand-soft-strong);
}
.task-col-head {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.task-col-count {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}
.task-col-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
  min-height: 220px;
}
.task-col-empty {
  padding: 18px 8px;
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
}
.task-card {
  width: 100%;
  min-height: 136px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 120ms ease, box-shadow 120ms ease, opacity 120ms ease, transform 120ms ease;
}
.task-card:hover {
  border-color: var(--brand-soft-strong);
  box-shadow: var(--shadow-md);
}
.task-card-delegated {
  background: color-mix(in srgb, var(--panel-subtle) 78%, var(--panel));
  border-color: var(--line);
  box-shadow: none;
  opacity: 0.68;
}
.task-card-delegated:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm);
  opacity: 0.82;
}
.task-card[draggable="true"] { cursor: grab; }
.task-card[draggable="true"]:active { cursor: grabbing; }
.task-card.is-dragging {
  opacity: 0.58;
  transform: scale(0.99);
}
.task-card-done {
  min-height: 54px;
  gap: 5px;
  padding: 8px 10px;
  box-shadow: none;
  background: color-mix(in srgb, var(--panel) 82%, var(--panel-subtle));
}
.task-card-done .task-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.84rem;
  line-height: 1.2;
}
.task-done-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.72rem;
}
.task-done-patient {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-soft);
}
.task-done-patient::before {
  content: "•";
  padding: 0 6px 0 2px;
  color: var(--line-strong);
}
.task-card-top,
.task-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.task-card-top { justify-content: space-between; min-height: 22px; }
.task-card-chips {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-wrap: wrap;
}
.task-card-title {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.task-card-meta {
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.task-card-foot {
  margin-top: auto;
  color: var(--muted);
  font-size: 0.78rem;
}
.task-avatar-stack {
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
.task-avatar-stack .task-avatar + .task-avatar {
  margin-left: -7px;
  box-shadow: 0 0 0 2px var(--panel);
}
.task-assignee-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-avatar {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0;
}
.task-avatar-mini {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 0.52rem;
}
.task-avatar-more {
  background: var(--ink-soft) !important;
}
.task-pri,
.task-due,
.task-repeat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.1;
  white-space: nowrap;
}
.task-pri { text-transform: capitalize; }
.task-pri-high { background: #fdecec; color: #bb2d3b; border: 1px solid #f0b7bd; }
.task-pri-medium { background: #fff7e6; color: #8a6100; border: 1px solid #efd8a8; }
.task-pri-low { background: #e9f8ee; color: #1c6b3a; border: 1px solid #c9dfcf; }
.task-due { color: var(--muted); background: var(--panel-subtle); border: 1px solid var(--line); }
.task-due.is-overdue { color: #bb2d3b; background: #fdecec; border-color: #f0b7bd; }
.task-repeat-chip {
  color: #245b4f;
  background: #e8f6f2;
  border: 1px solid #bde0d5;
}
.task-recurring-list {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.task-recurring-row {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.task-recurring-row:hover {
  border-color: var(--brand-soft-strong);
  box-shadow: var(--shadow-md);
}
.task-recurring-main,
.task-recurring-meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.task-recurring-main strong {
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}
.task-recurring-main span,
.task-recurring-meta span:not(.task-repeat-chip),
.task-recurring-empty {
  color: var(--muted);
  font-size: 0.8rem;
}
.task-recurring-meta {
  flex: 0 0 auto;
  align-items: flex-end;
  text-align: right;
}
.task-recurring-empty {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  text-align: center;
}
.task-drawer {
  width: min(720px, calc(100vw - 28px));
  max-height: min(86vh, 780px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.task-drawer .gate-modal-header {
  flex: 0 0 auto;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--line-subtle);
}
#taskDrawerBody {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 22px 0;
}
.task-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.task-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.task-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 700;
}
.task-field input,
.task-field select {
  min-height: 38px;
  padding: 7px 10px;
}
.task-field textarea {
  min-height: 96px;
  padding: 9px 10px;
  resize: vertical;
}
.task-assignee-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.task-role-grid {
  margin-bottom: 2px;
}
.task-assignee-choice {
  position: relative;
  min-width: 0;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
.task-assignee-choice:hover {
  border-color: var(--brand-soft-strong);
  background: var(--panel-subtle);
}
.task-assignee-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.task-assignee-choice:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.task-assignee-choice:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(43, 105, 251, 0.18);
}
.task-assignee-choice:has(input:checked) .task-avatar {
  color: var(--brand);
  background: #fff !important;
}
.task-assignee-choice:has(input[data-implied="1"]) {
  border-color: var(--line);
  background: var(--panel-subtle);
  color: var(--muted);
  box-shadow: none;
  cursor: not-allowed;
}
.task-assignee-choice:has(input[data-implied="1"]):hover {
  border-color: var(--line);
  background: var(--panel-subtle);
}
.task-assignee-choice:has(input[data-implied="1"]) input,
.task-assignee-choice:has(input[data-implied="1"]) .task-avatar {
  cursor: not-allowed;
}
.task-assignee-choice:has(input[data-implied="1"]) .task-avatar {
  color: var(--muted);
  background: var(--panel) !important;
  opacity: 0.75;
}
.task-choice-avatar {
  display: inline-flex;
  flex: 0 0 auto;
}
.task-choice-avatar .task-avatar-mini {
  width: 20px;
  height: 20px;
  font-size: 0.54rem;
}
.task-assignee-choice span:last-child {
  min-width: 0;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-assignee-choice-role {
  padding-right: 10px;
}
.task-assignee-choice-role span:last-child {
  max-width: 132px;
}
.task-patient-pick { position: relative; }
.task-pat-clear {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: var(--panel-subtle);
  color: var(--muted);
  cursor: pointer;
}
.task-pat-clear[hidden] { display: none; }
.task-patient-results {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 230px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: var(--shadow-md);
}
.task-pat-row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--line-subtle);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.task-pat-row:hover { background: var(--panel-subtle); }
.task-pat-row:last-child { border-bottom: 0; }
.task-pat-name { font-size: 0.86rem; font-weight: 750; }
.task-pat-sub,
.task-pat-hint {
  color: var(--muted);
  font-size: 0.78rem;
}
.task-pat-hint { padding: 10px; }
.task-form-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px -22px 0;
  padding: 12px 22px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line-subtle);
  background: var(--panel);
}
.task-delete {
  border-color: #e0b4ae;
  color: #c0392b;
}
.task-delete:hover { background: #fdecec; }
.task-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.task-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.46);
  backdrop-filter: blur(2px);
}
.task-confirm-panel {
  position: relative;
  width: min(430px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.task-confirm-panel h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.05rem;
  line-height: 1.2;
}
.task-confirm-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}
.task-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 6px;
}
.task-confirm-danger {
  border-color: #c0392b;
  background: #c0392b;
}
.task-confirm-danger:hover {
  border-color: #a93226;
  background: #a93226;
}
@media (max-width: 640px) {
  .task-confirm-modal {
    align-items: flex-end;
    padding: 0;
  }
  .task-confirm-panel {
    width: 100%;
    max-height: calc(100vh - 24px);
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .task-confirm-actions .home-btn {
    flex: 1;
    min-height: 44px;
  }
}
.task-form-error {
  padding: 9px 11px;
  border: 1px solid #f0b7bd;
  border-radius: var(--radius-md);
  background: #fdecec;
  color: #bb2d3b;
  font-size: 0.84rem;
}
.task-repeat-box,
.task-repeat-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
}
.task-repeat-heading {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.task-repeat-heading strong {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.2;
}
.task-repeat-toggle {
  position: relative;
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  min-height: 28px;
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}
.task-repeat-checkbox {
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.task-repeat-switch {
  position: relative;
  width: 38px;
  height: 22px;
  flex: 0 0 38px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.task-repeat-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.22);
  transition: transform 0.16s ease;
}
.task-repeat-checkbox:checked + .task-repeat-switch {
  border-color: var(--brand);
  background: var(--brand);
}
.task-repeat-checkbox:checked + .task-repeat-switch::after {
  transform: translateX(16px);
}
.task-repeat-checkbox:focus-visible + .task-repeat-switch {
  box-shadow: 0 0 0 3px var(--brand-ring);
}
.task-repeat-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-repeat-hint,
.task-repeat-detail span,
.task-repeat-summary span,
.task-history-row span {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}
.task-repeat-actions,
.task-repeat-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.task-repeat-convert {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-repeat-convert-actions {
  margin-left: -11px;
  margin-right: -11px;
  margin-bottom: -11px;
}
.task-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line-subtle);
}
.task-history-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
}
.task-activity {
  margin: 12px 0 18px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.task-activity-launch {
  margin: 14px 0 18px;
}
.task-activity-launch .home-btn {
  min-height: 34px;
}
.task-activity-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 0;
}
.task-activity-dot {
  width: 8px;
  height: 8px;
  margin: 6px auto 0;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.task-activity-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 0.82rem;
}
.task-activity-line strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-activity-line span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
}
.task-activity-summary {
  margin-top: 2px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  line-height: 1.35;
}
.task-activity-changes {
  margin: 5px 0 0;
  padding-left: 16px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.4;
}
.task-activity-empty {
  padding: 10px 0;
  color: var(--muted);
  font-size: 0.8rem;
}
.task-conn {
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .task-board { grid-template-columns: 1fr; }
  .task-col-body { min-height: 120px; }
}

@media (max-width: 640px) {
  .task-toolbar { align-items: stretch; }
  .task-toolbar .sheet-search,
  .task-assignee-filter { width: 100%; }
  .task-assignee-filter { align-items: stretch; flex-direction: column; gap: 5px; }
  .task-row { grid-template-columns: 1fr; }
  .task-form-actions { justify-content: flex-end; }
}

/* ── Task detail read-only view ──────────────────────────────────────────── */
.task-detail-view {
  padding: 0;
}
.task-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.task-detail-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.35;
  word-break: break-word;
  color: var(--fg);
}
.task-detail-desc {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--fg-sub, var(--fg));
  opacity: 0.85;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.task-detail-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 2px;
}
.task-detail-field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  padding: 3px 0;
}
.task-detail-label {
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.task-detail-value {
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Inline status picker in the read-only task detail — compact, matches the
   detail field row so it reads as "Status: [dropdown]". */
.task-detail-status {
  font: inherit;
  font-size: 0.82rem;
  color: var(--fg);
  background: var(--panel-subtle, transparent);
  border: 1px solid var(--line-strong, var(--line));
  border-radius: var(--radius-pill, 8px);
  padding: 2px 8px;
  cursor: pointer;
}
.task-detail-status:hover { border-color: var(--brand); }
.task-edit-toggle {
  flex-shrink: 0;
  font-size: 0.78rem;
  padding: 4px 12px;
  border-radius: 6px;
}

/* ── Task notes input ────────────────────────────────────────────────────── */
.task-note-input {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 0 6px;
  border-top: 1px solid var(--bd);
  margin-top: 6px;
}
.task-note-input textarea {
  flex: 1;
  min-height: 38px;
  resize: vertical;
  font-size: 0.84rem;
  padding: 7px 10px;
  border: 1px solid var(--bd);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  line-height: 1.4;
}
.task-note-input textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 2px rgba(79, 109, 255, 0.15);
}
.task-note-btn {
  flex-shrink: 0;
  font-size: 0.8rem;
  padding: 7px 14px;
  white-space: nowrap;
}

/* ── Note-type activity entries ──────────────────────────────────────────── */
.task-activity-note .task-activity-dot {
  background: #7b61ff;
  box-shadow: 0 0 0 3px rgba(123, 97, 255, 0.18);
}
.task-activity-note .task-activity-summary {
  font-style: italic;
}

/* ── New Patient Requests: evidence-driven work queue ───────────────────── */
.appt-shell { max-width: 1260px; }
.appt-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel) 88%, var(--brand-soft));
}
.appt-intro h2 {
  margin: 0 0 5px;
  color: var(--ink);
  font-size: 1.08rem;
  letter-spacing: -0.015em;
}
.appt-intro p {
  max-width: 72ch;
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
  line-height: 1.5;
}
.appt-intro .lab-btn { flex: 0 0 auto; text-decoration: none; }
.appt-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
}
.appt-stats button {
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 11px 13px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  text-align: left;
  cursor: pointer;
}
.appt-stats button:last-child { border-right: 0; }
.appt-stats button:hover { background: var(--panel-subtle); }
.appt-stats button:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--brand-soft-strong); outline-offset: -3px; }
.appt-stats span { display: flex; align-items: baseline; gap: 7px; font-size: 0.8rem; font-weight: 750; }
.appt-stats b { color: var(--ink); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.appt-stats small { color: var(--muted); font-size: 0.7rem; line-height: 1.25; }
.appt-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}
.appt-filter-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: thin; }
.appt-filter-tabs button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 7px 13px; }
.appt-filter-tabs button b {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
  color: var(--muted);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.appt-filter-tabs button.is-active b { background: rgba(255,255,255,.18); color: #fff; }
.appt-search-label { display: grid; gap: 4px; min-width: min(280px, 100%); }
.appt-search-label span { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.appt-search-label .sheet-search { width: 100%; }
.appt-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.appt-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 248px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  box-shadow: 0 3px 12px rgba(20, 30, 48, 0.07);
  cursor: pointer;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out;
}
.appt-card:hover { border-color: var(--line-strong); box-shadow: 0 7px 20px rgba(20, 30, 48, 0.11); transform: translateY(-1px); }
.appt-card:focus-within { border-color: var(--brand); }
.appt-card.is-mine { border-color: color-mix(in srgb, #5c940d 68%, var(--line)); }
.appt-card.is-draft { border-style: dashed; background: var(--panel-subtle); }
.appt-card-main { display: flex; flex: 1; flex-direction: column; gap: 10px; min-width: 0; }
.appt-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.appt-card-top h2 { margin: 0 0 3px; color: var(--ink); font-size: 1rem; line-height: 1.2; letter-spacing: -0.01em; }
.appt-card-top p { margin: 0; color: var(--muted); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.appt-lane-label {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}
.appt-lane-call_now .appt-lane-label { background: #fff0e8; color: #a33d00; }
.appt-lane-review .appt-lane-label { background: #fff4d6; color: #7a5200; }
.appt-lane-waiting .appt-lane-label { background: #edf2ff; color: #3654a3; }
.appt-lane-scheduled .appt-lane-label { background: #e6fcf5; color: #087f5b; }
.appt-lane-closed .appt-lane-label { background: var(--panel-subtle); color: var(--muted); }
.appt-next { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.appt-next > div:first-child { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 0.88rem; }
.appt-lane-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.appt-next-call_now .appt-lane-dot { background: #e8590c; }
.appt-next-review .appt-lane-dot { background: #d39e00; }
.appt-next-waiting .appt-lane-dot { background: #4c6ef5; }
.appt-next-scheduled .appt-lane-dot { background: #0ca678; }
.appt-next p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.4; }
.appt-next-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: 0.72rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.appt-meta { display: flex; flex-wrap: wrap; gap: 5px 12px; color: var(--ink-soft); font-size: 0.76rem; }
.appt-card-pills { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 5px; max-width: none; }
.appt-language-pill, .appt-owner-pill, .appt-source-pill, .appt-mine-pill, .appt-owner-missing, .appt-flag-pill, .appt-schedule-pill { white-space: nowrap; border: 1px solid transparent; }
.appt-language-spanish { background: #e7f5ff; color: #0759b8; border-color: #a5d8ff; }
.appt-language-vietnamese { background: #e8f7ed; color: #147545; border-color: #a9dfbf; }
.appt-language-korean { background: #fff0f0; color: #ba1b1d; border-color: #ffc9c9; }
.appt-owner-pill, .appt-source-pill { background: var(--panel-subtle); color: var(--ink-soft); border-color: var(--line); }
.appt-mine-pill { background: #e9fac8; color: #3f6212; border-color: #b2d76b; }
.appt-owner-missing { background: #fff0d6; color: #8a5700; border-color: #ffd08a; }
.appt-flag-info, .appt-schedule-ascend { background: #e6fcf5; color: #087f5b; border-color: #96f2d7; }
.appt-flag-warning, .appt-schedule-manual { background: #fff4e6; color: #8a5700; border-color: #ffd8a8; }
.appt-notes-preview { margin: 0; overflow: hidden; color: var(--muted); font-size: 0.79rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.appt-chart-suggest { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--ink); }
.appt-chart-suggest.appt-chart-ambi { background: transparent; }
.appt-chart-ok { color: var(--ok, #1a7f37); font-weight: 700; }
.lab-btn-mini { min-height: 0; padding: 1px 8px; font-size: 0.72rem; line-height: 1.6; }
.appt-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.appt-card-actions .lab-btn { display: inline-flex; flex: 1 1 130px; align-items: center; justify-content: center; min-height: 38px; padding: 7px 10px; line-height: 1.2; text-align: center; text-decoration: none; white-space: normal; }
/* "Close case" / "Reopen": a small secondary button on the same row as the primary actions, not a full-width one. */
.appt-card-actions .appt-close-btn { flex: 0 0 auto; min-width: 0; min-height: 38px; padding: 7px 12px; color: var(--ink-soft); }
.appt-close-dialog { width: min(440px, calc(100vw - 28px)); padding: 18px 18px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-raised, var(--panel)); color: var(--ink); box-shadow: 0 18px 50px rgba(0,0,0,.28); }
.appt-close-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.appt-close-dialog h3 { margin: 0 0 2px; font-size: 1rem; }
.appt-close-who { margin: 0 0 12px; color: var(--muted); font-size: 0.84rem; overflow-wrap: anywhere; }
.appt-close-reasons { margin: 0 0 10px; padding: 0; border: 0; }
.appt-close-reasons legend { padding: 0; margin-bottom: 6px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.appt-close-reason { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin-bottom: 4px; border: 1px solid var(--line-subtle, var(--line)); border-radius: 8px; font-size: 0.9rem; cursor: pointer; }
.appt-close-reason { justify-content: flex-start; text-align: left; }
.appt-close-reason input[type="radio"] { flex: 0 0 auto; width: 18px; height: 18px; min-width: 0; min-height: 0; margin: 0; padding: 0; accent-color: var(--brand); }
.appt-close-reason:hover { background: var(--line-subtle, var(--panel-subtle)); }
.appt-close-reason:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.appt-close-note-label { display: block; margin: 8px 0 4px; font-size: 0.82rem; font-weight: 650; }
.appt-close-note-label span { font-weight: 500; color: var(--muted); }
.appt-close-dialog textarea { box-sizing: border-box; width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font: inherit; resize: vertical; }
.appt-close-hint { margin: 8px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.4; }
.appt-close-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.appt-close-actions .lab-btn { min-height: 40px; }
.appt-toast { position: fixed; left: 50%; bottom: 22px; z-index: 300; display: flex; align-items: center; gap: 12px; max-width: min(520px, calc(100vw - 28px)); padding: 10px 14px; transform: translateX(-50%); border-radius: 10px; background: var(--ink); color: var(--panel); font-size: 0.86rem; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.appt-toast[hidden] { display: none; }
.appt-toast-action { padding: 4px 10px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
@media (max-width: 560px) { .appt-card-actions .appt-close-btn { min-height: 44px; } .appt-close-reason { padding: 11px 10px; } }
.appt-card-actions .appt-undo-merge { border-color: #ffd8a8; background: #fff4e6; color: #8a5700; }
.appt-empty { grid-column: 1 / -1; padding: 54px 20px; border: 1px dashed var(--line); border-radius: var(--radius-md); color: var(--muted); text-align: center; }
.appt-empty strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 0.95rem; }
.appt-empty p { margin: 0; font-size: 0.82rem; }
.appt-modal-panel { width: min(700px, calc(100vw - 28px)); }
.appt-readonly-panel {
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100vh - 32px));
  overflow: hidden;
}
.appt-readonly-panel .gate-modal-header { flex: 0 0 auto; align-items: flex-start; }
.appt-readonly-panel .gate-modal-header > div { min-width: 0; }
.appt-readonly-panel .gate-modal-close { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.appt-patient-summary { margin-top: 8px; }
.appt-patient-facts { display: flex; flex-wrap: wrap; gap: 5px 14px; color: var(--ink-soft); font-size: 0.76rem; }
.appt-patient-facts span { display: inline-flex; gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.appt-patient-facts b { color: var(--muted); font-size: 0.68rem; letter-spacing: .03em; text-transform: uppercase; }
.appt-existing-note { color: var(--ink-soft); font-size: 0.78rem; line-height: 1.35; }
.appt-existing-note summary { width: max-content; color: var(--muted); cursor: pointer; font-weight: 700; }
.appt-existing-note p { margin: 5px 0 0; overflow-wrap: anywhere; }
.appt-detail-body { display: grid; gap: 13px; min-height: 0; overflow: auto; padding: 14px 18px 18px; }
.appt-detail-section { display: grid; gap: 7px; min-height: 0; }
.appt-detail-section h3 { margin: 0; color: var(--ink); font-size: 0.82rem; }
.appt-workflow-detail { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.appt-workflow-detail:empty { display: none; }
.appt-workflow-detail-head { display: grid; gap: 5px; }
.appt-workflow-detail-head > div { display: flex; align-items: center; gap: 9px; }
.appt-workflow-detail-head strong { color: var(--ink); font-size: 0.9rem; }
.appt-workflow-detail-head p { margin: 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.4; }
.appt-workflow-detail-head small { color: var(--muted); font-size: 0.72rem; font-weight: 650; }
.appt-evidence-list, .appt-events { display: grid; gap: 7px; max-height: 220px; overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-subtle); scrollbar-color: var(--line-strong) transparent; }
.appt-evidence-item, .appt-event { padding: 7px 8px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--panel); }
.appt-evidence-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.appt-evidence-item b { color: var(--ink); font-size: 0.78rem; }
.appt-evidence-item time { color: var(--muted); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.appt-evidence-item p, .appt-event p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.79rem; line-height: 1.35; }
.appt-evidence-transcript { background: color-mix(in srgb, var(--panel) 90%, var(--brand-soft)); }
.appt-comm-empty { padding: 10px; border: 1px dashed var(--line); border-radius: var(--radius-md); background: var(--panel-subtle); color: var(--muted); font-size: 0.8rem; }
.appt-comm-detail { display: grid; gap: 7px; max-height: 220px; overflow: auto; padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-subtle); }
.appt-comm-detail > div { padding: 7px 8px; border: 1px solid var(--line-subtle); border-radius: 8px; background: var(--panel); }
.appt-comm-detail b { margin-right: 8px; color: var(--ink); font-size: 0.78rem; }
.appt-comm-detail span, .appt-comm-detail small, .appt-event b { color: var(--muted); font-size: 0.73rem; }
.appt-comm-detail small { display: block; margin-top: 3px; }
.appt-comm-detail p { margin: 4px 0 0; color: var(--ink-soft); font-size: 0.79rem; line-height: 1.35; }
.appt-event b { display: block; margin-bottom: 3px; }
.appt-event-empty { color: var(--muted); font-size: 0.8rem; }
.appt-note-form { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.appt-note-form > label { color: var(--ink); font-size: 0.78rem; font-weight: 750; }
.appt-note-form > div { display: flex; align-items: stretch; gap: 8px; }
.appt-note-form textarea { flex: 1 1 auto; width: 100%; min-height: 56px; max-height: 90px; resize: vertical; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 8px 10px; background: var(--panel); color: var(--ink); font: inherit; font-size: 0.82rem; }
.appt-note-form .lab-btn { flex: 0 0 auto; min-width: 92px; }
.appt-note-form .gate-status:empty { display: none; }
.appt-history { padding-top: 1px; }
.appt-history summary { display: flex; align-items: center; width: max-content; min-height: 44px; color: var(--muted); cursor: pointer; font-size: 0.76rem; font-weight: 700; }
.appt-history[open] summary { margin-bottom: 7px; color: var(--ink-soft); }
.appt-history .appt-events { max-height: 180px; }

@media (max-width: 820px) {
  .appt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appt-stats button { border-bottom: 1px solid var(--line); }
  .appt-stats button:nth-child(2n) { border-right: 0; }
  .appt-stats button:last-child { grid-column: 1 / -1; border-bottom: 0; }
  .appt-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .appt-intro { align-items: stretch; flex-direction: column; gap: 12px; }
  .appt-intro .lab-btn { justify-content: center; min-height: 44px; }
  .appt-toolbar { align-items: stretch; flex-direction: column; }
  .appt-filter-tabs { width: 100%; }
  .appt-filter-tabs button { min-height: 44px; }
  .appt-search-label { width: 100%; }
  .appt-card { min-height: 0; }
  .appt-card-actions .lab-btn { min-height: 44px; }
  .appt-evidence-item > div { align-items: flex-start; flex-direction: column; gap: 2px; }
  .appt-readonly-panel { width: calc(100vw - 16px); max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); box-sizing: border-box; }
  .appt-detail-body { padding: 12px 14px 16px; }
  .appt-patient-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; }
  .appt-patient-facts span { display: grid; gap: 1px; }
  .appt-evidence-list, .appt-comm-detail { max-height: 175px; }
  .appt-note-form > div { min-width: 0; flex-direction: column; }
  .appt-note-form textarea { box-sizing: border-box; min-width: 0; }
  .appt-note-form .lab-btn { min-height: 44px; }
  .appt-existing-note summary { display: flex; align-items: center; min-height: 44px; }
}

/* ── Lab Cases / Implant Planning tracker ───────────────────────────────── */
/* Segmented controls (board switcher + board/table view toggle). */
.lab-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.lab-seg button {
  font: inherit; font-size: 0.85rem; font-weight: 600; padding: 7px 16px; border: 0;
  background: var(--panel); color: var(--muted); cursor: pointer; white-space: nowrap;
}
.lab-seg button + button { border-left: 1px solid var(--line-strong); }
.lab-seg button.is-active { background: var(--brand); color: #fff; }

.lab-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lab-toolbar .lab-spacer { flex: 1; }
.lab-toolbar .sheet-search { min-width: 180px; }

.lab-offline {
  display: none; font-size: 0.82rem; color: #9a6a00;
  background: #fff7e6; border: 1px solid #f0d9a8; border-radius: var(--radius-md); padding: 8px 14px;
}
.lab-offline.is-shown { display: block; }

/* Board: three meaning-based sections; cards sit side by side within each section. */
.lab-board { display: flex; flex-direction: column; gap: 18px; }
.lab-section {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel-subtle);
  padding: 12px; display: flex; flex-direction: column; gap: 12px;
}
.lab-section-attention { border-color: #f0c0bb; }
.lab-section-complete { opacity: 0.82; }
.lab-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lab-section-head h2 {
  margin: 0; font-size: 0.86rem; font-weight: 750; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.lab-section-head span {
  font-size: 0.75rem; font-weight: 700; color: var(--muted); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 9px;
}
.lab-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); gap: 12px; align-items: stretch; }
.lab-empty { font-size: 0.82rem; color: var(--muted); padding: 6px 2px; }
.lab-action-dashboard {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.lab-action-dashboard button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--panel); color: var(--ink-soft); cursor: pointer; text-align: left;
}
.lab-action-dashboard button.is-active { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.lab-action-dashboard b { font-size: 0.8rem; }
.lab-action-dashboard span { font-size: 0.78rem; font-weight: 800; color: var(--muted); }

.lab-message-panel {
  margin: 0 0 12px; padding: 12px; border: 1px solid #f0c0bb; border-radius: var(--radius-md);
  background: #fff7f5; display: flex; flex-direction: column; gap: 10px;
}
.lab-message-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lab-message-panel-head div { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.lab-message-panel-head b { font-size: 0.88rem; color: #9d2f23; }
.lab-message-panel-head span { font-size: 0.78rem; font-weight: 750; color: #9d2f23; }
.lab-message-list { display: flex; flex-direction: column; gap: 7px; }
.lab-message-item {
  display: grid; grid-template-columns: minmax(120px, 0.85fr) minmax(180px, 1.15fr) minmax(220px, 2fr) auto;
  align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px;
  border: 1px solid #f1d0ca; border-radius: 7px; background: var(--panel); color: var(--ink-soft);
  font: inherit; text-align: left; cursor: pointer;
}
.lab-message-item:hover { border-color: #db7a70; box-shadow: 0 0 0 3px rgba(216, 74, 58, 0.12); }
.lab-message-patient { font-size: 0.84rem; font-weight: 750; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-message-case, .lab-message-time { font-size: 0.77rem; font-weight: 650; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-message-preview { font-size: 0.82rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-message-time { text-align: right; }
.lab-message-more { font-size: 0.76rem; font-weight: 650; color: #9d2f23; }

.lab-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); min-height: 190px; }
.lab-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lab-card-name { font-weight: 650; color: var(--ink); font-size: 0.92rem; }
.lab-card-sub { font-size: 0.78rem; color: var(--muted); }
.lab-card-sub .lab-stage-pill { font-size: 0.7rem; padding: 2px 8px; vertical-align: middle; }
.lab-card-alerts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; flex: 0 0 auto; }
.lab-alert-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px;
  padding: 3px 8px; border-radius: var(--radius-pill);
  background: #fff1ef; color: #b8392b; border: 1px solid #f0c0bb;
  font-size: 0.72rem; font-weight: 750; white-space: nowrap;
}
.lab-alert-badge b {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  border-radius: 999px; background: #b8392b; color: #fff; font-size: 0.68rem;
}
.lab-alert-badge-due { background: #fff7e6; color: #8a6100; border-color: #efd8a8; }
.lab-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 0.79rem; color: var(--ink-soft); }
.lab-card-meta b { color: var(--ink); font-weight: 600; }
.lab-card-appt { color: #1c8a4b; }
.lab-card-appt-unrelated { color: #8a6100; font-weight: 600; }
.lab-card-warning { color: #b8392b; font-weight: 700; }
.lab-card-freshness { color: var(--muted); }
.lab-card-asof { color: var(--muted); font-size: 0.85em; opacity: 0.8; }
.lab-sync-stamp { color: var(--muted); font-size: 0.8em; margin-bottom: 8px; }
.lab-sync-refreshing { font-style: italic; opacity: 0.75; }
.lab-card-due.is-overdue { color: #c0392b; font-weight: 600; }
.lab-auto { color: var(--muted); font-style: italic; }
.lab-track { color: var(--brand); text-decoration: none; }
.lab-track:hover { text-decoration: underline; }
.lab-signal-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; margin-top: 5px; background: var(--muted); }
.lab-signal-attention { background: #d84a3a; }
.lab-signal-watch { background: #d49100; }
.lab-signal-progress { background: #4f6cff; }
.lab-signal-good { background: #2da660; }
.lab-signal-done { background: #8b91a0; }
.lab-next {
  border: 1px solid var(--line-subtle); border-radius: 7px; padding: 8px 9px;
  display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; line-height: 1.3;
}
.lab-next b { font-size: 0.82rem; }
/* Lab tone boxes */
.lab-next span { color: inherit; opacity: 0.82; }
.lab-next-attention { background: #fff1ef; border-color: #f0c0bb; color: #b8392b; }
.lab-next-watch { background: #fff7e6; border-color: #efd8a8; color: #8a6100; }
.lab-next-progress { background: #eef1ff; border-color: #cfd6ff; color: #3c57e6; }
.lab-next-good { background: #e9f8ee; border-color: #c9dfcf; color: #1c6b3a; }
.lab-next-done { background: #f0f1f5; border-color: #d7dae2; color: #5b6270; }

[data-theme="dark"] .lab-message-panel { background: rgba(216, 74, 58, 0.1); border-color: rgba(216, 74, 58, 0.25); }
[data-theme="dark"] .lab-message-panel-head b, [data-theme="dark"] .lab-message-panel-head span, [data-theme="dark"] .lab-message-more { color: #fca5a5; }
[data-theme="dark"] .lab-message-item { border-color: rgba(216, 74, 58, 0.2); }
[data-theme="dark"] .lab-message-item:hover { border-color: #fca5a5; box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.15); }

[data-theme="dark"] .lab-alert-badge { background: rgba(216, 74, 58, 0.15); color: #fca5a5; border-color: rgba(216, 74, 58, 0.3); }
[data-theme="dark"] .lab-alert-badge b { background: rgba(216, 74, 58, 0.8); color: #fff; }
[data-theme="dark"] .lab-alert-badge-due { background: rgba(212, 145, 0, 0.15); color: #fcd34d; border-color: rgba(212, 145, 0, 0.3); }

[data-theme="dark"] .lab-next-attention { background: rgba(216, 74, 58, 0.15); color: #fca5a5; border-color: rgba(216, 74, 58, 0.3); }
[data-theme="dark"] .lab-next-watch { background: rgba(212, 145, 0, 0.15); color: #fcd34d; border-color: rgba(212, 145, 0, 0.3); }
[data-theme="dark"] .lab-next-progress { background: rgba(60, 87, 230, 0.15); color: #93c5fd; border-color: rgba(60, 87, 230, 0.3); }
[data-theme="dark"] .lab-next-good { background: rgba(28, 107, 58, 0.15); color: #86efac; border-color: rgba(28, 107, 58, 0.3); }
[data-theme="dark"] .lab-next-done { background: rgba(91, 98, 112, 0.15); color: #cbd5e1; border-color: rgba(91, 98, 112, 0.3); }
.lab-card-status { display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 0.78rem; color: var(--muted); }
.lab-card-status span { font-weight: 650; }
.lab-card-status select {
  min-height: 30px; height: 30px; width: auto; max-width: 170px; flex: 1;
  border-radius: var(--radius-pill); padding: 3px 26px 3px 10px; font: inherit; font-weight: 650;
  border: 1px solid var(--line-strong); background-color: var(--panel); color: var(--ink-soft);
}
.lab-status-select.pill-sent { background-color: #ffe8a8; color: #4b3510; border-color: #e9c96d; }
.lab-status-select.pill-received { background-color: #c9e6fb; color: #0759b8; border-color: #9dccec; }
.lab-status-select.pill-received-implant { background-color: #14814f; color: #fff; border-color: #14814f; }
.lab-status-select.pill-approval { background-color: #ffd1d1; color: #c40000; border-color: #efa9a9; }
.lab-status-select.pill-delayed { background-color: #c00000; color: #fff; border-color: #c00000; }
.lab-status-select.pill-ordered { background-color: #d948df; color: #1d0020; border-color: #c63acc; }
.lab-status-select.pill-rendered { background-color: #cceec1; color: #087543; border-color: #abd99d; }
.lab-status-select.pill-rendered-implant { background-color: #1260b3; color: #fff; border-color: #1260b3; }
.lab-status-select.pill-not-ready { background-color: #3d3d3d; color: #fff; border-color: #3d3d3d; }
.lab-status-select.pill-ready-restore { background-color: #e1c6f5; color: #6f3da6; border-color: #cfa8eb; }
.lab-status-select.pill-osseo, .lab-status-select.pill-complete { background-color: #ececec; color: #222; border-color: #d5d5d5; }
.lab-status-select.pill-seated { background-color: #6d4297; color: #fff; border-color: #6d4297; }
.lab-status-select.pill-restored { background-color: #14814f; color: #fff; border-color: #14814f; }
.lab-status-select.pill-refund { background-color: #ffc9c2; color: #d10000; border-color: #eda9a1; }
.lab-card-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.lab-btn {
  font: inherit; font-size: 0.78rem; font-weight: 600; padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink-soft); cursor: pointer;
  white-space: nowrap;
}
.lab-btn:hover { background: var(--panel-subtle); }
.lab-btn-primary { border-color: var(--brand); background: var(--brand); color: #fff; }
.lab-btn-primary:hover { background: var(--brand-hover); }
.lab-loading { color: var(--muted); padding: 24px 4px; }

.lab-reply-panel { width: min(720px, calc(100vw - 28px)); }
.lab-reply-context {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px;
}
.lab-reply-context div {
  border: 1px solid var(--line); border-radius: 7px; background: var(--panel-subtle);
  padding: 8px 10px; min-width: 0;
}
.lab-reply-context span {
  display: block; margin-bottom: 2px; font-size: 0.72rem; font-weight: 750; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.lab-reply-context b {
  display: block; font-size: 0.83rem; color: var(--ink); overflow-wrap: anywhere; line-height: 1.25;
}
.lab-quick-thread { max-height: min(42vh, 360px); overflow: auto; margin-bottom: 12px; }
.lab-quick-reply-form textarea { min-height: 96px; }

/* Edit / dictionaries modal: reuse the gate-modal shell, add a simple form grid. */
.lab-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.lab-field { display: flex; flex-direction: column; gap: 4px; }
.lab-field.lab-field-wide { grid-column: 1 / -1; }
.lab-field label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); }
.lab-field .lab-hint { font-size: 0.76rem; color: var(--muted); font-weight: 400; }
.lab-field select { width: 100%; min-width: 0; }
#uStatus { min-width: 220px; }
.lab-chart-row { display: flex; gap: 8px; }
.lab-chart-row input { flex: 1; }
.lab-vendor-row { display: flex; gap: 8px; align-items: center; }
.lab-vendor-row select { flex: 1; }
.lab-check { flex-direction: row; align-items: center; gap: 8px; }
/* The global input rule sizes ALL inputs — reset checkboxes back to native. */
.lab-form input[type="checkbox"] { width: auto; min-height: 0; height: auto; border: 0; border-radius: 0; background: none; flex: none; margin: 0; accent-color: var(--brand); }
.lab-resolved { font-size: 0.8rem; color: #1c8a4b; min-height: 1.1em; }
.lab-resolved.is-error { color: #c0392b; }
.lab-itero-meta {
  padding: 8px 10px; border: 1px solid var(--line-subtle); border-radius: 7px;
  background: var(--panel-subtle); color: var(--ink-soft); font-size: 0.8rem;
}
.lab-field input[readonly] { background: var(--panel-subtle); color: var(--ink-soft); }
.lab-form-footer { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.lab-form-footer .lab-spacer { flex: 1; }
.lab-danger { border-color: #e0b4ae; color: #c0392b; }
.lab-danger:hover { background: #fdecec; }
.lab-update-panel { width: min(680px, calc(100vw - 28px)); }
.lab-accounts-panel { width: min(820px, calc(100vw - 28px)); }
.lab-account-form {
  display: grid; grid-template-columns: minmax(180px, 1.1fr) minmax(190px, 1fr) minmax(150px, .8fr) auto;
  gap: 10px; align-items: end; margin-bottom: 14px;
}
.lab-account-form-actions { display: flex; gap: 6px; align-items: center; }
.lab-accounts-body { display: flex; flex-direction: column; gap: 10px; }
.lab-account-group {
  border: 1px solid var(--line-subtle); border-radius: 7px; background: var(--panel);
  overflow: hidden;
}
.lab-account-group-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 11px; background: var(--panel-subtle); border-bottom: 1px solid var(--line-subtle);
}
.lab-account-group-head b { color: var(--ink); font-size: .88rem; overflow-wrap: anywhere; }
.lab-account-group-head span { color: var(--muted); font-size: .76rem; font-weight: 700; white-space: nowrap; }
.lab-account-row {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(210px, 1.1fr) minmax(95px, auto) auto;
  gap: 10px; align-items: center; padding: 10px 11px; border-top: 1px solid var(--line-subtle);
}
.lab-account-group-head + .lab-account-row { border-top: 0; }
.lab-account-main, .lab-account-email { min-width: 0; }
.lab-account-main b, .lab-account-email b {
  display: block; color: var(--ink); font-size: .88rem; overflow-wrap: anywhere;
}
.lab-account-main span, .lab-account-email span { display: block; color: var(--muted); font-size: .78rem; overflow-wrap: anywhere; }
.lab-account-status {
  justify-self: start; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 3px 8px; color: var(--ink-soft); background: var(--panel-subtle); font-size: .75rem; font-weight: 700;
}
.lab-account-status.is-active { border-color: #b8ddc7; color: #176a38; background: #edf8f1; }
.lab-account-status.is-test { border-color: #ead3a2; color: #795400; background: #fff7df; }
.lab-account-actions { display: flex; justify-content: flex-end; gap: 6px; }
.lab-account-empty { padding: 10px 11px; color: var(--muted); font-size: .82rem; }
.lab-choices-label { margin: 14px 0 6px; font-size: 0.82rem; color: var(--muted); }
.lab-update-choices {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px;
  margin-top: 2px;
  margin-bottom: 12px;
}
/* Live iTero milestone — a read-only signal shown SEPARATELY from office status. */
.lab-itero-signal {
  margin: 0 0 12px; padding: 7px 11px; border: 1px dashed var(--line);
  border-radius: 7px; background: var(--panel-subtle); color: var(--ink-soft);
  font-size: 0.8rem; font-weight: 600;
}
/* Office status/stage is set by the buttons above; this override stays collapsed. */
.lab-itero-signal.lab-itero-inline { display: inline-block; margin: 6px 0 0; padding: 3px 9px; font-size: 0.74rem; }
.lab-status-override { margin-top: 10px; }
.lab-status-override > summary {
  cursor: pointer; font-size: 0.82rem; color: var(--muted); padding: 4px 0;
  list-style: none; user-select: none;
}
.lab-status-override > summary::-webkit-details-marker { display: none; }
.lab-status-override > summary::before { content: "▸ "; color: var(--muted); }
.lab-status-override[open] > summary::before { content: "▾ "; }
.lab-update-choices button {
  min-height: 36px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--panel-subtle); color: var(--ink-soft); font: inherit; font-size: 0.8rem;
  font-weight: 650; cursor: pointer;
}
.lab-update-choices button.is-active { border-color: var(--brand); background: var(--brand); color: #fff; }
.lab-update-preview {
  margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line-subtle);
  border-radius: 7px; background: var(--panel-subtle); color: var(--muted); font-size: 0.82rem;
}

/* Live detail modal: facts from Dentrix/Glidewell plus staff notes. */
.lab-detail-panel { width: min(820px, calc(100vw - 28px)); }
.lab-detail-body { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.lab-current-action {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid #c9dfcf; border-radius: var(--radius-md);
  background: #edf8f0; color: #1c6b3a;
}
.lab-current-action div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.lab-current-action span { font-size: 0.75rem; font-weight: 800; text-transform: uppercase; color: #2b7d45; }
.lab-current-action b { font-size: 0.9rem; line-height: 1.3; }
.lab-detail-summary {
  padding: 12px 14px; border: 1px solid #c9dfcf; border-radius: var(--radius-md);
  background: #edf8f0; color: #1c6b3a; font-weight: 650; line-height: 1.35;
}
.lab-completion-evidence {
  padding: 12px 14px; border: 1px solid #c9dfcf; border-radius: var(--radius-md);
  background: #f4fbf5; color: #245d34; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; align-items: center;
  font-size: 0.84rem;
}
.lab-completion-evidence b { grid-column: 1 / -1; color: #1c6b3a; }
.lab-completion-evidence span { color: var(--ink-soft); min-width: 0; }
.lab-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lab-detail-section {
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel);
  padding: 12px; display: flex; flex-direction: column; gap: 9px;
}
.lab-detail-section.lab-detail-wide { grid-column: 1 / -1; }
.lab-detail-section h3 {
  margin: 0; font-size: 0.82rem; font-weight: 750; color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.lab-section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lab-section-title-row h3 { min-width: 0; }
.lab-section-badges { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.lab-portal-section { border-color: #cfe3d5; }
.lab-facts { display: grid; grid-template-columns: max-content 1fr; gap: 5px 10px; font-size: 0.84rem; }
.lab-facts dt { color: var(--muted); font-weight: 650; }
.lab-facts dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.lab-note-list { display: flex; flex-direction: column; gap: 8px; }
.lab-timeline { display: flex; flex-direction: column; gap: 8px; }
.lab-timeline-item {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px;
  padding: 9px 10px; border: 1px solid var(--line-subtle); border-radius: 7px;
  background: var(--panel-subtle); font-size: 0.83rem;
}
.lab-timeline-date { color: var(--muted); font-weight: 750; }
.lab-timeline-item b { display: block; color: var(--ink); margin-bottom: 2px; }
.lab-timeline-item em { display: block; color: var(--muted); font-style: normal; font-size: 0.76rem; margin-bottom: 3px; }
.lab-timeline-item span { color: var(--ink-soft); line-height: 1.35; }
.lab-timeline-current { border-color: #c9dfcf; }
.lab-timeline-prior { opacity: 0.82; }
.lab-timeline-portal, .lab-timeline-itero { border-color: #cfe3d5; background: #f5fbf7; }
.lab-portal-thread { display: flex; flex-direction: column; gap: 8px; }
.lab-portal-message {
  display: grid; grid-template-columns: minmax(120px, 0.34fr) minmax(0, 1fr); gap: 10px;
  padding: 9px 10px; border: 1px solid var(--line-subtle); border-radius: 7px;
  background: var(--panel-subtle); font-size: 0.83rem;
}
.lab-portal-message b { display: block; color: var(--ink); margin-bottom: 2px; }
.lab-portal-message em { display: block; color: var(--muted); font-style: normal; font-size: 0.76rem; }
.lab-portal-message span { color: var(--ink-soft); line-height: 1.35; overflow-wrap: anywhere; }
.lab-portal-message.is-staff { border-color: #cfe3d5; background: #f5fbf7; }
[data-theme="dark"] .lab-portal-message.is-staff {
  border-color: rgba(28, 107, 58, 0.38); background: rgba(28, 107, 58, 0.16);
}
[data-theme="dark"] .lab-portal-message.is-staff b { color: #d7f2df; }
.lab-portal-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.lab-portal-attachments a {
  display: inline-flex; align-items: center; max-width: 100%;
  padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--border, #d8dde6); background: var(--surface, #fff);
  color: var(--ink, #222); font-size: 0.76rem; font-weight: 750;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lab-portal-reply { display: grid; gap: 8px; margin-top: 2px; }
.lab-portal-reply textarea { width: 100%; resize: vertical; min-height: 58px; }
.lab-portal-reply div { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.lab-note {
  padding: 9px 10px; border: 1px solid var(--line-subtle); border-radius: 7px;
  background: var(--panel-subtle); font-size: 0.83rem; line-height: 1.38;
}
.lab-note-date { color: var(--muted); font-weight: 700; margin-bottom: 3px; }
.lab-detail-empty { color: var(--muted); font-size: 0.84rem; }
.lab-order-list { display: flex; flex-direction: column; gap: 8px; }
.lab-order {
  display: flex; flex-direction: column; gap: 5px; padding: 9px 10px;
  border: 1px solid var(--line-subtle); border-radius: 7px; background: var(--panel-subtle);
}
.lab-order-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 0.84rem; font-weight: 700; }
.lab-order-meta { color: var(--ink-soft); font-size: 0.8rem; line-height: 1.35; }
.lab-chain-note {
  font-size: 0.8rem; color: var(--ink-soft); background: var(--panel-subtle);
  border: 1px solid var(--line-subtle); border-radius: 7px; padding: 8px 10px;
}
.lab-order-role {
  display: inline-flex; width: fit-content; padding: 2px 8px;
  border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 750;
}
.lab-order-role-current { background: #e9f8ee; color: #1c6b3a; }
.lab-order-role-prior { background: #f0f1f5; color: #5b6270; }

/* Dictionaries editor: one row per editable list. */
.lab-dict-row { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; border-bottom: 1px solid var(--line-subtle); }
.lab-dict-row label { font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.lab-dict-row textarea { min-height: 0; }
.lab-chip-list { display: flex; flex-wrap: wrap; gap: 7px; }
.lab-dict-row label.lab-exclude-item {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-subtle);
  color: var(--ink-soft); padding: 4px 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.lab-exclude-item input { margin: 0; cursor: pointer; flex: none; width: 15px; height: 15px; min-height: 0; padding: 0; }
.lab-dict-hint { font-size: 0.75rem; color: var(--ink-faint); margin: 2px 0 0; font-weight: 400; }
.lab-itero-order { border: 1px solid var(--line-subtle); border-radius: var(--radius); padding: 9px 11px; margin-top: 8px; }
.lab-itero-order:first-of-type { margin-top: 0; }
.lab-itero-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 4px; }
.lab-itero-order-num { font-size: 0.78rem; color: var(--ink-faint); font-weight: 600; }
.lab-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--panel-subtle);
  color: var(--ink-soft); padding: 4px 9px; font-size: 0.8rem; font-weight: 650;
}
.lab-chip-readonly { opacity: 0.72; }
.lab-chip button {
  width: 18px; height: 18px; min-height: 0; padding: 0; border: 0; border-radius: 999px;
  background: var(--panel); color: var(--muted); cursor: pointer; font: inherit; line-height: 1;
}
.lab-chip button:hover { color: #c0392b; }
.lab-dict-add { display: flex; gap: 8px; margin-top: 4px; }
.lab-dict-add input { flex: 1; min-width: 0; }

@media (max-width: 560px) {
  .lab-form, .lab-detail-grid, .lab-account-form, .lab-account-row { grid-template-columns: 1fr; }
  .lab-account-form-actions { justify-content: flex-start; flex-wrap: wrap; }
  .lab-account-actions { justify-content: flex-start; }
  .lab-message-item {
    grid-template-columns: 1fr;
    gap: 3px;
    align-items: start;
  }
  .lab-message-patient, .lab-message-case, .lab-message-preview, .lab-message-time {
    white-space: normal;
    text-align: left;
  }
  .lab-reply-context { grid-template-columns: 1fr; }
  .lab-facts { grid-template-columns: 1fr; }
  .lab-portal-message { grid-template-columns: 1fr; }
}

/* ── Ortho TC Tracker ─────────────────────────────────────────────────────── */
.tc-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.82em; color: var(--ink-soft); }
.tc-muted { color: var(--muted); font-size: 0.82rem; }
.tc-flag { color: #c0392b; cursor: help; }
.tc-overdue { color: #c0392b; font-weight: 650; }
.tc-lang { font-weight: 600; color: var(--ink-soft); }
.tc-lang-sug { font-weight: 500; color: var(--muted); font-style: italic; }
.tc-discrepancy { color: #8a5a00; font-size: 0.78rem; font-weight: 600; margin-left: 6px; }
.tc-pname { font-weight: 600; color: var(--ink); }
.tc-psub { font-size: 0.72rem; margin-top: 1px; }
.tc-date { display: inline-block; min-width: 104px; white-space: nowrap; color: var(--ink-soft); }
.tc-appt {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.tc-appt span {
  display: block;
  max-width: 100%;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-appt small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: normal;
}
.tc-status-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: 100%; }
.tc-status-cell span:not(.tc-pill) { color: var(--muted); font-size: 0.78rem; line-height: 1.2; white-space: nowrap; }
.tc-board-observation .tc-status-cell span:not(.tc-pill) { white-space: normal; overflow-wrap: break-word; }
.tc-pill.tc-cold { background: var(--panel-subtle); color: var(--muted); border-color: var(--line-strong); }
.tc-row-cold td { opacity: 0.62; }
.tc-row-cold:hover td { opacity: 1; }
.tc-intake-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
/* Intake now leads the Follow-up board as its own panel above the table. */
.tc-intake-section { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2, var(--panel)); padding: 12px 14px; margin-bottom: 16px; }
.tc-intake-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.tc-intake-title { margin: 0 0 2px; font-size: 0.95rem; }
.tc-intake-empty { padding: 6px 0; font-size: 0.85rem; }
.tc-intake-meta { color: var(--muted); font-size: 0.78rem; margin: -2px 0 8px; }
/* Honest board provenance caption + per-patient live/saved freshness stamp. */
.tc-board-note { margin: -2px 0 12px; font-size: 0.8rem; color: var(--muted); }
.tc-obs-head { margin: 0 0 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-sm); }
.page-body, #tcContent, .lab-toolbar, .tc-obs-head, .tc-obs-heading > div { min-width: 0; max-width: 100%; box-sizing: border-box; }
.tc-obs-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tc-obs-heading h2 { margin: 0 0 4px; color: var(--ink); font-size: 1.12rem; letter-spacing: -0.01em; }
.tc-obs-heading p { margin: 0; max-width: 72ch; color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.tc-obs-heading .lab-btn { min-height: 40px; white-space: nowrap; }
.tc-obs-fresh { display: flex; align-items: center; gap: 7px; min-height: 22px; margin: 12px 0; color: var(--ink-soft); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.tc-fresh-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #11804e; box-shadow: 0 2px 5px rgba(17,128,78,0.22); }
.tc-obs-progress { margin-left: auto; color: var(--muted); }
.tc-obs-filters { display: flex; max-width: 100%; gap: 7px; overflow-x: auto; padding: 2px 1px 3px; scrollbar-width: thin; }
.tc-obs-filters button { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-subtle); color: var(--ink-soft); font: inherit; font-size: 0.78rem; white-space: nowrap; cursor: pointer; }
.tc-obs-filters button b { min-width: 22px; padding: 1px 6px; border-radius: var(--radius-pill); background: var(--panel); color: var(--ink); font-size: 0.74rem; font-variant-numeric: tabular-nums; text-align: center; }
.tc-obs-filters button:hover { border-color: var(--line-strong); background: var(--brand-soft); }
.tc-obs-filters button.is-active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); font-weight: 650; }
.tc-obs-filters button:focus-visible, .tc-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tc-obs-cycle, .tc-obs-none, .tc-alignment { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.tc-obs-cycle strong, .tc-obs-none strong, .tc-alignment strong { color: var(--ink); font-size: 0.82rem; font-weight: 650; }
.tc-obs-cycle span, .tc-obs-none span, .tc-alignment span { color: var(--muted); font-size: 0.74rem; line-height: 1.25; overflow-wrap: break-word; }
.tc-obs-none strong { color: #9a3333; }
.tc-obs-drawer { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--panel-subtle); }
.tc-obs-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tc-obs-drawer-head h3 { margin: 0 0 3px; padding: 0; border: 0; }
.tc-obs-drawer-head p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.tc-obs-exclusion { margin-top: 12px; padding: 9px 11px; border: 1px solid #efc2c2; border-radius: var(--radius-sm); background: #fff0f0; color: #982828; font-size: 0.82rem; font-weight: 600; }
[data-theme="dark"] .tc-obs-exclusion { border-color: rgba(239,194,194,0.35); background: rgba(152,40,40,0.18); color: #f3bcbc; }
.tc-obs-source-guide { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.tc-obs-source-guide div, .tc-obs-edit-lock { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.tc-obs-source-guide strong, .tc-obs-edit-lock strong { color: var(--ink); font-size: 0.82rem; }
.tc-obs-source-guide span, .tc-obs-edit-lock span { color: var(--muted); font-size: 0.78rem; line-height: 1.4; overflow-wrap: anywhere; }
.tc-obs-source-guide .gate-status { grid-column: 1 / -1; margin: 0; }
.tc-obs-edit-lock { grid-column: 1 / -1; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); }
.tc-edit select:disabled, .tc-edit input:disabled { cursor: not-allowed; opacity: .62; }
@media (max-width: 720px) { .tc-obs-source-guide { grid-template-columns: 1fr; } .tc-obs-source-guide .lab-btn { width: 100%; min-height: 44px; } }
.tc-live-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 2px 0 12px; }
.tc-live-stamp { display: inline-block; margin: 0; padding: 6px 11px; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; }
.tc-live-stamp.tc-muted { background: var(--panel-subtle); color: var(--muted); border: 1px solid var(--line); }
.tc-live-refresh { flex: 0 0 auto; min-height: 34px; }
#tcDrawerBody { min-height: min(560px, calc(85vh - 90px)); }
.tc-drawer-stable-loading { min-height: inherit; padding: 24px 4px; }
@media (max-width: 560px) {
  #tcDrawerBody { min-height: calc(92vh - 54px); }
  .tc-live-row { align-items: stretch; flex-direction: column; }
  .tc-live-refresh { width: 100%; min-height: 44px; }
}
/* Fix chart / link-to-Ascend flow (drawer button + search modal). */
.tc-fix-row { margin: 0 0 14px; }
.tc-link-search { display: flex; gap: 8px; margin: 10px 0; }
.tc-link-search input { flex: 1; font: inherit; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.tc-link-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tc-link-result:last-of-type { border-bottom: 0; }
.tc-link-info b { font-weight: 650; }
.tc-intake-range { font-size: 0.82rem; color: var(--muted); }
.tc-intake-range select, .intake-tc, .tc-who select { font: inherit; font-size: 0.85rem; padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.tc-who { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); }
.tc-who[hidden] { display: none; }
.tc-intake-row { cursor: pointer; }
.tc-intake-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.intake-track { padding: 5px 12px; }
.tc-create-panel { width: min(460px, calc(100vw - 28px)); }
.tc-create-summary { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 6px 0 12px; align-items: baseline; }
.tc-create-summary b { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.tc-create-summary span:last-child { grid-column: 1 / -1; color: var(--muted); font-size: 0.82rem; }
.tc-create-form { background: transparent; padding: 0; border: 0; }

/* Table */
.tc-tablewrap {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.tc-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
}
.tc-table thead th {
  text-align: left; padding: 9px 8px; background: var(--panel-subtle);
  color: var(--muted); font-weight: 650; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-strong); white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.tc-table tbody td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: normal;
  overflow: hidden;
}
.tc-table .tc-col-patient { width: 11%; }
.tc-table .tc-col-exam { width: 10%; }
.tc-table .tc-col-decision { width: 11%; }
.tc-table .tc-col-tx { width: 8%; }
.tc-table .tc-col-stage { width: 9%; }
.tc-table .tc-col-reason { width: 8%; }
.tc-table .tc-col-referral { width: 9%; }
.tc-table .tc-col-lastFollowup,
.tc-table .tc-col-lastVisit,
.tc-table .tc-col-accepted { width: 9%; }
.tc-table .tc-col-nextAppt { width: 11%; }
.tc-table .tc-col-tc { width: 6%; white-space: nowrap; }
.tc-table .tc-col-lang { width: 5%; white-space: nowrap; }
.tc-table .tc-col-attention { width: 11%; }
.tc-table .tc-col-obsStatus { width: 13%; }
.tc-table .tc-col-obsCycle { width: 14%; }
.tc-table .tc-col-nextObs { width: 13%; }
.tc-table .tc-col-otherAppt { width: 12%; }
.tc-table .tc-col-alignment { width: 12%; }
.tc-table.tc-board-observation .tc-col-patient { width: 12%; }
.tc-table.tc-board-observation .tc-col-stage { width: 9%; }
.tc-table.tc-board-observation .tc-col-tc { width: 6%; }
.tc-table td.tc-col-reason,
.tc-table td.tc-col-referral,
.tc-table td.tc-col-tx,
.tc-table td.tc-col-stage {
  overflow-wrap: break-word;
}
.tc-table tbody td:first-child { color: var(--ink); font-weight: 600; }
.tc-table tbody td:last-child, .tc-table thead th:last-child { padding-right: 10px; }
.tc-table tbody tr { cursor: pointer; transition: background 0.1s; }
.tc-table tbody tr:hover { background: var(--brand-soft); }
.tc-table tbody tr:focus { background: var(--brand-soft); }
.tc-table tbody tr:last-child td { border-bottom: 0; }
.tc-load-more { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 12px; color: var(--muted); font-size: 0.82rem; }

/* Pills */
.tc-pill { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 650; line-height: 1.5; border: 1px solid transparent; white-space: nowrap; }
.tc-pill + .tc-muted { margin-left: 6px; }
.tc-ok { background: #e2f5ea; color: #11804e; border-color: #b9e6cd; }
.tc-warn { background: #fdf0d5; color: #8a5a00; border-color: #f1d79b; }
.tc-no { background: #fde3e3; color: #b32626; border-color: #f3bcbc; }
.tc-neutral { background: var(--panel-subtle); color: var(--ink-soft); border-color: var(--line-strong); }
.tc-stage-exam, .tc-stage-consult { background: var(--panel-subtle); color: var(--ink-soft); border-color: var(--line-strong); }
.tc-stage-records { background: #e6effd; color: #1257b8; border-color: #bcd6f6; }
.tc-stage-in_treatment { background: var(--brand-soft); color: var(--brand-dark); border-color: var(--brand-soft-strong); }
.tc-stage-retention { background: #efe6fb; color: #6f3da6; border-color: #d9c4f1; }
.tc-stage-observation { background: #e1f4f3; color: #0a7a72; border-color: #b9e4e0; }
.tc-stage-debanded, .tc-stage-none { background: var(--panel-subtle); color: var(--muted); border-color: var(--line); }

/* Detail drawer */
.tc-drawer { width: min(760px, 100%); }
.tc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 4px 0 8px; }
.tc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; align-content: start; }
.tc-fact { display: flex; flex-direction: column; gap: 1px; }
.tc-fact > span { font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tc-fact > b { font-size: 0.9rem; color: var(--ink); font-weight: 600; }
.tc-fact-wide { grid-column: 1 / -1; }
.tc-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; background: var(--panel-subtle); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 14px; }
.tc-edit .tc-check, .tc-edit .lab-btn, .tc-edit .gate-status { grid-column: 1 / -1; }
.tc-untracked-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 2px 0 4px; }
.tc-untracked-cta .tc-muted { font-size: 0.85rem; }
.tc-edit label { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.tc-edit select, .tc-edit input[type="text"], .tc-followup-add input, .tc-followup-add select {
  font: inherit; font-size: 0.86rem; padding: 7px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); text-transform: none; font-weight: 400;
}
.tc-edit label { width: 100%; }
.tc-edit select, .tc-edit input[type="text"] { width: 100%; box-sizing: border-box; max-width: 100%; text-overflow: ellipsis; }
.tc-edit select:focus, .tc-followup-add input:focus, .tc-followup-add select:focus { outline: 2px solid var(--brand-soft-strong); outline-offset: 0; border-color: var(--brand); }
.tc-check { flex-direction: row !important; align-items: center; gap: 7px !important; text-transform: none !important; font-size: 0.85rem !important; color: var(--ink) !important; letter-spacing: 0 !important; cursor: pointer; }
.tc-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.tc-edit .lab-btn { margin-top: 2px; }
.tc-infer { font-style: italic; margin: 6px 0; }

.tc-rec-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 0.86rem; }
.tc-rec-table th, .tc-rec-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tc-rec-table th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.tc-rec-table select { width: 100%; box-sizing: border-box; padding: 5px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--ink); }
.tc-rec-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }

.tc-drawer h3 { font-size: 0.95rem; color: var(--ink); margin: 18px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.tc-drawer h3 .tc-muted { font-weight: 400; }
.tc-note { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 11px; margin-bottom: 7px; background: var(--panel); font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.tc-note-meta { font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; font-weight: 600; }
.tc-milestones { margin: 0; padding-left: 18px; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.6; }
.tc-followup-add { display: flex; gap: 8px; margin-bottom: 12px; }
.tc-followup-add input { flex: 1; min-width: 0; }

/* Dashboard */
.tc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tc-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; text-align: center; }
.tc-stat-n { font-size: 1.7rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.tc-stat-l { font-size: 0.76rem; color: var(--muted); margin-top: 3px; }
.tc-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.tc-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: 16px; }
.tc-panel h3 { margin: 0 0 12px; font-size: 0.9rem; color: var(--ink); }
.tc-bar { display: grid; grid-template-columns: 110px 1fr 34px; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 0.8rem; }
.tc-bar-l { color: var(--ink-soft); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-bar-track { height: 8px; background: var(--panel-subtle); border-radius: var(--radius-pill); overflow: hidden; }
.tc-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.tc-bar-n { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tc-mini-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.tc-mini-table th { text-align: left; color: var(--muted); font-weight: 650; font-size: 0.7rem; text-transform: uppercase; padding: 0 0 7px; }
.tc-mini-table td { padding: 7px 0; border-top: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
.tc-mini-table td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.tc-mini-table td { overflow-wrap: anywhere; word-break: normal; }
.tc-mini-table td:first-child { padding-right: 12px; white-space: nowrap; }
.tc-perf-table { table-layout: fixed; }
.tc-perf-table .tc-perf-total,
.tc-perf-table .tc-perf-won { width: 46px; }
.tc-perf-table .tc-perf-rate { width: 54px; }
.tc-perf-table th:not(:first-child),
.tc-perf-table td:not(:first-child) {
  padding-left: 10px;
  text-align: right;
  white-space: nowrap;
}
.tc-perf-table th:first-child,
.tc-perf-table td:first-child {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .tc-table {
    min-width: 1040px;
  }
  .tc-table.tc-board-observation { min-width: 1180px; }
}

@media (max-width: 700px) {
  .lab-toolbar .lab-spacer { display: none; }
  .lab-toolbar .sheet-search { flex: 1 0 100%; width: 100%; }
  .lab-toolbar .gate-status { flex: 1 0 100%; }
  .tc-grid { grid-template-columns: 1fr; }
  .tc-facts { grid-template-columns: 1fr 1fr; }
  .tc-edit { grid-template-columns: 1fr; }
  .tc-obs-head { padding: 13px; }
  .tc-obs-heading { flex-direction: column; gap: 10px; }
  .tc-obs-heading .lab-btn { width: 100%; min-height: 44px; }
  .tc-obs-fresh { align-items: flex-start; flex-wrap: wrap; }
  .tc-obs-progress { width: 100%; margin-left: 14px; }
  .tc-obs-filters button { min-height: 44px; }
  .tc-tablewrap { overflow: visible; border: 0; box-shadow: none; background: transparent; }
  .tc-table, .tc-table.tc-board-observation { display: block; min-width: 0; }
  .tc-table colgroup, .tc-table thead { display: none; }
  .tc-table tbody { display: grid; gap: 10px; }
  .tc-table tbody tr { display: block; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--panel); box-shadow: var(--shadow-sm); }
  .tc-table tbody td { display: grid; grid-template-columns: minmax(112px, 38%) 1fr; gap: 10px; width: auto !important; padding: 7px 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .tc-table tbody td > * { min-width: 0; max-width: 100%; }
  .tc-table tbody td .tc-pill { justify-self: start; }
  .tc-table tbody td::before { content: attr(data-label); color: var(--muted); font-size: 0.7rem; font-weight: 650; letter-spacing: 0.035em; text-transform: uppercase; }
  .tc-table tbody td:first-child { padding-top: 0; }
  .tc-table tbody td:last-child { padding-bottom: 0; border-bottom: 0; }
}

@media (forced-colors: active) {
  .tc-obs-filters button.is-active, .tc-table tbody tr:focus-visible { outline: 2px solid CanvasText; }
  .tc-fresh-dot { background: CanvasText; }
}

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.doc-card { display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform 0.12s, box-shadow 0.12s; }
.doc-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.doc-ico { font-size: 1.6rem; }
.doc-name { font-weight: 600; font-size: 0.95rem; }
.doc-meta { font-size: 0.78rem; color: var(--muted); }

/* ===================================================================
   Typing indicators ("X is typing…") + "seen by" read receipts.
   =================================================================== */

/* Read receipt: muted "Seen by …" tag in a message's meta row, revealed only
   when the staffer hovers that message (keeps the thread visually quiet). */
.seen-by-tag {
  /* Revealed on row hover -- but never at the cost of layout. As an `inline`
     element a long roster wrapped INSIDE the meta row and grew the row by up to
     210px (measured, eight names; even one name cost 28px), so landing the
     pointer anywhere in the thread shoved every message below it down the page,
     and hovering a note pushed the note itself up. `inline-block` + nowrap +
     ellipsis keeps the tag on the single line the meta row already occupies, so
     the row is exactly as tall hovered as not. The roster is also summarised to
     two names and a count in app.js, which makes the ellipsis a backstop rather
     than the normal case. */
  display: none;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  color: var(--muted-light);
  font-style: italic;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* The tag is the ONLY thing in the meta row allowed to give way. Without this
   the tag held its width and squeezed its siblings instead: the timestamp was
   compressed to 29px and broke into "4:45" over "pm", which is what actually
   made the row taller -- the tag was ellipsising correctly the whole time. */
.message-meta > :not(.seen-by-tag) {
  flex: 0 0 auto;
}
.message-row:hover .seen-by-tag,
.message-row.seen-by-open .seen-by-tag {
  display: inline-block;
}
/* A touchscreen cannot hover, so the tag -- and with it the only route to the
   full roster -- would simply never appear there. Show it outright instead of
   hiding a read receipt behind a gesture that does not exist. Row height is
   identical either way, so this costs nothing but a little more ink. */
@media (hover: none) {
  .seen-by-tag {
    display: inline-block;
  }
}

/* "+6" -- the affordance for the rest of the roster. A real button, so it is
   reachable by keyboard and by finger, not just by a tooltip nobody on a tablet
   can summon. */
.seen-by-more {
  padding: 0;
  border: 0;
  margin-left: 3px;
  background: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-decoration: underline dotted;
}
.seen-by-more:hover,
.seen-by-more:focus-visible {
  color: var(--ink-soft);
}

/* Floated over the thread, never in it: an inline panel would push messages
   around, which is the whole thing the tag was reshaped to stop. */
.seen-by-popover {
  position: fixed;
  z-index: 60;
  max-width: 260px;
  max-height: 50vh;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--panel-raised);
  box-shadow: 0 10px 26px rgba(12, 16, 30, 0.18);
  color: var(--ink);
  font-size: 0.78rem;
  font-style: normal;
  overflow-y: auto;
}
.seen-by-popover h4 {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.seen-by-popover ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
.seen-by-popover li {
  display: grid;
  gap: 1px;
  padding: 4px 0;
}
.seen-by-person {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.seen-by-time {
  color: var(--muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}
/* Name and time as two columns, so the times line up down the list and can be
   read as a column rather than hunted for at the end of each name. */
.seen-by-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.seen-by-when {
  color: var(--muted, #6b7280);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}
/* The clock variant carries no count, so it should read as an affordance
   rather than a number: same hit area, lighter presence. */
.seen-by-more-icon {
  font-size: 0.9em;
  opacity: 0.75;
}
.seen-by-more-icon:hover,
.seen-by-more-icon:focus-visible {
  opacity: 1;
}

/* Typing row pinned at the bottom of the open thread. Reuses the inbound bubble
   look but with animated dots instead of text. */
.typing-row .typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Stay grey even on the (right-aligned) staff side — a typing indicator must
     not be mistaken for a real sent text. Override the outbound blue gradient. */
  background: var(--inbound);
  color: var(--muted);
  box-shadow: none;
}
.typing-name {
  color: var(--muted);
  font-size: 0.85rem;
}
.typing-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
}
.typing-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted-light);
  display: inline-block;
  animation: typing-bounce 1.2s infinite ease-in-out both;
}
.typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}

/* Inbox list: a coworker typing takes over the preview line, tinted by accent
   so it reads as live activity rather than a stored message. */
.conversation-preview.is-typing {
  color: var(--accent-ink);
  font-style: italic;
}

/* The bottom-of-thread typing dots sit on the right (staff side). */
.typing-row.outbound .message-card {
  margin-left: auto;
}

/* Live coworker drafts, shown above the patient-info panel in the composer. */
.live-peer-drafts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.peer-draft {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px 11px;
  border-radius: var(--radius-md, 10px);
  background: var(--panel-subtle);
  border-left: 3px solid var(--accent);
  font-size: 0.8125rem;
}
.peer-draft-who {
  color: var(--accent-ink);
  font-weight: 600;
  white-space: nowrap;
}
.peer-draft-text {
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  /* Wrap the full draft (incl. its own newlines and long unbroken strings)
     instead of truncating — staff want to read what a coworker is composing. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.peer-draft-age {
  color: var(--muted-light);
  font-style: italic;
  white-space: nowrap;
}

/* ── Chair Board (live operatory board) ─────────────────────────────────── */
.chair-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.chair-conn {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--muted);
}
.chair-conn[data-state="ok"] { color: #0a7d33; border-color: rgba(32,196,60,0.5); background: rgba(32,196,60,0.08); }
.chair-conn[data-state="warn"] { color: #9a5a00; border-color: rgba(232,151,58,0.5); background: rgba(232,151,58,0.1); }
.chair-conn[data-state="connecting"] { opacity: 0.7; }
.chair-toggle {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.chair-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.chair-toggle-track {
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--muted-light) 18%, var(--panel));
  box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.08);
  position: relative;
  flex: none;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.chair-toggle-track span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.22);
  position: absolute;
  left: 2px;
  top: 1px;
  transition: transform 0.16s;
}
.chair-toggle input:checked + .chair-toggle-track {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand) 72%, #20c43c);
}
.chair-toggle input:checked + .chair-toggle-track span {
  transform: translateX(14px);
}
.chair-toggle input:focus-visible + .chair-toggle-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 28%, transparent);
}
.chair-asof { font-size: 0.76rem; color: var(--muted-light); }
.chair-offline {
  background: rgba(232,151,58,0.1);
  border: 1px solid rgba(232,151,58,0.4);
  color: #8a5200;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.chair-board-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.chair-bay {
  min-width: 0;
  margin-bottom: 0;
}
.chair-bay-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 7px;
}
.chair-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}

.chair-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
  min-height: 74px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  font: inherit;
  color: var(--ink);
  position: relative;
}
.chair-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.chair-card.is-dormant {
  opacity: 0.42;
  filter: grayscale(0.35);
  background: color-mix(in srgb, var(--panel) 78%, var(--line));
}
.chair-card.is-dormant:hover {
  opacity: 0.62;
}
.chair-card.is-dormant .chair-card-name,
.chair-card.is-dormant .chair-empty {
  color: var(--muted-light);
}
.chair-card.is-status-chair:not(.is-manual) {
  border-color: rgba(255,165,75,0.75);
  background: color-mix(in srgb, var(--panel) 88%, #ffa54b);
}
.chair-card.is-status-here:not(.is-manual) {
  border-color: rgba(58,163,245,0.55);
  background: color-mix(in srgb, var(--panel) 92%, #3aa3f5);
}
.chair-card.is-status-late:not(.is-manual),
.chair-card.is-status-confirmed:not(.is-manual),
.chair-card.is-status-unconfirmed:not(.is-manual),
.chair-card.is-status-leftmessage:not(.is-manual) {
  border-color: rgba(138,147,166,0.5);
}
.chair-card.is-manual {
  border-color: color-mix(in srgb, var(--chair-alert-color, var(--brand)) 70%, var(--brand));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--chair-alert-color, var(--brand)) 28%, transparent);
  animation: chairManualCall 1s ease-in-out infinite;
}
.chair-card.is-ready {
  border-color: rgba(32,196,60,0.8);
  box-shadow: 0 0 0 2px rgba(32,196,60,0.25);
  animation: chairReadyPulse 1.1s ease-in-out infinite;
}
.chair-card.is-manual.is-ready {
  animation: chairManualCall 1s ease-in-out infinite, chairReadyPulse 1.1s ease-in-out infinite;
}
/* Ready but >15m past appt start and still not in the chair: flash RED instead
   of green (overrides the green rules above via the extra class). */
.chair-card.is-ready.is-ready-overdue {
  border-color: rgba(224,58,58,0.85);
  box-shadow: 0 0 0 2px rgba(224,58,58,0.3);
  animation: chairReadyOverduePulse 0.85s ease-in-out infinite;
}
.chair-card.is-manual.is-ready.is-ready-overdue {
  animation: chairManualCall 1s ease-in-out infinite, chairReadyOverduePulse 0.85s ease-in-out infinite;
}
@keyframes chairReadyOverduePulse {
  0%, 100% {
    box-shadow: 0 0 0 2px rgba(224,58,58,0.28), var(--shadow-sm);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(224,58,58,0.7), var(--shadow-sm);
  }
}
@keyframes chairManualCall {
  /* Doctor-called flash: swing between a clean light panel and a clearly
     saturated alert tint (was a barely-visible 14% — now ~32%) so it's an
     eye-catch from across the room. */
  0%, 100% {
    background: color-mix(in srgb, var(--panel) 68%, var(--chair-alert-color, var(--brand)));
  }
  50% {
    background: var(--panel);
  }
}
@keyframes chairReadyPulse {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(32,196,60,0.18),
      var(--shadow-sm);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(32,196,60,0.5),
      var(--shadow-sm);
  }
}

.chair-card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 3px;
  border-bottom: 1px solid var(--line-subtle);
  background: transparent;
}
.chair-card-name { font-weight: 700; font-size: 0.82rem; flex: 1; }
.chair-clear {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  position: relative;
  z-index: 8;
}
.chair-clear:hover {
  background: color-mix(in srgb, var(--danger, #d12f2f) 12%, transparent);
  color: var(--danger, #d12f2f);
}
.chair-card-timer { font-size: 0.74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.chair-call-timer {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.chair-card-body {
  padding: 3px 9px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-height: 42px;
  position: relative;
}
.chair-card.is-manual .chair-card-body { padding-left: 44px; }
.chair-empty { color: var(--muted-light); text-align: center; padding: 4px 0; }
.chair-order {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2.35rem;
  line-height: 1;
  font-weight: 800;
  color: color-mix(in srgb, var(--brand) 72%, var(--ink));
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.chair-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.15;
}
.chair-row-name {
  min-height: 0.78rem;
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--row-color, var(--ink));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chair-row-meta {
  font-size: 0.68rem;
  color: var(--row-color, var(--muted));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chair-status-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  background: rgba(19, 31, 61, 0.3);
  pointer-events: none;
  /* PHI safety (kept from the ChairSync extension): the name + waiting/chair/
     in-office detail only appears after a deliberate ~0.5s hover, so a quick
     accidental mouse-over near a patient can't flash PHI. Hides fast on leave. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0s linear 0.12s;
}
.chair-card:hover .chair-status-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease 0.5s, visibility 0s linear 0.5s;
}
/* JS adds this 5s after the reveal so parked/idle hovers don't leave PHI on
   screen (the extension's auto-hide). Placed after the :hover rule so it wins. */
.chair-card.is-overlay-hidden .chair-status-overlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
.chair-overlay-box {
  max-width: 96%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #fff;
  text-align: center;
}
.chair-overlay-name,
.chair-overlay-stats {
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(32, 52, 100, 0.72);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chair-overlay-name { font-size: 0.72rem; }
.chair-overlay-stats {
  display: flex;
  gap: 7px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.6rem;
  line-height: 1;
}
.chair-overlay-stats span:empty { display: none; }

.chair-progress {
  height: 4px;
  background: rgba(138, 147, 166, 0.16);
  margin-top: auto;
  position: relative;
  overflow: hidden;
}
.chair-progress-fill,
.chair-progress-segments,
.chair-progress-segments span,
.chair-late-marker {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
}
.chair-progress-fill {
  width: 0;
  background: rgba(138, 147, 166, 0.24);
  transition: width 0.9s linear;
  z-index: 1;
}
.chair-progress-fill.is-over { background: rgba(232,151,58,0.25); }
.chair-progress-segments {
  width: 100%;
  z-index: 2;
}
.chair-progress-segments span {
  opacity: 0.92;
}
.chair-late-marker {
  width: 3px;
  background: #e32121;
  border-radius: 1px;
  z-index: 3;
}
.chair-late-marker[hidden] { display: none; }

@media (max-width: 780px) {
  .chair-board-columns {
    grid-template-columns: 1fr;
  }
  .chair-card {
    min-height: 74px;
  }
}

/* ============================================================================
   PHONE LAYER  (≤560px)
   ----------------------------------------------------------------------------
   All phone-specific polish lives here so the mobile experience is easy to
   reason about in one place — and to mirror when the React Native app is built.
   The ≤820px master/detail rules above already collapse the inbox/thread into
   one-view-at-a-time; this block is the small-screen finish: kill iOS focus
   zoom, grow touch targets, make the side panels full-screen, and respect the
   home-bar safe area.
   ========================================================================== */
@media (max-width: 820px) {
  /* iOS Safari zooms the page when a focused field computes below 16px. The
     bare element selectors below lose to class rules that set `font: inherit`
     (e.g. .task-field input, .mention-form input), so use !important to enforce
     the 16px floor everywhere — including the contenteditable mention editor,
     which isn't an <input> at all. This only pins font-size on small screens. */
  input,
  select,
  textarea,
  [contenteditable="true"],
  .mention-input {
    font-size: 16px !important;
  }

  /* The copilot panel gets the same full-screen treatment as Call Insights
     (the ≤820 block above only handled call-insights-open). Without this the
     desktop 3-column grid would squeeze the thread to nothing. */
  .app-shell.copilot-open {
    grid-template-columns: 1fr;
  }

  .copilot-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    border-radius: 0;
  }

  body:has(.telephony-call-dock:not(.is-collapsed) .telephony-call-row) .copilot-panel {
    padding-top: 0;
  }

  body:has(.telephony-call-dock:not(.is-collapsed) .telephony-call-row) .copilot-body {
    padding-top: calc(min(34dvh, 176px) + 12px);
    border-top: 1px solid var(--line, var(--border, rgba(0, 0, 0, 0.08)));
  }

  /* A right-hand panel is full-screen now, so don't shove the call dock off to
     the side for it — keep it pinned where it belongs. */
  .app-shell.copilot-open ~ .telephony-call-dock,
  .app-shell.call-insights-open ~ .telephony-call-dock {
    right: max(12px, env(safe-area-inset-right));
  }

  .telephony-call-dock {
    top: max(8px, env(safe-area-inset-top));
    left: 50%;
    right: auto;
    width: min(420px, calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    transform: translateX(-50%);
    max-height: min(42dvh, 220px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Keep the Copilot header at the real top edge. The floating call controls
     sit immediately below it, while the body reserves their occupied space. */
  .app-shell.copilot-open ~ .telephony-call-dock {
    top: calc(76px + max(8px, env(safe-area-inset-top)));
  }

  .telephony-call-dock.is-collapsed {
    width: min(360px, calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: none;
    overflow: visible;
  }

  .telephony-call-dock.is-collapsed .telephony-call-row {
    gap: 0;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
  }

  .telephony-call-dock.is-collapsed .telephony-call-row__main {
    gap: 8px;
  }

  .telephony-call-dock.is-collapsed .telephony-call-row__phone {
    font-size: 13px;
  }

  .telephony-call-dock.is-collapsed .telephony-call-row__status {
    font-size: 11px;
  }

  .telephony-call-dock.is-collapsed .telephony-call-row__number,
  .telephony-call-dock.is-collapsed .telephony-call-row__snapshot,
  .telephony-call-dock.is-collapsed .telephony-call-row__actions {
    display: none;
  }
}

@media (max-width: 560px) {
  /* Edge-to-edge: reclaim the gutters the desktop grid reserves. */
  .app-shell {
    padding: 0;
    gap: 0;
  }

  .sidebar,
  .thread-panel {
    border-radius: 0;
    box-shadow: none;
  }

  /* Tighter inbox header so the conversation list gets the vertical room.
     flex-shrink:0 is essential — the sidebar is a 100dvh flex column, so without
     it this header (and its 44px action buttons) gets squashed below its content
     height and overlaps the search bar. */
  .sidebar-header {
    flex: 0 0 auto;
    min-height: 0;
    padding: 14px 16px 10px;
  }

  .search-wrap,
  .inbox-filters {
    flex: 0 0 auto;
  }

  .sidebar-header h1 {
    font-size: 1.15rem;
  }

  .search-wrap {
    padding: 0 16px 10px;
  }

  /* --- Thread (open conversation) ---
     The header carries too much for 375px (back + identity + 4 action buttons +
     account chip). Two-row layout: row 1 is back + patient identity; the action
     buttons drop to a tidy full-width row 2. The account chip / Sign-out is
     redundant here (it's in the inbox header), so hide it in the thread. */
  .thread-header {
    flex-wrap: wrap;
    min-height: 56px;
    padding: 10px 12px;
    gap: 8px 10px;
  }

  .thread-header .identity {
    /* Row 1: take the rest of the row next to the back button. */
    flex: 1 1 auto;
  }

  .thread-header .account-area-thread {
    display: none;
  }

  .thread-actions {
    /* Row 2: full width, left-aligned, buttons in a single wrapped row. */
    flex: 1 0 100%;
    justify-content: flex-start;
    margin-left: -2px;
  }

  .identity-copy h2 {
    font-size: 1rem;
  }

  /* Comfortable thumb targets (Apple HIG min is 44px). */
  .icon-button,
  .toolbar-button,
  .composer-icon-button,
  .send-button {
    min-height: 44px;
  }

  .icon-button {
    min-width: 44px;
  }

  .thread-actions .toolbar-button {
    padding: 0 12px;
    font-size: 0.82rem;
  }

  .thread-scroller {
    padding: 12px;
  }

  .message-card {
    max-width: 90%;
  }

  /* Composer: full-width, and pad the bottom past the home indicator so the
     send button isn't sitting under the iOS gesture bar. */
  .composer {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
  }

  .composer-bar textarea {
    /* The mobile placeholder wraps to two lines at iPhone widths. Placeholder
       text does not trigger the JS auto-grow, so the empty textarea needs to
       start tall enough on its own. */
    min-height: 64px;
    line-height: 1.4;
    overflow-y: hidden;
  }

  .composer-bar {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 46px;
    /* Rows must grow with the input: the editor spans both rows, and a long
       wrapped message needs the box to get taller instead of spilling over the
       top border. (Fixed 28px rows clipped the contenteditable.) */
    grid-template-rows: minmax(28px, auto) minmax(28px, auto);
    align-items: center;
    gap: 1px 4px;
    padding: 6px 8px;
  }

  .composer-bar > label.composer-icon-button,
  .composer-ai .composer-icon-button {
    width: 28px;
    height: 28px;
  }

  .composer-bar > label.composer-icon-button svg,
  .composer-ai .composer-icon-button svg {
    width: 18px;
    height: 18px;
  }

  .composer-bar > label.composer-icon-button {
    grid-column: 1;
    grid-row: 2;
  }

  .composer-ai {
    grid-column: 1;
    grid-row: 1;
  }

  .composer-bar textarea,
  .composer-bar .mention-input {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: stretch;
    min-height: 56px;
    padding-left: 4px;
  }

  .composer-bar > .send-button {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    align-self: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin-left: 0;
  }

  /* Intake checklist + live-draft float: pin to the gutters instead of a fixed
     320px card that would hang off the right edge. */
  .intake-checklist {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    bottom: 84px;
  }

  /* AI assist popover: don't let the 320px menu overflow the viewport. */
  .composer-ai-menu {
    width: min(320px, calc(100vw - 24px));
  }

  /* Side panels (Call Insights / Copilot) are full-screen overlays here. */
  .call-insights-panel {
    position: fixed;
    inset: 0;
    z-index: 30;
    border-radius: 0;
  }

  /* Floating call dock stays centered at the top instead of right-aligned. */
  .telephony-call-dock {
    width: calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }

  /* Ask-AI bottom sheet: flush to the screen edges (no side/bottom gap), rounded
     only at the top, near full-height. The overlay's default 16px inset left a
     weird floating gap on phones. */
  .askai-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .askai-dialog {
    width: 100%;
    max-width: none;
    max-height: 88dvh;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
  }
  /* Keep the input clear of the iOS home indicator now that it's flush. */
  .askai-form {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* Login is a standalone form, but its submit buttons share the app's
   send-button class. Keep composer-only mobile grid rules from leaking here. */
@media (max-width: 720px) {
  .login-shell {
    padding: 18px;
  }

  .login-card {
    width: min(100%, 420px);
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 26px 22px;
  }

  .login-card > *,
  .password-reset-panel {
    grid-column: 1;
  }

  .login-card .field-label,
  .login-card .field-label input,
  .login-submit,
  .login-link-button {
    width: 100%;
  }

  .login-card .field-label input {
    min-height: 46px;
    font-size: 16px;
  }

  .login-submit {
    grid-row: auto;
    justify-self: stretch;
    height: 46px;
    min-height: 46px;
    border-radius: var(--radius-pill);
  }

  .login-link-button {
    min-height: 40px;
    justify-self: stretch;
    text-align: center;
  }
}

/* --- Workspace pages (home + page-shell boards) on a phone --------------- */
@media (max-width: 560px) {
  .home-shell {
    padding: 4px 10px 36px;
  }

  .home-brand h1 {
    font-size: 1.2rem;
  }

  .home-cards {
    /* Single comfortable column instead of the 230px min track, which can
       leave an awkward sliver on a ~360px screen. */
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .home-card {
    min-height: 0;
    padding: 18px;
  }

  .page-shell {
    padding: 4px 14px 14px;
  }

  /* The page title has flex:1 and was getting squeezed to ~one-word width
     between the Home link and the header action buttons, so "New Patient
     Requests" wrapped a word per line. Give the title its own full-width row.
     On mobile the nav/account controls (Home · account · Sign out) sit on the
     FIRST row and the title drops BELOW them (order:1), which reads more like a
     native app top bar. Applies to every page-shell page (TC list, lab cases,
     tasks, appointment requests). */
  .page-header {
    gap: 8px 10px;
  }

  .page-header h1 {
    flex: 1 1 100%;
    order: 1;
    font-size: 1.3rem;
    margin-top: 2px;
  }

  /* Home header controls: the row was nowrap, so "Manage access" / "Sign out"
     wrapped their *text* to two lines and ended up taller than the chip and the
     dark-mode toggle. Let the row wrap between controls instead, keep each
     control's label on one line, and give them all the same 40px height. */
  .home-header-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .home-btn,
  .account-signout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    white-space: nowrap;
  }

  .home-btn-icon {
    width: 40px;
    height: 40px;
  }

  .account-chip {
    min-height: 40px;
    max-width: min(58vw, 220px);
  }

  /* Keep the messages thread/inbox account chip compact. */
  .account-area-message .account-chip,
  .account-area-thread .account-chip {
    max-width: 150px;
  }

  /* Mobile header slimming: the Home link collapses to an icon-only button
     (its "Home" label hides), which frees enough width to keep the theme toggle
     on the same row without wrapping. Also collapse the account chip to a single
     line (name only; the email row made it taller than needed). */
  .page-home-label { display: none; }
  .page-home { padding: 0; width: 40px; height: 40px; justify-content: center; }
  .account-email { display: none; }
  .account-chip { min-height: 32px; justify-content: center; }

  /* Segmented controls (Ortho TC / lab board switchers, the request filter bar):
     a connected pill with internal border-left dividers and overflow:hidden
     looks mangled or clips once it can't fit one row on a phone (stray dividers,
     hidden tabs at the right edge). Present them as discrete wrapping chips
     instead — each its own bordered pill, with gaps — so every option is visible. */
  .lab-seg {
    flex-wrap: wrap;
    border: 0;
    border-radius: 0;
    overflow: visible;
    gap: 6px;
  }

  .lab-seg button {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
  }

  .lab-seg button.is-active {
    border-color: var(--brand);
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   @mention workflow — homepage sections, cards, status chips, thread modal,
   and the shared composer widget (contenteditable field + dropdown + chips).
   ───────────────────────────────────────────────────────────────────────── */
.mentions-section { margin: 0 0 1.25rem; }
.mentions-section-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .6rem; }
.mentions-section-head h2 { font-size: 1.05rem; margin: 0; color: var(--ink); }
.mentions-history-btn { font-size: .85rem; padding: .3rem .7rem; }
.mentions-list { display: grid; gap: .7rem; }

.mention-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 12px);
  padding: .85rem 1rem;
  box-shadow: var(--shadow-sm);
}
.mention-card-top { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.mention-sender { font-weight: 650; color: var(--ink); }
.mention-time { color: var(--muted); font-size: .8rem; margin-left: auto; }
.mention-context { color: var(--muted); font-size: .82rem; margin: .35rem 0 .15rem; }
.mention-excerpt {
  color: var(--ink); font-size: .92rem; line-height: 1.4;
  background: var(--note-bg, rgba(0,0,0,.03)); border-radius: var(--radius-sm, 8px);
  padding: .45rem .6rem; margin: .25rem 0 .5rem; white-space: pre-wrap; word-break: break-word;
}
.mention-recipient-status { color: var(--muted); font-size: .8rem; line-height: 1.5; margin-bottom: .5rem; }
.mention-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.mention-actions .home-btn { font-size: .82rem; padding: .32rem .7rem; }

/* Status chips — reused on cards, the note badge, and history rows. */
.mention-status {
  display: inline-block; font-size: .72rem; font-weight: 650; letter-spacing: .02em;
  padding: .12rem .5rem; border-radius: var(--radius-pill, 999px); text-transform: none;
  border: 1px solid transparent;
}
.mention-status-active   { background: #eef4ff; color: #1d4ed8; border-color: #c9dbff; }
.mention-status-progress { background: #fff5e6; color: #b45309; border-color: #ffe1b3; }
.mention-status-done     { background: #eafaef; color: #16794c; border-color: #c4ebd3; }
.mention-status-info     { background: #eef2ff; color: #4338ca; border-color: #d3d8ff; }
.mention-status-muted    { background: #f1f2f4; color: #64748b; border-color: #dfe3e8; }

/* Task nudges — new assigned tasks in the "For you" feed. Reuse .mention-card;
   an overdue task gets a 1px danger edge (semantic, not decorative). */
.task-nudge.is-overdue { border-color: color-mix(in srgb, var(--danger, #c0392b) 55%, var(--line)); }
.task-nudge-tag {
  display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: .1rem .45rem; border-radius: var(--radius-pill, 999px);
  background: var(--brand-soft, rgba(37,99,235,.12)); color: var(--brand, #1d4ed8);
}
.task-nudge-title { font-weight: 650; color: var(--ink); font-size: .98rem; line-height: 1.35; margin: .4rem 0 .1rem; }
.task-nudge-actions { margin-top: .55rem; }
.task-chip {
  display: inline-block; font-size: .72rem; font-weight: 650; letter-spacing: .01em;
  padding: .12rem .5rem; border-radius: var(--radius-pill, 999px); border: 1px solid transparent;
}
.task-chip-high { background: #fdecec; color: #b3261e; border-color: #f6cfcb; }
.task-due { background: #f1f2f4; color: #475569; border-color: #dfe3e8; }
.task-due.is-overdue { background: #fdecec; color: #b3261e; border-color: #f6cfcb; }

/* Chip shown ON an original note/log so readers know it's handled. */
.mention-note-badge {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  font-size: .72rem; font-weight: 650; padding: .1rem .5rem; margin-left: .4rem;
  border-radius: var(--radius-pill, 999px); border: 1px solid transparent; vertical-align: middle;
}
.mention-note-badge::before { content: "@"; opacity: .7; }
.mention-note-badge.tone-active   { background: #eef4ff; color: #1d4ed8; border-color: #c9dbff; }
.mention-note-badge.tone-progress { background: #fff5e6; color: #b45309; border-color: #ffe1b3; }
.mention-note-badge.tone-done     { background: #eafaef; color: #16794c; border-color: #c4ebd3; }
.mention-note-badge.tone-info     { background: #eef2ff; color: #4338ca; border-color: #d3d8ff; }
.mention-note-badge.tone-muted    { background: #f1f2f4; color: #64748b; border-color: #dfe3e8; }

/* Thread / history modal */
.mention-modal { position: fixed; inset: 0; z-index: var(--z-overlay); display: flex; align-items: center; justify-content: center; }
.mention-modal[hidden] { display: none; }
.mention-modal-backdrop { position: absolute; inset: 0; background: rgba(15,23,42,.45); }
.mention-modal-panel {
  position: relative; background: var(--panel); border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-lg); max-width: 560px; width: calc(100% - 2rem); max-height: 82vh; overflow: auto;
}
.mention-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.1rem .5rem; }
.mention-modal-header h2 { margin: 0; font-size: 1.05rem; }
.mention-modal-close { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.mention-modal-body { padding: .25rem 1.1rem 1.2rem; }
.mention-thread { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: .4rem; }
.mention-event { font-size: .85rem; color: var(--ink); border-left: 2px solid var(--line); padding-left: .55rem; }
.mention-event-type { color: var(--muted); text-transform: capitalize; }
.mention-event-text { color: var(--ink); }
.mention-dismissal { margin-top: .5rem; color: #16794c; font-size: .85rem; font-style: italic; }
.mention-history-head { font-size: .9rem; margin: 1rem 0 .4rem; color: var(--muted); }
.mention-history-row { border-top: 1px solid var(--line); padding: .5rem 0; font-size: .85rem; }
.mention-empty { color: var(--muted); font-size: .85rem; }

/* Composer widget: contenteditable field, dropdown, confirmed chip. */
.mention-input {
  min-height: 2.4rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
  background: var(--panel); color: var(--ink); font: inherit; line-height: 1.4; outline: none; white-space: pre-wrap;
  overflow-wrap: anywhere; word-break: break-word;
}
.mention-input:focus { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, rgba(37,99,235,.15)); }
.mention-input:empty::before { content: attr(data-placeholder); color: var(--muted); }
.mention-chip {
  display: inline; font-weight: 700; color: var(--brand, #1d4ed8);
  background: var(--brand-soft, rgba(37,99,235,.12)); border-radius: 4px; padding: 0 .15rem;
}
.mention-dropdown {
  position: absolute; z-index: var(--z-dropdown); min-width: 200px; max-width: 320px; max-height: 240px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); box-shadow: var(--shadow-md);
}
.mention-dropdown[hidden] { display: none; }
.mention-option { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; cursor: pointer; font-size: .9rem; }
.mention-option.active, .mention-option:hover { background: var(--brand-soft, rgba(37,99,235,.1)); }
.mention-option-name { font-weight: 600; color: var(--ink); }
.mention-option-sub { color: var(--muted); font-size: .8rem; margin-left: auto; }
.mention-option-tag { color: var(--brand, #1d4ed8); font-size: .72rem; font-weight: 650; margin-left: auto; text-transform: uppercase; }

:root[data-theme="dark"] {
  .mention-status-active, .mention-note-badge.tone-active { background: rgba(59,130,246,.18); color: #93c5fd; border-color: rgba(59,130,246,.4); }
  .mention-status-progress, .mention-note-badge.tone-progress { background: rgba(245,158,11,.18); color: #fcd34d; border-color: rgba(245,158,11,.4); }
  .mention-status-done, .mention-note-badge.tone-done { background: rgba(16,185,129,.18); color: #6ee7b7; border-color: rgba(16,185,129,.4); }
  .mention-status-info, .mention-note-badge.tone-info { background: rgba(99,102,241,.2); color: #c7d2fe; border-color: rgba(99,102,241,.4); }
  .mention-status-muted, .mention-note-badge.tone-muted { background: rgba(100,116,139,.2); color: #cbd5e1; border-color: rgba(100,116,139,.4); }
  .task-nudge-tag { background: rgba(59,130,246,.18); color: #93c5fd; }
  .task-chip-high, .task-due.is-overdue { background: rgba(220,38,38,.18); color: #fca5a5; border-color: rgba(220,38,38,.4); }
  .task-due { background: rgba(100,116,139,.2); color: #cbd5e1; border-color: rgba(100,116,139,.4); }
}

/* Confirmed @mention chips shown above the composer in note mode. */
/* Match the 8px bottom gap every other stacked element above the composer
   reserves (.composer-suggestion, .opt-out-banner, .attachment-tray); the old
   padding left ~1.6px, so confirmed @mention pills sat flush on the composer. */
.mention-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: 0 2px; margin: 0 0 8px; }
.mention-chips[hidden] { display: none; }
.mention-chips-label { color: var(--muted); font-size: .78rem; margin-right: .1rem; }
.mention-chip-pill {
  display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; font-weight: 600;
  color: var(--brand, #1d4ed8); background: var(--brand-soft, rgba(37,99,235,.12));
  border-radius: var(--radius-pill, 999px); padding: .1rem .2rem .1rem .5rem;
}
.mention-chip-x { background: none; border: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 0 .25rem; opacity: .7; }
.mention-chip-x:hover { opacity: 1; }

/* The inline mention editor sizing + blending into the message composer bar. */
.mention-input { max-height: 160px; overflow-y: auto; }
.mention-input-disabled { opacity: .55; pointer-events: none; }
.composer-bar .mention-input {
  flex: 1 1 auto; min-width: 0; border: none; box-shadow: none; background: transparent;
  padding: .5rem .2rem; max-height: 120px;
}
.composer-bar .mention-input:focus { border: none; box-shadow: none; }
.composer-bar .mention-input:empty::before { color: var(--muted); }
/* In note mode the composer bar is tinted; keep the editor readable. */
.composer-bar.note-mode .mention-input { color: var(--note-ink, inherit); }

/* Brief flash when an @mention deep-link scrolls you to the exact note/entry. */
@keyframes mentionTargetFlash {
  0%   { box-shadow: 0 0 0 3px var(--brand-soft, rgba(37,99,235,.35)); background-color: var(--brand-soft, rgba(37,99,235,.12)); }
  100% { box-shadow: 0 0 0 3px transparent; background-color: transparent; }
}
.mention-target { animation: mentionTargetFlash 2.4s ease-out 1; border-radius: 10px; }

/* Compact mention cards + sent-section folding + native action dialogs. */
.mentions-section { margin: 0 0 .8rem; }
.mentions-section-head h2 { font-size: .98rem; }
.mentions-list { gap: .5rem; }
.mention-card-compact { padding: .6rem .75rem; }
.mention-card-compact .mention-context { margin: .25rem 0 .1rem; }
.mention-card-compact .mention-excerpt { padding: .35rem .5rem; margin: .2rem 0 .4rem; font-size: .88rem; }
.mention-card-compact .mention-actions .home-btn { font-size: .78rem; padding: .26rem .6rem; }
.mention-reply {
  font-size: .86rem; color: var(--ink); background: var(--brand-soft, rgba(37,99,235,.1));
  border-left: 2px solid var(--brand, #1d4ed8); border-radius: 6px; padding: .35rem .55rem; margin: .2rem 0 .45rem;
}
.mention-reply-who { font-weight: 650; color: var(--brand, #1d4ed8); }
.mention-fold-toggle {
  background: none; border: none; cursor: pointer; color: var(--brand, #1d4ed8);
  font-size: .82rem; font-weight: 600; padding: .25rem .1rem; text-align: left;
}
.mention-fold-toggle:hover { text-decoration: underline; }

/* Action dialog form (reused inside #mentionModal). */
.mention-form { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.mention-form-label { font-size: .8rem; font-weight: 600; color: var(--muted); margin-top: .3rem; }
.mention-form input, .mention-form textarea, .mention-form select {
  font: inherit; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
  background: var(--panel); color: var(--ink); width: 100%; box-sizing: border-box;
}
.mention-form input:focus, .mention-form textarea:focus, .mention-form select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft, rgba(37,99,235,.15));
}
.mention-form-note { font-size: .85rem; color: var(--muted); margin: .3rem 0; }
.mention-form-error { color: var(--danger); font-size: .82rem; }
.mention-form-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }

/* "About: <patient>" tag under the composer for @mentions in a text thread. */
.mention-chips { position: relative; align-items: center; }
.mention-tag-label { font-size: .78rem; color: var(--muted); }
.mention-tag-btn {
  font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--brand-soft, rgba(37,99,235,.1)); color: var(--brand, #1d4ed8);
  border: 1px solid transparent; border-radius: var(--radius-pill, 999px); padding: .15rem .6rem;
}
.mention-tag-btn:hover { border-color: var(--brand, #1d4ed8); }
.mention-tag-caret { opacity: .7; }
.mention-tag-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 40; min-width: 240px; max-width: 340px;
  max-height: 260px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px); box-shadow: var(--shadow-md); padding: .25rem;
}
.mention-tag-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left; padding: .4rem .55rem;
  border-radius: 6px; font: inherit;
}
.mention-tag-option:hover { background: var(--brand-soft, rgba(37,99,235,.1)); }
.mention-tag-name { font-weight: 600; color: var(--ink); font-size: .88rem; }
.mention-tag-sub { font-size: .78rem; color: var(--muted); }
.mention-tag-clear { color: var(--muted); font-size: .82rem; }
.mention-tag-loading { padding: .5rem .55rem; color: var(--muted); font-size: .82rem; }

/* ── Mobile polish for the @mention UI (≤640px) ───────────────────────────── */
@media (max-width: 640px) {
  .mentions-section { margin: 0 0 .7rem; }
  .mentions-section-head h2 { font-size: .95rem; }
  .mention-card { padding: .6rem .7rem; }
  .mention-actions { gap: .35rem; }
  /* Bigger tap targets without ballooning height. */
  .mention-actions .home-btn { min-height: 34px; padding: .35rem .7rem; }

  /* Autocomplete + patient-tag menus must never run off the screen edge. */
  .mention-dropdown { max-width: calc(100vw - 16px); }
  .mention-tag-menu { max-width: calc(100vw - 24px); left: 0; right: auto; }

  /* Action dialogs become bottom sheets — easier to reach one-handed. */
  .mention-modal { align-items: flex-end; }
  .mention-modal-panel {
    width: 100%; max-width: 100%; max-height: 88vh;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mention-form-actions { position: sticky; bottom: 0; background: var(--panel); padding-top: .5rem; }
  .mention-form-actions .home-btn { flex: 1; min-height: 44px; }

  /* Composer patient tag: let it wrap instead of overflowing the bar. */
  .mention-chips { flex-wrap: wrap; gap: .3rem; padding: .3rem .1rem; }
}

/* ── Task Center mobile polish (≤640px) ───────────────────────────────────── */
@media (max-width: 640px) {
  /* Add-note row: stack the textarea over a full-width button (was a cramped
     side-by-side flex on phones). Font-size floor handled by the global rule. */
  .task-note-input { flex-direction: column; align-items: stretch; gap: 6px; }
  .task-note-btn { width: 100%; min-height: 44px; }
  /* Detail drawer fills the screen so fields/notes aren't squeezed. */
  .task-drawer .gate-modal-panel, .task-drawer .drawer-panel {
    width: 100%; max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0;
  }
  .task-detail-fields { grid-template-columns: 1fr; }
  .task-field input, .task-field select { min-height: 44px; }
}

/* ── Unified mobile bottom-sheet dialogs (continuity across the app) ──────────
   `.gate-modal` is the shared modal system used by Home (Manage access), Lab
   Cases, Appointment Requests, TC List, Task Center, and Work Schedule. Render
   it — plus the admin user-management modal and the native new-message dialog —
   as bottom sheets on phones so every dialog is consistent and reachable one-
   handed (matching the @mention dialogs). */
@media (max-width: 640px) {
  .gate-modal { align-items: flex-end; padding: 0; }
  .gate-modal-panel,
  .gate-modal-panel.appt-modal-panel,
  .gate-modal-panel.tc-drawer,
  .gate-modal-panel.task-drawer,
  .gate-modal-panel.ws-coverage-panel {
    width: 100%; max-width: 100%; max-height: 92vh; overflow-y: auto;
    border-radius: 16px 16px 0 0;
    /* Zero vertical padding so the sticky header/footer sit flush at the sheet
       edges; they supply their own padding (incl. the home-bar safe area). */
    padding: 0 16px;
  }

  /* app.js user-management modal (separate overlay system). */
  .admin-modal-overlay { place-items: end center; padding: 0; }
  .admin-modal { width: 100%; max-width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; }

  /* New-message native <dialog> (UA-centered by default → pin to the bottom). */
  dialog.dialog {
    position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%;
    border-radius: 16px 16px 0 0;
  }
}

/* ── Sticky header (×) + footer (Save/Close) inside mobile bottom sheets ──────
   Long dialogs scroll their body; keep the close button and the action bar in
   view the whole time. Header/footer are children of the scrolling panel, so
   position:sticky pins them. Backgrounds match the panel so scrolling content
   passes cleanly behind them. */
@media (max-width: 640px) {
  .gate-modal-panel .gate-modal-header,
  .mention-modal-panel .mention-modal-header,
  .admin-modal .admin-modal__head {
    position: sticky; top: 0; z-index: 3;
    background: var(--panel);
    padding-top: 10px; padding-bottom: 8px; margin-bottom: 2px;
    box-shadow: 0 1px 0 var(--line);
  }
  .gate-modal-panel .gate-modal-footer,
  .gate-modal-panel .lab-form-footer,
  .gate-modal-panel .task-form-actions,
  .mention-modal-panel .mention-form-actions,
  .dialog .dialog-actions,
  .admin-modal .admin-modal__foot {
    position: sticky; bottom: 0; z-index: 3;
    background: var(--panel);
    margin-top: 6px; padding-top: 10px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
    box-shadow: 0 -1px 0 var(--line);
  }
}

/* Mention action groups: line1 (non-status) + line2 (status-changing). Desktop
   = one line split by a "|"; mobile = two stacked lines. */
.mention-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .55rem; }
.mention-act-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.mention-act-group + .mention-act-group { border-left: 1px solid var(--line); padding-left: .55rem; }
@media (max-width: 640px) {
  .mention-act-group { flex-basis: 100%; }
  .mention-act-group + .mention-act-group { border-left: 0; padding-left: 0; padding-top: .1rem; }
}
/* "Updated to X" chip: a mentionee changed the status and the sender hasn't
   acknowledged it yet — draw attention until they interact. */
.mention-status-updated {
  background: #fff5e6; color: #b45309; border: 1px solid #ffcf8a; font-weight: 700;
  animation: mentionUpdatedPulse 1.6s ease-in-out 2;
}
@keyframes mentionUpdatedPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(180,83,9,0); } 50% { box-shadow: 0 0 0 3px rgba(180,83,9,.2); } }
:root[data-theme="dark"] {
  .mention-status-updated { background: rgba(245,158,11,.2); color: #fcd34d; border-color: rgba(245,158,11,.5); }
}

/* Leave-a-note composer: the inline editor can shrink (min-width:0 in the flex
   composer bar), which wrapped the long placeholder into a squished vertical
   column. Keep the placeholder on one truncated line and give the editor a
   sensible min width so it never collapses. */
.mention-input:empty::before {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; max-width: 100%;
}
.composer-bar .mention-input { min-width: 110px; }

/* Global support controls — phone first, then bug report, at bottom-left. */
.report-bug-btn {
  position: fixed; left: calc(max(16px, env(safe-area-inset-left)) + 52px); bottom: max(16px, env(safe-area-inset-bottom)); z-index: var(--z-dock);
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-md);
  transition: transform 120ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
}
.report-bug-btn:hover { transform: translateY(-1px); border-color: var(--brand); box-shadow: var(--shadow-lg); }
.report-bug-btn:active { transform: translateY(0); }
.report-bug-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent); outline-offset: 3px; }
@media (max-width: 640px) {
  .report-bug-btn { left: calc(max(12px, env(safe-area-inset-left)) + 52px); bottom: max(12px, env(safe-area-inset-bottom)); }
}

/* Admin add-user: compact title field so "Dr." doesn't take a full column. */
.admin-add-grid .admin-input-xs { max-width: 90px; }

/* ── Mid-width split view: keep the thread header from overlapping ────────────
   Above 820px both the inbox and the open thread show side by side, so the
   thread pane is only about half the window. The desktop thread header is a
   single non-wrapping row (identity + call/Leave Note/Ask AI/Copilot + the
   JS-appended account chip), which crams together and overlaps on these narrow
   panes (see app.js appendThreadAccount). Let the header wrap here: identity +
   account chip stay on row 1, the action buttons drop to a full-width row 2 —
   the same tidy two-row shape the phone layout uses, minus the back button. */
@media (min-width: 821px) and (max-width: 1180px) {
  .thread-header { flex-wrap: wrap; row-gap: 8px; }
  .thread-header .identity { order: 0; }
  .thread-header .account-area-thread { order: 1; }
  .thread-header .thread-actions {
    order: 2; flex: 1 0 100%; justify-content: flex-start;
  }
}

/* ── Call copilot as an overlay DRAWER on all tablet/desktop widths (≥821px) ──
   The old 3-column copilot-open grid squeezed the conversation column and made
   the thread header wrap/resize. Instead keep the layout at 2 columns (sidebar
   + full-width thread) and float the copilot as a right-side drawer overlaying
   the thread's edge — the conversation UI never moves or changes size. The
   drawer can be widened via the .copilot-expanded toggle, and × dismisses it. */
@media (min-width: 821px) {
  .app-shell.copilot-open { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
  .app-shell.copilot-open .copilot-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 46vw);
    z-index: 30; border-radius: 0; box-shadow: var(--shadow-lg);
    transition: width 160ms ease;
  }
  .app-shell.copilot-open.copilot-expanded .copilot-panel { width: min(760px, 72vw); }
  body:has(.telephony-call-dock:not(.is-collapsed) .telephony-call-row) .copilot-panel { padding-top: 0; }
}

/* Frozen, skinny page header across the workspace pages (Lab Cases, TC List,
   Appt Requests, Work Schedule, Tasks — all share .page-header). Sticks to the
   top on scroll so you always see where you are + the Home/user/sign-out
   controls, matching the consistent-header goal. */
.page-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  margin-bottom: 14px; padding: 10px 0 8px;
  box-shadow: 0 1px 0 var(--line);
}
.page-header h1 { font-size: 1.25rem; }
@media (max-width: 640px) {
  .page-header { padding: 8px 0 6px; gap: 8px; }
  .page-header h1 { font-size: 1.1rem; }
}

/* ── Fixes: mention widget in the TC follow-up row + status contrast ─────────
   The contenteditable mention editor grows with text; in a flex row that made
   the Note <select> + Add button stretch tall. Pin the row to the bottom and
   cap/scroll the editor so siblings keep their natural height. */
.tc-followup-add { align-items: flex-end; }
.tc-followup-add .mention-input {
  flex: 1; min-width: 0; max-height: 108px; overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); padding: 7px 10px; font: inherit;
}
.tc-followup-add select, .tc-followup-add .lab-btn { flex: 0 0 auto; align-self: flex-end; }
/* Any inline mention editor: never let it push its row taller than a few lines. */
.mention-input { max-height: 140px; overflow-y: auto; }

/* Higher-contrast status chips on light mode (the info/progress were faint). */
.mention-status-active   { background: #e6efff; color: #1e40af; border-color: #b9d0ff; }
.mention-status-progress { background: #fff1dc; color: #9a3412; border-color: #ffd8a8; }
.mention-status-done     { background: #e3f7eb; color: #0f6b43; border-color: #b6e6c9; }
.mention-status-info     { background: #e7ebff; color: #3730a3; border-color: #c3caff; }
.mention-status-muted    { background: #eceef1; color: #475569; border-color: #d6dbe1; }
.mention-status, .mention-note-badge { font-weight: 700; }

/* @mention card activity stream (replies / included / task / status changes). */
.mention-stream { display: flex; flex-direction: column; gap: .25rem; margin: .1rem 0 .5rem; }
.mention-event-line { font-size: .84rem; color: var(--ink); line-height: 1.4; padding-left: .5rem; border-left: 2px solid var(--line); }
.mention-event-line.is-new { border-left-color: var(--brand, #1d4ed8); background: var(--brand-soft, rgba(37,99,235,.08)); border-radius: 0 6px 6px 0; }
.mention-event-line .mention-event-text { color: var(--ink); }
.mention-event-line .mention-time { color: var(--muted); font-size: .76rem; }
.mention-event-task {
  background: var(--brand-soft, rgba(37,99,235,.12)); color: var(--brand, #1d4ed8); border: 1px solid transparent;
  border-radius: var(--radius-pill, 999px); font: inherit; font-size: .8rem; font-weight: 650; cursor: pointer; padding: .05rem .5rem;
}
.mention-event-task:hover { border-color: var(--brand, #1d4ed8); }

/* Lab attachment image previews (both office + lab-portal sides). */
.lab-portal-attachments, .attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-items: flex-start; }
.lab-attach-img, .attachment-img { display: inline-block; line-height: 0; }
.lab-attach-img img, .attachment-img img {
  max-width: 190px; max-height: 190px; width: auto; height: auto; display: block;
  border-radius: 8px; border: 1px solid var(--line, #dcdfe4); object-fit: cover; background: var(--panel);
}
.lab-attach-img:hover img, .attachment-img:hover img { border-color: var(--brand, #1d4ed8); }
.lab-attach-file, .attachments .attachment { font-size: .85rem; text-decoration: none; }

/* Call dock: clip children to the rounded corners (they were poking out). */
.telephony-call-dock { overflow: hidden; }

/* Minimize button on the call dock (works on desktop + during a connected call). */
.telephony-call-row__min {
  background: none; border: none; color: var(--muted, #64748b); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 8px; border-radius: 6px; margin-left: 6px; flex: 0 0 auto; align-self: center;
}
.telephony-call-row__min:hover { background: rgba(0,0,0,.06); color: var(--ink); }
.telephony-call-dock.is-collapsed .telephony-call-row__min { display: none; }

/* My-notifications dialog toggles. */
.notif-toggles { display: flex; flex-direction: column; gap: .5rem; margin: .6rem 0 .2rem; }
.notif-toggle { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; color: var(--ink); cursor: pointer; line-height: 1.35; }
.notif-toggle input { margin-top: .15rem; width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto; }

/* Call Copilot header actions (expand + close). */
.ci-header-actions { display: flex; align-items: center; gap: 4px; }

/* Homepage consolidated Settings menu (Manage access / staff / notifications / theme). */
.home-settings { position: relative; }
.home-settings-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 210px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg); padding: 6px; display: flex; flex-direction: column;
}
.home-settings-menu[hidden] { display: none; }
.home-settings-item {
  text-align: left; background: none; border: none; cursor: pointer; font: inherit; font-size: .9rem;
  color: var(--ink); padding: .5rem .6rem; border-radius: 8px;
}
.home-settings-item:hover { background: var(--brand-soft, rgba(37,99,235,.1)); }

/* Consolidated "Actions ▾" toggle on @mention cards (keeps cards tidy on mobile). */
.mention-actionbar { margin-top: .3rem; }
.mention-actions-toggle {
  background: none; border: 1px solid var(--line); border-radius: var(--radius-pill, 999px);
  color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: .3rem .85rem;
}
.mention-actions-toggle:hover { border-color: var(--brand, #1d4ed8); color: var(--brand, #1d4ed8); }
.mention-caret { display: inline-block; transition: transform 140ms ease; }
.mention-actions-wrap { display: none; margin-top: .45rem; }
.mention-card.actions-open .mention-actions-wrap { display: block; }
.mention-card.actions-open .mention-caret { transform: rotate(180deg); }
.mention-actionbar-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.mention-actionbar-row .home-btn { font-size: .82rem; padding: .32rem .7rem; }

/* "Who has seen it" breakdown on the @mention status chip: hover/focus on
   desktop, tap-to-toggle (.is-open) on touch. */
.mention-people { position: relative; display: inline-flex; }
.mention-people-btn {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; color: inherit; border-radius: var(--radius-pill, 999px);
}
.mention-people-btn:focus-visible { outline: 2px solid var(--brand, #1d4ed8); outline-offset: 2px; }
.mention-people-summary { font-size: .72rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.mention-people-btn:hover .mention-people-summary { color: var(--ink); text-decoration: underline; }
.mention-people-pop {
  display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 70;
  width: max-content; min-width: 240px; max-width: min(340px, calc(100vw - 32px));
  max-height: 320px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md, 12px);
  box-shadow: var(--shadow-lg); padding: .5rem .6rem; font-size: .82rem; color: var(--ink);
}
.mention-people.is-open .mention-people-pop { display: block; }
@media (hover: hover) {
  .mention-people:hover .mention-people-pop, .mention-people:focus-within .mention-people-pop { display: block; }
  /* bridge the 6px gap so the pointer can travel into the popover */
  .mention-people:hover::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 8px; }
}
.mention-people-group + .mention-people-group { border-top: 1px solid var(--line); margin-top: .4rem; padding-top: .4rem; }
.mention-people-head { font-weight: 700; display: flex; align-items: baseline; gap: .4rem; margin-bottom: .2rem; }
.mention-people-role { font-size: .66rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.mention-people-count { margin-left: auto; font-size: .74rem; font-weight: 600; color: var(--muted); }
.mention-people-empty { color: var(--muted); }
.mention-people-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.mention-person { display: flex; align-items: center; gap: .45rem; padding: .15rem 0; }
.mention-person-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #cbd5e1; }
.mention-person.is-seen .mention-person-dot { background: #f59e0b; }
.mention-person.is-opened .mention-person-dot { background: #3b82f6; }
.mention-person.is-acted .mention-person-dot { background: #10b981; }
.mention-person-name { font-weight: 600; }
.mention-people-you { color: var(--muted); font-weight: 500; }
.mention-person-state { margin-left: auto; padding-left: .75rem; color: var(--muted); white-space: nowrap; }
.mention-person.is-unseen .mention-person-state { font-style: italic; }
:root[data-theme="dark"] .mention-person.is-unseen .mention-person-dot { background: #475569; }
@media (max-width: 560px) {
  /* Anchor the breakdown to the card, not the chip, so it never runs off-screen. */
  .mention-card { position: relative; }
  .mention-people { position: static; }
  .mention-people-pop { left: .5rem; right: .5rem; width: auto; min-width: 0; max-width: none; top: auto; margin-top: 6px; }
}

/* Banner atop the New-Task drawer when opened from an @mention. */
.task-mention-banner {
  font-size: .85rem; color: var(--ink); background: var(--brand-soft, rgba(37,99,235,.1));
  border: 1px solid var(--brand-soft, rgba(37,99,235,.2)); border-radius: var(--radius-sm, 8px);
  padding: .5rem .7rem; margin-bottom: .7rem;
}
.task-mention-banner-warn { background: #fff5e6; border-color: #ffe1b3; color: #9a3412; }

/* ── Membership card (page-scoped; see membership.html/js) ─────────────────── */
/* ── sheet-table: base table used by membership card ────────────────────────── */
.sheet-table {
  width: 100%; border-collapse: collapse; table-layout: auto;
}
.sheet-table th {
  text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 6px 10px; border-bottom: 2px solid var(--line);
  white-space: nowrap;
}
.sheet-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--line-subtle);
  font-size: .86rem; color: var(--ink);
}
.sheet-table tbody tr:last-child td { border-bottom: none; }

.membership-summary { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.membership-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 92px;
  padding: 10px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-sm);
}
.membership-stat-value { font-size: 1.35rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.membership-stat-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.membership-stat-warn .membership-stat-value { color: #9a2b2b; }
.membership-toolbar {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 180px max-content max-content max-content max-content;
  align-items: center;
  gap: 10px;
}
.membership-toolbar .lab-seg {
  grid-column: 1 / -1;
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.membership-toolbar .sheet-search { width: 100%; min-width: 0; max-width: none; }
.membership-toolbar .lab-spacer { display: none; }
.membership-status-filter { width: 100%; max-width: none; }
#membershipContent {
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.membership-table {
  min-width: 720px;
  table-layout: auto;
}
.membership-table td { vertical-align: middle; }
.membership-badge {
  display: inline-block; font-size: .72rem; font-weight: 600; padding: 1px 8px;
  border-radius: var(--radius-pill, 999px); white-space: nowrap; vertical-align: middle;
}
.membership-badge-ok { background: #dcf3e3; color: #1d7a40; }
.membership-badge-warn { background: #fff3d6; color: #8a6300; }
.membership-badge-muted { background: var(--panel-subtle); color: var(--muted); }
.membership-open { padding: 3px 12px; }
.membership-detail-panel {
  width: min(1040px, calc(100vw - 32px));
  max-width: min(1040px, calc(100vw - 32px));
  max-height: min(84vh, 780px);
  display: flex;
  flex-direction: column;
}
.membership-detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.membership-detail-sub { font-size: .82rem; color: var(--muted); }
.membership-detail-body {
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 16px;
}
.membership-detail-summary-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.15fr) minmax(220px, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.membership-detail-card {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
}
.membership-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-subtle);
  color: var(--ink);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}
/* The enrollment row under the member list. It is a footer to the card, not a title bar, so it
   gets its own rule above the block and room for full-width buttons on a narrow panel. */
.membership-card-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.membership-card-actions-row { display: flex; flex-wrap: wrap; gap: 8px; }
.membership-card-actions-row .lab-btn { flex: 1 1 auto; justify-content: center; }

.membership-card-head .lab-btn {
  padding: 3px 10px;
  font-size: .76rem;
}
.membership-summary-member {
  padding: 5px 0;
  border-bottom: 1px solid var(--line-subtle);
  font-size: .84rem;
  line-height: 1.35;
}
.membership-summary-member:last-child { border-bottom: none; }
.membership-detail-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin: 2px 0 12px;
  overflow-x: auto;
}
.membership-detail-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  padding: 9px 14px 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.membership-detail-tab:hover { color: var(--ink); background: var(--panel-subtle); }
.membership-detail-tab.is-active {
  color: var(--brand, #2563eb);
  border-bottom-color: var(--brand, #2563eb);
}
.membership-detail-tab-panel {
  min-height: 180px;
}
.membership-members { display: flex; flex-direction: column; gap: 10px; }
.membership-member {
  padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px); box-shadow: var(--shadow-sm);
}
.membership-member + .membership-member { margin-top: 8px; }
.membership-member-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.membership-member-head strong { font-size: .98rem; }
.membership-member-meta { font-size: .8rem; color: var(--muted); margin-top: 3px; }
.membership-member-notes { font-size: .8rem; color: var(--ink-soft); margin-top: 4px; }
.membership-detail-notes { font-size: .82rem; color: var(--ink-soft); margin-top: 12px; }
.membership-sync-status { font-size: .82rem; color: var(--muted); margin: -4px 0 10px; }
.membership-sync-error { color: #9a2b2b; }
/* Standing answer to "is the nightly maintenance running?" — quiet when healthy so it reads as
   reassurance, and only pulls attention when a run failed or stopped happening. */
.membership-maintenance { font-size: .82rem; color: var(--muted); margin: -4px 0 10px; }
.membership-empty-clear { margin-left: 8px; }
.membership-pending-toggle { margin-left: 8px; }
.membership-pending { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .82rem; }
.membership-pending th { text-align: left; font-weight: 600; padding: 4px 8px 4px 0; color: var(--muted); }
.membership-pending td { padding: 5px 8px 5px 0; border-top: 1px solid var(--line, rgba(128,128,128,.25)); }
.membership-cancel-transition { white-space: nowrap; }
.membership-stripe-mode { display: inline-block; margin-top: 6px; font-weight: 600; }
.membership-stripe-test { color: var(--muted); }
.membership-stripe-live { color: var(--danger); }
.membership-stripe-blocked { color: var(--warn); font-weight: 500; }
.membership-maintenance-warn {
  /* Elevation declared once, and the tint carries the state rather than a heavy rule: a colored
     border above 1px is decoration standing in for hierarchy. Text says what is wrong regardless,
     so the state never depends on colour alone. */
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  padding: 8px 10px;
  border-radius: 6px;
}
/* Tinted from the surface hue, not grey — grey secondary text on a warn tint loses contrast. */
.membership-maintenance-warn .membership-stripe-test { color: color-mix(in srgb, var(--warn) 75%, var(--ink)); }
.membership-live-detail { margin-top: 14px; }
/* Section titles (replaces the old membership-live-title) */
.membership-section-title {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted);
  border-top: 1px solid var(--line-subtle); padding-top: 10px; margin: 14px 0 6px;
}
.membership-live-detail .membership-section-title:first-child { margin-top: 0; }
.membership-kv { font-size: .84rem; color: var(--ink); margin: 7px 0; display: flex; gap: 12px; min-width: 0; align-items: flex-start; }
.membership-kv > span:first-child {
  flex: 0 0 112px; color: var(--muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; line-height: 1.25;
}
.membership-kv > :not(:first-child), .membership-kv { word-break: break-word; overflow-wrap: anywhere; }
.membership-kv > select {
  flex: 1 1 240px;
  min-width: 220px;
}
.membership-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; color: var(--muted); }
.membership-contact-source {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* Amount column right-aligned in mini-tables */
.membership-amount { text-align: left; font-variant-numeric: tabular-nums; }
.membership-member-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.membership-member-actions .lab-btn { padding: 4px 11px; font-size: .8rem; border-radius: var(--radius-pill, 999px); }
.membership-member-actions .membership-act-danger:not(.lab-btn-primary) {
  border-color: rgba(210, 86, 110, .55);
  color: var(--danger, #d2566e);
}
.membership-member-actions .membership-act-admin:not(.membership-act-danger):not(.lab-btn-primary) {
  border-style: dashed;
}
.membership-plans-head { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.membership-info {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-subtle);
  border-left: 3px solid var(--brand, #2563eb);
  border-radius: 8px;
  background: var(--panel-subtle);
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.45;
}
.membership-confirm {
  padding-top: 8px;
  border-top: 1px solid var(--line-subtle);
}
/* The read-back on a card charge. Above the "are you sure" threshold it goes red, because the
   number is the whole point of the confirmation. */
.membership-warn-text { color: var(--danger, #d2566e); font-weight: 600; }
/* One exclusive choice replacing the draft/enroll checkboxes — each option carries a line of
   explanation, so the rows need room to breathe and a hit target bigger than the radio. */
.membership-savemode {
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  margin: 4px 0;
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
  cursor: pointer;
}
.membership-savemode:hover { background: var(--panel-subtle, rgba(0, 0, 0, .04)); }
.membership-savemode:has(input:checked) { border-color: var(--accent, #4a7dbd); }
.membership-match-result {
  margin: 8px 0;
  padding: 9px 10px;
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
  background: var(--panel-subtle);
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.4;
}
.membership-match-result-warn { color: #9a2b2b; border-color: rgba(210,86,110,.45); }
.membership-candidate-btn { margin: 6px 6px 0 0; white-space: normal; text-align: left; }
.membership-match-member {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(140px, 1fr) minmax(130px, .9fr);
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
  padding: 9px 10px;
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
  background: var(--panel);
  font-size: .84rem;
}
.membership-match-member strong { color: var(--ink); }
.membership-match-heading { font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.membership-candidate-select {
  width: 100%;
  margin: 0 0 8px;
}
.membership-candidate-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
  background: var(--panel);
  line-height: 1.35;
}
.membership-candidate-row input { margin-top: 2px; flex: 0 0 auto; }
.membership-notice-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.membership-notice-safe {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; line-height: 1.45;
  background: #dcf3e3; border: 1px solid rgba(29,122,64,.28); color: #1d7a40;
  font-size: .84rem; font-weight: 600;
}
.membership-email-preview {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 14px; color: var(--ink); font-size: .9rem; line-height: 1.5;
}
.membership-email-preview p { margin: 0 0 10px; }
.membership-email-preview ul { margin: 0 0 10px 18px; padding: 0; }

/* ── mini-table: compact table for detail modal (payments, activity, history) ── */
.membership-mini-table {
  width: 100%; border-collapse: collapse; table-layout: auto; margin-bottom: 4px;
}
.membership-mini-table th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line-subtle);
  white-space: nowrap;
}
.membership-mini-table td {
  padding: 4px 8px 4px 0; font-size: .82rem; color: var(--ink-soft);
  border-bottom: 1px solid var(--line-subtle, rgba(0,0,0,.04));
}
.membership-mini-table tbody tr:last-child td { border-bottom: none; }
.membership-note-row td { color: var(--ink); }

/* Generic modal (enroll / convert / plan editor / actions) */
.membership-modal-panel {
  max-width: min(640px, calc(100vw - 32px));
  max-height: min(84vh, 780px);
  display: flex;
  flex-direction: column;
}
.membership-modal-wide {
  max-width: min(960px, calc(100vw - 32px));
}

/* Let selects inside the family-conversion table size to their content instead
   of the global 140px default — the plan names and Ascend link labels are long. */
.membership-family-table select {
  width: auto;
  min-width: 160px;
  max-width: 280px;
}
.membership-modal-body { max-height: none; overflow-y: auto; padding: 4px 4px 18px 0; }
.membership-modal-panel .lab-form-footer,
.membership-detail-panel .lab-form-footer {
  border-top: 1px solid var(--line-subtle);
  padding-top: 10px;
}
.membership-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.membership-field { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); margin: 6px 0; }
.membership-field > span { font-size: .74rem; text-transform: uppercase; letter-spacing: .02em; }
.membership-field input, .membership-field select, .membership-field textarea {
  padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
  background: var(--panel); color: var(--ink); font-size: .88rem; width: 100%;
}
.membership-check { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink); margin: 10px 0; cursor: pointer; }
.membership-selected-patient { display: block; margin: 4px 0 10px; }
.membership-selected-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.membership-selected-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-tint, rgba(37, 99, 235, 0.10)); color: var(--brand, #2563eb);
  border: 1px solid var(--brand, #2563eb); border-radius: 999px;
  padding: 4px 12px; font-size: .82rem; font-weight: 600;
}
/* Read-only autofilled fields read as "locked from Ascend", not editable inputs. */
.membership-form-grid input[readonly] { background: var(--panel-subtle, #f6f7f9); color: var(--muted, #667); cursor: default; }
.membership-terms { margin-top: 12px; border-top: 1px solid var(--line-subtle); padding-top: 10px; }
.membership-terms-head { font-weight: 600; font-size: .86rem; margin-bottom: 6px; }
.membership-terms-body {
  white-space: pre-wrap; font-size: .76rem; color: var(--ink-soft); background: var(--panel-subtle);
  border: 1px solid var(--line-subtle); border-radius: var(--radius-sm, 8px); padding: 10px; max-height: 200px; overflow-y: auto; font-family: inherit;
}
.membership-field-wide { margin: 6px 0; }
.membership-plan-desc { margin: 4px 0 8px; }
.membership-plan-desc-body {
  font-size: .8rem; color: var(--ink-soft); line-height: 1.4; background: var(--panel-subtle);
  border: 1px solid var(--line-subtle); border-left: 3px solid var(--brand, #2563eb);
  border-radius: var(--radius-sm, 8px); padding: 8px 10px; max-height: 140px; overflow-y: auto;
}
@media (max-width: 760px) {
  .membership-toolbar {
    grid-template-columns: 1fr 1fr;
  }
  .membership-toolbar .lab-seg,
  .membership-toolbar .sheet-search,
  .membership-status-filter {
    grid-column: 1 / -1;
  }
  .membership-toolbar .lab-seg {
    width: 100%;
  }
  .membership-toolbar .lab-btn {
    min-height: 34px;
    width: 100%;
    min-width: 0;
    white-space: normal;
  }
  .membership-table {
    min-width: 680px;
    font-size: .86rem;
  }
  .membership-kv {
    display: grid;
    grid-template-columns: minmax(92px, 30%) 1fr;
    gap: 6px 10px;
  }
  .membership-kv > span:first-child {
    flex-basis: auto;
  }
  .membership-match-member {
    grid-template-columns: 1fr;
  }
  .membership-detail-summary-grid {
    grid-template-columns: 1fr;
  }
  .membership-detail-tab {
    padding-left: 11px;
    padding-right: 11px;
  }
}
@media (max-width: 560px) {
  .membership-form-grid { grid-template-columns: 1fr; }
  .membership-account-choice {
    grid-template-columns: 1fr 1fr;
  }
  .membership-account-choice-main {
    grid-column: 1 / -1;
  }
  .membership-households-table {
    min-width: 100%;
  }
  .membership-households-table th:nth-child(3),
  .membership-households-table td:nth-child(3),
  .membership-households-table th:nth-child(6),
  .membership-households-table td:nth-child(6),
  .membership-households-table th:nth-child(7),
  .membership-households-table td:nth-child(7) {
    display: none;
  }
  .membership-households-table th:nth-child(2),
  .membership-households-table td:nth-child(2) {
    display: none;
  }
  .membership-households-table th,
  .membership-households-table td {
    padding-left: 6px;
    padding-right: 6px;
  }
  .membership-modal-panel,
  .membership-detail-panel {
    max-width: calc(100vw - 20px);
    max-height: 86vh;
  }
}

/* ── patient autofill search ────────────────────────────────────────────────── */
.membership-patient-search { position: relative; margin-bottom: 14px; }
.membership-search-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--brand, #2563eb);
  border-radius: var(--radius-sm, 8px); background: var(--panel);
  font-size: .88rem; color: var(--ink); box-shadow: 0 0 0 1px rgba(37,99,235,0.2);
}
.membership-search-input::placeholder { color: var(--muted); }
.membership-search-results {
  position: static; margin-top: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm, 8px);
  box-shadow: none; max-height: min(360px, 42vh); overflow-y: auto;
}
.membership-search-result {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 8px 12px; border: none; border-bottom: 1px solid var(--line-subtle);
  background: transparent; cursor: pointer; transition: background .12s;
}
.membership-search-result:last-child { border-bottom: none; }
.membership-search-result:hover { background: var(--panel-subtle); }
.membership-search-result strong { font-size: .88rem; color: var(--ink); }
.membership-search-result small { font-size: .78rem; color: var(--muted); }
.membership-search-empty { padding: 10px 12px; font-size: .84rem; color: var(--muted); text-align: center; }
.membership-account-list { display: grid; gap: 7px; }
.membership-account-card,
.membership-account-choice {
  border: 1px solid var(--line-subtle);
  border-radius: 8px;
  background: var(--panel);
}
.membership-account-card { padding: 8px 10px; }
.membership-account-card.is-primary,
.membership-account-choice.is-primary {
  border-color: var(--brand, #2563eb);
  box-shadow: 0 0 0 1px rgba(37,99,235,.14);
}
.membership-account-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.membership-account-card-head strong,
.membership-account-choice-main strong { color: var(--ink); font-size: .88rem; }
.membership-account-card-meta,
.membership-account-choice-main small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.35; margin-top: 2px; }
.membership-account-choice {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 10px;
  padding: 8px 10px;
}
.membership-account-choice.is-selected { background: var(--panel-subtle); }
.membership-account-check,
.membership-account-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: .78rem;
  color: var(--ink-soft);
}
.membership-account-check input,
.membership-account-primary input { margin: 0; }
.membership-account-choice-main { min-width: 0; }

.membership-family-table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
}
.membership-family-table {
  min-width: 860px;
}
.membership-family-table th,
.membership-family-table td {
  font-size: .8rem;
}
.membership-family-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.membership-family-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--ink);
  font-size: .86rem;
}
.membership-family-card-head span {
  color: var(--muted);
  font-size: .8rem;
}
.membership-family-list {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--ink-soft);
  font-size: .82rem;
  line-height: 1.45;
}
.membership-family-map-row {
  display: grid;
  grid-template-columns: minmax(160px, .7fr) minmax(220px, 1fr);
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-sm, 8px);
  background: var(--panel);
  margin-bottom: 7px;
}
.membership-family-map-row > div {
  min-width: 0;
}
.membership-family-map-row strong,
.membership-family-map-row .membership-detail-sub {
  display: block;
}
@media (max-width: 700px) {
  .membership-family-map-row {
    grid-template-columns: 1fr;
  }
}

/* ── clickable rows (households + plans + members) ──────────────────────────── */
.membership-table tbody tr { cursor: pointer; transition: background .12s ease; }
.membership-table tbody tr:hover { background: var(--brand-soft, rgba(37,99,235,.06)); }
.membership-table td:first-child { font-weight: 600; color: var(--ink); }
.membership-table .lab-btn { padding: 3px 12px; }

/* "Needs match" tab when there's a reconciliation backlog — subtle amber nudge. */
.lab-seg .membership-tab-alert:not(.is-active) { color: var(--warn, #b7791f); font-weight: 600; }

/* Household-level actions row in the detail modal (Edit / Merge). */
.membership-hh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }

/* Destructive-action confirmation copy (e.g. Remove member dialog). */
.membership-warn {
  margin: 0; padding: 10px 12px; border-radius: 8px; line-height: 1.45;
  background: var(--danger-tint, rgba(210, 86, 110, 0.10));
  border: 1px solid var(--danger, #d2566e); color: var(--ink);
}

/* ── sortable column headers ─────────────────────────────────────────────── */
.sortable-th {
  cursor: pointer; user-select: none; -webkit-user-select: none;
  white-space: nowrap; transition: background .12s ease;
  appearance: none; border: 0; background: transparent; color: inherit;
  font: inherit; font-weight: inherit; padding: 8px 4px; min-height: 44px;
}
.sortable-th:hover { background: var(--panel-subtle, rgba(0,0,0,.04)); }
.sort-arrow {
  display: inline-block; font-size: .72rem; vertical-align: middle; margin-left: 2px;
  transition: opacity .15s ease, color .15s ease;
}
.sort-arrow-idle { opacity: .32; }
.sort-arrow-active { opacity: 1; color: var(--brand, #2563eb); font-weight: 700; }

/* ── polished checkboxes (replace the raw browser checkbox everywhere) ────────── */
#membershipModal input[type="checkbox"],
#membershipDetailModal input[type="checkbox"],
/* Reset radios out of the global `input { width:100%; min-height:38px; border-radius:pill }`,
   which otherwise renders each one as a full-width pill. The checkbox rule below has always done
   this; radios had no rule at all, so every radio in a membership dialog — the Move destination
   choice as well as the save-mode selector — was being blown up to the width of its label. */
.membership-check input[type="radio"] {
  flex: 0 0 auto;
  width: 16px; height: 16px; min-height: 0;
  margin: 0; padding: 0;
  border-radius: 50%;
  accent-color: var(--brand, #2563eb);
  cursor: pointer;
}
/* The save-mode options wrap to two lines, so the control sits with the first line, not centred
   against the whole block. */
.membership-savemode input[type="radio"] { margin-top: 2px; }

.membership-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; min-height: 0; flex: 0 0 auto; margin: 0; padding: 0;
  vertical-align: middle; box-sizing: border-box;
  border: 1.5px solid var(--line-strong, #999); border-radius: 5px; background: var(--panel);
  box-shadow: none; outline: none;
  cursor: pointer; position: relative; transition: background .12s, border-color .12s, box-shadow .12s;
}
#membershipModal input[type="checkbox"]:hover,
#membershipDetailModal input[type="checkbox"]:hover,
.membership-check input[type="checkbox"]:hover { border-color: var(--brand, #2563eb); }
/* Keyboard focus gets a tidy brand ring; mouse clicks don't get the ugly default halo. */
#membershipModal input[type="checkbox"]:focus,
#membershipDetailModal input[type="checkbox"]:focus,
.membership-check input[type="checkbox"]:focus { outline: none; box-shadow: none; }
#membershipModal input[type="checkbox"]:focus-visible,
#membershipDetailModal input[type="checkbox"]:focus-visible,
.membership-check input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px var(--brand-ring, rgba(37, 99, 235, 0.28)); }
#membershipModal input[type="checkbox"]:checked,
#membershipDetailModal input[type="checkbox"]:checked,
.membership-check input[type="checkbox"]:checked { background: var(--brand, #2563eb); border-color: var(--brand, #2563eb); }
#membershipModal input[type="checkbox"]:checked::after,
#membershipDetailModal input[type="checkbox"]:checked::after,
.membership-check input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── modal / panels ─────────────────────────────────────────────────────────── */
.membership-modal-panel, .membership-detail-panel { border-radius: var(--radius-lg, 14px); box-shadow: var(--shadow-lg); }
.membership-detail-body { max-height: 72vh; overflow-y: auto; }
.membership-form-footer, .lab-form-footer { gap: 8px; }
@media (max-width: 640px) {
  .membership-stat { min-width: calc(50% - 5px); }
  .membership-detail-panel { max-width: 100%; }
}

/* ── dark mode badge adjustments ────────────────────────────────────────────── */
[data-theme="dark"] .membership-badge-ok { background: #1a3e28; color: #6ee7a8; }
[data-theme="dark"] .membership-badge-warn { background: #3b2e0a; color: #fcd34d; }

/* The one action that resolves a disputed number: ask the caller in their own
   language. Sits under the uncertainty warning it acts on. */
.cop-turn-translation__confirm { display: block; margin-top: 4px; padding: 3px 8px; border: 1px solid var(--warn, #b45309);
  border-radius: 999px; background: transparent; color: var(--warn, #b45309); font-size: 0.62rem; font-weight: 700; cursor: pointer; }
.cop-turn-translation__confirm:hover:not(:disabled) { background: var(--warn, #b45309); color: #fff; }
.cop-turn-translation__confirm:disabled { opacity: .6; cursor: default; }


/* Enlarged attachment. Mirrors the Lab Cases photo viewer (.lcv3-lightbox) so the
   two cards behave the same way: tap anywhere to dismiss, Escape closes. The
   corner control is the only route to a new tab, because leaving the thread was
   never what someone wanted when they tapped a photo mid-conversation. */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-lightbox);
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 16, 22, 0.82);
  cursor: zoom-out;
}
.image-lightbox[hidden] { display: none; }
.image-lightbox img {
  /* Size against the VIEWPORT, not percentages. Inside `display:grid;
     place-items:center` the row track is auto-sized by this very image, so a
     percentage max-height is indefinite and gets ignored -- only max-width
     binds, and a tall photo scales to full width and runs off the bottom (a
     portrait shot showed just its top). Subtract the overlay padding. */
  max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  /* Mobile browsers: excludes the collapsing address bar so nothing is cut off. */
  max-height: calc(100dvh - 48px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.image-lightbox-open {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.image-lightbox-open:hover { background: rgba(255, 255, 255, 0.26); }
.message-image { cursor: zoom-in; }

/* --- Persistent phone + Copilot workspace ---------------------------------
   The named call-workspace window is the only WebRTC owner. It reuses the
   production call dock, Copilot, interpreter, and intake components, then
   reorganizes them into one operational surface instead of maintaining a
   second, incomplete copy of their state machines. */
.phone-workspace-launcher {
  position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: var(--z-dock); width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--panel); color: var(--ink); box-shadow: var(--shadow-md); font: inherit;
  font-size: .82rem; font-weight: 750; cursor: pointer;
  transition: transform 120ms ease-out, box-shadow 160ms ease-out, border-color 160ms ease-out;
}
.phone-workspace-launcher[hidden] { display: none; }
.phone-workspace-launcher:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 42%, var(--line)); }
.phone-workspace-launcher:active { transform: translateY(0); }
.phone-workspace-launcher:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 38%, transparent); outline-offset: 3px; }
.phone-workspace-launcher__status { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 14%, transparent); }
.phone-workspace-launcher.is-ready .phone-workspace-launcher__status { background: #17803d; box-shadow: 0 0 0 3px color-mix(in srgb, #17803d 16%, transparent); }
.call-workspace-header, .call-workspace-idle { display: none; }

html.call-workspace-mode, html.call-workspace-mode body { min-width: 320px; min-height: 100%; }
html.call-workspace-mode body {
  height: 100vh; height: 100dvh; display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 38%);
  grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; background: var(--bg); color: var(--ink);
}
html.call-workspace-mode body::selection { background: var(--brand-soft-strong); color: var(--ink); }
html.call-workspace-mode .app-shell { display: contents; }
html.call-workspace-mode .sidebar,
html.call-workspace-mode .thread-panel > :not(#intakeChecklist),
html.call-workspace-mode .call-insights-panel,
html.call-workspace-mode #askAiOverlay,
html.call-workspace-mode #imageLightbox,
html.call-workspace-mode #reportBugBtn,
html.call-workspace-mode .phone-workspace-launcher { display: none !important; }
html.call-workspace-mode .thread-panel { display: contents; }

html.call-workspace-mode .call-workspace-header {
  grid-column: 1 / -1; grid-row: 1; min-height: 50px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; padding: 6px 14px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.call-workspace-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.call-workspace-brand__mark { width: 32px; height: 32px; display: grid; place-items: center; flex: none; border-radius: 12px; background: var(--brand-soft); color: var(--brand-ink); }
.call-workspace-brand > div { min-width: 0; display: grid; gap: 1px; }
.call-workspace-brand strong { font-size: .95rem; line-height: 1.2; }
.call-workspace-brand span { color: var(--muted); font-size: .7rem; }
.call-workspace-readiness { display: inline-flex; align-items: center; gap: 7px; min-width: 0; margin-left: auto; flex: 0 1 auto; color: var(--muted); font-size: .75rem; }
.call-workspace-readiness > span { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--warn); }
.call-workspace-readiness[data-state="ready"] { color: #176b36; }
.call-workspace-readiness[data-state="ready"] > span { background: #17803d; }
:root[data-theme="dark"] .call-workspace-readiness[data-state="ready"] { color: #6ee7a8; }
.call-workspace-readiness[data-state="error"], .call-workspace-readiness[data-state="duplicate"] { color: var(--danger); }
.call-workspace-readiness[data-state="error"] > span, .call-workspace-readiness[data-state="duplicate"] > span { background: var(--danger); }

html.call-workspace-mode .call-workspace-idle {
  grid-column: 1 / -1; grid-row: 3; align-self: center; justify-self: center;
  width: min(560px, calc(100% - 40px)); display: grid; grid-template-columns: auto 1fr;
  gap: 18px 16px; padding: 26px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow-md);
}
html.call-workspace-mode .call-workspace-idle[hidden] { display: none; }
.call-workspace-idle__signal { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, #17803d 11%, var(--panel)); color: #17803d; }
.call-workspace-idle h1 { margin: 3px 0 5px; font-size: 1.18rem; letter-spacing: -.02em; }
.call-workspace-idle p { max-width: 48ch; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.call-workspace-idle__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 2px 0 0; overflow: hidden; border-radius: 10px; background: var(--line); }
.call-workspace-idle__facts > div { padding: 10px 12px; background: var(--panel-subtle); }
.call-workspace-idle dt { color: var(--muted); font-size: .66rem; }
.call-workspace-idle dd { margin: 2px 0 0; font-size: .76rem; font-weight: 700; }
.call-workspace-idle.is-duplicate .call-workspace-idle__signal { background: color-mix(in srgb, var(--danger) 10%, var(--panel)); color: var(--danger); }

html.call-workspace-mode .telephony-call-dock {
  position: static; grid-column: 1 / -1; grid-row: 2; z-index: auto; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel-subtle); overflow: visible; transition: none; transform: none !important; left: auto; right: auto; top: auto; max-height: none;
}
html.call-workspace-mode .telephony-call-row {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 12px; box-shadow: none;
  display: grid; grid-template-columns: minmax(128px, 1fr) auto; align-items: center; gap: 7px 12px;
  animation: telephony-pop-in 180ms cubic-bezier(.2,.8,.2,1);
}
html.call-workspace-mode .telephony-call-row__main { grid-column: 1; grid-row: 1; min-width: 0; gap: 8px; }
html.call-workspace-mode .telephony-call-row__info { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; }
html.call-workspace-mode .telephony-call-row__phone { max-width: min(28vw, 280px); }
html.call-workspace-mode .telephony-call-row__number { display: none; }
html.call-workspace-mode .telephony-call-row__min { display: none; }
html.call-workspace-mode .telephony-call-row__snapshot { display: none; }
html.call-workspace-mode .telephony-call-row__actions {
  grid-column: 2; grid-row: 1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px;
}
html.call-workspace-mode .telephony-call-row__actions button {
  width: auto; min-width: 0; min-height: 36px; padding: 6px 10px; border-radius: 9px; font-size: .75rem;
}
html.call-workspace-mode .telephony-call-row__actions button:only-child { grid-column: auto; }
html.call-workspace-mode .telephony-transfer-picker, html.call-workspace-mode .call-interpreter { grid-column: 1 / -1; grid-row: 3; }
html.call-workspace-mode .telephony-transfer-picker { position: static; width: 100%; max-height: min(300px, 42vh); }

html.call-workspace-mode .copilot-panel {
  position: static; grid-column: 1 / -1; grid-row: 3; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; height: auto;
  min-height: 0; display: flex; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; animation: none;
}
html.call-workspace-mode .copilot-panel[hidden] { display: none; }
html.call-workspace-mode body:has(.intake-checklist:not([hidden])) .copilot-panel { grid-column: 1; border-right: 1px solid var(--line); }
html.call-workspace-mode .copilot-panel .ci-header { min-height: 44px; padding: 5px 14px; background: var(--panel); }
html.call-workspace-mode .copilot-panel .ci-header h3 { font-size: .92rem; }
html.call-workspace-mode #copilotExpand, html.call-workspace-mode #copilotClose { display: none; }
html.call-workspace-mode .cop-create-lead { min-height: 32px; padding-inline: 11px; }
html.call-workspace-mode .copilot-body { flex: 1; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); padding: 0 !important; border-top: 0 !important; overflow: hidden; background: var(--bg); }
html.call-workspace-mode .copilot-context { grid-row: 1; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
html.call-workspace-mode .cop-patient { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 6px 12px; }
html.call-workspace-mode .cop-who { font-size: .8rem; white-space: nowrap; }
html.call-workspace-mode .cop-verdicts { min-width: 0; flex-direction: row; flex-wrap: nowrap; gap: 5px; overflow: hidden; }
html.call-workspace-mode .cop-verdict { min-width: 0; display: inline-flex; justify-content: flex-start; gap: 5px; padding: 3px 7px; border-radius: 7px; background: var(--brand-soft); font-size: .68rem; white-space: nowrap; overflow: hidden; }
html.call-workspace-mode .cop-verdict b { flex: none; }
html.call-workspace-mode .cop-verdict-person { min-width: 0; overflow: hidden; color: var(--brand-ink); text-overflow: ellipsis; }
html.call-workspace-mode .cop-details { grid-column: 3; grid-row: 1; justify-self: end; }
html.call-workspace-mode .cop-details summary { min-height: 30px; display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 7px; list-style: none; white-space: nowrap; }
html.call-workspace-mode .cop-details summary::-webkit-details-marker { display: none; }
html.call-workspace-mode .cop-details summary::after {
  content: ""; width: 5px; height: 5px; margin: -3px 2px 0 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform 140ms ease-out;
}
html.call-workspace-mode .cop-details[open] { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; padding-top: 2px; }
html.call-workspace-mode .cop-details[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
html.call-workspace-mode .cop-details[open] .cop-snap { margin-top: 6px; }
html.call-workspace-mode .cop-details[open] .cop-note { margin-top: 6px; }
html.call-workspace-mode .cop-snap > div { border: 1px solid var(--line); background: var(--panel-subtle); }
html.call-workspace-mode .cop-interpreter { grid-row: 2; margin: 12px 16px 0; }
html.call-workspace-mode .cop-stream-region { grid-row: 3; min-height: 0; padding: 10px 14px 14px; overflow: hidden; }
html.call-workspace-mode .cop-stream { min-height: 0; max-height: none; padding-right: 8px; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
html.call-workspace-mode .cop-stream::-webkit-scrollbar, html.call-workspace-mode .lead-form-body::-webkit-scrollbar { width: 9px; }
html.call-workspace-mode .cop-stream::-webkit-scrollbar-thumb, html.call-workspace-mode .lead-form-body::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 9px; background-clip: content-box; background-color: var(--line-strong); }
html.call-workspace-mode .cop-sg { border-left-width: 1px; border-radius: 10px; box-shadow: var(--shadow-sm); }

html.call-workspace-mode .intake-checklist {
  position: static; grid-column: 2; grid-row: 3; width: auto; min-width: 0; max-width: 100%; box-sizing: border-box; height: auto; max-height: none;
  min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: var(--panel);
}
html.call-workspace-mode .intake-checklist[hidden] { display: none; }
html.call-workspace-mode .intake-checklist .ck-head {
  min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 3px 10px; padding: 9px 12px; border-bottom: 1px solid var(--line);
}
html.call-workspace-mode .intake-checklist .ck-title { grid-column: 1; min-width: 0; flex-wrap: wrap; }
html.call-workspace-mode .intake-checklist .ck-count { grid-column: 1; grid-row: 2; }
html.call-workspace-mode .intake-checklist .ck-save { grid-column: 2; grid-row: 1 / span 2; min-height: 34px; }
html.call-workspace-mode .intake-checklist .ck-scroll { max-height: none; height: calc(100% - 64px); overflow-y: auto; }
html.call-workspace-mode .intake-checklist .ck-row .lab { width: 92px; }
html.call-workspace-mode .lead-form-panel { width: min(520px, 100vw); min-width: min(360px, 100vw); z-index: var(--z-overlay); }
html.call-workspace-mode .lead-form-panel.is-minimized { right: 14px; bottom: 14px; }

@media (max-width: 620px) {
  .phone-workspace-launcher { left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); }
  html.call-workspace-mode body { display: flex; flex-direction: column; height: auto; min-height: 100dvh; overflow-y: auto; }
  html.call-workspace-mode .app-shell { display: contents; }
  html.call-workspace-mode .call-workspace-header { position: sticky; top: 0; z-index: var(--z-sticky); flex: none; order: 0; padding-inline: 12px; }
  .call-workspace-readiness strong { max-width: 124px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.call-workspace-mode .call-workspace-idle { width: calc(100% - 24px); align-self: center; order: 2; margin: 24px 0; padding: 20px; }
  .call-workspace-idle__facts { grid-template-columns: 1fr; }
  html.call-workspace-mode .telephony-call-dock { flex: none; display: flex; align-items: stretch; order: 1; width: 100%; padding: 10px 12px; }
  html.call-workspace-mode .telephony-call-row { display: flex; padding: 9px 10px; }
  html.call-workspace-mode .telephony-call-row__main { width: 100%; }
  html.call-workspace-mode .telephony-call-row__info { flex-direction: column; align-items: stretch; }
  html.call-workspace-mode .telephony-call-row__phone { max-width: none; }
  html.call-workspace-mode .telephony-call-row__snapshot { width: 100%; }
  html.call-workspace-mode .telephony-call-row__actions { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.call-workspace-mode .telephony-call-row__actions button { width: 100%; min-height: 44px; }
  html.call-workspace-mode .cop-create-lead { min-height: 44px; }
  html.call-workspace-mode .cop-patient { grid-template-columns: minmax(0, 1fr) max-content; }
  html.call-workspace-mode .cop-who { grid-column: 1 / -1; white-space: normal; }
  html.call-workspace-mode .cop-verdicts { grid-column: 1; }
  html.call-workspace-mode .cop-details { grid-column: 2; }
  html.call-workspace-mode .cop-details summary { min-height: 44px; }
  html.call-workspace-mode .cop-details[open] { grid-column: 1 / -1; grid-row: 3; }
  html.call-workspace-mode .copilot-panel { flex: none; order: 2; min-height: 620px; }
  html.call-workspace-mode body:has(.intake-checklist:not([hidden])) .copilot-panel { border-right: 0; }
  html.call-workspace-mode .intake-checklist { flex: none; order: 3; max-height: 70vh; border-top: 1px solid var(--line); }
  html.call-workspace-mode .cop-snap { grid-template-columns: 1fr; }
  html.call-workspace-mode .cop-stream-region { min-height: 380px; }
  html.call-workspace-mode .cop-interpreter__setup { grid-template-columns: 1fr; }
  html.call-workspace-mode .cop-interpreter__setup p, html.call-workspace-mode .cop-interpreter__start { grid-column: auto; }
}
@media (max-width: 420px) {
  .call-workspace-brand span { display: none; }
  .call-workspace-readiness { gap: 5px; }
  .call-workspace-readiness strong { max-width: 92px; font-size: .7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .phone-workspace-launcher, html.call-workspace-mode .telephony-call-row { transition: none; animation: none; }
}

.call-hours-form {
  display: grid;
  gap: 14px;
}

.call-hours-loading,
.call-hours-error {
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.call-hours-error,
.call-hours-feedback {
  color: var(--danger);
}

.call-hours-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
}

.call-hours-status__dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
}

.call-hours-status__dot.is-open {
  background: var(--success, #16834a);
}

.call-hours-status strong,
.call-hours-status small {
  display: block;
}

.call-hours-status strong {
  font-size: 0.88rem;
}

.call-hours-status small {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.74rem;
}

.call-hours-section {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.call-hours-section__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.call-hours-section__head h3 {
  margin: 0;
  font-size: 0.94rem;
}

.call-hours-section__head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.call-hours-master {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
}

.call-hours-master__track {
  display: inline-flex;
  align-items: center;
  width: 30px;
  height: 18px;
  padding: 2px;
  border-radius: 9px;
  background: var(--line-strong);
  transition: background 140ms ease;
}

.call-hours-master__track > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.24);
  transition: transform 140ms ease-out;
}

.call-hours-master[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  color: var(--ink);
}

.call-hours-master[aria-pressed="true"] .call-hours-master__track {
  background: var(--brand);
}

.call-hours-master[aria-pressed="true"] .call-hours-master__track > span {
  transform: translateX(12px);
}

.call-hours-week {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.call-hours-day {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) 68px auto;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.call-hours-day__name {
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.call-hours-day__state {
  min-width: 68px;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel-subtle);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
}

.call-hours-day__state[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--success, #16834a) 42%, var(--line));
  background: color-mix(in srgb, var(--success, #16834a) 12%, var(--panel));
  color: var(--success, #16834a);
}

.call-hours-master:hover,
.call-hours-day__state:hover {
  border-color: var(--line-strong);
}

.call-hours-master:focus-visible,
.call-hours-day__state:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.call-hours-day__times {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.75rem;
}

.call-hours-day input[type="time"] {
  min-height: 34px;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
}

.call-hours-day input[type="time"]:disabled {
  opacity: 0.42;
}

.call-hours-copy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.call-hours-copy > span,
.call-hours-copy > small {
  display: block;
}

.call-hours-copy > span {
  font-size: 0.82rem;
  font-weight: 750;
}

.call-hours-copy > small {
  min-height: 2.5em;
  margin: 2px 0 6px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.call-hours-copy textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
}

.call-hours-copy textarea:focus,
.call-hours-day input[type="time"]:focus {
  outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
  outline-offset: 1px;
  border-color: var(--brand);
}

.call-hours-feedback {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  font-size: 0.78rem;
}

.call-hours-actions {
  display: flex;
  justify-content: flex-end;
}

.call-hours-actions .primary-button {
  min-height: 40px;
}

@media (max-width: 640px) {
  .call-hours-section {
    padding: 12px;
  }

  .call-hours-section__head {
    align-items: center;
  }

  .call-hours-day {
    grid-template-columns: 1fr auto;
    gap: 6px 10px;
    padding: 5px 0;
  }

  .call-hours-day__times {
    grid-column: 1 / -1;
  }

  .call-hours-day input[type="time"],
  .call-hours-master,
  .call-hours-day__state {
    min-height: 44px;
  }

  .call-hours-copy-grid {
    grid-template-columns: 1fr;
  }

  .call-hours-copy > small {
    min-height: 0;
  }

  .call-hours-actions .primary-button {
    width: 100%;
    min-height: 44px;
  }
}

/* ── Scheduled messages (Messages "Scheduled" tab) ─────────────────────────
   The queue of patient texts waiting to go out. Rows live in the conversation
   list column, so they inherit its width and scrolling; they are cards rather
   than list rows because each one carries a full message body plus actions. */
.scheduled-banner {
  margin: 10px 12px;
  padding: 9px 12px;
  border: 1px solid var(--line-subtle);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-subtle);
  color: var(--ink-soft);
  font-size: 0.78rem;
  line-height: 1.4;
}

/* Manual mode is the reassuring state, not a warning; auto-send is the one
   worth catching the eye, because messages then leave without a person. */
.scheduled-banner[data-mode="auto"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.scheduled-banner[data-mode="off"] {
  color: var(--muted);
}

.scheduled-row {
  margin: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scheduled-row[data-status="needs_approval"] {
  border-left: 3px solid var(--brand);
}

.scheduled-row[data-status="failed"],
.scheduled-row[data-status="skipped"] {
  border-left: 3px solid var(--danger);
}

.scheduled-row[data-status="sent"],
.scheduled-row[data-status="canceled"] {
  opacity: 0.72;
}

.scheduled-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.scheduled-row-who {
  font-weight: 650;
  color: var(--ink);
  font-size: 0.9rem;
}

.scheduled-row-status {
  flex: 0 0 auto;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.scheduled-row[data-status="needs_approval"] .scheduled-row-status {
  color: var(--brand);
}

.scheduled-row[data-status="failed"] .scheduled-row-status,
.scheduled-row[data-status="skipped"] .scheduled-row-status {
  color: var(--danger);
}

.scheduled-row-meta {
  font-size: 0.74rem;
  color: var(--muted);
}

/* The body is the whole point of the row: staff are reading the exact words a
   patient will receive, so it is never truncated. */
.scheduled-row-body {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.scheduled-row-error {
  font-size: 0.76rem;
  color: var(--danger);
}

/* The message DID go out -- it just went out unverified. Warn-coloured, not
   danger: reading it as a failure is what invites a duplicate text by hand. */
.scheduled-row-note {
  font-size: 0.76rem;
  color: var(--warn, #b45309);
}

/* Groups the Scheduled panel by WHO is sending: our own queue, then
   OrthoCalc's. The distinction matters because the available actions differ --
   ours can be edited and approved, OrthoCalc's can only be stopped. */
/* Widen-the-window controls, pinned under both queues. */
/* Wording OrthoCalc does not expose. Muted and italic so it reads as a note
   about the message rather than as the message itself. */
.scheduled-row-body-missing {
  font-style: italic;
  color: var(--ink-soft);
}

.scheduled-window-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 18px 0 6px;
  flex-wrap: wrap;
}

.scheduled-window-label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.scheduled-group-heading {
  margin: 18px 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scheduled-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.scheduled-action {
  flex: 0 0 auto;
  padding: 6px 12px;
  min-height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-soft);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

.scheduled-action:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.scheduled-action.primary {
  border-color: var(--brand);
  background: var(--brand);
  color: #ffffff;
}

.scheduled-action.primary:hover {
  background: var(--brand-hover);
  color: #ffffff;
}

.scheduled-action.danger:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.scheduled-row-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scheduled-editor-field {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-subtle);
  color: var(--ink);
  /* Match the displayed .scheduled-ghost-body so editing keeps the same
     proportions — same font size and line height, with the height auto-grown
     to the text in JS rather than a fixed row count. */
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  min-height: calc(1.45em + 12px);
  resize: vertical;
  overflow: hidden;
}

.scheduled-editor-field:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.scheduled-editor-hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--muted);
}

/* Touch targets on a phone, where staff most often clear the queue. */
@media (max-width: 720px) {
  .scheduled-action {
    min-height: 44px;
    padding: 10px 14px;
  }
}

/* Wording editor: the sentence pools every follow-up is assembled from. */
.scheduled-banner .scheduled-wording-toggle {
  margin-left: auto;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.72rem;
}

.scheduled-banner:has(.scheduled-wording-toggle) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.scheduled-templates {
  margin: 8px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scheduled-template-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.scheduled-template-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Scheduled-message settings (admin). The mode stripe makes the answer to
   "can this send on its own right now?" visible without reading a word. */
.scheduled-settings {
  margin: 10px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.scheduled-settings-summary {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}

.scheduled-settings[data-mode="auto"] .scheduled-settings-summary { color: var(--warn); }

.scheduled-settings-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.scheduled-settings-row input[type="checkbox"] { margin-top: 3px; }

.scheduled-settings-row > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scheduled-settings-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Explains the minutes wait on the scheduling link: it is a drop-off net, not a
   delay for its own sake. Indented under the control it belongs to. */
.scheduled-settings-hint {
  margin: -2px 0 2px 76px;
  max-width: 44ch;
  font-size: 0.74rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .scheduled-settings-hint { margin-left: 0; }
}

.scheduled-settings-number {
  width: 64px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-subtle);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
}

.scheduled-settings-date {
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-subtle);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
}

.scheduled-filter {
  max-width: 760px;
  margin: 12px auto 8px;
  padding: 4px;
  display: flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel-subtle);
}

.scheduled-filter button {
  flex: 1 1 0;
  min-height: 40px;
  padding: 7px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}

.scheduled-filter button:hover { color: var(--ink); }
.scheduled-filter button.active {
  background: var(--panel);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.scheduled-filter button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

.scheduled-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.scheduled-settings-head h3,
.scheduled-language-card h4 { margin: 0; color: var(--ink); font-size: 0.9rem; }
.scheduled-settings-head p { margin: 3px 0 0; }
.scheduled-settings-mode,
.scheduled-row-kind {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--panel-subtle);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}
.scheduled-settings[data-mode="manual"] .scheduled-settings-mode { background: var(--brand-soft); color: var(--brand); }
.scheduled-settings[data-mode="auto"] .scheduled-settings-mode { background: color-mix(in srgb, var(--warn) 12%, var(--panel)); color: var(--warn); }
.scheduled-row-identity { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; min-width: 0; }

.scheduled-wording-field { display: grid; gap: 5px; color: var(--ink-soft); font-size: 0.76rem; font-weight: 650; }
.scheduled-wording-field input,
.scheduled-wording-field textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  line-height: 1.45;
}
.scheduled-wording-field textarea { resize: vertical; }
.scheduled-wording-field input:focus,
.scheduled-wording-field textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.scheduled-language-card {
  display: grid;
  gap: 9px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.scheduled-wording-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

@media (max-width: 640px) {
  .scheduled-filter { position: sticky; top: 0; z-index: 2; margin-top: 8px; }
  .scheduled-filter button { min-height: 44px; padding-inline: 7px; font-size: 0.74rem; }
  .scheduled-settings-head { flex-direction: column; gap: 7px; }
  .scheduled-wording-terms { grid-template-columns: 1fr; }
  .scheduled-action { min-height: 44px; }
}

/* Wording editor: one sentence per box. The visual separation IS the feature -
   a wrapped sentence in a shared textarea gives no boundary, which is what made
   the pools feel unsafe to edit. */
.scheduled-pool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--line-subtle);
}

.scheduled-pool:first-of-type { border-top: 0; }

/* The wording section lists the KINDS of scheduled message the practice sends.
   One today; the card layout is what lets the second land beside the first
   instead of displacing it. */
.scheduled-kinds {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 12px;
}

.scheduled-kinds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.scheduled-kind-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 10px);
  background: var(--panel);
}

.scheduled-kind-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.scheduled-kind-title {
  font-size: 0.92rem;
  font-weight: 650;
  color: var(--text);
}

.scheduled-kind-counts {
  margin: 0;
  font-size: 0.76rem;
  color: var(--muted);
}

.scheduled-kinds .scheduled-templates { margin: 0; }

/* A situation and its four voices are ONE decision, so they read as one block.
   Flat sibling pools would give sixteen equal headings with nothing saying that
   four of them are the same sentence told to different readers. */
.scheduled-pool-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding: 10px 0 2px;
  border-top: 1px solid var(--line);
}

.scheduled-group-label {
  font-size: 0.78rem;
  color: var(--text);
}

.scheduled-pool-nested {
  border-top: 0;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line-subtle);
  margin-left: 2px;
}

.scheduled-pool-nested .scheduled-template-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.74rem;
}

.scheduled-pool-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.scheduled-entry {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 8px);
  background: var(--panel-subtle);
}

.scheduled-entry-index {
  flex: 0 0 auto;
  min-width: 18px;
  padding-top: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  text-align: right;
}

.scheduled-entry-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.scheduled-entry-field {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md, 6px);
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  resize: vertical;
}

.scheduled-entry-field:focus {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.scheduled-entry-flag {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  cursor: pointer;
}



.scheduled-entry-remove {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 4px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.scheduled-entry-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}

.scheduled-pool-add {
  align-self: flex-start;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 0.74rem;
}

@media (max-width: 720px) {
  .scheduled-entry-remove,
  .scheduled-pool-add { min-height: 40px; }
}

/* Checkboxes in the Scheduled panels.
   The global `input, select, textarea` rule is written for text fields: it sets
   width:100%, min-height:38px and side padding. A checkbox inherits all of it and
   renders as a 38px-tall control next to 0.72rem text, which is what made these
   look enormous. `height` alone cannot win against a min-height, so the reset has
   to name min-height, width and padding explicitly. */
.scheduled-settings input[type="checkbox"],
.scheduled-entry-flag input[type="checkbox"] {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  min-height: 0;
  padding: 0;
  border-radius: 3px;
  accent-color: var(--brand);
}

/* Scheduled messages own the thread column while open. Same geometry as the
   thread itself: a fixed header with its own back button, and one scrolling
   body beneath it. */
.scheduled-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg);
}

.scheduled-panel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.scheduled-panel-header h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  color: var(--ink);
}

.scheduled-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* The inset lives here, not on the cards: centring them with `margin: auto`
     overrides their own side margins, which left them edge-to-edge on a phone. */
  padding: 4px 12px 24px;
}

/* Given the full column, the cards get a comfortable reading measure instead of
   the inbox rail's width. */
.scheduled-panel-body .scheduled-settings,
.scheduled-panel-body .scheduled-banner,
.scheduled-panel-body .scheduled-templates,
/* Added when the wording editor became per-kind cards: .scheduled-kinds
   replaced .scheduled-templates as the container here but was never added to
   this list, so the "Scheduled message types" section alone ran full-bleed --
   472px wider than every block around it, and starting 236px further left. */
.scheduled-panel-body .scheduled-kinds,
.scheduled-panel-body .scheduled-row,
.scheduled-panel-body .load-more-row {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.scheduled-panel-body .scheduled-row-body { font-size: 0.9rem; }


/* Long-form clinical and meeting recorder */
.clinical-recorder-launcher{position:fixed;left:calc(max(16px,env(safe-area-inset-left)) + 104px);bottom:max(16px,env(safe-area-inset-bottom));z-index:47;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-strong);border-radius:50%;background:var(--panel);color:var(--brand);box-shadow:var(--shadow-md);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.clinical-recorder-launcher:hover{transform:translateY(-1px);border-color:var(--brand);box-shadow:var(--shadow-lg)}
.clinical-recorder-launcher:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 38%,transparent);outline-offset:3px}
.clinical-recorder-panel{width:min(760px,100%);padding:0;overflow:hidden}
.clinical-recorder-panel>.gate-modal-header{padding:14px 20px 12px;border-bottom:1px solid var(--line)}
.clinical-recorder-panel .gate-modal-close{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.clinical-recorder-heading-note{margin:2px 0 0;color:var(--muted);font-size:.78rem}
.clinical-recorder-body{max-height:calc(92vh - 68px);overflow:auto;padding:16px 20px 20px;scrollbar-color:var(--line-strong) transparent}
.clinical-recorder-body select,.clinical-recorder-body input[type=search]{width:100%;min-height:44px}
.clinical-recorder-primary-fields{display:grid;grid-template-columns:minmax(180px,.72fr) minmax(280px,1.28fr);align-items:start;gap:14px}.clinical-recorder-patient{position:relative}.clinical-recorder-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.clinical-recorder-label-row span{color:var(--muted);font-size:.76rem}
.clinical-recorder-results{position:absolute;z-index:4;top:68px;left:0;right:0;max-height:230px;overflow:auto;padding:5px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel);box-shadow:var(--shadow-lg)}
.clinical-recorder-results button{width:100%;display:flex;justify-content:space-between;gap:12px;padding:10px;border:0;border-radius:8px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}.clinical-recorder-results button:hover,.clinical-recorder-results button:focus-visible{background:var(--brand-soft);outline:none}.clinical-recorder-results button span,.clinical-recorder-search-note{color:var(--muted);font-size:.8rem}.clinical-recorder-search-note{padding:10px}.clinical-recorder-search-note.is-error,.clinical-recorder-empty.is-error{color:#b42318}
.clinical-recorder-selected{margin-top:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:10px;background:var(--brand-soft)}.clinical-recorder-selected[hidden]{display:none}.clinical-recorder-selected span{display:grid;gap:2px}.clinical-recorder-selected small{color:var(--muted)}.clinical-recorder-selected button{border:0;background:none;color:var(--brand);font:inherit;font-weight:650;cursor:pointer}
.clinical-recorder-options-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;padding:10px 12px 12px}.clinical-recorder-options{margin:0;padding:0;border:0;display:flex;align-content:start;flex-wrap:wrap;gap:8px 14px}.clinical-recorder-options legend{width:100%;margin-bottom:2px;color:var(--ink);font-size:.78rem;font-weight:700}.clinical-recorder-options label{display:inline-flex;align-items:center;gap:6px;color:var(--ink-soft);font-size:.82rem;cursor:pointer}.clinical-recorder-options input[type=checkbox]{width:auto;min-height:0;height:auto;margin:0;accent-color:var(--brand)}
.clinical-recorder-secondary-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.clinical-recorder-advanced,.clinical-recorder-import{margin:0;border:1px solid var(--line);border-radius:10px;background:var(--panel-subtle)}.clinical-recorder-advanced>summary,.clinical-recorder-import>summary{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;color:var(--ink);font-size:.8rem;font-weight:700;cursor:pointer}.clinical-recorder-advanced>summary span,.clinical-recorder-import>summary span{color:var(--muted);font-size:.7rem;font-weight:450;text-align:right}.clinical-recorder-advanced[open],.clinical-recorder-import[open]{grid-column:1/-1}.clinical-recorder-advanced[open]>summary,.clinical-recorder-import[open]>summary{border-bottom:1px solid var(--line)}
.clinical-recorder-consent{display:flex;align-items:flex-start;gap:9px;margin:13px 0 11px;padding:9px 10px;border:0;border-radius:10px;background:var(--brand-soft);color:var(--ink-soft)}.clinical-recorder-consent svg{flex:none;color:var(--brand)}.clinical-recorder-consent p{margin:0;font-size:.78rem;line-height:1.4}.clinical-recorder-start{width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px}.clinical-recorder-import-body{padding:10px 12px 12px}.clinical-recorder-import-label{display:block;margin-bottom:6px;font-size:.78rem;font-weight:650}#clinicalRecorderFile{width:100%;font-size:.78rem;color:var(--ink-soft)}#clinicalRecorderFile::file-selector-button{margin-right:10px;padding:7px 12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:inherit;font:inherit;cursor:pointer}#clinicalRecorderFile::file-selector-button:hover{border-color:var(--brand);color:var(--brand)}.clinical-recorder-import-note{margin:7px 0 0;font-size:.73rem;line-height:1.4;color:var(--ink-soft)}.clinical-recorder-start>span{width:10px;height:10px;border-radius:50%;background:currentColor}
.clinical-recorder-immediate{display:flex;align-items:flex-start;gap:9px;margin:0 0 11px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel-subtle);color:var(--ink);cursor:pointer}.clinical-recorder-immediate input{flex:none;width:17px;height:17px;margin:2px 0 0;accent-color:var(--brand)}.clinical-recorder-immediate span{min-width:0}.clinical-recorder-immediate strong,.clinical-recorder-immediate small{display:block}.clinical-recorder-immediate strong{font-size:.78rem;line-height:1.35}.clinical-recorder-immediate small{margin-top:2px;color:var(--muted);font-size:.72rem;line-height:1.4}.clinical-recorder-immediate:focus-within{outline:3px solid color-mix(in srgb,var(--brand) 38%,transparent);outline-offset:2px}
.clinical-recorder-active-hero{display:flex;align-items:center;justify-content:center;gap:18px;min-height:170px}.clinical-recorder-pulse{width:52px;height:52px;border-radius:50%;background:#d92d20;box-shadow:0 4px 16px color-mix(in srgb,#d92d20 24%,transparent);animation:clinicalRecorderPulse 1.5s ease-in-out infinite}.clinical-recorder-active-hero p{margin:0 0 4px;color:#b42318;font-size:.82rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.clinical-recorder-active-hero strong{display:block;color:var(--ink);font-size:2rem;font-variant-numeric:tabular-nums}.clinical-recorder-active-hero div span{display:block;margin-top:4px;color:var(--muted)}
#clinicalRecorderUpload{margin:0 0 15px;color:var(--muted);font-size:.8rem;text-align:center}.clinical-recorder-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:9px}.clinical-recorder-stop{min-height:46px;display:flex;align-items:center;gap:8px;background:#b42318;border-color:#b42318;color:#fff}.clinical-recorder-stop span{width:10px;height:10px;border-radius:2px;background:currentColor}.clinical-recorder-status{min-height:20px;margin:12px 0 0;color:var(--muted);font-size:.82rem;text-align:center}.clinical-recorder-status[data-kind=ok]{color:#067647}.clinical-recorder-status[data-kind=warning]{color:#b54708}.clinical-recorder-status[data-kind=error]{color:#b42318}
.clinical-recorder-recent-section{margin-top:12px;border-top:1px solid var(--line)}.clinical-recorder-recent-section>summary{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);font-size:.82rem;font-weight:700;cursor:pointer}.clinical-recorder-recent-section>summary small{color:var(--muted);font-size:.72rem;font-weight:450}.clinical-recorder-recent-section[open]>summary{margin-bottom:2px}.clinical-recorder-record__summary span,.clinical-recorder-record__meta{color:var(--muted);font-size:.76rem}.clinical-recorder-record{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 14px;padding:8px 0;border-top:1px solid var(--line-subtle)}.clinical-recorder-record__summary{min-width:0;display:grid;gap:2px}.clinical-recorder-record__summary strong,.clinical-recorder-record__summary span{overflow-wrap:anywhere}.clinical-recorder-record__meta{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px 9px;text-align:right}.clinical-recorder-state{padding:3px 7px;border-radius:999px;background:var(--panel-subtle)}.clinical-recorder-state.is-saved{background:#ecfdf3;color:#067647}.clinical-recorder-empty{padding:12px 0;color:var(--muted);font-size:.82rem}
@keyframes clinicalRecorderPulse{50%{transform:scale(.82);opacity:.65}}
html.call-workspace-mode .clinical-recorder-launcher{display:none!important}
@media(max-width:640px){.clinical-recorder-launcher{left:calc(max(12px,env(safe-area-inset-left)) + 104px);bottom:max(12px,env(safe-area-inset-bottom))}.clinical-recorder-panel>.gate-modal-header{padding:12px 16px}.clinical-recorder-body{max-height:calc(92vh - 68px);padding:14px 16px calc(18px + env(safe-area-inset-bottom))}.clinical-recorder-primary-fields,.clinical-recorder-secondary-row,.clinical-recorder-options-grid{grid-template-columns:1fr}.clinical-recorder-patient{margin-top:0}.clinical-recorder-options{gap:10px 14px}.clinical-recorder-record{grid-template-columns:1fr}.clinical-recorder-record__meta{justify-content:flex-start;text-align:left}.clinical-recorder-advanced[open],.clinical-recorder-import[open]{grid-column:auto}.clinical-recorder-advanced>summary,.clinical-recorder-import>summary{align-items:flex-start;flex-direction:column;gap:2px}.clinical-recorder-advanced>summary span,.clinical-recorder-import>summary span{text-align:left}}
@media(prefers-reduced-motion:reduce){.clinical-recorder-pulse{animation:none}.clinical-recorder-launcher{transition:none}}

@media(max-width:640px){
  .clinical-recorder-panel,.clinical-recorder-panel *{min-width:0;box-sizing:border-box}
  .clinical-recorder-panel{overflow:hidden}
  .clinical-recorder-body{overflow-x:hidden}
  .clinical-recorder-label-row{align-items:flex-start;flex-direction:column;gap:3px}
  .clinical-recorder-results{top:86px}
  .clinical-recorder-options{width:100%;gap:9px 11px}
  .clinical-recorder-options label{min-height:44px;padding-block:7px;font-size:.8rem}
  .clinical-recorder-advanced>summary,.clinical-recorder-import>summary,.clinical-recorder-recent-section>summary{min-height:44px}
  .clinical-recorder-results button{min-height:44px}
}

@media(max-width:640px){.clinical-recorder-panel>.gate-modal-header{display:grid;grid-template-columns:minmax(0,1fr) 44px;width:100%}.clinical-recorder-panel>.gate-modal-header .gate-modal-close{display:grid!important;justify-self:end}.clinical-recorder-body,.clinical-recorder-body select,.clinical-recorder-body input[type=search]{width:100%;max-width:100%}}

/* Saved-audio transcript review. The raw transcript is collapsed by default and
   rendered in bounded pages so a long appointment does not lock the popup. */
.clinical-recording-review{min-height:32px;padding:4px 9px;font-size:.74rem}.clinical-transcript-panel{grid-column:1/-1;min-width:0;max-height:min(520px,62vh);overflow:auto;overscroll-behavior:contain;margin-top:4px;padding:8px 10px 12px;border-radius:12px;background:var(--panel-subtle);scrollbar-color:var(--line-strong) transparent}.clinical-transcript-panel[hidden]{display:none}.clinical-transcript-actions{position:sticky;top:-8px;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:6px;padding-block:4px;background:var(--panel-subtle)}.clinical-transcript-actions .home-btn{min-height:32px;padding:5px 9px;font-size:.75rem}.clinical-transcript-status{min-height:16px;margin:2px 0 0;color:var(--muted);font-size:.74rem}.clinical-transcript-status[data-kind=ok]{color:#067647}.clinical-transcript-status[data-kind=error]{color:#b42318}.clinical-transcript-lines{max-height:300px;overflow:auto;overscroll-behavior:contain;margin-top:7px;padding:3px 8px 3px 0;scrollbar-color:var(--line-strong) transparent}.clinical-transcript-line{padding:8px 0;border-top:1px solid var(--line-subtle);overflow-wrap:anywhere}.clinical-transcript-line.is-foreign{padding-inline-start:10px;border-inline-start:1px solid #b26a00}.clinical-transcript-line.is-shaky{background:color-mix(in srgb,#f79009 7%,transparent)}.clinical-transcript-line__meta{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums}.clinical-transcript-line__meta b{font-weight:650}.clinical-transcript-speaker{color:var(--ink-soft);font-weight:650}.clinical-transcript-line p{margin:3px 0 0;color:var(--ink);font-size:.84rem;line-height:1.45}.clinical-transcript-line em{display:block;margin-top:3px;color:var(--muted);font-size:.78rem;font-style:normal;line-height:1.4}.clinical-transcript-more{min-height:32px;margin-top:3px;padding:4px 0;border:0;background:transparent;color:var(--brand);font:inherit;font-size:.75rem;font-weight:650;cursor:pointer}.clinical-transcript-more:focus-visible,.clinical-recorder-advanced>summary:focus-visible,.clinical-recording-review:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 38%,transparent);outline-offset:2px}
.clinical-note-shell{margin-top:12px;padding:14px;border-radius:12px;background:var(--panel-subtle)}.clinical-note-shell[hidden],.clinical-note-editor[hidden]{display:none}.clinical-note-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.clinical-note-heading>div{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:7px}.clinical-note-heading h4{margin:0;color:var(--ink);font-size:.9rem}.clinical-note-badge{display:inline-flex;padding:3px 7px;border-radius:999px;background:#fff4e5;color:#854a0e;font-size:.7rem;font-weight:700}.clinical-note-badge.is-filed{background:#ecfdf3;color:#067647}.clinical-note-badge.is-dry-run{background:#fff4e5;color:#854a0e}.clinical-note-generate{flex:none;min-height:36px;padding:7px 11px;font-size:.78rem}.clinical-note-editor{margin-top:12px}.clinical-note-editor>label,.clinical-note-provider-row label{display:block;margin-bottom:6px;color:var(--ink-soft);font-size:.78rem;font-weight:650}.clinical-note-text{width:100%;min-height:190px;resize:vertical;padding:11px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit;font-size:.84rem;line-height:1.5;overflow-wrap:anywhere}.clinical-note-text:focus,.clinical-note-provider:focus{border-color:var(--brand);outline:3px solid color-mix(in srgb,var(--brand) 26%,transparent);outline-offset:1px}.clinical-note-provider-row{display:grid;grid-template-columns:minmax(110px,.38fr) minmax(0,1fr);align-items:center;gap:8px 12px;margin-top:11px}.clinical-note-provider-row label{margin:0}.clinical-note-provider{width:100%;min-height:42px}.clinical-note-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:12px}.clinical-note-actions .home-btn{min-height:42px}.clinical-note-status{min-height:18px;margin:9px 0 0;color:var(--muted);font-size:.76rem;line-height:1.4}.clinical-note-status[data-kind=ok]{color:#067647}.clinical-note-status[data-kind=warning]{color:#854a0e}.clinical-note-status[data-kind=error]{color:#b42318}
.clinical-note-heading-main{min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:7px}
.clinical-note-heading-actions .home-btn{min-height:32px;padding:5px 9px;font-size:.74rem}
.clinical-note-actions{position:sticky;bottom:-14px;z-index:2;margin:12px -14px -14px;padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--panel-subtle)}
.clinical-recording-delete{margin-left:auto;color:#b42318}.clinical-recording-delete:hover{border-color:#b42318;background:#fef3f2;color:#912018}.clinical-recording-delete:focus-visible{outline:3px solid color-mix(in srgb,#b42318 30%,transparent);outline-offset:2px}
.clinical-note-actions{position:sticky;bottom:-14px;z-index:2;margin:12px -14px -14px;padding:10px 14px 12px;border-top:1px solid var(--line);background:var(--panel-subtle)}
.clinical-note-heading-actions{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.clinical-note-collapse,.clinical-note-compare-toggle{flex:none;min-height:36px;padding:7px 11px;font-size:.78rem}
.clinical-note-compare{margin-top:11px;padding:11px;border:1px solid var(--line-strong);border-radius:10px;background:var(--panel);max-height:320px;overflow:auto}
.clinical-note-compare[hidden]{display:none}
.clinical-note-compare-legend{display:flex;gap:12px;margin:0 0 8px;font-size:.72rem;font-weight:700}
.clinical-note-compare-legend .is-del{color:#b42318}
.clinical-note-compare-legend .is-add{color:#067647}
.clinical-note-diff-line{font:.78rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap;overflow-wrap:anywhere;padding:1px 6px;border-radius:4px;color:var(--ink-soft)}
.clinical-note-diff-line.is-del{background:#fef3f2;color:#b42318}
.clinical-note-diff-line.is-add{background:#ecfdf3;color:#067647}
.clinical-note-chip{padding:3px 7px;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--panel-subtle);color:var(--muted)}
.clinical-note-chip[hidden]{display:none}
.clinical-note-chip.is-draft{background:#fff4e5;color:#854a0e}
.clinical-note-chip.is-filed{background:#ecfdf3;color:#067647}
.clinical-note-badge.is-deleted,.clinical-note-chip.is-deleted{background:#fef3f2;color:#b42318}.clinical-note-badge.is-ascend-edited,.clinical-note-chip.is-ascend-edited{background:#fff4e5;color:#854a0e}
/* One note state per recording, same palette in the list chip and panel badge. */
.clinical-note-chip{white-space:nowrap}.clinical-note-badge.is-draft{background:#fff4e5;color:#854a0e}.clinical-note-badge.is-none{background:var(--panel);color:var(--muted)}.clinical-note-badge.is-generating,.clinical-note-chip.is-generating{background:var(--brand-soft);color:var(--brand)}.clinical-note-badge.is-failed,.clinical-note-chip.is-failed,.clinical-note-chip.is-deleted_in_ascend{background:#fef3f2;color:#b42318}.clinical-note-chip.is-edited_in_ascend{background:#fff4e5;color:#854a0e}.clinical-note-badge.is-dismissed,.clinical-note-chip.is-dismissed{background:var(--panel);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line-strong)}
.clinical-ascend-sync{margin-top:10px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.clinical-ascend-sync[hidden]{display:none}.clinical-ascend-sync>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.clinical-ascend-sync strong{color:var(--ink);font-size:.78rem}.clinical-ascend-sync p{margin:3px 0 0;color:var(--ink-soft);font-size:.74rem;line-height:1.4}.clinical-ascend-sync[data-state=deleted_in_ascend]{border-color:#fecdca;background:#fffbfa}.clinical-ascend-sync[data-state=edited_in_ascend]{border-color:#fedf89;background:#fffcf5}.clinical-ascend-refresh{min-height:32px;padding:4px 8px;font-size:.72rem}.clinical-ascend-sync details{margin-top:8px}.clinical-ascend-sync summary{min-height:36px;display:flex;align-items:center;color:var(--brand);font-size:.74rem;font-weight:650;cursor:pointer}.clinical-ascend-compare{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:5px}.clinical-ascend-compare section{min-width:0}.clinical-ascend-compare h5{margin:0 0 4px;color:var(--ink-soft);font-size:.7rem}.clinical-ascend-compare pre{max-height:180px;overflow:auto;margin:0;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--panel-subtle);color:var(--ink);font:inherit;font-size:.74rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;scrollbar-color:var(--line-strong) transparent}
@media(max-width:640px){.clinical-recording-review,.clinical-transcript-actions .home-btn,.clinical-transcript-more,.clinical-note-heading-actions .home-btn,.clinical-note-actions .home-btn{min-height:44px}.clinical-transcript-panel{max-height:58vh;margin-inline:-4px;padding-inline:10px}.clinical-note-shell{padding:12px}.clinical-note-heading,.clinical-note-provider-row{align-items:stretch;grid-template-columns:1fr;flex-direction:column}.clinical-note-generate{width:100%}.clinical-note-text{min-height:210px;font-size:1rem}.clinical-note-actions{display:grid;grid-template-columns:1fr}.clinical-note-actions .home-btn{width:100%}}
@media(max-width:640px){.clinical-ascend-refresh,.clinical-ascend-sync summary{min-height:44px}.clinical-ascend-compare{grid-template-columns:1fr}}
/* The recorder body is the only vertical workflow scroller. Nested transcript,
   note and comparison scrollers trapped trackpad/touch input at their edges. */
.clinical-recorder-body #clinicalRecorderSetup{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:10px 12px}
.clinical-recorder-body #clinicalRecorderSetup>.clinical-recorder-immediate{grid-column:1/-1;margin:0}
.clinical-recorder-primary-fields,.clinical-recorder-secondary-row{grid-column:1/-1}
.clinical-recorder-consent{grid-column:1;margin:0}
.clinical-recorder-start{grid-column:2;width:auto;min-width:168px;min-height:42px;padding-inline:18px}
.clinical-recorder-status:empty{display:none}
.clinical-recorder-body{scroll-padding-block:16px 28px}
.clinical-transcript-panel{max-height:none;overflow:visible;overscroll-behavior:auto}
.clinical-transcript-actions{position:static;background:transparent}
.clinical-transcript-lines{max-height:none;overflow:visible;overscroll-behavior:auto}
.clinical-note-text{height:clamp(190px,32dvh,320px);min-height:190px;max-height:50dvh;resize:vertical;overflow:auto;overscroll-behavior:auto;scrollbar-gutter:stable;scrollbar-color:var(--line-strong) transparent}
.clinical-note-actions{position:static;margin-top:12px;padding:0;border-top:0;background:transparent}
.clinical-note-compare{max-height:none;overflow:visible}
@media(max-width:640px){.clinical-recorder-body #clinicalRecorderSetup{grid-template-columns:1fr}.clinical-recorder-consent,.clinical-recorder-start{grid-column:1}.clinical-recorder-start{width:100%;min-height:46px}.clinical-transcript-panel{max-height:none}.clinical-note-generate{width:auto}.clinical-note-text{height:clamp(180px,36dvh,300px);min-height:180px;max-height:52dvh}}

/* The office workflow is split into two stable workspaces: capture and history.
   Opening a recording replaces the list with one review surface, so long notes
   never expand underneath unrelated recordings. */
.clinical-recorder-tabs{position:sticky;top:-16px;z-index:5;display:flex;gap:4px;margin:-16px -20px 14px;padding:8px 20px 0;border-bottom:1px solid var(--line);background:var(--panel)}
.clinical-recorder-tabs[hidden]{display:none}.clinical-recorder-tabs button{min-height:40px;padding:7px 12px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);font:inherit;font-size:.82rem;font-weight:650;cursor:pointer}.clinical-recorder-tabs button[aria-selected=true]{border-bottom-color:var(--brand);color:var(--brand)}.clinical-recorder-tabs button:focus-visible{border-radius:8px 8px 0 0;outline:3px solid color-mix(in srgb,var(--brand) 30%,transparent);outline-offset:-2px}
.clinical-recorder-background-status{margin:0 0 10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--brand-soft);color:var(--ink-soft);font-size:.76rem;line-height:1.4}.clinical-recorder-background-status[hidden]{display:none}.clinical-recorder-background-status[data-kind=ok]{color:#067647}.clinical-recorder-background-status[data-kind=warning]{color:#854a0e}
.clinical-recorder-workspace[hidden]{display:none}.clinical-recorder-history-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.8fr);align-items:end;gap:14px;margin-bottom:10px}.clinical-recorder-history-toolbar h3{margin:0;color:var(--ink);font-size:1rem}.clinical-recorder-history-toolbar p{margin:2px 0 0;color:var(--muted);font-size:.76rem}.clinical-recorder-history-toolbar input{width:100%;min-height:40px}
#clinicalRecorderRecent.is-reviewing>.clinical-recorder-record:not(.is-reviewing){display:none}.clinical-recorder-history.is-reviewing .clinical-recorder-history-toolbar{display:none}.clinical-recorder-record.is-reviewing{display:block;padding:0;border-top:0}.clinical-recorder-record.is-reviewing>.clinical-recorder-record__summary,.clinical-recorder-record.is-reviewing>.clinical-recorder-record__meta{display:none}
.clinical-review-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}.clinical-review-heading span{color:var(--muted);font-size:.74rem;font-weight:650}.clinical-review-back{min-height:36px;padding:6px 9px;font-size:.78rem}.clinical-recorder-record.is-reviewing .clinical-transcript-panel{margin:0;padding:0;background:transparent}
.clinical-transcript-progress{display:grid;gap:7px;margin:5px 0 2px;padding:10px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}.clinical-transcript-progress[hidden]{display:none}.clinical-transcript-progress>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.clinical-transcript-progress strong{color:var(--ink);font-size:.8rem;font-variant-numeric:tabular-nums}.clinical-transcript-progress span{color:var(--muted);font-size:.72rem;font-variant-numeric:tabular-nums;text-align:right}.clinical-transcript-progress progress{width:100%;height:7px;overflow:hidden;border:0;border-radius:999px;background:var(--line-subtle);accent-color:var(--brand)}.clinical-transcript-progress progress::-webkit-progress-bar{border-radius:999px;background:var(--line-subtle)}.clinical-transcript-progress progress::-webkit-progress-value{border-radius:999px;background:var(--brand)}.clinical-transcript-progress progress::-moz-progress-bar{border-radius:999px;background:var(--brand)}.clinical-transcript-progress[data-state=complete] progress{accent-color:#067647}
/* Durable capture: a calm connection banner and per-recording upload/transcription chips. */
.clinical-recorder-connection{margin:6px 0 0;padding:7px 10px;border:1px solid #fedf89;border-radius:9px;background:#fffcf5;color:#854a0e;font-size:.76rem;line-height:1.4}.clinical-recorder-connection[hidden]{display:none}
.clinical-recorder-owner{display:block;color:var(--muted);font-size:.72rem}
.clinical-transcription-chip{padding:3px 7px;border-radius:999px;font-size:.72rem;font-weight:700;background:var(--panel-subtle);color:var(--muted)}.clinical-transcription-chip.is-ready{background:#ecfdf3;color:#067647}.clinical-transcription-chip.is-failed{background:#fef3f2;color:#b42318}.clinical-transcription-chip.is-queued,.clinical-transcription-chip.is-running{background:var(--brand-soft);color:var(--brand)}.clinical-transcription-chip.is-waiting_for_worker,.clinical-transcription-chip.is-uploading{background:#fff4e5;color:#854a0e}
.clinical-note-chip.is-waiting_for_live{background:#fff4e5;color:#854a0e}
.clinical-recorder-record.is-local .clinical-recorder-local-actions{display:flex;flex-wrap:wrap;gap:6px}.clinical-recorder-local-actions .home-btn{min-height:32px;padding:4px 9px;font-size:.74rem}
.clinical-transcript-retry[hidden]{display:none}
/* A stopped or waiting job reads as stopped/waiting, never as still running. */
.clinical-transcript-progress[data-state=failed] progress{accent-color:#b42318}.clinical-transcript-progress[data-state=failed] progress::-webkit-progress-value{background:#b42318}.clinical-transcript-progress[data-state=failed] progress::-moz-progress-bar{background:#b42318}.clinical-transcript-progress[data-state=waiting_for_worker] progress{accent-color:#b54708}.clinical-transcript-progress[data-state=waiting_for_worker] progress::-webkit-progress-value{background:#b54708}.clinical-transcript-progress[data-state=waiting_for_worker] progress::-moz-progress-bar{background:#b54708}
/* Compact history rows: the review action keeps one fixed place beside the title on
   narrow screens, and stays short while an invisible margin keeps a 44px touch target. */
.clinical-recorder-record:not(.is-local):not(.is-reviewing){position:relative}
/* The History/New tabs bar is sticky over the recorder body; scrolling a row
   into view must land below it, not under it. */
.clinical-recorder-record{scroll-margin-top:64px}
@media(max-width:640px){.clinical-recorder-record:not(.is-local):not(.is-reviewing){padding-right:76px}.clinical-recorder-record:not(.is-local):not(.is-reviewing) .clinical-recording-review{position:absolute;top:8px;right:0;min-height:30px;padding:4px 12px}.clinical-recorder-record:not(.is-local):not(.is-reviewing) .clinical-recording-review::before{content:"";position:absolute;inset:-7px -4px}.clinical-recorder-record__meta{gap:3px 8px}}

@media(max-width:640px){.clinical-recorder-tabs{top:-14px;margin:-14px -16px 12px;padding-inline:16px}.clinical-recorder-tabs button{min-height:44px}.clinical-recorder-history-toolbar{grid-template-columns:1fr;gap:9px}.clinical-review-heading{align-items:flex-start;flex-direction:column-reverse}.clinical-review-back{min-height:44px}.clinical-transcript-progress>div{align-items:flex-start;flex-direction:column;gap:2px}.clinical-transcript-progress span{text-align:left}.clinical-recorder-record.is-reviewing .clinical-note-shell{margin-inline:-4px}}

.clinical-decision-spine{margin:8px 0 14px;padding:11px;border:1px solid color-mix(in srgb,var(--brand) 24%,var(--line));border-radius:10px;background:color-mix(in srgb,var(--brand) 4%,var(--panel))}.clinical-decision-spine[hidden]{display:none}.clinical-decision-spine>strong{font-size:.82rem}.clinical-decision-spine>p{margin:3px 0 8px;color:var(--muted);font-size:.72rem}.clinical-decision-spine dl{display:grid;gap:6px;margin:0}.clinical-decision-spine dl>div{display:grid;grid-template-columns:minmax(120px,.34fr) minmax(0,1fr);gap:8px}.clinical-decision-spine dt{color:var(--ink-soft);font-size:.72rem;font-weight:700}.clinical-decision-spine dd{margin:0;color:var(--ink);font-size:.76rem;line-height:1.35}.clinical-decision-spine dd span{display:inline-flex;margin-right:6px;padding:1px 5px;border-radius:999px;background:var(--panel);color:var(--brand);font-size:.66rem;font-weight:700;text-transform:capitalize}
.clinical-decision-unverified{margin:0 0 10px;padding:9px 10px;border:1px solid #fedf89;border-radius:9px;background:#fffcf5;color:#854a0e}.clinical-decision-unverified strong{display:block;font-size:.8rem}.clinical-decision-unverified p{margin:3px 0 0;font-size:.72rem;line-height:1.4}.clinical-decision-unverified ul{margin:6px 0 0;padding-left:18px;font-size:.76rem;line-height:1.4;overflow-wrap:anywhere}.clinical-decision-unverified li+li{margin-top:3px}
@media(max-width:640px){.clinical-decision-spine dl>div{grid-template-columns:1fr;gap:2px}}
/* Review polish (2026-09-15): the clinical note lived in a fixed ~320px textarea
   whose own overflow:auto clipped long notes to the first part and trapped a
   nested scroll -- reviewers reported seeing "only the first half" and not being
   able to scroll it. Where the browser supports field-sizing (Chrome/Edge, the
   office capture browsers, and Android Chrome), the note grows to fit its content
   so the recorder body stays the single scroller and the whole note reads in one
   pass; browsers without it keep the earlier bounded, scrollable box unchanged.
   Vertical rhythm across the review sections is tightened so a note needs less
   scrolling and rows stay compact for quick chairside review. */
.clinical-note-text{min-height:clamp(150px,24dvh,220px)}
@supports (field-sizing:content){.clinical-note-text{field-sizing:content;height:auto;max-height:none;overflow:hidden}}
.clinical-note-shell{margin-top:10px;padding:11px 12px}
.clinical-note-editor{margin-top:10px}
.clinical-note-editor>label,.clinical-note-provider-row label{margin-bottom:4px}
.clinical-note-provider-row{margin-top:9px}
.clinical-note-actions{margin-top:10px}
.clinical-note-status{margin-top:7px}
.clinical-decision-spine{margin:6px 0 10px;padding:9px 10px}
.clinical-decision-spine>p{margin:2px 0 6px}
.clinical-decision-spine dl{gap:5px}
.clinical-transcript-panel{padding:6px 8px 10px}
.clinical-transcript-line{padding:6px 0}
.clinical-review-heading{margin-bottom:6px;padding-bottom:6px}

/* Appointment-request sheet keeps only its evidence body scrollable. */
@media (max-width: 640px) {
  .gate-modal-panel.appt-modal-panel.appt-readonly-panel {
    width: 100%;
    max-width: 100%;
    max-height: 92vh;
    box-sizing: border-box;
    overflow: hidden;
  }
}

/* Home density pass 2: one-line rows, inline header summary, freshness as tooltip, 2-col modules on wide screens. */
.home-work-module-head { align-items: center; padding: 6px 10px; }
.home-work-module-head > div { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex-wrap: wrap; }
.home-work-module-head p { margin: 0; font-size: .72rem; }
.home-work-info {
  display: inline-flex; width: 15px; height: 15px; margin-left: 4px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted);
  font-size: .62rem; font-style: italic; font-weight: 700; cursor: help; vertical-align: middle;
}
.home-work-list { gap: 7px; }
.home-work-item { grid-template-columns: minmax(0, 1fr) auto; padding: 4px 10px; gap: 10px; }
.home-work-item-copy { flex-direction: row; align-items: baseline; gap: 8px; }
.home-work-item-copy strong { flex: none; max-width: 60%; font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-work-item-copy span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
.home-work-item-actions .home-btn { min-height: 26px; padding: 2px 8px; }
.mentions-section-priority { margin-bottom: 8px; }
@media (min-width: 1280px) {
  .home-work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
@media (max-width: 640px) {
  .home-work-item-copy { flex-direction: column; gap: 1px; }
  .home-work-item-copy strong { max-width: none; white-space: normal; }
  .home-work-item-copy span { white-space: normal; }
  .home-work-item-actions .home-btn { min-height: 36px; }
}

/* Home density pass 3: never truncate. Rows wrap; 2 columns only when each column is wide enough. */
.home-work-item-copy { flex-wrap: wrap; row-gap: 0; }
.home-work-item-copy strong { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
.home-work-item-copy span { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
@media (min-width: 1280px) and (max-width: 1599px) {
  .home-work-list { grid-template-columns: 1fr; }
}
@media (min-width: 1600px) {
  .home-work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Workspace rows: badge and arrow own separate columns at every breakpoint. */
.home-workspaces .home-card { position: relative; }
.home-workspaces .home-card-badge {
  position: static; grid-column: 3; grid-row: 1; justify-self: end; margin-right: 0;
  min-width: 20px; height: 20px; padding: 0 6px; font-size: .7rem; box-shadow: none;
}
.home-workspaces .home-card-arrow { grid-column: 4; grid-row: 1; justify-self: end; }
.home-workspaces .home-card-desc { white-space: normal; }

/* Density pass 4: compact mentions (one line of meta, inline actions) and one-line workspace links. */
.mentions-section-priority .mention-card { padding: 6px 10px; margin-bottom: 5px; display: block; }
.mentions-section-priority .mention-card-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; }
.mentions-section-priority .mention-card-top .mention-time { margin-left: auto; }
.mentions-section-priority .mention-context { display: inline; margin: 0; font-size: .72rem; }
.mentions-section-priority .mention-excerpt {
  margin: 3px 0 4px; padding: 3px 8px; font-size: .82rem; line-height: 1.35; cursor: pointer;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
  overflow-wrap: anywhere;
}
.mentions-section-priority .mention-excerpt.is-expanded { display: block; -webkit-line-clamp: unset; line-clamp: unset; max-height: 40vh; overflow: auto; }
.mentions-section-priority .mention-actionbar { margin-top: 0; }
.mentions-section-priority .mention-actionbar-row { gap: 5px; }
.mentions-section-priority .mention-actionbar-row .home-btn,
.mentions-section-priority .mention-actions-toggle { min-height: 26px; padding: 2px 9px; font-size: .75rem; }
.mentions-section-priority .mention-actions-wrap { margin-top: 4px; }
.mentions-section-priority .mention-actions-wrap .mention-actions { gap: 4px; }
.mentions-section-priority .mention-actions-wrap .home-btn { min-height: 24px; padding: 1px 8px; font-size: .73rem; }
@media (min-width: 881px) {
  .home-workspaces .home-card { padding: 5px 10px; }
  .home-workspaces .home-card-desc { display: none; }
  .home-workspaces .home-card-icon { width: 26px; height: 26px; }
  .home-workspaces .home-card-icon svg { width: 15px; height: 15px; }
  .home-workspace-group h3 { margin-bottom: 3px; }
  .home-workspaces .home-cards { gap: 8px; }
}

/* Use wide monitors: more horizontal room means fewer scrolls. */
@media (min-width: 1280px) { .home-shell { max-width: 1088px; } }
@media (min-width: 1700px) { .home-shell { max-width: 1280px; } }

/* Very long titles (e.g. task text): clamp to two lines; the full text is in the tooltip. */
.home-work-item-copy strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; max-width: none; white-space: normal;
}

/* Mentions v3: header line = sender · status · context · time, buttons top-right, text below. */
.mentions-section-priority .mention-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px; align-items: center;
  padding: 5px 8px;
}
.mentions-section-priority .mention-card-top { grid-column: 1; grid-row: 1; min-width: 0; }
.mentions-section-priority .mention-card-top .mention-time { margin-left: 0; color: var(--muted); font-size: .7rem; }
.mentions-section-priority .mention-context { display: inline; color: var(--muted); font-size: .72rem; }
.mentions-section-priority .mention-excerpt { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.mentions-section-priority .mention-actionbar { display: contents; }
.mentions-section-priority .mention-actionbar-row { grid-column: 2; grid-row: 1; justify-content: flex-end; flex-wrap: nowrap; }
.mentions-section-priority .mention-actions-wrap { grid-column: 1 / -1; grid-row: 3; margin-top: 2px; }
.mentions-section-priority .mention-stream, .mentions-section-priority .mention-card > :not(.mention-card-top):not(.mention-excerpt):not(.mention-actionbar) { grid-column: 1 / -1; }

/* Work rows: the title must be allowed to shrink so it never runs under the action buttons. */
.home-work-item-copy { min-width: 0; }
.home-work-item-copy strong { flex: 0 1 auto; min-width: 0; }
.home-work-item-copy span { flex: 1 1 auto; }
@media (max-width: 640px) {
  .mentions-section-priority .mention-card { grid-template-columns: 1fr; }
  .mentions-section-priority .mention-actionbar-row { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .mentions-section-priority .mention-actions-wrap { grid-row: 4; }
}

/* Workspaces column on the LEFT (desktop); phone keeps the tab layout / source order. */
@media (min-width: 881px) {
  .home-dashboard { grid-template-columns: minmax(280px, .8fr) minmax(0, 1.7fr); }
  .home-workspaces { order: -1; }
}

/* Work rows v4: main action on the LEFT in a fixed slot (titles align), title is a link,
   secondary action sits right after the text instead of across the gap. */
.home-work-item { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 4px 10px; }
.home-work-item .home-work-lead { width: 96px; justify-content: center; }
.home-work-item-copy { align-items: center; }
.home-work-title { flex: 0 1 auto; min-width: 0; color: var(--ink); font-size: .84rem; font-weight: 650; line-height: 1.25; text-decoration: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.home-work-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.home-work-secondary { flex: none; min-height: 22px !important; padding: 0 8px !important; font-size: .7rem !important; margin-left: 4px; }
@media (max-width: 640px) {
  .home-work-item { grid-template-columns: 1fr; }
  .home-work-item .home-work-lead { order: 2; width: auto; justify-self: start; padding-inline: 14px; }
  .home-work-item-copy { order: 1; flex-wrap: wrap; }
}

/* More-menu row aligns under the (right-aligned) More button. */
.mentions-section-priority .mention-actions-wrap .mention-actions,
.mentions-section-priority .mention-actions-wrap > * { justify-content: flex-end; }

/* Workspaces: the column has spare width, so use it for larger type. */
@media (min-width: 881px) {
  .home-workspaces .home-card { padding: 7px 12px; gap: 12px; grid-template-columns: 30px minmax(0, 1fr) auto auto; }
  .home-workspaces .home-card-title { font-size: 1rem; }
  .home-workspaces .home-card-icon { width: 30px; height: 30px; }
  .home-workspaces .home-card-icon svg { width: 17px; height: 17px; }
  .home-workspace-group h3 { font-size: .74rem; }
  .home-workspaces .home-card-badge { grid-column: 3; margin-right: 0; font-size: .78rem; min-width: 24px; height: 22px; }
  .home-workspaces .home-card-arrow { grid-column: 4; }
}

/* Lead buttons: never wrap, never stretch with a two-line title. */
.home-work-item { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
.home-work-item .home-work-lead { width: 112px; height: 28px; min-height: 28px; align-self: center; white-space: nowrap; padding-inline: 6px; }
.home-work-secondary { white-space: nowrap; }
@media (max-width: 640px) {
  .home-work-item { grid-template-columns: 1fr; }
  .home-work-item .home-work-lead { width: auto; height: 36px; min-height: 36px; padding-inline: 14px; }
}

@media (min-width: 641px) {
  .home-work-item-copy { flex-wrap: nowrap; }
  .home-work-item-copy > span { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Tighter page: fixed-width workspaces rail, the work column gets the rest. */
@media (min-width: 881px) {
  .home-dashboard { grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
  .home-workspaces .home-card-title { font-size: .95rem; }
}

/* Center labels vertically in the fixed-height work buttons. */
.home-work-item .home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding-block: 0 !important; line-height: 1;
}

/* Secondary action ("Open task", "No reply needed") pinned to the right edge so it's always in the same spot. */
@media (min-width: 641px) {
  .home-work-item-copy .home-work-secondary { margin-left: auto; }
}

/* Lead buttons match the small secondary button: compact height and type. */
@media (min-width: 641px) {
  .home-work-item { grid-template-columns: 88px minmax(0, 1fr); }
  .home-work-item .home-work-lead { width: 88px; height: 22px; min-height: 22px; font-size: .7rem; padding-inline: 4px; }
}

@media (min-width: 881px) {
  .home-dashboard { grid-template-columns: 272px minmax(0, 1fr); }
  .home-workspaces .home-card-title { font-size: .92rem; white-space: nowrap; }
}
@media (min-width: 641px) {
  .home-work-item-copy > span { flex-shrink: 8; }
  .home-work-title { flex-shrink: 0; max-width: 70%; }
}

/* One button colour across Home rows and mentions: no filled indigo. Urgency is already shown by the row tint. */
.home-work-item .home-btn,
.home-work-item .home-btn-primary,
.mentions-section-priority .home-btn,
.mentions-section-priority .home-btn-primary {
  background: var(--panel); border-color: var(--line-strong); color: var(--ink);
}
.home-work-item .home-btn:hover,
.mentions-section-priority .home-btn:hover { background: var(--brand-soft, var(--panel-subtle)); border-color: var(--brand); }

/* Homepage responsive width: use the tablet canvas before introducing outer
   gutters, then spend genuinely wide desktop space on parallel workspace
   groups instead of a tall scrolling rail. */
.home-shell {
  width: 100%;
  max-width: 1440px;
  padding-inline: clamp(10px, 2vw, 24px);
  /* Keep the last workspace row clear of the three persistent support controls. */
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

@media (min-width: 1280px) {
  .home-dashboard {
    grid-template-columns: minmax(520px, .9fr) minmax(0, 1.1fr);
    gap: 20px;
  }
  .home-workspaces .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 12px;
  }
  .home-workspace-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
  }
  .home-workspaces .home-card-title { white-space: normal; }
}