fraim 2.0.154 → 2.0.160

package/public/ai-hub/styles.css

@@ -1,24 +1,107 @@
-:root {
-  color-scheme: light;
-  --bg: #ebe4d7;
-  --surface: #f8f4eb;
-  --soft: #f1ebde;
-  --line: #d7cdbf;
-  --text: #231e17;
-  --muted: #7c6f61;
-  --accent: #1f437d;
-  --accent-strong: #16345f;
-  --accent-soft: #dfe7f5;
-  --warn: #b08442;
-  --warn-soft: #fffaf0;
-  --danger: #a24747;
-  --shadow: 0 1px 2px rgba(35, 30, 23, 0.05);
-  --shadow-lg: 0 18px 48px rgba(35, 30, 23, 0.16);
-  /* Issue #347 — picker group dots. Decorative only; the picker uses
-     these to scan groups by color without adding semantic weight. Kept
-     as variables so future themes flow through here. */
+:root {
+  color-scheme: light dark;
+  /* Light theme — system-neutral grays */
+  --bg: #ECECEC;
+  --surface: #F7F7F7;
+  --soft: #E8E8E8;
+  --line: rgba(0, 0, 0, 0.10);
+  --text: #1A1A1A;
+  --muted: #6B6B6B;
+  --accent: #1f437d;
+  --accent-strong: #16345f;
+  --accent-soft: #dfe7f5;
+  --warn: #b08442;
+  --warn-soft: #fdf6e8;
+  --done: #2e7d32;
+  --danger: #a24747;
+  --shadow: 0 0 0 1px rgba(0, 0, 0, 0.07);
+  --shadow-lg: 0 0 0 1px rgba(0, 0, 0, 0.10), 0 4px 16px rgba(0, 0, 0, 0.08);
   --picker-delegation: #5b7eb0;
   --picker-learning: #8b5fbf;
+  /* Safe zone for macOS hiddenInset traffic lights (~28px) and
+     Windows titleBarOverlay height (36px). Falls back to 0 in a browser tab. */
+  --titlebar-inset: env(titlebar-area-height, 0px);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #1E1E1E;
+    --surface: #2A2A2A;
+    --soft: #323232;
+    --line: rgba(255, 255, 255, 0.10);
+    --text: #E8E8E8;
+    --muted: #999999;
+    --accent: #5b8de8;
+    --accent-strong: #82aaee;
+    --accent-soft: rgba(91, 141, 232, 0.15);
+    --warn: #d4a04e;
+    --warn-soft: rgba(212, 160, 78, 0.12);
+    --done: #5cb85c;
+    --danger: #e07070;
+    --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
+    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 16px rgba(0, 0, 0, 0.40);
+  }
+}
+
+/* Electron shell: html.electron is set synchronously before CSS paints so there
+   is no flash. Mica (Win11) / vibrancy (macOS) paint the window-level background;
+   body + .page must be transparent to let that material show through. Content
+   surfaces use frosted-glass layering so they read against the OS material. */
+html.electron body,
+html.electron .page {
+  background: transparent;
+}
+/* Header floats directly on Mica — no card. Native Win11 pattern. */
+html.electron .header {
+  background: transparent;
+  border: none;
+}
+/* Rail: frosted sidebar — clearly distinct from Mica, clearly distinct from
+   the conversation. A solid-ish left edge gives it visual grounding. */
+html.electron .rail {
+  background: rgba(255, 255, 255, 0.76);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  border: none;
+  border-right: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  box-shadow: none;
+}
+/* Conversation: the primary work surface — crisp white card on the Mica */
+html.electron .conversation {
+  background: rgba(255, 255, 255, 0.88);
+  backdrop-filter: blur(24px);
+  -webkit-backdrop-filter: blur(24px);
+  border: 1px solid rgba(255, 255, 255, 0.60);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
+}
+html.electron .modal {
+  background: rgba(253, 253, 253, 0.94);
+  backdrop-filter: blur(32px);
+  -webkit-backdrop-filter: blur(32px);
+  border: 1px solid rgba(255, 255, 255, 0.50);
+  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.14);
+}
+html.electron .modal-backdrop {
+  background: rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(4px);
+  -webkit-backdrop-filter: blur(4px);
+}
+@media (prefers-color-scheme: dark) {
+  html.electron .rail {
+    background: rgba(42, 42, 42, 0.78);
+    border-right-color: rgba(255, 255, 255, 0.06);
+  }
+  html.electron .conversation {
+    background: rgba(36, 36, 36, 0.88);
+    border-color: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
+  }
+  html.electron .modal {
+    background: rgba(30, 30, 30, 0.94);
+    border-color: rgba(255, 255, 255, 0.10);
+    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.40);
+  }
 }
 
 * { box-sizing: border-box; }
@@ -26,66 +109,75 @@ html, body { margin: 0; padding: 0; }
 [hidden] { display: none !important; }
 
 html, body { height: 100%; }
-body {
-  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-  color: var(--text);
-  background:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%),
-    linear-gradient(180deg, #efe8dc 0%, var(--bg) 100%);
+body {
+  /* System-native font stack: San Francisco on Mac, Segoe UI Variable on Windows */
+  font-family: system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", sans-serif;
+  color: var(--text);
+  background: var(--bg);
   line-height: 1.5;
   font-size: 15px;
-  /* Issue #339 fix: bound the page to the viewport. The conversation
-     pane scrolls internally instead of growing the entire page. */
   overflow: hidden;
+  /* Thin native-style scrollbars */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+}
+
+@media (prefers-color-scheme: dark) {
+  body { scrollbar-color: rgba(255, 255, 255, 0.2) transparent; }
+}
+
+/* Respect reduced-motion preference */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
 }
 
 button { font: inherit; cursor: pointer; }
 
-.page {
-  max-width: none;
-  width: 100%;
-  margin: 0;
-  padding: 24px;
+.page {
+  max-width: none;
+  width: 100%;
+  margin: 0;
+  /* Push content below traffic lights on macOS hiddenInset titlebar */
+  padding: calc(20px + var(--titlebar-inset)) 24px 16px;
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 14px;
   height: 100vh;
   min-height: 0;
 }
 
-/* Header */
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-}
-.header-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.header-eyebrow {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-.header h1 {
-  font-size: 34px;
-  font-weight: 700;
-  margin: 0;
-  letter-spacing: -0.03em;
-}
-.project-button {
+/* Header — draggable titlebar strip on Electron (macOS hiddenInset).
+   Buttons inside must override with no-drag so they remain clickable. */
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  /* left margin reserves space for macOS traffic lights (78px) */
+  padding-left: max(0px, env(titlebar-area-x, 0px));
+}
+.header button, .header a, .header select {
+  -webkit-app-region: no-drag;
+}
+.header-title {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 0;
+  letter-spacing: -0.02em;
+  white-space: nowrap;
+  flex-shrink: 0;
+  color: var(--text);
+}
+.project-button {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 10px 16px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 14px;
   color: var(--text);
   box-shadow: var(--shadow);
   max-width: 360px;
@@ -100,15 +192,12 @@ button { font: inherit; cursor: pointer; }
   text-overflow: ellipsis;
 }
 
-/* Welcome line */
-.welcome {
-  background: rgba(248, 244, 235, 0.86);
-  border: 1px solid var(--line);
-  border-radius: 20px;
-  padding: 20px 24px;
-  box-shadow: var(--shadow);
-  font-size: 15px;
-  line-height: 1.7;
+/* Welcome — inline in the header strip, no card styling */
+.welcome {
+  flex: 1;
+  min-width: 0;
+  font-size: 13px;
+  line-height: 1.55;
   color: var(--muted);
 }
 .welcome strong.you { color: var(--text); font-weight: 600; }
@@ -143,15 +232,12 @@ button { font: inherit; cursor: pointer; }
   top: calc(100% + 10px);
   left: 0;
   width: 320px;
-  /* Hard cap + internal scroll so a verbose explanation never clips off
-     the bottom of the viewport (was a real bug — popover content used to
-     run past the bottom edge with no way to read it). */
   max-height: min(60vh, 480px);
   overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 12px;
-  padding: 14px 16px;
+  border-radius: 8px;
+  padding: 12px 14px;
   box-shadow: var(--shadow-lg);
   z-index: 50;
   font-weight: 400;
@@ -197,94 +283,94 @@ button { font: inherit; cursor: pointer; }
 }
 
 /* Layout */
-.layout {
-  display: grid;
-  grid-template-columns: 326px minmax(0, 1fr);
-  gap: 20px;
-  align-items: stretch;
-  flex: 1;
-  min-height: 0;
-}
+.layout {
+  display: grid;
+  grid-template-columns: 326px minmax(0, 1fr);
+  gap: 20px;
+  align-items: stretch;
+  flex: 1;
+  min-height: 0;
+}
 
 /* Left rail */
-.rail {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  grid-auto-rows: min-content;
-  gap: 14px;
-  min-width: 0;
-  align-self: start;
-  max-height: 100%;
-  overflow-y: auto;
-  border-radius: 28px;
-  background: rgba(248, 244, 235, 0.84);
-  box-shadow: var(--shadow);
-}
-.new-conv {
-  width: 100%;
-  background: var(--accent);
-  color: #fff;
-  border: none;
-  border-radius: 14px;
-  padding: 13px 16px;
-  font-weight: 600;
-  box-shadow: var(--shadow);
-}
-.rail-note {
-  padding: 0 2px;
-  font-size: 12px;
-  color: var(--muted);
-  line-height: 1.45;
-}
-.rail-section {
-  display: grid;
-  gap: 10px;
-}
-.rail-section-label {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--muted);
-  padding: 0 2px;
-}
-.new-conv:hover { background: var(--accent-strong); }
-.new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
-.conv-list {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 10px;
-  margin-top: 0;
-  min-width: 0;
-}
-.conv-item {
-  width: 100%;
-  text-align: left;
-  background: rgba(255, 255, 255, 0.44);
-  border: 1px solid rgba(31, 67, 125, 0.08);
-  border-radius: 22px;
-  padding: 14px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  color: var(--text);
-  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
-}
-.conv-item:hover { background: var(--soft); }
-.conv-item.active {
-  background: rgba(229, 236, 248, 0.92);
-  border-color: rgba(31, 67, 125, 0.2);
-  box-shadow: 0 14px 28px rgba(31, 67, 125, 0.12);
-}
+.rail {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  grid-auto-rows: min-content;
+  gap: 14px;
+  min-width: 0;
+  align-self: start;
+  max-height: 100%;
+  overflow-y: auto;
+  border-radius: 10px;
+  background: var(--surface);
+  box-shadow: var(--shadow);
+}
+.new-conv {
+  width: 100%;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  padding: 11px 16px;
+  font-weight: 600;
+  box-shadow: var(--shadow);
+}
+.rail-note {
+  padding: 0 2px;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.45;
+}
+.rail-section {
+  display: grid;
+  gap: 10px;
+}
+.rail-section-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+  padding: 0 2px;
+}
+.new-conv:hover { background: var(--accent-strong); }
+.new-conv:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
+.conv-list {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  margin-top: 0;
+  min-width: 0;
+}
+.conv-item {
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 12px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  color: var(--text);
+  box-shadow: none;
+}
+.conv-item:hover { background: var(--soft); }
+.conv-item.active {
+  background: var(--accent-soft);
+  border-color: rgba(31, 67, 125, 0.25);
+  box-shadow: none;
+}
 /* Text column: stacks persona name label above job title */
-.conv-body {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
+.conv-body {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
 .conv-persona-name {
   font-size: 10px;
   font-weight: 700;
@@ -295,24 +381,23 @@ button { font: inherit; cursor: pointer; }
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.conv-title {
-  font-size: 17px;
-  font-weight: 700;
-  min-width: 0;
-  line-height: 1.3;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-/* Persona avatar chip — enlarged to 34px to serve as a clear visual anchor */
-.conv-persona-chip {
-  flex-shrink: 0;
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
-  background: #ffffff;
-  border: 2px solid rgba(31, 67, 125, 0.14);
+.conv-title {
+  font-size: 17px;
+  font-weight: 700;
+  min-width: 0;
+  line-height: 1.3;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.conv-persona-chip {
+  flex-shrink: 0;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -323,28 +408,27 @@ button { font: inherit; cursor: pointer; }
   line-height: 1;
   text-transform: uppercase;
 }
-.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
+.conv-persona-chip img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; }
 .conv-persona-chip--free { background: transparent; border-color: var(--line); color: var(--muted); }
-.conv-status {
-  font-size: 11px;
-  color: var(--muted);
-  font-weight: 500;
-  flex-shrink: 0;
-  white-space: nowrap;
-  padding-top: 4px;
-}
+.conv-status {
+  font-size: 11px;
+  color: var(--muted);
+  font-weight: 500;
+  flex-shrink: 0;
+  white-space: nowrap;
+  padding-top: 4px;
+}
 .conv-status.running { color: var(--accent); }
 .conv-status.attention { color: var(--warn); }
 .conv-status.failed { color: var(--danger); }
 
-/* Conversation pane — fills the layout column vertically. Inner regions
-   manage their own height; the .messages list is the only scrollable area. */
-.conversation {
-  background: rgba(248, 244, 235, 0.94);
-  border: 1px solid var(--line);
-  border-radius: 30px;
-  box-shadow: var(--shadow-lg);
-  padding: 24px 26px;
+/* Conversation pane */
+.conversation {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  padding: 20px 22px;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -353,225 +437,287 @@ button { font: inherit; cursor: pointer; }
   height: 100%;
   overflow: hidden;
 }
-.empty-state {
-  display: grid;
-  gap: 8px;
-  place-items: center;
-  text-align: center;
-  color: var(--muted);
-  padding: 80px 16px;
-}
-.empty-state::before {
-  content: "F";
-  width: 56px;
-  height: 56px;
-  border-radius: 18px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--accent-soft);
-  color: var(--accent-strong);
-  font-weight: 700;
-  font-size: 24px;
-}
-.empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; }
+.empty-state {
+  display: grid;
+  gap: 8px;
+  place-items: center;
+  text-align: center;
+  color: var(--muted);
+  padding: 80px 16px;
+}
+.empty-state::before {
+  content: "F";
+  width: 52px;
+  height: 52px;
+  border-radius: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-soft);
+  color: var(--accent-strong);
+  font-weight: 700;
+  font-size: 22px;
+}
+.empty-state h3 { margin: 0; color: var(--text); font-weight: 600; font-size: 17px; }
 .empty-state p { margin: 0; max-width: 320px; }
 
-#active-conv {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  min-width: 0;
-  flex: 1;
-  min-height: 0;
-  overflow: hidden;
-}
-
-.conv-header,
-.support-stack,
-.panel-details,
-.micro {
-  flex-shrink: 0;
-}
-.conv-topline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-.employee-identity {
-  display: inline-flex;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-.identity-avatar {
-  width: 52px;
-  height: 52px;
-  border-radius: 18px;
-  background: #ffffff;
-  border: 1px solid rgba(31, 67, 125, 0.14);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--accent-strong);
-  flex-shrink: 0;
-}
-.identity-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.identity-copy {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.identity-copy strong {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text);
-}
-.identity-copy small {
-  font-size: 13px;
-  color: var(--muted);
-}
-.run-state-pill {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 7px 12px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  background: rgba(31, 67, 125, 0.1);
-  color: var(--accent-strong);
-}
-.run-state-pill.running {
-  background: rgba(31, 67, 125, 0.14);
-}
-.run-state-pill.failed {
-  background: #fbebeb;
-  color: var(--danger);
-}
-.run-state-pill.completed {
-  background: #e4f0ea;
-  color: #2c6b4e;
-}
-.conv-header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  column-gap: 12px;
-  row-gap: 4px;
-}
-.title-block {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-.conv-header h2 { flex: 1 1 auto; min-width: 0; }
-#artifact-slot { flex: 0 0 auto; }
-
-.conv-header h2 { margin: 0; font-size: 34px; font-weight: 700; letter-spacing: -0.03em; }
-.conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
-.conversation-status {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  min-width: 0;
-  flex-shrink: 0;
-}
-.conversation-status > * {
-  min-width: 0;
-}
-.status-stack {
-  display: grid;
-  gap: 10px;
-  min-width: 0;
-  flex: 1 1 auto;
-}
-.support-stack {
-  display: grid;
-  gap: 8px;
-}
-.panel-details {
-  background: rgba(255, 255, 255, 0.4);
-  border: 1px solid rgba(31, 67, 125, 0.08);
-  border-radius: 22px;
-  overflow: hidden;
-}
-.panel-details > summary {
-  cursor: pointer;
-  list-style: none;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-}
-.panel-details > summary::-webkit-details-marker { display: none; }
-.panel-details > summary::before {
-  content: "▸";
-  font-size: 11px;
-  color: var(--muted);
-  transition: transform 100ms ease;
-  flex-shrink: 0;
-}
-.panel-details[open] > summary::before { transform: rotate(90deg); }
-.panel-summary-copy {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-}
-.panel-kicker {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-.panel-summary-text {
-  font-size: 13px;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.panel-body {
-  padding: 0 14px 12px;
-}
-.section-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--muted);
+#active-conv {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-width: 0;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.conv-header,
+.support-stack,
+.panel-details:not(.panel-details--thread),
+.micro {
+  flex-shrink: 0;
+}
+.conv-topline {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+/* Job title inline with employee avatar — replaces the old separate h2 row */
+.conv-job-title {
+  flex: 1;
+  min-width: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.employee-identity {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+.identity-avatar {
+  width: 44px;
+  height: 44px;
+  border-radius: 10px;
+  background: var(--surface);
+  border: 1px solid var(--line);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 15px;
+  font-weight: 700;
+  color: var(--accent-strong);
+  flex-shrink: 0;
+}
+.identity-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.identity-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.identity-copy strong {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+}
+.identity-copy small {
+  font-size: 13px;
+  color: var(--muted);
+}
+.run-state-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 12px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
   text-transform: uppercase;
-  letter-spacing: 0.05em;
-  margin-bottom: 8px;
+  background: rgba(31, 67, 125, 0.1);
+  color: var(--accent-strong);
+}
+.run-state-pill.running {
+  background: rgba(31, 67, 125, 0.14);
+}
+.run-state-pill.failed {
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
+  color: var(--danger);
 }
+.run-state-pill.completed {
+  background: color-mix(in srgb, var(--done) 14%, transparent);
+  color: var(--done);
+}
+.conv-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 12px;
+  row-gap: 4px;
+}
+.title-block {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.conv-header h2 { flex: 1 1 auto; min-width: 0; }
+#artifact-slot { flex: 0 0 auto; }
 
-.coach-title-row {
+.conv-header h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
+.conv-job { color: var(--muted); font-size: 14px; margin-top: 2px; }
+.conversation-status {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  min-width: 0;
+  flex-shrink: 0;
+}
+.conversation-status > * {
+  min-width: 0;
+}
+.status-stack {
+  display: grid;
+  gap: 10px;
+  min-width: 0;
+  flex: 1 1 auto;
+}
+.support-stack {
+  display: grid;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.panel-details {
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.panel-details > summary {
+  cursor: pointer;
+  list-style: none;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 10px;
+  padding: 10px 14px;
+}
+.panel-details > summary::-webkit-details-marker { display: none; }
+.panel-details > summary::before {
+  content: "▸";
+  font-size: 11px;
+  color: var(--muted);
+  transition: transform 100ms ease;
+  flex-shrink: 0;
+}
+.panel-details[open] > summary::before { transform: rotate(90deg); }
+.panel-summary-copy {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.panel-kicker {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.panel-summary-text {
+  font-size: 13px;
+  color: var(--text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.panel-body {
+  padding: 0 14px 12px;
+}
+.section-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--muted);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
   margin-bottom: 8px;
 }
-.coach-title-row .section-title { margin-bottom: 0; }
+
+/* Employee row now lives in the coach summary (inline with kicker).
+   .coach-title-row no longer exists in HTML — kept only for browser cache safety. */
 .active-employee-row {
   display: flex;
   align-items: center;
   gap: 6px;
+  margin-left: auto;
+  flex-shrink: 0;
 }
 .active-employee-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
   font-size: 12px;
-  color: var(--muted);
+  font-weight: 600;
+  color: var(--text);
+  cursor: default;
+}
+/* Hide the name text span — only badge + dropdown shown in the summary */
+.coach-label-name { display: none; }
+.coach-employee-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px; height: 20px;
+  border-radius: 6px;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
+/* R3.3: hide coach-summary hint when the panel is open. */
+#coach-panel[open] #coach-summary { display: none; }
+/* R5: quick-access coaching buttons row. */
+.quick-coach-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 8px;
+}
+.quick-coach-btn {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 8px;
+}
+/* Thread panel */
+.panel-details--thread {
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: var(--bg);
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex: 1;
+  min-height: 0;
+}
+.panel-details--thread > summary {
+  padding: 12px 22px;
+  cursor: pointer;
+  list-style: none;
+  flex-shrink: 0;
+}
+.panel-details--thread > summary::-webkit-details-marker { display: none; }
+.panel-details--thread .messages {
+  padding: 8px 22px 18px;
 }
 .employee-select.inline {
   font-size: 12px;
@@ -581,11 +727,11 @@ button { font: inherit; cursor: pointer; }
 
 /* Progress is now a single-line status strip (was a tall card) so the
    messages region gets the vertical space it needs. */
-.progress {
-  background: rgba(255, 255, 255, 0.46);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 8px 12px;
+.progress {
+  background: rgba(255, 255, 255, 0.46);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 12px;
   font-size: 13px;
   display: flex;
   align-items: center;
@@ -618,156 +764,151 @@ button { font: inherit; cursor: pointer; }
 }
 .progress.done .stage::before { background: #6cb39a; animation: none; }
 .progress.attention .stage::before { background: var(--warn); animation: none; }
-.progress.failed .stage::before { background: var(--danger); animation: none; }
-@keyframes pulse {
-  0%, 100% { opacity: 1; transform: scale(1); }
-  50% { opacity: 0.5; transform: scale(0.8); }
-}
-.progress-inline {
-  flex: 1 1 auto;
-}
-.tracker-inline {
-  background: rgba(255, 255, 255, 0.42);
-  border: 1px solid rgba(31, 67, 125, 0.08);
-  border-radius: 18px;
-  padding: 8px 12px;
-}
-
-.thread-surface {
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  min-height: 0;
-  flex: 1;
-  padding: 22px 22px 18px;
-  border-radius: 28px;
-  border: 1px solid rgba(31, 67, 125, 0.1);
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.5)),
-    radial-gradient(circle at top left, rgba(31, 67, 125, 0.06), transparent 34%);
-}
-
-.thread-surface-label {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: var(--muted);
-}
-
-.messages {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: 24px;
-  margin-top: 0;
-  min-width: 0;
-  /* Scroll messages here, not the page. */
-  flex: 1;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 8px 8px 8px 2px;
-  scroll-behavior: smooth;
-}
-.message {
-  word-wrap: break-word;
-  overflow-wrap: anywhere;
-  max-width: 100%;
-  width: 100%;
-  display: grid;
-  gap: 10px;
-  animation: slidein 280ms ease;
-}
-@keyframes slidein {
-  from { opacity: 0; transform: translateY(6px); }
-  to { opacity: 1; transform: translateY(0); }
-}
-.message.manager {
-  justify-items: end;
-  padding-left: 30%;
-}
-.message.employee {
-  justify-items: start;
-  padding-right: 30%;
-}
-.message.system {
-  justify-items: stretch;
-  padding-right: 16%;
-}
-.message-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 0;
-}
-.message.manager .message-meta {
-  justify-content: flex-end;
-}
-.message-avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 10px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  font-size: 11px;
-  font-weight: 700;
-  border: 1px solid rgba(31, 67, 125, 0.1);
-}
-.message-avatar.manager {
-  background: rgba(31, 67, 125, 0.12);
-  color: var(--accent-strong);
-}
-.message-avatar.employee {
-  background: #ffffff;
-  color: var(--accent-strong);
-}
-.message-avatar.system {
-  background: rgba(35, 30, 23, 0.08);
-  color: var(--muted);
-}
-.message-avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.message .who {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  color: var(--muted);
-}
-.message .lane-label {
-  font-size: 11px;
-  color: var(--muted);
-  opacity: 0.88;
-}
-.transport-raw {
-  display: none;
-}
-.bubble {
-  border-radius: 26px;
-  padding: 14px 16px;
-  font-size: 14px;
-  line-height: 1.55;
-  box-shadow: 0 12px 26px rgba(35, 30, 23, 0.05);
-  max-width: min(620px, 100%);
-}
-.message.manager .bubble {
-  background: var(--accent);
-  color: #fff;
-}
-.message.employee .bubble {
-  background: rgba(255, 255, 255, 0.86);
-  border: 1px solid rgba(31, 67, 125, 0.1);
-  color: var(--text);
-}
-.message.system .bubble {
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(35, 30, 23, 0.08);
-  color: var(--text);
-}
+.progress.failed .stage::before { background: var(--danger); animation: none; }
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.5; transform: scale(0.8); }
+}
+.progress-inline {
+  flex: 1 1 auto;
+}
+.tracker-inline {
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+
+.thread-surface {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  min-height: 0;
+  flex: 1;
+  padding: 16px 18px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: var(--bg);
+}
+
+.thread-surface-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.messages {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 14px;
+  margin-top: 0;
+  min-width: 0;
+  /* Scroll messages here, not the page. */
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 8px 8px 8px 2px;
+  scroll-behavior: smooth;
+}
+.message {
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+  max-width: 100%;
+  width: 100%;
+  display: grid;
+  gap: 6px;
+  animation: slidein 280ms ease;
+}
+@keyframes slidein {
+  from { opacity: 0; transform: translateY(6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+.message.manager {
+  justify-items: end;
+}
+.message.employee {
+  justify-items: start;
+}
+.message.system {
+  justify-items: stretch;
+}
+.message-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 0;
+}
+.message.manager .message-meta {
+  justify-content: flex-end;
+}
+.message-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  font-size: 11px;
+  font-weight: 700;
+  border: 1px solid rgba(31, 67, 125, 0.1);
+}
+.message-avatar.manager {
+  background: rgba(31, 67, 125, 0.12);
+  color: var(--accent-strong);
+}
+.message-avatar.employee {
+  background: #ffffff;
+  color: var(--accent-strong);
+}
+.message-avatar.system {
+  background: rgba(35, 30, 23, 0.08);
+  color: var(--muted);
+}
+.message-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.message .who {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--muted);
+}
+.message .lane-label {
+  font-size: 11px;
+  color: var(--muted);
+  opacity: 0.88;
+}
+.transport-raw {
+  display: none;
+}
+.bubble {
+  border-radius: 10px;
+  padding: 8px 13px;
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: none;
+  max-width: min(720px, 100%);
+}
+.message.manager .bubble {
+  background: var(--accent);
+  color: #fff;
+}
+.message.employee .bubble {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  color: var(--text);
+}
+.message.system .bubble {
+  background: var(--soft);
+  border: 1px solid var(--line);
+  color: var(--text);
+}
 
 /* Inline artifact pill that sits in the .conv-header next to the title.
    Compact so it never crowds Coach or Micro-manage. Hover reveals the
@@ -777,7 +918,7 @@ button { font: inherit; cursor: pointer; }
   align-items: center;
   gap: 6px;
   background: var(--warn-soft);
-  border: 1px solid #ecd9b0;
+  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
   border-radius: 999px;
   padding: 4px 10px;
   font-size: 12px;
@@ -809,51 +950,70 @@ button { font: inherit; cursor: pointer; }
 }
 .artifact-where { display: none; }   /* full path lives in tooltip via title attr */
 
-.coach textarea {
-  width: 100%;
-  min-height: 48px;
-  max-height: 22vh;
-  resize: vertical;
-  border: 1px solid var(--line);
-  border-radius: 18px;
-  padding: 13px 15px;
-  font: inherit;
-  color: var(--text);
-  background: var(--surface);
-}
-.coach textarea:focus { outline: none; border-color: var(--accent); }
-.coach {
-  background: transparent;
-  border: none;
-  border-radius: 0;
-  padding: 0;
-}
-.coach-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
-.coach-note {
-  margin-top: 8px;
-  color: var(--muted);
-  font-size: 11px;
-  line-height: 1.4;
-}
+.coach {
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+}
+/* Send button embedded inside the textarea wrapper */
+.coach-input {
+  position: relative;
+}
+.coach-input textarea {
+  width: 100%;
+  min-height: 52px;
+  max-height: 22vh;
+  resize: vertical;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 12px 52px 12px 14px;
+  font: inherit;
+  color: var(--text);
+  background: var(--surface);
+  display: block;
+}
+.coach-input textarea:focus { outline: none; border-color: var(--accent); }
+.coach-input #send,
+.coach-input #ab-direct-send {
+  position: absolute;
+  bottom: 7px;
+  right: 7px;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 6px;
+  font-size: 16px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+}
+.coach-note {
+  margin-top: 6px;
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1.4;
+}
 .send-button {
   background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 10px;
-  padding: 10px 18px;
+  border-radius: 6px;
+  padding: 8px 16px;
   font-weight: 600;
 }
 .send-button:hover { background: var(--accent-strong); }
 .send-button:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
-.send-button:disabled { background: #c5d2cb; cursor: not-allowed; }
-
-.micro {
-  margin-top: 0;
-  position: sticky;
-  bottom: 0;
-  z-index: 2;
-  background: rgba(255, 255, 255, 0.4);
-}
+.send-button:disabled { background: color-mix(in srgb, var(--accent) 35%, var(--bg) 65%); cursor: not-allowed; }
+
+.micro {
+  margin-top: 0;
+  /* Removed: position:sticky / bottom:0 / z-index:2 — sticky caused the
+     micro-manage label to float over the coach section in the flex column.
+     It's now a normal flow element at the bottom of the support-stack. */
+}
 .micro summary {
   cursor: pointer;
   color: var(--muted);
@@ -870,10 +1030,10 @@ button { font: inherit; cursor: pointer; }
   transition: transform 100ms;
 }
 .micro[open] summary::before { transform: rotate(90deg); }
-.micro-log {
-  margin: 0 16px 16px;
-  background: #1f2a24;
-  color: #c5d2cb;
+.micro-log {
+  margin: 0 16px 16px;
+  background: color-mix(in srgb, var(--text) 12%, transparent);
+  color: var(--muted);
   border-radius: 8px;
   padding: 12px 14px;
   font-family: Consolas, Menlo, monospace;
@@ -910,7 +1070,7 @@ button { font: inherit; cursor: pointer; }
 
 .modal {
   background: var(--surface);
-  border-radius: 16px;
+  border-radius: 10px;
   box-shadow: var(--shadow-lg);
   width: 100%;
   max-width: 540px;
@@ -953,8 +1113,8 @@ button { font: inherit; cursor: pointer; }
 .ghost {
   background: transparent;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 9px 14px;
+  border-radius: 6px;
+  padding: 7px 13px;
   color: var(--text);
   font-weight: 500;
 }
@@ -964,9 +1124,11 @@ button { font: inherit; cursor: pointer; }
 .search {
   width: 100%;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 14px;
+  border-radius: 6px;
+  padding: 8px 12px;
   font: inherit;
+  background: var(--bg);
+  color: var(--text);
   margin-bottom: 14px;
 }
 .search:focus { outline: none; border-color: var(--accent); }
@@ -985,9 +1147,9 @@ button { font: inherit; cursor: pointer; }
   text-align: left;
   background: transparent;
   border: 1px solid var(--line);
-  border-radius: 10px;
-  padding: 10px 14px;
-  margin-bottom: 6px;
+  border-radius: 6px;
+  padding: 9px 12px;
+  margin-bottom: 5px;
   display: grid;
   gap: 2px;
   color: var(--text);
@@ -1063,42 +1225,47 @@ button { font: inherit; cursor: pointer; }
 .install-status { color: var(--muted); flex: 1; font-size: 12px; }
 button.small { padding: 4px 10px; font-size: 12px; }
 
-@media (max-width: 820px) {
+@media (max-width: 820px) {
   /* Single-column reflow — the rigid 100vh layout doesn't make sense at
      mobile width because the rail stacks above the conversation. Let the
      page scroll naturally and bound the messages section to keep the
      coach + micro-manage reachable at the bottom. */
   html, body { height: auto; }
   body { overflow: auto; }
-  .page { height: auto; min-height: 100vh; }
+  .page { height: auto; min-height: 100vh; padding: 16px; gap: 14px; }
   .layout { grid-template-columns: 1fr; flex: initial; }
   .rail { max-height: none; overflow-y: visible; }
-  .conversation { height: auto; min-height: 60vh; overflow: visible; }
-  #active-conv { flex: initial; }
-  .conv-stream { flex: initial; }
-  .messages { flex: initial; max-height: 60vh; }
-  .header { flex-wrap: wrap; }
-  .conv-topline { align-items: flex-start; flex-direction: column; }
-  .conv-header h2 { font-size: 28px; }
-  .thread-surface {
-    padding: 16px 14px 14px;
-  }
-  .panel-summary-text {
-    white-space: normal;
-  }
-  .message,
-  .message.manager,
-  .message.employee,
-  .message.system {
-    max-width: 100%;
-    padding-left: 0;
-    padding-right: 0;
-  }
-  .team-roster {
-    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-  }
-  .popover { width: min(320px, calc(100vw - 60px)); }
-}
+  .conversation { height: auto; min-height: auto; overflow: visible; }
+  #active-conv { flex: initial; overflow-y: visible; }
+  .conv-stream { flex: initial; }
+  /* Mobile: thread panel reverts to normal block flow; page scrolls naturally */
+  .panel-details--thread { flex: initial; min-height: auto; display: block; max-height: 45vh; }
+  .panel-details--thread .messages { flex: initial; min-height: auto; max-height: calc(45vh - 44px); overflow-y: auto; }
+  .header { flex-wrap: wrap; gap: 10px; }
+  /* Welcome inline: allow wrapping on mobile */
+  .welcome { flex: 1 1 100%; font-size: 12px; }
+  .conv-topline { align-items: flex-start; flex-direction: column; }
+  .conv-job-title { font-size: 14px; }
+  .thread-surface {
+    padding: 16px 14px 14px;
+  }
+  .panel-summary-text {
+    white-space: normal;
+  }
+  .team-roster {
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  }
+  .popover { width: min(320px, calc(100vw - 60px)); }
+  .quick-coach-row { flex-wrap: wrap; }
+  .quick-coach-btn { font-size: 11px; }
+}
+
+@media (max-width: 480px) {
+  /* Very narrow: hide welcome text to give maximum space to conversations */
+  .welcome { display: none; }
+  .page { padding: 12px; gap: 10px; }
+  .header-title { font-size: 17px; }
+}
 
 /* ---------------------------------------------------------------- */
 /* Issue #347 — Pizza tracker (R1), template picker (R2), totals (R4) */
@@ -1145,8 +1312,8 @@ button.small { padding: 4px 10px; font-size: 12px; }
   z-index: 0;
 }
 .tracker .tracker-row .stage:first-child::before { display: none; }
-.tracker .stage.done::before,
-.tracker .stage.current::before { background: var(--accent); }
+.tracker .stage.done::before { background: var(--done); }
+.tracker .stage.current::before { background: var(--warn); }
 .tracker .stage-circle {
   width: 26px; height: 26px;
   border-radius: 50%;
@@ -1162,15 +1329,15 @@ button.small { padding: 4px 10px; font-size: 12px; }
   z-index: 2;
 }
 .tracker .stage.done .stage-circle {
-  background: var(--accent);
-  border-color: var(--accent);
+  background: var(--done);
+  border-color: var(--done);
   color: #fff;
 }
 .tracker .stage.current .stage-circle {
-  background: var(--accent-soft);
-  border-color: var(--accent);
-  color: var(--accent-strong);
-  box-shadow: 0 0 0 4px rgba(61, 138, 110, 0.10);
+  background: var(--warn);
+  border-color: var(--warn);
+  color: #fff;
+  box-shadow: 0 0 0 4px rgba(176, 132, 66, 0.15);
 }
 .tracker .stage-label {
   font-size: 11px;
@@ -1214,22 +1381,19 @@ button.small { padding: 4px 10px; font-size: 12px; }
   .tracker-active-label { display: block; }
 }
 
-/* Template picker popover (R2). Absolute-positioned inside .coach-actions
-   so opening it does not push the textarea down. */
-.coach-actions { position: relative; }
+/* Template picker popover. Fixed-position so it escapes overflow:hidden/auto
+   ancestors (#active-conv, .panel-details). JS sets right/bottom on open. */
 .template-popover {
-  position: absolute;
-  bottom: 44px;
-  right: 0;
+  position: fixed;
   width: 320px;
   max-height: 360px;
-  overflow: auto;
+  overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: var(--shadow-lg);
-  padding: 12px;
-  z-index: 10;
+  padding: 10px;
+  z-index: 200;
 }
 .template-popover .group {
   padding: 6px 0;
@@ -1276,16 +1440,17 @@ button.small { padding: 4px 10px; font-size: 12px; }
 .template-popover .template-row strong { font-size: 13px; font-weight: 500; }
 .template-popover .template-row span { font-size: 12px; color: var(--muted); }
 
-/* Totals line (R4). 12px muted, no border, single row that wraps if it
-   absolutely must. Discoverable via hover tooltips per spec R4.4. */
-.totals {
-  font-size: 11px;
-  color: var(--muted);
-  padding-top: 2px;
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
+/* Totals line — now inside the tracker inline section, below tracker-note. */
+.totals {
+  font-size: 11px;
+  color: var(--muted);
+  padding-top: 6px;
+  margin-top: 6px;
+  border-top: 1px solid var(--line);
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
 .totals span { cursor: help; }
 .totals .sep { color: var(--line); }
 .totals strong { color: var(--text); font-weight: 600; }
@@ -1294,67 +1459,67 @@ button.small { padding: 4px 10px; font-size: 12px; }
 /* ── Issue #385: Team roster, Employee selector, Lock badges, Hire notice ── */
 
 /* Team roster — horizontal chip row above conv list */
-.team-roster {
-  display: grid;
-  gap: 10px;
-}
-.roster-chip {
-  display: grid;
-  grid-template-columns: 48px minmax(0, 1fr);
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  min-height: 74px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(31, 67, 125, 0.1);
-  font-size: 12px;
-  color: var(--text);
-  cursor: pointer;
-  overflow: hidden;
-  padding: 12px 14px;
-  text-align: left;
-  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
-}
-.roster-chip.active {
-  border-color: rgba(31, 67, 125, 0.22);
-  background: rgba(223, 231, 245, 0.92);
-  box-shadow: 0 14px 28px rgba(31, 67, 125, 0.1);
-}
-.roster-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #ffffff;
-  color: var(--accent-strong);
-  font-size: 12px;
-  font-weight: 700;
-  border: 1px solid rgba(31, 67, 125, 0.1);
-  overflow: hidden;
-}
-.roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
-.roster-copy {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-}
-.roster-copy strong {
-  font-size: 16px;
-  font-weight: 700;
-  color: var(--text);
-  line-height: 1.25;
-}
-.roster-copy small {
-  font-size: 13px;
-  color: var(--muted);
-  line-height: 1.4;
-}
-.roster-chip--all .roster-avatar {
-  background: var(--accent-soft);
-}
+.team-roster {
+  display: grid;
+  gap: 10px;
+}
+.roster-chip {
+  display: grid;
+  grid-template-columns: 40px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 58px;
+  border-radius: 8px;
+  background: var(--soft);
+  border: 1px solid var(--line);
+  font-size: 12px;
+  color: var(--text);
+  cursor: pointer;
+  overflow: hidden;
+  padding: 10px 12px;
+  text-align: left;
+  box-shadow: none;
+}
+.roster-chip.active {
+  border-color: rgba(31, 67, 125, 0.25);
+  background: var(--accent-soft);
+  box-shadow: none;
+}
+.roster-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  color: var(--accent-strong);
+  font-size: 12px;
+  font-weight: 700;
+  border: 1px solid var(--line);
+  overflow: hidden;
+}
+.roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.roster-copy {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.roster-copy strong {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--text);
+  line-height: 1.25;
+}
+.roster-copy small {
+  font-size: 13px;
+  color: var(--muted);
+  line-height: 1.4;
+}
+.roster-chip--all .roster-avatar {
+  background: var(--accent-soft);
+}
 .roster-chip-add {
   width: 36px;
   height: 36px;
@@ -1482,3 +1647,342 @@ button.small { padding: 4px 10px; font-size: 12px; }
 }
 #hire-notice p { margin: 0 0 12px; font-size: 14px; color: var(--text); }
 .hire-notice-actions { display: flex; align-items: center; gap: 10px; }
+
+/* ── Issue #442: A/B Testing Mode ─────────────────────────────────────── */
+
+/* Modal step 2 — A/B toggle */
+#ab-toggle-wrap {
+  margin-top: 12px;
+  padding: 10px 12px;
+  background: var(--accent-soft);
+  border-radius: 8px;
+  border: 1px solid var(--line);
+}
+.ab-toggle-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text);
+  cursor: pointer;
+}
+.ab-toggle-label input[type="checkbox"] { cursor: pointer; }
+#ab-toggle-explanation {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+/* Rail badge */
+.ab-badge {
+  margin-left: auto;
+  padding: 1px 6px;
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  border-radius: 4px;
+  background: var(--accent-soft);
+  color: var(--accent);
+  border: 1px solid var(--accent-soft);
+  flex-shrink: 0;
+}
+
+/* Full-panel A/B split: #conversation becomes a flex row */
+#conversation.ab-mode {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+}
+
+#conversation.ab-mode #active-conv {
+  flex: 1;
+  min-width: 0;
+  overflow-y: auto;
+  border-right: 1px solid var(--line);
+}
+
+/* Direct (B) panel — flex column matching #active-conv so topline/status/reply
+   stay pinned and only the log area scrolls. */
+#ab-direct-panel {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+/* Identity label in conv-topline */
+.ab-direct-identity {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.ab-direct-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+}
+
+/* Simple Running → Done progress row in the tracker area */
+.ab-direct-progress {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 8px 4px 0;
+  color: var(--muted);
+}
+.ab-direct-progress.running { color: var(--accent); }
+.ab-direct-progress.done    { color: var(--done); }
+.ab-direct-progress.failed  { color: var(--danger); }
+
+/* Raw event log — scrolls inside the thread <details> the same way
+   .messages does in A (the <details> itself has overflow-y: auto). */
+#ab-direct-log {
+  margin: 0;
+  padding: 4px 16px 12px;
+  font-size: 11px;
+  font-family: var(--mono, monospace);
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--muted);
+  line-height: 1.5;
+}
+
+@media (max-width: 900px) {
+  #conversation.ab-mode { flex-direction: column; }
+}
+
+/* ── Task-pane surface (embedded in Office sidebar at ~375px) ────────────────
+   Applied when the Hub is loaded with ?surface=task-pane. The JS sets
+   body:is([data-surface="task-pane"],[data-surface="extension"]). No media queries — this is a surface
+   flag, not a viewport breakpoint. */
+
+body:is([data-surface="task-pane"],[data-surface="extension"]) {
+  font-size: 13px;
+  overflow: auto;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .page {
+  padding: 10px 12px 8px;
+  gap: 10px;
+  height: auto;
+  min-height: 100vh;
+}
+/* Hide the full-width welcome header — task pane has no room for it */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .header { display: none; }
+/* Collapse rail + conversation into a single column */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .layout {
+  grid-template-columns: 1fr;
+  gap: 0;
+}
+/* Rail: strip to just the "+ New job" button so the user can always start a
+   new job even after a conversation is active. All other rail children stay
+   hidden — task pane shows one job at a time with no history sidebar. */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .rail {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: none;
+  box-shadow: none;
+  border-radius: 0;
+  overflow: visible;
+  padding: 0 0 8px;
+  gap: 0;
+  grid-row: 1;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .rail > :not(#new-conv-btn):not(.tp-project-label) { display: none; }
+/* Hidden by default — only shown inside the task-pane surface rail */
+.tp-project-label { display: none; }
+body:is([data-surface="task-pane"],[data-surface="extension"]) .tp-project-label {
+  display: block;
+  font-size: 11px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+  margin-right: 8px;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) #new-conv-btn {
+  font-size: 12px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  width: auto;
+}
+/* Hide the "+ New job" strip when the modal is open — redundant while modal
+   is in view, and it avoids the button floating above the backdrop overlay. */
+body:is([data-surface="task-pane"],[data-surface="extension"]):has(.modal-backdrop.open) .rail { display: none; }
+/* Tighter conversation card */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .conversation {
+  border-radius: 16px;
+  padding: 12px 14px;
+  height: auto;
+  overflow: visible;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) #active-conv {
+  overflow: visible;
+  flex: initial;
+}
+/* Shrink identity avatar to fit narrower column */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .identity-avatar {
+  width: 36px; height: 36px;
+  border-radius: 12px;
+  font-size: 13px;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .identity-copy strong { font-size: 13px; }
+body:is([data-surface="task-pane"],[data-surface="extension"]) .identity-copy small  { font-size: 10px; }
+body:is([data-surface="task-pane"],[data-surface="extension"]) .conv-header h2       { font-size: 15px; }
+body:is([data-surface="task-pane"],[data-surface="extension"]) .conv-job-title       { font-size: 12px; }
+/* Compact message bubbles */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .bubble {
+  font-size: 12px;
+  padding: 7px 11px;
+  border-radius: 13px;
+}
+/* Compact coach input */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .coach-input textarea {
+  font-size: 12px;
+  min-height: 44px;
+  padding: 10px 44px 10px 12px;
+}
+/* Compact micro-manage log */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .micro-log { font-size: 11px; }
+/* Thread panel: normal block flow, page scrolls naturally */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .panel-details--thread {
+  flex: initial;
+  min-height: auto;
+  display: block;
+  max-height: 40vh;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .panel-details--thread .messages {
+  flex: initial;
+  max-height: calc(40vh - 44px);
+  overflow-y: auto;
+}
+/* Modal bottom-sheet instead of center-screen */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-backdrop {
+  align-items: flex-end;
+  padding: 0;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal {
+  border-radius: 18px 18px 0 0;
+  max-width: 100%;
+  max-height: 88vh;
+}
+/* Tighter modal chrome at task-pane widths */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-header { padding: 16px 16px 10px; }
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-body { padding: 12px 16px; }
+/* Stack footer: label on top (single line, ellipsis) then buttons in a row.
+   Prevents "Just describe what you need" + long job names from bloating height. */
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-footer {
+  padding: 10px 12px 14px;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-footer .left {
+  font-size: 12px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-footer .right {
+  display: flex;
+  gap: 6px;
+}
+body:is([data-surface="task-pane"],[data-surface="extension"]) .modal-footer .right button {
+  flex: 1;
+  font-size: 11px;
+  padding: 7px 6px;
+  text-align: center;
+}
+
+/* ── Word context bar (between rail and conversation in task-pane) ─────────── */
+.word-context-bar { display: none; }
+body:is([data-surface="task-pane"],[data-surface="extension"]) .word-context-bar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px 4px;
+  font-size: 11px;
+  color: var(--muted);
+  border-bottom: 1px solid var(--border, rgba(0,0,0,0.07));
+  min-height: 28px;
+  overflow: hidden;
+}
+.word-ctx-text {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.word-ctx-refresh {
+  background: none;
+  border: none;
+  color: var(--muted);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 0 2px;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.word-ctx-refresh:hover { color: var(--accent); }
+
+/* ── Word context card in step 2 modal ────────────────────────────────────── */
+.word-context-card {
+  border: 1px solid var(--border, rgba(0,0,0,0.10));
+  border-radius: 8px;
+  margin-top: 8px;
+  font-size: 12px;
+  overflow: hidden;
+}
+.word-ctx-card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 7px 10px;
+  background: var(--surface, rgba(0,0,0,0.03));
+  cursor: default;
+}
+.word-ctx-card-label {
+  flex: 1;
+  font-weight: 600;
+  font-size: 11px;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.word-ctx-card-toggle {
+  background: none;
+  border: none;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 0 2px;
+  flex-shrink: 0;
+}
+.word-ctx-card-toggle:hover { color: var(--accent); }
+.word-ctx-card-body {
+  padding: 8px 10px;
+  color: var(--fg, #231e17);
+  font-size: 11px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+  word-break: break-word;
+  max-height: 120px;
+  overflow-y: auto;
+  border-top: 1px solid var(--border, rgba(0,0,0,0.07));
+}
+
+/* ── Extension surface overrides (Chrome/browser extensions) ─────────────────
+   Inherits all task-pane layout rules (via :is() above) but hides the
+   project label since extensions work on web pages, not local project paths. */
+body[data-surface="extension"] .tp-project-label { display: none; }