fraim 2.0.159 → 2.0.161

package/public/ai-hub/styles.css

@@ -1,25 +1,107 @@
 :root {
-  color-scheme: light;
-  --bg: #ebe4d7;
-  --surface: #f8f4eb;
-  --soft: #f1ebde;
-  --line: #d7cdbf;
-  --text: #231e17;
-  --muted: #7c6f61;
+  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: #fffaf0;
+  --warn-soft: #fdf6e8;
   --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. */
+  --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; }
@@ -28,16 +110,28 @@ html, body { margin: 0; padding: 0; }
 
 html, body { height: 100%; }
 body {
-  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+  /* 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:
-    radial-gradient(circle at top left, rgba(255, 255, 255, 0.45), transparent 28%),
-    linear-gradient(180deg, #efe8dc 0%, var(--bg) 100%);
+  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; }
@@ -46,7 +140,8 @@ button { font: inherit; cursor: pointer; }
   max-width: none;
   width: 100%;
   margin: 0;
-  padding: 20px 24px 16px;
+  /* Push content below traffic lights on macOS hiddenInset titlebar */
+  padding: calc(20px + var(--titlebar-inset)) 24px 16px;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -54,11 +149,17 @@ button { font: inherit; cursor: pointer; }
   min-height: 0;
 }
 
-/* Header — single-row strip: title | welcome text | 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;
@@ -73,10 +174,10 @@ button { font: inherit; cursor: pointer; }
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  background: rgba(255, 255, 255, 0.5);
+  background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 14px;
-  padding: 10px 16px;
+  border-radius: 8px;
+  padding: 8px 14px;
   color: var(--text);
   box-shadow: var(--shadow);
   max-width: 360px;
@@ -131,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;
@@ -204,8 +302,8 @@ button { font: inherit; cursor: pointer; }
   align-self: start;
   max-height: 100%;
   overflow-y: auto;
-  border-radius: 28px;
-  background: rgba(248, 244, 235, 0.84);
+  border-radius: 10px;
+  background: var(--surface);
   box-shadow: var(--shadow);
 }
 .new-conv {
@@ -213,8 +311,8 @@ button { font: inherit; cursor: pointer; }
   background: var(--accent);
   color: #fff;
   border: none;
-  border-radius: 14px;
-  padding: 13px 16px;
+  border-radius: 8px;
+  padding: 11px 16px;
   font-weight: 600;
   box-shadow: var(--shadow);
 }
@@ -248,22 +346,22 @@ button { font: inherit; cursor: pointer; }
 .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;
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 10px 12px;
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
   color: var(--text);
-  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
+  box-shadow: none;
 }
 .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);
+  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 {
@@ -293,14 +391,13 @@ button { font: inherit; cursor: pointer; }
   -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);
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px solid var(--line);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -311,7 +408,7 @@ 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;
@@ -325,14 +422,13 @@ button { font: inherit; cursor: pointer; }
 .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 pane */
 .conversation {
-  background: rgba(248, 244, 235, 0.94);
+  background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 30px;
-  box-shadow: var(--shadow-lg);
-  padding: 24px 26px;
+  border-radius: 10px;
+  box-shadow: var(--shadow);
+  padding: 20px 22px;
   display: flex;
   flex-direction: column;
   gap: 14px;
@@ -351,16 +447,16 @@ button { font: inherit; cursor: pointer; }
 }
 .empty-state::before {
   content: "F";
-  width: 56px;
-  height: 56px;
-  border-radius: 18px;
+  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: 24px;
+  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; }
@@ -404,16 +500,16 @@ button { font: inherit; cursor: pointer; }
   min-width: 0;
 }
 .identity-avatar {
-  width: 52px;
-  height: 52px;
-  border-radius: 18px;
-  background: #ffffff;
-  border: 1px solid rgba(31, 67, 125, 0.14);
+  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: 16px;
+  font-size: 15px;
   font-weight: 700;
   color: var(--accent-strong);
   flex-shrink: 0;
@@ -454,12 +550,12 @@ button { font: inherit; cursor: pointer; }
   background: rgba(31, 67, 125, 0.14);
 }
 .run-state-pill.failed {
-  background: #fbebeb;
+  background: color-mix(in srgb, var(--danger) 12%, transparent);
   color: var(--danger);
 }
 .run-state-pill.completed {
-  background: #e4f0ea;
-  color: #2c6b4e;
+  background: color-mix(in srgb, var(--done) 14%, transparent);
+  color: var(--done);
 }
 .conv-header {
   display: flex;
@@ -502,9 +598,9 @@ button { font: inherit; cursor: pointer; }
   flex-shrink: 0;
 }
 .panel-details {
-  background: rgba(255, 255, 255, 0.4);
-  border: 1px solid rgba(31, 67, 125, 0.08);
-  border-radius: 22px;
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
   overflow: hidden;
 }
 .panel-details > summary {
@@ -603,15 +699,11 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   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. */
+/* Thread panel */
 .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%);
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: var(--bg);
   overflow-y: auto;
   overflow-x: hidden;
   flex: 1;
@@ -681,9 +773,9 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   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;
+  background: var(--soft);
+  border: 1px solid var(--line);
+  border-radius: 8px;
   padding: 8px 12px;
 }
 
@@ -693,12 +785,10 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   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%);
+  padding: 16px 18px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+  background: var(--bg);
 }
 
 .thread-surface-label {
@@ -798,11 +888,11 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   display: none;
 }
 .bubble {
-  border-radius: 18px;
-  padding: 9px 14px;
+  border-radius: 10px;
+  padding: 8px 13px;
   font-size: 14px;
   line-height: 1.5;
-  box-shadow: 0 4px 12px rgba(35, 30, 23, 0.04);
+  box-shadow: none;
   max-width: min(720px, 100%);
 }
 .message.manager .bubble {
@@ -810,13 +900,13 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   color: #fff;
 }
 .message.employee .bubble {
-  background: rgba(255, 255, 255, 0.86);
-  border: 1px solid rgba(31, 67, 125, 0.1);
+  background: var(--surface);
+  border: 1px solid var(--line);
   color: var(--text);
 }
 .message.system .bubble {
-  background: rgba(255, 255, 255, 0.6);
-  border: 1px solid rgba(35, 30, 23, 0.08);
+  background: var(--soft);
+  border: 1px solid var(--line);
   color: var(--text);
 }
 
@@ -828,7 +918,7 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   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;
@@ -876,8 +966,8 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   max-height: 22vh;
   resize: vertical;
   border: 1px solid var(--line);
-  border-radius: 18px;
-  padding: 13px 52px 13px 15px;
+  border-radius: 8px;
+  padding: 12px 52px 12px 14px;
   font: inherit;
   color: var(--text);
   background: var(--surface);
@@ -887,13 +977,13 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 .coach-input #send,
 .coach-input #ab-direct-send {
   position: absolute;
-  bottom: 8px;
-  right: 8px;
-  width: 34px;
-  height: 34px;
+  bottom: 7px;
+  right: 7px;
+  width: 32px;
+  height: 32px;
   padding: 0;
-  border-radius: 10px;
-  font-size: 18px;
+  border-radius: 6px;
+  font-size: 16px;
   line-height: 1;
   display: flex;
   align-items: center;
@@ -910,13 +1000,13 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   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; }
+.send-button:disabled { background: color-mix(in srgb, var(--accent) 35%, var(--bg) 65%); cursor: not-allowed; }
 
 .micro {
   margin-top: 0;
@@ -942,8 +1032,8 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 .micro[open] summary::before { transform: rotate(90deg); }
 .micro-log {
   margin: 0 16px 16px;
-  background: #1f2a24;
-  color: #c5d2cb;
+  background: color-mix(in srgb, var(--text) 12%, transparent);
+  color: var(--muted);
   border-radius: 8px;
   padding: 12px 14px;
   font-family: Consolas, Menlo, monospace;
@@ -980,7 +1070,7 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 
 .modal {
   background: var(--surface);
-  border-radius: 16px;
+  border-radius: 10px;
   box-shadow: var(--shadow-lg);
   width: 100%;
   max-width: 540px;
@@ -1023,8 +1113,8 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 .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;
 }
@@ -1034,9 +1124,11 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
 .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); }
@@ -1055,9 +1147,9 @@ img.coach-employee-avatar { object-fit: cover; border-radius: 4px; }
   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);
@@ -1298,9 +1390,9 @@ button.small { padding: 4px 10px; font-size: 12px; }
   overflow-y: auto;
   background: var(--surface);
   border: 1px solid var(--line);
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: var(--shadow-lg);
-  padding: 12px;
+  padding: 10px;
   z-index: 200;
 }
 .template-popover .group {
@@ -1373,39 +1465,39 @@ button.small { padding: 4px 10px; font-size: 12px; }
 }
 .roster-chip {
   display: grid;
-  grid-template-columns: 48px minmax(0, 1fr);
+  grid-template-columns: 40px minmax(0, 1fr);
   align-items: center;
-  gap: 12px;
+  gap: 10px;
   width: 100%;
-  min-height: 74px;
-  border-radius: 22px;
-  background: rgba(255, 255, 255, 0.5);
-  border: 1px solid rgba(31, 67, 125, 0.1);
+  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: 12px 14px;
+  padding: 10px 12px;
   text-align: left;
-  box-shadow: 0 10px 24px rgba(35, 30, 23, 0.04);
+  box-shadow: none;
 }
 .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);
+  border-color: rgba(31, 67, 125, 0.25);
+  background: var(--accent-soft);
+  box-shadow: none;
 }
 .roster-avatar {
-  width: 48px;
-  height: 48px;
-  border-radius: 16px;
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  background: #ffffff;
+  background: var(--surface);
   color: var(--accent-strong);
   font-size: 12px;
   font-weight: 700;
-  border: 1px solid rgba(31, 67, 125, 0.1);
+  border: 1px solid var(--line);
   overflow: hidden;
 }
 .roster-avatar img { width: 100%; height: 100%; object-fit: cover; }
@@ -1665,3 +1757,232 @@ button.small { padding: 4px 10px; font-size: 12px; }
 @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; }