@webship.co/workspace 0.0.0-stage → 1.0.0-beta1

package/public/css/components/terminals.css

@@ -0,0 +1,244 @@
+/* The screen terminals: floating windows, arranged as a list or a grid.
+ *
+ * They are windows and not a modal, and that is the whole design. A modal is one thing at a time, in
+ * the middle, with the page behind it out of reach — the opposite of what watching a terminal is for:
+ * you open one to keep half an eye on it while you do something else, and two to watch two agents. So
+ * each floats, is dragged by its title bar, resizes from its corner, remembers where it was put, and
+ * the bar in the corner tidies them all at once.
+ *
+ * Geometry is set by public/terminal.js as inline styles, because it belongs to the browser that put
+ * the window there. Everything here is what a window LOOKS like, never where it is.
+ */
+
+#term-windows {
+  position: fixed;
+  inset: 0;
+  z-index: 1010;              /* over the page and the rails; under UIkit's modal, which is 1010+ */
+  pointer-events: none;       /* the layer itself is not a surface — only its windows are */
+}
+
+#term-windows > * { pointer-events: auto; }
+
+/* The bar lives in the top bar, beside Screens: one about the sessions running on this machine, one
+   about the terminals open in this browser. It is hidden until there is something to say, so the top
+   bar carries no control for a thing that is not there. */
+#term-bar {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+#term-bar[hidden] { display: none; }
+
+#term-bar .term-count {
+  white-space: nowrap;
+}
+
+/* The two arrange buttons are a pair, and read as one control rather than two loose glyphs. */
+#term-bar .term-arrange { padding: 0 0.45rem; }
+
+.term-window {
+  position: fixed;
+  /* The declared width IS the footprint. UIkit sets border-box on its own components but not on a
+     bare <section> — the same trap the rails hit — so without this every drag re-applied the measured
+     rectangle as a content width and the window grew by its padding and border, 18px at a time. */
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 26rem;
+  min-height: 13rem;
+  padding: 0 0 0.35rem;
+  border: 1px solid var(--term-bar, var(--line));
+  border-radius: 0.6rem;
+  /* The window wears the terminal's own palette, set by terminal.js as custom properties: the title
+     bar, the screen and the hints under it are one object, as they are in a real terminal. */
+  background: var(--term-bg, var(--code-bg));
+  color: var(--term-fg, var(--code-ink));
+  box-shadow: var(--shadow-float);
+  overflow: hidden;
+  container: term / inline-size;
+}
+
+/* Which terminal takes your keystrokes, said twice over: the one in front, and the one with focus.
+   With four windows open and one cursor blinking in each, nothing else answers it. */
+.term-window.is-front { border-color: var(--brand-primary); }
+.term-window:focus-within { border-color: var(--brand-primary); box-shadow: var(--shadow-card-hover); }
+
+.term-window.is-dragging { user-select: none; }
+
+.term-window-head {
+  display: flex;
+  flex-wrap: wrap;            /* a narrow window wraps its controls instead of clipping them */
+  align-items: center;
+  gap: 0.25rem 0.5rem;
+  min-width: 0;
+  padding: 0.35rem 0.5rem;
+  background: var(--term-bar, var(--surface));
+  color: var(--term-bar-ink, var(--text-default));
+  cursor: grab;               /* the title bar is the handle */
+}
+
+.term-window.is-dragging .term-window-head { cursor: grabbing; }
+
+.term-title {
+  flex: 1 1 8rem;
+  font-weight: 600;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.term-window .term-status { white-space: nowrap; font-size: 0.75rem; color: inherit; opacity: 0.7; }
+.term-verbs { margin-left: auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.2rem; }
+
+/* The window's buttons sit on the title bar, so they take its ink and show a button only on hover,
+   as the controls of a header bar do. They are square at every width and grow when there is room. */
+.term-window .term-verbs button.uk-button:not([data-term-font]),
+.term-window .term-verbs a.uk-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  min-width: 0;
+  padding: 0;
+  border-color: transparent;
+  border-radius: 0.4rem;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+}
+.term-window .term-verbs button.uk-button:not([data-term-font]):hover,
+.term-window .term-verbs a.uk-button:hover,
+.term-window .term-verbs .uk-button:focus-visible {
+  background: color-mix(in srgb, currentColor 16%, transparent);
+  color: inherit;
+}
+.term-window .term-verbs .uk-button:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
+.term-window .term-verbs .uk-button svg { width: 1rem; height: 1rem; }
+@container term (min-width: 56rem) {
+  .term-window .term-verbs button.uk-button:not([data-term-font]),
+  .term-window .term-verbs a.uk-button { width: 2rem; height: 2rem; }
+  .term-window .term-verbs .uk-button svg { width: 1.125rem; height: 1.125rem; }
+}
+@container term (max-width: 32rem) {
+  .term-window .term-status { display: none; }
+}
+
+/* The window's controls are not the session's: a hairline says which side of it a button is on, so
+   "close this terminal" and "kill this session" are not two adjacent glyphs of the same weight. */
+.term-verbs-sep {
+  width: 1px;
+  align-self: stretch;
+  margin: 0.15rem 0.2rem;
+  background: var(--line);
+}
+
+/* The two that end something get the colour of what they do, on hover only — a row of red buttons
+   reads as a warning about the terminal itself. */
+.term-window .term-interrupt:hover, .term-window .term-kill:hover { color: var(--danger-text); background: color-mix(in srgb, var(--danger) 20%, transparent); }
+
+.term-screen {
+  flex: 1 1 auto;
+  min-height: 0;              /* a flex child must be allowed to be shorter than its content */
+  padding: 0.35rem 0.6rem;
+  overflow: hidden;
+  background: var(--term-bg, var(--code-bg));
+}
+
+/* The scrollback is screen's, reached with the wheel and the scroll-back button, so xterm's own bar
+   would be a track with nothing to scroll and a pale stripe down the side of a dark screen. */
+.term-screen .xterm-viewport { scrollbar-width: none; }
+.term-screen .xterm-viewport::-webkit-scrollbar { display: none; }
+
+.term-cli-hint { flex: none; margin: 0.15rem 0.6rem 0; }
+/* The dashboard forces the meta ink with !important for contrast on a page surface. Here the surface
+   is the terminal's, so the text takes the terminal's ink, and says so with the same weight. */
+.term-window .uk-text-meta { color: inherit !important; }
+.term-window .term-cli-hint .uk-text-meta,
+.term-window .term-cli-hint summary { opacity: 0.85; }
+/* The disclosure reads as a control: a pill with a chevron that turns when it is open, not a line of
+   text. The terminal's own ink, so it works on every style. */
+.term-window .term-cli-hint summary {
+  display: inline-flex; align-items: center; gap: 0.4rem; list-style: none; cursor: pointer;
+  padding: 0.1rem 0.65rem 0.1rem 0.5rem; border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
+  border-radius: 999px; opacity: 1; user-select: none;
+}
+.term-cli-hint summary::-webkit-details-marker { display: none; }
+.term-cli-hint summary::before {
+  content: ""; width: 0.4rem; height: 0.4rem; margin-left: 0.1rem;
+  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
+  transform: rotate(-45deg); transition: transform 0.15s ease;
+}
+.term-cli-hint[open] summary::before { transform: rotate(45deg); }
+.term-window .term-cli-hint summary:hover { background: color-mix(in srgb, currentColor 16%, transparent); }
+.term-cli-hint summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.term-cli-hint[open] summary { margin-bottom: 0.3rem; }
+@media (prefers-reduced-motion: reduce) { .term-cli-hint summary::before { transition: none; } }
+.term-window .term-cli-hint code { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
+
+/* The menu: size, text size and style, in one place so the title bar stays a title and a few icons. */
+/* base.css underlines every link in a list item; a menu entry is not a link in a paragraph. */
+.term-look-menu li a:not(.uk-button):not(.uk-link-reset) { text-decoration: none; }
+.term-look-menu .term-font-row { display: flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.9rem; }
+.term-look-menu .term-font-size { min-width: 3.25rem; text-align: center; font-variant-numeric: tabular-nums; }
+.term-look-menu [data-term-style] { display: flex; align-items: center; gap: 0.5rem; }
+.term-look-menu [data-term-style].is-on { font-weight: 600; color: var(--brand-primary); }
+.term-swatch {
+  flex: none;
+  display: inline-block;
+  width: 1.5rem;
+  height: 1rem;
+  border: 1px solid var(--line-strong);
+  border-radius: 0.25rem;
+  background: linear-gradient(90deg, var(--sw-ink, var(--brand-primary)) 0 30%, var(--sw-bg, var(--code-bg)) 30%);
+}
+
+/* The corner grip. The CSS resize property needs a scroll container and drags the element's own box,
+   which fights an absolutely placed window — so the drag is terminal.js's and this is its handle. */
+.term-resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 1.1rem;
+  height: 1.1rem;
+  cursor: nwse-resize;
+  background:
+    linear-gradient(135deg, transparent 50%, var(--line-strong) 50%, var(--line-strong) 62%, transparent 62%),
+    linear-gradient(135deg, transparent 72%, var(--line-strong) 72%, var(--line-strong) 84%, transparent 84%);
+}
+
+.term-window.is-full {
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: 0;
+  border-radius: 0;
+  padding: 0.3rem;
+}
+.term-window.is-full .term-cli-hint,
+.term-window.is-full .term-resize { display: none; }
+
+/* Asking for a terminal that is already open raises it rather than opening a second; this is what
+   says so. */
+.term-window.is-flash { animation: term-flash .6s ease-out; }
+@keyframes term-flash {
+  from { box-shadow: 0 0 0 3px var(--brand-primary); }
+  to   { box-shadow: var(--shadow-float); }
+}
+
+/* The session's own tab (/terminal/<name>): one terminal, filling it. Nothing floats, nothing is
+   dragged, and the button that opens a tab has nothing to offer. */
+body.is-terminal-page #term-windows { position: static; }
+body.is-terminal-page #term-bar { display: none; }
+body.is-terminal-page .term-window {
+  position: static;
+  width: auto !important;
+  height: calc(100vh - 7rem) !important;
+  box-shadow: none;
+}
+body.is-terminal-page .term-newtab,
+body.is-terminal-page .term-resize { display: none; }

package/public/css/components/test-report-media-one-file-per-row-paged.css

@@ -0,0 +1,144 @@
+/* ---------- Test-report media: one file per row, paged ---------- */
+
+.test-media-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.test-media-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.3125rem 0.25rem;
+  border-bottom: 1px solid var(--line);
+}
+
+.test-media-row:last-child { border-bottom: 0; }
+
+/* The name is the row's action: it opens the viewer, so it reads as a link, and it truncates
+   rather than wrapping — a webship-js recording name easily runs to 120 characters. */
+.test-media-name {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: none;
+  border: 0;
+  padding: 0;
+  text-align: left;
+  font: inherit;
+  font-size: 0.82rem;
+  color: var(--brand-primary);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.test-media-name:hover { text-decoration: underline; }
+
+.test-media-meta { flex: 0 0 auto; white-space: nowrap; }
+.test-media-actions { flex: 0 0 auto; display: flex; gap: 0.25rem; }
+
+.test-media-pager {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.625rem;
+  margin-top: 0.5rem;
+}
+
+/* The viewer's image: the modal's width, never wider, on its own row. */
+.test-view-image {
+  display: block;
+  width: 100%;
+  height: auto;
+  max-height: 70vh;
+  object-fit: contain;
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+  background: var(--subtle-light);
+}
+
+/* Screenshots: three thumbnails to a row. The thumbnail is the button that opens the viewer. */
+.test-shot-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
+}
+
+.test-shot-card { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
+
+.test-shot-thumb {
+  display: block;
+  padding: 0;
+  border: 1px solid var(--line);
+  border-radius: 0.5rem;
+  background: var(--subtle-light);
+  cursor: zoom-in;
+  overflow: hidden;
+}
+
+.test-shot-thumb img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  transition: transform .12s ease;
+}
+
+.test-shot-thumb:hover img { transform: scale(1.03); }
+
+.test-shot-caption {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.72rem;
+}
+
+.test-shot-meta { font-size: 0.7rem; display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; }
+
+@media (max-width: 47.9375em) {
+  .test-shot-grid { grid-template-columns: repeat(2, 1fr); }
+}
+
+/* Deleting test evidence: the button is small and sits with the file's own metadata, because it
+   belongs to that file — not to the report. The bulk row is above the list, where you look before
+   you start scrolling through 300 thumbnails. */
+.test-media-bulk {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.test-shot-meta .test-media-del,
+.test-media-actions .test-media-del { padding: 0 0.4rem; line-height: 1.6; }
+
+.test-media-flash { margin-bottom: 0.5rem; }
+
+/* A menu that carries a state word — Graph, RAG, Tests — captions it UNDER the button.
+   The caption sits in an OUTER wrapper, never inside the .uk-inline element: UIkit positions the
+   dropdown panel against that element, and making it a flex column turned the panel into a flex
+   item, which laid it out in flow and stopped the menus opening. */
+.act-with-status {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1rem;
+}
+
+.act-with-status .act-status {
+  font-size: 0.625rem;
+  line-height: 1;
+  letter-spacing: .02em;
+  color: var(--text-subtle);
+}
+
+.project-actions { align-items: flex-start; }

package/public/css/components/top-toolbar-logo-breadcrumb.css

@@ -0,0 +1,107 @@
+/* ---------- Top toolbar (logo) ---------- */
+
+/* `.uk-navbar-container.toolbar`, not `.toolbar`: UIKit paints this element with
+   `.uk-navbar-container:not(.uk-navbar-transparent)`, which is (0,2,0) — a lone
+   `.toolbar` at (0,1,0) never won, and the toolbar kept UIKit's own near-white in
+   both halves. It went unseen in the light half, where near-white and white differ
+   by almost nothing; in the dark half it was a white bar over a dark page. */
+.uk-navbar-container.toolbar {
+  background: var(--surface-card);
+  border-bottom: 1px solid var(--line);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+
+.toolbar-logo {
+  gap:0.5rem;
+  font-weight: 700;
+  color: var(--ink) !important;
+  font-size:1.0625rem;
+  text-transform: none;
+}
+
+.toolbar-logo img { border-radius:0.5rem; }
+
+.toolbar-logo span { font-size:1.25rem; }
+
+/* Compact page heading under the toolbar */
+.page-heading { gap:0.75rem; margin-bottom:1.125rem; }
+
+.page-heading-icon {
+  width:2.875rem;
+  height:2.875rem;
+  min-width:2.875rem;
+  border-radius:0.75rem;
+  background: var(--subtle-brand);
+  color: var(--brand-1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* The page title takes the H2 role rather than a size of its own: a dashboard heading over a
+   project table should not be the landing page's 62px h1, but it should still come from the
+   scale. A hardcoded 1.625rem here is how a heading stops tracking the design. */
+.page-heading h1 { font: var(--type-h2); letter-spacing: var(--tracking-h2); }
+
+/* The light/dark switch in the toolbar.
+ *
+ * These rules used to live in the default theme's file, which meant the only theme that styled
+ * the toggle was the default one: on Ember or Slate the button fell back to UIKit's own button
+ * chrome and the sun/moon swap still worked but looked borrowed. A theme is a palette — the
+ * control belongs to the toolbar, so it lives here and reads tokens like everything else. */
+.theme-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--ink);
+  padding: 0 0.375rem;
+}
+
+.theme-toggle:hover { color: var(--link); }
+
+/* One icon at a time: the sun is the way OUT of dark, so it only shows there. */
+.theme-icon-sun { display: none; }
+html.dark .theme-icon-sun { display: inline; }
+html.dark .theme-icon-moon { display: none; }
+
+/* The Webship lockup.
+ *
+ * One rule, in the component that owns the toolbar: the height was set in two other components at
+ * two different values (2rem and 1.375rem), so which one applied depended on the order the sheet
+ * was assembled in. `object-fit: contain` is the guard — UIKit's reset puts `object-fit: cover` on
+ * every img, which crops rather than scales the moment the box and the artwork disagree by a
+ * fraction, and a cropped logo is a brand error rather than a layout one. `width: auto` keeps the
+ * ratio the artwork's own. */
+.brand-logo {
+  display: block;
+  height: 2.25rem;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+}
+
+/* UIKit gives .uk-logo a system font stack and its own grey. The lockup beside it is the brand's,
+   so the word next to it is set in the brand face and the theme's ink. */
+.toolbar-logo, .toolbar-logo:hover { font-family: var(--font-primary); color: var(--text-default); }
+
+/* The release, beside the product name. Quiet by default — it is reference, not navigation —
+ * and explicitly marked when it cannot be told, because a missing version must read as
+ * missing rather than as nothing at all. */
+/* The exposure banner. Deliberately the danger colour and deliberately not dismissible: it
+ * appears only when the machine has stopped being loopback-only, and the dashboard has no
+ * login to protect what is then reachable. */
+.exposure-banner {
+  background: var(--danger-soft);
+  color: var(--danger-ink);
+  border: 1px solid var(--danger);
+  border-radius: 10px;
+  padding: .6rem .85rem;
+  margin: 0 0 1rem;
+  font-size: .8125rem;
+  line-height: 1.45;
+}
+
+.exposure-banner strong { display: block; margin-bottom: .25rem; color: var(--danger); }
+.exposure-banner code { background: transparent; }

package/public/css/components/video-edit.css

@@ -0,0 +1,6 @@
+/* Edit a video: a tab per kind of change, then the fields of that tab. */
+.video-edit-tabs { margin: 0.25rem 0 0.75rem; flex-wrap: wrap; gap: 0.25rem; }
+.video-edit-side { border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.75rem; margin: 0 0 0.75rem; }
+.video-edit-side legend { padding: 0 0.375rem; }
+.video-edit-sections { max-height: 12rem; overflow: auto; margin: 0 0 1rem; }
+.video-edit-sections label { display: flex; align-items: baseline; gap: 0.5rem; }

package/public/css/components/web-ide-open-with.css

@@ -0,0 +1,23 @@
+/* The "Codebase" / "Files" menu: the Web IDE here, or an editor on the viewer's machine.
+ *
+ * Painted with tokens only — a unit test enforces that (a literal cannot be themed). */
+
+/* The unavailable note is a sentence with two commands in it, not a menu item, so it must
+ * be allowed to wrap inside the dropdown instead of stretching it to the width of the
+ * longest command. */
+.ide-unavailable {
+  display: block;
+  max-width: 22rem;
+  padding: .25rem .5rem .4rem;
+  white-space: normal;
+  line-height: 1.4;
+}
+
+.ide-unavailable code {
+  white-space: nowrap;
+  word-break: keep-all;
+}
+
+/* On a files workspace the control sits under the heading rather than in a row, so it
+ * needs the row's spacing of its own. */
+.items-open-with { display: flex; gap: .5rem; align-items: center; }

package/public/css/components/working-indicators.css

@@ -0,0 +1,158 @@
+/* ---------- Working indicators ---------- */
+
+/* Thin animated bar across the top + a floating pill, shown while ANY
+ * HTMX request is in flight (ui.js toggles html.htmx-busy). */
+.global-working { display: none; }
+
+html.htmx-busy .global-working { display: block; }
+
+.global-working-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height:0.1875rem;
+  z-index: 50;
+  background: var(--brand-grad);
+  background-size: 200% 100%;
+  animation: working-slide 1.2s linear infinite;
+}
+
+@keyframes working-slide {
+  from { background-position: 200% 0; }
+  to { background-position: 0 0; }
+}
+
+.global-working-pill {
+  position: fixed;
+  right:1.125rem;
+  bottom:1.125rem;
+  z-index: 50;
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  border-radius:62.4375rem;
+  padding:0.5rem 1rem;
+  font-size:0.8125rem;
+  font-weight: 600;
+  /* --busy-ink, not the brand navy: the pill sits on the card surface, and in dark mode that navy on
+     a dark card measured below AA. The busy token is the one that moves with the theme. */
+  color: var(--busy-ink);
+  box-shadow: 0 8px 22px rgba(35, 41, 70, .18);
+  display: flex;
+  align-items: center;
+  gap:0.5rem;
+}
+
+/* Chat "assistant is thinking…" indicator (shown via hx-indicator) */
+.chat-typing {
+  display: none;
+  align-items: center;
+  gap:0.3125rem;
+  margin-top:0.625rem;
+  padding:0.5rem 0.875rem;
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  border-radius:0.75rem;
+  width: fit-content;
+}
+
+.chat-typing.htmx-request { display: flex; }
+
+.chat-typing .dot {
+  width:0.4375rem;
+  height:0.4375rem;
+  border-radius: 50%;
+  background: var(--brand-2);
+  animation: typing-bounce 1.2s infinite;
+}
+
+.chat-typing .dot:nth-child(2) { animation-delay: .18s; }
+.chat-typing .dot:nth-child(3) { animation-delay: .36s; }
+
+@keyframes typing-bounce {
+  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
+  30% { transform: translateY(-5px); opacity: 1; }
+}
+
+.chat-typing-label {
+  font-size:0.75rem;
+  color: var(--brand-2);
+  font-weight: 600;
+  margin-left:0.25rem;
+}
+
+
+/* Assistant sparkle logo mark */
+.assistant-avatar .ai-mark { width:1.5rem; height:1.5rem; display: block; }
+
+.assistant-launcher {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.assistant-launcher .ai-mark { width:1.75rem; height:1.75rem; }
+
+/* Small backups indicator on workspace cards (home page) */
+.workspace-card { position: relative; }
+
+.ws-backups {
+  position: absolute;
+  top:0.625rem;
+  right:0.75rem;
+  z-index: 2;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap:0.1875rem;
+  font-size:0.6875rem;
+  font-weight: 700;
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+  border-radius:62.4375rem;
+  padding:0.125rem 0.5rem;
+}
+
+.ws-backups:hover { background: var(--brand-2); color: var(--text-inverse); text-decoration: none; }
+
+/* Live terminal output boxes */
+.terminal .terminal-pre {
+  background: var(--code-bg);
+  color: var(--terminal-ink);
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+  max-height:20rem;
+  overflow-y: auto;
+}
+
+/* VDO drop logo on the home hero */
+.site-logo {
+  display: block;
+  margin: 0 auto;
+  width:6rem;
+  height:6rem;
+  filter: drop-shadow(0 8px 18px rgba(35, 41, 70, .25));
+}
+
+/* The assistant while it works on an answer: the avatar pulses and a light sweeps along the header. */
+.assistant-panel[data-working] .assistant-head { position: relative; }
+.assistant-panel[data-working] .assistant-head::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0.1875rem;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent) -40% 0 / 40% 100% no-repeat;
+  animation: assistant-sweep 1.4s linear infinite;
+}
+.assistant-panel[data-working] .assistant-avatar { animation: assistant-pulse 1.4s ease-in-out infinite; }
+
+@keyframes assistant-sweep { to { background-position: 140% 0; } }
+@keyframes assistant-pulse {
+  50% { transform: scale(1.08); box-shadow: 0 0 0 0.375rem rgba(255, 255, 255, .18); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .assistant-panel[data-working] .assistant-head::after,
+  .assistant-panel[data-working] .assistant-avatar { animation: none; }
+}