:root {
  /* Chart series, in this order (validated categorical palette); "other" folds the rest. */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #6250d6; --series-other: #9d9d97;
  /* The aixtract.com palette: neutral greys and lime. Lime is too light for text on a light page, so here it only
     fills (under dark text), and its dark olive carries links, marks and charts. */
  --bg: #f6f6f6;
  --sidebar: #ececec;
  --surface: #ffffff;
  --surface-2: #efefef;
  --hover: #e6e6e6;
  --active: #dfdfdf;
  --border: #dfdfdf;
  --border-strong: #cfcfcf;
  --text: #1f1f1f;
  --muted: #5e5e5e;
  --faint: #8f8f8f;
  --primary: #dcf26c;
  /* The Loco logo (public/brand/): the lime tile with the dark mark; in the dark themes, the dark tile with the lime mark. */
  --logo-bg: #dcf26c;
  --logo-fg: #1f1f1f;
  --logo-edge: transparent;
  --primary-fg: #1f1f1f;
  --brand: #556300;
  --link: #556300;
  --toggle-bg: #eef6c8;
  --toggle-fg: #4a5600;
  --danger: #d03b31;
  --danger-bg: #fdecea;
  --good: #1a7f4b;
  --good-bg: #e5f4eb;
  --highlight: #fde68a;
  --caution: #9a5b00;
  --caution-bg: #fcf0dc;
  --code-bg: #f7f7f6;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 18px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.18);
  --r: 2px; /* every corner: chips, controls, cards, dialogs */
  /* Type scale: 11 (upper-case mono labels only), 12, 13, 14 (interface), 16 (messages, dialog titles), 20, 24 (page titles). */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --thread: 768px;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Dark: the device's choice unless Settings says light, or Settings says dark (applyTheme, web/shared/i18n.ts, sets data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-other: #7c7c7c;
    --bg: #151515;
    --sidebar: #1c1c1c;
    --surface: #222222;
    --surface-2: #262626;
    --hover: #262626;
    --active: #2e2e2e;
    --border: #2b2b2b;
    --border-strong: #393939;
    --text: #eeeeee;
    --muted: #a8a8a8;
    --faint: #7a7a7a;
    --primary: #dff56f;
    --logo-bg: #1c1c1c;
    --logo-fg: #dff56f;
    --logo-edge: #3a3a3a;
    --primary-fg: #151515;
    --brand: #dff56f;
    --link: #dff56f;
    --toggle-bg: #2b2f14;
    --toggle-fg: #dff56f;
    --danger: #ff7b70;
    --danger-bg: #3a2220;
    --good: #5fcf94;
    --good-bg: #1c3326;
    --highlight: #6b5410;
    --caution: #f0b45a;
    --caution-bg: #3a2d17;
    --code-bg: #1c1c1c;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 18px rgb(0 0 0 / 0.25);
    color-scheme: dark;
  }
  :root:not([data-theme="light"]) .sidebar { --hover: #262626; --active: #2e2e2e; }
}
:root[data-theme="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-other: #7c7c7c;
  --bg: #151515;
  --sidebar: #1c1c1c;
  --surface: #222222;
  --surface-2: #262626;
  --hover: #262626;
  --active: #2e2e2e;
  --border: #2b2b2b;
  --border-strong: #393939;
  --text: #eeeeee;
  --muted: #a8a8a8;
  --faint: #7a7a7a;
  --primary: #dff56f;
  --logo-bg: #1c1c1c;
  --logo-fg: #dff56f;
  --logo-edge: #3a3a3a;
  --primary-fg: #151515;
  --brand: #dff56f;
  --link: #dff56f;
  --toggle-bg: #2b2f14;
  --toggle-fg: #dff56f;
  --danger: #ff7b70;
  --danger-bg: #3a2220;
  --good: #5fcf94;
  --good-bg: #1c3326;
  --highlight: #6b5410;
  --caution: #f0b45a;
  --caution-bg: #3a2d17;
  --code-bg: #1c1c1c;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 4px 18px rgb(0 0 0 / 0.25);
  color-scheme: dark;
}
:root[data-theme="dark"] .sidebar { --hover: #262626; --active: #2e2e2e; }
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; }
html { accent-color: var(--brand); } /* checkboxes and radios */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon { display: block; flex-shrink: 0; }
.spacer { flex: 1; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* A dialog takes the focus itself when it opens (shared/dom.ts calmDialogFocus), so its × doesn't show a ring on a
   touch screen; the ring shows on the first control a keyboard reaches. */
dialog:focus, dialog:focus-visible { outline: none; }

/* ---------- buttons ---------- */
.icon-btn {
  width: 32px; height: 32px;
  border: 0; border-radius: var(--r);
  background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { background: var(--hover); color: var(--text); }
.icon-btn.sm { width: 28px; height: 28px; border-radius: var(--r); }
.btn {
  height: 32px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface); color: var(--text);
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { background: var(--hover); }
.btn-primary { background: var(--primary); color: var(--primary-fg); border-color: transparent; }
.btn-primary:hover { background: var(--primary); opacity: 0.88; }
.btn-danger { background: var(--danger); color: var(--surface); border-color: transparent; }
.btn-danger:hover { background: var(--danger); opacity: 0.9; }
.btn:disabled { opacity: 0.4; cursor: default; }
.icon-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: var(--r); }

/* ---------- layout ---------- */
.app { display: flex; height: var(--app-h, 100dvh); } /* --app-h: the visible height, with a phone's keyboard (util.js) */
main.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }

.sidebar {
  width: 264px; flex-shrink: 0;
  background: var(--sidebar);
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  transition: margin-left 0.2s ease;
}
.app.sb-collapsed .sidebar { margin-left: -264px; }
.sb-head { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.brand-mark, .hero-mark { color: var(--brand); }
.sb-nav { padding: 0 8px; display: flex; flex-direction: column; gap: 1px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border: 0; border-radius: var(--r);
  background: none; color: var(--text);
  font-size: 14px; text-align: left; text-decoration: none; cursor: pointer;
}
.nav-item:hover { background: var(--hover); }
.nav-item.active, .session.active, .project.active { background: var(--hover); box-shadow: inset 2px 0 var(--link); }
.nav-item .icon { color: var(--muted); }
.sb-search { position: relative; margin: 10px 8px 4px; }
.sb-search > [data-icon] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--faint); pointer-events: none; }
.sb-search input {
  width: 100%; padding: 7px 10px 7px 32px;
  border: 1px solid transparent; border-radius: var(--r);
  background: var(--hover); font-size: 14px; outline: none;
}
.sb-search input:focus { border-color: var(--border-strong); background: var(--bg); }
.sessions { flex: 1; overflow-y: auto; padding: 4px 8px 16px; }
.group-label { font: 500 11px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 16px 10px 6px; }
.sb-projects { padding: 4px 8px 0; }
.sb-admin { padding: 4px 8px 0; }
.sb-admin .sb-nav { padding: 0; }
.sb-toggle { width: 100%; border: 0; background: none; cursor: pointer; padding-right: 8px; border-radius: var(--r); }
.sb-toggle:hover { color: var(--text); }
.sb-toggle .icon { transition: transform 0.15s; }
.sb-toggle[aria-expanded="false"] .icon { transform: rotate(-90deg); }
.sb-section-head { display: flex; align-items: center; justify-content: space-between; font: 500 11px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); padding: 8px 2px 4px 10px; }
.project { display: flex; align-items: center; border-radius: var(--r); }
.project:hover, .project.active { background: var(--hover); }
.project-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--text); padding: 7px 10px; font-size: 14px; text-align: left; cursor: pointer; }
.project-open > [class=""], .project-open > span:first-child { color: var(--muted); display: inline-flex; }
.project.active .project-open > span:first-child { color: var(--brand); }
.project-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-edit { opacity: 0; }
.project:hover .project-edit, .project.active .project-edit, .project-edit:focus-visible { opacity: 1; }
.top-project { color: var(--muted); }
.project-docs { border: 0; padding: 0; margin: 4px 0 0; }
.project-docs legend { font-size: 13px; font-weight: 500; padding: 0; }
.project-docs p { margin: 2px 0 8px; font-size: 13px; }
#project-docs { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
#project-docs .check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
/* Team checkboxes (docs.js teamChecks): the share window, projects, workflows, connectors. */
.team-checks { display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto; }
.team-checks .check, .share-everyone { display: flex; color: var(--text); white-space: normal; }
.team-checks p { margin: 0; font-size: 13px; }
.share-head { margin: 14px 0 6px; font-size: 13px; font-weight: 500; }
.share-everyone { margin-top: 12px; }
#share-sub { margin: 0; font-size: 13px; }
.connector-teams { margin-top: 10px; }
.connector-teams > p { margin: 0 0 6px; font-size: 13px; }
#team-dlg .panel-body { display: flex; flex-direction: column; gap: 12px; }
#team-dlg .connector-tools-head h3 { margin: 4px 0 0; }
.add-user.team-add { grid-template-columns: 1fr auto; margin: 8px 0; }
/* A long option (a person and their workspace) doesn't widen the row past the window. */
.add-user.team-add .select { min-width: 0; width: 100%; }
.team-members-box .users-table td:last-child { width: 1%; }
/* Admin → Workspaces: the limit with what was spent, and the models (Workspaces.tsx). */
.workspace-budget { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.workspace-budget .btn { align-self: flex-start; }
.workspace-models { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.workspace-models legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.workspace-models .check { white-space: normal; color: var(--text); overflow-wrap: anywhere; }
#team-sso-hint { margin: -6px 0 0; font-size: 13px; }
#project-shared-note { margin: 4px 0 0; font-size: 13px; }
#project-instructions {
  width: 100%; resize: vertical; font: inherit; font-size: 14px; font-weight: 400; padding: 9px 12px; border-radius: var(--r);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); outline: none;
}
#project-form .modal-body { display: flex; flex-direction: column; gap: 14px; }
.project-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.project-example {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: none; color: var(--text); text-align: left; cursor: pointer;
}
.project-example:hover { background: var(--hover); }
.project-example.on { box-shadow: inset 2px 0 var(--link); background: var(--hover); }
.project-example.loading { opacity: 0.6; cursor: progress; }
.project-example strong { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.project-example strong span { color: var(--muted); display: inline-flex; }
.project-example small { font-size: 12px; color: var(--muted); }
.project-hint { display: block; width: 100%; border: 0; background: none; padding: 4px 10px 6px; font-size: 13px; color: var(--muted); text-align: left; cursor: pointer; }
.project-hint span { color: var(--link); }
.project-hint:hover span { text-decoration: underline; }
.sb-empty { font-size: 13px; color: var(--faint); padding: 12px 10px; margin: 0; }
.session { position: relative; border-radius: var(--r); }
.session:hover { background: var(--hover); }
.session-open {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; border: 0; background: none;
  font-size: 14px; text-align: left; white-space: nowrap;
}
.session-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.session-open .badge { flex-shrink: 0; }
.session-actions {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: none;
  padding-left: 18px;
  background: linear-gradient(to right, transparent, var(--hover) 16px);
  border-radius: 0 var(--r) var(--r) 0;
}
.session.active .session-actions { background: linear-gradient(to right, transparent, var(--hover) 16px); }
.session:hover .session-actions, .session:focus-within .session-actions, .session.active .session-actions { display: flex; }
.session:hover .session-open, .session.active .session-open { padding-right: 70px; }
.rename-input {
  width: 100%; padding: 6px 9px; font-size: 14px;
  border: 1px solid var(--link); border-radius: var(--r);
  background: var(--bg); outline: none;
}
.sb-foot { padding: 8px; border-top: 1px solid var(--border); }
/* On a phone or a short screen the links would leave the chat list no room: the whole sidebar scrolls instead,
   its head and account line staying put. */
@media (max-width: 768px), (max-height: 720px) {
  .sidebar { overflow-y: auto; overscroll-behavior: contain; }
  .sessions { flex: 1 0 auto; overflow: visible; }
  .sb-head { position: sticky; top: 0; z-index: 1; flex-shrink: 0; background: var(--sidebar); }
  .sb-foot { position: sticky; bottom: 0; background: var(--sidebar); }
}
/* Answers run on the server: other chats open while one answers. Its own chat can't be renamed or deleted meanwhile. */
.busy #delete-all { pointer-events: none; opacity: 0.5; }
.busy .session.current .session-actions { display: none; }
/* Waiting for the user to confirm a step: a badge rather than the pulsing dot. */
.session.running.waiting .session-open::after { display: none; }
.session-open .badge.waiting { color: var(--caution); }
.session-open .badge.new { color: var(--link); }
.session.running .session-open::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--link); vertical-align: middle; animation: pulse 1s ease-in-out infinite alternate; }
.scrim { display: none; }

.topbar { height: 56px; flex-shrink: 0; display: flex; align-items: center; gap: 2px; padding: 0 10px; }
.topbar .when-closed { display: none; }
/* Off the chat, with the sidebar open, the top bar holds nothing: the page starts at the top, its title level with the sidebar's. */
@media (min-width: 769px) {
  body:not([data-view="chat"]) .app:not(.sb-collapsed) .topbar { display: none; }
  body:not([data-view="chat"]) .app:not(.sb-collapsed) .page { padding-top: 14px; }
}
.app.sb-collapsed .topbar .when-closed { display: inline-flex; }
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 210px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.menu [role="menuitem"] { border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: var(--r); font-size: 14px; color: var(--text); cursor: pointer; }
.menu [role="menuitem"]:hover, .menu [role="menuitem"]:focus-visible { background: var(--hover); }
.top-title {
  margin-left: 8px; font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.view { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }

/* ---------- conversation ---------- */
.scroller { flex: 1; overflow-y: auto; scrollbar-gutter: stable; }
.thread {
  max-width: var(--thread); margin: 0 auto;
  padding: 12px 24px 48px;
  display: flex; flex-direction: column; gap: 32px;
}
.msg-user { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bubble {
  background: var(--surface-2);
  padding: 10px 18px; border-radius: var(--r);
  max-width: min(85%, 620px);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.user-imgs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.user-imgs img { max-height: 240px; max-width: 100%; border-radius: var(--r); border: 1px solid var(--border); display: block; }

.msg-ai { min-width: 0; }
.activity { display: flex; flex-direction: column; gap: 4px; }
.activity:not(:empty) { margin-bottom: 12px; }

.thought summary, .tool summary {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 14px;
  cursor: pointer; list-style: none; user-select: none;
  padding: 3px 0;
}
.thought summary::-webkit-details-marker, .tool summary::-webkit-details-marker { display: none; }
.thought summary:hover, .tool summary:hover { color: var(--text); }
.chev { transition: transform 0.15s; }
details[open] > summary .chev { transform: rotate(90deg); }
.thought-body {
  margin: 6px 0 8px 7px; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--border);
  color: var(--muted); font-size: 14px; line-height: 1.6;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 360px; overflow-y: auto;
}
.tool-body { margin: 4px 0 8px 7px; padding-left: 18px; border-left: 2px solid var(--border); }
.sources { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sources a {
  display: flex; flex-direction: column;
  padding: 6px 10px; border-radius: var(--r);
  text-decoration: none; color: var(--text); font-size: 14px;
}
.sources a:hover { background: var(--surface-2); }
.sources .domain { color: var(--faint); font-size: 12px; }
.tool.err summary { color: var(--danger); }
.tool.verify.warn summary { color: var(--caution); }
.check-issues { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.check-issues q { font-style: italic; }
.note { color: var(--muted); font-size: 14px; margin: 2px 0 6px; white-space: pre-wrap; }

/* text shimmer while something is in progress */
.live > summary .label {
  background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 40%, var(--text) 50%, var(--muted) 60%, var(--muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }

.answer.streaming:empty::after,
.answer.streaming > :last-child::after {
  content: ""; display: inline-block;
  width: 9px; height: 9px; margin-left: 4px; border-radius: 50%;
  background: var(--text); vertical-align: middle;
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(0.6); opacity: 0.5; } }

.msg-error {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 14px;
  border-radius: var(--r);
  background: var(--danger-bg); color: var(--danger); font-size: 14px;
}
.msg-error.stopped { background: none; color: var(--faint); padding: 0; }
.msg-error .btn { height: 28px; font-size: 13px; }

.msg-foot { display: flex; align-items: center; min-height: 32px; margin-top: 4px; margin-left: -6px; }
.msg-foot .stats { flex: 1 1 0; min-width: 0; margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* after the buttons, on their line */
.msg-foot .stats:empty { display: none; }
button.stats { border: 0; background: none; padding: 0; text-align: left; cursor: pointer; }
button.stats:hover { color: var(--muted); }
/* Tapped: everything in the same place, wrapping instead of cut short. */
.msg-foot .stats[aria-expanded="true"] { white-space: normal; overflow: visible; color: var(--muted); line-height: 1.6; }
/* A click leaves focus on it: the ring is for the keyboard only. */
button.stats:focus:not(:focus-visible) { outline: none; }
.stats { font: 12px var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.msg-ai .msg-foot, .user-foot { opacity: 0; transition: opacity 0.15s; }
/* the newest answer: a handoff or confirmation card may come after it */
.msg-ai:hover .msg-foot, .msg-ai:focus-within .msg-foot, .thread > .msg-ai:not(:has(~ .msg-ai)) .msg-foot,
.msg-user:hover .user-foot, .msg-user:focus-within .user-foot { opacity: 1; }
@media (hover: none) { .msg-ai .msg-foot, .user-foot { opacity: 1; } }
.user-foot { position: absolute; top: 100%; right: -6px; margin-top: 2px; }
.user-foot { display: flex; gap: 2px; }
.edit-form { width: min(100%, 560px); display: flex; flex-direction: column; gap: 8px; }
.edit-box {
  width: 100%; resize: vertical; min-height: 72px; padding: 10px 14px; border-radius: var(--r);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: 16px; line-height: 1.5;
}
.edit-box:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.edit-actions { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.regen, .retry { display: none !important; }
.thread > .msg-ai:not(:has(~ .msg-ai)) .regen, .thread > .msg-ai:not(:has(~ .msg-ai)) .retry { display: inline-flex !important; }
/* while an answer runs: no actions on it, and no regenerating; earlier answers keep Copy and Debug */
.busy .thread > .msg-ai:not(:has(~ .msg-ai)) .msg-foot button:not(.stats), .busy .regen, .busy .retry { display: none !important; }

/* per-answer debug details */
.debug {
  margin-top: 6px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--code-bg); font-size: 13px;
}
.debug dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 0 0 8px; }
.debug dt { color: var(--muted); }
.debug dd { margin: 0; font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }

/* ---------- markdown ---------- */
.markdown { overflow-wrap: anywhere; line-height: 1.7; }
.answer, .bubble { font-size: 16px; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown .table-wrap, .markdown .codeblock, .markdown .datatable { margin: 0 0 1em; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { line-height: 1.3; margin: 1.5em 0 0.6em; font-weight: 600; }
.markdown h1 { font-size: 1.5em; }
.markdown h2 { font-size: 1.25em; }
.markdown h3 { font-size: 1em; }
.markdown ul, .markdown ol { padding-left: 1.6em; }
.markdown li { margin: 0.3em 0; }
.markdown li > p { margin: 0.3em 0; }
.markdown a { color: var(--link); text-decoration: none; }
.markdown a:hover { text-decoration: underline; }
.markdown strong { font-weight: 600; }
.markdown blockquote { border-left: 3px solid var(--border-strong); padding-left: 1em; color: var(--muted); }
.markdown hr { border: 0; border-top: 1px solid var(--border); margin: 1.6em 0; }
.markdown img { max-width: 100%; border-radius: var(--r); }
.markdown :not(pre) > code {
  font: 0.86em/1.4 var(--mono);
  background: var(--surface-2); padding: 0.15em 0.4em; border-radius: var(--r);
}
.codeblock { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--code-bg); }
.codeblock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px 4px 14px;
  font-size: 12px; color: var(--muted);
  background: var(--surface-2);
}
.copy-text { height: 28px; padding: 0 8px; border: 0; border-radius: var(--r); background: none; color: var(--muted); font-size: 12px; display: inline-flex; align-items: center; gap: 5px; }
.copy-text:hover { background: var(--hover); color: var(--text); }
.codeblock pre { margin: 0; padding: 14px 16px; overflow-x: auto; }
.codeblock code, .codeblock code.hljs {
  font: 13px/1.6 var(--mono);
  background: transparent; padding: 0;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
/* A table in an answer, under a bar for copying or downloading its data (stream.js). */
.datatable { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.markdown .datatable .table-wrap { border: 0; border-radius: 0; margin: 0; }
.datatable .codeblock-head span:first-child { font-family: var(--mono); }
.datatable-tools { display: flex; gap: 2px; }
.markdown .datatable tbody tr:last-child td { border-bottom: 0; }
.markdown table { border-collapse: collapse; width: 100%; font-size: 14px; }
/* Cells wrap between words only, so on a phone a table scrolls sideways instead of squeezing a column to a letter. */
.markdown th, .markdown td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); overflow-wrap: break-word; }
/* A column the Markdown aligns (|---:| for amounts) keeps its alignment */
.markdown :is(th, td)[align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.markdown :is(th, td)[align="center"] { text-align: center; }
.markdown th { background: var(--surface-2); font-weight: 600; }
.markdown tr:last-child td { border-bottom: 0; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.tool-body .table-wrap { margin: 6px 0; max-height: 320px; overflow: auto; }
.query-rows { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.query-rows th, .query-rows td { padding: 4px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.query-rows th { background: var(--surface-2); font-weight: 600; position: sticky; top: 0; }

/* ---------- composer ---------- */
.composer-wrap { position: relative; padding: 0 16px 10px; flex-shrink: 0; }
.composer {
  max-width: var(--thread); margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 10px 10px 12px;
  transition: border-color 0.15s;
}
.composer:focus-within { border-color: var(--text); }
.composer textarea {
  display: block; width: 100%;
  border: 0; outline: none; background: none; resize: none;
  font-size: 16px; line-height: 1.5;
  padding: 4px 8px 8px;
  max-height: 220px;
}
.composer textarea::placeholder { color: var(--faint); }
.composer-bar { display: flex; align-items: center; gap: 4px; }
.pill {
  height: 32px; padding: 0 12px; white-space: nowrap;
  border: 1px solid var(--border); border-radius: var(--r);
  background: none; color: var(--muted);
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.pill:hover { background: var(--hover); color: var(--text); }
.pill[aria-pressed="true"] { background: var(--toggle-bg); color: var(--toggle-fg); border-color: transparent; }
.select-pill { position: relative; cursor: pointer; padding-right: 10px; }
.select-pill select {
  appearance: none; -webkit-appearance: none;
  border: 0; background: none; outline: none; cursor: pointer;
  font-size: 14px; font-weight: 500; color: inherit;
  padding: 0;
}
.select-pill select option { color: var(--text); background: var(--surface); }
.select-pill-short { display: none; }
.send {
  width: 32px; height: 32px;
  border: 0; border-radius: var(--r);
  background: var(--primary); color: var(--primary-fg);
  display: inline-flex; align-items: center; justify-content: center;
  transition: opacity 0.15s;
}
.send:disabled { opacity: 0.25; cursor: default; }
.voice-btn[aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); }
.voice-btn[aria-pressed="true"] svg { animation: voice-pulse 1.2s ease-in-out infinite; }
.voice-btn.busy { opacity: 0.5; cursor: progress; }
.voice-time { font: 500 12px/1 var(--mono); color: var(--danger); font-variant-numeric: tabular-nums; }
@keyframes voice-pulse { 50% { opacity: 0.35; } }
@media (max-width: 480px) { .composer.recording .select-pill { display: none; } } /* room for the timer on a phone */
/* A narrow phone: the effort pill without its chevron (the pill still opens its list), and on the narrowest Search as
   its globe alone (its word kept for screen readers; filled when on), so a long level (Désactivé) fits. */
@media (max-width: 400px) { .select-pill:has(> .select-pill-short) [data-icon="chevronDown"] { display: none; } }
@media (max-width: 380px) {
  #web .pill-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  #web { padding-left: 10px; padding-right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .voice-btn[aria-pressed="true"] svg { animation: none; } }
.attachments { display: flex; gap: 8px; flex-wrap: wrap; padding: 2px 4px 8px; }
.thumb { position: relative; }
.thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--border); display: block; }
.thumb button {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; padding: 0;
  border: 2px solid var(--surface); border-radius: var(--r);
  background: var(--text); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
}
.disclaimer { text-align: center; font-size: 12px; color: var(--faint); margin: 8px 0 0; }
.scroll-down {
  position: absolute; left: 50%; top: -48px; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
}

/* empty state: greeting and composer centered */
.hero, .suggestions { display: none; }
.view-chat.is-empty .scroller, .view-chat.is-empty .disclaimer { display: none; }
/* The empty screen scrolls as a whole: the examples are taller than a phone (or a short window). */
.view-chat.is-empty { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.view-chat.is-empty .hero {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: auto; padding: 0 24px 28px; text-align: center;
}
.hero h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -0.01em; }
.view-chat.is-empty .suggestions {
  display: flex; flex-direction: column; gap: 22px;
  width: 100%; max-width: var(--thread); margin: 18px auto auto; padding: 0 16px 24px;
  --per-row: 3; --gap: 20px;
}
/* A section: its heading, then its examples, three to a row. */
.feat-section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.feat-section-head h2 { margin: 0; font: 600 12px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.feat-section-head p { margin: 0; font-size: 13px; color: var(--muted); }
.feat-cards { display: flex; flex-wrap: wrap; gap: var(--gap); }
.view-chat.is-empty .suggestion { flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row)); }
.feat-ext { margin-left: auto; color: var(--muted); display: inline-flex; }
.suggestion {
  text-align: left; padding: 10px 2px 12px;
  border: 0; border-top: 2px solid var(--text); border-radius: 0;
  background: none; display: flex; flex-direction: column; gap: 3px;
  transition: background 0.12s, border-color 0.12s;
}
.suggestion:hover { border-top-color: var(--link); }
.suggestion:hover strong { color: var(--link); }
.suggestion strong { font-weight: 500; font-size: 14px; }
.suggestion .feat-sub { font-size: 13px; color: var(--muted); }
.feat-head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.feat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.feat-tag { font: 500 11px/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.suggestion.loading { opacity: 0.6; cursor: progress; }
.suggestion.loading .feat-icon { animation: pulse 0.8s ease-in-out infinite alternate; }
@media (max-width: 900px) and (min-width: 769px) {
  .view-chat.is-empty .suggestions { --per-row: 2; }
}

.drop-overlay {
  position: absolute; inset: 0; z-index: 5;
  display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 2px dashed var(--border-strong); border-radius: var(--r); margin: 8px;
  color: var(--muted); text-align: center; pointer-events: none;
}
.view-chat.dragging .drop-overlay { display: flex; }

/* ---------- pages ---------- */
.page { flex: 1; overflow-y: auto; padding: 8px 24px 40px; }
.card { border: 1px solid var(--border); border-radius: var(--r); padding: 16px; background: var(--surface); min-width: 0; }
.select {
  height: 32px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--surface);
}

/* ---------- dialogs ---------- */
.modal {
  border: 0; padding: 0; border-radius: var(--r);
  width: min(460px, calc(100vw - 32px));
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg);
}
.modal-sm { width: min(400px, calc(100vw - 32px)); }
.modal::backdrop { background: rgb(0 0 0 / 0.45); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 4px 22px; }
.modal h2 { font-size: 16px; font-weight: 600; margin: 0; }
.modal-body { padding: 12px 22px 8px; }
.modal-sm .modal-body { padding-top: 22px; }
.modal-sm .modal-body p { color: var(--muted); margin: 8px 0 0; font-size: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px 20px; }
.modal-msg { background: var(--toggle-bg); color: var(--toggle-fg); padding: 10px 12px; border-radius: var(--r); font-size: 14px; margin: 0 0 14px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.field input, .field textarea {
  height: 40px; padding: 0 12px; font-weight: 400;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--bg); outline: none;
}
.field input:focus, .field textarea:focus { border-color: var(--link); }
.field textarea { height: auto; padding: 8px 12px; line-height: 1.5; resize: vertical; font: inherit; font-weight: 400; color: var(--text); }
.info { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 18px 0; font-size: 14px; }
.info dt { color: var(--muted); }
.info dd { margin: 0; overflow-wrap: anywhere; }
.info .mono { font-family: var(--mono); font-size: 13px; }
.modal-wide { width: min(980px, calc(100vw - 32px)); }
.modal-body { max-height: calc(100dvh - 140px); overflow-y: auto; }
.settings-section { padding: 6px 0 10px; border-top: 1px solid var(--border); }
.settings-section:first-of-type { border-top: 0; }
.settings-section h3 { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 12px 0 4px; }
.settings-section .info { margin: 10px 0 4px; }
.setting-row { display: flex; align-items: center; gap: 16px; padding: 9px 0; }
.setting-row > div { min-width: 0; }
.setting-row strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.setting-row p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.setting-row .btn { margin-left: auto; flex-shrink: 0; }
.setting-row .pref-select { margin-left: auto; flex-shrink: 0; width: 160px; }
.auth-lang { align-self: center; width: auto; margin-top: 4px; border-color: transparent; background: none; color: var(--muted); font-size: 13px; }
.btn-danger-outline { color: var(--danger); border-color: var(--border-strong); }
.btn-danger-outline:hover { background: var(--danger-bg); }
.password-form { display: grid; gap: 12px; padding: 4px 0 12px; }
.form-msg { margin: 0; font-size: 13px; color: var(--muted); min-height: 0; }
.form-msg:empty { display: none; }
.form-msg.error { color: var(--danger); }
.form-msg.ok { color: var(--toggle-fg); }
.form-actions { display: flex; justify-content: flex-end; }
.input {
  height: 32px; padding: 0 12px; min-width: 0;
  border: 1px solid var(--border-strong); border-radius: var(--r);
  background: var(--bg); outline: none; font-size: 14px;
}
.input:focus, .select:focus { border-color: var(--link); }
/* Selects and date fields drawn by the page, not the system, so they look the same everywhere: Safari on iPhone draws
   a select's text against its left border with its own arrows, and an empty date field as a blank box. A select gets
   the page's chevron (two gradients in --muted, so it follows the theme) and room for it; the composer's pills are
   drawn as text. A date or time field keeps a width when empty and its text starts at the left. */
select:not([multiple], [size], .select-pill > select) {
  appearance: none; -webkit-appearance: none; padding-left: 10px; padding-right: 28px; text-overflow: ellipsis;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat;
}
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { min-width: 9.5em; text-align: left; }
input:is([type="time"]) { min-width: 6.5em; }
input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"])::-webkit-date-and-time-value { text-align: left; min-height: 1.5em; }
/* Safari on iPhone and iPad (the only browser with -webkit-touch-callout): its own date field is a rounded grey box of
   its own height, empty when no date is set. Drawn as the other fields, with the select's chevron to say it opens a
   picker. */
@supports (-webkit-touch-callout: none) {
  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) {
    appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; padding-right: 28px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: right 15px center, right 10px center; background-size: 5px 5px; background-repeat: no-repeat;
  }
}
textarea.input { height: auto; padding: 8px 12px; line-height: 1.5; resize: vertical; font: inherit; font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a file input kept focusable inside its label: the label shows the focus */
label:has(> input[type="file"].sr-only:focus-visible) { outline: 2px solid var(--link); outline-offset: 2px; }

/* ---------- users (admin) ---------- */
.add-user { display: grid; grid-template-columns: 1fr 1.2fr auto auto auto; gap: 8px; margin-bottom: 10px; }
.notice {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--toggle-bg); color: var(--toggle-fg);
  padding: 10px 12px; border-radius: var(--r); font-size: 14px; margin: 0 0 12px;
}
.notice code { font-family: var(--mono); font-size: 14px; color: var(--text); background: var(--surface); padding: 2px 8px; border-radius: var(--r); user-select: all; }
.notice .copy-text { color: inherit; }
.users-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.users-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.users-table th {
  text-align: left; font: 500 11px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  padding: 9px 12px; background: var(--surface-2); white-space: nowrap;
}
.users-table td { padding: 8px 12px; border-top: 1px solid var(--border); vertical-align: middle; white-space: nowrap; }
.users-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.users-table .who { display: flex; align-items: center; gap: 10px; }
.users-table .who small { display: block; color: var(--muted); font-size: 12px; }
.users-table .acts { display: flex; gap: 2px; justify-content: flex-end; align-items: center; }
.users-table .muted { color: var(--muted); font-size: 13px; }
.users-table .select { height: 28px; font-size: 13px; padding: 0 28px 0 8px; border-radius: var(--r); }
.users-table tr.is-disabled .who, .users-table tr.is-disabled td.num { opacity: 0.55; }
/* Users: the name, email and date under the username wrap, so the table fits the page without scrolling sideways. */
#view-users .users-table td:first-child { white-space: normal; min-width: 170px; }
#view-users .users-table .who small { overflow-wrap: anywhere; }
/* The workspace and teams wrap too (a firm's full name is long), and the new person's workspace list stays as wide as
   a usual name: the page then fits beside the sidebar. */
#view-users .users-table td.sub { white-space: normal; min-width: 8em; overflow-wrap: anywhere; }
#view-users #new-workspace { max-width: 16em; }
/* A narrower window drops the teams and counts (also on the Usage page) before it would scroll. */
@media (max-width: 960px) { #view-users .users-table :is(th, td):nth-child(n + 4):nth-child(-n + 6) { display: none; } }
/* On a phone each user stacks: who above role, status and actions; the counts and last activity are on the Usage page. */
@media (max-width: 640px) {
  .users-table thead, .users-table :is(th, td):nth-child(n + 4):nth-child(-n + 6) { display: none; }
  .users-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; }
  .users-table tr + tr { border-top: 1px solid var(--border); }
  .users-table td { display: block; padding: 0; border: 0; }
  .users-table td:first-child { flex: 1 0 100%; }
  .users-table td:last-child { margin-left: auto; }
}
/* Status: outlined, upper-case mono, in the status colour alone. */
.badge { display: inline-block; font: 500 11px/16px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--r); background: none; color: var(--muted); white-space: nowrap; }
.badge.ok { color: var(--good); }
.badge.warn { color: var(--danger); }
/* A badge keeps at least 4px from whatever is beside it on its line, on every page, with or without a space written
   between them: 4px of margin after it, and after the element before it (a name in <strong>, another badge). Both are
   right-hand margins, so a badge that wraps starts its line flush with the text above. Bare text right before a badge
   gets none (CSS can't see it): put that text in an element. In a flex row (.badge-row) the row's gap does it instead.
   tests/layout-check.js fails a screen where a badge comes closer than 4px to its neighbour, as "SCAEUVECA" did. */
.badge { margin-right: 4px; }
/* A badge keeps its own height: in a flex row (a filter bar beside a select) it would otherwise stretch to the row's
   height with its text stuck at the top. */
.badge { height: fit-content; }
:has(+ .badge) { margin-right: 4px; }
.badge-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
:is(.badge-row, .legal-chips, .funds-listing-head, .session-open) > :is(.badge, :has(+ .badge)) { margin-right: 0; }
.users-hint { color: var(--muted); font-size: 13px; margin: 12px 0 4px; }
.users-hint code { font-family: var(--mono); font-size: 12px; }

/* ---------- account ---------- */
.account {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 7px 8px;
  border: 0; border-radius: var(--r); background: none;
  text-align: left; color: var(--muted);
}
.account:hover { background: var(--hover); color: var(--text); }
.avatar {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--r);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary); color: var(--primary-fg); font-size: 13px; font-weight: 600; text-transform: uppercase;
}
.account-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.account-text > span:first-child { color: var(--text); font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-role { font-size: 12px; color: var(--muted); }

/* ---------- sign-in ---------- */
body.booting .app, body.signed-out .app { visibility: hidden; }
.auth {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--bg); overflow-y: auto;
}
.auth-card { width: min(380px, 100%); display: flex; flex-direction: column; gap: 14px; }
.auth-mark { color: var(--brand); align-self: center; }
.auth h1 { font-size: 24px; font-weight: 600; text-align: center; margin: 4px 0 0; letter-spacing: -0.01em; }
.auth-sub { text-align: center; color: var(--muted); margin: -8px 0 8px; font-size: 14px; }
.auth-msg { margin: 0; padding: 10px 12px; border-radius: var(--r); font-size: 14px; background: var(--danger-bg); color: var(--danger); }
.auth-msg.info { background: var(--toggle-bg); color: var(--toggle-fg); }
.btn-block { width: 100%; height: 40px; justify-content: center; margin-top: 4px; font-size: 14px; }
.auth-sso { display: flex; flex-direction: column; gap: 14px; }
.auth-or { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: var(--muted); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
/* Two-factor sign-in (web/chat/TwoFactor.tsx): the code's field, its step's links, Settings' trusted browsers */
.field input.code-input { font-family: var(--mono); letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.auth-trust { white-space: normal; color: var(--text); }
.auth-code-links { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; flex-wrap: wrap; }
.tf-actions { justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.link-btn:disabled { cursor: default; color: var(--faint); text-decoration: none; }
.trusted-list li > span { display: flex; flex-direction: column; gap: 2px; }
.trusted-list li strong { font-weight: 500; }
.trusted-list small { font-size: 12px; }
@media (min-width: 1101px) {
  #view-feedback .logs-filters { grid-template-columns: minmax(200px, 1fr) repeat(4, auto); }
  #view-egress .logs-filters { grid-template-columns: minmax(200px, 1fr) repeat(3, auto); }
}
.logs-filters #feedback-q, .logs-filters #egress-q, .logs-filters #audit-q { min-width: 0; }
/* Filters without a button after them: no empty column for one, so the row ends at the table's edge */
:is(#view-audit, #view-handoffs) .logs-filters { grid-template-columns: 1fr 160px 160px; }
@media (max-width: 1100px) {
  #view-audit .logs-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  #view-handoffs .logs-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) { #view-handoffs .logs-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.badge.rating { display: inline-flex; align-items: center; gap: 4px; }
.feedback-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.feedback-split .logs-table td, .feedback-split .logs-table th { padding: 6px 8px; }
.feedback-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); max-height: 320px; overflow-y: auto; }
.feedback-answer { max-height: 420px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); font-size: 14px; }
.feedback-reasons { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.feedback-reasons .check { white-space: normal; color: var(--text); }
.feedback-note { font-size: 13px; margin: 8px 0 0; }
/* A rating shows which way it went: good in green, bad in red. */
.icon-btn.rate-up[aria-pressed="true"] { color: var(--good); background: var(--good-bg); }
.icon-btn.rate-down[aria-pressed="true"] { color: var(--danger); background: var(--danger-bg); }
.slack-link { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.slack-link .link-btn { padding: 0; font-size: 13px; }
/* Admin → Settings */
.config-page { padding-bottom: 96px; }
.config-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.config-nav { flex: 1 1 180px; max-width: 210px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 8px; }
.config-nav a { display: flex; justify-content: space-between; align-items: center; height: 34px; padding: 0 10px; border-radius: var(--r); color: var(--text); text-decoration: none; font-size: 14px; }
.config-nav a:hover { background: var(--hover); }
.config-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.config-sec { display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 16px; }
.config-sec h2 { font-size: 16px; font-weight: 600; margin: 0; }
.config-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.config-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 8px 32px; align-items: center; padding: 14px 18px; }
.config-row + .config-row { border-top: 1px solid var(--border); }
.config-row.dirty { background: var(--toggle-bg); }
.config-label { font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.config-help { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 4px 0 0; }
.config-ctl { justify-self: end; width: 100%; max-width: 300px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.config-ctl.config-models { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 6px; max-width: 360px; }
.config-models-list { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 2px; padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
.config-models-list .check { color: var(--text); white-space: normal; overflow-wrap: anywhere; align-items: flex-start; padding: 2px 0; font-size: 13px; }
.config-models-list .check input { margin-top: 2px; flex-shrink: 0; }
.config-models-empty { margin: 4px 0; font-size: 13px; color: var(--muted); }
.config-models-count { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.config-models-count .check { font-size: 13px; }
.config-ctl .input, .config-ctl .select { width: 100%; height: 36px; }
.config-ctl input[type="number"] { width: 96px; text-align: right; font-family: var(--mono); }
.config-unit { font-size: 13px; color: var(--muted); white-space: nowrap; }
.config-env { justify-self: end; text-align: right; font: 13px var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.config-reset { border: 0; background: none; padding: 0; font-size: 12px; color: var(--link); cursor: pointer; }
.config-reset:hover { text-decoration: underline; }
.config-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.btn.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; flex: none; }
.config-note { margin: 0; }
.workflow-schedule-line { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--muted); }
.workflow-schedule-when { display: grid; grid-template-columns: 1fr 140px; gap: 12px; }
.schedule-window, .workflow-schedule-when.interval { grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .workflow-schedule-when, .workflow-schedule-when.interval { grid-template-columns: 1fr; } }
.schedule-days { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.schedule-days legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; padding: 0; }
.schedule-day { position: relative; display: inline-flex; }
.schedule-day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.schedule-day span { min-width: 48px; padding: 5px 8px; text-align: center; font-size: 13px; border: 1px solid var(--border-strong); border-radius: var(--r); color: var(--muted); }
.schedule-day input:checked + span { background: var(--toggle-bg); color: var(--toggle-fg); border-color: transparent; }
.schedule-day input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 1px; }
.schedule-hours { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.schedule-hours input[type="time"] { width: 120px; }
.schedule-summary { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--r); color: var(--text); }
.schedule-error { color: var(--danger); }
.workflow-draft-note { padding: 10px 12px; border: 1px solid var(--caution); border-radius: var(--r); background: var(--caution-bg); font-size: 14px; line-height: 1.5; }
.workflow-draft-note p { margin: 0; }
.workflow-draft-note .workflow-draft-guesses-head { margin-top: 8px; font-weight: 500; }
.workflow-draft-note ul { margin: 4px 0 0; padding-left: 20px; }
.config-test { margin: 0; padding: 8px 10px; border-radius: var(--r); font-size: 13px; line-height: 1.5; }
.config-test.ok { background: var(--good-bg); color: var(--good); }
.config-test.fail { background: var(--danger-bg); color: var(--danger); }
.config-secret { font: 13px var(--mono); color: var(--muted); margin-right: auto; }
#reauth .input { width: 100%; margin-top: 12px; box-sizing: border-box; }
.user-form { display: flex; flex-direction: column; gap: 12px; }
.user-form .input { width: 100%; box-sizing: border-box; }
.user-names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .user-names { grid-template-columns: 1fr; } }
.badge.changed { color: var(--toggle-fg); }
.badge.env { color: var(--caution); }
.seg { display: flex; width: 100%; border: 1px solid var(--border-strong); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.seg button { flex: 1; height: 34px; border: 0; background: none; color: var(--muted); font-size: 13px; font-weight: 500; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button[aria-pressed="true"] { background: var(--toggle-bg); color: var(--toggle-fg); }
.toggle { width: 44px; height: 24px; flex: none; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface-2); position: relative; padding: 0; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 1px; background: var(--faint); transition: left 0.12s; }
.toggle[aria-pressed="true"] { background: var(--primary); border-color: transparent; }
.toggle[aria-pressed="true"]::after { left: 23px; background: var(--primary-fg); }
.config-warn { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--r); background: var(--caution-bg); color: var(--caution); font-size: 13px; line-height: 1.5; }
.config-bar { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); width: min(640px, calc(100% - 32px)); box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px;
  padding: 10px 12px 10px 18px; background: var(--text); color: var(--bg); border-radius: var(--r); box-shadow: var(--shadow-lg); z-index: 5; }
.config-bar span { flex: 1 1 100px; font-size: 14px; }
.config-bar .btn:not(.btn-primary) { background: none; color: var(--bg); border-color: var(--muted); }
@media (max-width: 768px) {
  /* The sections as a row of links at the top, scrolling sideways, staying in view */
  .config-nav { flex: 1 1 100%; max-width: none; flex-direction: row; gap: 4px; overflow-x: auto; scrollbar-width: none; z-index: 2; top: 0;
    margin: 0 -2px; padding: 6px 2px; background: var(--bg); border-bottom: 1px solid var(--border); }
  .config-nav a { flex: none; gap: 6px; height: 30px; white-space: nowrap; font-size: 13px; border: 1px solid var(--border); background: var(--surface); }
  .config-sec { scroll-margin-top: 64px; } /* its heading below the row of links, not under it */
  .config-row { grid-template-columns: minmax(0, 1fr); }
  .config-ctl, .config-env { justify-self: start; justify-content: flex-start; text-align: left; max-width: none; }
}
.server-note { margin: 0; font-size: 13px; }
.server-monitoring { margin-top: 4px; }
.server-monitoring code { font-family: var(--mono); font-size: 13px; }
.notice-editor { margin-top: 4px; }
.notice-form { display: flex; flex-direction: column; gap: 12px; }
.notice-preview { min-height: 200px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); font-size: 14px; }
.notice-ask { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.notice-ask legend { font-size: 14px; font-weight: 500; margin-bottom: 6px; padding: 0; }
.notice-ask .check { white-space: normal; color: var(--text); }
.notice-people-head { margin: 12px 0 0; }
.notice-card { width: min(640px, 100%); }
.notice-body { max-height: min(52vh, 520px); overflow-y: auto; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: 14px; }
.notice-check { white-space: normal; color: var(--text); align-items: flex-start; }
.link-btn { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 4px; align-self: center; text-align: start; }
.link-btn:hover { color: var(--text); text-decoration: underline; }
/* A link-button that is a list item's text (a question, a reference) reads as a link in the list: a button's text is
   centred by default, and as an inline block its baseline is its last line, which put the bullet beside the last line
   of a long one. Aligned at the top, with the item's font and no padding, its first line sits on the bullet's. */
li > .link-btn { vertical-align: top; padding-top: 0; padding-bottom: 0; font-size: inherit; line-height: inherit; text-align: start; }

/* ---------- small screens ---------- */
@media (max-width: 768px) {
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 30;
    width: min(84vw, 300px);
    transform: translateX(-100%);
    /* hidden once it has slid away, so Tab and screen readers skip the closed drawer */
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0s 0.22s;
  }
  .app.sb-collapsed .sidebar { margin-left: 0; }
  .app.sb-open .sidebar { transform: none; box-shadow: var(--shadow-lg); visibility: visible; transition: transform 0.22s ease; }
  .app.sb-open .scrim, .app.sb-dragging .scrim { display: block; position: fixed; inset: 0; z-index: 20; background: rgb(0 0 0 / 0.4); }
  .app.sb-dragging .sidebar { visibility: visible; transition: none; box-shadow: var(--shadow-lg); } /* follows the finger (sessions.js) */
  .topbar .when-closed { display: inline-flex; }
  .session-actions { display: flex; background: none; }
  .session-open { padding-right: 70px; }
  .thread { padding: 8px 16px 40px; }
  .composer-wrap { padding: 0 10px 8px; }
  .view-chat.is-empty .suggestions { --per-row: 2; --gap: 8px; }
  /* Model names are long: the picker shrinks to its icon, with the select over it so a tap still opens it. */
  #model-pick { padding: 0; width: 36px; justify-content: center; }
  #model-pick select { position: absolute; inset: 0; opacity: 0; width: 100%; }
  #model-pick [data-icon="chevronDown"] { display: none; }
  /* The effort picker shows its level in a word (High, Hoch, Élevé) with the bulb: its whole name (High effort,
     Hoher Aufwand) was cut to "High e…" beside Search and the microphone. The select, transparent, lies over the pill,
     so a tap opens it and a screen reader reads it whole. */
  .select-pill:has(> .select-pill-short) select { position: absolute; inset: 0; opacity: 0; width: 100%; }
  .select-pill-short { display: inline; white-space: nowrap; }
  .select-pill:not(#model-pick) { min-width: 0; flex-shrink: 1; }
  .select-pill select { min-width: 0; text-overflow: ellipsis; }
  .project-edit { opacity: 1; } /* no hover on touch screens */
  .suggestion .feat-sub { display: none; }
  .hero h1 { font-size: 20px; }
  .add-user { grid-template-columns: 1fr 1fr; }
  .page { padding: 4px 16px 32px; }
  .markdown th, .markdown td { min-width: 7em; } /* a wide table scrolls rather than stacking one word per line */
}

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60;
  max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--r);
  background: var(--text); color: var(--bg); font-size: 14px; box-shadow: var(--shadow-lg);
}

/* ---------- documents, memory, tool output ---------- */
.nav-count { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.doc-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  height: 32px; padding: 0 10px; border-radius: var(--r);
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; color: var(--text);
}
.doc-chip > span:first-child { color: var(--muted); display: inline-flex; }
.doc-chip .doc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.doc-chip .doc-err { color: var(--danger); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.doc-chip.pending { align-self: center; }
.doc-chip.uploading .doc-name { opacity: 0.6; }
.doc-chip.uploading > span:first-child { animation: pulse 1s ease-in-out infinite alternate; }
.doc-chip.error { border-color: color-mix(in srgb, var(--danger) 40%, transparent); background: var(--danger-bg); }
@keyframes pulse { to { opacity: 0.3; } }
.chip-x { border: 0; background: none; color: var(--muted); display: inline-flex; padding: 2px; margin-right: -4px; border-radius: var(--r); cursor: pointer; }
.chip-x:hover { background: var(--hover); color: var(--text); }
.user-docs { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.tool-out { margin: 4px 0 8px 25px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tool-out .btn.sm { display: inline-flex; align-items: center; gap: 6px; }
/* Text read from an image: the view is web/shared/OcrView.tsx, styled by web/shared/ocr.css. */
.tool-out.ocr-out { align-items: stretch; }
.figure { max-width: 100%; border-radius: var(--r); border: 1px solid var(--border); background: #fff; }
.file-row { display: flex; gap: 6px; flex-wrap: wrap; }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 13px; cursor: pointer;
}
.file-chip:hover { background: var(--hover); }
.py-code pre { margin: 0 0 6px; max-height: 320px; overflow: auto; }
.py-output {
  margin: 0; padding: 8px 12px; max-height: 260px; overflow: auto;
  font: 13px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r); color: var(--muted);
}
.sources .source { display: flex; flex-direction: column; padding: 6px 10px; font-size: 14px; }
.sources button.source { width: 100%; border: 0; background: none; text-align: left; color: inherit; cursor: pointer; font: inherit; font-size: 14px; border-radius: var(--r); }
.sources button.source:hover { background: var(--hover); }

.switch { position: relative; margin-left: auto; flex-shrink: 0; width: 40px; height: 24px; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch span { position: absolute; inset: 0; border-radius: var(--r); background: var(--border-strong); transition: background 0.15s; }
.switch span::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--r);
  background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s;
}
.switch input:checked + span { background: var(--link); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { outline: 2px solid var(--link); outline-offset: 2px; }
.memory-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.memory-list:empty { display: none; }
.memory-list li {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px 6px 12px;
  border: 1px solid var(--border); border-radius: var(--r); font-size: 14px;
}
.memory-list li > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.memory-list.off li > span { color: var(--faint); }

/* Documents page */
.docs-filters { grid-template-columns: 1fr 170px 170px 150px; }
.docs-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; padding: 6px 10px; border-radius: var(--r); background: var(--toggle-bg); }
#docs-bulk-count { margin-right: auto; }
.docs-bulk .btn { display: inline-flex; align-items: center; gap: 6px; }
.docs-table .col-check { width: 34px; padding-right: 0; }
.docs-table td.doc-cell { white-space: normal; width: 100%; }
.doc-cell-in { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-cell-in > div { min-width: 0; }
.doc-title { overflow-wrap: anywhere; }
.doc-title strong { margin-right: 6px; } /* spaced on the right, so a badge that wraps lines up with the name */
.doc-title .badge { vertical-align: 1px; }
.doc-cell-in strong { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.docs-table td.doc-cell small { display: flex; gap: 6px; align-items: center; margin-top: 2px; font-family: inherit; font-size: 12px; }
.docs-table tr.busy small { animation: pulse 1s ease-in-out infinite alternate; }
.docs-table tr.static { cursor: default; }
.docs-table .doc-icon { color: var(--muted); display: inline-flex; flex-shrink: 0; }
.docs-table td.actions { white-space: nowrap; text-align: right; }
.docs-table td.actions .icon-btn { display: inline-flex; align-items: center; justify-content: center; }
.docs-table .icon-btn.on, .docs-detail-actions .btn.on { color: var(--toggle-fg); background: var(--toggle-bg); }
.docs-detail-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 14px; }
.docs-detail-actions .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; }
.docs-detail-actions .btn-primary { color: var(--primary-fg); }
.docs-rename { flex: 1; min-width: 0; height: 32px; font-size: 16px; font-weight: 600; }
.docs-pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.docs-pager > span, #doc-view-page { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.docs-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; background: var(--surface-2); border-radius: var(--r); padding: 12px 14px; }
.docs-text mark, .docs-hit mark { background: var(--highlight); color: inherit; border-radius: var(--r); padding: 1px 0; }
/* Personal data found on the page: the highlight, underlined so it reads apart from the search words */
.docs-text mark.pii { box-shadow: inset 0 -2px var(--danger); }
.doc-title .pii-badge { white-space: normal; } /* the kinds may be long: they wrap rather than widen the row on a phone */
.docs-section { margin: 20px 0 8px; font-size: 14px; font-weight: 600; }
.docs-table .badge.reading { animation: pulse 1s ease-in-out infinite alternate; }
.docs-table small { flex-wrap: wrap; }

.docs-reading { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.docs-reading.err-text { color: var(--danger); }
.docs-image { display: block; max-width: 100%; max-height: min(70vh, 640px); margin: 0 auto 12px; border: 1px solid var(--border); border-radius: var(--r); object-fit: contain; background: var(--surface-2); }
.docs-hits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.docs-hit { display: block; width: 100%; text-align: left; border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; background: none; color: inherit; font: inherit; cursor: pointer; }
.docs-hit:hover { background: var(--surface-2); }
.docs-hit strong { display: block; font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.docs-hit span { font-size: 13px; color: var(--muted); }
#view-docs.dragging .docs-dropzone { display: flex; }

/* Citation viewer */
/* Citations come in runs: lime on each would drown the answer, so they take the text colour until pointed at. */
.markdown a.cite { color: var(--text); background: var(--surface-2); border-radius: var(--r); padding: 0 5px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.markdown a.cite:hover { color: var(--link); background: var(--hover); text-decoration: none; }
.markdown a.cite.cite-img { white-space: normal; }
.modal-docview { width: min(820px, calc(100vw - 32px)); }
.modal-imgview { width: min(1100px, calc(100vw - 32px)); }
.modal-imgview .modal-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 64px); }
.modal-imgview .modal-body { padding: 0; }
/* On a phone the larger view fills the screen (its image above its lines: ocr.css). */
@media (max-width: 640px) {
  .modal-imgview { width: 100vw; max-width: 100vw; margin: 0; }
  .modal-imgview .modal-inner { max-height: 100dvh; height: 100dvh; }
}
.modal-docview .modal-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 64px); }
.docview-title { min-width: 0; }
.docview-title h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.docview-title p { margin: 2px 0 0; font-size: 13px; }
.docview-bar { display: flex; align-items: center; gap: 8px; padding: 0 20px 10px; flex-wrap: wrap; }
.docview-bar .btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.docview-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; overflow-y: auto; min-height: 200px; border-top: 1px solid var(--border); }
.docview-text mark { background: var(--highlight); color: inherit; border-radius: var(--r); padding: 1px 0; }

/* ---------- LLM call log (admins) ---------- */
.logs-page { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.logs-page > * { flex-shrink: 0; } /* a long page scrolls; its tables (which scroll sideways) mustn't be squeezed */
/* Title and actions on one row, the description under both. */
.logs-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; }
.logs-head > div:first-child { display: contents; }
.logs-head h1 { grid-area: 1 / 1; font-size: 24px; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.logs-head p { grid-area: 2 / 1 / 3 / 3; color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.logs-actions { grid-area: 1 / 2; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
#usage-user, #usage-model { max-width: 220px; }
@media (max-width: 640px) {
  .logs-actions { grid-area: 3 / 1 / 4 / 3; margin-top: 10px; justify-content: flex-start; }
  #usage-user, #usage-model { flex: 1 1 140px; min-width: 0; }
}
.logs-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.period-range { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.period-range[hidden] { display: none; }
.period-range .input { width: auto; min-width: 0; }
@media (max-width: 640px) {
  .period-range { flex: 1 1 100%; }
  .period-range .input { flex: 1 1 0; }
}
.logs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.logs-stats .stat { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; }
.logs-stats strong { font: 500 20px/1.3 var(--mono); font-variant-numeric: tabular-nums; }
.logs-stats span { font-size: 13px; color: var(--muted); }
.logs-stats .stat.warn strong { color: var(--danger); }
.logs-filters { display: grid; grid-template-columns: 1fr 160px 160px auto; gap: 8px; align-items: center; }
#handoffs-status { width: 180px; max-width: 100%; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.logs-chip { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--muted); }
.logs-chip code { font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--surface-2); padding: 2px 8px; border-radius: var(--r); }
.logs-body { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; min-height: 0; }
.logs-list { min-width: 0; }
.logs-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r); }
.logs-table-wrap:has(tbody:empty) { display: none; } /* the page's "No … yet" line says it instead */
.logs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.logs-table th { text-align: left; font: 500 11px/1.6 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; background: var(--surface-2); white-space: nowrap; }
.logs-table td { padding: 7px 10px; border-top: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.logs-table td small { display: block; color: var(--faint); font-family: var(--mono); font-size: 11px; }
.logs-table .num { text-align: right; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.logs-table td.when { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; color: var(--muted); }
.logs-table tbody tr { cursor: pointer; }
.logs-table tbody tr:hover { background: var(--surface-2); }
.logs-table tbody tr.selected { background: var(--hover); box-shadow: inset 2px 0 var(--link); }
.logs-table tbody tr:focus-visible { outline-offset: -2px; }
.logs-empty { color: var(--faint); text-align: center; font-size: 14px; margin: 24px 0; }
.logs-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); }
.logs-pager .pages { display: flex; align-items: center; gap: 4px; }
.logs-pager .pages .current { padding: 0 8px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
/* On a phone the count takes a line of its own and the buttons the next, the four-button pagers down to their arrows. */
@media (max-width: 640px) {
  .logs-pager { flex-direction: column; align-items: stretch; gap: 8px; }
  .logs-pager .pages { flex-wrap: wrap; justify-content: space-between; }
  .logs-pager .pages:has(> :nth-child(5)) .page-word { display: none; }
  .logs-pager .pages:has(> :nth-child(5)) .btn { min-width: 36px; justify-content: center; }
}
.modal-panel { width: min(1000px, calc(100vw - 32px)); }
.modal-panel .modal-inner { display: flex; flex-direction: column; max-height: calc(100dvh - 48px); }
.panel-head { gap: 4px; padding: 12px 12px 8px 22px; border-bottom: 1px solid var(--border); }
/* A long title (a team's, a person's) wraps onto a second line rather than being cut where it can't be read whole */
.panel-head h2 { margin-right: 6px; min-width: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.panel-head > :not(h2) { flex-shrink: 0; }
.panel-head .count { font-family: var(--mono); font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.panel-body { flex: 1; min-height: 0; max-height: none; padding-top: 4px; padding-bottom: 20px; }
.detail-meta { margin: 6px 0 10px; font-size: 13px; grid-template-columns: max-content 1fr; }
.detail-meta dd.mono { font-family: var(--mono); font-size: 12px; }
.detail-meta .err-text { color: var(--danger); }
.detail-meta .link-btn { font: 13px/1.4 var(--sans); padding: 0 4px; color: var(--link); }
.log-h { font-size: 12px; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.log-section > summary, .log-msg > summary { cursor: pointer; font-size: 14px; padding: 5px 0; color: var(--text); }
.log-section > summary { font-weight: 500; }
.log-pre {
  margin: 2px 0 8px; padding: 8px 10px; max-height: 420px; overflow: auto;
  font: 12px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r);
}
.log-pre.muted { color: var(--muted); }
.log-label { font-size: 12px; color: var(--muted); margin: 4px 0 2px; }
.log-msgs { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.log-msg { border-left: 3px solid var(--border-strong); padding-left: 10px; }
.log-msg > summary { display: flex; gap: 8px; align-items: baseline; list-style: none; }
.log-msg > summary::-webkit-details-marker { display: none; }
.log-msg .role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; min-width: 62px; color: var(--muted); }
.log-msg .preview { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.log-msg .size { color: var(--faint); font-size: 11px; white-space: nowrap; }
.log-msg.role-system { border-color: var(--border-strong); }
.log-msg.role-user { border-color: var(--link); }
.log-msg.role-assistant { border-color: var(--good); }
.log-msg.role-tool { border-color: var(--caution); }
.debug-actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ---------- Usage & cost, Evals (admins) ---------- */
.admin-page { gap: 14px; padding-bottom: 48px; }
.logs-stats small { font-size: 12px; color: var(--faint); }
.logs-stats small.err-text { color: var(--danger); }
.card { border: 1px solid var(--border); border-radius: var(--r); padding: 12px 16px 14px; background: var(--surface); min-width: 0; }
.card-head { display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.card-head h2 { font-size: 16px; font-weight: 600; margin: 0; }
.card-head p { margin: 0; font-size: 13px; }
.card-head .select { margin-left: auto; }
.select.sm { height: 28px; font-size: 13px; padding-top: 0; padding-bottom: 0; }
.muted { color: var(--muted); }
.logs-table-wrap.flat { border: 0; border-radius: 0; }
.logs-table.static tbody tr { cursor: default; }
.logs-table.static tbody tr:hover { background: none; }
.logs-table td.err-text { color: var(--danger); }
.logs-table td.files { max-width: 260px; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.logs-table td.actions { text-align: right; }
.logs-table td.actions .link-btn { font-size: 13px; color: var(--link); padding: 0 4px; }
.logs-table tr.check-output td { white-space: normal; background: var(--surface-2); }
.logs-table .share { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.meter { display: inline-block; width: 64px; height: 6px; border-radius: var(--r); background: var(--surface-2); overflow: hidden; }
.meter > span { display: block; height: 100%; background: var(--brand); border-radius: var(--r); }

.chart { position: relative; min-height: 120px; }
.chart svg { display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.chart-axis { fill: var(--muted); font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.chart-bar { fill: var(--brand); }
.chart-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.chart-key { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
.chart-key span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-swatch { width: 10px; height: 10px; border-radius: var(--r); flex-shrink: 0; }
.chart-hit { fill: transparent; }
.chart-col { outline: none; }
.chart-col.clickable { cursor: pointer; }
.chart-col.hover .chart-hit, .chart-col:focus-visible .chart-hit { fill: var(--surface-2); }
.chart-col:focus-visible .chart-hit { stroke: var(--link); stroke-width: 1.5; }
.chart-empty { color: var(--faint); font-size: 14px; text-align: center; margin: 40px 0; }
.chart-tip {
  position: absolute; z-index: 2; pointer-events: none; min-width: 140px; padding: 8px 10px; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); box-shadow: var(--shadow);
}
.chart-tip-title { color: var(--muted); margin-bottom: 4px; white-space: nowrap; }
.chart-tip-row { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.chart-tip-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-tip-row span { color: var(--muted); }
/* charts in answers (web/shared/answercharts.ts) */
.answer-chart { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.answer-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.answer-chart-head figcaption { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.answer-chart-head figcaption strong { font-size: 14px; font-weight: 600; }
.answer-chart-head figcaption small { color: var(--muted); font-size: 12px; }
.answer-chart-head .btn[aria-pressed="true"] { background: var(--toggle-bg); color: var(--toggle-fg); border-color: transparent; }
.answer-chart-plot { min-height: 220px; }
.answer-chart-tools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.figure-wrap { position: relative; max-width: 100%; }
.figure-wrap .picture-btn { position: absolute; top: 6px; right: 6px; background: var(--surface); border: 1px solid var(--border); opacity: 0; transition: opacity .15s; }
.figure-wrap:hover .picture-btn, .figure-wrap .picture-btn:focus-visible { opacity: 1; }
@media (hover: none) { .figure-wrap .picture-btn { opacity: 1; } }
.answer-chart .chart-marks { pointer-events: none; }
.answer-chart .chart-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.answer-chart .chart-dot { stroke: var(--surface); stroke-width: 2; }
.answer-chart .chart-crossline { stroke: var(--border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.answer-chart .chart-cross { pointer-events: none; }
.answer-chart .chart-zero { stroke: var(--border-strong); }
.answer-chart .chart-hit-line { fill: transparent; }
.answer-chart .chart-col.hover .chart-hit-line, .answer-chart .chart-col:focus-visible .chart-hit-line { fill: transparent; }
.answer-chart .chart-direct { fill: var(--muted); font-size: 12px; }
.answer-chart .chart-tip-row .chart-swatch { align-self: center; }
.answer-chart .chart-tip-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.answer-chart-table { overflow-x: auto; }
.answer-chart-more { margin: 6px 0 0; font-size: 12px; }
.answer-chart-wait { font-size: 13px; }

.logs-table.matrix { width: auto; min-width: min(100%, 420px); }
.matrix td.cell { text-align: center; font-weight: 600; width: 44px; padding: 6px 4px; }
.matrix td.cell.pass { color: var(--good); background: var(--good-bg); }
.matrix td.cell.fail { color: var(--danger); background: var(--danger-bg); }
.matrix td.cell.mixed { color: var(--caution); background: var(--caution-bg); font-size: 12px; }
.matrix td.cell.none { color: var(--faint); }
.matrix tbody td { border-top: 2px solid var(--surface); }
.matrix th.run-col { text-align: center; padding: 6px 4px; }
.matrix th.run-col .link-btn { font-size: 12px; padding: 0 2px; color: var(--muted); }
.matrix th.run-col.selected .link-btn { color: var(--text); font-weight: 600; text-decoration: underline; }
.matrix th.run-col small { display: block; font-weight: 400; font-size: 11px; white-space: nowrap; }

/* Evals: tabs and the chat runs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tabs [role="tab"] {
  border: 0; background: none; padding: 8px 12px; margin-bottom: -1px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent;
}
.tabs [role="tab"]:hover { color: var(--text); }
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--brand); }
.chat-evals-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.model-checks { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; } /* a fieldset won't shrink below its content without it */
.model-checks legend { padding: 0; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
.model-checks .check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; white-space: normal; }
.field-inline { display: flex; flex-direction: column; align-items: stretch; gap: 6px; font-size: 13px; color: var(--muted); }
/* A checkbox goes before its label, on its line: the label of a select or a field stays above it */
.field-inline:has(> input[type="checkbox"], > input[type="radio"]) { flex-direction: row; align-items: center; gap: 8px; }
.check-list { list-style: none; margin: 4px 0 8px; padding: 0; font-size: 13px; }
.ok-text { color: var(--good); }
.check-list .err-text { color: var(--danger); }
.eval-answer { border-left: 3px solid var(--border); padding-left: 12px; font-size: 14px; }
.badge.flaky { color: var(--caution); }
.badge.ok.pass { color: var(--good); }
#evals-body, #evals-chat, #chat-evals-body, #evals-bench, #bench-body { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
:is(#evals-body, #evals-chat, #chat-evals-body, #evals-bench, #bench-body)[hidden] { display: none; }
#bench-form { display: flex; flex-direction: column; gap: 14px; }
.bench-cats summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.bench-cats .model-checks { margin-top: 8px; }
.bench-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--muted); margin: 0; }
.score-cell { display: inline-flex; align-items: center; gap: 8px; }
.score-bar { width: 60px; height: 6px; border-radius: var(--r); background: var(--surface-2); overflow: hidden; flex-shrink: 0; }
.score-bar span { display: block; height: 100%; border-radius: var(--r); background: var(--muted); }
.score-bar.ref span { background: var(--faint); }
.badge.verdict-interchangeable { color: var(--good); }
.badge.verdict-human { color: var(--caution); }
.badge.verdict-keep { color: var(--danger); }
.bench-thresholds { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.bench-total td { font-weight: 600; border-top: 1px solid var(--border); }
.bench-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; }
.bench-q-detail { display: grid; gap: 12px; }
.bench-q-detail h4 { margin: 0 0 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.bench-replies { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.bench-reply { border: 1px solid var(--border); border-radius: var(--r); padding: 10px 12px; min-width: 0; }
.bench-reply .bench-raw { font-size: 14px; max-height: 360px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 10px; }
#bench-questions td.prompt-cell, #bench-zeros td.prompt-cell { white-space: normal; min-width: 240px; }
#bench-questions tr.check-output > td { white-space: normal; }
.bench-reply .turn-label { font-size: 12px; color: var(--faint); margin: 8px 0 2px; }
.bench-prompt { white-space: pre-wrap; font-size: 14px; margin: 0; max-height: 200px; overflow: auto; }
.scores-inline { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; }
td.score-0 { color: var(--danger); font-weight: 600; }
.tabs { flex-shrink: 0; margin-bottom: 2px; }

.prices .price-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.prices label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 13px; color: var(--muted); }
.prices .input { width: 100%; } /* an input is 20 characters wide by default, wider than a phone's column */
.prices .form-msg { margin-top: 8px; }

@media (max-width: 1100px) {
  .logs-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .logs-filters #logs-q, .logs-filters #docs-q, .logs-filters #feedback-q, .logs-filters #egress-q, .logs-filters #audit-q { grid-column: 1 / -1; }
  .docs-filters { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 768px) {
  .modal-panel { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  .modal-panel .modal-inner { max-height: 100dvh; height: 100%; }
  /* The body takes the whole screen under the title, to its bottom edge (a desktop dialog leaves room around it). */
  .modal-panel .modal-inner > .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; }
  .panel-head { padding-left: 16px; }
  .panel-head .count, .panel-head .copy-text span:last-child { display: none; }
  .panel-body { padding-left: 16px; padding-right: 16px; }
  .logs-stats { grid-template-columns: 1fr 1fr; }
  .prices .price-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .prices .price-fields .btn { grid-column: 1 / -1; }
  .logs-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .logs-filters #logs-q, .logs-filters #docs-q, .logs-filters #feedback-q, .logs-filters #egress-q, .logs-filters #audit-q { grid-column: 1 / -1; }
  .docs-table .col-type, .docs-table .col-pages, .docs-table .col-added { display: none; }
  /* The name gets the room: a row keeps its preview and download, and opens its window for Share and Delete. */
  .docs-table td.actions > :nth-child(n + 3) { display: none; }
  select.select { max-width: 100%; } /* a long option (a document's name) would widen the page */
  /* The Law, Funds and claims apps are for a computer: on a phone they show their data, and the actions that edit a
     lot (importing a portfolio, creating a registration's tasks) are left to the computer. */
  .on-desk { display: none !important; }
}

/* On a phone a list table's rows stack: the main cell on a line of its own, the others in a small line under it,
   and cells marked .wide left out (the row's details dialog has them). Score tables keep scrolling sideways. */
@media (max-width: 640px) {
  .logs-table.stack thead { display: none; }
  .logs-table.stack tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 10px 12px; }
  .logs-table.stack tbody tr + tr { border-top: 1px solid var(--border); }
  /* A cell keeps its width and goes to the next line rather than shrink to nothing beside a long one (badges). */
  .logs-table.stack td { display: block; flex: 0 0 max-content; max-width: 100%; white-space: normal; padding: 0; border: 0; color: var(--muted); font-size: 13px; text-align: left; }
  .logs-table.stack td.main { order: -1; flex: 1 0 100%; max-width: none; color: var(--text); font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .logs-table.stack td.main small { display: inline; margin-left: 6px; }
  .logs-table.stack td.sub { order: -1; flex: 1 0 100%; max-width: none; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .logs-table.stack td.wide { display: none; }
  .logs-table.stack td:empty { display: none; }
  .logs-table.stack td[data-label]::after { content: " " attr(data-label); } /* a number says what it counts */
}

/* Print (Export → Print or save as PDF): only the conversation. */
@media print {
  .sidebar, .topbar, .composer-wrap, .disclaimer, .scroll-down, .msg-foot, .user-foot, .debug, .drop-overlay, dialog { display: none !important; }
  html, body, .app, main.main, .view-chat, .scroller { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  .thread { max-width: none; padding: 0; }
  .msg-ai, .msg-user { break-inside: avoid-page; }
  .bubble { border: 1px solid #ccc; }
  .markdown a.cite { background: none; padding: 0; }
}

/* ---------- handoffs ---------- */
.confirm-card { margin: 4px 0 10px 25px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.confirm-card p { margin: 0; }
.confirm-card .confirm-q { font-weight: 600; }
.confirm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.email-field { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: 8px; }
.email-field > span { color: var(--muted); padding-top: 7px; }
.email-edit { resize: vertical; min-height: 140px; font: inherit; }
.email-preview { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); max-height: 320px; overflow: auto; min-width: 0; }
.email-preview > :first-child { margin-top: 0; }
.email-preview > :last-child { margin-bottom: 0; }
.email-view dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0 0 8px; }
.email-view dt { color: var(--muted); }
.email-view dd { margin: 0; overflow-wrap: anywhere; }
.email-body { white-space: pre-wrap; font: inherit; margin: 0; padding: 8px 10px; background: var(--bg); border-radius: var(--r); max-height: 320px; overflow: auto; }
.handoff-card { max-width: var(--thread); margin: 0 auto 18px; width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: 14px; }
.handoff-card.replied { border-color: var(--good); }
.handoff-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-weight: 600; }
.handoff-head .badge { margin-left: auto; }
.handoff-reason { margin: 6px 0 0; }
.handoff-reply { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.handoff-by { margin: 0 0 6px; font-weight: 600; color: var(--good); }
.handoff-title, .handoff-reason-cell { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handoff-transcript { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.handoff-turn { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.handoff-q { margin: 0 0 6px; }
.handoff-steps { margin: 0 0 8px; padding-left: 18px; font-size: 13px; color: var(--muted); word-break: break-word; }
.handoff-answer { font-size: 14px; }
#handoff-view-body h3 { margin: 16px 0 8px; font-size: 16px; }
#handoff-view-body textarea { width: 100%; }
#ask-colleague-reason, #feedback-comment { width: 100%; margin-top: 10px; }

/* ---------- sharing a chat with colleagues (Share.tsx) ---------- */
.share-modal { width: min(560px, calc(100vw - 32px)); }
.share-modal .modal-body { padding-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.share-modal .modal-body p { margin: 0; font-size: 14px; }
.share-modal h2 { margin-bottom: 4px; }
.share-modal #ask-colleague-reason { margin-top: 0; }
.share-label { font-size: 14px; font-weight: 500; margin-bottom: -4px; }
.share-kind-text { color: var(--muted); }
.recipients { min-width: 0; position: relative; }
.recipient-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--bg); cursor: text; }
.recipient-box:focus-within { border-color: var(--link); }
.recipient-input { flex: 1; min-width: 140px; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 14px; height: 28px; padding: 0 2px; }
.recipient-chip { font-size: 13px; padding: 2px 8px; }
.recipient-chip.team > span:first-child, .recipient-chip.admins > span:first-child { color: var(--link); }
.recipient-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; list-style: none; margin: 4px 0 0; padding: 4px 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-lg); max-height: 232px; overflow-y: auto; }
.recipient-option { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 14px; cursor: pointer; }
.recipient-option .icon { color: var(--muted); flex-shrink: 0; }
.recipient-option .muted { font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recipient-option.active { background: var(--hover); }
.share-warnings { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border-radius: var(--r); background: var(--caution-bg); color: var(--caution); font-size: 13px; }
.share-warnings p { display: flex; gap: 8px; align-items: flex-start; margin: 0; }
.share-warnings .icon { flex-shrink: 0; margin-top: 2px; }
.handoff-confirm .seg { max-width: 360px; }
.handoff-confirm .email-field textarea { width: 100%; font: inherit; }
.handoff-replies .handoff-reply + .handoff-reply { margin-top: 8px; }
.handoff-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.shared-actions { margin: 4px 0 8px; }
.handoff-to { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#shared-rows tr.unseen .main { font-weight: 600; }
#shared-rows .badge.new { color: var(--link); }
#shared-view-body h3, #handoff-view-body h3 { margin: 16px 0 8px; font-size: 16px; }
#shared-view-body textarea, #handoff-view-body textarea { width: 100%; }
#shared-kind, #shared-status, #handoffs-kind, #handoffs-recipient { width: 180px; max-width: 100%; }

/* ---------- Admin → Connectors ---------- */
.connector-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; }
.connector-body > * { flex-shrink: 0; }
.connector-body #connector-http, .connector-body #connector-stdio { display: flex; flex-direction: column; gap: 12px; }
.connector-body #connector-stdio[hidden] { display: none; }
.connector-body #connector-http[hidden] { display: none; }
.connector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: end; }
.connector-on { flex-direction: row; align-items: center; padding-bottom: 10px; }
.connector-hint { margin: -4px 0 0; font-size: 13px; }
.connector-tools-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.connector-tools-head h3 { margin: 0; font-size: 16px; }
.connector-tools td { vertical-align: top; }
.connector-tools .tool-desc { color: var(--muted); font-size: 13px; display: block; margin-top: 2px; }
.connector-tools .tool-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.connector-tools .tool-name strong { font: 500 13px var(--mono); overflow-wrap: anywhere; }
.connector-says { margin: 0; font-size: 13px; }
.connector-tools td.main { white-space: normal; }
.connector-tools .tool-check { display: inline-flex; align-items: center; gap: 6px; }
.connector-tools .tool-check span { display: none; }
@media (max-width: 640px) {
  .connector-tools.stack tbody tr { gap: 8px 20px; }
  .connector-tools.stack td.main { font-size: 13px; }
  .connector-tools .tool-check span { display: inline; }
}
.field select.select { width: 100%; height: 40px; font-weight: 400; }

/* ---------- the assistant's plan (update_plan) ---------- */
.plan { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font-size: 14px; }
.plan[hidden] { display: none; }
.plan-head { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; margin-bottom: 6px; }
.plan-head .muted { font-weight: 400; font-size: 13px; }
.plan ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.plan-step { display: flex; align-items: flex-start; gap: 8px; }
.plan-mark { display: inline-flex; padding-top: 2px; color: var(--muted); }
.plan-step.done { color: var(--muted); }
.plan-step.done > span:last-child { text-decoration: line-through; }
.plan-step.done .plan-mark { color: var(--toggle-fg); }
.plan-step.in_progress { font-weight: 600; }
.plan-step.in_progress .plan-mark { color: var(--link); animation: pulse 1s ease-in-out infinite alternate; }

/* ---------- workflows ---------- */
.workflow-body { display: flex; flex-direction: column; gap: 12px; }
.workflow-body > * { flex-shrink: 0; }
.workflow-body h3 { margin: 4px 0 0; font-size: 16px; }
.workflow-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.workflow-rows { display: flex; flex-direction: column; gap: 8px; }
.workflow-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.workflow-row > input:first-child { flex: 1 1 260px; min-width: 0; }
.workflow-row .select { width: auto; }
.workflow-body input:not([type=checkbox]), .workflow-body textarea, .workflow-body select { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--text); font: inherit; }
.workflow-body .field-inline { flex-direction: row; align-items: center; }
.approval-work { max-height: 360px; overflow: auto; padding: 8px 10px; background: var(--bg); border-radius: var(--r); }

/* ---------- narrow screens: labels that don't fit ---------- */
/* A button whose label is longer than the screen is wide (a long name, a German word) wraps it inside and grows to
   hold it, rather than letting it run out of its box (a desktop's buttons have a fixed height). A toolbar's filters
   take a line each; a badge's long text wraps. */
@media (max-width: 768px) {
  .btn { height: auto; min-height: 32px; padding-top: 4px; padding-bottom: 4px; line-height: 1.25; text-align: left; }
  .btn.sm { min-height: 28px; }
  .btn.btn-sm { min-height: 30px; }
  .legal-toolbar .field-inline:not(:has(> input[type="checkbox"], > input[type="radio"])) { flex: 1 1 100%; min-width: 0; }
  .legal-toolbar .field-inline > .select, .legal-toolbar .field-inline > select, .legal-toolbar .field-inline > input { flex: 1 1 auto; min-width: 0; }
  /* A labelled field's select no wider than the screen (its longest option would set its width). */
  .field-inline { min-width: 0; max-width: 100%; }
  .field-inline > :is(select, .select) { min-width: 0; max-width: 100%; }
  .badge { white-space: normal; overflow-wrap: anywhere; }
  /* A checkbox's long label wraps beside it; a word longer than the screen (a field's code name) breaks. */
  .check { white-space: normal; }
  /* Tabs and the apps' segmented choices take more rows rather than scroll sideways, where the ones past the edge
     would go unseen; the segments become separate boxes, the chosen one filled. */
  .tabs { flex-wrap: wrap; row-gap: 0; }
  .legal-latest-head .seg, .seg.legal-seg, .seg.funds-verdicts { flex-wrap: wrap; gap: 4px; overflow: visible; border: 0; background: none; }
  :is(.legal-latest-head .seg, .seg.legal-seg, .seg.funds-verdicts) button { border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); }
  :is(.legal-latest-head .seg, .seg.legal-seg, .seg.funds-verdicts) button + button { border-left: 1px solid var(--border-strong); }
  :is(.legal-latest-head .seg, .seg.legal-seg, .seg.funds-verdicts) button[aria-pressed="true"] { background: var(--toggle-bg); }
  .droit-main, .modal-body { overflow-wrap: break-word; }
  /* A dialog's or a form's buttons share the line and wrap onto the next when their labels need it, each as wide as
     its share. */
  .form-actions, .modal-foot { flex-wrap: wrap; gap: 8px; }
  .form-actions > .btn, .modal-foot > .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
}
/* On a phone a dialog's or a form's actions stack, each the row's width: side by side, a button, a select and a
   longer button came out of different widths and heights. */
@media (max-width: 640px) {
  .form-actions, .modal-foot { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  :is(.form-actions, .modal-foot) > .spacer { display: none; }
  :is(.form-actions, .modal-foot) > :is(select, .select) { width: 100%; max-width: none; }
}

/* ---------- touch screens ---------- */
/* Safari on iPhone zooms in on a field whose text is under 16px when it gets focus (tapped, or focused by a window
   that opens), and doesn't zoom back: the page is then wider than the screen. So fields are 16px on touch screens. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}
/* A finger needs about 40px: on a phone's touch screen buttons and icon buttons are at least that tall (and icon
   buttons that wide), whatever their size on a desktop. */
@media (pointer: coarse) and (max-width: 768px) {
  .icon-btn, .icon-btn.sm { min-width: 40px; min-height: 40px; }
  .btn, .btn.sm, .btn.btn-sm, .pill, .copy-text, .input, .select, .page-back, button.stats { min-height: 40px; }
  /* a date field among the selects and buttons of a filter row, at their height */
  input:is([type="date"], [type="time"], [type="datetime-local"], [type="month"]) { min-height: 40px; }
  .send { min-width: 40px; min-height: 40px; }
  .seg button { min-height: 40px; }
  .config-nav a { height: 40px; }
  .select-pill select { align-self: stretch; } /* the whole pill's height opens the list */
  .user-foot { right: 0; } /* on a desktop it sits 6px out so its icons line up with the bubble's edge */
}

/* ---------- phone screen edges ---------- */
/* With viewport-fit=cover the page runs under an iPhone's notch and home indicator (as an installed app, or in
   landscape); these keep the controls clear of them. Elsewhere the insets are 0. */
.app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); box-sizing: border-box; }
.topbar { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
.composer-wrap { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.sb-foot { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
.view:not(#view-chat) { padding-bottom: env(safe-area-inset-bottom); }
.auth { padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
@media (max-width: 768px) {
  .sidebar { padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); }
  .composer-wrap { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .modal-panel .modal-inner { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
}

/* Pulling down at the top of a chat doesn't reload the page (Chrome on Android), nor bounce it whole (Safari). */
html, body { overscroll-behavior: none; }

/* ---------- Law page (web/droit/) ---------- */
.legal-status { margin: 6px 0 12px; font-size: 13px; }
.legal-page .logs-table td.legal-act { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legal-page .logs-table td.legal-excerpt { white-space: normal; min-width: 280px; }
/* A list's first column wraps in a bounded width: a long article heading or title must not push the table past its frame */
.legal-page .logs-table td.main { white-space: normal; overflow-wrap: anywhere; min-width: 160px; }
.legal-page .logs-table td.main.legal-act { max-width: 360px; }
.legal-page .logs-table td.main > .sub { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
/* Whole titles sent, a few lines shown (the whole title in the tooltip and the reference) */
.legal-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.legal-page .logs-table td.main > .sub.legal-clamp { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; }
.legal-search { grid-template-columns: 1fr 150px 160px auto; }
/* Case law: the lawyer field beside the words. */
.legal-search.with-lawyer { grid-template-columns: 1fr 150px 200px 160px auto; }
.legal-lawyers { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 4px; }
.legal-lawyers .legal-ref { color: var(--link); padding: 0; font-size: 13px; text-align: left; text-decoration: underline; text-underline-offset: 2px; }
p.legal-decision-lawyers { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; }
p.legal-decision-lawyers .legal-lawyers { display: contents; }
.legal-steps { margin-bottom: 8px; align-items: center; }
.legal-actions { grid-template-columns: 1fr auto auto auto; }
.legal-actions p { margin: 0; font-size: 13px; }
.legal-h2 { font-size: 14px; font-weight: 600; margin: 20px 0 8px; }
.legal-excerpt { font-size: 13px; }
.legal-body h3, .legal-aside h3 { font-size: 14px; font-weight: 600; margin: 18px 0 6px; }
.legal-article { white-space: pre-wrap; font-size: 14px; line-height: 1.6; border-left: 2px solid var(--brand); padding: 4px 0 4px 14px; margin: 12px 0; }
/* The passages a review's point rests on, opened from the point: the lime fill under dark text, links in it too. */
.legal-article mark.legal-hl { background: var(--primary); color: var(--primary-fg); border-radius: var(--r); padding: 1px 0; }
.legal-article mark.legal-hl .legal-ref { color: var(--primary-fg); }
.legal-toolbar { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.legal-toolbar .field-inline { flex-direction: row; align-items: center; gap: 8px; }
.legal-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.legal-grid th, .legal-grid td { white-space: nowrap; }
.legal-grid th { font-size: 12px; }
.legal-foot { gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.legal-point { margin: 10px 0; }
.legal-review-counts { margin: 4px 0 10px; }
.legal-progress { display: block; font-family: var(--mono); font-size: 12px; margin-top: 2px; }
p.legal-progress { margin: 0 0 8px; }
.legal-review-counts a { text-decoration: none; cursor: pointer; }
.legal-review-group { margin-top: 14px; }
.legal-review-group > summary { cursor: pointer; }
.legal-sev-high { color: var(--danger); }
.legal-sev-medium { color: var(--caution); }
.legal-point p { margin: 8px 0 0; font-size: 14px; }
.legal-point-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legal-quotes { margin: 8px 0 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.legal-quotes q { font-style: italic; }
.legal-law { font-size: 13px; }
.legal-replacement { margin-top: 8px; border-left: 2px solid var(--brand); padding: 2px 0 2px 12px; }
.legal-replacement p { margin: 4px 0 0; }
.legal-law .link-btn { color: var(--link); padding: 0; font-size: 13px; text-align: left; }
.legal-article .legal-ref, .legal-list .legal-ref { color: var(--link); padding: 0; font: inherit; text-decoration: underline; text-underline-offset: 2px; text-align: left; }
.legal-doc-picks { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; }
.legal-pick { flex-direction: row !important; align-items: center !important; gap: 8px !important; font-size: 14px; font-weight: 400; color: var(--text); }
.legal-pick input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--brand); }
.legal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.legal-found { margin-top: 4px; }
.legal-draft-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 12px 0; }
.legal-draft-actions { margin-bottom: 8px; }
.legal-field { margin: 8px 0; }
.legal-field .field > span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legal-context { margin: 6px 0 0; font-size: 13px; }
.badge.caution { color: var(--caution); }
.legal-terms { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 10px 16px; margin: 12px 0; font-size: 14px; }
.legal-terms dt { font-weight: 600; }
.legal-terms dd { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.legal-unsure { color: var(--caution); }
@media (max-width: 768px) { .legal-terms { grid-template-columns: 1fr; gap: 4px; } .legal-terms dd { margin-bottom: 8px; } }
.badge.muted { color: var(--faint); }
.legal-page tr.unread td.main strong::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; background: var(--brand); vertical-align: middle; }
/* The Law dialog's side panel: a reference beside the review or the editor */
.legal-dlg-main { display: flex; min-height: 0; flex: 1; }
.legal-dlg-main > .modal-body { flex: 1; min-width: 0; }
.legal-aside { flex: 0 0 min(560px, 46%); min-width: 0; overflow-y: auto; max-height: calc(100dvh - 140px); padding: 4px 22px 16px; border-left: 1px solid var(--border); }
.legal-aside-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 0 8px; background: var(--surface); border-bottom: 1px solid var(--border); margin-bottom: 8px; font-size: 14px; }
.modal.has-aside:not(.legal-editor-dlg) { width: min(1560px, calc(100vw - 32px)); }
.legal-editor-dlg .legal-aside { max-height: none; }
@media (max-width: 900px) {
  .legal-aside { position: fixed; inset: 0; z-index: 10; max-height: none; flex: none; background: var(--surface); border: 0; }
}

/* Research: the latest legislation, and a whole act */
.legal-latest-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 20px 0 8px; }
.legal-latest-head .legal-h2 { margin: 0; }
.legal-latest-head .seg { width: auto; }
/* Research's segmented buttons (kinds, sources): sized to their labels, which never wrap; on a narrow screen the row
   scrolls rather than squeezing them. */
.legal-latest-head .seg, .seg.legal-seg { width: fit-content; max-width: 100%; overflow-x: auto; }
.legal-latest-head .seg button, .seg.legal-seg button { flex: none; padding: 0 12px; height: 28px; font-size: 12px; white-space: nowrap; }
.seg.legal-seg { margin: 12px 0 0; }
#legal-result-kinds { margin-bottom: 0; }
#legal-results-wrap { margin-top: 12px; } /* apart from the search form or the kinds above it */
.legal-page .logs-table td.legal-latest-title { white-space: normal; min-width: 320px; }
/* Legislation as Legilux shows it (src/legal/akn.js aknHtml) */
.legal-article.legal-rich { white-space: normal; }
.legal-rich p { margin: 0 0 8px; }
.legal-rich p:last-child { margin-bottom: 0; }
.legal-rich p.c { text-align: center; }
.legal-rich p.heading { margin-top: 12px; }
.legal-rich .para + .para { margin-top: 8px; }
.legal-rich ul { list-style: none; margin: 4px 0 8px; padding-left: 28px; }
.legal-rich li { margin: 0 0 4px; text-indent: -28px; } /* the marker hangs in the margin, as on Legilux */
.legal-rich li p { margin: 0 0 4px; }
.legal-rich li p + p, .legal-rich li ul, .legal-rich li table, .legal-rich li blockquote, .legal-rich li .para { text-indent: 0; }
.legal-rich .num { margin-right: 4px; }
.legal-rich li .num { display: inline-block; min-width: 24px; text-indent: 0; }
.legal-rich ul:not(.ol):not(.bare) > li:not(:has(.num))::before { content: "–"; display: inline-block; width: 28px; text-indent: 0; }
.legal-rich ul.bare > li { text-indent: 0; }
.legal-rich table { border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; width: 100%; }
.legal-rich table.fixed { table-layout: fixed; }
.legal-rich table.small { font-size: 12px; }
.legal-rich td, .legal-rich th { border: 1px solid var(--border-strong); padding: 4px 8px; vertical-align: top; text-align: left; overflow-wrap: anywhere; }
.legal-rich table.nb td, .legal-rich table.nb th { border: 0; }
.legal-rich .a-c { text-align: center; }
.legal-rich .a-r { text-align: right; }
.legal-rich .a-j { text-align: justify; }
.legal-rich .v-m { vertical-align: middle; }
.legal-rich .v-b { vertical-align: bottom; }
.legal-rich td.shade, .legal-rich th.shade { background: var(--active); font-weight: 500; }
.legal-rich p.r { text-align: right; }
.legal-rich p.j { text-align: justify; }
.legal-rich sup, .legal-rich sub, .legal-art-num sup { font-size: 0.75em; line-height: 0; }
.legal-rich td p, .legal-rich th p { margin: 0; }
.legal-rich blockquote { margin: 6px 0 8px; padding: 2px 0 2px 14px; border-left: 2px solid var(--border-strong); }
.legal-rich a[data-eli] { color: var(--link); font-size: 13px; }
.legal-rich img { display: block; max-width: 100%; height: auto; margin: 8px auto; border: 1px solid var(--border); background: #fff; }
.legal-img-missing { font-size: 13px; }
.legal-annex { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); }
.legal-annex-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.legal-act-article { margin: 14px 0 0; }
.legal-act-article .legal-article { margin: 4px 0 0; }
.legal-art-num { font-weight: 600; }
.legal-where { margin-left: 8px; font-size: 12px; }
.legal-actions-1 { grid-template-columns: 1fr auto; }
.legal-note { font-size: 13px; margin: 0 0 10px; }
.legal-translated { font-size: 13px; margin: 0 0 8px; }

/* Reviews: contracts uploaded in the dialog */
.legal-upload-box { display: flex; flex-direction: column; gap: 8px; }
.legal-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 16px; text-align: center; font-size: 14px; color: var(--text);
  border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2); cursor: pointer; }
.legal-drop:hover, .legal-drop.over { border-color: var(--link); background: var(--hover); }
.legal-drop .icon { color: var(--muted); }
.legal-drop small { font-size: 12px; }
.legal-uploads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.legal-uploads:empty { display: none; }
.legal-upload { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 4px 4px 10px; border: 1px solid var(--border); border-radius: var(--r); }
.legal-upload-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legal-more { margin: 4px 0 12px; font-size: 13px; }
.legal-more summary { cursor: pointer; color: var(--link); margin-bottom: 8px; }

/* Watch: suggested watchlists */
.legal-suggested { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.legal-suggestion { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.legal-suggestion p { margin: 0; font-size: 12px; line-height: 1.5; }
.legal-suggestion-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-size: 14px; }
.legal-label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* Drafting: the editor and its assistant, in a dialog as large as the screen */
.modal.legal-editor-dlg { width: min(1440px, calc(100vw - 32px)); height: calc(100dvh - 48px); }
.legal-editor-dlg .modal-inner { height: 100%; }
.legal-editor-dlg .modal-body { flex: 1; min-height: 0; display: flex; overflow: hidden; padding-bottom: 16px; }
.legal-editor { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; }
.legal-editor-doc { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.legal-editor-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.legal-editor-bar .spacer { flex: 1; }
.legal-title { flex: 0 1 360px; min-width: 160px; height: 32px; font-weight: 600; }
.legal-saved { font-size: 12px; font-family: var(--mono); }
.legal-sources { border: 1px solid var(--border); border-radius: var(--r); padding: 8px 12px; }
.legal-sources p { margin: 0 0 6px; font-size: 12px; }
.legal-format { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 4px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); }
.legal-format .legal-block { width: 140px; height: 28px; }
.legal-fmt { min-width: 28px; padding: 0 8px; font-family: var(--mono); }
.legal-fmt-bold { font-weight: 700; }
.legal-fmt-italic { font-style: italic; }
.legal-fmt-underline { text-decoration: underline; }
.legal-fmt-strikeThrough { text-decoration: line-through; }
.legal-fmt-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.legal-doc { flex: 1; min-height: 0; overflow-y: auto; padding: 32px 48px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  color: var(--text); font-size: 14px; line-height: 1.65; outline: none; }
.legal-doc:focus-visible { border-color: var(--border-strong); }
.legal-doc > :first-child { margin-top: 0; }
.legal-doc h1 { font-size: 24px; font-weight: 600; margin: 24px 0 12px; }
.legal-doc h2 { font-size: 20px; font-weight: 600; margin: 22px 0 10px; }
.legal-doc h3 { font-size: 16px; font-weight: 600; margin: 18px 0 8px; }
.legal-doc h4 { font-size: 14px; font-weight: 600; margin: 16px 0 6px; }
.legal-doc p { margin: 0 0 10px; }
.legal-doc ul, .legal-doc ol { margin: 0 0 10px; padding-left: 24px; }
.legal-doc blockquote { margin: 0 0 10px; padding: 2px 0 2px 14px; border-left: 2px solid var(--brand); color: var(--muted); }
.legal-doc table { border-collapse: collapse; margin: 0 0 12px; width: 100%; }
.legal-doc th, .legal-doc td { border: 1px solid var(--border-strong); padding: 4px 8px; text-align: left; vertical-align: top; }
.legal-doc a { color: var(--link); }
.legal-editor-chat { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); padding-left: 16px; }
.legal-editor-chat h3 { margin: 4px 0 8px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legal-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.legal-chat-msg { font-size: 13px; line-height: 1.55; padding: 8px 10px; border-radius: var(--r); }
.legal-chat-msg.user { align-self: flex-end; max-width: 90%; background: var(--surface-2); border: 1px solid var(--border); white-space: pre-wrap; }
.legal-chat-msg.assistant { border-left: 2px solid var(--brand); padding-left: 10px; }
.legal-chat-msg.failed { border-left-color: var(--danger); color: var(--danger); }
.legal-chat-text > :first-child { margin-top: 0; }
.legal-chat-text > :last-child { margin-bottom: 0; }
.legal-chat-text p, .legal-chat-text ul, .legal-chat-text ol { margin: 0 0 6px; }
.legal-chat-note, .legal-chat-law { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; font-size: 12px; }
.legal-chat-law { display: block; color: var(--muted); }
.legal-chat-issues { margin-top: 6px; font-size: 12px; color: var(--caution); }
.legal-chat-issues ul { margin: 2px 0 0; padding-left: 16px; }
.legal-chat-steps { margin: 0 0 6px; padding-left: 16px; font-size: 12px; color: var(--muted); }
.legal-chat-steps:empty { display: none; }
.legal-chat-status { margin: 4px 0 0; font-size: 12px; font-family: var(--mono); }
.legal-chat-status[data-s]::after { content: " · " attr(data-s) " s"; }
.legal-chat-ideas { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.legal-chat-ideas button { text-align: left; font-size: 12px; line-height: 1.45; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); cursor: pointer; }
.legal-chat-ideas button:hover { border-color: var(--link); color: var(--link); }
.legal-chat-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.legal-chat-input { width: 100%; resize: vertical; min-height: 64px; font: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--text); }
.legal-chat-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.legal-chat-actions small { font-size: 11px; }

@media (max-width: 1000px) {
  .legal-editor { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(220px, 40%); }
  .legal-editor-chat { border-left: 0; border-top: 1px solid var(--border); padding: 8px 0 0; }
  .legal-doc { padding: 20px; }
}
@media (max-width: 768px) {
  .legal-search, .legal-search.with-lawyer, .legal-actions, .legal-draft-pick { grid-template-columns: 1fr; }
  .modal.legal-editor-dlg { width: 100vw; height: 100dvh; }
  .legal-doc { padding: 14px; }
}
/* The Admin page: a card for each admin page, in groups */
.admin-group h2 { margin: 8px 0 8px; font: 500 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.admin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.admin-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.admin-card:hover { border-color: var(--text); }
.admin-card:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
/* A dialog takes the focus itself when it opens (shared/dom.ts calmDialogFocus), so its × doesn't show a ring on a
   touch screen; the ring shows on the first control a keyboard reaches. */
dialog:focus, dialog:focus-visible { outline: none; }
.admin-card > .icon { flex-shrink: 0; margin-top: 1px; color: var(--muted); }
.admin-card-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.admin-card-text strong { font-size: 14px; font-weight: 600; }
.admin-card-text small { font-size: 13px; line-height: 1.45; color: var(--muted); }
.admin-card .nav-count { align-self: center; }
/* An admin page's way back to the Admin page, above its heading */
.page-back { align-self: flex-start; border: 0; background: none; margin: 0 0 -6px -6px; padding: 2px 6px; border-radius: var(--r); font: 500 13px var(--sans); color: var(--muted); cursor: pointer; }
.page-back:hover { background: var(--hover); color: var(--text); }