/* OSSA clinician client. Tokens in tokens.css; nothing here names a colour directly. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.45;
  color: var(--type);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
}
[lang="ar"], .ar { font-family: var(--font-ar); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--aqua); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------------------------------------------------------------- primitives */

.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--type-muted);
}
.muted { color: var(--type-muted); }
.faint { color: var(--type-faint); }
.small { font-size: var(--t-small); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 36px; padding: 0 var(--s4);
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-control);
  background: transparent; cursor: pointer; font-size: var(--t-small); font-weight: 500;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--accent-wash); border-color: var(--accent); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; background: transparent; border-color: var(--hairline-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.pill { border-radius: 999px; }
.btn.ghost { border-color: transparent; }
.btn.ghost:hover { border-color: var(--hairline-strong); }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn.danger:hover { background: var(--danger-wash); border-color: var(--danger); }
.btn.sm { min-height: 28px; padding: 0 var(--s3); font-size: 12px; }
.iconbtn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid transparent; border-radius: var(--radius-control);
  background: transparent; cursor: pointer; color: var(--type-muted);
}
.iconbtn:hover { border-color: var(--hairline-strong); color: var(--type); }
.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.field { display: grid; gap: var(--s1); }
.field > span { font-size: var(--t-small); color: var(--type-muted); }
.input, .select {
  width: 100%; min-height: 38px; padding: 0 var(--s3);
  background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-control);
}
.input:focus, .select:focus { outline: none; border-color: var(--accent); }

.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border: 1px solid var(--hairline-strong); border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap; color: var(--type-muted);
}
.chip.eye { font-weight: 700; letter-spacing: 0.04em; color: var(--type); }
.chip.accent { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.chip.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); color: var(--warn); background: var(--warn-wash); }
.chip.danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: var(--danger-wash); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

.card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-surface); }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline); }
.card > .body { padding: var(--s4); }
.empty { padding: var(--s6) var(--s4); text-align: center; color: var(--type-muted); }

table.grid { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
table.grid th { text-align: start; font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--type-muted); padding: var(--s2) var(--s4); border-bottom: 1px solid var(--hairline); }
table.grid td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline); vertical-align: middle; }
table.grid tr.link { cursor: pointer; }
table.grid tr.link:hover td { background: var(--accent-wash); }
.num { font-variant-numeric: tabular-nums; }

.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border: 1px solid var(--hairline); background: var(--surface); font-size: var(--t-small); }
.notice.warn { border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: var(--warn-wash); color: var(--warn); }
.notice.danger { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-wash); color: var(--danger); }
.notice.ok { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-wash); color: var(--accent); }

/* Per eye, right eye on the left, how a clinician faces a patient. */
.eyes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--hairline); }
.eyes > div { padding: var(--s2) var(--s3); }
.eyes > div + div { border-inline-start: 1px solid var(--hairline); }
.eyes .eye-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--type-faint); }
.eyes .eye-val { font-size: var(--t-body); font-weight: 500; }
.eyes .eye-val.none { color: var(--type-faint); font-weight: 400; }

/* ---------------------------------------------------------------- shell */

.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; height: 100vh; }
.sidebar { position: relative; display: flex; flex-direction: column; min-height: 0; border-inline-end: 1px solid var(--hairline); }
/* The sidebar's edge, dragged to resize it. A wide invisible grip with a hairline that lights up. */
.nav-resize { position: absolute; top: 0; bottom: 0; inset-inline-end: -4px; width: 8px; cursor: col-resize; z-index: 5; touch-action: none; }
.nav-resize::after { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 3px; width: 2px; background: transparent; transition: background 0.15s var(--ease); }
.nav-resize:hover::after, .nav-resize:focus-visible::after, .shell.resizing .nav-resize::after { background: var(--accent); }
.nav-resize:focus-visible { outline: none; }
.shell.resizing { transition: none; cursor: col-resize; user-select: none; }
.shell.nav-closed .nav-resize { display: none; }
.brand { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s4) var(--s3); }
.brand .wordmark { height: 26px; width: auto; }
.brand .collapse { margin-inline-start: auto; color: var(--type-muted); }

/* Collapsed sidebar: a strip with the way back and a new consultation. */
.shell { transition: grid-template-columns 0.22s var(--ease); }
.sidebar .mini { display: none; }
@media (min-width: 821px) {
  .shell.nav-closed { grid-template-columns: 56px 1fr; }
  .shell.nav-closed .sidebar > :not(.mini) { display: none; }
  .shell.nav-closed .sidebar .mini { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s3) 0; }
}
.brand-sub { padding: 0 var(--s4) var(--s3); font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--type-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newconsult { margin: 0 var(--s3) var(--s3); justify-content: flex-start; }
.nav { overflow-y: auto; flex: 1; padding: 0 var(--s2) var(--s3); scrollbar-gutter: stable; }

/* Scrollbars stay out of sight: no track, and a thin faint thumb only while the pointer is
   over the area that scrolls (the whole sidebar, for its list). */
.nav, .page, .messages, .thread.start, .rail, .slash-menu, .pick-list { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.sidebar:hover .nav, .page:hover, .messages:hover, .thread.start:hover, .rail:hover, .slash-menu:hover, .pick-list:hover { scrollbar-color: var(--hairline-strong) transparent; }
:is(.nav, .page, .messages, .thread.start, .rail, .slash-menu, .pick-list)::-webkit-scrollbar { width: 6px; height: 6px; }
:is(.nav, .page, .messages, .thread.start, .rail, .slash-menu, .pick-list)::-webkit-scrollbar-track { background: transparent; }
:is(.nav, .page, .messages, .thread.start, .rail, .slash-menu, .pick-list)::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; }
:is(.sidebar:hover .nav, .page:hover, .messages:hover, .thread.start:hover, .rail:hover, .slash-menu:hover, .pick-list:hover)::-webkit-scrollbar-thumb { background: var(--hairline-strong); }
.nav .group { margin-top: var(--s3); }
.nav .group > .label { padding: var(--s2) var(--s3) var(--s1); color: var(--type-faint); }
.nav a {
  display: flex; align-items: center; gap: var(--s3); min-height: 34px; padding: 0 var(--s3);
  border-radius: var(--radius-control); color: var(--type-muted); font-size: 14px;
}
.nav a:hover { text-decoration: none; background: var(--accent-wash); color: var(--type); }
.nav a.active { background: var(--surface); color: var(--type); }
.nav a.active .icon { color: var(--accent); }
.nav a .count { margin-inline-start: auto; font-size: 11px; color: var(--accent); font-weight: 600; }
.nav .recent a { font-size: 13px; }
.nav .recent .mrn { margin-inline-start: auto; font-size: 11px; color: var(--type-faint); }
.profile { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--hairline); }
.avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 13px; flex: none; }
.profile .who { min-width: 0; flex: 1; }
.profile .who div { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile .who .role { font-size: 11px; color: var(--type-faint); text-transform: capitalize; }

.main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.topbar .wordmark { height: 20px; width: auto; }
.page { flex: 1; min-height: 0; overflow-y: auto; }
.page-inner { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s7); }
.page-inner.wide { max-width: none; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.page-head h1 { margin: var(--s1) 0 0; font-size: var(--t-display); font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.page-head p { margin: var(--s2) 0 0; color: var(--type-muted); max-width: 62ch; }
/* Tabs may slide sideways on a narrow screen, but never show a scrollbar: the active tab's
   underline overlaps the rule by a pixel, which would otherwise read as vertical overflow. */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--hairline); margin-bottom: var(--s5); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { border: 0; background: none; padding: var(--s3) var(--s3); cursor: pointer; color: var(--type-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 14px; white-space: nowrap; }
.tabs button.on { color: var(--type); border-bottom-color: var(--accent); }
.stack { display: grid; gap: var(--s4); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* ---------------------------------------------------------------- sphere */

.sphere-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto var(--s5); }
.sphere {
  position: absolute; inset: 24px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--aqua) 0%, var(--mint) 30%, var(--teal) 62%, var(--teal-deep) 100%);
  animation: breathe 7s var(--ease) infinite;
}
.rings span { position: absolute; inset: 0; border: 1px solid var(--hairline-strong); border-radius: 50%; }
.rings span:nth-child(2) { inset: -18px; opacity: 0.6; }
.rings span:nth-child(3) { inset: -38px; opacity: 0.3; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .sphere { animation: none; } * { transition: none !important; } }

/* ---------------------------------------------------------------- logo, loader, splash */

/* Paths and timings from Logo And Animation/, see js/logo.js. The splash is condensed from
   the designer's 7.9s: one spin instead of two, so the word arrives at 2.5s. */
.logo-ring { fill: var(--logo-ring); }
.logo-lens, .logo-word { fill: var(--logo-ink); }
.wordmark, .logo-mark, .loader-mark { display: block; flex: none; }

.loading { display: grid; justify-items: center; gap: var(--s3); }
.loader-mark { width: 44px; height: 44px; }
.loader-mark .logo-mspin circle { animation: ossa-dash-loop 3.2s linear infinite both; }
.loader-mark .logo-mspin { transform-origin: 585px 609px; animation: ossa-spin-loop 3.2s linear infinite both; }
.loader-mark .logo-lens { transform-box: fill-box; transform-origin: center; animation: ossa-blink-loop 3.2s linear infinite both; }

@keyframes ossa-dash-loop {
  0%      { stroke-dasharray: 150 3000; stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  25%     { stroke-dasharray: 1000 3000; stroke-dashoffset: -300; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  49.969% { stroke-dasharray: 150 3000; stroke-dashoffset: -1420.8; }
  50%     { stroke-dasharray: 150 3000; stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  75%     { stroke-dasharray: 1000 3000; stroke-dashoffset: -300; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  99.969%, 100% { stroke-dasharray: 150 3000; stroke-dashoffset: -1420.8; }
}
@keyframes ossa-spin-loop { from { transform: rotate(0deg); } to { transform: rotate(720deg); } }
@keyframes ossa-blink-loop {
  0%, 50%, 100% { transform: scale(1, 1); }
  40.625%, 90.625% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  45%, 95% { transform: scale(1, .08); animation-timing-function: cubic-bezier(.65,0,.35,1); }
}

.splash {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--canvas); cursor: pointer; transition: opacity 0.24s var(--ease);
}
.splash.leaving { opacity: 0; }
.splash-lockup { width: min(300px, 56vw); height: auto; }
.splash-lockup .logo-mspin circle { animation: ossa-dash-intro 4.5s linear 1 both; }
.splash-lockup .logo-mspin { transform-origin: 585px 609px; animation: ossa-spin-intro 4.5s linear 1 both; }
.splash-lockup .logo-lens { transform-box: fill-box; transform-origin: center; animation: ossa-blink-intro 4.5s linear 1 both; }
.splash-lockup .logo-slide, .splash-lockup .logo-edge { animation: ossa-slide-intro 4.5s linear 1 both; }
.splash-lockup .logo-word { animation: ossa-word-intro 4.5s linear 1 both; }
.splash-lockup .logo-all { animation: ossa-fade-intro 4.5s linear 1 both; }

@keyframes ossa-dash-intro {
  0%      { stroke-dasharray: 150 3000; stroke-dashoffset: 0; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  17.778% { stroke-dasharray: 1000 3000; stroke-dashoffset: -300; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  35.556% { stroke-dasharray: 150 3000; stroke-dashoffset: -1420.8; animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  53.333%, 100% { stroke-dasharray: 1570.8 3000; stroke-dashoffset: 0; }
}
@keyframes ossa-spin-intro {
  0%      { transform: rotate(0deg); animation-timing-function: linear; }
  35.556% { transform: rotate(360deg); animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  55.556%, 100% { transform: rotate(720deg); }
}
@keyframes ossa-blink-intro {
  0%, 35.556%, 100% { transform: scale(1, 1); }
  28.889% { transform: scale(1, 1); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  32% { transform: scale(1, .08); animation-timing-function: cubic-bezier(.65,0,.35,1); }
}
@keyframes ossa-slide-intro {
  0%, 55.556% { transform: translateX(566px); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  73.333%, 100% { transform: translateX(0); }
}
@keyframes ossa-word-intro {
  0%, 55.556% { transform: translateX(-815px); animation-timing-function: cubic-bezier(.65,0,.35,1); }
  75.556%, 100% { transform: translateX(0); }
}
@keyframes ossa-fade-intro {
  0%, 88.889% { opacity: 1; animation-timing-function: cubic-bezier(.65,0,.35,1); }
  98.889%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-mark .logo-mspin, .loader-mark .logo-mspin circle, .loader-mark .logo-lens { animation: none; }
  .loader-mark .logo-mspin circle { stroke-dasharray: 1000 3000; }
}

/* ---------------------------------------------------------------- consultation */

.consult { display: grid; grid-template-columns: 1fr var(--rail); height: 100%; min-height: 0; }
.consult.no-rail { grid-template-columns: 1fr; }
.thread { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.idbar { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-bottom: 1px solid var(--hairline); background: var(--surface); min-height: 60px; }
.idbar .who { min-width: 0; }
.idbar .nm { font-size: 16px; font-weight: 600; }
.idbar .meta { font-size: 12px; color: var(--type-muted); }
.idbar .grow { flex: 1; }
.messages { flex: 1; overflow-y: auto; padding: var(--s5) var(--s5) var(--s4); }
.messages-inner { max-width: 760px; margin: 0 auto; display: grid; gap: var(--s4); }

.empty-state { flex: 1; display: grid; place-items: center; padding: var(--s6) var(--s5); text-align: center; }
.empty-state h1 { font-size: var(--t-hero); font-weight: 400; line-height: 0.95; letter-spacing: -0.015em; margin: 0 0 var(--s3); }
.empty-state h1 em { font-style: normal; color: var(--accent); }
.empty-state p { color: var(--type-muted); margin: 0 auto; max-width: 46ch; }

/* A new consultation: the greeting, today's book and the composer read as one group,
   centred together, instead of the composer stranded at the foot of the page. */
.thread.start { justify-content: center; overflow-y: auto; }
.thread .opening { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.thread.start .opening { flex: 0 0 auto; }
.thread.start .empty-state { flex: 0 0 auto; padding-bottom: var(--s5); }
.thread.start .sphere-wrap { width: 132px; height: 132px; margin-bottom: var(--s4); }
.thread.start .composer-wrap { padding-bottom: var(--s6); }

.upnext { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2); max-width: 760px; margin: 0 auto var(--s4); padding: 0 var(--s5); }
.upnext:empty { display: none; }
.upnext > .label { color: var(--type-faint); margin-inline-end: var(--s1); }
.upnext-item { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 var(--s3); border: 1px solid var(--hairline-strong); border-radius: 999px; background: var(--surface); color: var(--type); font-size: 13px; cursor: pointer; }
.upnext-item:hover { text-decoration: none; border-color: var(--accent); }
.upnext-item.on { border-color: var(--accent); background: var(--accent-wash); }
.upnext-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.upnext-item.resume { border-style: dashed; }

.msg { display: grid; gap: var(--s2); }
.msg .said { justify-self: end; max-width: 82%; padding: var(--s3) var(--s4); background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.msg .said-meta { justify-self: end; font-size: 11px; color: var(--type-faint); }
.msg .nothing { font-size: 12px; color: var(--type-faint); padding-inline-start: var(--s3); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Sending: the bubble lifts out of the composer, OSSA reads, then the captured facts drop
   in one by one. Only what the last action added animates; a refresh leaves the rest still. */
.msg.sending .said { animation: ossa-said-in 0.42s var(--ease) both; transform-origin: 100% 100%; }
html[dir="rtl"] .msg.sending .said { transform-origin: 0 100%; }
/* A bubble carried over from the new-consultation screen has already made its entrance. */
.msg.sending.settled .said, .msg.sending.settled .reading { animation: none; }
.msg .reading { display: flex; align-items: center; gap: var(--s2); padding-inline-start: var(--s3); font-size: 12px; color: var(--type-faint); animation: fade 0.3s 0.25s var(--ease) both; }
.msg .reading .loader-mark { width: 18px; height: 18px; }
.msg.new .fact { animation: rise 0.32s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.msg.new .nothing { animation: fade 0.3s var(--ease) both; }
.composer .send.launch .icon { animation: ossa-send-launch 0.5s var(--ease); }
.composer .send.launch { animation: ossa-send-press 0.3s var(--ease); }
@keyframes ossa-said-in {
  from { opacity: 0; transform: translateY(28px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes ossa-send-launch {
  0%   { transform: none; opacity: 1; }
  40%  { transform: translateY(-16px); opacity: 0; }
  41%  { transform: translateY(12px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes ossa-send-press { 0%, 100% { transform: none; } 35% { transform: scale(0.86); } }
@media (prefers-reduced-motion: reduce) {
  .msg.sending .said, .msg .reading, .msg.new .fact, .msg.new .nothing,
  .composer .send.launch, .composer .send.launch .icon { animation: none; }
}

/* OSSA's reply: left of the thread, the mark beside the name, advice and not a record. */
.msg.reply { justify-items: start; }
.msg.reply.new { animation: rise 0.35s var(--ease) both; }
.reply-head { display: flex; align-items: center; gap: var(--s2); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--type-muted); }
.reply-mark { width: 18px; height: 18px; }
.reply-text { max-width: 82%; white-space: pre-wrap; line-height: 1.5; padding-inline-start: 26px; }
/* The writing edge: a thin caret that breathes rather than blinks. */
.reply-text.typing::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em; margin-inline-start: 3px;
  vertical-align: text-bottom; border-radius: 1px; background: var(--accent); animation: caret 1.1s var(--ease) infinite;
}
@keyframes caret { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
/* Before the first word: OSSA's place in the thread, already where the answer will be. */
.msg.reply.live { animation: fade 0.25s var(--ease) both; }
.reply-wait { display: inline-flex; align-items: center; gap: var(--s2); font-size: 13px; color: var(--type-faint); }
.reply-wait .loader-mark { width: 18px; height: 18px; }
.idbar .pending-name { margin-inline-start: var(--s2); font-size: 11px; vertical-align: middle; }
.msg.reply .said-meta { justify-self: start; padding-inline-start: 26px; }

/* A recorded segment reads as a transcript, not as something typed. */
.said.transcript { background: var(--surface-sunk); border-style: dashed; display: grid; gap: var(--s1); }
.transcript-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--type-faint); }
.transcript-head .icon { width: 14px; height: 14px; }
.said.transcript .turn { margin: 0; }
.said.transcript .turn b { font-weight: 600; }

.composer .iconbtn.mic.on { color: var(--danger); }
.recbar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-bottom: var(--s2); padding: var(--s2) var(--s3); border: 1px solid var(--hairline-strong);
  border-radius: 14px; background: var(--surface); font-size: 13px; animation: rise 0.25s var(--ease) both;
}
.recbar[hidden] { display: none; }
.recbar .grow { flex: 1; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--type-faint); flex: none; }
.recbar.live .rec-dot { background: var(--danger); animation: rec-pulse 1.4s ease-in-out infinite; }
.rec-state { font-weight: 600; }
.rec-time { font-variant-numeric: tabular-nums; color: var(--type-muted); }
.rec-meter { display: inline-flex; align-items: center; gap: 2px; height: 16px; --level: 0; }
.rec-meter i { width: 3px; border-radius: 2px; background: var(--accent); height: calc(3px + var(--level) * 13px); transition: height 0.08s linear; }
.rec-meter i:nth-child(2), .rec-meter i:nth-child(4) { height: calc(3px + var(--level) * 9px); }
.rec-meter i:nth-child(1), .rec-meter i:nth-child(5) { height: calc(3px + var(--level) * 5px); }
.rec-queue { display: inline-flex; align-items: center; gap: 6px; color: var(--type-muted); }
.rec-queue .loader-mark { width: 16px; height: 16px; }
@keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .recbar, .recbar.live .rec-dot, .msg.reply.new, .reply-text.typing::after { animation: none; }
}

/* The ledger: one ruled line per captured fact, quoting what it came from. */
.ledger { display: grid; gap: 2px; }
.fact {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); align-items: start;
  padding: var(--s2) var(--s3); background: var(--ledger); border-inline-start: 3px solid var(--ledger-rule);
}
.fact .what { font-size: 14px; }
.fact .what b { font-weight: 600; }
.fact .from { grid-column: 1; font-size: 12px; color: var(--type-muted); }
.fact .from::before { content: "“"; } .fact .from::after { content: "”"; }
.fact .acts { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: var(--s1); align-items: center; }
.fact.pending { background: var(--warn-wash); border-inline-start-color: var(--warn); }
.fact.rejected, .fact.retracted { background: transparent; border-inline-start-color: var(--hairline-strong); color: var(--type-faint); }
.fact.rejected .what, .fact.retracted .what { text-decoration: line-through; }
.fact .x { width: 26px; height: 26px; }

.composer-wrap { padding: 0 var(--s5) var(--s4); }
.composer-inner { max-width: 760px; margin: 0 auto; }
.composer { border: 1px solid var(--hairline-strong); background: var(--surface); border-radius: 18px; padding: var(--s2); }
.composer:focus-within { border-color: var(--accent); }
.composer textarea { width: 100%; border: 0; outline: 0; resize: none; background: transparent; padding: var(--s2) var(--s3); min-height: 48px; max-height: 220px; line-height: 1.45; }
.composer .bar { display: flex; align-items: center; gap: var(--s2); }
.composer .bar .grow { flex: 1; }
.composer .send { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; }
.composer .send:disabled { background: var(--hairline-strong); cursor: not-allowed; }
.patient-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--s2); border: 0; border-radius: 6px; background: transparent; cursor: pointer; font-size: 12px; color: var(--type-faint); }
.patient-chip .icon { width: 14px; height: 14px; }
.patient-chip:hover { background: var(--accent-wash); color: var(--type); }
.patient-chip { min-width: 0; max-width: 46%; }
.patient-chip .pc-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.patient-chip.set { color: var(--accent); }

/* Who and what kind of visit: plain text under the box, lit only on hover. */
.composer-under { display: flex; align-items: center; gap: var(--s1); padding: 6px var(--s2) 0; }
.under-select { appearance: none; -webkit-appearance: none; height: 26px; padding: 0 var(--s2); border: 0; border-radius: 6px; background: transparent; color: var(--type-faint); font: inherit; font-size: 12px; cursor: pointer; }
.under-select:hover, .under-select:focus-visible { background: var(--accent-wash); color: var(--type); }
.under-select option { color: var(--type); background: var(--surface); }

/* The next suggestion, dimmed, on the row under what is being typed. */
.composer textarea.hinted { min-height: 0; padding-bottom: 2px; }
.composer .ghost { display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s3) var(--s1); font-size: 13px; color: var(--type-faint); }
.composer .ghost[hidden] { display: none; }
.composer .ghost kbd { font: inherit; font-size: 10.5px; padding: 1px 6px; border: 1px solid var(--hairline-strong); border-radius: 4px; color: var(--type-faint); }
.composer-foot { text-align: center; font-size: 11px; color: var(--type-faint); margin-top: var(--s2); }
.slash-menu { border: 1px solid var(--hairline-strong); background: var(--surface); margin-bottom: var(--s2); max-height: 260px; overflow-y: auto; }
.slash-menu button { display: flex; width: 100%; gap: var(--s3); align-items: baseline; padding: var(--s2) var(--s3); border: 0; background: none; cursor: pointer; text-align: start; border-bottom: 1px solid var(--hairline); }
.slash-menu button:hover, .slash-menu button.hi { background: var(--accent-wash); }

.rail { border-inline-start: 1px solid var(--hairline); background: var(--surface); overflow-y: auto; min-height: 0; }
.rail-head { padding: var(--s4); border-bottom: 1px solid var(--hairline); }
.progress { height: 3px; background: var(--surface-sunk); margin-top: var(--s2); }
.progress > i { display: block; height: 100%; background: var(--teal); transition: width 0.4s var(--ease); }
.rail section { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline); }
.rail section > .label { margin-bottom: var(--s2); display: block; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--s3); font-size: 13px; }
.kv dt { color: var(--type-muted); }
.kv dd { margin: 0; }
.eyerow { display: grid; grid-template-columns: 76px 1fr 1fr; font-size: 13px; border-bottom: 1px solid var(--hairline); }
.eyerow > * { padding: 5px 0; }
.eyerow .k { color: var(--type-muted); }
.eyerow.head > * { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--type-faint); }

/* ---------------------------------------------------------------- review */

.proposal { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding: var(--s4); border-bottom: 1px solid var(--hairline); }
.proposal:last-child { border-bottom: 0; }
.proposal .title { font-weight: 600; }
.proposal .why { font-size: 13px; color: var(--type-muted); }
.proposal .src { font-size: 12px; color: var(--type-muted); padding-inline-start: var(--s3); border-inline-start: 2px solid var(--hairline-strong); }
.proposal .decide { display: flex; gap: var(--s2); align-items: start; }
.proposal.approved { background: var(--accent-wash); }
.proposal.rejected .title { text-decoration: line-through; color: var(--type-faint); }

/* ---------------------------------------------------------------- board */

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 1fr); gap: 0; overflow-x: auto; border: 1px solid var(--hairline); background: var(--surface); }
.lane { border-inline-end: 1px solid var(--hairline); min-height: 360px; display: flex; flex-direction: column; }
.lane:last-child { border-inline-end: 0; }
.lane > header { padding: var(--s3); border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: baseline; }
.lane.stuck > header { background: var(--warn-wash); }
.lane .cards { padding: var(--s2); display: grid; gap: var(--s2); align-content: start; }
.pcard { border: 1px solid var(--hairline); padding: var(--s3); display: grid; gap: var(--s2); background: var(--canvas); }
.pcard.priority { border-inline-start: 3px solid var(--danger); }
.pcard .nm { font-weight: 600; font-size: 14px; }
.pcard .wait { font-size: 22px; font-weight: 500; line-height: 1; }
.pcard .wait small { font-size: 11px; color: var(--type-muted); font-weight: 400; margin-inline-start: 2px; }
.pcard .wait.long { color: var(--warn); }

/* ---------------------------------------------------------------- dashboard: 2x5 cells */

.cells { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--hairline); border-inline-start: 1px solid var(--hairline); }
.cell { padding: var(--s4); border-bottom: 1px solid var(--hairline); border-inline-end: 1px solid var(--hairline); background: var(--surface); min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; }
.cell .v { font-size: var(--t-display); font-weight: 400; line-height: 1; }
.cell .v small { font-size: 13px; color: var(--type-muted); margin-inline-start: 4px; }
.cell.alert .v { color: var(--warn); }
.cell.good .v { color: var(--accent); }

/* ---------------------------------------------------------------- chart */

.id-hero { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); align-items: end; margin-bottom: var(--s5); }
.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s3); font-size: 13px; color: var(--type-muted); }
.back-link .icon { width: 16px; height: 16px; }
.back-link:hover { color: var(--accent); text-decoration: none; }
html[dir="rtl"] .back-link .icon { transform: scaleX(-1); }
.id-hero h1 { font-size: var(--t-display); font-weight: 500; margin: var(--s1) 0 0; line-height: 1; }
.id-hero .ar { font-size: 20px; color: var(--type-muted); margin-top: var(--s2); }
.id-hero .facts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.trend svg { width: 100%; height: 220px; display: block; }
.trend .legend { display: flex; gap: var(--s4); font-size: 12px; color: var(--type-muted); }
.trend .legend i { display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-inline-end: 6px; }

/* ---------------------------------------------------------------- modal + toast */

.scrim { position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: start center; padding-top: 12vh; z-index: 40; animation: fade 0.15s ease both; }
.modal { width: min(560px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--hairline); }
.modal > header { padding: var(--s4); border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; }
.modal > .body { padding: var(--s4); display: grid; gap: var(--s3); }
.modal > footer { padding: var(--s3) var(--s4); border-top: 1px solid var(--hairline); display: flex; justify-content: flex-end; gap: var(--s2); }
.pick-list { max-height: 320px; overflow-y: auto; border: 1px solid var(--hairline); }
.pick-list button { display: flex; width: 100%; justify-content: space-between; gap: var(--s3); padding: var(--s3); border: 0; border-bottom: 1px solid var(--hairline); background: none; cursor: pointer; text-align: start; }
.pick-list button:hover { background: var(--accent-wash); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* Bottom right: clear of page titles and of the message box, which is centred. On a phone
   the box spans the width, so toasts move to the top there. */
.toasts { position: fixed; bottom: var(--s5); right: var(--s5); display: grid; justify-items: end; gap: var(--s2); z-index: 60; max-width: min(420px, calc(100vw - 2 * var(--s5))); }
@media (max-width: 820px) { .toasts { bottom: auto; top: var(--s3); right: var(--s3); left: var(--s3); max-width: none; justify-items: stretch; } }
.toast { padding: var(--s3) var(--s4); background: var(--ink); border: 1px solid var(--hairline-strong); color: var(--white); font-size: 13px; border-inline-start: 3px solid var(--teal); animation: rise 0.25s var(--ease) both; max-width: 520px; }
.toast.error { border-inline-start-color: #ff8a80; }

/* ---------------------------------------------------------------- sign in */

.signin { display: grid; grid-template-columns: 1.1fr 1fr; min-height: 100vh; }
.signin .panel { display: flex; flex-direction: column; gap: var(--s7); padding: var(--s6); position: relative; overflow: hidden; }
.signin .panel > .label { margin-top: auto; }
.signin .panel .brand .wordmark { height: 36px; }
/* 0.98, not the 0.8 display leading: Figtree is taller, and at 0.8 the "y" of "Every" hits the "t" of "story". */
.signin .panel h1 { font-size: 76px; font-weight: 400; line-height: 0.98; letter-spacing: -0.02em; margin: 0; }
.signin .panel h1 em { font-style: normal; color: var(--accent); }
/* Bottom-right and clear of the copy: white type over a bright sphere is illegible. */
.signin .panel .big-sphere { position: absolute; width: 380px; height: 380px; right: -130px; bottom: -130px; border-radius: 50%; background: linear-gradient(75deg, var(--teal-deep) 0%, var(--teal) 22%, var(--mint) 60%, var(--aqua) 100%); opacity: 0.9; }
.signin .panel .big-sphere::after { content: ""; position: absolute; inset: -40px; border: 1px solid var(--hairline-strong); border-radius: 50%; }
.signin form { align-self: center; justify-self: center; width: min(380px, calc(100% - 48px)); display: grid; gap: var(--s4); }
.signin form h2 { font-size: var(--t-display); font-weight: 500; margin: 0; }
.or-rule { display: flex; align-items: center; gap: var(--s3); color: var(--type-faint); font-size: 12px; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }
/* Google's button is a light-scheme frame. Inside a dark page, Chrome paints an opaque
   white backdrop behind any frame whose colour scheme differs from its container's, the
   white box around the button. Declaring the container light keeps the frame transparent. */
.google-host { min-height: 44px; display: flex; justify-content: center; color-scheme: light; }
.demo-accounts { font-size: 12px; color: var(--type-muted); border-top: 1px solid var(--hairline); padding-top: var(--s3); }
.demo-accounts button { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; font-size: 12px; }

/* ---------------------------------------------------------------- narrow */

@media (min-width: 1101px) {
  .consult.rail-closed { grid-template-columns: 1fr; }
  .consult.rail-closed .rail { display: none; }
}
.rail-head .spread .iconbtn { margin-inline-start: var(--s2); }
@media (max-width: 1100px) {
  .consult { grid-template-columns: 1fr; }
  .rail { display: none; }
  .consult.rail-open .rail { display: block; position: fixed; inset: 0 0 0 auto; width: min(360px, 100vw); z-index: 30; }
  .cells { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
  .shell { grid-template-columns: 1fr; }
  .nav-resize { display: none; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 50; transform: translateX(-102%); transition: transform 0.22s var(--ease); }
  .shell.drawer .sidebar { transform: none; }
  .shell.drawer::after { content: ""; position: fixed; inset: 0; background: var(--scrim); z-index: 45; }
  .topbar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--hairline); background: var(--surface); }
  /* The patient bar wraps: who on the first line, chips and actions under it. */
  .idbar { flex-wrap: wrap; row-gap: var(--s2); padding: var(--s3) var(--s4); }
  .idbar .who { flex: 1 1 calc(100% - 56px); }
  .idbar .meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-inner { padding: var(--s5) var(--s4) var(--s6); }
  .page-head { flex-direction: column; align-items: flex-start; }
  .page-head h1 { font-size: 28px; }
  .cols-2 { grid-template-columns: 1fr; }
  .signin { grid-template-columns: 1fr; }
  .signin .panel { min-height: 240px; }
  .signin .panel h1 { font-size: 46px; }
  .empty-state h1 { font-size: 34px; }
  .messages, .composer-wrap { padding-inline: var(--s3); }
  .idbar { padding-inline: var(--s3); }
}

/* ---------------------------------------------------------------- settings */

.choice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3); border: 1px solid var(--hairline); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.choice input { margin-top: 4px; accent-color: var(--accent); }
.secret { font: 600 22px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: 0.06em; padding: var(--s4); background: var(--surface-sunk); border: 1px dashed var(--hairline-strong); text-align: center; user-select: all; direction: ltr; }

/* ---------------------------------------------------------------- right to left */

/* Tracked capitals are a Latin device. Letter-spacing breaks the joins between Arabic
   letters, so in the Arabic interface every tracked label is set solid. */
/* No font override: Figtree has no Arabic glyphs, so Arabic falls through to Qomra while
   digits and Latin codes stay in Figtree, where a "1" cannot be mistaken for an alef. */
html[lang="ar"] .label, html[lang="ar"] .brand-sub, html[lang="ar"] table.grid th,
html[lang="ar"] .eyes .eye-tag, html[lang="ar"] .eyerow.head > * {
  letter-spacing: 0; text-transform: none;
}
html[lang="ar"] .label { font-size: 12px; }
html[lang="ar"] .page-head h1, html[lang="ar"] .id-hero h1, html[lang="ar"] .empty-state h1, html[lang="ar"] .signin .panel h1 { line-height: 1.15; letter-spacing: 0; }
html[lang="ar"] .signin .panel h1 { font-size: 64px; }

/* The eye split is physical, not a reading order: the right eye sits on the left of the
   screen because that is how a clinician faces the patient, in Arabic as in English. */
.eyes, .eyerow { direction: ltr; }
.eyes > div, .eyerow > * { direction: rtl; text-align: start; }
html[lang="en"] .eyes > div, html[lang="en"] .eyerow > * { direction: ltr; }

html[dir="rtl"] .msg .said { border-radius: 16px 16px 16px 4px; }
html[dir="rtl"] .signin .panel .big-sphere { right: auto; left: -130px; }
html[dir="rtl"] .icon.flip, html[dir="rtl"] .btn .icon:last-child:not(:first-child) { transform: scaleX(-1); }
@media (max-width: 820px) {
  html[dir="rtl"] .sidebar { inset: 0 0 0 auto; transform: translateX(102%); }
  html[dir="rtl"] .shell.drawer .sidebar { transform: none; }
}