fraim-framework 2.0.154 → 2.0.159

package/public/ai-hub/styles.css

@@ -1,19 +1,20 @@
-: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);
+: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;
+  --done: #2e7d32;
+  --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. */
@@ -26,12 +27,12 @@ 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 {
+  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%);
   line-height: 1.5;
   font-size: 15px;
   /* Issue #339 fix: bound the page to the viewport. The conversation
@@ -41,51 +42,41 @@ body {
 
 button { font: inherit; cursor: pointer; }
 
-.page {
-  max-width: none;
-  width: 100%;
-  margin: 0;
-  padding: 24px;
+.page {
+  max-width: none;
+  width: 100%;
+  margin: 0;
+  padding: 20px 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 — single-row strip: title | welcome text | project button */
+.header {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+.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: rgba(255, 255, 255, 0.5);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 10px 16px;
   color: var(--text);
   box-shadow: var(--shadow);
   max-width: 360px;
@@ -100,15 +91,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; }
@@ -197,94 +185,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: 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);
+}
 /* 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 +283,24 @@ 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;
-}
+.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-persona-chip {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 16px;
+  background: #ffffff;
+  border: 2px solid rgba(31, 67, 125, 0.14);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -323,28 +311,28 @@ 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: 16px; }
 .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 {
+  background: rgba(248, 244, 235, 0.94);
+  border: 1px solid var(--line);
+  border-radius: 30px;
+  box-shadow: var(--shadow-lg);
+  padding: 24px 26px;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -353,225 +341,291 @@ 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: 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 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: 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;
-  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: #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; }
 
-.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: 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;
-  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 fills the available space between tracker and coach.
+   The panel itself is the scroll container — the summary stays sticky at the
+   top so it's always visible, and tracker + coach below are never obscured. */
+.panel-details--thread {
+  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%);
+  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 +635,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 +672,153 @@ 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: 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: 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: 18px;
+  padding: 9px 14px;
+  font-size: 14px;
+  line-height: 1.5;
+  box-shadow: 0 4px 12px rgba(35, 30, 23, 0.04);
+  max-width: min(720px, 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);
+}
 
 /* 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
@@ -809,32 +860,52 @@ 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: 18px;
+  padding: 13px 52px 13px 15px;
+  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: 8px;
+  right: 8px;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border-radius: 10px;
+  font-size: 18px;
+  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;
@@ -847,13 +918,12 @@ button { font: inherit; cursor: pointer; }
 .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);
-}
+.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 +940,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: #1f2a24;
+  color: #c5d2cb;
   border-radius: 8px;
   padding: 12px 14px;
   font-family: Consolas, Menlo, monospace;
@@ -1063,42 +1133,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 +1220,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 +1237,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 +1289,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;
   box-shadow: var(--shadow-lg);
   padding: 12px;
-  z-index: 10;
+  z-index: 200;
 }
 .template-popover .group {
   padding: 6px 0;
@@ -1276,16 +1348,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 +1367,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: 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);
+}
 .roster-chip-add {
   width: 36px;
   height: 36px;
@@ -1482,3 +1555,113 @@ 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; }
+}