/* Workspace look, shared by both shells. Loaded after each shell's feature
 * styles, so it wins at equal specificity.
 *
 * Oct 2026: the iOS app's look (ios/Nori/Support/Glass.swift + Theme.swift),
 * replacing the sage palette this file used to apply. The brand tokens in
 * tailwind.src.css were already the app's navy and teal, so nothing here
 * overrides a colour token any more. What it adds:
 *
 *  - the soft brand mesh (teal / sky / violet over mist) behind every page,
 *    the same four hues as `GlassBackdrop`;
 *  - translucent panels instead of flat white cards, with a white edge and a
 *    lift — the web's stand-in for `.glassEffect()`;
 *  - capsule buttons and segmented tab strips;
 *  - colour-tile navigation in the sidebar (`.ws-tile`), as `WorkspaceTile`.
 *
 * Performance: nothing here uses backdrop-filter (the composer's one blur
 * lives in glass.css). Panels are plain translucent fills, and every
 * scrolling element keeps an opaque background — the page scroller paints the
 * mesh into its own content with `background-attachment: local` — because
 * Chrome on a 1x display will not composite a transparent scroller and
 * repaints it on every frame (see glass.css). The chat thread stays white, as
 * the iOS chat screen does.
 *
 * Served immutable: bump ?v= in base.html AND base_page.html on any change. */

:root {
  --mesh-teal:   191 233 227;
  --mesh-sky:    214 230 251;
  --mesh-mist:   244 247 251;
  --mesh-violet: 231 224 248;
  --panel:        rgb(255 255 255 / .66);
  --panel-strong: rgb(255 255 255 / .86);
  --panel-edge:   rgb(255 255 255 / .85);
  --panel-line:   rgb(var(--c-line) / .55);
  --panel-shadow: inset 0 1px 0 rgb(255 255 255 / .9), 0 10px 28px rgb(11 31 58 / .06), 0 1px 3px rgb(11 31 58 / .05);
  --panel-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .9), 0 14px 34px rgb(11 31 58 / .1), 0 2px 5px rgb(11 31 58 / .06);
  --chip:        rgb(var(--c-ink) / .06);
  --chip-hover:  rgb(var(--c-ink) / .1);
  --track:       rgb(var(--c-ink) / .07);
  --workspace-accent: rgb(var(--c-teal-600));
  --mesh:
    radial-gradient(55% 45% at 0% 0%, rgb(var(--mesh-teal)) 0%, rgb(var(--mesh-teal) / 0) 100%),
    radial-gradient(50% 40% at 100% 0%, rgb(var(--mesh-sky)) 0%, rgb(var(--mesh-sky) / 0) 100%),
    radial-gradient(45% 45% at 100% 55%, rgb(var(--mesh-violet)) 0%, rgb(var(--mesh-violet) / 0) 100%),
    radial-gradient(55% 45% at 100% 100%, rgb(var(--mesh-teal)) 0%, rgb(var(--mesh-teal) / 0) 100%),
    radial-gradient(50% 45% at 0% 100%, rgb(var(--mesh-sky)) 0%, rgb(var(--mesh-sky) / 0) 100%);
  --evidence-doc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E");
}
html.theme-dark {
  --mesh-teal:   12 59 58;
  --mesh-sky:    19 40 74;
  --mesh-mist:   10 18 34;
  --mesh-violet: 30 26 61;
  --panel:        rgb(255 255 255 / .055);
  --panel-strong: rgb(var(--c-card) / .92);
  --panel-edge:   rgb(255 255 255 / .09);
  --panel-line:   rgb(255 255 255 / .08);
  --panel-shadow: inset 0 1px 0 rgb(255 255 255 / .05), 0 12px 30px rgb(0 0 0 / .32);
  --panel-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .07), 0 16px 36px rgb(0 0 0 / .42);
  --chip:        rgb(255 255 255 / .08);
  --chip-hover:  rgb(255 255 255 / .13);
  --track:       rgb(255 255 255 / .08);
}

body { letter-spacing: -.012em; }
:where(button, a, input, textarea, select):focus-visible {
  outline: 2px solid rgb(var(--c-teal-400));
  outline-offset: 3px;
}

/* ── The backdrop ──────────────────────────────────────────────────────────
   The shell never scrolls, so it can carry the mesh directly. */
.workspace-shell {
  background-color: rgb(var(--mesh-mist));
  background-image: var(--mesh);
}
/* The admin portal scrolls the document rather than <main>, so its <main>
   carries the full mesh without trouble. */
.admin-shell main {
  background-color: rgb(var(--mesh-mist));
  background-image: var(--mesh);
  background-attachment: local;
}
/* Every workspace page's <main> is itself the scroller, and the five-layer
   mesh stretched down the whole scroll height made them lag. They all get a
   light version instead: the chat thread's opaque card colour with two washes
   confined to a band at the top, so everything below it is a flat fill. Pages
   that scroll a wrapper or a message list rather than <main> (case and topic
   below lg, the Triage pages, the chat thread) put the same on that scroller. */
.workspace-shell main,
#case-scroll, #topic-scroll, #chat-messages,
#triage-messages, #guidelines-scroll, #triage-report-scroll {
  background-color: rgb(var(--c-card));
  background-image:
    radial-gradient(60% 100% at 0% 0%, rgb(var(--mesh-teal) / .6) 0%, rgb(var(--mesh-teal) / 0) 100%),
    radial-gradient(55% 90% at 100% 0%, rgb(var(--mesh-sky) / .7) 0%, rgb(var(--mesh-sky) / 0) 100%);
  background-size: 100% 560px;
  background-repeat: no-repeat;
  background-attachment: local;
}

/* ── Panels: the glass card ────────────────────────────────────────────────
   The templates' card convention is `bg-white border border-line rounded-2xl`
   (sometimes 3xl or xl). Inside a page that becomes a translucent panel. */
:is(.workspace-shell, .admin-shell) main :is(div, section, article, form, details, li, aside, a, label).bg-white.border:is(.rounded-2xl, .rounded-3xl) {
  background-color: var(--panel);
  border-color: var(--panel-edge);
  border-radius: 22px;
  box-shadow: var(--panel-shadow);
}
:is(.workspace-shell, .admin-shell) main :is(div, section, article, li, aside).bg-white.border.rounded-xl {
  background-color: var(--panel);
  border-color: var(--panel-edge);
  border-radius: 18px;
}
:is(.workspace-shell, .admin-shell) main a.bg-white.border:is(.rounded-2xl, .rounded-3xl):hover { box-shadow: var(--panel-shadow-hover); }
/* A dashed card is an empty state, not a surface. */
:is(.workspace-shell, .admin-shell) main .bg-white.border-dashed {
  background-color: rgb(255 255 255 / .35);
  border-color: rgb(var(--c-slate-300) / .8);
  box-shadow: none;
}
html.theme-dark :is(.workspace-shell, .admin-shell) main .bg-white.border-dashed { background-color: rgb(255 255 255 / .03); border-color: rgb(255 255 255 / .14); }
/* Rows and dividers inside a panel read softer on glass. */
:is(.workspace-shell, .admin-shell) main :is(.divide-line, .divide-y) > * + * { border-color: var(--panel-line); }

/* ── Controls ──────────────────────────────────────────────────────────────
   Capsule buttons, as every iOS action is. Primary keeps the brand teal with a
   faint vertical gradient (`Theme.teal.gradient`). */
:is(.workspace-shell, .admin-shell) :is(main, #topic-refine, #guidelines-history) :is(button, a, input[type=submit]).bg-teal-500,
.signin-form-panel button[type=submit] {
  border-radius: 999px;
  background-image: linear-gradient(180deg, rgb(255 255 255 / .12), rgb(255 255 255 / 0));
}
:is(.workspace-shell, .admin-shell) :is(main, #topic-refine, #guidelines-history) :is(button, a).bg-white.border:not(.rounded-2xl):not(.rounded-3xl):not(.rounded-full) {
  border-radius: 999px;
  background-color: var(--panel-strong);
  border-color: var(--panel-edge);
  box-shadow: 0 1px 2px rgb(11 31 58 / .06);
}
html.theme-dark :is(.workspace-shell, .admin-shell) :is(main, #topic-refine, #guidelines-history) :is(button, a).bg-white.border:not(.rounded-2xl):not(.rounded-3xl):not(.rounded-full) { border-color: rgb(255 255 255 / .1); }
:is(.workspace-shell, .admin-shell) main :is(button, a).bg-red-600,
:is(.workspace-shell, .admin-shell) main :is(button, a).bg-navy { border-radius: 999px; }

:is(.workspace-shell, .admin-shell) main :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]), select, textarea) {
  border-radius: 14px;
  background-color: var(--panel-strong);
  border-color: rgb(var(--c-line) / .9);
}
:is(.workspace-shell, .admin-shell) main :is(input[type=search], input[name=q]) { border-radius: 999px; }
:is(.workspace-shell, .admin-shell) main :is(input, select, textarea):focus {
  border-color: rgb(var(--c-teal-400));
  box-shadow: 0 0 0 3px rgb(var(--c-teal-100) / .6);
  outline: none;
}

/* Headings in a page: the app's large bold titles. */
:is(.workspace-shell, .admin-shell) main h1 { letter-spacing: -.025em; }

/* ── Segmented tab strips ──────────────────────────────────────────────────
   partials/cases_nav.html, account_nav.html and the other `data-tab-strip`
   bars become the iOS segmented control: a grey track, the current tab a white
   pill. The bar behind them stops being a white band. */
:is(.workspace-shell, .admin-shell) main div:has(> [data-tab-strip]) {
  background: transparent;
  border-bottom: 0;
}
[data-tab-strip] {
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 10px 12px 0;
  padding: 3px !important;
  gap: 2px !important;
  border-radius: 999px;
  background: var(--track);
}
@media (min-width: 640px) { [data-tab-strip] { margin: 14px 20px 0; } }
[data-tab-strip] > a {
  border-radius: 999px !important;
  padding: 7px 14px !important;
  color: rgb(var(--c-ink) / .78) !important;
  background: transparent !important;
}
[data-tab-strip] > a:hover { color: rgb(var(--c-ink)) !important; }
[data-tab-strip] > a[aria-current=page] {
  background: rgb(var(--c-card)) !important;
  color: rgb(var(--c-ink)) !important;
  box-shadow: 0 1px 3px rgb(11 31 58 / .12), 0 1px 1px rgb(11 31 58 / .06);
}
html.theme-dark [data-tab-strip] > a[aria-current=page] { background: rgb(255 255 255 / .16) !important; box-shadow: none; }
/* `data-segmented`: the same control inside a page (Today / All, Categories /
   All topics), without the bar's own margins. */
[data-segmented] {
  display: inline-flex; width: max-content; max-width: 100%;
  padding: 3px !important; gap: 2px !important;
  border: 0 !important; border-radius: 999px !important;
  background: var(--track) !important; box-shadow: none !important;
}
[data-segmented] > a {
  border-radius: 999px !important;
  padding: 6px 14px !important;
  color: rgb(var(--c-ink) / .78) !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
[data-segmented] > a:hover { color: rgb(var(--c-ink)) !important; }
[data-segmented] > a[aria-current=page] {
  background: rgb(var(--c-card)) !important;
  color: rgb(var(--c-ink)) !important;
  box-shadow: 0 1px 3px rgb(11 31 58 / .12), 0 1px 1px rgb(11 31 58 / .06) !important;
}
html.theme-dark [data-segmented] > a[aria-current=page] { background: rgb(255 255 255 / .16) !important; box-shadow: none !important; }

/* ── Sidebar ───────────────────────────────────────────────────────────────
   Transparent over the shell's mesh on a desktop; the drawer on a phone
   carries its own copy (it slides over page content). */
#sessions-sidebar, #app-sidebar:not(.admin-sidebar) {
  background: transparent;
  border-right: 0 !important;
}
.workspace-brand { position: relative; display: flex; align-items: center; flex-shrink: 0; gap: 10px; padding: 18px 14px 14px; }
.workspace-brand-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.1; white-space: nowrap; }
.workspace-brand-name > span { overflow: hidden; text-overflow: ellipsis; }
.workspace-brand-name > span:first-child { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: rgb(var(--c-ink)); }
.workspace-brand-tag { font-size: 12.5px; font-weight: 500; color: rgb(var(--c-muted)); letter-spacing: 0; margin-top: 2px; }
.workspace-brand-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* A round glass button (`GlassIconButton`): compose, collapse. */
.ws-round {
  width: 38px; height: 38px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  color: rgb(var(--c-teal-600));
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  box-shadow: var(--panel-shadow);
  transition: background-color .15s, transform .15s;
}
.ws-round:hover { background: var(--panel-strong); }
.ws-round:active { transform: scale(.94); }
.ws-round svg { width: 18px; height: 18px; }
.workspace-sidebar-toggle { width: 38px; height: 38px; }

.workspace-logo-button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px;
  background: rgb(var(--c-card)); border: 1px solid var(--panel-edge);
  box-shadow: 0 2px 8px rgb(11 31 58 / .1);
}
.workspace-logo-button img { width: 36px; height: 36px; }
.workspace-logo-button .ws-menu-icon, .ws-close-icon { display: none; }

.workspace-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 18px 16px 6px; color: rgb(var(--c-ink));
  font-size: 17px; font-weight: 800; letter-spacing: -.02em; text-transform: none;
}
.workspace-section-head button { font-size: 13.5px; font-weight: 700; color: rgb(var(--c-teal-600)); letter-spacing: 0; }
.workspace-section-head button:hover { text-decoration: underline; }

/* Workspace tiles: a two-column grid of glass tiles, each with a coloured
   icon square, a title and a one-line subtitle. */
.workspace-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 12px 4px; flex-shrink: 0; }
.ws-tile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
  min-width: 0; padding: 11px 11px 10px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--panel-edge); box-shadow: var(--panel-shadow);
  color: rgb(var(--c-ink)); text-decoration: none;
  transition: box-shadow .15s, transform .15s, background-color .15s;
}
.ws-tile:hover { box-shadow: var(--panel-shadow-hover); background: var(--panel-strong); }
.ws-tile:active { transform: scale(.98); }
.ws-tile[aria-current=page] { background: var(--panel-strong); border-color: rgb(var(--c-teal-400) / .55); box-shadow: 0 0 0 1px rgb(var(--c-teal-400) / .35), var(--panel-shadow); }
.ws-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 1px 2px rgb(0 0 0 / .12);
}
.ws-tile-icon svg { width: 18px; height: 18px; stroke-width: 2; }
.ws-tile-text { display: flex; flex-direction: column; min-width: 0; width: 100%; }
.ws-tile-title { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-tile-sub { margin-top: 2px; font-size: 11.5px; color: rgb(var(--c-muted)); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A full-width row inside the grid (Admin panel, Chat on non-chat pages). */
.ws-tile-row { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 14px; }
.ws-tile-row .ws-tile-icon { width: 28px; height: 28px; border-radius: 8px; }
.ws-tile-row .ws-tile-icon svg { width: 16px; height: 16px; }
.ws-blue   { background: linear-gradient(180deg, #4C9BFF, #2563EB); }
.ws-amber  { background: linear-gradient(180deg, #F7B23B, #D97706); }
.ws-violet { background: linear-gradient(180deg, #9F7AFA, #6D28D9); }
.ws-pink   { background: linear-gradient(180deg, #F58BC0, #DB2777); }
.ws-red    { background: linear-gradient(180deg, #F87171, #DC2626); }
.ws-green  { background: linear-gradient(180deg, #34D399, #059669); }
.ws-teal   { background: linear-gradient(180deg, #2DBBAE, #0C9488); }
.ws-navy   { background: linear-gradient(180deg, #2E4A73, #0B1F3A); }

/* On a desktop the sidebar sits beside the work all day and the chat list
   needs the height, so tiles drop their subtitle (the title says enough at a
   glance) and tighten. A phone drawer keeps the full tile, as in the app. */
@media (min-width: 768px) {
  .workspace-nav { gap: 7px; }
  .ws-tile { gap: 6px; padding: 9px 10px 8px; border-radius: 16px; }
  .ws-tile-icon { width: 28px; height: 28px; border-radius: 8px; }
  .ws-tile-icon svg { width: 16px; height: 16px; }
  .ws-tile-sub { display: none; }
  .ws-tile-row { padding: 7px 10px; border-radius: 13px; }
  .ws-tile-row .ws-tile-icon { width: 24px; height: 24px; border-radius: 7px; }
  .ws-tile-row .ws-tile-icon svg { width: 14px; height: 14px; }
}

/* Chat search and the chat list, as the iOS sidebar's "Chats" section. */
#sessions-sidebar #session-search { font-size: 14px; }
#sessions-sidebar .ws-search {
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 999px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .6);
}
.session-group-label { text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: rgb(var(--c-muted)) !important; padding-top: 12px !important; }
#sessions-sidebar .session-item, #all-chats-dialog .session-item { border-radius: 12px; padding-block: 9px; }
#sessions-sidebar .session-title { font-size: 14.5px; font-weight: 500; }
#sessions-sidebar .session-item:hover { background: var(--panel) !important; }
#sessions-sidebar .session-item.session-active { background: var(--panel-strong); box-shadow: var(--panel-shadow); }
#sessions-sidebar .session-item.session-active .session-title { font-weight: 700; }

/* Footer: the profile pill (avatar, name, role, the memory badge, then
   theme and sign out as round buttons) — `SidebarScreen`'s bottom capsule. */
.ws-profile {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  margin: 8px 10px max(10px, env(safe-area-inset-bottom)); padding: 7px;
  border-radius: 999px; background: var(--panel-strong); border: 1px solid var(--panel-edge); box-shadow: var(--panel-shadow);
}
.ws-avatar {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #19AE9F, #0A7C72); color: #fff; font-size: 14px; font-weight: 800;
}
.ws-badge {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  padding: 4px 9px; border-radius: 999px; background: rgb(var(--c-amberbg-100));
  border: 1px solid rgb(var(--c-amberbg-300) / .6);
  font-size: 12px; font-weight: 800; color: rgb(var(--c-amber-800)); text-decoration: none;
}
.ws-badge svg { width: 13px; height: 13px; }
.ws-profile .ws-round { width: 36px; height: 36px; color: rgb(var(--c-teal-600)); box-shadow: none; }
.ws-profile > .ws-round + form { margin-left: -4px; }

/* ── Chat shell ────────────────────────────────────────────────────────── */
#chat-nav {
  min-height: 56px; padding-inline: 24px;
  background: rgb(var(--c-card) / .94);
  border-bottom-color: rgb(var(--c-line) / .55);
}
#chat-subject { font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
#welcome-screen { background: radial-gradient(60% 50% at 50% 38%, rgb(var(--mesh-teal) / .45), transparent 70%), radial-gradient(40% 35% at 80% 70%, rgb(var(--mesh-violet) / .35), transparent 70%); }
#welcome-screen > div { max-width: 740px; }
.workspace-eyebrow { margin-bottom: 22px; font-size: 10px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--workspace-accent); }
#welcome-screen .welcome-mark {
  width: 76px; height: 76px; border-radius: 999px; margin-bottom: 20px;
  background: rgb(var(--c-card)); border: 1px solid var(--panel-edge);
  box-shadow: 0 0 0 10px rgb(var(--mesh-teal) / .45), 0 10px 26px rgb(11 31 58 / .1);
}
#welcome-screen .welcome-mark img { width: 58px; height: 58px; }
#welcome-greeting { font-size: clamp(27px, 3.2vw, 40px); font-weight: 800; letter-spacing: -.035em; margin-bottom: 30px; }
#welcome-greeting .welcome-ask { color: rgb(var(--c-ink)); font-size: 1em; font-weight: 800; letter-spacing: -.035em; line-height: 1.18; max-width: 600px; margin: 0 auto; }
#welcome-greeting .welcome-salutation { font-size: 17px; color: rgb(var(--c-muted)); font-weight: 600; letter-spacing: -.01em; margin-bottom: 10px; }
#welcome-form-wrap { max-width: 660px; }

/* The composer: one floating card, 26px corners, a deeper lift. */
#chat-form { border-radius: 26px; padding: 14px 14px 10px; border-color: rgb(var(--c-line) / .8); box-shadow: 0 10px 30px rgb(11 31 58 / .1), 0 2px 6px rgb(11 31 58 / .05); }
#chat-form:focus-within { border-color: rgb(var(--c-teal-400)); box-shadow: 0 0 0 3px rgb(var(--c-teal-100) / .6), 0 10px 30px rgb(11 31 58 / .1); }
#chat-input { font-size: 16px; }
#welcome-screen #chat-input { min-height: 64px; padding-inline: 4px; }
#chat-send-btn:not(:disabled) { background-image: linear-gradient(180deg, #19AE9F, #0C9488); box-shadow: 0 4px 12px rgb(12 148 136 / .3); }
#chat-send-btn:disabled { background-color: rgb(var(--c-slate-400) / .35) !important; color: #fff !important; }

/* The mode and incognito controls above it: capsule chips on a light track. */
.composer-controls { margin-bottom: 10px; justify-content: center; gap: 8px; }
.composer-controls .mode-toggle { padding: 3px; border-radius: 999px; background: var(--track); }
.composer-controls .mode-btn { padding: 6px 13px !important; font-size: 12.5px !important; }
.composer-controls .incognito-btn { padding: 6px 12px !important; border-radius: 999px; background: var(--chip); font-size: 12.5px !important; }
.composer-controls .incognito-btn:hover { background: var(--chip-hover); }
.tier-trigger { background: var(--chip) !important; padding: 6px 12px !important; font-size: 12.5px !important; }
.tier-trigger:hover { background: var(--chip-hover) !important; }

/* Messages. The vet's own bubble is navy, as in the app. */
#chat-messages { padding-inline: clamp(16px, 4vw, 40px); scroll-padding-block: 24px; }
#chat-messages > div { padding-top: 30px; padding-bottom: 30px; gap: 32px; max-width: 780px; }
#chat-messages .user-bubble {
  background: rgb(var(--c-navybg)); color: #fff;
  border-radius: 24px 24px 7px 24px; padding: 14px 19px; max-width: 86%;
  box-shadow: 0 6px 18px rgb(11 31 58 / .14);
}
html.theme-dark #chat-messages .user-bubble { background: rgb(36 63 99); box-shadow: none; }
#chat-messages .user-bubble, #chat-messages .user-bubble :is(p, span, div, a, strong, em, li) { color: #fff; }
#chat-messages .user-bubble :is(.text-muted, .text-slate-400, .text-slate-500) { color: rgb(255 255 255 / .7) !important; }
#chat-messages .user-message-content { font-size: 16px; line-height: 1.55; }
#chat-messages .msg-assistant [data-markdown] { font-size: 17px; line-height: 1.75; overflow-wrap: anywhere; }
/* `anywhere` is for a bare URL in prose. Inherited by a table cell it also
   lowers the cell's min-content to one character, so on a phone a dose table
   squeezed "Hypoadrenocorticism" into a letter-per-line column instead of
   scrolling inside its `.table-scroll`. Cells break at spaces; the card scrolls. */
#chat-messages .msg-assistant [data-markdown] :is(th, td) { overflow-wrap: break-word; }
@media (max-width: 767px) {
  #chat-messages .msg-assistant .table-card td { min-width: 7.5em; }
}
#chat-messages .msg-assistant [data-markdown] > p { margin-block: 16px; }
#chat-messages .msg-assistant [data-markdown] h2 { margin-top: 28px; }
/* A plain blockquote (an "Important:" aside) is a soft teal card. One led by
   a bold source title is the evidence card — violet, like the app's
   (`--evidence-*`), titled with a document icon. */
#chat-messages .msg-assistant [data-markdown] > blockquote {
  margin: 24px 0; padding: 14px 20px; overflow: hidden;
  border: 1px solid rgb(var(--c-teal-400) / .3); border-radius: 18px;
  background: rgb(var(--c-teal-50) / .6); color: rgb(var(--c-ink)); font-style: normal;
}
#chat-messages .msg-assistant [data-markdown] > blockquote > p { margin-block: 4px; }
#chat-messages .msg-assistant [data-markdown] > blockquote:has(> p:first-child > strong:first-child) {
  padding: 16px 20px 8px; border-color: rgb(124 58 237 / .26); background: rgb(124 58 237 / .05);
}
html.theme-dark #chat-messages .msg-assistant [data-markdown] > blockquote:has(> p:first-child > strong:first-child) { border-color: rgb(139 92 246 / .34); background: rgb(139 92 246 / .12); }
#chat-messages .msg-assistant [data-markdown] > blockquote > p:first-child:has(> strong:first-child) {
  display: flex; gap: 9px; align-items: flex-start; line-height: 1.35;
  margin: 0 0 12px; padding: 0;
  font-size: 1.05em; font-weight: 800; color: #6D28D9;
}
html.theme-dark #chat-messages .msg-assistant [data-markdown] > blockquote > p:first-child:has(> strong:first-child) { color: #C4B5FD; }
#chat-messages .msg-assistant [data-markdown] > blockquote > p:first-child:has(> strong:first-child) > strong { color: inherit; font-weight: 800; }
#chat-messages .msg-assistant [data-markdown] > blockquote > p:first-child:has(> strong:first-child)::before {
  content: ""; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; background: currentColor;
  -webkit-mask: var(--evidence-doc-icon) center / contain no-repeat;
          mask: var(--evidence-doc-icon) center / contain no-repeat;
}
/* A figure sits at its own size (a small book scan is not blown up to the
   column), centred, with the publisher's caption in italics beneath it, two
   lines and a "more", and the credit as a small [source] link (app.js
   `enhanceAnswerImages`). */
.answer-image { display: block; margin: 24px 0; text-align: center; }
.answer-image a { display: inline-block; max-width: 100%; }
.answer-image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 520px; margin-inline: auto; object-fit: contain; border-radius: 16px; background: rgb(var(--c-muted) / .06); }
.answer-image img[hidden] { display: none; }
.answer-image-caption { display: block; max-width: 620px; margin: 10px auto 0; font-size: 13px; font-style: italic; line-height: 1.6; color: rgb(var(--c-muted)); }
.answer-image-caption-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.answer-image-caption.is-open .answer-image-caption-text { display: block; }
.answer-image-source { margin-left: 4px; font-size: 11.5px; font-style: normal; font-weight: 700; color: var(--workspace-accent); text-decoration: none; }
.answer-image-source::before { content: "["; }
.answer-image-source::after { content: "]"; }
.answer-image-source:hover { text-decoration: underline; }
.answer-image-credit { font-style: normal; }
.answer-image-credit::before { content: " — "; }
.answer-image-more { margin-left: 6px; padding: 0; border: 0; background: none; font: inherit; font-style: normal; color: var(--workspace-accent); text-decoration: underline; cursor: pointer; }
.answer-references { padding-top: 8px; }
.answer-references > summary { cursor: pointer; font-size: 17px; font-weight: 800; padding-block: 10px; letter-spacing: -.01em; }
.answer-references > summary > span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 7px; margin-left: 8px;
  border-radius: 999px; background: rgb(var(--c-teal-50)); color: rgb(var(--c-teal-700)); font-size: 12.5px; font-weight: 700; vertical-align: 2px;
}
.answer-reference-list { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 16px; }
.answer-reference-list .cite-row { display: flex; align-items: baseline; gap: 12px; font-size: 15px; line-height: 1.55; }
.answer-reference-list .cite-m { color: rgb(var(--c-teal-600)); font-weight: 700; flex-shrink: 0; }
.answer-reference-list .cite-t { color: var(--workspace-accent); font-weight: 700; white-space: normal; overflow: visible; text-overflow: clip; }
/* The excerpt expander is a <details>; drop its native triangle so a reference
   row reads as a clean numbered entry, still click-to-expand. */
.answer-reference-list .cite-row-details > summary { list-style: none; }
.answer-reference-list .cite-row-details > summary::-webkit-details-marker { display: none; }
.answer-reference-list .cite-row-details > summary::marker { content: ""; }
.answer-reference-list blockquote { margin: 10px 0 0 32px; font-size: 14px; line-height: 1.65; }
/* A reference reads as one: title (the link), authors, then where it was
   published — the fields `routes::source_to_json` adds since Oct 2026. */
.answer-reference-list .cite-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.answer-reference-list .cite-authors { font-size: 14px; color: rgb(var(--c-muted)); }
.answer-reference-list .cite-venue { font-size: 13.5px; color: rgb(var(--c-muted)); }
.answer-reference-list-plain { gap: 12px; }
.answer-reference-list-plain .cite-row { font-size: 14px; }
.answer-more-references > summary { cursor: pointer; color: var(--workspace-accent); font-size: 14px; padding: 12px 0; }
#chat-messages .msg-foot { border-top: 1px solid rgb(var(--c-line) / .7); padding-top: 12px; margin-top: 20px; flex-wrap: wrap; }
#chat-messages + div { padding-top: 8px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
@media (max-width: 600px) {
  #chat-messages .msg-assistant [data-markdown] { font-size: 16px; line-height: 1.7; }
  #chat-messages > div { padding-top: 18px; gap: 26px; }
  #chat-messages + div { padding-inline: 12px; }
}
.answer-text-action { padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: rgb(var(--c-muted)); border-radius: 999px; }
.answer-text-action:hover { background: var(--chip); color: var(--workspace-accent); }
.ans-tools { flex-wrap: wrap; }

/* Composer compaction (Sep 2026): the header and the bottom composer band ate
   too much vertical space at low resolution, shrinking the scrollback. Smaller
   mascot, a one-line in-thread input and tighter padding give the room back. */
#chat-form::before { width: 68px; height: 62px; top: -56px; right: 8px; }
.composer-controls { min-height: 40px; padding-right: 84px; }
/* One-line in-thread composer: the text fills the row and the actions bank
   to the right, instead of the text sitting on its own row above them. */
#chat-messages + div #chat-form { flex-direction: row; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; }
#chat-messages + div #chat-form #chat-input { flex: 1 1 0%; width: auto; min-height: 22px; }
#chat-messages + div #chat-form .composer-utilities { width: auto; flex: 0 0 auto; }
#chat-messages + div #chat-form + p { margin-top: 4px; font-size: 11px; }
@media (max-width: 767px) {
  #chat-form::before { width: 54px; height: 50px; top: -46px; right: 4px; }
  .composer-controls { min-height: 36px; padding-right: 66px; }
}

/* ── Sign in ───────────────────────────────────────────────────────────────
   The brand panel is navy with a teal bloom (the app's sign-in backdrop); the
   form sits on the mesh. */
.signin-layout {
  padding: 16px; gap: 16px;
  background-color: rgb(var(--mesh-mist)); background-image: var(--mesh);
}
.signin-brand {
  border-radius: 28px; padding: clamp(36px, 5vw, 80px);
  background: radial-gradient(60% 50% at 0% 0%, rgb(12 148 136 / .45), transparent 70%),
              radial-gradient(50% 45% at 100% 100%, rgb(124 92 191 / .3), transparent 70%),
              linear-gradient(180deg, #13294A, #0B1F3A) !important;
}
.signin-brand h2 { font-family: inherit; font-size: clamp(40px, 4.3vw, 60px); font-weight: 800; letter-spacing: -.04em; max-width: 550px; }
.signin-brand > div:nth-child(2) { background: rgb(255 255 255 / .05); width: 620px; height: 620px; right: -220px; bottom: -300px; border: 1px solid rgb(255 255 255 / .1); }
.signin-form-panel { background: transparent !important; border-radius: 28px; }
.signin-form-panel > div {
  max-width: 420px; width: 100%; padding: 34px 30px;
  background: var(--panel); border: 1px solid var(--panel-edge); border-radius: 28px; box-shadow: var(--panel-shadow);
}
.signin-form-panel h1 { font-size: 32px; font-weight: 800; letter-spacing: -.035em; }
.signin-form-panel .workspace-eyebrow { margin-bottom: 14px; }
.signin-form-panel form { margin-top: 28px; }
.signin-form-panel input { border-color: rgb(var(--c-line)); min-height: 50px; border-radius: 14px; background: var(--panel-strong); }
.signin-form-panel button[type=submit] { min-height: 50px; margin-top: 24px; box-shadow: 0 6px 16px rgb(12 148 136 / .28); }

/* ── Layout ────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  #app-sidebar:not(.admin-sidebar), #sessions-sidebar:not(.sidebar-collapsed) { width: 272px; }
  #chat-area { margin: 12px 12px 12px 0; border: 1px solid var(--panel-edge); border-radius: 22px; overflow: hidden; box-shadow: var(--panel-shadow); }
  /* Other pages: the content is a sheet floating on the mesh beside the
     sidebar, matching the chat card. */
  .workspace-shell > #app-sidebar:not(.admin-sidebar) ~ :is(main, #case-scroll, #topic-scroll, #guidelines-scroll, #triage-report-scroll) {
    margin: 12px 12px 12px 0; border-radius: 22px; border: 1px solid var(--panel-edge); box-shadow: var(--panel-shadow);
  }
  /* The Wide editor hides the sidebar; keep the sheet off the window edge. */
  .workspace-shell.editor-wide > #app-sidebar ~ :is(main, #case-scroll, #topic-scroll, #guidelines-scroll, #triage-report-scroll) { margin-left: 12px; }
}
/* A 1080p desktop (the common case here) has width to spare at 1920px: a
   wider sidebar keeps the tagline and chat titles whole, and the case / topic
   instruction panel gets room for its thread. */
@media (min-width: 1440px) {
  #app-sidebar:not(.admin-sidebar), #sessions-sidebar:not(.sidebar-collapsed) { width: 300px; }
  #topic-refine { width: 400px; }
}
/* From lg the case and topic pages are two columns inside that sheet, and
   the wrapper already clips (lg:overflow-hidden); this rounds its corners. */
@media (min-width: 1024px) {
  .workspace-shell > #app-sidebar:not(.admin-sidebar) ~ :is(#case-scroll, #topic-scroll, #guidelines-scroll, #triage-report-scroll) { overflow: hidden; }
}
@media (max-width: 767px) {
  #chat-nav { min-height: 48px; padding-inline: 12px; }
  #welcome-screen { padding: 28px 18px; }
  .workspace-eyebrow { font-size: 9px; letter-spacing: .1em; margin-bottom: 18px; }
  #welcome-greeting { margin-bottom: 25px; }
  #chat-form { padding: 12px 12px 8px; }
  .signin-layout { padding: 0; }
  .signin-form-panel { padding: 32px 16px; }
  .signin-form-panel > div { padding: 28px 22px; }
}
@media (max-height: 650px) {
  #welcome-screen { justify-content: flex-start; }
  #welcome-screen .welcome-mark { display: none; }
}
@media print {
  #chat-area, :is(.workspace-shell, .admin-shell) main { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  .workspace-shell, :is(.workspace-shell, .admin-shell) main,
  #case-scroll, #topic-scroll, #guidelines-scroll, #triage-report-scroll { background: #fff; }
}

.workspace-mobile-bar { display: none; }
#sessions-sidebar { overflow-y: auto; }
#app-sidebar:not(.admin-sidebar).sidebar-collapsed,
#sessions-sidebar.sidebar-collapsed {
  width: 68px; padding: 0; overflow-x: hidden; overflow-y: auto; visibility: visible; opacity: 1;
}
.sidebar-collapsed > :not(.workspace-brand):not(.workspace-nav),
.sidebar-collapsed .workspace-brand > :not(.workspace-logo-button) { display: none !important; }
.sidebar-collapsed .workspace-brand { padding: 18px 12px; }
.sidebar-collapsed .workspace-nav { grid-template-columns: 1fr; justify-items: center; padding: 6px 10px 20px; }
.sidebar-collapsed .ws-tile {
  justify-content: center; align-items: center; width: 46px; height: 46px; padding: 0; border-radius: 14px;
}
/* Keep the tile names accessible while the rail shows only icons. */
.sidebar-collapsed .ws-tile-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media (max-width: 767px) {
  /* Open, the drawer is the whole screen, as the iOS sidebar is: a strip of
     dimmed page beside a 310px panel was a tap target to close it and little
     else, and the tiles and chat titles get the full width instead. */
  #app-sidebar:not(.admin-sidebar), #sessions-sidebar {
    width: 100vw !important; max-width: none; height: 100dvh; box-shadow: none; overflow-y: auto !important;
    transform: none; visibility: visible; transition: none !important;
    background-color: rgb(var(--mesh-mist)); background-image: var(--mesh); background-attachment: local;
  }
  /* Closed on a phone, the rail is only one round button floating over the
     page's top-left corner, the iOS menu button. A 64px icon column took a
     sixth of a phone's width on every page, and its nav icons duplicate the
     open drawer. */
  #app-sidebar:not(.admin-sidebar).sidebar-collapsed,
  #sessions-sidebar.sidebar-collapsed {
    width: auto !important; max-width: none; height: auto !important; bottom: auto;
    overflow: visible !important; background: transparent; border: 0 !important; box-shadow: none;
  }
  .sidebar-collapsed .workspace-nav { display: none !important; }
  .sidebar-collapsed .workspace-brand { padding: 8px 10px; }
  .sidebar-collapsed .workspace-logo-button { color: rgb(var(--c-teal-600)); background: var(--panel-strong); }
  .sidebar-collapsed .workspace-logo-button img { display: none; }
  .sidebar-collapsed .workspace-logo-button .ws-menu-icon { display: block; width: 20px; height: 20px; }
  /* Full screen, the collapse button is the way out, so it reads as close. */
  .workspace-sidebar-toggle .ws-collapse-icon { display: none; }
  .workspace-sidebar-toggle .ws-close-icon { display: block; }
  #app-scrim.is-open, #sidebar-overlay.active { display: none !important; }
  .workspace-brand { padding: 14px 16px 14px; }
  .workspace-nav { gap: 10px; padding: 4px 16px; }
  .ws-profile { margin-inline: 14px; }
  /* Room for that button: the chat header's left edge, and a spacer row that
     partials/app_topbar.html emits at the top of every other workspace page. */
  #chat-nav { padding-left: 64px; min-height: 60px; }
  .workspace-mobile-bar { display: block; height: 60px; flex-shrink: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #sessions-sidebar, #app-sidebar:not(.admin-sidebar) { transition: none !important; }
  .ws-tile, .ws-round { transition: none; }
}

/* ── Phone: the new-chat composer sits at the bottom of the screen ─────────
   On a phone (and in the installed PWA, which is the same layout) the welcome
   screen reads as a conversation that hasn't started yet, so the composer
   belongs where every following message will be typed — against the bottom
   edge — rather than floating in the middle of the viewport and jumping as the
   greeting line changes length. Desktop keeps the centred card, which is why
   all of this lives inside the media query.

   Mechanics: #welcome-screen stops scrolling and its single inner column
   scrolls instead, so the composer can be sticky inside that scrollport. The
   two `margin-top: auto` halves split the free space, leaving the greeting
   centred in the room above the composer. Auto margins (never
   justify-content: flex-end) because they collapse to 0 once the content is
   taller than the screen, which is what keeps the top of the greeting
   reachable instead of clipped above an unscrollable edge. `sticky` is that
   same overflow case from the other side — the greeting scrolls under the
   composer rather than pushing it off — and is the reason the composer carries
   a fade of the page colour behind it. */
@media (max-width: 767px) {
  #welcome-screen {
    justify-content: flex-start;
    overflow: hidden;
    /* The bottom padding moves onto the composer below so it travels with it. */
    padding-bottom: 0;
  }
  #welcome-screen > div {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
  /* Blockified flex items stretch, so the fixed-size mark needs centring back. */
  #welcome-screen .welcome-mark { align-self: center; }
  #welcome-screen > div > .workspace-eyebrow { margin-top: auto; }
  #welcome-form-wrap {
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgb(var(--c-card)) 68%, rgb(var(--c-card) / 0));
  }
}

/* ── Triage ──────────────────────────────────────────────────────────
   The call header and the composer under it are frosted bands over the mesh
   (neither scrolls). The message list between them does scroll, so it takes
   the opaque light gradient (see "The backdrop"). */
#triage-chat > :is(header, div, form).bg-white { background-color: var(--panel-strong); border-color: var(--panel-line); }

/* ── Admin portal ──────────────────────────────────────────────────────────
   Keeps its navy sidebar (admin.css); the content picks up the mesh and the
   panels like every other page. The document scrolls here, not <main>. */
.admin-card { background: var(--panel); border-color: var(--panel-edge); border-radius: 22px; box-shadow: var(--panel-shadow); }
.admin-card-heading { border-bottom-color: var(--panel-line); }
.admin-topbar { background: var(--panel-strong); border-bottom-color: var(--panel-line); }

/* ── New chat: the Today strip (partials/day_glance.html) ─────────────────
   Panel tiles over the welcome mesh. The big number is who is here: checked
   in on the whiteboard and not yet out. */
#day-glance:empty { display: none; }
#day-glance { margin: 0 auto 26px; max-width: 680px; }
.day-glance-head { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: rgb(var(--c-muted)); }
.day-glance-stale { color: rgb(var(--c-red-600)); font-weight: 600; }
.day-glance-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.day-glance-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px 11px; border-radius: 18px;
  background: var(--panel); border: 1px solid var(--panel-edge); box-shadow: var(--panel-shadow);
  border-top: 3px solid rgb(var(--c-teal-500));
  text-decoration: none; transition: box-shadow .15s, transform .15s;
}
/* Each tile opens today's calendar on Nori Connect. */
.day-glance-tile:hover { box-shadow: var(--panel-shadow-hover, var(--panel-shadow)); transform: translateY(-1px); }
.day-glance-tile:active { transform: scale(.98); }
.day-glance-tile:focus-visible { outline: 2px solid rgb(var(--c-teal-500)); outline-offset: 2px; }
.day-glance-urgent { border-top-color: rgb(var(--c-red-500)); }
.day-glance-surgery { border-top-color: rgb(124 92 214); }
.day-glance-in { border-top-color: rgb(var(--c-navy-500)); }
.day-glance-label { font-size: 12.5px; font-weight: 700; color: rgb(var(--c-ink)); }
.day-glance-num { font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: rgb(var(--c-ink)); font-variant-numeric: tabular-nums; }
.day-glance-sub { font-size: 11.5px; color: rgb(var(--c-muted)); }
/* Phone: each tile is a row, number on the left and its label and breakdown
   beside it, about half the height of the stacked tile. The breakdown wraps
   only between its parts (each part, with the dot leading it, is its own
   nowrap span). */
@media (max-width: 767px) {
  #day-glance { margin-bottom: 10px; }
  .day-glance-head { margin-bottom: 6px; font-size: 11.5px; }
  .day-glance-tiles { gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-glance-tile {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num label" "num sub";
    column-gap: 8px; row-gap: 1px; align-items: center; text-align: left;
    padding: 6px 9px 7px; border-radius: 14px;
  }
  .day-glance-num { grid-area: num; min-width: 1.2em; font-size: 23px; text-align: center; }
  .day-glance-label { grid-area: label; align-self: end; font-size: 12px; line-height: 1.2; }
  .day-glance-sub { grid-area: sub; align-self: start; font-size: 10.5px; line-height: 1.3; }
  .day-glance-sub > span { white-space: nowrap; }

  /* With the strip showing, the phone screen is full: the eyebrow and the
     mark go (the cat on the composer stays), and the greeting takes the
     auto margin the eyebrow carries otherwise, so it centres in the room
     between the strip and the composer. */
  #welcome-screen:has(#day-glance:not(:empty)) :is(.workspace-eyebrow, .welcome-mark) { display: none; }
  #welcome-screen:has(#day-glance:not(:empty)) #welcome-greeting { margin-top: auto; }
  #welcome-screen { padding-top: 16px; }
  #welcome-greeting { margin-bottom: 16px; }
  #welcome-greeting .welcome-salutation { font-size: 15px; margin-bottom: 6px; }
  #welcome-greeting .welcome-ask { font-size: 21px; line-height: 1.2; }
  #welcome-screen #chat-input { min-height: 40px; }
  #welcome-form-wrap #chat-form + p { margin-top: 6px; font-size: 11px; }
}