/* Shell: page layout, a session's conversation with its filters, lists, sidebar, phone views.
   Every colour, shadow, radius, and easing comes from tokens.css. */

/* ---- base ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; overflow: hidden; overscroll-behavior: none; }
body {
  --bar-h: 52px;
  --gutter: var(--s-6);
  height: 100vh;
  height: var(--app-h, 100dvh);
  display: grid;
  grid-template-columns: 256px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--surface);
  color: var(--fg);
  font: 15px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, dl, dd { margin: 0; }
button, textarea, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-soft); color: var(--fg); }
.theme-switch *, .theme-switch *::before, .theme-switch *::after { transition: none !important; }
.offscreen { position: fixed; left: -200vw; top: 0; opacity: 0; }

.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.caps { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }

/* Scrollbars: thin and quiet in the panes, in the house colours, no arrow buttons; none at all on the
   sidebar (it still scrolls by wheel, touch and keys). Text fields keep the system's own. */
#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--line-strong) 80%, transparent) transparent; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar { width: 8px; height: 8px; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid transparent; background: var(--line-strong); background-clip: padding-box; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar-track { background: transparent; }
:is(#inbox, .log, .pane-list, #chat .rich pre, .rich-table-wrap)::-webkit-scrollbar-button { display: none; }
#agents { scrollbar-width: none; }
#agents::-webkit-scrollbar { display: none; }

/* ---- top bar ------------------------------------------------------------- */

.topbar {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-3);
  min-height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(var(--s-3), env(safe-area-inset-right, 0px)) 0 max(var(--s-5), env(safe-area-inset-left, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 5;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; }
.brand h1 { font: 700 1.08rem/1 var(--display); letter-spacing: -.012em; white-space: nowrap; }
.brand-mark { width: 26px; height: 26px; flex: none; }
.brand-mark-bg { fill: var(--accent); }
.brand-mark-pen { fill: none; stroke: var(--accent-fg); stroke-linecap: round; stroke-linejoin: round; }

.conn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px 0 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs); font-weight: 500; letter-spacing: .01em; color: var(--muted);
  transition: background var(--d-med) var(--ease-out), color var(--d-med) var(--ease-out);
}
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); position: relative; }
.conn[data-state="online"] i { background: var(--accent); }
.conn[data-state="online"] i::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; background: var(--accent); opacity: .22;
}
.conn[data-state="connecting"] i { animation: blink 1.2s var(--ease-in-out) infinite; }
.conn[data-state="offline"] { background: var(--urg-high-soft); color: var(--urg-high); }
.conn[data-state="offline"] i { background: var(--urg-high); animation: blink 1.2s var(--ease-in-out) infinite; }
@keyframes blink { 50% { opacity: .3; } }

.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--r-pill); background: none; color: var(--muted);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--sunken); color: var(--fg); }
.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }

/* ---- conversation: layout ------------------------------------------------ */

/* A session fills the page: its title, then its conversation or its canvas. */
#session { display: none; grid-column: 2; min-width: 0; min-height: 0; flex-direction: column; background: var(--surface); }
body:not([data-scope="all"]):not([data-page]) #session { display: flex; }
/* The title lines up with the column of the conversation and of the questions below it. */
.pane-title {
  flex: none; display: flex; align-items: center; gap: var(--s-3); min-height: 56px;
  padding: var(--s-2) max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter)));
  border-bottom: 1px solid var(--line);
}
.pane-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); }
/* The picture is a button to its drawings, the name a button to rename it. */
.pane-mark { flex: none; padding: 0; border: 0; border-radius: 11px; background: none; }
.pane-name button { max-width: 100%; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; overflow: hidden; text-overflow: ellipsis; }
@media (any-hover: hover) { .pane-mark:hover .agent-avatar { box-shadow: 0 0 0 2px var(--line-strong); } .pane-name button:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--line-strong); } }
.pane-title h2 { min-width: 0; font: 800 1.2rem/1.2 var(--display); letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sessions laid together: each name is a button that picks that one, for the canvas and for a phone's one column. */
/* Sessions laid together use the whole width, as their columns do: no name is cut short. */
body[data-pair] .pane-title { padding-inline: var(--gutter); }
.pane-members { display: flex; align-items: baseline; gap: .35em; }
.pane-members span { color: var(--faint); font-weight: 600; }
.pane-members button { min-width: 0; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; overflow: hidden; text-overflow: ellipsis; }
/* Two of the same name: what tells them apart stands small behind each. */
.pane-members small { margin-left: .5em; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
body[data-view="scribble"] .pane-members button[aria-pressed="false"] { color: var(--faint); }
body[data-view="scribble"] .pane-members button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Filters lay a list over the conversation: two quiet words at the head's right end, filled while one holds. */
.filters { flex: none; display: flex; align-items: center; gap: var(--s-1); }
.filters button { min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
.filters button:hover { color: var(--fg); background: var(--sunken); }
.filters button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.filters b { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: var(--r-pill); background: var(--urg-high); color: var(--surface); font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.filters b:empty { display: none; }
body[data-view="scribble"] .filters { display: none; }
/* The switch between the session's two modes is part of its title: words, the current one underlined. */
.modes { flex: none; display: flex; align-items: center; margin-right: calc(-1 * var(--s-3)); }
.modes button { position: relative; min-height: 40px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-pill); background: none; color: var(--muted); font-size: var(--t-md); font-weight: 500; white-space: nowrap; }
.modes button + button { margin-left: var(--s-2); }
.modes button + button::before { content: "·"; position: absolute; left: calc(-1 * var(--s-1) - .15em); color: var(--faint); font-weight: 700; }
.modes button:hover { color: var(--fg); background: var(--sunken); }
.modes button[aria-current] { color: var(--fg); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Something new was said while you were looking at a list or the canvas. */
.modes button[data-unread]::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
#chat, #scribble { flex: 1; min-width: 0; min-height: 0; display: none; position: relative; }
body[data-view="chat"] #chat { display: flex; overflow-x: auto; }
body[data-view="scribble"] #scribble { display: block; }
/* One pane per session; sessions laid together stand side by side, each with its own composer. */
.chat-pane { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#chat[data-cols]:not([data-cols="1"]) .chat-pane { min-width: 340px; --gutter: var(--s-5); }
.chat-pane + .chat-pane { border-left: 1px solid var(--line); }
.chat-pane-head { flex: none; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--gutter); border-bottom: 1px solid var(--line); font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.chat-pane-head strong { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-pane-head small { flex: none; font-size: inherit; color: var(--faint); white-space: nowrap; }
.chat-pane-mark { flex: none; width: 20px; height: 20px; color: var(--fg); }
/* The log and the two lists share one place; a filter decides which is seen. The others keep their scroll position. */
.chat-body { flex: 1; min-height: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.chat-body > * { grid-area: 1 / 1; min-width: 0; min-height: 0; }
.pane-list { overflow-y: auto; overscroll-behavior: contain; visibility: hidden; padding-block: var(--s-8) var(--s-10); }
body[data-filter] .log { visibility: hidden; }
body[data-filter="questions"] .pane-questions, body[data-filter="files"] .pane-files { visibility: visible; }
body[data-filter] .jump { display: none; }
.column { width: 100%; max-width: 47.5rem; margin-inline: auto; padding-inline: var(--gutter); }
.log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges; }
.log-inner { min-height: 100%; display: flex; flex-direction: column; padding-block: var(--s-8) var(--s-6); }

/* ---- conversation: messages ---------------------------------------------- */

.msg { margin-top: var(--s-8); min-width: 0; }
.msg.cont { margin-top: var(--s-3); }
.day + .msg, .day + .event { margin-top: var(--s-5); }
/* A message that asks back about a question says which one. */
.msg-about { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%; margin-bottom: 4px; padding: 0; border: 0; background: none; font-size: var(--t-xs); color: var(--muted); }
.msg-about span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
/* (a finger needs 36px: the line is taller than it looks) */
.msg-about { padding-block: 9px; margin-block: -9px -5px; }
.msg-about:hover span:last-child { color: var(--fg); text-decoration: underline; }

.agent-mark {
  width: 24px; height: 24px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--accent); color: var(--accent-fg);
}
.agent-mark .ico { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.msg-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--s-2); }
.msg-name { font-weight: 600; font-size: var(--t-sm); }
.msg-time { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; }

.msg-user { align-self: flex-end; max-width: min(82%, 34rem); display: flex; flex-direction: column; align-items: flex-end; }
.msg-user.cont { margin-top: var(--s-1); }
.bubble {
  padding: 10px 16px; background: var(--sunken); border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg);
  font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere;
}
.bubble p { white-space: pre-wrap; }
.msg-user .msg-time { margin-top: 5px; padding-right: 4px; }
/* One timestamp per run of user messages, under the last one. */
.msg-user:has(+ .msg-user.cont) .msg-time { display: none; }
.msg-user:has(+ .msg-user.cont) .bubble { border-radius: var(--r-lg) var(--r-lg) var(--r-sm) var(--r-lg); }

/* Markdown as rich() builds it. Shared by the conversation and the history. */
:is(#chat, #inbox) .rich{ font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
:is(#chat, #inbox) .rich > * + *{ margin-top: .8em; }
:is(#chat, #inbox) .rich p{ white-space: pre-wrap; }
:is(#chat, #inbox) .rich ul{ padding-left: 1.35em; }
:is(#chat, #inbox) .rich li + li{ margin-top: .3em; }
:is(#chat, #inbox) .rich li::marker{ color: var(--faint); }
:is(#chat, #inbox) .rich strong{ font-weight: 600; }
:is(#chat, #inbox) .rich a{ color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:is(#chat, #inbox) .rich a:hover{ color: var(--accent-hover); }
/* "☞" before a paragraph (ui.js rich()): the drawn hand points at it from the margin, the text a shade stronger */
.rich-point { position: relative; padding-left: 34px; font-weight: 600; }
.rich-point > .advice-hand { left: 0; top: .72em; width: 26px; rotate: -2deg; }
:is(#chat, #inbox) .rich :not(pre) > code{
  font: .86em/1.4 var(--mono); padding: .12em .4em; border-radius: 6px;
  background: var(--sunken); border: 1px solid var(--line);
}
:is(#chat, #inbox) .rich .code{ border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; }
:is(#chat, #inbox) .rich .code-head{
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 4px 4px 4px 14px; background: var(--sunken); border-bottom: 1px solid var(--line);
}
:is(#chat, #inbox) .rich .code-lang{ font: 500 var(--t-xs)/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
:is(#chat, #inbox) .rich .code-copy{
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--muted);
  font-size: var(--t-xs); font-weight: 500;
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
:is(#chat, #inbox) .rich .code-copy:hover{ background: var(--surface); color: var(--fg); }
:is(#chat, #inbox) .rich .code-copy.is-done{ color: var(--accent); }
:is(#chat, #inbox) .rich .code-copy .ico{ width: 15px; height: 15px; }
:is(#chat, #inbox) .rich pre{ margin: 0; padding: 14px 16px; overflow-x: auto; tab-size: 2; }
:is(#chat, #inbox) .rich pre code{ font: .84rem/1.65 var(--mono); }

/* attachments */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-2); max-width: 34rem; }
.shots-one { grid-template-columns: minmax(0, 26rem); }
.shot {
  display: block; padding: 0; aspect-ratio: 4 / 3; overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunken);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-med) var(--ease-out), transform var(--d-med) var(--ease-out);
}
.shots-one .shot { aspect-ratio: 16 / 10; }
.shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.shot-broken img { visibility: hidden; }
.files { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.file-chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 0 12px 0 9px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
  color: var(--fg); font-size: var(--t-sm); font-weight: 500; text-decoration: none;
  transition: border-color var(--d-fast) var(--ease-out);
}
.file-chip .ico { width: 17px; height: 17px; color: var(--muted); }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(#chat, #inbox) .rich .file-chip{ color: var(--fg); }
.file-chip:hover { border-color: var(--accent); }

/* something the session published under a link of its own */
.asset-card { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); max-width: 34rem; padding: var(--s-3) var(--s-4); border-radius: 6px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 2px rgb(20 30 25 / .04), 0 5px 5px rgb(20 30 25 / .04); }
.asset-text { flex: 1 1 14rem; min-width: 0; display: grid; gap: 2px; }
.asset-text .caps { color: var(--faint); }
.asset-text strong { font: 800 1.15rem/1.25 var(--display); overflow-wrap: anywhere; }
.asset-text span:not(.caps) { color: var(--muted); font-size: var(--t-sm); }
.asset-actions { flex: none; display: flex; gap: var(--s-2); }
.asset-open, .asset-copy { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s-4); border: 1px solid var(--fg); border-radius: var(--r-pill); font-size: var(--t-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.asset-open { background: var(--fg); color: var(--bg); }
.asset-copy { background: none; color: var(--fg); border-color: var(--line-strong); }
.asset-copy:hover { border-color: var(--fg); }
/* Share with someone outside (ui.js assetShare): a third button, and a panel on a line of its own under the card's
   text and buttons. On the compact link card inside a text (.asset-linked) the button stands beside the card. */
.asset-share { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); white-space: nowrap; }
.asset-share:hover, .asset-share[aria-expanded="true"] { border-color: var(--fg); }
.asset-share[data-shared] { border-color: var(--accent); color: var(--accent); }
.asset-share[data-shared]::before { content: ""; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--accent); }
.asset-actions { flex-wrap: wrap; }
.asset-linked { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s-2); max-width: 100%; vertical-align: middle; }
.asset-linked > .asset-link { min-width: 0; max-width: min(100%, 26rem); flex: 0 1 auto; }
.asset-linked > .asset-share { min-height: 36px; padding: 0 var(--s-3); }
.asset-share-panel { flex: 1 1 100%; min-width: 0; max-width: 34rem; display: grid; gap: var(--s-2); padding: var(--s-3); border-radius: 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 var(--t-sm)/1.4 var(--font); color: var(--fg); white-space: normal; text-align: left; }
.asset-share-panel[hidden], .asset-share-panel [hidden] { display: none; }
.asset-share-panel[data-busy] { opacity: .6; pointer-events: none; }
.asset-share-say { color: var(--muted); text-wrap: pretty; }
.asset-share-row { display: flex; gap: var(--s-2); min-width: 0; }
.asset-share-link { flex: 1; min-width: 0; height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--sunken); color: var(--fg); font: 500 var(--t-xs)/1 var(--mono); text-overflow: ellipsis; }
.asset-share-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
.asset-share-ends { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--muted); }
.asset-share-ends select { height: 40px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); }
.asset-share-copy, .asset-share-go, .asset-share-stop { flex: none; min-height: 40px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; color: var(--fg); font: 600 var(--t-sm)/1 var(--font); white-space: nowrap; }
.asset-share-copy:hover, .asset-share-stop:hover { border-color: var(--fg); }
.asset-share-go { justify-self: start; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.asset-share-stop { color: var(--urg-critical); }
.asset-share-error { color: var(--urg-critical); }
.asset-card.is-gone { background: none; box-shadow: none; border: 1px dashed var(--line-strong); }
.asset-card.is-gone strong { color: var(--muted); }
/* The server-rendered card (server/views/session.mjs assetCard): an artifact, sober, always with a picture of it on
   the left (controller assetthumb: the decrypted picture, or a page's first screen; else the drawn kind), what it is,
   Open, and one Copy link that copies the link anyone can open (controller share). Card Nr. 197. */
.asset-card.has-preview { display: grid; grid-template-columns: 176px minmax(0, 1fr); grid-template-areas: "preview text" "preview actions"; align-items: start; gap: var(--s-2) var(--s-4); max-width: 36rem; padding: var(--s-3); border-radius: 10px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
.asset-card.has-preview[data-busy] .asset-copy { opacity: .6; pointer-events: none; }
.asset-preview { grid-area: preview; position: relative; display: grid; place-items: center; width: 176px; height: 112px; overflow: hidden; border-radius: 6px; background: var(--sunken); color: var(--faint); text-decoration: none; }
.asset-preview::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
a.asset-preview:hover::after { box-shadow: inset 0 0 0 1px var(--line-strong); }
.asset-preview .asset-glyph { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.asset-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--sunken); opacity: 0; transition: opacity 160ms; }
.asset-preview > iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; background: #fff; opacity: 0; transition: opacity 160ms; }
.asset-preview.is-shown > :is(img, iframe) { opacity: 1; }
.asset-page-label { position: absolute; z-index: 1; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 4px; background: var(--surface); color: var(--muted); box-shadow: 0 0 0 1px var(--line); font: 600 10px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; }
.has-preview .asset-text { grid-area: text; padding-top: 2px; display: flex; flex-direction: column; gap: 3px; }
.has-preview .asset-text .caps { order: 3; font-size: var(--t-xs); }
.has-preview .asset-text strong { font: 800 1.05rem/1.25 var(--display); }
.has-preview .asset-note { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); font-size: var(--t-sm); }
.has-preview .asset-actions { grid-area: actions; align-self: end; flex-wrap: wrap; align-items: center; gap: 2px; margin-left: -2px; }
.has-preview .asset-open { gap: 7px; min-height: 36px; padding: 0 14px; }
.has-preview .asset-open::after { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--asset-open-icon) center / contain no-repeat; mask: var(--asset-open-icon) center / contain no-repeat; }
.has-preview .asset-copy { gap: 6px; min-height: 36px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--muted); font: 600 var(--t-sm)/1 var(--font); cursor: pointer; }
.has-preview .asset-copy::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--asset-link-icon) center / contain no-repeat; mask: var(--asset-link-icon) center / contain no-repeat; }
.has-preview .asset-copy:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.has-preview .asset-shared { display: inline-flex; align-items: center; gap: 4px; padding-left: 6px; color: var(--accent); font: 500 var(--t-xs)/1 var(--font); white-space: nowrap; }
.has-preview .asset-stop { min-height: 32px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.has-preview .asset-stop:hover { color: var(--fg); }
.asset-card.has-preview.is-gone { grid-template-areas: "preview text"; border: 0; background: none; box-shadow: 0 0 0 1px var(--line-strong); }
.asset-card.has-preview.is-gone .asset-preview { opacity: .6; }
.asset-card { --asset-open-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 4h6v6 M20 4l-9 9 M18 14v5.5H4.5V6H10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --asset-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2 M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 600px) {
  .asset-card.has-preview { grid-template-columns: 104px minmax(0, 1fr); grid-template-areas: "preview text" "actions actions"; gap: 10px 12px; }
  .asset-preview { width: 104px; height: 72px; }
  .has-preview .asset-text { align-self: center; }
}

/* board events: a quiet timeline between the messages */
.event {
  --tone: var(--accent); --tone-soft: var(--accent-soft);
  align-self: flex-start; max-width: 100%; margin: var(--s-6) 0 0 -6px;
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 4px 12px 4px 6px;
  border: 0; border-radius: var(--r-pill); background: none; text-align: left; position: relative;
  transition: background var(--d-fast) var(--ease-out);
}
.event.cont { margin-top: 0; }
.event:hover { background: var(--sunken); }
.event-asked { --tone: var(--urg-high); --tone-soft: var(--urg-high-soft); }
.event-done { --tone: var(--urg-low); --tone-soft: var(--urg-low-soft); }
.event-urgency { --tone: var(--urg-critical); --tone-soft: var(--urg-critical-soft); }
.event-ico { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--tone-soft); color: var(--tone); position: relative; }
.event-ico .ico { width: 14px; height: 14px; stroke-width: 2.2; }
/* consecutive events are joined into one thread */
.event.cont .event-ico::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 12px; background: var(--line-strong); }
.event-body { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: var(--t-sm); }
.event-kind { font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tone); white-space: nowrap; }
.event-text, .event-about { color: var(--muted); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.event:hover .event-text, .event:hover .event-about { color: var(--fg); }
/* The question, named briefly, then what happened to it. The question gives way first when the line is short. */
.event-about { flex: 0 20 auto; min-width: 5ch; }
.event-about + .event-text { flex: 0 1 auto; color: var(--fg); font-weight: 600; }
.event-about + .event-text::before { content: "→"; margin-right: 8px; color: var(--faint); font-weight: 400; }
.event-time { font-size: var(--t-xs); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* (Quiet: what happened to a question is a note between the messages, not a headline: one small line.) */
.event { min-height: 26px; margin-top: var(--s-3); padding-block: 2px; }
.event-ico { width: 16px; height: 16px; background: none; color: var(--faint); }
.event-ico .ico { width: 13px; height: 13px; stroke-width: 2; }
.event-body { font-size: var(--t-xs); gap: 6px; }
.event-kind { color: var(--faint); font-weight: 500; letter-spacing: .05em; font-size: .68rem; }
.event-text, .event-about { color: var(--faint); font-weight: 400; }
.event-about + .event-text { color: var(--muted); font-weight: 500; }
.event-about + .event-text::before { margin-right: 6px; }
.event-time { font-size: .68rem; opacity: 0; transition: opacity var(--d-fast); }
.event:hover .event-time, .event:focus-visible .event-time { opacity: 1; }
.event.cont .event-ico::before { content: none; }
/* A question that waits elsewhere (snoozed, with the agent) keeps a little of its colour. */
.event-snoozed .event-ico, .event-handed .event-ico { color: var(--urg-high); }
/* The answer stands where the question was asked (a session on its own): its second line is left out. */
.chat-pane:not(.is-several) .event-echo { display: none; }
/* day separators */
.day { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-10); color: var(--faint); }
.day:first-child { margin-top: 0; }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.day span { font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* the agent is working */
.working { display: flex; align-items: center; gap: 10px; margin-top: var(--s-8); color: var(--muted); font-size: var(--t-sm); font-weight: 500; }
.working .agent-mark { animation: breathe 2.4s var(--ease-in-out) infinite; }
.dots { display: inline-flex; gap: 4px; padding-top: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: hop 1.3s var(--ease-in-out) infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes hop { 0%, 70%, 100% { opacity: .3; transform: none; } 35% { opacity: 1; transform: translateY(-3px); } }
@keyframes breathe { 50% { opacity: .55; } }

/* only messages that arrive live animate in */
.is-new { animation: arrive var(--d-slow) var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } }

/* empty conversation */
.empty-chat { margin: auto; padding-block: var(--s-8); display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 30rem; }
.agent-mark-lg { width: 48px; height: 48px; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.agent-mark-lg .ico { width: 26px; height: 26px; }
.empty-chat h2 { font: 700 var(--t-2xl)/1.15 var(--display); letter-spacing: -.02em; margin-top: var(--s-6); text-wrap: balance; }
.empty-chat > p { color: var(--muted); font-size: 1rem; margin-top: var(--s-3); text-wrap: pretty; }
.empty-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); margin-top: var(--s-6); }
.empty-pick {
  min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); font-size: var(--t-sm); font-weight: 500; color: var(--fg);
  transition: border-color var(--d-fast) var(--ease-out), background var(--d-fast) var(--ease-out);
}
.empty-pick:hover { border-color: var(--accent); background: var(--accent-soft); }

/* before the first state arrives */
.skeleton { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; }
.sk { display: block; height: 14px; border-radius: var(--r-pill); background: var(--sunken); animation: shimmer 1.5s var(--ease-in-out) infinite; }
.sk-bubble { align-self: flex-end; width: min(60%, 22rem); height: 44px; border-radius: var(--r-lg); margin-bottom: var(--s-5); }
.sk-head { width: 96px; height: 22px; border-radius: var(--r-sm); margin-top: var(--s-3); }
.sk-w80 { width: 80%; } .sk-w55 { width: 55%; } .sk-w40 { width: 40%; }
.sk-event { width: 46%; height: 24px; margin-block: var(--s-4); }
@keyframes shimmer { 50% { opacity: .45; } }

/* ---- conversation: dock (jump button, error, composer) ------------------- */

.dock { flex: none; position: relative; padding-bottom: max(var(--s-4), env(safe-area-inset-bottom, 0px)); background: var(--surface); }
.dock::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(to top, var(--surface), transparent);
}
.jump {
  position: absolute; left: 50%; bottom: calc(100% + var(--s-3)); translate: -50% 0; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px 0 11px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-md); font-size: var(--t-sm); font-weight: 500; white-space: nowrap;
  animation: pop var(--d-med) var(--ease-spring) both;
  transition: background var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out);
}
.jump .ico { width: 17px; height: 17px; }
.jump:hover { border-color: var(--line-strong); }
.jump.has-unread { background: var(--accent); border-color: transparent; color: var(--accent-fg); }
.jump.has-unread:hover { background: var(--accent-hover); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.94); } }

.send-error {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 var(--s-2) var(--s-2);
  padding: 9px 12px; border-radius: var(--r-md);
  background: var(--urg-critical-soft); color: var(--urg-critical); font-size: var(--t-sm); font-weight: 500;
  animation: arrive var(--d-med) var(--ease-out) both;
}
.send-error .ico { width: 17px; height: 17px; margin-top: 2px; }

.composer {
  display: flex; align-items: flex-end; gap: var(--s-1); padding: 7px; cursor: text;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  transition: border-color var(--d-fast) var(--ease-out), box-shadow var(--d-med) var(--ease-out);
}
.composer { flex-wrap: wrap; }
.composer.is-drop { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
/* what is attached: a line of small chips above the words; a click takes one off */
.composer-files { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px 4px; }
.composer-files:empty { display: none; }
.composer-file { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; height: 32px; padding: 0 4px 0 7px; border: 0; border-radius: 9px; background: var(--sunken); color: var(--fg); font-size: var(--t-xs); font-weight: 500; }
.composer-file .sketch { flex: none; width: 17px; height: 17px; color: var(--muted); }
.composer-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a picture shows itself; the x says that a click takes the chip off */
.composer-file.has-thumb { padding-left: 4px; }
.composer-file img { flex: none; width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: var(--surface); }
.composer-file em { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; font: 400 15px/1 var(--font); font-style: normal; color: var(--muted); }
.composer-file:hover em { background: var(--fg); color: var(--bg); }
.composer-clip .sketch { width: 21px; height: 21px; stroke-width: 1.8; }
.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md); }
.composer textarea {
  flex: 1; min-width: 0; height: 40px; padding: 8px 4px; resize: none; border: 0; background: none;
  font-size: 1rem; line-height: 24px; overflow-y: hidden; scrollbar-width: thin;
}
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: var(--faint); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center; position: relative;
  border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-fg);
  transition: background var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-fast) var(--ease-out);
}
.send .ico { stroke-width: 2.2; }
.send:hover { background: var(--accent-hover); }
.send:active { transform: scale(.94); }
.send:disabled { background: var(--sunken); color: var(--faint); cursor: default; transform: none; }
.is-sending .send .ico { opacity: 0; }
.is-sending .send::after {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- lightbox ------------------------------------------------------------ */

/* A picture, large, is a page (chat.js): the board's ground, a way back at the top left, no veil and no blur. */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--bg); color: var(--fg); overflow: hidden;
}
.lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.lightbox::backdrop { background: var(--bg); }
.lightbox-back {
  justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  margin: calc(var(--s-2) + env(safe-area-inset-top, 0px)) var(--s-3) 0; padding: 0 var(--s-3) 0 var(--s-2);
  border-radius: var(--r-pill); color: var(--muted); font: 600 var(--t-sm)/1 var(--font); text-decoration: none;
}
.lightbox-back:hover, .lightbox-back:focus-visible { background: var(--sunken); color: var(--fg); }
.lightbox-back .ico { width: 18px; height: 18px; }
.lightbox-stage {
  min-height: 0; position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center;
  padding: var(--s-2) var(--s-4) var(--s-4); cursor: zoom-out; touch-action: pan-y;
}
.lightbox-img {
  max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; cursor: default;
  border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lg);
  animation: zoom var(--d-med) var(--ease-out);
}
.lightbox-nav, .lightbox-close, .lightbox-open {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--fg);
  box-shadow: var(--shadow-md); transition: background var(--d-fast) var(--ease-out);
}
.lightbox-nav:hover, .lightbox-close:hover, .lightbox-open:hover { background: var(--sunken); }
.lightbox-nav { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox-prev { left: var(--s-3); }
.lightbox-next { right: var(--s-3); }
.lightbox-bar {
  justify-self: center; display: flex; align-items: center; gap: var(--s-2); max-width: calc(100vw - var(--s-6));
  margin-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); padding: 6px 6px 6px 18px;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-lg);
}
.lightbox-bar .lightbox-open, .lightbox-bar .lightbox-close { width: 40px; height: 40px; border: 0; box-shadow: none; }
.lightbox-name { font: 500 var(--t-sm)/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lightbox-count { font-size: var(--t-xs); font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: var(--s-2); }
@keyframes fade { from { opacity: 0; } }
@keyframes zoom { from { opacity: 0; transform: scale(.96); } }

/* ---- toast: an answer that can be taken back, or something that went wrong --- */

/* On a wide screen it stands in the empty foot of the sidebar, above the bar; on a phone just
   above whatever is fixed to the bottom (app.js measures that): it covers no title and no tile,
   and it takes no room in the list, so the rows stay where they are. */
.toast {
  position: fixed; z-index: 20; left: var(--s-3); bottom: calc(var(--toast-bottom, var(--bar-h)) + var(--s-3));
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) 10px; width: 232px; padding: 10px 12px;
  border-radius: var(--r-md); background: var(--fg); color: var(--bg); box-shadow: var(--shadow-lg);
  font-size: var(--t-sm); font-weight: 500; line-height: 1.4; animation: drop var(--d-slow) var(--ease-out) both;
}
.toast i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--urg-critical-soft); }
.toast[data-kind="undo"] i { display: none; }
.toast span { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.toast button { flex: 1 0 100%; min-height: 36px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--bg); color: var(--fg); font-weight: 600; }
.toast button:disabled { opacity: .5; }
@keyframes drop { from { opacity: 0; transform: translateY(10px); } }

.tabbar { display: none; }
.scribble-fallback { padding: var(--s-8) var(--s-6); color: var(--muted); text-align: center; }

/* ---- a scribble in the conversation ---- */
.scribble-card { display: grid; gap: 0; padding: 0; width: min(280px, 100%); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; text-align: left; box-shadow: var(--shadow-sm); transition: box-shadow var(--d-fast), transform var(--d-fast) var(--ease-out); }
.scribble-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.scribble-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; border-bottom: 1px solid var(--line); }
.scribble-card span { padding: 9px var(--s-3); font-size: var(--t-sm); font-weight: 600; }
.msg-user .scribble-card { margin-left: auto; }
.msg-user .bubble + .scribble-card, .msg-user .scribble-card + .bubble { margin-top: var(--s-2); }

/* ---- marks drawn by hand: each session's scribble, and the icons of the same family ---- */
.doodle { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.sketch { display: block; width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* (the menu pill's mark and word too: a phone's opener is the caret alone) */
.brand-open > .pill-mark, .brand-open > .pill-word { display: none; }
/* (the rail's button and note exist on wide screens only: see the min-width block below) */
.rail-fold, .rail-tip { display: none; }
/* ---- sidebar: the inbox, then the sessions ---- */
#agents { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; padding: var(--s-4) var(--s-2); background: var(--bg); border-right: 1px solid var(--line); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.agent-heading { margin-top: var(--s-4); padding: 0 var(--s-3) var(--s-2); color: var(--faint); }
/* Dashed: these are not here right now. */
.agent-heading-away { display: flex; align-items: center; gap: var(--s-2); }
.agent-heading-away::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
.agent-row { display: flex; align-items: center; min-width: 0; border-radius: var(--r-md); }
.agent-entry { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); min-height: 46px; padding: 6px var(--s-3); border: 0; border-radius: var(--r-md); background: none; text-align: left; transition: background var(--d-fast); }
.agent-entry:hover { background: var(--sunken); }
.agent-entry[aria-current="true"] { background: var(--surface); box-shadow: var(--shadow-sm); }
/* The inbox is the place, not one row of the list: a block of its own at the top of the sidebar, on
   paper, a little taller, its name in the display face; the sessions follow below it after some air. */
.agent-text { flex: 1; min-width: 0; display: grid; }
.agent-text strong { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sessions laid together: one name per line. The ones that were laid on lie a little crooked and
   a little to the side, as if put there by hand: that is the plus. */
.agent-text strong + strong { rotate: -1.8deg; translate: 7px 0; transform-origin: 0 60%; }
.agent-text strong + strong + strong { rotate: 1.3deg; translate: 3px 1px; }
.agent-text:has(strong + strong) { line-height: 1.3; }
.agent-text small { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-row.is-offline .agent-text strong { font-weight: 500; color: var(--muted); }
/* A session's mark stands without a ground: the drawing alone, in the session's colour. */
.agent-avatar { --hue: 162; flex: none; position: relative; width: 34px; height: 34px; padding: 1px; display: grid; place-items: center; border-radius: 11px; color: var(--tone-pen); }
.agent-avatar .doodle { stroke-width: 2; }
.agent-avatar.is-offline, .agent-pair.is-offline { filter: grayscale(1); opacity: .6; }
.agent-all { background: var(--sunken); padding: 0; }
.agent-all i { grid-area: 1 / 1; width: 18px; height: 13px; border-radius: 4px; background: var(--surface); box-shadow: 0 0 0 1.500px var(--muted); }
.agent-all i:nth-child(1) { transform: translateY(-5px) scale(.78); opacity: .5; }
.agent-all i:nth-child(2) { transform: translateY(-2px) scale(.9); opacity: .75; }
.agent-all i:nth-child(3) { transform: translateY(2px); }
/* The inbox's badge: the knocks first (knuckles and their number, in the colour of urgency), then all that is open, quietly. */
.agent-counts { flex: none; display: inline-flex; align-items: center; gap: 5px; }
.agent-count { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--sunken); color: var(--fg); font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.agent-entry[aria-current="true"] .agent-count:not(.is-knock) { background: var(--bg); }
.agent-count.is-knock { padding-left: 5px; background: var(--urg-high); color: var(--surface); }
.agent-count.is-total { padding-inline: 4px; background: none; color: var(--muted); }
.agent-count { padding: 3px 7px; }
.agent-count .sketch { width: 17px; height: 17px; stroke-width: 2; }
/* Sessions laid together: no tile of its own, the scribbles overlap inside one loop drawn round them. */
.agent-pair { flex: none; display: block; width: 60px; height: 44px; margin-inline: -9px -5px; }
.pair-mark { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pair-mark g { stroke: var(--tone-pen); stroke-width: 2.1; }
.pair-mark rect { stroke: none; pointer-events: all; }
.pair-loop { stroke: var(--muted); stroke-width: 1.1; }
/* The crowned session of a desk (card Nr. 172): a sketched crown, crooked on the corner of its mark: a gold wash,
   one wobbly pen line, a red stone on each point (ui.js crown()). In the joint mark of a group it sits on that
   session's scribble. */
.crown-mark { position: absolute; left: -24%; top: -34%; width: 68%; height: auto; rotate: -15deg; overflow: visible; fill: none; stroke: none; pointer-events: none; }
.crown-wash, .pair-mark g .pair-crown .crown-wash { fill: var(--crown-wash); stroke: none; }
.crown-pen, .pair-mark g .pair-crown .crown-pen { fill: none; stroke: var(--gold-pen); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.crown-jewel, .pair-mark g .pair-crown .crown-jewel { fill: var(--crown-jewel); stroke: var(--gold-pen); stroke-width: 1; }
/* the crown not given: its outline only */
.crown-toggle[aria-pressed="false"] .crown-wash { display: none; }
.crown-toggle[aria-pressed="false"] .crown-pen { stroke: var(--muted); stroke-width: 1.6; }
.crown-toggle[aria-pressed="false"] .crown-jewel { fill: var(--bg); stroke: var(--muted); }
.crown-toggle[aria-pressed="false"]:hover :is(.crown-pen, .crown-jewel) { stroke: var(--gold-pen); }
/* Give the crown (agents.js crownToggle): a button of its own on the corner of the mark, 28 px
   to hit, beside the mark and not in it. The gold crown on the crowned session. Otherwise a faint outline
   that shows when the pointer or the keyboard is on the row or the mark (always, faintly, where
   nothing hovers), and one click gives the crown. */
.crown-toggle { position: absolute; z-index: 2; width: 28px; height: 28px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; transition: opacity var(--d-fast), scale var(--d-fast); }
.crown-toggle .crown-mark { position: static; width: 24px; rotate: -15deg; pointer-events: none; }
.crown-toggle[aria-pressed="false"] { opacity: .45; }
.crown-toggle:hover, .crown-toggle:focus-visible { opacity: 1; scale: 1.12; }
@media (hover: hover) {
  .agent-row .crown-toggle[aria-pressed="false"], .pane-who .crown-toggle[aria-pressed="false"] { opacity: 0; }
  .agent-row:hover .crown-toggle[aria-pressed="false"], .pane-who:hover .crown-toggle[aria-pressed="false"] { opacity: .5; }
  .agent-row .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible), .pane-who .crown-toggle[aria-pressed="false"]:is(:hover, :focus-visible) { opacity: 1; }
  body.is-pairing .crown-toggle { visibility: hidden; }
}
.agent-row { position: relative; }
.agent-row .crown-toggle { left: 11px; top: -13px; }
.pane-who { position: relative; }
.pane-who .crown-toggle { left: 4px; top: calc(50% - 32px); }
/* The crown sits ON the drawing, like on a head: over its middle (a touch to the left, as it leans), its base
   resting on the drawing's top edge. Not beside the corner. */
.agent-avatar .crown-mark { left: 12%; top: -38%; width: 66%; }
/* In the sidebar the crown is 23px wide; its base rests on the top of the drawing's strokes (a few px over them: the
   drawings start 6-8px into their box), its stones at the card's top edge (the same on a main's fold switch, crowns.css). */
#agents .agent-avatar .crown-mark { left: 5px; top: -8px; width: 23px; }

/* Carrying a session: its mark follows the pointer, the row it would join shows a dashed edge. */
.agent-ghost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; rotate: -7deg; padding: 5px; background: var(--surface); box-shadow: var(--shadow-lg); }
.agent-row.is-dragging { opacity: .4; }
/* One of a group is being carried: it fades where it stood. Carried clear of the row, the loop
   round the group opens up: let go now and it leaves. */
.agent-row.is-dragging:has(.is-carried) { opacity: 1; }
.agent-row .is-carried { opacity: .25; }
.agent-row.is-leaving .pair-loop { stroke-dasharray: 9 7; stroke: var(--fg); animation: loop-open 700ms linear infinite; }
.agent-row.is-leaving strong.is-carried { text-decoration: line-through; }
@keyframes loop-open { to { stroke-dashoffset: -16; } }
/* A name in a group is a handle. */
.agent-text strong[data-member] { cursor: grab; }
/* Let go here and the two are laid together: the loop drawn round the row is open and runs. */
.agent-row.is-drop { background: var(--surface); }
.group-loop.drop-loop { z-index: 1; }
.drop-loop .pair-loop { stroke: var(--fg); stroke-dasharray: 9 7; animation: loop-open 700ms linear infinite; }
/* Let go here and it is moved to this place: a thin line between the rows. */
.agent-row.is-insert-before::after, .agent-row.is-insert-after::after { content: ""; position: absolute; z-index: 2; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: var(--fg); pointer-events: none; }
.agent-row.is-insert-before::after { top: -2px; }
.agent-row.is-insert-after::after { bottom: -2px; }
body.is-pairing, body.is-pairing * { cursor: grabbing !important; }
/* Cutting a group apart: scribbled scissors that show only while the pointer is on the row (or the
   keyboard on them), in the gap before the badge, so nothing in the row gives way to them and the
   row is no taller than its names. Under the pointer they darken and the loop round the
   group opens up, which says what they do without a tooltip. */
.agent-row.is-group { position: relative; }
.agent-row.is-group .agent-entry { position: relative; min-height: 52px; }
.agent-cut { position: absolute; z-index: 2; right: 50px; top: 50%; translate: 0 -50%; width: 28px; height: 28px; padding: 4px; border: 0; border-radius: 50%; background: var(--sunken); color: var(--muted); rotate: -12deg; transition: color var(--d-fast), background var(--d-fast), opacity var(--d-fast); }
.agent-cut .sketch { width: 20px; height: 20px; stroke-width: 1.8; }
.agent-cut:hover, .agent-cut:focus-visible { background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong); }
.agent-entry[aria-current="true"] + .agent-cut { background: var(--surface); }
@media (hover: hover) {
  .agent-cut { opacity: 0; }
  .agent-row:hover .agent-cut, .agent-cut:focus-visible { opacity: 1; }
  body.is-pairing .agent-cut { opacity: 0; }
}
/* Where nothing hovers (a tablet), the group that is picked shows them. */
@media (hover: none) { .agent-entry:not([aria-current="true"]) + .agent-cut { display: none; } }
/* The loop of a group goes round the whole entry, marks and names (ui.js groupLoop); the joint mark in
   the row carries no loop of its own. (In a session's title the joint mark keeps its loop.) */
.group-loop { display: block; position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.group-loop path { vector-effect: non-scaling-stroke; stroke-width: 1.4px; }
.agent-row .pair-mark > .pair-loop { display: none; }
.agent-row.is-group .agent-entry { padding-block: 9px; }
.agent-row.is-group + .agent-row, .agent-row + .agent-row.is-group { margin-top: 4px; }
.agent-row.is-group .agent-pair { margin-inline: -6px -8px; }
.agent-row:has(.agent-cut:hover) .pair-loop, .agent-row:has(.agent-cut:focus-visible) .pair-loop { stroke-dasharray: 9 7; stroke: var(--fg); animation: loop-open 700ms linear infinite; }
/* Putting a disconnected session away: shows on hover or focus; where nothing hovers, it is always there. */
.agent-archive { flex: none; width: 30px; height: 30px; margin-right: 6px; padding: 5px; border: 0; border-radius: 50%; background: none; color: var(--faint); overflow: hidden; }
.agent-archive .sketch { width: 20px; height: 20px; }
.agent-archive:hover { background: var(--sunken); color: var(--fg); }
@media (hover: hover) {
  .agent-archive { width: 0; margin-right: 0; padding-inline: 0; opacity: 0; transition: width var(--d-fast) var(--ease-out), opacity var(--d-fast); }
  .agent-row:hover .agent-archive, .agent-row:focus-within .agent-archive { width: 30px; margin-right: 6px; padding-inline: 5px; opacity: 1; }
  body.is-pairing .agent-archive { display: none; }
}

/* ---- a session's state: no ground anywhere, colour and stroke carry it ----
   At work, the session's own mark redraws itself: the whole drawing stays as a trace at half strength
   and a darker stroke, about a third of each line, travels along it. Nothing turns at the right.
   At the right end of the row stands the number of open questions, every number in one column; a
   session that is stopped and waits for you has a hand drawn in red just before it, every hand on one
   axis. A working session's number is small and muted, a disconnected one's faint. Idle: nothing. */
.agent-avatar.is-drawing .doodle { position: absolute; left: 1px; top: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.is-drawing .mark-trace { opacity: .5; }
.is-drawing .mark-live path:not(.pair-crown *) { stroke-dasharray: 34 66; stroke-width: 2.5; animation: mark-travel 2800ms linear infinite; }
@keyframes mark-travel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .is-drawing .mark-live path:not(.pair-crown *) { animation: none; stroke-dasharray: none; stroke-width: inherit; } }
/* The ring at the end of a session row, circled by hand. Its number is the open questions; while the
   session works a drop travels round it; a knock turns it into the raised hand in a red loop. */
.agent-badge { flex: none; position: relative; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: var(--t-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--fg); }
.agent-badge b { position: relative; }
.agent-ring, .hand-mark { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.agent-ring { color: color-mix(in srgb, var(--fg) 50%, var(--bg)); }
.ring-loop { stroke: currentColor; stroke-width: 1.25; }
/* Working: the ring itself steps back, and a short tapered stroke in the accent goes round it. The whole
   stroke turns as one (the tip leads), eased, so each turn reads as one sweep of the pen. */
.agent-badge[data-state="running"] .agent-ring, .agent-working .agent-ring { color: var(--accent); }
.agent-badge[data-state="running"] .ring-loop, .agent-working .ring-loop { opacity: .38; }
.ring-drop { stroke: currentColor; transform-box: view-box; transform-origin: 50% 50%; animation: agent-flow var(--ring-turn, 1900ms) cubic-bezier(.45,.12,.55,.88) infinite; }
@keyframes agent-flow { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .ring-drop { display: none; }
  .agent-badge[data-state="running"] .ring-loop, .agent-working .ring-loop { opacity: 1; stroke-dasharray: 91 9; }
}
.agent-badge[data-state="waiting"] { --hand-soft: var(--urg-critical-soft); color: var(--urg-critical); }
.hand-mark { stroke: currentColor; }
.agent-badge[data-state="waiting"] .agent-ring { color: var(--urg-critical); }
.hand-loop { fill: var(--hand-soft, none); stroke-width: 1.5; }
.hand-pen { stroke-width: 1.45; }
.agent-badge[data-offline] { color: var(--faint); }
.agent-badge[data-offline] .agent-ring { color: var(--line-strong, var(--faint)); }
.bare-hand { display: block; width: 18px; height: 26px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; rotate: -4deg; }
/* The badge stands beside the row's entry, over its right end, pulled in from the edge, so that it can
   be a button of its own: a click goes through that session's questions. Under the pointer or the
   keyboard the count is underlined and the hand gives a small wave. */
.agent-row.has-badge .agent-entry { padding-right: 48px; }
.agent-row > .agent-badge { position: relative; z-index: 1; margin: 0 12px 0 -42px; }
button.agent-badge { border: 0; border-radius: 50%; background: none; font-family: inherit; cursor: pointer; transition: scale 140ms ease-out; }
button.agent-badge:hover, button.agent-badge:focus-visible { scale: 1.08; }
button.agent-badge:active { scale: .95; }

/* The Desk entry says how many sessions are at work: a small turning ring and the number. */
.agent-working { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.agent-working b { display: none; font: 600 var(--t-xs)/1 var(--font); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.desk-state .agent-working[data-n]:not([data-n="1"]) b { display: inline; margin-left: -2px; }
.agent-working .agent-ring { position: static; flex: none; width: 13px; height: 13px; }
.agent-working .ring-loop { stroke-width: 2.4; }
.agent-working .ring-drop path { stroke-width: 3.4; }

/* ---- microphone and focus button ---- */
.mic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.mic:hover { background: var(--sunken); color: var(--fg); }
.focus-open .ico { width: 18px; height: 18px; }
/* Wide screens reach the overview of all sessions from the bar's words; phones from one icon in the top bar. */
.roster-open { display: none; }
.roster-open[aria-current] { background: var(--accent-soft); color: var(--accent); }

/* ---- inbox: with no session selected, the grouped list of open questions is the whole page ---- */
#inbox { display: none; }
body[data-scope="all"] #inbox { container: inboxpage / inline-size; display: block; grid-column: 2; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface); padding: var(--s-8) var(--gutter) var(--s-10); }
/* The two round buttons stand fixed at the bottom right (quick send, the pad): the Desk keeps a lane free for
   them on its right, so the rows' tiles and tabs never scroll under them (his rule: nothing lies over what
   one presses). A phone has them in the top bar instead. */
@media (min-width: 861px) {
  body[data-scope="all"]:not([data-page]) #inbox { padding-right: calc(var(--gutter) + 60px); }
}
/* From 1224px (sidebar 256 + column 800 + twice 84) the column's own margin is that lane: it stands centred, under the pill. */
@media (min-width: 1224px) {
  body[data-scope="all"]:not([data-page]) #inbox { padding-right: var(--gutter); }
}
.inbox-head, .inbox-groups { max-width: 800px; margin-inline: auto; }
.inbox-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-8); }
/* The heading, and on its line the count with its sentence; in a narrow window that wraps below. */
.inbox-title { flex: 1 1 20rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-6); }
.inbox-title h2 { font: 800 clamp(2.2rem, 4vw, 3rem)/1.05 var(--display); letter-spacing: -.025em; }
.inbox-title p { display: flex; flex-wrap: wrap; align-items: center; gap: .1em .3em; font-size: var(--t-lg); color: var(--muted); }
/* A number circled by hand: two half ellipses that do not quite meet. */
.inbox-circled { position: relative; display: inline-block; padding: 0 .45em; font-weight: 700; color: var(--fg); }
.inbox-circled svg { position: absolute; left: -.08em; top: -.2em; width: calc(100% + .16em); height: calc(100% + .42em); overflow: visible; fill: none; stroke: var(--urg-high); stroke-width: 2px; stroke-linecap: round; opacity: .75; pointer-events: none; }
.inbox-circled svg path { vector-effect: non-scaling-stroke; }
/* The way into the walk through all open questions: a plain button beside the heading's sentence, with a small arrow drawn in it. */
.inbox-tools { display: flex; align-items: center; gap: var(--s-2); }
/* The desk's heading is the way into the walk: the words in the display face, the number of what waits
   in its circle, and a small arrow that steps forward under the pointer or the keyboard. */
.inbox-heading { display: flex; flex-wrap: wrap; align-items: center; gap: .2em .5em; }
.inbox-go { display: inline-flex; align-items: center; gap: .32em; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--fg); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.inbox-go .inbox-circled { font: 700 .5em/1.5 var(--font); letter-spacing: 0; margin-left: .2em; }
.inbox-go .sketch { width: .62em; height: .62em; stroke-width: 2.2; color: var(--faint); transition: translate 140ms ease-out, color 140ms ease-out; }
.inbox-go:hover .sketch, .inbox-go:focus-visible .sketch { translate: 5px 0; color: var(--fg); }
.inbox-heading .inbox-knocks { font: 700 var(--t-lg)/1 var(--font); letter-spacing: 0; }
.inbox-go:active { scale: .98; }
/* "agents" in the line: the way to the page of all sessions */
.inbox-agents-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.inbox-agents-link:hover, .inbox-agents-link:focus-visible { color: var(--fg); text-decoration-color: currentColor; }
/* One list at one pitch: the senders' sections follow each other at the gap between two rows. The
   piles at the foot stand a little apart. */
.inbox-groups { display: grid; gap: var(--s-4); container: rows / inline-size; }
.inbox-groups > .inbox-pile { margin-top: var(--s-6); }
.inbox-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
/* The sender's name is the divider: a rule beside it. */
.inbox-sender { display: flex; align-items: center; gap: var(--s-3); font: 800 1.2rem/1 var(--display); color: var(--fg); }
.inbox-sender::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.inbox-sender b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inbox-avatar { position: relative; display: block; width: 38px; height: 38px; padding: 6px; border-radius: var(--r-md); background: var(--sunken); color: var(--fg); }
/* A sender's mark has no ground either (the piles' own drawings keep their outline). */
.inbox-avatar[style*="--hue"] { padding: 2px; background: none; color: var(--tone-pen); }
.inbox-avatar .crown-mark { left: 14%; top: -36%; width: 62%; }
.inbox-avatar .sketch { width: 100%; height: 100%; }
/* Our own card (card Nr. 87, "Farben so nicht"): a plain white row, grey text, one neutral line and one
   soft shadow. The colour stands only where one answers: the tiles, the tabs, the knock. It is a tone
   (tokens.css: --tone-wash, --tone-edge, --tone-mid, --tone-pen): the asking session's on the Desk, where
   the row carries its hue; the urgency's where no session is named. */
.inbox-row {
  --urg-color: var(--urg-normal);
  --urg-soft: var(--urg-normal-soft);
  --card-bg: var(--surface);
  --card-ink: color-mix(in srgb, var(--muted) 75%, var(--fg));
  --card-line: var(--line-strong);
  /* Every row in the list is the same height and the answers are tiles at its right edge, always in
     the same place. Answer one, the next slides up, and its tiles are under the pointer.
     "Choose" unfolds a second grid row below; folded, that row has no height. */
  min-height: 172px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: 172px auto; align-items: stretch;
  position: relative; background: var(--card-bg); border-radius: 6px;
  box-shadow: 0 0 0 1px var(--card-line), 0 6px 14px -10px rgb(20 30 25 / .18);
}
.inbox-row[data-urgency="low"] { --urg-color: var(--urg-low); --urg-soft: var(--urg-low-soft); }
.inbox-row[data-urgency="high"] { --urg-color: var(--urg-high); --urg-soft: var(--urg-high-soft); }
.inbox-row[data-urgency="critical"] { --urg-color: var(--urg-critical); --urg-soft: var(--urg-critical-soft); }
.inbox-row:not([data-from]) { --tone-pen: var(--urg-color); --tone-mid: var(--urg-color); --tone-edge: var(--line-strong); --tone-wash: var(--urg-soft); }
/* A card that says who asks (the desk) answers in that session's tones: its tiles and tabs (the row carries
   --hue, tokens.css works out the tones). What knocks keeps its warning colour on top: the label and the
   leading tile, so urgency still wins the eye. */
.inbox-row[data-from]:is([data-urgency="high"], [data-urgency="critical"]) .inbox-answer.is-lead { background: var(--urg-color); }
/* The sender's drawing, small, before the title; the text stands beside it. The byline then does not
   say who asks a second time. */
.inbox-text.has-sender { position: relative; padding-left: 36px; }
.inbox-who.inbox-from-mark { position: absolute; left: 0; top: 3px; width: 26px; height: 26px; color: var(--tone-pen); }
/* ---- "In revision": the cards that are with their session right now, one slim line each ---- */
.inbox-revising { gap: 0; margin-top: var(--s-6); }
.inbox-revising-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font: 600 var(--t-sm)/1.4 var(--font); color: var(--muted); }
.inbox-revising-head b { font-weight: 500; color: var(--faint); font-variant-numeric: tabular-nums; }
.inbox-revising-row { display: flex; align-items: center; gap: var(--s-3); min-height: 36px; border-top: 1px solid var(--line); }
.inbox-revising-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; min-height: 36px; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.inbox-revising-open .agent-ring { position: static; flex: none; width: 15px; height: 15px; color: var(--accent); }
.inbox-revising-open .ring-loop { opacity: .38; stroke-width: 2.2; }
.inbox-revising-open .ring-drop path { stroke-width: 3.2; }
.inbox-revising-open strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.inbox-revising-open:hover strong, .inbox-revising-open:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.inbox-revising-sent { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--faint); }
.inbox-revising-tail { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.inbox-revising-tail .inbox-from-mark { width: 16px; height: 16px; color: var(--tone-pen); }
.inbox-revising-take { flex: none; min-height: 28px; padding: 0 4px; border: 0; background: none; color: var(--muted); font: 500 var(--t-xs)/1 var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; opacity: 0; }
.inbox-revising-row:hover .inbox-revising-take, .inbox-revising-take:focus-visible { opacity: 1; color: var(--fg); }
@media (hover: none) { .inbox-revising-take { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .inbox-revising-open .ring-loop { opacity: 1; stroke-dasharray: 91 9; } }
/* In the dark the quiet tile (No, Deny) is nearly the card's own ground: an edge makes it a button. */
:root[data-theme="dark"] .inbox-answer:not(.is-lead):not(:hover):not(.is-picked):not(.is-hinted) { box-shadow: inset 0 0 0 1px var(--card-line); }
/* ---- a row unfolded in place: it holds the whole card (js/focus.js, inline) and nothing of its own ----
   Its compact content is hidden while the card shows it; where the page has room the row is wider
   than the column. */
@container inboxpage (min-width: 1000px) { .inbox-row.is-unfolded { margin-inline: -70px; } }
@container inboxpage (min-width: 1140px) { .inbox-row.is-unfolded { margin-inline: -140px; } }
/* ---- a run: the cards of one session, behind a divider tab ----
   The tab stands in the list's own flow above the run's first card (so it never lies on the card
   before it): the session's drawing, crown and name on the session's colour. The run's cards stand
   close under it, 4px apart, square where they meet, and do not repeat the drawing. */
.inbox-group[data-sender] { --run-color: var(--tone-pen); --run-on: var(--surface); gap: var(--s-4); }
.inbox-group[data-sender] .inbox-who { display: none; }
.inbox-group[data-sender] .inbox-text.has-sender { padding-left: 0; }
.inbox-row[data-from] .inbox-byline :is(.inbox-from, .inbox-from + .inbox-sep) { display: none; }
.inbox-row > :not(.inbox-more) { grid-row: 1; }
/* The row the keyboard is on. */
.inbox-row.is-current { outline: 3px solid var(--fg); outline-offset: 3px; }
/* Whole lines only, in whole pixels: head 26, gap 8, 8 above the title, title 28 a line, gap 6,
   text 25 a line, 16 below. One title line leaves room for two of text, two title lines for one
   (data-tall, measured in inbox.js). */
.inbox-content { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-2); padding: 0 var(--s-4) var(--s-4) var(--s-5); min-width: 0; overflow: hidden; }
.inbox-content > * { min-width: 0; }
.inbox-row-head { height: 26px; display: flex; align-items: flex-start; gap: var(--s-3); margin-left: calc(-1 * var(--s-5)); }
/* Only a knock has a head line (its tab). Every other row begins with its title, at the row's top padding. */
.inbox-row-head:empty { display: none; }
.inbox-content:has(> .inbox-row-head:empty) { padding-top: 13px; }
/* Only what stands out carries a tab: blocking and urgent. A normal question has none. */
.inbox-tab { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 7px 10px; border-radius: 6px 0 6px 0; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.inbox-tab { background: var(--urg-color); color: var(--surface); }
/* A knock wears the small drawing of knuckles on a door before its word. */
.inbox-tab .sketch { width: 15px; height: 15px; margin: -3px 0 -3px -2px; stroke-width: 2.1; }
/* "It knocks": a row that has just arrived urgent or blocking gives two quick small nudges (js/knock.js);
   the mark of its session in the sidebar does the same, once. Under reduced motion nothing moves. */
@keyframes knock { 0%, 26%, 54%, 100% { translate: 0 0; rotate: 0deg; } 12% { translate: 6px 0; rotate: .35deg; } 40% { translate: 5px 0; rotate: .3deg; } }
.inbox-row.is-knocking { animation: knock 640ms cubic-bezier(.3, .7, .4, 1) 120ms; }
.agent-row.is-knocking .agent-avatar, .agent-row.is-knocking .agent-pair { animation: knock 640ms cubic-bezier(.3, .7, .4, 1) 120ms; }
@media (prefers-reduced-motion: reduce) { .inbox-row.is-knocking, .agent-row.is-knocking .agent-avatar, .agent-row.is-knocking .agent-pair { animation: none; } }
/* The knocks among the open questions, counted first in the line beside the heading. */
.inbox-knocks { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--urg-high); white-space: nowrap; }
.inbox-knocks .sketch { width: 21px; height: 21px; stroke-width: 2; }
.inbox-dot { color: var(--faint); }
/* One that can wait: no tab, a small hourglass scribbled in a soft colour. */
/* (It stands in the byline, before who asks.) */
.inbox-whenever { flex: none; display: inline-flex; color: var(--tone-mid); }
.inbox-whenever .sketch { width: 16px; height: 16px; stroke-width: 2; }
/* The byline under the text: who asks (the session's mark and name, where the list holds more than one
   session), the card's number, its age, and what it carries. One quiet line at the foot of the row. */
.inbox-content { position: relative; }
.inbox-byline { position: absolute; left: var(--s-5); right: var(--s-4); bottom: 9px; margin: 0; display: flex; align-items: center; gap: .35em; font: 500 var(--t-xs)/1 var(--font); letter-spacing: .01em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--card-ink) 62%, var(--card-bg)); white-space: nowrap; overflow-x: clip; overflow-y: visible; }
.inbox-byline .inbox-from { display: inline-flex; align-items: center; gap: 5px; min-width: 0; font-weight: 600; color: var(--card-ink); }
.inbox-byline .inbox-from span:last-child { overflow: hidden; text-overflow: ellipsis; }
.inbox-byline .inbox-from-mark { width: 17px; height: 17px; color: var(--tone-pen); }
.inbox-from-mark { flex: none; position: relative; display: block; width: 18px; height: 18px; }
.inbox-from-mark .crown-mark { left: 0; top: -52%; width: 92%; }
.inbox-from-mark .crown-pen { stroke-width: 2.1; }
/* (Tightened by a few pixels, so that the byline has its line below two lines of title and one of text.) */
.inbox-text { display: grid; gap: 2px; padding: 2px 0 0; border: 0; background: none; text-align: left; min-width: 0; }
.inbox-question, .inbox-body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.inbox-question { font: 800 1.45rem/28px var(--display); letter-spacing: -.012em; text-wrap: balance; color: var(--fg); }
.inbox-body { color: var(--card-ink); font-size: var(--t-lg); line-height: 25px; }
.inbox-row[data-tall] .inbox-body { -webkit-line-clamp: 1; }
/* Unfolded with its text in full below: the row itself does not say it a second time. */
/* At most one small picture, beside the text; the rest are behind it. */
/* Beside the title, at the top right of the text: a small clock for the card's age; the number shows
   only under the pointer or the keyboard. */
.inbox-when { position: absolute; top: 15px; right: var(--s-4); display: inline-flex; align-items: center; gap: 6px; color: color-mix(in srgb, var(--card-ink) 55%, var(--card-bg)); }
.inbox-content:has(> .inbox-row-head:not(:empty)) .inbox-when { top: 40px; }
.inbox-when .inbox-nr { margin: 0; padding: 2px 0 0 6px; font: 500 var(--t-xs)/1 var(--font); letter-spacing: .02em; text-transform: none; opacity: 0; background: var(--card-bg); transition: opacity 100ms ease-out; }
.inbox-row:hover .inbox-when .inbox-nr, .inbox-row:focus-within .inbox-when .inbox-nr, .inbox-row.is-current .inbox-when .inbox-nr { opacity: 1; }
.inbox-when .inbox-ago { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.age-clock { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.inbox-question { padding-right: 30px; }
/* The pictures: a small stack under the text, a little fanned; beside it what the card carries. */
.inbox-byline .inbox-thumb { flex: none; position: relative; align-self: center; width: auto; height: 40px; margin: 0 4px 0 2px; padding: 0; border: 0; border-radius: 0; overflow: visible; background: none; box-shadow: none; display: inline-flex; align-items: center; }
.inbox-byline .inbox-thumb img { width: 50px; height: 38px; border-radius: 5px; object-fit: cover; object-position: top center; background: var(--sunken); box-shadow: 0 0 0 1px var(--card-line), 0 1px 3px rgb(20 30 25 / .12); }
.inbox-byline .inbox-thumb img:nth-child(1) { rotate: -3deg; z-index: 3; }
.inbox-byline .inbox-thumb img:nth-child(2) { margin-left: -30px; rotate: 2.5deg; translate: 0 1px; z-index: 2; }
.inbox-byline .inbox-thumb img:nth-child(3) { margin-left: -30px; rotate: -1.5deg; translate: 0 -1px; z-index: 1; }
.inbox-byline:has(.inbox-thumb) { bottom: 8px; }
/* The picture and, under it, what the card carries ("6 pictures"). */
.inbox-pics { align-self: center; display: grid; justify-items: center; gap: 5px; margin-right: var(--s-4); }
.inbox-pics .inbox-thumb { margin-right: 0; }
.inbox-pics .inbox-carries { flex-direction: column; gap: 2px; font: 500 .68rem/1.2 var(--font); color: color-mix(in srgb, var(--card-ink) 62%, var(--card-bg)); white-space: nowrap; }
.inbox-pics .inbox-carries .sketch { width: 13px; height: 13px; }
.inbox-row:has(> .inbox-pics) .inbox-byline :is(.inbox-carries, .inbox-sep:has(+ .inbox-carries)) { display: none; }
/* It stands clear of the tiles by the row's own padding; a narrower column drops it before the gap. */
.inbox-thumb { position: relative; align-self: center; width: 64px; height: 64px; margin-right: var(--s-4); padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--sunken); box-shadow: 0 0 0 1px var(--card-line); cursor: zoom-in; transition: scale 100ms ease-out; }
@media (any-hover: hover) { .inbox-thumb:hover { scale: 1.05; } }
.inbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* What the card carries, in the byline: a small drawing and the count for each kind. */
/* "Trust": a quiet word at the end of the byline of a thumb row; it leaves the decision to the agent. */
.inbox-shred-open { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: none; color: var(--card-ink); font-size: var(--t-sm); font-weight: 600; opacity: .75; }
.inbox-shred-open .sketch { width: 18px; height: 18px; }
.inbox-shred-open:hover { opacity: 1; background: var(--tone-wash); }
/* A card that is shredded leaves in strips. */
.inbox-row.is-leaving[data-leave="shredded"] { animation-name: row-shred; animation-duration: 340ms; -webkit-mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 14px); mask: repeating-linear-gradient(90deg, #000 0 11px, transparent 11px 14px); }
@keyframes row-shred { from { opacity: 1; translate: 0 0; } 40% { opacity: .9; } to { opacity: 0; translate: 0 38px; scale: 1 .86; } }
.inbox-carries { display: inline-flex; align-items: center; gap: .7em; min-width: 0; }
.inbox-carries > span { display: inline-flex; align-items: center; gap: 4px; }
.inbox-carries .sketch { width: 15px; height: 15px; stroke-width: 1.9; }
/* The row's ways out (.inbox-tabs): small paper tabs down its right edge, in the order of the opened
   card: Snooze (.inbox-later, key L), Revise (.inbox-revise), Whatever (.inbox-trust), Shred
   (.inbox-shred). Each is tucked behind the edge with only its drawing showing; under the pointer or
   the keyboard it slides out and shows its word, eased,
   with a soft shadow. Two places: in the desk on a wide page they lie wholly outside the row, in the
   right margin, so no click on a tile can land on them; everywhere else (narrow pages, a session's own
   list) they sit inside the right edge and slide inward, and the tiles are set in to clear them; on a
   phone they are a short line at the card's top right. */
.inbox-tabs { position: absolute; z-index: 2; top: 0; right: 0; display: grid; justify-items: end; gap: 3px; }
.inbox-tab-act { --nub: 26px; position: relative; height: 26px; width: max-content; max-width: var(--nub); padding: 0; border: 0; background: none; color: var(--card-ink); overflow: hidden; border-radius: 8px 0 0 8px; filter: drop-shadow(0 1px 2px rgb(20 30 25 / .10)); transition: max-width 260ms cubic-bezier(.22, .9, .25, 1), filter 260ms ease-out; }
.inbox-tab-act:first-child { border-radius: 8px 6px 0 8px; }
.inbox-tab-act[hidden] { display: none; }
.inbox-tab-act:focus-visible { outline: 0; }
.inbox-later-flap { display: flex; flex-direction: row; align-items: center; gap: 7px; height: 100%; padding: 0 9px 0 6px; background: var(--tone-wash); box-shadow: inset 0 0 0 1px var(--card-line); border-radius: inherit; white-space: nowrap; transition: background 140ms; }
.inbox-later-flap .sketch { flex: none; width: 15px; height: 15px; stroke-width: 2.2; opacity: .8; }
.inbox-later-flap b { font: 700 .68rem/1 var(--font); letter-spacing: .07em; text-transform: uppercase; }
:is(.inbox-tab-act:hover, .inbox-tab-act:focus-visible, .inbox-tab-act.is-unfolded) { max-width: 150px; z-index: 1; filter: drop-shadow(0 3px 6px rgb(20 30 25 / .16)); }
:is(.inbox-tab-act:hover, .inbox-tab-act:focus-visible, .inbox-tab-act.is-unfolded) .inbox-later-flap { background: var(--tone-wash); }
:is(.inbox-tab-act:hover, .inbox-tab-act:focus-visible, .inbox-tab-act.is-unfolded) .sketch { opacity: 1; }
.inbox-tab-act:focus-visible .inbox-later-flap { box-shadow: inset 0 0 0 2px var(--fg); }
.inbox-tab-act:active .inbox-later-flap { filter: brightness(.95); }
.inbox-shred:is(:hover, :focus-visible, .is-unfolded) { color: var(--urg-critical); }
/* Shift held (bar.js sets body[data-shift]): the row's one tab is Shred instead of Snooze, slid out and red */
/* On the card, beside the title (inbox.js puts .inbox-tabs into .inbox-when): one small square button with the
   drawing alone, the word is its tooltip; nothing lies outside the row. Shift held: the same place is Shred. */
.inbox-when .inbox-tabs { position: static; display: flex; gap: 4px; margin: -6px 0 -6px 2px; }
.inbox-when .inbox-tab-act, .inbox-when .inbox-tab-act:first-child { --nub: 28px; width: 28px; max-width: 28px; height: 28px; border-radius: 8px; filter: none; transition: none; color: var(--card-ink); }
.inbox-when .inbox-later-flap, .inbox-when .inbox-tab-act:is(:hover, :focus-visible) .inbox-later-flap { justify-content: center; padding: 0; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
.inbox-when .inbox-tab-act:is(:hover, :focus-visible) .inbox-later-flap { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--fg); }
.inbox-when .inbox-tab-act:focus-visible .inbox-later-flap { box-shadow: inset 0 0 0 2px var(--fg); }
.inbox-when .inbox-later-flap .sketch { width: 16px; height: 16px; opacity: 1; }
.inbox-when .inbox-later-flap b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.inbox-when .inbox-tab-act.inbox-shred .inbox-later-flap { box-shadow: inset 0 0 0 1px var(--urg-critical); }
body:not([data-shift]) .inbox-tab-act.inbox-shred { display: none; }
body[data-shift] .inbox-tabs:has(.inbox-shred) > .inbox-later { display: none; }
body[data-shift] .inbox-tab-act.inbox-shred { max-width: 150px; color: var(--urg-critical); }
/* on the row the keys are on, each tab wears its key */
.inbox-row.is-current .inbox-tab-act[data-cap]::after { content: none; }
/* Whatever under the pointer: the tile the agent would take lights up */
.inbox-answer.is-hinted { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--tone-pen); }
/* One tile or two, 124 square, from the right: the right-hand one is at the same place in every row.
   (Set in from the right where the Snooze label sits inside the row's edge.) */
.inbox-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 12px 12px 0; }
.inbox-answer { flex: none; width: 124px; height: 124px; min-width: 0; padding: 8px 6px; display: grid; grid-template-columns: minmax(0, auto); justify-content: center; justify-items: center; align-content: center; gap: 6px; border: 0; border-radius: 12px; background: var(--tone-wash); color: var(--card-ink); font: 600 var(--t-sm)/1.2 var(--font); text-align: center; overflow-wrap: normal; transition: background 100ms ease-out, box-shadow 100ms ease-out, scale 100ms ease-out; }
.inbox-answer .sketch { width: 32px; height: 32px; }
/* Thumbs are the answer; the word under one says what the thumb means here. It stands whole, in one
   or two lines at a size that reads: inbox.js lets only labels onto a tile that fit that way. */
.inbox-answer.is-thumb .sketch { width: 44px; height: 44px; stroke-width: 1.5; }
.inbox-answer.is-thumb > span:last-child:not(.inbox-disc) { max-width: 100%; font-size: var(--t-sm); font-weight: 600; line-height: 1.2; text-wrap: balance; overflow-wrap: normal; }
/* A longer pair of labels: smaller, up to three lines; a word is never broken inside (inbox.js labelSize). */
.inbox-answer.is-thumb.is-small { gap: 4px; }
.inbox-answer.is-thumb.is-small .sketch { width: 34px; height: 34px; }
.inbox-answer.is-thumb.is-small > span:last-child:not(.inbox-disc) { font-size: .72rem; line-height: 1.15; }
/* More than two ways: one tile, "Choose", in the place of the right-hand thumb. */
.inbox-answer.is-wide { font: 700 1.05rem/1.2 var(--display); }
.inbox-answer small { font: 500 var(--t-xs)/1.2 var(--font); opacity: .8; }
.inbox-answer.is-wide[aria-expanded="true"] .sketch { opacity: .5; }
.inbox-answer.is-lead { background: var(--tone-pen); color: var(--surface); }
/* An info card: "What??" and "Acknowledge" stand where the answers do; in the byline a small page says it is to read. */
.inbox-toread { color: var(--tone-mid); }
.inbox-toread-count { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.inbox-toread-count .sketch { width: 20px; height: 20px; stroke-width: 1.9; }
@media (any-hover: hover) {
  .inbox-answer:hover, .inbox-option:hover { box-shadow: inset 0 0 0 2px var(--tone-pen); }
  .inbox-answer.is-lead:hover { filter: brightness(.92); }
}
.inbox-answer:active, .inbox-option:active { scale: .97; }
.inbox-answer:disabled, .inbox-option:disabled { opacity: .35; }
.inbox-answer.is-picked, .inbox-option.is-picked { opacity: 1; box-shadow: inset 0 0 0 3px var(--tone-pen); }
.inbox-error { color: var(--deny); font-size: var(--t-sm); }
/* Unfolded: the text, every option as a tile, and a line to ask back. */
.inbox-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
/* The label in up to two lines, what it leads to in one. */
@media (pointer: coarse) { .inbox-option kbd { display: none; } }
/* The last entry of the options: not one of them, but "Trust" (the agent decides). Dashed, as asking back is. */
/* Several answers allowed: an option that is in stays filled. */
/* Asking back is not an answer: dashed. */
.inbox-asked { flex-basis: 100%; font-size: var(--t-sm); color: var(--card-ink); }
.inbox-asked:empty { display: none; }
/* Put off: dashed, because where these cards stand is provisional. */
/* The dashed edge is an outline, so the row and its tiles are exactly as large as an open one. */
.inbox-row[data-later] { background: none; box-shadow: none; outline: 1px dashed var(--tone-mid); outline-offset: -1px; }
/* ---- piles (inbox.js pile()): "Snoozed", "With the agent", "Answered" ----
   At the foot of the list they stand side by side behind a dashed rule (one compact line each in a
   narrow column). Folded, a pile is: its count as a tally of pen strokes, five to a gate; its name and
   number; and one line under it, the latest of what it holds. Open, it takes the whole width: its
   line is a dividing line with a rule and a stroke that points up, and its entries are rows like any
   other. Plain blocks; only the tally and the small drawing are by hand. */
.inbox-groups { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-5); }
.inbox-groups > * { grid-column: 1 / -1; }
.inbox-groups > .inbox-pile:not(.is-open) { grid-column: span 3; }
/* Three of them: three to a row. */
.inbox-groups:has(> .inbox-pile ~ .inbox-pile ~ .inbox-pile) > .inbox-pile:not(.is-open) { grid-column: span 2; }
.inbox-pile { gap: var(--s-3); align-content: start; }
.inbox-pile-title { color: var(--muted); }
.inbox-pile-title::after { content: none; }
.inbox-pile-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-3); padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: inherit; font: inherit; text-align: left; }
.inbox-pile-head::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.inbox-group-later .inbox-pile-head::after, .inbox-group-asked .inbox-pile-head::after { border-top-style: dashed; }
.inbox-pile-head b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.inbox-pile-fold { order: 4; flex: none; color: var(--muted); rotate: 180deg; }
.inbox-pile-fold .sketch { width: 20px; height: 20px; stroke-width: 2; }
.inbox-pile-head:hover, .inbox-pile-head:hover b, .inbox-pile-head:hover .inbox-pile-fold { color: var(--fg); }
.inbox-pile .inbox-avatar { background: none; color: inherit; outline: 1px solid var(--line-strong); outline-offset: -1px; }
.inbox-group-later .inbox-avatar, .inbox-group-asked .inbox-avatar { outline-style: dashed; }
/* the tally: pen strokes, five to a gate; beyond what is drawn, "+15" */
.tally { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tally-mark { flex: none; display: block; height: 24px; max-width: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.tally-more { font: 700 var(--t-sm)/1 var(--font); font-variant-numeric: tabular-nums; }
.inbox-pile-tally { display: none; }
.inbox-pile-sheets { display: flex; flex-direction: column; min-width: 0; }
.inbox-pile-item { position: relative; min-width: 0; margin-top: var(--s-4); }
.inbox-pile-item:first-child { margin-top: var(--s-1); }
.inbox-group-answered .inbox-pile-item { margin-top: var(--s-2); }
.inbox-pile-peek { display: none; align-items: center; gap: var(--s-2); min-width: 0; }
.inbox-pile-words { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.inbox-pile-words strong { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-sm)/1.3 var(--font); color: var(--fg); }
.inbox-pile-words span { flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--t-xs)/1 var(--font); color: var(--faint); }
.inbox-group-answered .inbox-pile-words span { font-weight: 600; color: var(--accent); }
.inbox-pile-peek .inbox-from-mark { width: 17px; height: 17px; color: var(--tone-pen); }
/* folded: one quiet line, a word and its strokes; nothing else */
.inbox-groups > .inbox-pile:not(.is-open) { padding: 2px 0; cursor: pointer; }
.inbox-pile:not(.is-open) .inbox-pile-title { font: 600 var(--t-sm)/1 var(--font); color: var(--muted); }
.inbox-pile:not(.is-open) .inbox-pile-head { gap: 10px; }
.inbox-pile:not(.is-open) .inbox-pile-tally { display: inline-flex; order: 1; color: color-mix(in srgb, var(--muted) 75%, var(--surface)); }
.inbox-pile:not(.is-open) .tally-mark { height: 17px; width: auto !important; stroke-width: 2.3; }
.inbox-pile:not(.is-open) .tally-more, .inbox-pile:not(.is-open) .inbox-pile-head b,
.inbox-pile:not(.is-open) .inbox-pile-head::after, .inbox-pile:not(.is-open) .inbox-pile-fold, .inbox-pile:not(.is-open) .inbox-avatar, .inbox-pile:not(.is-open) .inbox-pile-sheets { display: none; }
@media (any-hover: hover) { .inbox-pile:not(.is-open):hover .inbox-pile-title, .inbox-pile:not(.is-open):hover .inbox-pile-tally { color: var(--fg); } }
/* While the sheets move, each is cut at its own edge. */
.inbox-pile.is-moving .inbox-pile-item { overflow: hidden; }
/* Nothing here yet: dashed and a little crooked, so it reads as not-yet-real. */
.inbox-empty { justify-self: center; display: grid; justify-items: center; gap: var(--s-3); margin: var(--s-10) auto 0; color: var(--muted); text-align: center; font-size: var(--t-lg); }
.inbox-empty .sketch { width: 96px; height: 96px; stroke-width: 1.1; color: var(--faint); }
/* A narrower column: the text keeps its width, the picture waits behind the title. */
@container rows (max-width: 700px) {
  .inbox-pics { display: none; }
  .inbox-question { font-size: 1.25rem; }
  .inbox-body { font-size: var(--t-md); }
}
/* Narrow (a phone, or sessions side by side): rows are as tall as their text, the answers stand below it. */
@container rows (max-width: 560px) {
  .inbox-row { min-height: 0; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; }
  .inbox-answer { height: auto; }
  .inbox-when, .inbox-content:has(> .inbox-row-head:not(:empty)) .inbox-when { top: 10px; right: 10px; }
  .inbox-byline:has(.inbox-thumb) { order: 3; margin-top: 4px; }
  .inbox-groups > .inbox-pile:not(.is-open), .inbox-groups:has(> .inbox-pile ~ .inbox-pile ~ .inbox-pile) > .inbox-pile:not(.is-open) { grid-column: 1 / -1; }
  .inbox-groups > .inbox-pile + .inbox-pile { margin-top: calc(-1 * var(--s-3)); }
  .inbox-row > :not(.inbox-more) { grid-row: auto; }
  .inbox-content { grid-column: 1 / -1; padding: 0 var(--s-4) var(--s-3); overflow: visible; }
  .inbox-row-head { height: auto; min-height: 26px; margin-left: calc(-1 * var(--s-4)); }
  .inbox-question { font-size: 1.25rem; line-height: 1.18; }
  .inbox-body, .inbox-row[data-tall] .inbox-body { -webkit-line-clamp: 2; font-size: var(--t-md); line-height: 1.45; }
  .inbox-pics { display: block; grid-column: 1 / -1; justify-self: start; margin: 0 var(--s-4) var(--s-3); }
  .inbox-pics .inbox-carries { display: none; }
  .inbox-thumb { display: block; width: 72px; height: 54px; }
  .inbox-row-head { padding-right: 30px; }
  /* a phone: the four tabs are a short line at the card's top right */
  .inbox-tabs { display: flex; gap: 2px; }
  .inbox-tab-act, .inbox-tab-act:first-child { border-radius: 0 0 7px 7px; }
  .inbox-tabs .inbox-tab-act:last-child { border-radius: 0 6px 0 7px; }
  /* big enough for a thumb: one tap snoozes */
  .inbox-tab-act { height: 36px; --nub: 36px; }
  .inbox-tab-act .inbox-later-flap { padding: 0 10px 0 10.5px; gap: 14px; }
  /* the note is a quiet line at the top of the card; later rows of a run drop the mark and the name */
  .inbox-byline { position: static; order: -1; flex-wrap: wrap; row-gap: 2px; margin: 10px 0 0; padding-right: 26px; }
  /* (the line keeps its height when it has nothing to say: the clock at the right stands in it) */
  .inbox-row[data-from] .inbox-byline { min-height: 18px; }
  .inbox-row[data-from] .inbox-row-head:not(:empty) ~ .inbox-byline { min-height: 0; margin-top: 0; }
  .inbox-row-head { order: -2; }
  .inbox-row-head:not(:empty) + .inbox-text { margin-top: 0; }
  .inbox-content:has(> .inbox-row-head:empty) { padding-top: 0; }
  .inbox-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 0 var(--s-3) var(--s-4); }
  .inbox-answer { width: auto; }
  .inbox-answer.is-wide { grid-column: 1 / -1; }
  .inbox-answer { aspect-ratio: auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, auto); justify-content: center; align-items: center; gap: 10px; min-height: 56px; border-radius: 10px; }
  .inbox-answer.is-thumb > span:last-child:not(.inbox-disc) { text-align: left; }
  .inbox-answer .sketch, .inbox-answer.is-thumb .sketch { width: 30px; height: 30px; stroke-width: 1.7; }
  .inbox-answer.is-wide small { display: none; }
}
/* Narrower still (three sessions side by side): the word goes under its thumb again, so it keeps its width. */
@container rows (max-width: 330px) {
  .inbox-answer.is-thumb { grid-auto-flow: row; grid-template-columns: minmax(0, auto); gap: 4px; padding-block: 8px; }
  .inbox-answer.is-thumb > span:last-child:not(.inbox-disc) { text-align: center; }
}
/* Two long answers (card Nr. 157): the tile shows the agent's short word (options[i].short), the thumb small
   with it: above it in a square tile, beside it where tiles are flat. The word stands whole; inbox.js
   (fitShorts) picks the step for the pair: one line, a size smaller, two lines, last the thumb above. */
.inbox-answer.is-thumb.is-short { padding-inline: 4px; }
.inbox-answer.is-thumb.is-short .sketch { width: 26px; height: 26px; stroke-width: 1.7; }
.inbox-answer.is-thumb.is-short > span.inbox-short { min-width: 0; max-width: 100%; font: 700 var(--t-md)/1.15 var(--display); white-space: nowrap; text-wrap: balance; overflow-wrap: normal; text-align: center; }
.inbox-answer.is-thumb.is-short.is-two > span.inbox-short { white-space: normal; }
.inbox-answer.is-thumb.is-short.is-tight > span.inbox-short { font-size: var(--t-sm); }
.inbox-answer.is-thumb.is-short.is-tiny > span.inbox-short { font-size: var(--t-xs); }
/* Who asks, on a wide screen (card Nr. 164): no tab above the rows; the session's drawing stands alone in a
   narrow column left of each card, in the session's colour, level with the title. Its name is a small note
   under it, written out into the margin so it lies over nothing, under the pointer or the keyboard; a click
   opens the session (inbox.js questionRow). A phone says who asks in the card's first line (phone-desk.css). */
.inbox-gutter { display: none; }
@media (min-width: 861px) {
  .inbox-group[data-sender] { padding-left: 46px; }
  .inbox-group[data-sender] > .inbox-row > .inbox-gutter { display: block; position: absolute; left: -46px; top: 14px; width: 32px; height: 32px; border-radius: 8px; color: var(--tone-pen); }
  .inbox-group[data-sender] > .inbox-row:has(.inbox-row-head:not(:empty)) > .inbox-gutter { top: 36px; }
  .inbox-gutter .inbox-from-mark { position: relative; display: block; width: 32px; height: 32px; color: inherit; }
  .inbox-gutter .doodle { stroke-width: 2.2; }
  .inbox-gutter::after { content: attr(data-name); position: absolute; z-index: 5; right: 0; top: calc(100% + 4px); padding: 5px 9px; border-radius: 7px; background: currentColor; font: 700 var(--t-sm)/1 var(--font); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms; -webkit-text-fill-color: var(--surface); }
  .inbox-gutter:is(:hover, :focus-visible)::after { opacity: 1; }
  .inbox-gutter:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
}
/* Rows that came in above the fold while he is further down (inbox.js keepRow): said, not pushed. */
.inbox-news-at { position: sticky; top: 8px; z-index: 6; height: 0; display: flex; justify-content: center; pointer-events: none; }
.inbox-news-at:has(~ .inbox-edge.is-up > :not([hidden])) .inbox-news { translate: 0 26px; }
/* A knock out of sight (inbox.js tellKnocks): a slim strip on the edge of the list it lies beyond, as wide as
   the list. It is the edge: rows pass under it, it floats over no tile. */
.inbox-edge { position: fixed; z-index: 6; pointer-events: none; }
.inbox-edge-knock { pointer-events: auto; width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0; border: 0; border-radius: 0 0 10px 10px; background: var(--urg-high); color: var(--surface); font: 700 var(--t-sm)/1 var(--font); white-space: nowrap; }
.inbox-edge.is-down .inbox-edge-knock { border-radius: 10px 10px 0 0; }
.inbox-edge-knock[hidden] { display: none; }
.inbox-edge-knock .sketch { width: 18px; height: 18px; stroke-width: 2; }
/* A tool of the paper in hand (css/deskpad.css, data-paper-front): the pad's toolbar stands at the window's foot, where
   the lower strip would lie on it; the cards cannot be reached then anyway, so the strip waits until the pointer is back. */
#inbox[data-paper-front] .inbox-edge.is-down { display: none; }
.inbox-edge-knock[hidden] { display: none; }
.inbox-news { pointer-events: auto; align-self: start; padding: 7px 13px; border: 0; border-radius: 999px; background: var(--fg); color: var(--surface); font: 700 var(--t-sm)/1 var(--font); box-shadow: var(--shadow-lg); white-space: nowrap; }
@container rows (max-width: 560px) {
  .inbox-answer.is-thumb.is-short { grid-auto-flow: column; grid-template-columns: auto minmax(0, auto); gap: 8px; padding-inline: 8px; }
  .inbox-answer.is-thumb.is-short .sketch { width: 22px; height: 22px; }
  .inbox-answer.is-thumb.is-short:not(.is-stacked) > span.inbox-short { text-align: left; }
  .inbox-answer.is-thumb.is-short.is-stacked { grid-auto-flow: row; grid-template-columns: minmax(0, auto); gap: 3px; padding-block: 7px; }
}

/* ---- a question inside the conversation: the same row as in the inbox, where it was asked ---- */
.ask { margin-top: var(--s-4); }
.ask-open { container: rows / inline-size; margin-block: var(--s-6) var(--s-2); }
/* A session on its own: the question is the Desk's row itself, answerable in the stream (js/chat.js). */
.ask-card { container: rows / inline-size; margin-block: var(--s-6) var(--s-3); }
.ask > .event { margin-left: -6px; }
.ask > .event[aria-expanded="true"] .event-about { color: var(--fg); }
/* An answered question, unfolded where it was asked: read-only, with the way back. */
.ask-past { margin: var(--s-2) 0 var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); display: grid; gap: var(--s-3); justify-items: start; animation: arrive var(--d-med) var(--ease-out) both; }
.ask-past > strong { font: 700 1.05rem/1.3 var(--display); letter-spacing: -.01em; }
.ask-past > .rich { color: var(--muted); font-size: var(--t-sm); max-width: 100%; }
.ask-past-options { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ask-past-options li { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 3px 11px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--muted); font-size: var(--t-sm); }
.ask-past-options li.is-chosen { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); font-weight: 600; }
.ask-past-options .ico { width: 15px; height: 15px; color: var(--accent); stroke-width: 2.4; }
.ask-past-note { font-size: var(--t-sm); color: var(--muted); }
.ask-past-take { min-height: 34px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.ask-past-take:hover { border-color: var(--fg); }
/* What the human sent along stands at the right, under each other's edge like the bubbles. */
.msg.msg-user:has(.shots) { width: min(82%, 34rem); }
.msg.msg-user .shots { align-self: stretch; margin-left: 0; grid-template-columns: repeat(auto-fit, minmax(0, 11rem)); justify-content: end; max-width: none; }
.msg.msg-user .shots-one { grid-template-columns: minmax(0, 18rem); }
.msg.msg-user .files { justify-content: flex-end; margin-bottom: var(--s-2); }
/* Open questions out of sight: how many, and the way to the next one. Beside "To the end", at the column's right edge. */
.open-jump {
  position: absolute; z-index: 2; bottom: calc(100% + var(--s-3)); right: max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter)));
  display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px 0 13px;
  border: 0; border-radius: var(--r-pill); background: var(--urg-high); color: var(--surface);
  box-shadow: var(--shadow-md); font-size: var(--t-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.open-jump .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.open-jump.is-up .ico { rotate: 180deg; }
.open-jump:hover { filter: brightness(.94); }
.open-jump:active { scale: .97; }
body[data-filter] .open-jump { display: none; }
/* ---- a session's head and its canvas (js/chat.js) ----
   The switch "Conversation · Scribble" is gone: the canvas opens from the composer. Nothing floats over the head:
   the memo button is left out inside a session ("/" still opens it), the Scratchpad is one quiet icon at its right end. */
html body:not([data-scope="all"]):not([data-page]) .modes, html body:not([data-scope="all"]):not([data-page]) .tabbar { display: none; }
html body:not([data-pair]) .pane-now { font-size: var(--t-sm); }
html .pane-now .caps { font-size: .62rem; letter-spacing: .06em; }
@media (min-width: 861px) {
  html body:not([data-scope="all"]):not([data-page]) .quick-open { display: none; }
  /* (same place and size as on the Desk, 8px from the top and 16px from the right: only its looks are quieter) */
  html body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open { right: var(--s-4); top: 8px; width: 38px; height: 38px; box-shadow: none; background: none; color: var(--muted); }
  html body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open:hover { background: var(--sunken); color: var(--fg); translate: none; box-shadow: none; }
  html body:not([data-scope="all"]):not([data-page]) .pane-title { padding-right: calc(var(--s-3) + 44px); }
}
@media (min-width: 1200px) {
  html body:not([data-pair]):not([data-scope="all"]) .pane-title { padding-right: 0; }
  html body:not([data-pair]):not([data-scope="all"]) .filters { margin: 0 var(--s-4) 9px 0; }
}
.composer-scribble .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.composer-scribble[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
/* The canvas in the pane's place: it carries the way back to the conversation. */
body[data-view="scribble"] #scribble { display: flex; flex-direction: column; }
#scribble > .scr { flex: 1; min-height: 0; height: auto; }
/* (app.js can mount the canvas twice when the page is loaded on /scribble; as before, only the first shows.) */
#scribble > .scr ~ .scr { display: none; }
.scribble-bar { flex: none; display: flex; align-items: center; padding: 5px var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface); }
.scribble-back { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 12px 0 6px; border: 0; border-radius: 8px; background: none; color: var(--fg); font-size: var(--t-sm); font-weight: 600; }
.scribble-back:hover { background: var(--sunken); }
.scribble-back .ico { width: 18px; height: 18px; }
/* A wide window, a session on its own: the conversation moves together to half the width, the canvas stands beside it. */
@media (min-width: 1200px) {
  html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #session { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) .pane-title { grid-column: 1 / -1; }
  html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #chat { display: flex; grid-column: 1; grid-row: 2; }
  html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) #scribble { grid-column: 2; grid-row: 2; border-left: 1px solid var(--line); }
  html body[data-view="scribble"]:not([data-pair]):not([data-scope="all"]):not([data-page]) .scribble-bar { display: none; }
}
/* Both markers stand at the column's right edge, one above the other, clear of the middle of the lines; and the
   stream ends with room for them, so its last line is never under one. */
.jump { left: auto; translate: none; right: max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter))); height: 34px; }
.jump:not([hidden]) ~ .open-jump { bottom: calc(100% + var(--s-3) + 40px); }
.chat-pane:not(.is-several) .log-inner { padding-bottom: 60px; }
/* On a wide window a session used to be split in two (css/beside.css: its questions in a column of their own,
   the conversation narrow beside it). It is one stream again; these lines take that split back for a session
   on its own. Sessions laid together keep their layout. */
@media (min-width: 1200px) {
  body:not([data-pair]):not([data-scope="all"]) .pane-who,
  body:not([data-pair]):not([data-scope="all"]) .pane-now { margin-inline: max(var(--gutter), calc((100% - 47.5rem) / 2 + var(--gutter))) max(17rem, calc((100% - 47.5rem) / 2 + var(--gutter))); }
  body:not([data-pair]):not([data-scope="all"]) .pane-title { border-bottom: 1px solid var(--line); }
}

.msg-details { margin-top: var(--s-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.msg-details summary { cursor: pointer; padding: 8px var(--s-3); font-size: var(--t-sm); font-weight: 600; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.msg-details summary::before { content: "›"; display: inline-block; transition: transform var(--d-fast) var(--ease-out); }
.msg-details[open] summary::before { transform: rotate(90deg); }
.msg-details summary::-webkit-details-marker { display: none; }
.msg-details > .rich { padding: 0 var(--s-3) var(--s-3); font-size: var(--t-md) !important; color: var(--muted); }

/* ---- the lists a filter lays over the conversation: the session's questions, then the answered ones; its files ---- */
.session-cards .inbox-head, .session-cards .inbox-groups { max-width: none; }
.session-cards .inbox-head { margin-bottom: var(--s-5); }
.session-cards .inbox-title p { margin-top: 0; }
.session-cards .inbox-groups { gap: var(--s-8); }
.session-cards .inbox-empty { margin-top: var(--s-4); }

/* The heading is a divider, as the senders' names are in the inbox. */
.hist-heading { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-2); font: 800 1.2rem/1 var(--display); }
.hist-heading::after { content: ""; flex: 1; order: 2; border-top: 1px solid var(--line-strong); }
.hist-heading b { order: 3; font: 600 var(--t-xs)/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Files: everything the session sent, one line each. */
.file-row { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-width: 0; padding: var(--s-2) 0; border: 0; background: none; color: inherit; text-align: left; text-decoration: none; }
.file-row + .file-row { border-top: 1px solid var(--line); }
.file-thumb { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 6px; overflow: hidden; background: var(--sunken); color: var(--muted); }
.file-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-text { min-width: 0; display: grid; gap: 1px; }
.file-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row:hover strong { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.file-row.is-gone strong { color: var(--faint); text-decoration: line-through; }
.file-meta { font-size: var(--t-xs); letter-spacing: .05em; text-transform: uppercase; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- overview of all sessions ---- */
body[data-page="roster"] #inbox, body[data-page="roster"] #session { display: none; }

/* ---- rename a session, pick its scribble ---- */
/* Rename is a small form at the name that was pressed (agents.js openEditor): no veil over the page. */
.session-editor { border: 0; padding: 0; border-radius: 12px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); width: min(340px, calc(100vw - 16px)); animation: pop var(--d-fast) var(--ease-out) both; }
.session-editor[data-anchored] { position: fixed; margin: 0; }
.session-editor::backdrop { background: transparent; }
.session-editor form { display: grid; gap: var(--s-2); padding: var(--s-4); }
.session-editor h2 { font: 800 1.5rem/1.15 var(--display); }
.session-editor input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: transparent; font-size: max(16px, 1em); }
.session-editor .caps { color: var(--muted); }
/* The choice of drawing opens right under the picture that was clicked: forty tiles in the session's colour. */
.mark-picker { position: fixed; margin: 0; padding: var(--s-3); border: 0; border-radius: 14px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); animation: pop var(--d-fast) var(--ease-out) both; }
.mark-picker::backdrop { background: transparent; }
.mark-grid { display: grid; grid-template-columns: repeat(8, 38px); gap: 6px; }
.mark-tile { --ink: var(--tone-pen); width: 38px; height: 38px; padding: 6px; border: 0; border-radius: 11px; background: var(--tone-wash); color: var(--ink); transition: scale 100ms ease-out; }
@media (any-hover: hover) { .mark-tile:hover { scale: 1.12; } }
.mark-tile[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.mark-picker .session-error { margin-top: var(--s-2); max-width: 346px; }
.session-buttons { display: flex; justify-content: flex-end; gap: var(--s-2); margin-top: var(--s-2); }
.session-buttons button { min-height: 42px; padding: 0 1.2em; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: none; font-weight: 600; }
.session-buttons .is-lead { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.session-error { color: var(--deny); font-size: var(--t-sm); }
.session-error:empty { display: none; }

/* ---- the bar: at the bottom on wide screens ----
   One calm line: the logo (a door to Help, Admin and Keys), where to go, the two tools, the state.
   Every control in it is the same plain shape, 36 high with a quiet rounded ground; what is drawn by
   hand is the small drawing inside each, nothing else. (The pad's control comes from padlink.js with
   a look of its own; here it is brought into line with the others.) */
.footnav { display: none; }
.brand h1 { display: flex; }
.brand-open { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; margin-left: -8px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; transition: background var(--d-fast); }
.brand-open:hover, .brand-open[aria-expanded="true"] { background: var(--sunken); }
.brand-fold { display: inline-flex; margin-left: -4px; color: var(--faint); rotate: 0deg; transition: rotate var(--d-med) var(--ease-out), color var(--d-fast); }
.brand-fold .sketch { width: 16px; height: 16px; stroke-width: 2.2; }
.brand-open:hover .brand-fold { color: var(--muted); }
.brand-open[aria-expanded="true"] .brand-fold { rotate: 180deg; color: var(--fg); }
/* The menu: a small sheet above the logo (below it on a phone, where the bar is at the top). */
.sidedoors { position: absolute; z-index: 6; left: max(var(--s-3), env(safe-area-inset-left, 0px)); bottom: calc(100% + 6px); min-width: 208px; display: grid; gap: 2px; padding: 6px; border-radius: var(--r-md); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lg); animation: pop var(--d-fast) var(--ease-out) both; }
.topbar .sidedoors a, .topbar .sidedoors button, .topbar .sidedoors #keys-open { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px 0 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--fg); font: 500 var(--t-md)/1 var(--font); text-align: left; text-decoration: none; }
.topbar .sidedoors a:hover, .topbar .sidedoors button:hover, .topbar .sidedoors #keys-open:hover, .topbar .sidedoors :focus-visible { background: var(--sunken); text-decoration: none; }
.topbar .sidedoors :focus-visible { outline-offset: -2px; }
.sidedoors .sketch { width: 20px; height: 20px; stroke-width: 1.8; color: var(--muted); }
/* a switch in the menu says how it stands */
.sidedoors button { width: 100%; cursor: pointer; }
.sidedoors button i { margin-left: auto; padding-left: var(--s-4); font: 600 var(--t-xs)/1 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.sidedoors button[aria-checked="true"] i { color: var(--accent); }
.sidedoors kbd { margin-left: auto; min-width: 22px; padding: 4px 6px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), 0 2px 0 var(--line-strong); font: 500 .72rem/1 var(--mono); color: var(--muted); text-align: center; }
/* the theme: a switch that says how it stands, with the moon while it is light and the sun while it is dark */
#theme-toggle i::after { content: "off"; }
#theme-toggle[aria-pressed="true"] i::after { content: "on"; }
#theme-toggle[aria-pressed="true"] i { color: var(--accent); }
/* the connection, last in the menu: a line, not a control */
.sidedoors .conn { margin: 4px 0 0; padding: 10px 12px 6px 14px; height: auto; border-top: 1px solid var(--line); border-radius: 0; font-size: var(--t-sm); }
.sidedoors .conn[data-state="online"] span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
.sidedoors .conn[data-state="offline"] { margin: 4px -6px -6px; padding: 10px 18px 12px 20px; border-radius: 0 0 var(--r-md) var(--r-md); }
/* When the connection is not there it must be seen without opening anything: the logo carries a mark,
   and the word stands beside it in the bar. */
/* Not connected: a small dot on the caret (the words stand in the menu's foot; a sentence here broke the bar). */
.brand:has(.conn[data-state="offline"]) .brand-open::after, .brand:has(.conn[data-state="connecting"]) .brand-open::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 3px; border-radius: 50%; background: var(--faint); }
.brand:has(.conn[data-state="offline"]) .brand-open::after { background: var(--urg-high); animation: blink 1.6s var(--ease-in-out) infinite; }
.brand:has(.conn[data-state="offline"]) .brand-mark-bg { fill: var(--urg-high); }
/* The two tools, and on wide screens the two places: one shape. */
.topbar .focus-open, .topbar .padlink-open, .footnav button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 36px; padding: 0 14px 0 10px;
  border: 0; border-radius: 10px; background: var(--sunken); color: var(--fg); rotate: none;
  font: 600 var(--t-sm)/1 var(--font); letter-spacing: 0; white-space: nowrap;
  transition: background var(--d-fast), color var(--d-fast), box-shadow var(--d-fast);
}
.topbar .focus-open:hover, .topbar .padlink-open:hover { rotate: none; background: var(--sunken); box-shadow: inset 0 0 0 2px var(--line-strong); }
.topbar .padlink-open[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.topbar .focus-open .sketch, .topbar .padlink-ico, .footnav .sketch { width: 20px; height: 20px; stroke-width: 1.8; }
/* The theme: a scribbled moon while it is light, a sun while it is dark. */
.topbar .icon-btn { width: 36px; height: 36px; border-radius: 10px; }
#theme-toggle .ico-sun, :root[data-theme="dark"] #theme-toggle .ico-moon { display: none; }
:root[data-theme="dark"] #theme-toggle .ico-sun { display: block; }
/* The sheet of keys: only where there is a keyboard. */
@media (pointer: coarse) { .topbar #keys-open { display: none; } }
/* Two small round buttons float at the bottom right of every page: the memo pad showing the crowned
   session (quick send, the memo slip: css/quicksend.css) and the pad's drawing. In a session
   they stand above the composer, so they never lie on its send button. */
.quick-open, .topbar .padlink-open {
  position: fixed; z-index: 6; bottom: calc(var(--s-4) + var(--float-up, 0px) + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; min-height: 0; padding: 0; margin: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; rotate: none; background: var(--surface); color: var(--fg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); transition: box-shadow var(--d-fast), translate var(--d-fast);
}
.topbar .padlink-open { right: calc(var(--s-4) + 52px); }
.quick-open:hover, .topbar .padlink-open:hover { background: var(--surface); box-shadow: 0 0 0 1px var(--fg), var(--shadow-md); translate: 0 -1px; rotate: none; }
.quick-open[aria-expanded="true"], .topbar .padlink-open[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.topbar .padlink-open span { display: none; }
.topbar .padlink-ico { width: 22px; height: 22px; }
/* In a session the two do not float over the conversation: they stand small at the top right, beside its title. */
body:not([data-scope="all"]):not([data-page]) :is(.quick-open, .topbar .padlink-open) { bottom: auto; top: 8px; width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--line); }
body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open { right: calc(var(--s-4) + 44px); }
@media (max-width: 860px) {
  body:not([data-scope="all"]):not([data-page]) .topbar .padlink-open { right: 100px; top: 6px; }
  /* A phone's Desk too: the cards scroll under the whole screen, so nothing may float over their tiles
     (his rule: nothing lies over what one presses). The two stand in the top bar, as in a session. */
  body .topbar :is(.quick-open, .padlink-open) { bottom: auto; top: 6px; width: 36px; height: 36px; box-shadow: 0 0 0 1px var(--line); }
  body .topbar .quick-open { right: 56px; }
  body .topbar .padlink-open { right: 100px; }
}
/* ---- wide screens: no bar. The logo with its menu floats at the top centre of the page, a small
   pill; the menu drops down centred under it. In the sidebar the Inbox entry stays at the top while
   the sessions scroll. ---- */
@media (min-width: 861px) {
  body { grid-template-rows: minmax(0, 1fr); }
  #agents { grid-column: 1; grid-row: 1; padding-top: 0; }
  #session, #inbox, #ledger { grid-row: 1; }
  /* The Desk stands at the top of the sidebar, a block of its own that stays while the sessions scroll:
     the desk drawing, "Desk", who works, the knocks and everything open; one click goes to the Desk from
     anywhere. The caret at its right opens the menu under it. (Not moved by a transform: the floating
     buttons at the foot are children of .topbar and must stay the page's.) */
  /* The block: one line. The desk drawing stands over the sessions' drawings, the big word "Desk" over
     their names; beside it the small turning ring while sessions work; the knocks and everything open
     as small marks before the caret, whose column stands over the rows' rings. Even margins all round;
     below it clear room, kept by a spacer that stays while the sessions scroll under it. */
  /* The rail (card Nr. 150, bar.js toggleRail): the sidebar folded to the sessions' drawings with their state at
     the corner (ring, count, the red hand of a knock); the Desk block is its drawing and the knocks. Names
     come as a note beside the row under the pointer (.rail-tip). The small button at the foot folds and opens. */
  .rail-tip { display: block; }
  .rail-fold { position: fixed; z-index: 7; left: 8px; bottom: 14px; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--faint); }
  .rail-fold:hover, .rail-fold:focus-visible { color: var(--fg); background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
  .rail-fold svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--d-fast); }
  /* (The old client's full-screen focus view hid the rail button; the app has no such view: no :has() over the whole page.) */
  #agents { padding-bottom: 60px; }
  [data-rail="folded"] body { grid-template-columns: 76px minmax(0, 1fr); }
  [data-rail="folded"] .rail-fold { left: 20px; }
  [data-rail="folded"] .rail-fold svg { rotate: 180deg; }
  [data-rail="folded"] .topbar { width: 60px; height: 64px; }
  [data-rail="folded"] .topbar .desk-go { flex-direction: column; justify-content: center; gap: 5px; padding: 0; border-radius: 14px; }
  [data-rail="folded"] .topbar .desk-go > .sketch { margin: 0; width: 26px; height: 26px; }
  [data-rail="folded"] .topbar .desk-name, [data-rail="folded"] .topbar .desk-state .agent-working, [data-rail="folded"] .topbar .desk-state .agent-count.is-total { display: none; }
  [data-rail="folded"] .topbar .desk-state { flex: none; margin: 0; justify-content: center; }
  [data-rail="folded"] .topbar .desk-state:empty { display: none; }
  [data-rail="folded"] #agents { padding-inline: 6px; }
  [data-rail="folded"] #agents::before { height: 80px !important; margin-inline: -6px; }
  [data-rail="folded"] .agent-row { justify-content: center; }
  [data-rail="folded"] .agent-entry { flex: none; justify-content: center; width: 60px; padding: 8px 0 !important; }
  [data-rail="folded"] .agent-text { display: none; }
  [data-rail="folded"] .agent-row > .agent-badge { position: absolute; right: -2px; top: -4px; margin: 0; width: 24px; height: 24px; scale: .85; }
  [data-rail="folded"] .agent-row.is-group .agent-entry { min-height: 0; }
  [data-rail="folded"] .agent-row > :is(.agent-cut, .agent-archive) { display: none; }
  [data-rail="folded"] #agents > :not(.agent-row) { display: none; }
  .rail-tip { position: fixed; z-index: 9; padding: 6px 10px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 600 var(--t-sm)/1 var(--font); pointer-events: none; white-space: nowrap; }
  #agents { padding-top: 0; }
  /* the Desk box: 8px from the top and the sides (one inset all round), the first row 16px under it, on the line of the page's first content */
  #agents::before { content: ""; flex: none; position: sticky; top: 0; z-index: 3; height: 72px; margin: 0 calc(-1 * var(--s-2)) 6px; background: var(--bg); }
  .topbar { position: fixed; z-index: 7; top: 8px; left: 8px; right: auto; width: 240px; margin: 0; min-height: 0; height: 56px; padding: 0; border: 0; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow-sm); }
  .topbar:has(#desk-go[aria-current]) { box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-md); }
  .topbar .brand { margin-right: 0; flex: 1; min-width: 0; height: 100%; }
  .topbar .brand h1 { width: 100%; height: 100%; font: 800 1.75rem/1 var(--display); letter-spacing: -.03em; }
  .topbar .deskpill { gap: 0; }
  .topbar .desk-go { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 0; padding: 0 7px 0 6px; border-radius: 14px 0 0 14px; text-align: left; }
  .topbar .desk-go:hover { background: none; }
  .topbar .desk-go .brand-mark { display: none; }
  .topbar .desk-go > .sketch { flex: none; width: 28px; height: 28px; margin: 0 15px 0 9px; stroke-width: 1.6; }
  .topbar .desk-state { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; margin-left: 7px; }
  .topbar .desk-state .agent-working b { display: none !important; }
  .topbar .desk-state .agent-count.is-total .sketch { display: none; }
  .topbar .desk-state .agent-count.is-total { min-width: 18px; height: 18px; padding: 0 5px; justify-content: center; border-radius: var(--r-pill); background: var(--sunken); font-size: .7rem; }
  .topbar .desk-state .agent-working { order: -1; }
  .topbar .desk-state .agent-working span { display: none; }
  .topbar .desk-state .agent-working .agent-ring { width: 16px; height: 16px; }
  .topbar .desk-state .agent-counts { margin-left: auto; gap: 7px; }
  .topbar .desk-state .agent-count { padding: 0; gap: 2px; background: none; color: var(--muted); font-weight: 600; }
  .topbar .desk-state .agent-count.is-knock { color: var(--urg-high); }
  .topbar .desk-state .agent-count .sketch { width: 15px; height: 15px; }
  .topbar .brand-open { align-self: stretch; width: 32px; min-width: 32px; margin-left: 0; padding: 0; justify-content: center; border-radius: 0 14px 14px 0; box-shadow: -1px 0 0 var(--line); cursor: pointer; }
  .topbar .brand-open .brand-fold { margin-left: 0; }
  /* ---- the menu's pill (card Nr. 161 "pille"; then "Desk wieder links, oben das Menü heißt Trommi"): the menu's
     opener floats at the top centre of the page: the bell mark, the word "Trommi", a caret; a click anywhere on it
     (or Ctrl+K) opens the menu under it. It is the product's menu, not the Desk: the Desk box stands at the top of
     the sidebar again, without a caret, and carries the ring, the knocks and the count. The pill stands in a band of
     its own above every view (Desk, session, Scribble, Agents), so it is always there and lies over nothing; the
     pad's button stands in the same band at the right. Only the opened card and the walk cover it. (The opener is a
     fixed child of .topbar, which is placed without a transform.) */
  :root { --side: 256px; --band: 64px; } /* the band ends where the Desk box ends (8 + 56) */
  :root[data-rail="folded"] { --side: 76px; }
  #session, #inbox, #ledger { margin-top: var(--band); }
  /* Desk and Agents: the heading begins 16px under the band, the same line on both pages (ledger.css said 32px, the Desk 8px) */
  html body[data-scope="all"] #inbox, html body[data-page="roster"] #ledger { padding-top: var(--s-4); }
  .topbar .desk-go { border-radius: 14px; }
  /* (logo.css, linked later, put the bell into the Desk button for the time the Desk was the pill: the Desk box
     shows its desk drawing again, the bell stands in the menu's pill) */
  html body .topbar .desk-go .brand-mark { display: none; }
  html body .topbar .desk-go > .sketch { display: block; }
  html .topbar .brand-open { position: fixed; z-index: 8; top: 8px; left: var(--side); right: 0; width: max-content; min-width: 0; height: 38px; min-height: 0; margin: 0 auto; padding: 0 10px 0 8px; gap: 8px; align-self: auto; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); white-space: nowrap; }
  html .topbar .brand-open:hover, html .topbar .brand-open[aria-expanded="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--fg), var(--shadow-md); }
  .brand-open > .pill-mark { display: block; flex: none; width: 22px; height: 22px; }
  .brand-open > .pill-word { display: block; font: 700 1.02rem/1 var(--display); letter-spacing: 0; }
  .topbar .brand-open[data-other-knock]::before { right: 2px; top: 0; }
  html.focus-lock .topbar .brand-open { display: none; }
  html .topbar #brand-doors { position: fixed; z-index: 40; top: 54px; bottom: auto; left: var(--side); right: 0; margin-inline: auto; translate: none; width: 320px; max-height: calc(100dvh - 66px); overflow-y: auto; padding: 10px; border-radius: 18px; }
  /* the pad's button: top right of the band, in every view */
  html body .topbar .padlink-open { bottom: auto; top: 8px; right: var(--s-4); width: 38px; height: 38px; background: var(--surface); color: var(--fg); box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-sm); }
  .agent-entry { border-radius: 14px; }
  .agent-row > .agent-badge { margin-right: 8px; }
}
/* The menu, compact: the jump field, a quiet line for the project, four places two by two, and a foot
   with the connection and two small switches. One thin rule between the parts. */
.topbar .sidedoors { width: 244px; min-width: 0; gap: 0; padding: 6px; border-radius: 14px; }
#jump-field { width: 100%; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: var(--sunken); color: var(--fg); font: 400 var(--t-sm)/1 var(--font); }
#jump-field:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--line-strong); }
#jump-results { display: grid; gap: 1px; margin-top: 4px; }
#jump-results:empty { display: none; }
.topbar .sidedoors #jump-results :is(a, button) { min-height: 30px; font-size: var(--t-sm); }
#jump-results :is(a, button)[aria-selected="true"] { background: var(--sunken); }
.menu-head { margin: 0; padding: 9px 10px 3px; font: 600 .66rem/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.menu-desks { display: grid; gap: 1px; padding-bottom: 4px; }
.topbar .sidedoors .menu-desk { min-height: 32px; padding: 0 8px; font-size: var(--t-sm); }
.menu-desk b { font-weight: 600; }
.topbar .sidedoors .menu-desk i { text-transform: none; letter-spacing: 0; font-weight: 500; }
.menu-desk[aria-checked="true"]::after { content: "✓"; margin-left: 8px; color: var(--accent); font-weight: 700; }
/* Several desks (bar.js paintDesks): a row per desk (name, what waits, its key), the desk in view with "Rename" and
   "Remove" under it; "+ New desk…"; a name is typed in place. A dot on the caret when another desk knocks. */
.menu-desk-row { display: flex; flex-wrap: wrap; align-items: center; }
.menu-desk-row > .menu-desk { flex: 1 1 100%; min-width: 0; }
.menu-desk b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .sidedoors .menu-desk kbd { margin-left: 10px; white-space: nowrap; }
.topbar .sidedoors .menu-desk i.is-knock { color: var(--urg-high); }
.topbar .sidedoors .menu-desk.new-desk { color: var(--muted); }
.topbar .sidedoors .menu-desk.new-desk::after { content: none; }
.topbar .sidedoors .menu-desk-act { flex: none; width: auto; max-width: max-content; min-height: 28px; margin: 0 0 4px 8px; padding: 0 9px; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--muted); font: 600 var(--t-xs)/1 var(--font); }
.topbar .sidedoors .menu-desk-act.is-remove[data-sure] { color: var(--urg-critical); box-shadow: inset 0 0 0 1px var(--urg-critical); }
.menu-desk-form { display: flex; gap: 6px; padding: 3px 4px 5px; }
.menu-desk-field { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: 500 var(--t-sm)/1 var(--font); }
.topbar .sidedoors .menu-desk-form button { flex: none; width: auto; min-height: 36px; padding: 0 12px; border-radius: 8px; background: var(--fg); color: var(--bg); font: 600 var(--t-sm)/1 var(--font); }
.menu-desk-error { margin: 0; padding: 2px 10px 4px; color: var(--urg-critical); font: 500 var(--t-xs)/1.3 var(--font); }
.menu-desk-error:empty { display: none; }
/* Dev (bar.js): two quiet entries at the menu's foot for test cards, and a note when the hub cannot do it yet */
.menu-dev { margin-top: 6px; padding-top: 2px; border-top: 1px solid var(--line); }
.menu-dev .menu-head { display: block; }
.topbar #brand-doors .menu-dev button, .topbar #brand-doors .menu-dev a { color: var(--muted); }
.menu-dev-note { margin: 0; padding: 2px 12px 4px; color: var(--urg-high); font: 500 var(--t-xs)/1.3 var(--font); }
.menu-dev-note:empty { display: none; }
.brand-open[data-other-knock] { position: relative; }
.brand-open[data-other-knock]::before { content: ""; position: absolute; right: 5px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--urg-high); box-shadow: 0 0 0 2px var(--surface); }
[data-desks] .desk-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 861px) { [data-desks] .topbar .brand h1 { font-size: 1.32rem; letter-spacing: -.01em; } }
@media (max-width: 860px) { .topbar .sidedoors .menu-desk kbd { display: none; } [data-desks] .desk-name { max-width: 7.5rem; } .topbar .sidedoors .menu-desk-act { min-height: 36px; } .ledger-desk { display: none; } }
.ledger-desk { height: 32px; max-width: 8.5rem; margin-right: 4px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--fg); font: 500 var(--t-xs)/1 var(--font); }

/* ---- the floating Desk: the way to the Desk and what waits there; the caret beside it opens the menu ---- */
.deskpill { display: flex; align-items: center; gap: 2px; }
.desk-go { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 8px 0 4px; border: 0; border-radius: var(--r-pill); background: none; color: inherit; font: inherit; letter-spacing: inherit; white-space: nowrap; cursor: pointer; }
.desk-go:hover { background: var(--sunken); }
.desk-state { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--t-xs)/1 var(--font); letter-spacing: 0; }
.desk-state:empty { display: none; }
.desk-state .agent-working { font-size: var(--t-xs); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding-block: 4px; border-top: 1px solid var(--line); }
.topbar .sidedoors .menu-grid :is(a, button, #keys-open) { min-height: 36px; gap: 10px; padding: 0 12px; font-size: var(--t-sm); }
.topbar .sidedoors .sketch { width: 17px; height: 17px; }
.menu-foot { display: flex; align-items: center; gap: 2px; padding-top: 4px; border-top: 1px solid var(--line); }
.topbar .sidedoors .menu-foot .conn { flex: 1; margin: 0; padding: 0 8px; height: 30px; border: 0; font-size: var(--t-xs); }
.topbar .sidedoors .menu-foot .conn[data-state="offline"] { margin: 0; padding: 0 8px; border-radius: 8px; }
.topbar .sidedoors .menu-foot button { flex: none; width: 30px; min-height: 30px; padding: 0; justify-content: center; border-radius: 8px; }
.topbar .sidedoors .menu-foot button:is([aria-checked="true"], [aria-pressed="true"]) { background: var(--sunken); }
.topbar .sidedoors .menu-foot button:is([aria-checked="true"], [aria-pressed="true"]) .sketch { color: var(--fg); }
@media (min-width: 861px) {
  /* one edge on the pill: the logo button has no ground of its own in it */
  .brand-open:hover, .brand-open[aria-expanded="true"] { background: var(--sunken); }
}

/* ---- phone: sessions as a strip, a session's two modes behind a tab bar ---- */
@media (max-width: 860px) {
  body { --bar-h: 48px; --gutter: var(--s-4); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #session { grid-column: 1; grid-row: 3; }
  #chat, #scribble { animation: fade var(--d-med) var(--ease-out); }
  /* The strip of sessions above already says which one this is; the title keeps only the filters,
     and for sessions laid together the names, to pick the one column there is room for. */
  .pane-title { min-height: 0; padding: 6px var(--gutter); gap: var(--s-2) var(--s-3); flex-wrap: wrap; }
  .pane-title .modes, .pane-who > .pane-mark, .pane-who > .agent-pair { display: none; }
  .pane-who { flex: 1 1 auto; }
  .pane-who:empty, body:not([data-pair]) .pane-who { display: none; }
  .pane-title h2 { font-size: 1rem; }
  .pane-members button[aria-pressed="false"] { color: var(--faint); }
  .pane-members button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
  body[data-view="scribble"]:not([data-pair]) .pane-title { display: none; }
  .filters { margin-left: auto; }
  .filters button { min-height: 36px; }
  body[data-pair] .chat-pane:not(.is-member) { display: none; }
  #chat[data-cols]:not([data-cols="1"]) .chat-pane { min-width: 0; --gutter: var(--s-4); }
  .chat-pane-head { display: none; }
  .pane-list { padding-block: var(--s-5) var(--s-8); }
  #agents { grid-row: 2; flex-direction: row; gap: var(--s-1); overflow-x: auto; overflow-y: hidden; padding: var(--s-2) var(--s-3); border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  #agents::-webkit-scrollbar { display: none; }
  /* (room at the foot, so the last row can be scrolled clear of the two floating buttons) */
  body[data-scope="all"] #inbox { grid-column: 1; grid-row: 3; padding: var(--s-5) var(--gutter) 96px; }
  .inbox-head { margin-bottom: var(--s-5); }
  body[data-scope="all"] .tabbar { display: none; }
  body[data-page="roster"] .tabbar { display: none; }
  .agent-heading, .agent-archive, .agent-cut, .agent-row .crown-toggle[aria-pressed="false"] { display: none; }
  .agent-row .crown-toggle { left: 4px; top: -9px; pointer-events: none; }
  .agent-row.is-group .agent-entry { min-height: 44px; }
  .agent-row { flex: none; }
  .agent-row.is-insert-before::after, .agent-row.is-insert-after::after { left: auto; right: auto; top: 4px; bottom: 4px; width: 3px; height: auto; }
  .agent-row.is-insert-before::after { left: -4px; }
  .agent-row.is-insert-after::after { right: -4px; }
  .sidedoors { bottom: auto; top: calc(100% + 6px); }
  .brand-open { margin-left: -6px; padding: 0 6px; gap: 8px; }
  .topbar .icon-btn { width: 44px; height: 40px; }
  .roster-open { display: grid; }
  .toast { left: var(--gutter); right: var(--gutter); width: auto; flex-wrap: nowrap; padding: 6px 6px 6px var(--s-4); border-radius: var(--r-pill); }
  .toast:not(:has(button)) { padding-block: 10px; border-radius: var(--r-md); }
  .toast button { flex: none; }
  .agent-entry { width: auto; flex: none; min-height: 44px; padding: 4px 10px 4px 6px; border-radius: var(--r-pill); gap: var(--s-2); }
  .agent-entry[aria-current="true"] { box-shadow: 0 0 0 1px var(--line-strong); }
  .agent-text small { display: none; }
  .agent-avatar { width: 30px; height: 30px; border-radius: 50%; }
  .agent-pair { margin-inline: -4px 0; height: 36px; width: 49px; }
  .agent-text:has(strong + strong) { display: flex; gap: .35em; line-height: inherit; }
  .agent-text strong + strong { rotate: none; translate: none; }
  .agent-text strong + strong::before { content: "+ "; color: var(--faint); font-weight: 500; }
  .agent-badge { width: 30px; height: 30px; }
  .agent-row.has-badge .agent-entry { padding-right: 52px; }
  .agent-row > .agent-badge { margin: 0 8px 0 -46px; }
  .focus-open span { display: none; }
  .mic { width: 44px; height: 44px; }
  .topbar { gap: 0 2px; padding-left: max(var(--s-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--s-1), env(safe-area-inset-right, 0px)); }
  .brand-open { margin-left: 0; min-width: 40px; min-height: 40px; justify-content: center; }
  .desk-go { min-height: 40px; padding-left: 0; }
  .desk-go > .sketch { display: none; }
  .desk-go:hover { background: none; }
  .desk-state .agent-working span { display: none; }
  .icon-btn { width: 44px; height: 44px; }

  .log { scrollbar-gutter: auto; }
  .log-inner { padding-block: var(--s-5) var(--s-5); }
  .msg { margin-top: var(--s-6); }
  .msg-user { max-width: 88%; }
  .event { min-height: 44px; margin-top: var(--s-4); }
  .event.cont .event-ico::before { height: 20px; }
  .event-time { display: none; }
  .dock { padding-bottom: var(--s-3); }
  .composer { border-radius: var(--r-xl); padding: 5px; gap: 0; }
  .composer textarea { height: 44px; padding-block: 10px; font-size: 16px; }   /* below 16px iOS zooms the page on focus */
  .send { width: 44px; height: 44px; }
  #chat .rich pre code { font-size: .8rem; }

  .tabbar {
    grid-row: 4; display: grid; grid-template-columns: repeat(2, 1fr);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface); border-top: 1px solid var(--line); position: relative; z-index: 5;
  }
  .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 58px; padding: 0; border: 0; background: none;
    color: var(--muted); font-size: var(--t-xs); font-weight: 500; letter-spacing: .01em;
    transition: color var(--d-fast) var(--ease-out);
  }
  .tabbar button:focus-visible { outline-offset: -4px; border-radius: var(--r-md); }
  .tab-ico {
    position: relative; display: grid; place-items: center; width: 60px; height: 30px; border-radius: var(--r-pill);
    transition: background var(--d-med) var(--ease-out);
  }
  .tab-ico .ico { width: 22px; height: 22px; }
  .tabbar button[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .tabbar button[aria-current="page"] .tab-ico { background: var(--accent-soft); }
  .tab-dot { position: absolute; top: 2px; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }

  /* the keyboard is up: give its room to the conversation */
  :root[data-typing] .tabbar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}

/* A finger needs 44px: the one-line pile heads and the menu's entries. */
@media (pointer: coarse), (max-width: 860px) {
  .inbox-pile-head { min-height: 44px; }
  .topbar .sidedoors .menu-grid :is(a, button, #keys-open), .topbar .sidedoors .menu-desk, .topbar .sidedoors #jump-results :is(a, button) { min-height: 44px; }
  .topbar .sidedoors .menu-foot button { width: 44px; min-height: 44px; }
  #jump-field { height: 44px; }
  .inbox-revising-row, .inbox-revising-open { min-height: 44px; }
}

/* ---- the Desk's menu: one column, one type size for entries and one small for what they say ----
   The jump field first (its key at the right), the desk(s), the four places as a list with one icon
   column, then the two switches as labelled rows, and the connection as the last quiet line. */
.topbar #brand-doors { gap: 0; padding: 8px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-strong), 0 12px 28px -10px rgb(20 30 25 / .28); }
.jump-box { position: relative; display: block; }
/* The field's own "clear" cross would lie on the key cap at its right end (Esc empties and closes it anyway). */
#jump-field::-webkit-search-cancel-button { display: none; }
#jump-field { height: 36px; padding: 0 58px 0 12px; border-radius: 9px; font: 400 var(--t-sm)/1 var(--font); }
.jump-box kbd { position: absolute; right: 8px; top: 50%; translate: 0 -50%; margin: 0; padding: 3px 6px; border-radius: 6px; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); font: 500 .68rem/1 var(--mono); color: var(--muted); pointer-events: none; }
.topbar #brand-doors :is(a, button):not(.menu-foot *), .topbar #brand-doors .menu-foot button { width: 100%; min-height: 36px; gap: 10px; padding: 0 12px; border-radius: 9px; font: 500 var(--t-sm)/1 var(--font); justify-content: flex-start; }
.topbar #brand-doors .menu-grid :is(a, button) { min-height: 36px; gap: 10px; padding: 0 12px; font-size: var(--t-sm); }
.topbar #brand-doors .sketch { flex: none; width: 18px; height: 18px; stroke-width: 1.8; color: var(--muted); }
.topbar #brand-doors :is(i, kbd):not(.jump-box kbd) { margin-left: auto; padding-left: 12px; font: 500 var(--t-xs)/1 var(--font); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--muted); }
.topbar #brand-doors kbd:not(.jump-box kbd) { min-width: 0; padding: 3px 6px; background: none; box-shadow: 0 0 0 1px var(--line-strong); border-radius: 6px; font-family: var(--mono); }
.menu-desks { padding: 6px 0 0; }
.menu-desks, .menu-grid, .menu-foot { margin-top: 6px; padding: 6px 0 0; border-top: 1px solid var(--line); }
.menu-desks { border-top: 0; margin-top: 2px; }
.menu-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
/* one desk: a single quiet line, no heading and no tick */
.menu-head:has(+ .menu-desks > :only-child) { display: none; }
.menu-desk:only-child::after { content: none; }
.menu-desk[aria-checked="true"] i { color: var(--muted); }
.menu-foot { display: grid; gap: 0; align-items: stretch; }
.topbar #brand-doors .menu-foot .conn { order: 9; justify-content: flex-start; justify-self: start; height: 30px; margin: 4px 0 0; padding: 0 12px; border: 0; font-size: var(--t-xs); color: var(--muted); }
.topbar #brand-doors .menu-foot button:is([aria-checked="true"], [aria-pressed="true"]) { background: none; }
.topbar #brand-doors .menu-foot button:hover, .topbar #brand-doors .menu-foot button:focus-visible { background: var(--sunken); }
#knock-sound::after { content: "Off"; }
#knock-sound[aria-checked="true"]::after { content: "On"; color: var(--accent); }
#theme-toggle::after { content: "Light"; }
:root[data-theme="dark"] #theme-toggle::after { content: "Dark"; }
#knock-sound::after, #theme-toggle::after { margin-left: auto; font: 500 var(--t-xs)/1 var(--font); color: var(--muted); }
@media (pointer: coarse), (max-width: 860px) {
  .topbar #brand-doors { width: min(300px, calc(100vw - 24px)); }
  .topbar #brand-doors .menu-grid :is(a, button) { min-height: 44px; }
  .topbar #brand-doors :is(a, button):not(.menu-foot *), .topbar #brand-doors .menu-foot button { min-height: 44px; width: 100%; }
  #jump-field { height: 44px; }
  .jump-box kbd { display: none; }
}

/* ══ Phone polish (docs/qa-phone-design.md): found by measuring every state at 360, 390 and 430px. ══ */
@media (max-width: 860px) {
  /* The bar: the pad and the memo are placed from the right edge, outside the flow, so the Desk box could
     run under them (its menu arrow lay 12px under the pad). The box now ends before them. When the counts
     get long the Agents button leaves first (see "Tight" below); only if that is not enough do the last counts
     (who works, then the total) leave whole instead of being cut or covered. */
  .topbar .brand { flex: 0 1 auto; min-width: 0; max-width: calc(100% - 134px); }
  .topbar .deskpill { min-width: 0; gap: 0; }
  .topbar .desk-go { flex: 0 1 auto; min-width: 0; gap: 5px; padding-right: 2px; }
  .topbar .desk-go .brand-mark, .topbar .desk-name { flex: none; }
  .topbar .desk-state { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; align-content: flex-start; gap: 0 4px; height: 24px; overflow: hidden; }
  .topbar .desk-state .agent-count.is-total { padding-inline: 2px; }
  .topbar .desk-state > *, .topbar .desk-state .agent-counts > * { height: 24px; }
  .topbar .desk-state .agent-counts { display: contents; }
  .topbar .brand-open { flex: none; }
  /* Tight (a 360px phone, or a two-digit knock count at 390px; js/bar.js sets data-tight, card Nr. 158): the
     Agents button leaves the bar first and the counts keep their room. Agents stays an entry of the Desk menu. */
  .topbar[data-tight] .roster-open { display: none; }
  .topbar[data-tight] .brand { max-width: calc(100% - 94px); }
  html body:not([data-x]):not([data-y]) .topbar[data-tight] .quick-open { right: 12px; }
  html body:not([data-x]):not([data-y]) .topbar[data-tight] .padlink-open { right: 54px; }
  /* the two round buttons stand on one line in every view (the memo sat 2px lower inside a session) */
  html body:not([data-x]):not([data-y]) .topbar :is(.quick-open, .padlink-open) { top: 6px; }
  html body:not([data-x]):not([data-y]) .topbar .quick-open { right: 50px; }
  html body:not([data-x]):not([data-y]) .topbar .padlink-open { right: 92px; }

  /* The strip of sessions: a row with a badge reached 8px past its own box, so the rows lay 4px over each
     other. It now reaches 4px, which is the gap; the badge and the rows stay where they were. And one long
     name does not take the whole strip. */
  .agent-row.has-badge .agent-entry { padding-right: 48px; }
  .agent-row > .agent-badge { margin-left: -42px; }
  .agent-entry .agent-text { max-width: min(56vw, 15rem); }

  /* The Desk's menu: a long desk name is cut with an ellipsis inside the menu (it made the field and every
     line 37px wider than the menu, past its right edge). */
  .topbar #brand-doors, .menu-desks { grid-template-columns: minmax(0, 1fr); }
  .topbar #brand-doors > *, .menu-desk-row, .topbar .sidedoors .menu-desk { min-width: 0; max-width: 100%; }
  .topbar .sidedoors .menu-desk i { flex: none; white-space: nowrap; }

  /* A finger needs 40px. These keep their look; an unseen area around them takes the tap. */
  :is(.agent-badge, .inbox-revising-take, #filter-questions, #filter-files, .rich .code-copy, .file-chip, .keys-close, .composer-file, .scribble-back, .inbox-walk, .inbox-when > .cardclip-copy, .inbox-done-sub > .cardclip-copy, .inbox-takeback) { position: relative; }
  :is(.agent-badge, .inbox-revising-take, #filter-questions, #filter-files, .rich .code-copy, .file-chip, .keys-close, .composer-file, .scribble-back, .inbox-walk, .inbox-when > .cardclip-copy, .inbox-done-sub > .cardclip-copy, .inbox-takeback, .topbar .padlink-open, .open-jump, .jump, .rh-open)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); translate: -50% -50%; }
  /* the memo button's ::after is its draft dot (quicksend.css): the tap area is its ::before, or a kept draft
     turned the whole button into a green disc */
  .topbar .quick-open::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 40px); height: max(100%, 40px); translate: -50% -50%; }
  .msg-details summary { min-height: 40px; }
  .composer-file { height: 34px; }
  .inbox-when > .cardclip-copy { z-index: 1; }
  /* the drawings to choose from: as many columns as the phone has room for (the eighth was cut off) */
  .mark-grid { width: min(332px, calc(100vw - 76px)); grid-template-columns: repeat(auto-fill, 38px); justify-content: space-between; gap: 4px; }
  .mark-tile { position: relative; }
  .mark-tile::after { content: ""; position: absolute; inset: -2px; }
  /* the Snooze corner of a question inside a conversation */
  /* It is the 28px square beside the title now (.inbox-when): made 40px high it was 28x40 and lay 10px over the
     title below. It keeps its look; an unseen 40px area takes the tap. */
  .log .inbox-when .inbox-tab-act { overflow: visible; }
  .log .inbox-when .inbox-tab-act::before { content: ""; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; translate: -50% -50%; }
}

/* "Next, please" as index cards (card Nr. 166, "index"): the heading is the divider tab in front, standing on the
   first card; the cards behind it peek out as small tabs with their titles, then "+N". Fixed heights: nothing
   shifts when a card arrives. */
.inbox-title:has(> .inbox-index) { flex: 1 1 100%; }
.inbox-head:has(.inbox-index) { margin-bottom: 0; align-items: flex-end; }
.inbox-title h2.inbox-index { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 0; min-width: 0; margin: 0; padding: 0 10px 0 var(--index-in, 46px); font: 700 1.1rem/1 var(--display); letter-spacing: -.01em; }
.inbox-index > .inbox-walk { flex: none; position: relative; z-index: 9; padding: 10px 14px 9px 16px; border-radius: 9px 9px 0 0; background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); clip-path: inset(-2px -2px 0 -2px); }
.inbox-index > .inbox-walk .inbox-circled { font: 700 .86em/1.5 var(--font); }
.inbox-index > .inbox-walk .sketch { width: 17px; height: 17px; }
.inbox-index-tab { flex: 0 1 200px; min-width: 44px; display: flex; align-items: center; gap: 6px; height: 28px; margin: 0 0 0 -1px; padding: 0 10px 0 9px; border: 0; border-radius: 7px 7px 0 0; background: var(--sunken); box-shadow: 0 0 0 1px var(--line-strong); clip-path: inset(-2px -2px 0 -2px); color: var(--muted); font: 600 var(--t-xs)/1 var(--font); letter-spacing: 0; cursor: pointer; }
.inbox-index-tab.inbox-index-more { flex: none; min-width: 0; cursor: default; }
button.inbox-index-tab:hover { color: var(--fg); background: var(--surface); }
.inbox-index-tab svg { flex: none; width: 15px; height: 15px; }
.inbox-index-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
  .inbox-title h2.inbox-index { padding-left: 0; }
  .inbox-index-tab { height: 32px; }
  .inbox-index > .inbox-index-tab:nth-of-type(n + 2) { display: none; }
  .inbox-index > .inbox-index-tab.inbox-index-more { display: flex; }
}