@bill10/agent-007 0.6.2

package/public/style.css

@@ -0,0 +1,1843 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+/* Default theme: Cool Steel */
+:root {
+  color-scheme: dark;
+  --bg-dark: #090a0c;
+  --bg-panel: #0f1114;
+  --bg-office: #131519;
+  --bg-terminal: #07080a;
+  --bg-tabs: #0d0e11;
+  --border: #1f2228;
+  --text: #d8dce4;
+  --text-muted: #9ca3af;
+  --text-dim: #6b7280;
+  --accent: #d4a847;
+  --accent-contrast: #111;
+  --hover: rgba(255,255,255,0.05);
+  --state-working: #d4a847;
+  --state-waiting: #7fbc6a;
+  --state-message: #e0853a;
+  --state-idle: #4a4e58;
+  --state-disconnected: #c44040;
+  --state-recording: #c44040;
+}
+
+/* Theme: Light — warm low-glare paper (Flexoki-style neutrals).
+   Surfaces sit in the cream band (~L*90) instead of near-white so long
+   terminal sessions don't glare; ink is warm near-black, not pure gray. */
+[data-theme="light"] {
+  color-scheme: light;
+  --bg-dark: #e6e4d9;
+  --bg-panel: #f2f0e5;
+  --bg-office: #dad8ce;
+  --bg-terminal: #f2f0e5;
+  --bg-tabs: #e6e4d9;
+  --border: #c6c3b6;
+  --text: #1c1b1a;
+  --text-muted: #62615c;
+  --text-dim: #6b6a64;
+  --accent: #7d611f;
+  --accent-contrast: #fff;
+  --hover: rgba(0,0,0,0.05);
+  --state-working: #8c6200;
+  --state-waiting: #1a7f37;
+  --state-message: #aa540f;
+  --state-idle: #7b7973;
+  --state-disconnected: #c8222e;
+  --state-recording: #c8222e;
+}
+
+/* Focus visibility — keyboard users get a visible ring */
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+body {
+  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
+  background: var(--bg-dark);
+  color: var(--text);
+  height: 100vh;
+  height: 100dvh; /* mobile Safari: 100vh includes the hidden address bar */
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Top bar */
+/* Panel headers (continuous top bar via per-panel headers) */
+.panel-header {
+  height: 36px;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 8px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-dark);
+}
+.office-header {
+  justify-content: center;
+}
+.terminal-header {
+  justify-content: space-between;
+}
+.app-logo {
+  vertical-align: -2px;
+  margin: 0 2px;
+}
+.topbar-title {
+  color: var(--accent);
+  font-weight: bold;
+  font-size: 14px;
+  letter-spacing: 1px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.topbar-btn {
+  background: none;
+  border: none;
+  color: var(--text);
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  /* Two buttons now share this header, and it can be dragged down to 160px.
+     Without nowrap the labels wrap and get clipped by the 36px header. */
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+.topbar-btn:hover { color: var(--accent); }
+/* Primary action — give it button chrome so it reads as a CTA, not a label. */
+#btn-new-agent, #btn-new-job-shortcut {
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text);
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+#btn-new-agent:hover, #btn-new-job-shortcut:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  background: color-mix(in srgb, var(--accent) 8%, transparent);
+}
+.topbar-agent-info {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+}
+.topbar-repo-label {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.topbar-repo-name {
+  color: var(--text);
+  font-size: 12px;
+  font-weight: 600;
+}
+.topbar-branch-icon {
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+.topbar-branch-name {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+.topbar-status {
+  margin-left: auto;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+
+/* Round icon buttons (theme toggle, voice input) */
+.icon-btn {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s;
+  padding: 0;
+}
+.icon-btn:hover { color: var(--text); border-color: var(--text-dim); }
+
+/* Voice input */
+/* Fab geometry is the single source for the pill's placement below AND the
+   presence pill's stacking (presence is a body-level fixed element, so these
+   live on :root to reach it). right clears xterm's scrollbar on
+   classic-scrollbar platforms too (4px container padding + ~16px track). */
+:root {
+  --voice-fab-right: 20px;
+  --voice-fab-bottom: 12px;
+  --voice-fab-size: 34px;
+  /* fab top edge + pill row (~26px) + 2 gaps of 8px */
+  --voice-column-top: calc(var(--voice-fab-bottom) + var(--voice-fab-size) + 42px);
+}
+/* Floating mic, anchored next to the prompt line at the terminal's bottom.
+   Opaque bg so it reads as a control, not terminal text. */
+.voice-fab {
+  position: absolute;
+  right: var(--voice-fab-right);
+  bottom: var(--voice-fab-bottom);
+  width: var(--voice-fab-size);
+  height: var(--voice-fab-size);
+  background: var(--bg-panel);
+  z-index: 10;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+}
+#btn-voice.listening {
+  color: var(--state-recording);
+  border-color: var(--state-recording);
+  animation: mic-pulse 1.6s ease-in-out infinite;
+}
+@keyframes mic-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+/* Anchored to the mic so the reaction appears where the user clicked, but
+   stacked one row ABOVE the fab: the terminal's last row is where dictated
+   keystrokes echo — the pill must never hide that feedback. Grows leftward. */
+.voice-indicator {
+  position: absolute;
+  right: var(--voice-fab-right);
+  bottom: calc(var(--voice-fab-bottom) + var(--voice-fab-size) + 8px);
+  max-width: calc(100% - 2 * var(--voice-fab-right));
+  padding: 5px 14px;
+  border-radius: 14px;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 12px;
+  z-index: 10;
+  align-items: center;
+  gap: 7px;
+  pointer-events: none;
+  animation: pill-in 0.15s ease-out;
+}
+@keyframes pill-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: none; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .voice-indicator,
+  .voice-indicator-dot,
+  #btn-voice.listening { animation: none; }
+}
+.voice-indicator-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--state-recording);
+  animation: mic-pulse 1.6s ease-in-out infinite;
+  flex-shrink: 0;
+}
+.voice-indicator-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.voice-indicator.error {
+  color: var(--state-disconnected);
+  border-color: var(--state-disconnected);
+}
+/* The dot means "recording" — never show it on post-stop notices or errors */
+.voice-indicator.error .voice-indicator-dot,
+.voice-indicator.notice .voice-indicator-dot { display: none; }
+
+/* Visually-hidden live region for screen-reader announcements */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+/* Spawn form */
+.spawn-form {
+  position: absolute;
+  top: 40px;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: rgba(0,0,0,0.6);
+  display: flex;
+  justify-content: center;
+  padding: 16px;
+}
+.spawn-form-inner {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.spawn-form-main {
+  display: flex;
+  gap: 12px;
+  align-items: flex-end;
+}
+.spawn-form-inner label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.spawn-form-inner input {
+  background: var(--bg-dark);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 6px 10px;
+  font-family: inherit;
+  font-size: 13px;
+  border-radius: 4px;
+  width: 160px;
+}
+.spawn-form-inner input:focus { border-color: var(--accent); }
+.spawn-repo-label { position: relative; }
+.spawn-repo-wrapper { position: relative; }
+.spawn-repo-wrapper { display: flex; }
+.spawn-repo-wrapper input { width: 240px; border-radius: 4px 0 0 4px; }
+.spawn-browse-btn {
+  background: var(--bg-dark);
+  border: 1px solid var(--border);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
+  color: var(--text-dim);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 8px;
+  line-height: 1;
+  transition: border-color 0.15s, color 0.15s;
+}
+.spawn-browse-btn:hover { border-color: var(--accent); color: var(--accent); }
+.repo-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: var(--bg-dark);
+  border: 1px solid var(--border);
+  border-radius: 0 0 4px 4px;
+  max-height: 150px;
+  overflow-y: auto;
+  z-index: 110;
+}
+.repo-dropdown-item {
+  padding: 6px 10px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.repo-dropdown-item:hover { background: var(--hover); }
+.repo-dropdown-slug {
+  color: var(--text);
+  font-size: 12px;
+}
+.repo-dropdown-path {
+  color: var(--text-dim);
+  font-size: 10px;
+}
+.spawn-presets { display: flex; gap: 8px; }
+.spawn-preset-btn {
+  padding: 6px 14px;
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+  background: var(--bg-dark);
+  color: var(--text-dim);
+  transition: border-color 0.15s, color 0.15s;
+}
+.spawn-preset-btn:hover { border-color: var(--accent); color: var(--text); }
+.spawn-preset-btn.selected { border-color: var(--accent); color: var(--accent); }
+.spawn-advanced-toggle {
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+  align-self: flex-end;
+}
+.spawn-advanced-toggle:hover { color: var(--text); }
+.spawn-advanced {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 0 0;
+  border-top: 1px solid var(--border);
+}
+.spawn-form-error {
+  font-size: 12px;
+  color: var(--state-disconnected);
+  background: rgba(255, 80, 80, 0.08);
+  border: 1px solid var(--state-disconnected);
+  border-radius: 4px;
+  padding: 6px 10px;
+  word-break: break-word;
+}
+.spawn-form-actions { display: flex; gap: 8px; }
+.spawn-form-actions button {
+  padding: 6px 16px;
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.spawn-form-actions button:first-child {
+  background: var(--accent);
+  color: var(--accent-contrast);
+  border-color: var(--accent);
+  font-weight: bold;
+}
+.spawn-form-actions button.secondary {
+  background: transparent;
+  color: var(--text-dim);
+}
+
+/* Directory browser modal */
+.dir-browser-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 150;
+  background: rgba(0,0,0,0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.dir-browser-inner {
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  width: 520px;
+  max-height: 70vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.dir-browser-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.dir-browser-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: var(--accent);
+}
+.dir-browser-close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 18px;
+  cursor: pointer;
+  padding: 0 4px;
+  line-height: 1;
+}
+.dir-browser-close:hover { color: var(--text); }
+.dir-browser-path {
+  padding: 8px 16px;
+  font-size: 12px;
+  color: var(--text-dim);
+  background: var(--bg-dark);
+  border-bottom: 1px solid var(--border);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: inherit;
+}
+.dir-browser-list {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 200px;
+  max-height: 50vh;
+}
+.dir-browser-list::-webkit-scrollbar { width: 4px; }
+.dir-browser-list::-webkit-scrollbar-track { background: transparent; }
+.dir-browser-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+.dir-browser-entry {
+  padding: 6px 16px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text);
+  transition: background 0.1s;
+}
+.dir-browser-entry:hover { background: var(--hover); }
+.dir-browser-entry.is-git { color: var(--accent); }
+.dir-browser-entry-icon { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
+.dir-browser-entry-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dir-browser-git-badge {
+  font-size: 9px;
+  background: var(--accent);
+  color: var(--bg-dark);
+  padding: 1px 5px;
+  border-radius: 8px;
+  font-weight: bold;
+  flex-shrink: 0;
+}
+.dir-browser-empty {
+  padding: 20px 16px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 12px;
+}
+.dir-browser-error {
+  padding: 12px 16px;
+  color: var(--state-disconnected);
+  font-size: 12px;
+}
+.dir-browser-actions {
+  padding: 12px 16px;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  border-top: 1px solid var(--border);
+}
+.dir-browser-actions button {
+  padding: 6px 16px;
+  font-family: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  border-radius: 4px;
+  border: 1px solid var(--border);
+}
+.dir-browser-actions button:first-child {
+  background: var(--accent);
+  color: var(--accent-contrast);
+  border-color: var(--accent);
+  font-weight: bold;
+}
+.dir-browser-actions button:first-child:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+.dir-browser-actions button.secondary {
+  background: transparent;
+  color: var(--text-dim);
+}
+
+/* Main layout */
+.main {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+/* Explorer panel */
+.explorer {
+  width: 220px;
+  min-width: 180px;
+  background: var(--bg-panel);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  transition: width 200ms ease-out;
+  overflow: hidden;
+}
+.explorer.collapsed {
+  width: 0 !important;
+  min-width: 0;
+  border-right: none;
+  overflow: hidden;
+}
+.explorer-header {
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+  background: var(--bg-dark);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.explorer-label {
+  font-size: 9px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 2px;
+}
+.add-repo-bar {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-dark);
+}
+.add-repo-bar input {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 4px 8px;
+  font-family: inherit;
+  font-size: 11px;
+  border-radius: 3px;
+}
+.add-repo-bar input:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+.add-repo-browse {
+  background: none;
+  border: 1px solid var(--border);
+  color: var(--text-dim);
+  cursor: pointer;
+  padding: 4px 6px;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+}
+.add-repo-browse:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+.explorer-header-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.explorer-reopen-btn {
+  background: var(--bg-panel);
+  border: none;
+  border-right: 1px solid var(--border);
+  color: var(--text-dim);
+  font-size: 10px;
+  cursor: pointer;
+  padding: 0 4px;
+  width: 18px;
+  flex-shrink: 0;
+  transition: color 0.15s, background 0.15s;
+}
+.explorer-reopen-btn:hover { color: var(--accent); background: var(--bg-dark); }
+.explorer-content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.explorer-content::-webkit-scrollbar { width: 4px; }
+.explorer-content::-webkit-scrollbar-track { background: transparent; }
+.explorer-content::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+
+/* Explorer: repo sections */
+.explorer-repo {
+  border-bottom: 1px solid var(--border);
+}
+.explorer-repo + .explorer-repo {
+  margin-top: 8px;
+}
+.explorer-repo-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  background: var(--bg-dark);
+  font-size: 13px;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  cursor: pointer;
+}
+.explorer-repo-header:hover { background: var(--bg-panel); }
+.explorer-repo-name {
+  color: var(--text);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.explorer-collapsed-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-weight: normal;
+  color: var(--text-dim);
+}
+.explorer-repo-actions {
+  display: flex;
+  gap: 4px;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.explorer-repo-header:hover .explorer-repo-actions { opacity: 1; }
+.explorer-icon-btn {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 0;
+  width: 22px;
+  height: 22px;
+  line-height: 22px;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+.explorer-icon-btn:hover { color: var(--accent); }
+.explorer-remove-btn:hover { color: var(--state-disconnected); }
+.explorer-error-badge {
+  font-size: 9px;
+  color: var(--state-disconnected);
+  margin-left: 6px;
+}
+
+/* Explorer: branches */
+.explorer-no-agents {
+  padding: 6px 16px;
+  color: var(--text-dim);
+  font-size: 11px;
+  font-style: italic;
+}
+.explorer-branch-wrapper {
+  /* wrapper for branch + its file tree */
+}
+.explorer-branch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  min-height: 28px;
+  border-left: 2px solid transparent;
+  transition: background 0.1s;
+}
+.explorer-branch:hover { background: var(--hover); }
+.explorer-branch.active {
+  background: var(--bg-terminal);
+  border-left-color: var(--accent);
+}
+.explorer-toggle-arrow {
+  font-size: 9px;
+  color: var(--text-dim);
+  width: 10px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.explorer-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+/* Billion's row, pinned above the repos */
+.explorer-billion-name { color: var(--text); font-weight: 600; }
+/* The one way back for a stopped Billion, so it reads as the row's action. */
+.explorer-billion-start { margin-left: auto; color: var(--accent); }
+
+.explorer-branch-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text-muted);
+}
+.explorer-branch-label {
+  color: var(--text-dim);
+  font-size: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-left: 6px;
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+/* Explorer: orphan entries */
+.explorer-orphan {
+  opacity: 0.7;
+  border-left: 2px solid var(--state-message);
+}
+.orphan-badge {
+  color: var(--state-message);
+  font-size: 10px;
+  margin-left: 6px;
+}
+.explorer-orphan-actions {
+  display: flex;
+  gap: 4px;
+  padding: 2px 10px 4px 28px;
+}
+.explorer-orphan-actions button {
+  font-size: 10px;
+  font-family: inherit;
+  padding: 2px 8px;
+  cursor: pointer;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+  background: transparent;
+  color: var(--text-dim);
+  transition: border-color 0.15s, color 0.15s;
+}
+.explorer-orphan-actions button:hover {
+  border-color: var(--accent);
+  color: var(--text);
+}
+.explorer-orphan-actions .orphan-delete-btn:hover {
+  border-color: var(--state-disconnected);
+  color: var(--state-disconnected);
+}
+
+/* Explorer: tree mode toggle switch */
+/* Dedicated row so the changes/all filter doesn't overlap the first file row. */
+.explorer-tree-toggle-row {
+  display: flex;
+  justify-content: flex-end;
+  padding: 4px 8px 4px 0;
+}
+.explorer-tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  font-size: 9px;
+  flex-shrink: 0;
+  gap: 0;
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 3px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+}
+.explorer-tree-toggle-opt {
+  padding: 1px 5px;
+  color: var(--text-dim);
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.12s, background 0.12s;
+}
+.explorer-tree-toggle-opt:hover {
+  color: var(--text);
+}
+.explorer-tree-toggle-opt.active {
+  color: var(--accent);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* Explorer: file tree */
+.explorer-file-tree {
+  max-height: 400px;
+  overflow-y: auto;
+  transition: max-height 150ms ease-out;
+}
+.explorer-dir {
+  padding: 2px 10px;
+  font-size: 11px;
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.explorer-dir:hover { color: var(--text); }
+.explorer-file {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  font-size: 11px;
+  cursor: pointer;
+  min-height: 24px;
+}
+.explorer-file:hover { background: var(--hover); }
+.explorer-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.explorer-filename {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--text);
+}
+.explorer-conflict {
+  color: var(--state-working);
+  font-size: 12px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+
+/* Explorer: diff viewer */
+.explorer-diff-loading {
+  padding: 6px 10px;
+  font-size: 10px;
+  color: var(--text-dim);
+  animation: pulse 1.5s infinite;
+}
+@keyframes pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+.explorer-diff {
+  background: var(--bg-terminal);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 6px 8px;
+  font-size: 10px;
+  line-height: 1.5;
+  max-height: 300px;
+  overflow: auto;
+  margin: 4px 10px 6px;
+  white-space: pre;
+}
+.explorer-diff .diff-add { color: #98c379; background: rgba(26, 58, 26, 0.5); }
+.explorer-diff .diff-del { color: #e06c75; background: rgba(58, 26, 26, 0.5); }
+/* The dark add/del pair composites to mud on the cream light theme */
+[data-theme="light"] .explorer-diff .diff-add,
+[data-theme="light"] .diff-viewer-content .diff-add { color: #116329; background: rgba(26, 127, 55, 0.12); }
+[data-theme="light"] .explorer-diff .diff-del,
+[data-theme="light"] .diff-viewer-content .diff-del { color: #a40e26; background: rgba(200, 34, 46, 0.10); }
+.explorer-diff .diff-hunk { color: var(--accent); }
+.explorer-diff .diff-empty { color: var(--text-dim); font-style: italic; }
+
+/* Diff viewer (replaces office canvas in center panel) */
+.diff-viewer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  z-index: 2;
+}
+.diff-viewer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-dark);
+  flex-shrink: 0;
+}
+.diff-viewer-path {
+  font-size: 12px;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.diff-viewer-close {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  font-size: 16px;
+  cursor: pointer;
+  padding: 2px 6px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.diff-viewer-close:hover { color: var(--text); }
+.diff-viewer-content {
+  flex: 1;
+  overflow: auto;
+  padding: 10px 14px;
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1.6;
+  color: var(--text-dim);
+  margin: 0;
+  white-space: pre;
+  tab-size: 4;
+}
+.diff-viewer-content .diff-add { color: #98c379; background: rgba(26, 58, 26, 0.5); }
+.diff-viewer-content .diff-del { color: #e06c75; background: rgba(58, 26, 26, 0.5); }
+.diff-viewer-content .diff-hunk { color: var(--accent); }
+.diff-viewer-content .diff-empty { color: var(--text-dim); font-style: italic; }
+
+/* Explorer: add repo */
+.explorer-empty {
+  padding: 20px 10px;
+  text-align: center;
+  color: var(--text-dim);
+  font-size: 11px;
+}
+
+/* Office panel */
+.office {
+  width: 440px;
+  min-width: 160px;
+  max-width: 80vw;
+  background: var(--bg-office);
+  position: relative;
+  overflow: hidden;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+.office-label {
+  position: absolute;
+  top: 8px;
+  left: 10px;
+  font-size: 9px;
+  color: rgba(255,255,255,0.15);
+  text-transform: uppercase;
+  letter-spacing: 3px;
+  pointer-events: none;
+}
+/* White watermark is invisible on the light office canvas */
+[data-theme="light"] .office-label { color: rgba(0,0,0,0.14); }
+#office-canvas {
+  width: 100%;
+  flex: 1;
+  min-height: 0; /* else the h*dpr height attribute becomes the flex minimum and the canvas grows every frame on HiDPI */
+  display: block;
+  image-rendering: pixelated;
+}
+.office-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-dim);
+  font-size: 14px;
+  /* Passive text overlay — must not intercept clicks on the header's
+     "+ New Agent" button, which sits beneath it when the office is empty. */
+  pointer-events: none;
+}
+.office-empty .dim { font-size: 12px; color: var(--text-dim); }
+
+/* Divider */
+.divider {
+  width: 5px;
+  background: linear-gradient(to bottom, var(--bg-dark) 36px, var(--border) 36px);
+  cursor: col-resize;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+.divider:hover, .divider.dragging { background: var(--accent) !important; }
+
+/* Terminal panel */
+.terminal-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-terminal);
+  min-width: 300px;
+  overflow: hidden;
+}
+
+/* Terminal tabs */
+.terminal-tabs {
+  display: flex;
+  background: var(--bg-tabs);
+  border-bottom: 1px solid var(--border);
+  height: 34px;
+  flex-shrink: 0;
+  overflow-x: auto;
+}
+.terminal-tabs::-webkit-scrollbar { display: none; }
+.terminal-tab {
+  padding: 0 16px;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--text-dim);
+  border-right: 1px solid var(--border);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+  transition: background 0.15s;
+  position: relative;
+}
+.terminal-tab:hover { background: var(--hover); }
+.terminal-tab.active {
+  color: var(--text);
+  background: var(--bg-terminal);
+}
+.terminal-tab.active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--accent);
+}
+.terminal-tab.dragging {
+  opacity: 0.4;
+}
+.terminal-tab .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.terminal-tab .close-btn {
+  margin-left: 4px;
+  opacity: 0;
+  color: var(--text-dim);
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.terminal-tab:hover .close-btn { opacity: 0.7; }
+.terminal-tab .close-btn:hover { opacity: 1; color: var(--state-disconnected); }
+
+/* Drop overlay */
+.upload-drop-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.7);
+  border: 2px dashed var(--accent);
+  border-radius: 4px;
+  color: var(--accent);
+  font-size: 16px;
+  font-family: inherit;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}
+
+/* Terminal viewport */
+.terminal-viewport {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+}
+.terminal-container {
+  position: absolute;
+  inset: 0;
+  padding: 4px;
+}
+.terminal-container .xterm { height: 100%; }
+.terminal-empty {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  font-size: 14px;
+}
+
+/* Reconnecting banner */
+.reconnecting {
+  position: fixed;
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--state-message);
+  color: var(--accent-contrast);
+  padding: 6px 20px;
+  border-radius: 0 0 6px 6px;
+  font-size: 12px;
+  font-weight: bold;
+  z-index: 200;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Responsive */
+@media (max-width: 900px) {
+  .explorer { width: 0 !important; min-width: 0; border-right: none; overflow: hidden; }
+  #divider-explorer { display: none; }
+  .explorer-reopen-btn { display: none !important; }
+}
+
+/* Phones: one panel at a time, picked by body[data-view] from the bottom
+   nav. The panels' desktop widths (and the explorer's collapsed state) are
+   overridden by id so this wins over .explorer.collapsed and inline widths. */
+.mobile-nav { display: none; }
+@media (max-width: 700px) {
+  .divider, .explorer-reopen-btn, #btn-toggle-explorer { display: none !important; }
+  .explorer-billion-start { min-width: 44px; min-height: 44px; }
+  #explorer-panel, #office-panel, #terminal-panel {
+    display: none; width: 100% !important; min-width: 0; max-width: none; flex: 1;
+  }
+  body[data-view="files"] #explorer-panel,
+  body[data-view="office"] #office-panel,
+  body[data-view="terminal"] #terminal-panel { display: flex; }
+  .mobile-nav {
+    display: flex;
+    flex-shrink: 0;
+    border-top: 1px solid var(--border);
+    background: var(--bg-dark);
+  }
+  .mobile-nav button {
+    flex: 1;
+    min-height: 44px; /* touch target */
+    background: none;
+    border: none;
+    color: var(--text-dim);
+    font-family: inherit;
+    font-size: 11px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    cursor: pointer;
+  }
+  .mobile-nav button:hover, .mobile-nav button[aria-current="true"] { color: var(--accent); }
+  /* Overlays sized for desktop */
+  .spawn-form-inner, .dir-browser-inner { width: auto; max-width: 100%; }
+  .spawn-form-main, .spawn-presets { flex-wrap: wrap; }
+  .spawn-form-inner input, .spawn-repo-wrapper input { width: 100%; }
+  .spawn-repo-label { flex: 1 1 100%; }
+  /* iOS zooms into any field smaller than 16px on focus, and never zooms
+     back out. Every form above sets its own size, hence the override. */
+  input, select, textarea { font-size: 16px !important; }
+}
+
+/* --- Login overlay (phase 1) --- */
+.login-overlay {
+  position: fixed; inset: 0; z-index: 1000;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg-office);
+}
+.login-box {
+  display: flex; flex-direction: column; gap: 12px;
+  background: var(--bg-panel); border: 1px solid var(--border);
+  padding: 32px 28px; border-radius: 8px; width: 320px; max-width: 90vw;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
+}
+.login-title { font-size: 18px; font-weight: bold; letter-spacing: 1px; color: var(--accent); }
+.login-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 4px; }
+.login-input {
+  background: var(--bg-terminal); border: 1px solid var(--border); color: var(--text);
+  padding: 10px 12px; border-radius: 4px; font-family: inherit; font-size: 13px;
+}
+.login-input:focus { outline: none; border-color: var(--accent); }
+.login-submit {
+  background: var(--accent); color: var(--bg-dark); border: none;
+  padding: 10px; border-radius: 4px; font-weight: bold; cursor: pointer; font-family: inherit;
+}
+.login-submit:hover { opacity: 0.9; }
+.login-message { font-size: 11px; color: var(--state-message); min-height: 14px; }
+
+/* --- Presence pill (phase 1) --- */
+.presence {
+  /* Stacked above the voice pill/fab column (geometry derived from the
+     --voice-fab-* props on :root) — at bottom-right it sat directly on the
+     mic (z 500 > 10) and ate its clicks. */
+  position: fixed;
+  bottom: var(--voice-column-top);
+  right: var(--voice-fab-right);
+  z-index: 500;
+  display: flex; gap: 4px;
+}
+.presence-dot {
+  width: 22px; height: 22px; border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 9px; font-weight: bold; color: #08090b;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+}
+.presence-self { box-shadow: 0 0 0 2px var(--accent); }
+
+/* --- Read-only / ownership (phase 3) --- */
+.topbar-readonly {
+  display: inline-flex; align-items: center; gap: 4px;
+  font-size: 11px; font-weight: 600;
+  padding: 1px 7px; margin-right: 8px;
+  border: 1px solid currentColor; border-radius: 10px;
+  opacity: 0.9;
+}
+/* Subtle cue that the active terminal is view-only. */
+.terminal-panel.readonly .terminal-viewport { opacity: 0.92; }
+
+/* ============================================================
+   Job Board
+   Shares the terminal viewport with the xterm containers; the
+   pinned "Jobs" tab swaps between them.
+   ============================================================ */
+
+.terminal-tab.board-tab {
+  gap: 6px;
+  color: var(--text-muted);
+  /* Visually pinned: a hairline separates it from the agent tabs, which are
+     draggable and closable while this one is neither. */
+  border-right: 1px solid var(--border);
+}
+.terminal-tab.board-tab .board-tab-icon { opacity: 0.75; flex-shrink: 0; }
+.terminal-tab.board-tab.active { color: var(--accent); }
+.terminal-tab.board-tab.active .board-tab-icon { opacity: 1; }
+
+.board-tab-badge {
+  min-width: 15px;
+  padding: 0 4px;
+  border-radius: 7px;
+  background: var(--state-message);
+  color: #0b0c0e;
+  font-size: 9px;
+  font-weight: 700;
+  line-height: 15px;
+  text-align: center;
+}
+
+/* An agent the board created, not you. Subtle — it is still an ordinary agent
+   you can type into; the marker only explains where it came from. */
+.terminal-tab.board-spawned .dot {
+  box-shadow: 0 0 0 1px var(--bg-tabs), 0 0 0 2px var(--text-dim);
+}
+
+.job-board {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-panel);
+  overflow: hidden;
+  z-index: 5;
+}
+
+/* --- Toolbar --- */
+
+.job-board-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 8px 12px;
+  background: var(--bg-dark);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.job-new-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--text);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.job-new-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+.job-dispatcher { display: flex; align-items: center; gap: 8px; }
+
+/* Same shape as the dispatcher controls — it is a view switch, not an action,
+   so it stays quiet until it is the view you are in. */
+.job-finished-btn {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.job-finished-btn:hover { border-color: var(--accent); color: var(--accent); }
+.job-finished-btn.showing { color: var(--accent); border-color: var(--accent); }
+
+.job-run-toggle,
+.job-run-now {
+  padding: 4px 10px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.job-run-toggle:hover,
+.job-run-now:hover { border-color: var(--accent); color: var(--accent); }
+.job-run-toggle.running { color: var(--state-waiting); border-color: var(--state-waiting); }
+
+.job-dispatcher-status { font-size: 10px; color: var(--text-dim); }
+.job-dispatcher-status.running { color: var(--state-waiting); }
+
+.job-cap-label {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: auto;
+  font-size: 10px;
+  color: var(--text-dim);
+}
+.job-cap-label input,
+.job-cap-label select {
+  width: 44px;
+  padding: 3px 5px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--text);
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+}
+/* Only the first control in the group takes the slack; a second `margin-left:
+   auto` would split it and strand the two labels at opposite ends. */
+.job-perm-label { margin-left: 0; }
+.job-cap-label select { width: auto; max-width: 200px; }
+/* bypassPermissions is the one mode with no check on the agent at all, and it
+   reads as just another entry in a list of six. The danger token says so on the
+   closed control, where it stays visible after the dropdown shuts — styling the
+   <option> itself would not, since Safari ignores option colours. */
+select.job-mode-danger {
+  color: var(--state-disconnected);
+  border-color: var(--state-disconnected);
+}
+
+/* --- New / edit form --- */
+
+.job-form {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: var(--bg-dark);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.job-form label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 10px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+.job-form input[type="text"],
+.job-form select,
+.job-form textarea {
+  padding: 6px 8px;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--text);
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  text-transform: none;
+  letter-spacing: 0;
+}
+.job-form textarea { resize: vertical; line-height: 1.5; }
+.job-form input:focus,
+.job-form select:focus,
+.job-form textarea:focus { outline: none; border-color: var(--accent); }
+
+.job-form-actions { display: flex; gap: 8px; }
+.job-form-actions button,
+.job-form-attach button {
+  padding: 5px 12px;
+  font-size: 11px;
+  font-family: inherit;
+  color: var(--bg-dark);
+  background: var(--accent);
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.job-form button.secondary {
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+}
+/* Type and schedule sit on one line: they are a single decision, and a cron
+   box stacked under its own label would take a third of the form. */
+/* Wraps: with Type, Agent, Permissions and Schedule in one row, a narrow
+   panel would otherwise clip the right-hand fields under the board's
+   overflow: hidden rather than drop them to a second line. */
+.job-form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
+/* Capped like the toolbar's: uncapped, the select sizes to its longest option
+   and squeezes the flex:1 cron field beside it on a narrow panel. */
+#job-permission-mode-field { max-width: 200px; }
+.job-form-row > label { flex: 0 0 auto; }
+.job-form-schedule { flex: 1 1 200px; min-width: 0; }
+.job-form-hint {
+  font-size: 9px;
+  color: var(--text-dim);
+  text-transform: none;
+  letter-spacing: 0;
+}
+.job-form-error { font-size: 11px; color: var(--state-disconnected); }
+
+.job-form-attach { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+.job-form-attachments { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
+.job-form-attachments:empty { display: none; }
+.job-attachment {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  font-size: 11px;
+  color: var(--text);
+  background: var(--bg-panel);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+}
+.job-attachment-remove {
+  padding: 2px 6px;
+  margin: -2px -6px -2px 0;
+  font-size: 12px;
+  font-family: inherit;
+  line-height: 1;
+  color: var(--text-dim);
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.job-attachment-remove:hover { color: var(--state-disconnected); }
+
+/* --- Columns --- */
+
+.job-columns {
+  display: flex;
+  gap: 1px;
+  flex: 1;
+  min-height: 0;
+  background: var(--border);
+}
+
+.job-column {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  background: var(--bg-panel);
+}
+
+.job-column-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: var(--bg-tabs);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.job-column-label {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+.job-column-count { font-size: 10px; color: var(--text-dim); }
+
+.job-cards {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.job-column-empty {
+  padding: 12px 4px;
+  font-size: 10px;
+  color: var(--text-dim);
+  text-align: center;
+}
+
+/* --- Finished jobs --- */
+
+/* Takes the columns' place rather than sitting beside them, so an archive that
+   only grows can never squeeze the live work. */
+.job-finished {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg-panel);
+}
+.job-finished-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px;
+  background: var(--bg-tabs);
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+.job-finished-label {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: var(--text-dim);
+}
+.job-finished-count { font-size: 10px; color: var(--text-dim); }
+
+/* --- Cards --- */
+
+.job-card {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  padding: 9px 10px;
+  background: var(--bg-dark);
+  border: 1px solid var(--border);
+  border-left: 2px solid var(--border);
+  border-radius: 3px;
+}
+/* An in-progress card whose agent is still running opens that agent's tab.
+   Only the non-left borders light up on hover — the left edge is the status
+   stripe and has to keep its own colour. */
+.job-card-live { cursor: pointer; }
+.job-card-live:hover {
+  border-top-color: var(--accent);
+  border-right-color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+.job-card.status-running { border-left-color: var(--state-working); }
+.job-card.status-needs-input { border-left-color: var(--state-message); }
+.job-card.status-stalled { border-left-color: var(--state-idle); }
+.job-card.status-gone { border-left-color: var(--state-disconnected); }
+
+.job-card-title {
+  font-size: 12px;
+  color: var(--text);
+  line-height: 1.35;
+  word-break: break-word;
+}
+
+.job-card-meta {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 9px;
+  color: var(--text-dim);
+}
+.job-card-repo { color: var(--text-muted); }
+/* Posted by an agent rather than typed into the form. Accent-tinted so a board
+   full of cards still shows at a glance which ones a machine queued. */
+.job-card-via { color: var(--accent); opacity: 0.85; }
+
+/* Scheduled cards. The chip rides in the title line and the schedule gets its
+   own row, so the cron text never competes with the title for the same space. */
+.job-card-type {
+  margin-left: 6px;
+  padding: 1px 5px;
+  font-size: 9px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  border-radius: 8px;
+  opacity: 0.75;
+  white-space: nowrap;
+  vertical-align: 1px;
+}
+/* Same reason as select.job-mode-danger: a card that will dispatch with no
+   permission check must not wear the same gold pill as the routine
+   "scheduled" chip beside it. */
+.job-card-type.job-mode-danger {
+  color: var(--state-disconnected);
+  border-color: var(--state-disconnected);
+}
+.job-card-schedule {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: baseline;
+  font-size: 9px;
+  color: var(--text-dim);
+}
+/* The page is already set in a mono stack, so cron text needs no font of its
+   own — just enough contrast to read as the machine-readable bit. */
+.job-card-cron { color: var(--text-muted); }
+.job-card-next { color: var(--accent); opacity: 0.85; }
+/* A paused schedule is not a countdown: drop the accent so the card reads as
+   held rather than as the next one about to go. */
+.job-card-paused { color: var(--text-muted); }
+.job-card-runs { opacity: 0.8; }
+
+.job-card-detail {
+  font-size: 10px;
+  color: var(--text-dim);
+  line-height: 1.45;
+  /* Cards stay scannable: the full text lives in the agent's prompt, this is
+     only a reminder of what the job was. */
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* What the agent reported through finish_job. Scrolls rather than clamps: on
+   a card with no PR this is the result, so none of it may be cut off. */
+.job-card-result {
+  font-size: 10px;
+  color: var(--text);
+  line-height: 1.45;
+  max-height: 12em;
+  overflow-y: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+  border-left: 2px solid var(--border);
+  padding-left: 6px;
+}
+.job-card-result:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
+
+.job-card-agent {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: baseline;
+  font-size: 9px;
+  color: var(--text-dim);
+}
+.job-card-agent-name { color: var(--text-muted); font-weight: 600; }
+.job-card-branch { color: var(--text-dim); opacity: 0.85; }
+
+.job-card-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  align-self: flex-start;
+  padding: 2px 7px;
+  font-size: 9px;
+  font-family: inherit;
+  color: var(--text-muted);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  cursor: pointer;
+}
+.job-card-status:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
+.job-card-status:disabled { cursor: default; opacity: 0.65; }
+.job-status-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: currentColor;
+  flex-shrink: 0;
+}
+.job-status-running { color: var(--state-working); border-color: var(--state-working); }
+.job-status-needs-input { color: var(--state-message); border-color: var(--state-message); }
+.job-status-stalled { color: var(--text-dim); }
+.job-status-gone { color: var(--state-disconnected); border-color: var(--state-disconnected); }
+
+/* Only the "needs you" badge pulses. A card that is merely quiet should not
+   compete for attention with one that is actually blocking on the user. */
+.job-status-needs-input .job-status-dot { animation: job-pulse 1.8s ease-in-out infinite; }
+@keyframes job-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
+}
+
+.job-card-attachments { display: flex; flex-wrap: wrap; gap: 4px 8px; }
+.job-card-attachment {
+  font-size: 10px;
+  color: var(--accent);
+  text-decoration: none;
+  overflow-wrap: anywhere;
+}
+.job-card-attachment::before { content: '\1F4CE\00a0'; }
+.job-card-attachment:hover { text-decoration: underline; }
+
+.job-card-pr {
+  align-self: flex-start;
+  font-size: 10px;
+  color: var(--accent);
+  text-decoration: none;
+}
+.job-card-pr:hover { text-decoration: underline; }
+
+.job-card-error {
+  font-size: 9px;
+  line-height: 1.4;
+  color: var(--state-disconnected);
+  word-break: break-word;
+}
+
+.job-card-actions {
+  display: flex;
+  gap: 4px;
+  flex-wrap: wrap;
+  margin-top: 2px;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+.job-card:hover .job-card-actions,
+.job-card:focus-within .job-card-actions { opacity: 1; }
+
+.job-card-btn {
+  padding: 2px 6px;
+  font-size: 9px;
+  font-family: inherit;
+  color: var(--text-dim);
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  cursor: pointer;
+}
+.job-card-btn:hover { color: var(--accent); border-color: var(--accent); }
+.job-card-btn.danger:hover { color: var(--state-disconnected); border-color: var(--state-disconnected); }
+
+/* Narrow panels: stack the columns instead of crushing them to unreadable
+   widths (the terminal panel is resizable down to 300px). */
+@media (max-width: 700px) {
+  .job-columns { flex-direction: column; overflow-y: auto; }
+  .job-column { min-height: 140px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .job-status-needs-input .job-status-dot { animation: none; }
+  .job-card-actions { transition: none; }
+}
+
+.job-card-retired {
+  font-size: 9px;
+  color: var(--text-dim);
+  opacity: 0.8;
+}
+
+/* Why a schedule held off a firing. Above retired metadata: it often says
+   what to do ("waiting on PR #12" — go merge it). */
+.job-card-held {
+  font-size: 9px;
+  color: var(--text-dim);
+}
+
+/* The schedule's link to its latest run. */
+.job-card-lastrun {
+  font-size: 9px;
+  color: var(--accent);
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-align: left;
+  font-family: inherit;
+}
+.job-card-lastrun:hover { text-decoration: underline; }
+
+
+/* Every card in the archive carries this line, so a colour here would be pure
+   decoration — it differentiates nothing. Matches .job-card-retired exactly:
+   both are 9px card metadata that has stopped being actionable. */
+.job-card-finished {
+  font-size: 9px;
+  color: var(--text-dim);
+  opacity: 0.8;
+}