ai-code-engineer 0.1.0__py3-none-any.whl

ai_code_engineer/webapp/static/app.css

@@ -0,0 +1,780 @@
+/* Component layer. Reads tokens from tokens.css; contains no literal colours. */
+
+* { box-sizing: border-box; margin: 0; padding: 0 }
+html, body { height: 100% }
+body {
+  font-family: var(--ui); font-size: var(--fs); letter-spacing: var(--ls); color: var(--ink);
+  background: var(--bg); overflow: hidden; -webkit-font-smoothing: antialiased;
+}
+button, input, textarea, select { font: inherit; letter-spacing: inherit }
+button { color: inherit; background: none; border: 0; cursor: pointer; white-space: nowrap }
+a { color: var(--accent-text); text-decoration: none }
+:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px }
+::selection { background: var(--accent-ring); color: var(--ink) }
+
+::-webkit-scrollbar { width: 11px; height: 11px }
+::-webkit-scrollbar-thumb {
+  background: var(--scroll); border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--line-2); background-clip: content-box }
+::-webkit-scrollbar-track { background: transparent }
+
+.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr) var(--rail-w); height: 100vh }
+/* The collapsed class lives on <html>, not on .app: the boot script has to set it before the
+   first paint, and the only element that exists then is the document element. */
+html.side-collapsed .app { grid-template-columns: 62px minmax(0, 1fr) var(--rail-w) }
+html.side-collapsed .side { padding-left: 8px; padding-right: 8px }
+html.side-collapsed .side .brand b, html.side-collapsed .side .search,
+html.side-collapsed .side .nav, html.side-collapsed .side .newbtn .kbd,
+html.side-collapsed .side .foot { display: none }
+html.side-collapsed .side .newbtn { justify-content: center; padding: 9px 0 }
+html.side-collapsed .side .brand { gap: 4px }
+/* The button that folds the sidebar away lives inside it, so the way back has to live outside. */
+#sidebar-expand { display: none }
+html.side-collapsed #sidebar-expand { display: grid }
+
+/* ------------------------------- sidebar ------------------------------- */
+.side {
+  background: var(--side); border-right: 1px solid var(--line);
+  display: flex; flex-direction: column; padding: 14px 12px 12px; min-height: 0;
+}
+.brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 14px }
+.mark {
+  width: 24px; height: 24px; border-radius: var(--r-s); background: var(--accent); color: var(--accent-ink);
+  display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none;
+}
+.brand b { font-size: 14px; font-weight: 600; letter-spacing: -.15px }
+.brand .spacer { flex: 1 }
+.icon-btn {
+  width: 26px; height: 26px; border-radius: var(--r-s); display: grid; place-items: center; color: var(--faint);
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.icon-btn:hover { background: var(--hover); color: var(--ink) }
+
+.newbtn {
+  display: flex; align-items: center; gap: 8px; width: 100%; justify-content: space-between;
+  background: var(--accent); color: var(--accent-ink); padding: 9px 12px; border-radius: var(--r-m);
+  font-weight: 550; box-shadow: var(--btn-shadow); transition: background var(--t-fast), transform var(--t-fast);
+}
+.newbtn:hover { background: var(--accent-hover) }
+.newbtn:active { transform: translateY(1px) }
+.newbtn .l { display: flex; align-items: center; gap: 8px }
+.kbd {
+  font-family: var(--mono); font-size: 10px; padding: 2px 5px; border-radius: 5px;
+  background: var(--kbd); color: var(--kbd-ink);
+}
+.newbtn .kbd { background: rgba(255, 255, 255, .17); color: inherit }
+
+.search {
+  display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; background: var(--field);
+  border: 1px solid var(--line); border-radius: var(--r-m); color: var(--faint); font-size: 13px;
+  transition: border-color var(--t-fast), box-shadow var(--t-fast); cursor: text;
+}
+.search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring) }
+.search svg { flex: none; opacity: .7 }
+.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px }
+.search input::placeholder { color: var(--faint) }
+
+.nav { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px }
+.sec { margin-top: 18px }
+.sec > h4 {
+  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
+  font-weight: 600; padding: 0 8px 6px; display: flex; align-items: center; gap: 6px;
+}
+.sec > h4 .add { margin-left: auto; cursor: pointer; letter-spacing: 0; text-transform: none; font-size: 11px }
+.sec > h4 .add:hover { color: var(--ink) }
+
+.node {
+  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-s);
+  color: var(--ink-2); font-size: 13px; cursor: pointer; transition: background var(--t-fast);
+}
+.node:hover { background: var(--hover) }
+.node .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.node .chev { margin-left: auto; color: var(--faint); font-size: 9px; transition: transform var(--t-med) }
+.node.closed .chev { transform: rotate(-90deg) }
+.av {
+  width: 19px; height: 19px; border-radius: 6px; display: grid; place-items: center; font-size: 9.5px;
+  font-weight: 700; flex: none;   /* background and ink come from avatar() in app.js */
+}
+.leaf {
+  display: flex; align-items: center; gap: 9px; padding: 6px 8px 6px 10px; border-radius: var(--r-s);
+  color: var(--ink-2); font-size: 13px; cursor: pointer; position: relative; transition: background var(--t-fast);
+}
+.leaf > span.t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.leaf time { font-size: 11px; color: var(--faint); flex: none; opacity: 0; transition: opacity var(--t-fast) }
+.leaf:hover time, .leaf.on time { opacity: 1 }
+.leaf:hover { background: var(--hover) }
+.leaf.on { background: var(--sel); color: var(--ink); font-weight: 550 }
+.leaf.on::before {
+  content: ""; position: absolute; left: -4px; top: 8px; bottom: 8px; width: 2px; border-radius: 9px;
+  background: var(--accent);
+}
+.dot { width: 6px; height: 6px; border-radius: 99px; background: var(--line-2); flex: none }
+
+/* Dropping a chat on a project node binds its context, so the target has to be unmistakable
+   while the drag is over it — and the same command lives on the leaf menu for keyboards. */
+.leaf.dragging { opacity: .45 }
+.leaf .dots {
+  flex: none; opacity: 0; border: 0; background: none; color: var(--faint); font-size: 13px;
+  line-height: 1; padding: 0 2px; cursor: pointer;
+}
+.leaf:hover .dots, .leaf:focus-within .dots { opacity: 1 }
+.leaf .dots:hover { color: var(--ink) }
+.node.drop { background: var(--sel); box-shadow: inset 0 0 0 2px var(--accent-ring) }
+.node.drop .nm { color: var(--accent-text) }
+/* The node's own buttons: ＋ starts a chat in that project, ⋯ opens its menu. Both stay quiet
+   until the row is hovered or focused so the tree keeps reading as a list of names. */
+.node .dots { opacity: 0; border: 0; background: none; color: var(--faint); font-size: 13px; line-height: 1; padding: 0 3px; flex: none }
+.node:hover .dots, .node:focus-within .dots { opacity: 1 }
+.node .dots:hover { color: var(--ink) }
+.node .av { font-size: 13px }
+.iconpick { display: flex; flex-wrap: wrap; gap: 8px }
+.iconpick .icon {
+  width: 44px; height: 44px; font-size: 21px; display: grid; place-items: center; border-radius: var(--r-m);
+  border: 1px solid var(--line); background: var(--panel);
+}
+.iconpick .icon:hover { background: var(--hover); border-color: var(--line-2) }
+.iconpick .icon.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring) }
+.dot.ok { background: var(--ok) } .dot.warn { background: var(--warn) } .dot.bad { background: var(--bad) }
+.dot.run { background: var(--accent); animation: pulse 1.3s var(--ease) infinite }
+@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
+.empty { padding: 14px 10px; color: var(--faint); font-size: 12.5px; line-height: 1.6 }
+
+.side .foot {
+  margin-top: auto; padding: 12px 8px 2px; border-top: 1px solid var(--line); color: var(--faint);
+  font-size: 11.5px; display: flex; gap: 8px; align-items: center;
+}
+.themepick { display: flex; gap: 4px; margin-left: auto }
+.themepick button {
+  width: 17px; height: 17px; border-radius: 5px; border: 1px solid var(--line-2);
+  display: grid; place-items: center; font-size: 9px; color: var(--ink-2);
+}
+.themepick button.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring) }
+
+/* -------------------------------- main -------------------------------- */
+/* min-height:0 is what keeps the conversation inside the window. A grid item's automatic minimum
+   is its content height, so a long thread grew .main past 100vh and the composer — with whatever
+   was being typed in it — fell off the bottom of a page that cannot scroll. */
+.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg) }
+.top {
+  display: flex; align-items: center; gap: 14px; padding: 11px 22px; min-height: 55px;
+  border-bottom: 1px solid var(--line); background: var(--topbar);
+}
+.top h1 { font-size: 14.5px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+.top .sub { font-size: 11.5px; color: var(--faint); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
+.seg { display: flex; gap: 2px; margin-left: auto; padding: 3px; background: var(--seg); border-radius: var(--r-m) }
+.seg button {
+  padding: 5px 13px; border-radius: calc(var(--r-m) - 3px); font-size: 12.5px; color: var(--faint);
+  font-weight: 500; transition: color var(--t-fast), background var(--t-fast);
+}
+.seg button:hover { color: var(--ink-2) }
+.seg button.on { background: var(--seg-on); color: var(--ink); font-weight: 550; box-shadow: var(--seg-shadow) }
+.ghost {
+  padding: 6px 11px; border: 1px solid var(--line); border-radius: var(--r-m); font-size: 12.5px;
+  color: var(--ink-2); background: var(--panel); transition: background var(--t-fast), border-color var(--t-fast);
+}
+.ghost:hover { background: var(--hover); border-color: var(--line-2) }
+
+.view { flex: 1; min-height: 0; display: none; flex-direction: column }
+.view.on { display: flex; animation: fade var(--t-med) var(--ease) }
+@keyframes fade { from { opacity: 0; transform: translateY(4px) } to { opacity: 1; transform: none } }
+
+/* -------------------------------- chat -------------------------------- */
+.scroll { flex: 1; overflow-y: auto; padding: 26px 22px 10px; scroll-behavior: smooth }
+.thread { max-width: var(--thread-w); margin: 0 auto; display: flex; flex-direction: column; gap: 22px }
+.msg { display: flex; gap: 11px; animation: rise var(--t-med) var(--ease) }
+@keyframes rise { from { opacity: 0; transform: translateY(6px) } }
+.msg .pic {
+  width: 26px; height: 26px; border-radius: var(--r-s); flex: none; display: grid; place-items: center;
+  font-size: 11px; font-weight: 700; background: var(--pic); color: var(--pic-ink);
+}
+.msg.me { flex-direction: row-reverse }
+.msg.me .pic { background: var(--accent); color: var(--accent-ink) }
+.msg.sys .pic { background: var(--chip); color: var(--ink-2) }
+.body { min-width: 0; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px }
+.msg.me .body { align-items: flex-end }
+.who { font-size: 11.5px; color: var(--faint); margin-bottom: 5px; font-weight: 550 }
+/* dir="auto" on the bubble picks the paragraph direction; plaintext extends that to each
+   paragraph inside it, so an Arabic answer with an English code block reads correctly without
+   the code block being mirrored. Lists indent from the writing side, not from the left. */
+.bub {
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); border-top-left-radius: 4px;
+  padding: 12px 15px; font-size: var(--fs); line-height: 1.62; max-width: 660px; width: fit-content;
+  box-shadow: var(--card-shadow); overflow-wrap: anywhere; unicode-bidi: plaintext;
+}
+.msg.me .bub {
+  background: var(--me); border-color: var(--me-line); color: var(--me-ink);
+  border-radius: var(--r-l); border-top-left-radius: var(--r-l); border-top-right-radius: 4px;
+}
+.bub p + p { margin-top: 9px }
+.bub ul, .bub ol { margin: 9px 0 0; margin-inline-start: 18px; display: flex; flex-direction: column; gap: 5px }
+.tool { unicode-bidi: plaintext }
+/* Row actions sit under the bubble in the same faint grey as a timestamp: on every server row, all
+   the time — an icon that only exists while the pointer happens to cross its row is a control
+   nobody finds, and the row is already quiet enough to carry three of them. */
+.macts { display: flex; gap: 2px }
+.mact {
+  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
+  border-radius: 6px; color: var(--faint); background: transparent; border: 1px solid transparent;
+}
+.mact:hover, .mact:focus-visible { color: var(--ink-2); background: var(--hover); border-color: var(--line) }
+/* the model sheet's search box */
+.pickfilter { display: flex; align-items: center; gap: 9px }
+.pickfilter input { flex: 1; min-width: 0 }
+.pickfilter .g { font-size: 11px; color: var(--faint); white-space: nowrap }
+.bub code.inl {
+  font-family: var(--mono); font-size: .92em; background: var(--chip); border: 1px solid var(--line-soft);
+  padding: 1px 5px; border-radius: 5px;
+}
+.bub h3 { font-size: 1.05em; margin: 12px 0 4px }
+/* Source never mirrors: an Arabic page still shows left-to-right code. */
+.code { margin: 11px 0 3px; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; background: var(--code); direction: ltr; text-align: left }
+.code pre { direction: ltr; text-align: left }
+.code .bar {
+  display: flex; align-items: center; gap: 8px; padding: 6px 11px; border-bottom: 1px solid var(--line);
+  font-family: var(--mono); font-size: 11px; color: var(--faint); background: var(--code-bar);
+}
+.code .bar b { font-weight: 500; color: var(--ink-2) }
+.code .bar button { margin-left: auto; font-size: 11px; color: var(--faint); font-family: var(--ui) }
+.code .bar button:hover { color: var(--ink) }
+/* The block's own file name belongs next to the language it is written in, and it inherits the
+   bar's muted colour rather than picking a new pair. The apply button takes the Change badge's
+   graded pair — same green, same meaning: this is the road that can lead to a file. */
+.code .bar .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40% }
+.code .bar button[data-block] { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
+  border: 1px solid var(--ok-line); border-radius: 99px; background: var(--ok-bg);
+  color: var(--ok-ink); font-weight: 600 }
+.code .bar button[data-block]:hover { border-color: var(--ok); color: var(--ok-ink) }
+.code .bar button[data-block] ~ button { margin-left: 0 }
+.code pre { padding: 11px 13px; overflow-x: auto; font-family: var(--mono); font-size: 12.5px; line-height: 1.6 }
+.tok-k { color: var(--syn-k) } .tok-s { color: var(--syn-s) } .tok-c { color: var(--syn-c); font-style: italic }
+.tool {
+  display: inline-flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 99px;
+  background: var(--chip); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2); cursor: pointer;
+}
+.tool:hover { border-color: var(--line-2) }
+.tool b { font-weight: 600 }
+.typing { display: inline-flex; gap: 4px; align-items: center; color: var(--faint); font-size: 12.5px; margin-top: 4px }
+.typing i { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); opacity: .3; animation: b 1.1s infinite }
+.typing i:nth-child(2) { animation-delay: .15s } .typing i:nth-child(3) { animation-delay: .3s }
+@keyframes b { 0%, 60%, 100% { opacity: .25; transform: translateY(0) } 30% { opacity: 1; transform: translateY(-2px) } }
+
+/* ------------------------------ step rows (UI 4.1) ------------------------------
+   One row per thing the agent did, opening onto what it found. The sentence and its glyph arrive
+   from the server; the only thing drawn here is the chevron, and only when the server has said there
+   is something behind the row. */
+/* `steprow`, not `step`: the plan card in the rail already owns `.step`, and two rules for one
+   name leave each surface wearing the other's layout. */
+.steprow { display: flex; flex-direction: column; gap: 6px; max-width: 100% }
+.st-head {
+  display: flex; align-items: flex-start; gap: 8px; padding: 5px 11px; border-radius: 99px;
+  background: var(--chip); border: 1px solid var(--line); font-size: 12px; color: var(--ink-2);
+  text-align: start; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
+}
+.st-head:hover { border-color: var(--line-2) }
+.st-txt { min-width: 0; overflow-wrap: anywhere; unicode-bidi: plaintext }
+.st-chev { flex: none; display: inline-flex; align-items: center; margin-inline-start: auto;
+  color: var(--faint); transition: transform var(--t-fast) }
+.steprow.open .st-chev { transform: rotate(180deg) }
+.steprow.live .st-head { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink) }
+.st-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 2px 2px 10px;
+  border-inline-start: 2px solid var(--line); }
+.st-sec h6 { font-size: 11px; font-weight: 600; color: var(--faint); margin: 0 0 4px;
+  text-transform: uppercase; letter-spacing: .04em }
+.st-out {
+  display: flex; flex-direction: column; gap: 1px; max-height: 34vh; overflow: auto; padding: 8px 10px;
+  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--code);
+  font-family: var(--mono); font-size: 11.6px; line-height: 1.6; direction: ltr; text-align: start;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.st-files { display: flex; flex-direction: column; gap: 1px }
+.st-note { font-size: 12px; color: var(--faint); unicode-bidi: plaintext }
+
+/* ------------------------------- composer ------------------------------- */
+.dock { padding: 10px 22px 18px }
+.composer {
+  max-width: var(--thread-w); margin: 0 auto; background: var(--panel); border: 1px solid var(--line);
+  border-radius: var(--r-xl); box-shadow: var(--pop-shadow); overflow: hidden;
+  transition: border-color var(--t-fast), box-shadow var(--t-fast);
+}
+.composer:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring), var(--pop-shadow) }
+.composer textarea {
+  width: 100%; border: 0; outline: 0; resize: none; background: transparent; color: var(--ink);
+  font-size: var(--fs); line-height: 1.55; padding: 14px 16px 6px; min-height: 50px; max-height: 240px;
+  overflow-y: auto;
+}
+.composer textarea::placeholder { color: var(--faint) }
+.composer.busy { border-left: 2px solid var(--accent) }
+
+/* ------------------------------ the first-run card ------------------------------
+   The four badge pairs are the tone families the pills already ship, all of them measured in
+   tools/check_contrast.py. The word inside the badge is the point rather than the decoration: a row
+   that said only "green" is unreadable for exactly the person who cannot see green. */
+.setup:empty { display: none }
+.setup {
+  margin: 0 0 8px; padding: 10px 12px; background: var(--field); border: 1px solid var(--line);
+  border-radius: var(--r-l); box-shadow: var(--card-shadow); max-height: 42vh; overflow-y: auto;
+}
+.setup-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px }
+.setup-head b { font-size: 13px }
+.setup-tally { font-size: 12px; color: var(--faint); margin-right: auto }
+.setup-row { display: flex; align-items: flex-start; gap: 9px; padding: 6px 0; border-top: 1px solid var(--line-soft) }
+.setup-badge {
+  flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px;
+  border-radius: 999px; border: 1px solid transparent;
+}
+.setup-badge.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line) }
+.setup-badge.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line) }
+.setup-badge.bad { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line) }
+.setup-badge.info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line) }
+.setup-text { font-size: 13px; color: var(--ink-2) }
+.setup-advice { font-size: 12px; color: var(--faint); margin-top: 2px }
+
+/* ------------------------------ the queue strip ------------------------------
+   A queued message runs by itself when the task ends, so the strip is the record of what is
+   about to happen. Colours stay on pairs check_contrast.py already grades: ink-2 and faint on
+   panel, ink-2 on field. */
+.queue { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px }
+.qrow {
+  display: flex; align-items: center; gap: 9px; padding: 6px 10px; font-size: 12.5px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-m);
+}
+.qrow.held { background: var(--warn-bg); border-color: var(--warn-line) }
+.qrow.held .qt, .qrow.held .qwhen { color: var(--warn-ink) }
+.qk { flex: none; color: var(--faint); font-size: 12px }
+.qt {
+  color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.qwhen { flex: none; font-size: 11px; color: var(--faint) }
+.qacts { margin-inline-start: auto; display: flex; gap: 2px; flex: none }
+.qbtn {
+  padding: 3px 8px; border-radius: var(--r-s); font-size: 11.5px; color: var(--faint);
+  transition: background var(--t-fast), color var(--t-fast);
+}
+.qbtn:hover { background: var(--hover); color: var(--accent-text) }
+.qedit {
+  flex: 1; min-width: 0; background: var(--field); border: 1px solid var(--line);
+  border-radius: var(--r-s); padding: 4px 8px; font-family: var(--ui); font-size: 12.5px;
+  color: var(--ink-2);
+}
+.qnote { font-size: 11.5px; color: var(--faint); padding: 0 10px }
+.cbar { display: flex; align-items: center; gap: 7px; padding: 8px 10px 9px 12px; border-top: 1px solid var(--line-soft); flex-wrap: wrap }
+.pill {
+  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 5px 10px; border-radius: 99px;
+  border: 1px solid var(--line); background: var(--panel); font-size: 12px; color: var(--ink-2);
+  transition: background var(--t-fast), border-color var(--t-fast);
+}
+button.pill:hover { background: var(--hover); border-color: var(--line-2) }
+.pill svg { opacity: .6; flex: none }
+.pill.mono { font-family: var(--mono); font-size: 11.5px }
+.pill.soft { border-color: transparent; background: var(--chip) }
+.pill.on { border-color: var(--accent); color: var(--accent-text) }
+.pill .x { opacity: .5; font-size: 13px; line-height: 1 }
+/* The three composer modes reuse pairs the contrast audit already grades: chip ink for prose, the
+   info blue for a folder it will only read, the OK green for "this can change files". */
+.pill.mode { font-weight: 600 }
+.pill.mode.chat { border-color: transparent; background: var(--chip); color: var(--ink-2) }
+.pill.mode.read { border-color: var(--info-line); background: var(--info-bg); color: var(--info-ink) }
+.pill.mode.change { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink) }
+/* A folder sealed by another surface keeps its own badge colour, but the lock is drawn and the border
+   goes dashed: the difference between "I chose this" and "this was chosen for the folder" has to be
+   visible without reading the tooltip. */
+.pill.mode.sealed { border-style: dashed }
+.pill.path { max-width: 300px; overflow: hidden; text-overflow: ellipsis; color: var(--faint) }
+/* The git chip reuses the two pairs the contrast audit already grades: a clean tree is
+   the same green as a passing run, uncommitted work the same amber as an unverified one. */
+.pill.git.clean { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink) }
+.pill.git.dirty { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink) }
+.pill.git b { font-weight: 700; margin-inline-start: 4px }
+/* The restore pill is the one control here that replaces bytes, so it wears the same red as a failed
+   run. That pair is already graded by the contrast audit, so nothing new is being invented. */
+.pill.restore { border-color: var(--bad-line); background: var(--bad-bg); color: var(--bad-ink);
+  font-weight: 600 }
+/* ON is the amber pair the rest of the window already uses for "look at this state", because
+   a folder that writes without asking is exactly that. OFF is the same neutral chip as Chat. */
+.pill.auto.off { border-color: transparent; background: var(--chip); color: var(--ink-2) }
+.pill.auto.on { border-color: var(--warn-line); background: var(--warn-bg); color: var(--warn-ink);
+  font-weight: 600 }
+/* The amber is the same claim the Auto-Apply switch makes, and it stays on the card until the task
+   changes: a write nobody clicked for should not be easy to miss. It is a sentence on its own now —
+   the undo that used to sit inside it is the action bar under the file list. */
+.auto-note { margin: 0 0 9px; padding: 7px 10px; border: 1px solid var(--warn-line);
+  border-radius: var(--r-m); background: var(--warn-bg); color: var(--warn-ink); font-size: 12.5px }
+/* What the Run buttons actually do, written where they are about to be pressed. It used to live in
+   the runner's module docstring, which nobody reads before clicking. */
+.warn { margin-top: 9px; padding: 6px 9px; border: 1px solid var(--warn-line);
+  border-radius: var(--r-m); background: var(--warn-bg); color: var(--warn-ink);
+  font-size: 12px; line-height: 1.45 }
+.pill.path svg { opacity: .5 }
+/* The folder picker's location bar, the drive chips, and the path you can type instead of
+   clicking through to a disk the picker did not start on. */
+.fshead { display: flex; flex-direction: column; gap: 7px; margin-bottom: 9px }
+.fshead .where {
+  font-family: var(--mono); font-size: 11.5px; color: var(--faint); overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap;
+}
+.fshead .jump {
+  width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: var(--r-s);
+  background: var(--panel); color: var(--ink); font-family: var(--mono); font-size: 12px;
+}
+.fshead .jump:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring) }
+.drives { display: flex; flex-wrap: wrap; gap: 6px }
+.drives:empty { display: none }
+button.drive {
+  padding: 4px 10px; border: 1px solid var(--line); border-radius: 99px; background: var(--chip);
+  color: var(--ink-2); font-family: var(--mono); font-size: 11.5px;
+}
+button.drive:hover { border-color: var(--line-2); background: var(--hover) }
+.send {
+  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: var(--accent);
+  color: var(--accent-ink); padding: 7px 15px; border-radius: 99px; font-size: 13px; font-weight: 600;
+  box-shadow: var(--btn-shadow); transition: background var(--t-fast), transform var(--t-fast);
+}
+.send:hover:not(:disabled) { background: var(--accent-hover) }
+.send:active:not(:disabled) { transform: translateY(1px) }
+.send.stop { background: var(--panel); color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-weight: 500; margin-left: 0 }
+.send:disabled { opacity: .45; cursor: not-allowed }
+
+/* ------------------------------ right rail ------------------------------ */
+.rail {
+  background: var(--side); border-left: 1px solid var(--line); padding: 14px 14px 18px; overflow-y: auto;
+  display: flex; flex-direction: column; gap: 12px; min-height: 0;
+}
+.card {
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px;
+  box-shadow: var(--card-shadow);
+}
+.card h5 {
+  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
+  font-weight: 600; margin-bottom: 9px; display: flex; align-items: center; gap: 6px;
+}
+.card .t { font-size: 13.5px; font-weight: 600; letter-spacing: -.1px; line-height: 1.4 }
+.card .d { font-size: 12px; color: var(--faint); line-height: 1.55; margin-top: 4px }
+.hr { height: 1px; background: var(--line); margin: 12px -14px; padding: 0 }
+.link {
+  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); font-weight: 500;
+  padding: 6px 0; border-radius: 6px; cursor: pointer; width: 100%; text-align: left;
+}
+.link:hover { color: var(--ink) }
+.link.quiet { cursor: default; color: var(--faint) }
+.link.quiet:hover { color: var(--faint) }
+.link svg { flex: none; opacity: .6 }
+.link .r { margin-left: auto; color: var(--faint); font-size: 11.5px; font-weight: 400 }
+.state {
+  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px;
+  border-radius: 99px; background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line);
+  margin-bottom: 9px;
+}
+.state.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line) }
+.state.bad { background: var(--bad-bg); color: var(--bad-ink); border-color: var(--bad-line) }
+.state.idle { background: var(--chip); color: var(--faint); border-color: var(--line) }
+.row { display: flex; gap: 8px; align-items: center }
+/* One override row in the drawer: the value the run uses, then who said so. */
+.ovrow { display: flex; gap: 8px; align-items: baseline; padding: 3px 0 }
+.ovrow .ovk { font-variant-numeric: tabular-nums; min-width: 210px }
+.ovrow .ovm { color: var(--faint); font-size: 11.5px; flex: 1 }
+.bar { height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: 9px }
+.bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width var(--t-med) }
+.meta { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); margin-top: 7px; gap: 8px }
+.step { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--ink-2); padding: 4px 0 }
+.step i {
+  width: 15px; height: 15px; border-radius: 99px; border: 1.5px solid var(--line-2); flex: none; margin-top: 1px;
+  display: grid; place-items: center; font-size: 8.5px; font-style: normal; color: var(--faint);
+}
+.step.done i { background: var(--ok); border-color: var(--ok); color: var(--on-ok) }
+.step.now i { border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-ring) }
+.step.now { color: var(--ink); font-weight: 550 }
+.step span { min-width: 0; overflow-wrap: anywhere }
+
+/* ------------------------------ diffs and decisions ------------------------------
+   The Changes pane was deleted in UI 4.0 and its surfaces moved into the rail and the sheet, so
+   this block keeps only what those two still mount: the per-file badge, the tab strip, the diff
+   body and the buttons a change set asks for. The pane's own layout wrappers went with it. */
+.badge {
+  font-size: 10px; font-weight: 700; width: 17px; height: 17px; border-radius: 5px; display: grid;
+  place-items: center; flex: none; background: var(--chip); color: var(--ink-2);
+}
+.badge.M { background: var(--warn-bg); color: var(--warn-ink) }
+.badge.A { background: var(--ok-bg); color: var(--ok-ink) }
+.badge.D { background: var(--bad-bg); color: var(--bad-ink) }
+.dtabs { display: flex; gap: 2px; padding: 7px 9px; border-bottom: 1px solid var(--line); align-items: center; flex: none }
+.dtabs button { padding: 4px 11px; border-radius: 8px; font-size: 12.5px; color: var(--faint); transition: color var(--t-fast) }
+.dtabs button:hover { color: var(--ink-2) }
+.dtabs button.on { background: var(--seg-on); color: var(--ink); font-weight: 550; box-shadow: var(--seg-shadow) }
+.dcode { flex: 1; overflow: auto; font-family: var(--mono); font-size: 12.2px; line-height: 1.65 }
+.dline { display: flex; white-space: pre }
+.dline .ln {
+  width: 40px; flex: none; text-align: right; padding: 0 10px; color: var(--faint); background: var(--code-bar);
+  border-right: 1px solid var(--line); user-select: none; font-size: 11px;
+}
+.dline .tx { padding: 0 12px; flex: 1; min-width: 0 }
+.dline.add .tx { background: var(--add); color: var(--add-ink) }
+.dline.del .tx { background: var(--del); color: var(--del-ink) }
+.dline.hunk .tx { color: var(--faint); background: var(--hunk) }
+.solid {
+  background: var(--accent); color: var(--accent-ink); padding: 8px 16px; border-radius: var(--r-m);
+  font-weight: 600; font-size: 13px; box-shadow: var(--btn-shadow); transition: background var(--t-fast);
+}
+.solid:hover:not(:disabled) { background: var(--accent-hover) }
+.solid:disabled { opacity: .45; cursor: not-allowed; box-shadow: none }
+.line-btn {
+  padding: 8px 14px; border-radius: var(--r-m); border: 1px solid var(--line); background: var(--panel);
+  font-size: 13px; color: var(--ink-2); transition: background var(--t-fast), border-color var(--t-fast);
+}
+.line-btn:hover:not(:disabled) { background: var(--hover); border-color: var(--line-2) }
+.line-btn:disabled { opacity: .45; cursor: not-allowed }
+
+/* ------------------------------ activity view ---------------------------- */
+.logwrap { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px }
+.log {
+  max-width: 900px; margin: 0 auto; font-family: var(--mono); font-size: 12px; line-height: 1.85;
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); padding: 14px 16px;
+  box-shadow: var(--card-shadow);
+}
+.log .r { display: flex; gap: 12px }
+.log .ts { color: var(--faint); flex: none }
+.log .k { color: var(--accent-text); flex: none; font-family: var(--ui); font-size: 11px; padding-top: 1px }
+.log .m { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere }
+/* A streamed build line is transcript, not a status note: tighter, quieter, and LTR like
+   the compiler wrote it, even when the interface is Arabic. */
+.log .r.chunk { line-height: 1.45 }
+.log .r.chunk .m { color: var(--faint); direction: ltr; text-align: start }
+
+/* -------------------------------- toasts -------------------------------- */
+.toasts { position: fixed; right: calc(var(--rail-w) + 22px); bottom: 22px; display: flex; flex-direction: column; gap: 8px; z-index: 60 }
+.toast {
+  display: flex; align-items: center; gap: 10px; background: var(--pop); color: var(--pop-ink); padding: 10px 14px;
+  border-radius: var(--r-m); font-size: 12.5px; box-shadow: var(--pop-shadow); max-width: 460px;
+  animation: toast-in var(--t-med) var(--ease);
+}
+@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(.98) } }
+.toast.out { animation: toast-out 180ms var(--ease) forwards }
+@keyframes toast-out { to { opacity: 0; transform: translateY(6px) } }
+.toast i { width: 7px; height: 7px; border-radius: 99px; background: var(--ok); flex: none }
+.toast.warn i { background: var(--warn) } .toast.bad i { background: var(--bad) }
+.toast button { margin-left: auto; opacity: .6; font-size: 14px; line-height: 1 }
+.toast button:hover { opacity: 1 }
+/* The disconnect notice carries a real action beside its close glyph, so it cannot borrow the
+   14px mark every other toast uses — "Reload" has to read as a word, not a footnote. */
+.toast [data-reload] {
+  font-size: 12.5px; line-height: 1.3; padding: 4px 9px; opacity: 1;
+  border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--ink);
+}
+
+/* -------------------------------- modals -------------------------------- */
+.scrim {
+  position: fixed; inset: 0; background: var(--scrim); display: grid; place-items: center; z-index: 80;
+  animation: fade-in 140ms var(--ease); padding: 24px;
+}
+@keyframes fade-in { from { opacity: 0 } }
+.scrim.out { animation: fade-in 140ms var(--ease) reverse forwards }
+.sheet {
+  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--pop-shadow);
+  width: min(560px, 100%); max-height: 84vh; display: flex; flex-direction: column; overflow: hidden;
+  animation: sheet-in 200ms var(--ease);
+}
+@keyframes sheet-in { from { opacity: 0; transform: translateY(10px) scale(.985) } }
+.sheet.wide { width: min(820px, 100%) }
+.sheet header { padding: 18px 20px 4px }
+.sheet header h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -.2px }
+.sheet header p { font-size: 13px; color: var(--faint); margin-top: 6px; line-height: 1.6; overflow-wrap: anywhere }
+.sheet .content { padding: 14px 20px; overflow-y: auto; min-height: 0 }
+.sheet footer { display: flex; gap: 8px; padding: 14px 20px 18px; justify-content: flex-end; border-top: 1px solid var(--line-soft) }
+.sheet .warnbox {
+  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-ink); padding: 10px 12px;
+  border-radius: var(--r-m); font-size: 12.5px; line-height: 1.55; margin-bottom: 12px;
+}
+/* -------------------------------- module graph -------------------------------- */
+/* The SVG is drawn by app.js from server data, so this layer only paints what the drawing names: no
+   literal colours here either, and the arrows inherit the line token so a dark and a light theme read
+   the same way. */
+.gscroll { overflow: auto; max-width: 100%; margin: 12px 0; border: 1px solid var(--line-soft);
+  border-radius: var(--r-m); background: var(--hover) }
+.graph { display: block }
+.graph .gnode rect { fill: var(--bg); stroke: var(--line-2); stroke-width: 1 }
+.graph .gnode text { font-family: var(--mono); font-size: 11.5px; fill: var(--ink) }
+.graph .gedge { fill: none; stroke: var(--line-2) }
+.graph .ghead { fill: var(--faint); stroke: none }
+.graph .gedge:hover, .graph .gnode:hover rect { stroke: var(--accent) }
+.gmods { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px }
+.gmod b { font-weight: 600 }
+.gmod .mono { font-size: 11.5px }
+/* -------------------------------- project drawer -------------------------------- */
+.mono { font-family: var(--mono) }
+.quiet { color: var(--faint) }
+.small { font-size: 11.5px; line-height: 1.6 }
+.dsec { border-top: 1px solid var(--line-soft); padding: 14px 0 4px; margin-bottom: 6px }
+.dsec:first-child { border-top: 0; padding-top: 2px }
+.dsec h6 { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); margin-bottom: 9px }
+.dsec .pathline { font-size: 12px; color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.5; margin-bottom: 10px }
+.dsec textarea { width: 100%; font-family: var(--ui); font-size: 13px; line-height: 1.6 }
+.meter { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; margin-bottom: 7px }
+.meter .t { font-size: 12.5px; color: var(--ink-2) }
+.meter .v { font-size: 11.5px; color: var(--faint); white-space: nowrap }
+.meter .bar { height: 6px; background: var(--chip); border: 1px solid var(--line-soft); border-radius: 99px; overflow: hidden }
+.meter .bar i { display: block; height: 100%; background: var(--accent) }
+.recipe .g { font-family: var(--mono); overflow-wrap: anywhere; text-align: end; max-width: 46% }
+.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px }
+.field label { font-size: 12px; color: var(--faint); font-weight: 550 }
+.field input, .field textarea, .field select {
+  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-m); padding: 9px 11px;
+  color: var(--ink); outline: 0; font-size: 13px; width: 100%;
+}
+.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring) }
+.field textarea { font-family: var(--ui); line-height: 1.6; resize: vertical; min-height: 120px }
+.field .hint { font-size: 11.5px; color: var(--faint); line-height: 1.5 }
+.switch { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); cursor: pointer; padding: 4px 0 }
+.switch input { width: auto }
+
+/* folder browser */
+.tree { max-height: 46vh; overflow-y: auto; margin: 0 -4px; padding: 0 4px }
+.trow {
+  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: var(--r-s); font-size: 13px;
+  cursor: pointer; color: var(--ink-2);
+}
+.trow:hover { background: var(--hover) }
+.trow .chev { width: 10px; font-size: 9px; color: var(--faint); flex: none }
+.trow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
+.trow.leaf-file { font-family: var(--mono); font-size: 12px }
+
+/* command palette */
+.palette { width: min(600px, 100%); padding: 0 }
+.palette .cmdinput {
+  width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 15px;
+  padding: 17px 20px; border-bottom: 1px solid var(--line);
+}
+.cmdlist { max-height: 46vh; overflow-y: auto; padding: 6px }
+.cmd {
+  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-m); font-size: 13px;
+  color: var(--ink-2); cursor: pointer; width: 100%; text-align: left;
+}
+.cmd .g { margin-left: auto; font-size: 11px; color: var(--faint) }
+.cmd.on { background: var(--sel); color: var(--ink) }
+/* The mode sheet spells each promise out under its row instead of hiding it in a title attribute:
+   which of the three positions refuses to write is the whole decision, and it has to be readable
+   before the click. `faint` on the sheet's own surface is the pair the card labels already use. */
+.cmd-help { padding: 0 12px 10px; font-size: 12px; line-height: 1.45; color: var(--faint) }
+
+/* ------------------------- file chips and the rail preview (UI 3.1) -------------------------
+   A chip is the smallest control that says "this file changed, and you can look". The three pairs
+   these surfaces introduced — ink-2 on field, faint on field, ink-2 on panel — were added to
+   tools/check_contrast.py rather than assumed to inherit the pills' numbers. */
+.chat-task-card {
+  margin-top: 8px; padding: 9px 11px; background: var(--panel); border: 1px solid var(--line);
+  border-radius: var(--r-m); display: flex; flex-direction: column; gap: 8px; max-width: 100%;
+}
+.chat-task-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
+.chat-task-head .quiet { font-size: 12px; color: var(--faint); overflow-wrap: anywhere }
+.chat-file-chips { display: flex; flex-wrap: wrap; gap: 6px }
+.file-chip {
+  display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; font-size: 12.5px;
+  background: var(--field); border: 1px solid var(--line); border-radius: var(--r-s);
+  color: var(--ink-2); transition: background var(--t-fast), border-color var(--t-fast);
+}
+.file-chip:hover { background: var(--hover); border-color: var(--accent) }
+.file-chip .chip-name {
+  font-family: var(--mono); font-size: 12px; direction: ltr; unicode-bidi: isolate;
+  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.chip-tag { font-size: 10.5px; font-weight: 700; padding: 2px 6px; border-radius: 5px; flex: none }
+.chip-tag.created { background: var(--ok-bg); color: var(--ok-ink) }
+.chip-tag.modified { background: var(--warn-bg); color: var(--warn-ink) }
+/* The removal badge. `.badge.D` has had its colour since the diff view; a chip is newer, and a file
+   that is going away wearing an amber "Modified" tag is the one misread worth spending a rule on. */
+.chip-tag.deleted { background: var(--bad-bg); color: var(--bad-ink) }
+.file-chip .chip-action {
+  margin-inline-start: auto; font-size: 11.5px; color: var(--faint); white-space: nowrap;
+}
+.file-chip:hover .chip-action { color: var(--accent-text) }
+
+/* The rail's own file list: the same control as a chip, in the width the card has. */
+.rail-files { display: flex; flex-direction: column; margin-top: 9px; gap: 1px }
+.rfile {
+  display: flex; align-items: center; gap: 8px; padding: 6px 7px; border-radius: var(--r-s);
+  font-size: 12.5px; color: var(--ink-2); text-align: start; transition: background var(--t-fast);
+}
+.rfile:hover { background: var(--hover) }
+.rfile code {
+  font-family: var(--mono); font-size: 11.8px; direction: ltr; unicode-bidi: isolate;
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.rail-preview { display: flex; flex-direction: column; gap: 8px }
+.pv-head { display: flex; align-items: center; gap: 8px }
+.pv-head code {
+  font-family: var(--mono); font-size: 12px; direction: ltr; unicode-bidi: isolate; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.pv-head .num { margin-inline-start: auto; font-family: var(--mono); font-size: 11.5px; display: flex; gap: 7px; flex: none }
+.pv-head .num .p { color: var(--ok) } .pv-head .num .n { color: var(--bad) }
+.pv-note { font-size: 11.5px; color: var(--faint) }
+.pv-tabs { padding: 5px 0; border-bottom: 1px solid var(--line) }
+.pv-tabs button { padding: 3px 9px; font-size: 12px }
+/* The column is 322px and a diff has no natural height, so it scrolls inside the card rather than
+   pushing the Checks and Sources cards out of the window. */
+.pv-body { max-height: 46vh; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--code) }
+.pv-empty { padding: 10px 12px; font-family: var(--ui); font-size: 12px; color: var(--faint) }
+/* Server-built sentences on the Checks tab: the checks the model promised, so prose rather than a
+   diff — mono would read as code that ran. */
+.pv-checks {
+  padding: 10px 12px; font-family: var(--ui); font-size: 12px; line-height: 1.75;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+}
+/* The three decisions about a change set. The pane that held them at pane width is gone, so the
+   rail stacks them full width and the sheet puts them back on one line. */
+.pv-acts { display: flex; flex-direction: column; gap: 7px }
+.pv-acts button { width: 100% }
+.pv-sheet .pv-acts { flex-direction: row; flex-wrap: wrap }
+.pv-sheet .pv-acts button { width: auto; flex: 1 1 auto; min-width: 132px }
+
+/* The change viewer's second surface: below 1180px the rail is display:none, so the same card is
+   mounted in a wide sheet over the chat and gets the height the rail cannot spare. */
+.pv-sheet { display: flex; flex-direction: column; gap: 10px }
+.pv-sheet .pv-body { max-height: 58vh }
+.pv-sheet .pv-body { max-height: 58vh }
+.pv-sheet .pv-acts + .pv-acts { display: none }
+
+/* settings sheet grid */
+.tabs { display: flex; gap: 2px; padding: 0 20px; border-bottom: 1px solid var(--line) }
+.tabs button { padding: 10px 12px; font-size: 13px; color: var(--faint); border-bottom: 2px solid transparent; margin-bottom: -1px }
+.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); font-weight: 550 }
+
+/* skeleton */
+@keyframes sk { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }
+
+/* progress line under the header while busy */
+/* The activity strip: one line under the header saying what the program is doing right now, and
+   after a job ends the last sentence it said. The shimmer is the "something is running" signal at
+   2px; the words are the answer to "what", which used to be written into the header subtitle. */
+.busybar {
+  position: relative; display: flex; align-items: center; min-height: 26px; padding: 0 16px;
+  font-size: 11.5px; color: var(--faint); flex: none; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--line-soft);
+}
+.busybar::after {
+  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  background-size: 200% 100%; animation: sk 1.1s linear infinite;
+}
+.busybar.busy::after { opacity: 1 }
+.hidden { display: none !important }
+/* Transitions are for user-triggered changes only; on launch they animate every token. */
+.booting *, .booting *::before, .booting *::after { transition: none !important; animation: none !important }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
+    transition-duration: .01ms !important; scroll-behavior: auto !important;
+  }
+  .typing i { animation: none !important; opacity: .8 }
+  .busybar::after { animation: none !important }
+}
+
+@media (max-width: 1180px) {
+  .app { grid-template-columns: var(--side-w) minmax(0, 1fr) }
+  .rail { display: none }
+  .toasts { right: 22px }
+}
+@media (max-width: 860px) {
+  .app { grid-template-columns: minmax(0, 1fr) }
+  .side { display: none }
+}