:root {
  color-scheme: light dark;
  /* #ai-hub-polish: allow block-size:auto to animate (accordion open/close). */
  interpolate-size: allow-keywords;
  /* Light theme — Apple-style near-white */
  --bg: #f5f5f7;
  --surface: #ffffff;
  --soft: #E8E8E8;
  --line: rgba(0, 0, 0, 0.10);
  --text: #1A1A1A;
  --muted: #6B6B6B;
  --accent: #0071e3;
  --accent-strong: #0058b0;
  --accent-soft: #eef4ff;
  --warn: #b08442;
  --warn-soft: #fdf6e8;
  --done: #2e7d32;
  --danger: #a24747;
  --state-working: #006adc;
  --state-working-soft: rgba(0, 106, 220, 0.13);
  --state-waiting: #d2261f;
  --state-waiting-soft: rgba(210, 38, 31, 0.13);
  --state-complete: #20833a;
  --state-complete-soft: rgba(32, 131, 58, 0.13);
  --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;
  /* Issue #566: personalization / "teach" accent (growth offer + taught badge). */
  --teach: #5b3fa8;
  --teach-soft: #f6f2ff;
  --teach-line: #d8cdf2;
  /* 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;
    --state-working: #4da3ff;
    --state-working-soft: rgba(77, 163, 255, 0.18);
    --state-waiting: #ff5a4f;
    --state-waiting-soft: rgba(255, 90, 79, 0.18);
    --state-complete: #46c76a;
    --state-complete-soft: rgba(70, 199, 106, 0.18);
    --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);
  }
}

/* ── Native platform feel ───────────────────────────────────────────────────
   html.mac / html.win / html.linux are set pre-paint (see index.html). macOS
   renders SF Pro with grayscale smoothing — Chromium's default subpixel makes
   SF look heavy/fringed — while Windows keeps its native ClearType rendering
   for Segoe UI Variable. The in-content design system (Apple-blue accent,
   near-white surfaces, pill controls) stays consistent on both: an Apple-grade
   product that wears each OS's native window chrome. */
html.mac body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Electron window-chrome integration. The topmost bar (gs-rail on first run,
   otherwise hub-tabs) IS the OS titlebar: draggable, with a safe gutter for the
   native window controls — traffic lights top-left on macOS, min/max/close
   top-right on Windows. Interactive children opt back out of the drag region. */
html.electron .gs-rail,
html.electron .hub-tabs {
  -webkit-app-region: drag;
}
html.electron .gs-rail button,
html.electron .gs-rail a,
html.electron .hub-tabs button,
html.electron .hub-tabs a,
html.electron .hub-tabs select {
  -webkit-app-region: no-drag;
}
/* Titlebar owns the top inset now, so the work area starts snug below the bar. */
html.electron .page { padding-top: 14px; }

/* macOS hiddenInset: reserve top-left space for the traffic lights on the
   topmost visible bar. (titlebar-area env() vars are a Windows WCO feature and
   read 0 on macOS, so the inset is explicit here.) */
html.mac.electron .hub-tabs { padding-left: 78px; }
html.mac.electron .gs-rail { padding-left: 78px; min-height: 30px; }
html.mac.electron .gs-rail:not([hidden]) ~ .hub-tabs { padding-left: 0; }

/* Windows 11 titleBarOverlay: reserve top-right space for min/max/close on the
   topmost visible bar so the avatar and actions never sit under the controls. */
html.win.electron .hub-tabs { padding-right: 146px; }
html.win.electron .gs-rail { padding-right: 146px; }
html.win.electron .gs-rail:not([hidden]) ~ .hub-tabs { padding-right: 8px; }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

html, body { height: 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;
  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;
  /* Push content below traffic lights on macOS hiddenInset titlebar */
  padding: calc(20px + var(--titlebar-inset)) 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100vh;
  min-height: 0;
}

/* 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: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--text);
  box-shadow: var(--shadow);
  max-width: 360px;
}
.project-button:hover { background: var(--soft); }
.project-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.project-button .folder { color: var(--muted); font-size: 13px; }
.project-button strong {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 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; }
.welcome .concept {
  position: relative;
  font-weight: 600;
  color: var(--accent);
}
.welcome .info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  margin-left: 3px;
  margin-right: 1px;
  cursor: pointer;
  vertical-align: 1px;
  border: none;
  font-family: serif;
  font-style: italic;
}
.welcome .info:hover { background: var(--accent); color: #fff; }
.welcome .info:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  z-index: 50;
  font-weight: 400;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  display: none;
}
.popover.open { display: block; }
.popover .pop-title {
  display: block;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.popover .pop-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
}
.popover .pop-link:hover { text-decoration: underline; }
.popover .pop-jobs {
  display: none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.popover .pop-jobs.open { display: grid; gap: 8px; }
.popover .pop-jobs .job-row {
  display: grid;
  gap: 1px;
  font-size: 13px;
}
.popover .pop-jobs .job-row strong {
  color: var(--accent);
  font-weight: 600;
}
.popover .pop-jobs .job-row span {
  color: var(--muted);
}

/* Layout */
.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: 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-employee-group {
  display: grid;
  gap: 6px;
}
.conv-employee-group > summary {
  list-style: none;
}
.conv-employee-group > summary::-webkit-details-marker { display: none; }
.conv-employee-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 4px 2px;
  color: var(--muted);
  cursor: pointer;
}
.conv-employee-avatar {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}
img.conv-employee-avatar {
  object-fit: cover;
}
.conv-employee-tab::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  transition: transform 120ms ease;
}
.conv-employee-group[open] .conv-employee-tab::before { transform: rotate(90deg); }
.conv-employee-tab-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.conv-employee-tab-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-employee-tab-detail {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.conv-employee-tab-count {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}
.conv-employee-add {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--accent);
  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}
.conv-employee-add:hover {
  background: var(--accent-soft);
  border-color: rgba(0,113,227,.28);
}
/* Issue #550: Watercooler Conversations group modifier */
/* R4: dashed avatar placeholder — no image or persona initials */
.conv-employee-avatar--adhoc {
  border-style: dashed;
  border-color: var(--muted);
  background: transparent;
  color: transparent;
}
/* R5: muted label color for the Watercooler group header */
.conv-employee-group--adhoc .conv-employee-tab-label {
  color: var(--muted);
  font-weight: 600;
}
.conv-employee-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding-left: 23px;
}
.conv-item {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  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-persona-name {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  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-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;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-strong);
  overflow: hidden;
  line-height: 1;
  text-transform: uppercase;
}
.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;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 4px;
}
.conv-status.running { color: var(--accent); }
.conv-status.attention { color: var(--warn); }
.conv-status.failed { color: var(--danger); }
.conv-status.working { color: var(--state-working); }
.conv-status.waiting { color: var(--state-waiting); }
.conv-status.complete { color: var(--state-complete); }
/* #549 R4: Amber label for manager-stopped runs in the conversation rail. */
.conv-status.stopped { color: var(--warn); }
.state-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--line);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 10%, transparent);
}
.conv-state-dot {
  align-self: center;
  margin-left: auto;
}

/* 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;
  min-height: 0;
  min-width: 0;
  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: 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: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
#active-conv[hidden] { display: none; }

.conv-header,
.support-stack,
.panel-details:not(.panel-details--thread),
.micro {
  flex-shrink: 0;
}
.conv-topline {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* #521: Stop button — interrupt a working employee and park it "waiting on you". */
.run-stop-btn {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: #b42318;
  background: #fef3f2;
  border: 1px solid #fda29b;
  border-radius: 14px;
  padding: 5px 12px;
  cursor: pointer;
  transition: background .12s;
}
.run-stop-btn:hover { background: #fee4e2; }
.run-stop-btn:disabled { opacity: .55; cursor: default; }
/* 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;
  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.working {
  background: var(--state-working-soft);
  color: var(--state-working);
}
.run-state-pill.waiting {
  background: var(--state-waiting-soft);
  color: var(--state-waiting);
}
.run-state-pill.complete {
  background: var(--state-complete-soft);
  color: var(--state-complete);
}
.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);
}
/* #549 R3: Amber STOPPED pill — intentional pause, distinct from red WAITING ON YOU. */
.run-state-pill.stopped {
  background: color-mix(in srgb, var(--warn) 15%, transparent);
  color: var(--warn);
}
.run-state-pill.approved {
  background: color-mix(in srgb, #2e7d32 18%, transparent);
  color: #2e7d32;
  font-weight: 800;
}
.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: 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;
  width: 100%;
  flex: 0 0 auto;
}
.conversation-status > * {
  min-width: 0;
}
.delegation-ledger {
  display: block;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.delegation-ledger[hidden] {
  display: none;
}
.manager-oversight-board {
  display: block;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 84%, var(--accent) 16%);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.manager-oversight-board[hidden] {
  display: none;
}
.manager-oversight-board > summary {
  padding: 12px;
}
.manager-oversight-board > summary::before {
  margin-top: 2px;
}
.manager-oversight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.manager-oversight-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.manager-oversight-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.manager-oversight-copy strong {
  font-size: 15px;
  color: var(--text);
}
.manager-oversight-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
}
.manager-oversight-list {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}
.manager-plan-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.manager-plan-step {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}
.manager-plan-body {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.manager-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.manager-plan-top strong,
.manager-plan-empty strong {
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.manager-plan-status {
  flex-shrink: 0;
  border-radius: 999px;
  padding: 2px 7px;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}
.manager-plan-status.status-running,
.manager-plan-status.status-submitted {
  border-color: color-mix(in srgb, #0b63ce 28%, var(--line));
  background: #e8f1ff;
  color: #0b63ce;
}
.manager-plan-status.status-reviewed,
.manager-plan-status.status-completed {
  border-color: color-mix(in srgb, #1c7c36 30%, var(--line));
  background: #e9f7ee;
  color: #1c7c36;
}
.manager-plan-status.status-blocked,
.manager-plan-status.status-failed {
  border-color: color-mix(in srgb, #b3261e 28%, var(--line));
  background: #fdecea;
  color: #b3261e;
}
.manager-plan-meta,
.manager-plan-review,
.manager-plan-instructions,
.manager-plan-empty span {
  font-size: 11px;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.manager-plan-review {
  color: var(--text);
}
.manager-plan-empty {
  display: grid;
  gap: 3px;
  border: 1px dashed var(--line);
  background: var(--surface);
  border-radius: 8px;
  padding: 10px;
  min-width: 0;
}
.delegation-ledger > summary {
  padding: 12px;
}
.delegation-ledger > summary::before {
  margin-top: 2px;
}
.delegation-ledger-body {
  padding: 0 12px 12px;
  display: grid;
  gap: 10px;
  overflow-y: auto;
}
.delegation-ledger-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.delegation-ledger-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.delegation-ledger-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.delegation-ledger-copy strong {
  font-size: 15px;
  color: var(--text);
}
.delegation-ledger-meta {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--muted);
}
.delegation-ledger-summary {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.delegation-task-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.delegation-task {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 10px;
}
.delegation-task-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.delegation-task-assignee {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-strong);
}
.delegation-task-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  background: var(--line);
  color: var(--muted);
}
.delegation-task-status.status-running,
.delegation-task-status.status-submitted {
  background: var(--state-working-soft);
  color: var(--state-working);
}
.delegation-task-status.status-reviewed,
.delegation-task-status.status-completed {
  background: var(--state-complete-soft);
  color: var(--state-complete);
}
.delegation-task-status.status-blocked,
.delegation-task-status.status-failed {
  background: var(--state-waiting-soft);
  color: var(--state-waiting);
}
.delegation-task-title {
  min-width: 0;
  font-size: 14px;
  color: var(--text);
}
.delegation-task-detail {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.delegation-task-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text);
}
.delegation-artifacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.delegation-artifact,
.delegation-review-note,
.delegation-view-work {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-strong);
}
.delegation-artifact {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  cursor: pointer;
}
.delegation-artifact:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.delegation-review-note {
  background: var(--state-working-soft);
  color: var(--state-working);
}
.delegation-view-work {
  border: 1px solid var(--line);
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
}
.delegation-view-work:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}
.coach-panel--managed-readonly {
  border-color: var(--line);
}
.coach-panel--managed-readonly textarea {
  background: var(--soft);
  color: var(--muted);
}
.managed-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.conv-delegated-list {
  display: grid;
  gap: 6px;
  margin: 6px 0 10px 20px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
}
.conv-delegated-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.conv-item--delegated-child {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line));
}
.status-stack {
  display: grid;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.support-stack {
  display: grid;
  gap: 8px;
  flex-shrink: 0;
  min-height: 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;
  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-details:not([open]) > .panel-body,
.panel-details:not([open]) > .messages,
.panel-details:not([open]) > .micro-log {
  display: none;
}
.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;
}

/* 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;
  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;
}
.mark-complete-btn {
  border-color: color-mix(in srgb, var(--state-complete) 42%, var(--line));
  color: var(--state-complete);
  font-weight: 700;
}
/* Thread panel */
.panel-details--thread {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
  min-height: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.panel-details--thread[open] {
  display: flex;
  flex-direction: column;
}
.panel-details--thread.thread-working {
  border-color: color-mix(in srgb, var(--state-working) 78%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-working) 34%, transparent);
}
.panel-details--thread.thread-waiting {
  border-color: color-mix(in srgb, var(--state-waiting) 82%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-waiting) 38%, transparent);
}
.panel-details--thread.thread-complete {
  border-color: color-mix(in srgb, var(--state-complete) 76%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--state-complete) 32%, transparent);
}
.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;
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.employee-select.inline {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
}

/* 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;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  overflow: hidden;
}
.progress .stage {
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.progress .latest {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.progress .stage::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
  animation: pulse 1.4s infinite;
}
.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: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  width: 100%;
  flex: 1 1 100%;
}

.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);
}
.typing-indicator {
  animation: none;
  justify-items: start;
}
.typing-indicator .bubble {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 48px;
  padding-block: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
}
.typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  opacity: 0.45;
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) { animation-delay: 120ms; }
.typing-dot:nth-child(3) { animation-delay: 240ms; }
/* #549 R1: Static dash shown in the working-indicator bubble while stop is in-flight.
   Replaces the animated typing-dots to signal "stopping in progress, please wait". */
.stopping-dash {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--muted);
  line-height: 1;
}
@keyframes typing-bounce {
  0%, 80%, 100% { opacity: 0.35; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-3px); }
}
.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
   path so the user can locate the file. */
.artifact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
  max-width: 320px;
  animation: slidein 280ms ease;
}
.artifact-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex-shrink: 0;
}
.artifact-label {
  font-weight: 600;
  color: var(--warn);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  margin-right: 2px;
}
.artifact-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.artifact-where { display: none; }   /* full path lives in tooltip via title attr */

.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;
}
.coach-note.pending-job {
  color: var(--text);
  font-weight: 600;
}
.send-button {
  background: var(--accent);
  color: #fff;
  border: none;
  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: color-mix(in srgb, var(--accent) 35%, var(--bg) 65%); cursor: not-allowed; }

.micro {
  margin-top: 0;
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--soft));
  /* 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 .panel-kicker {
  color: var(--accent-strong);
}
.micro summary {
  cursor: pointer;
  color: var(--text);
  font-size: 14px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.micro summary::-webkit-details-marker { display: none; }
.micro summary::before {
  content: "▸";
  font-size: 11px;
  transition: transform 100ms;
}
.micro[open] summary::before { transform: rotate(90deg); }
.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;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}

.status-line {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  min-height: 1.2em;
}
.status-line.error { color: var(--danger); }

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 40, 30, 0.36);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  animation: fade 180ms ease;
}
.modal-backdrop.open { display: flex; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: rise 220ms ease;
  min-height: 0;
}
/* Each step IS the modal's main content — make it a flex column too so
   .modal-body can actually scroll inside the bounded .modal height
   instead of pushing the modal past 90vh. */
#step1, #step2 {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.modal-header { padding: 22px 24px 12px; border-bottom: 1px solid var(--line); }
.modal-header h2 { margin: 0; font-size: 19px; font-weight: 600; }
.modal-header p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.modal-body { padding: 18px 24px; overflow-y: auto; flex: 1; }
.modal-footer {
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.modal-footer .left { color: var(--muted); font-size: 13px; }
.modal-footer .right { display: flex; gap: 10px; }

.ghost {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 13px;
  color: var(--text);
  font-weight: 500;
}
.ghost:hover { background: var(--soft); }
.ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.search {
  width: 100%;
  border: 1px solid var(--line);
  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); }

.job-category { margin-bottom: 16px; }
.job-category h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.job-option {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  margin-bottom: 5px;
  display: grid;
  gap: 2px;
  color: var(--text);
}
.job-option:hover { background: var(--soft); border-color: var(--accent); }
.job-option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.job-option.selected { background: var(--accent-soft); border-color: var(--accent); }
.job-option strong { font-weight: 600; }
.job-option span { color: var(--muted); font-size: 13px; }

/* R2 (#521): ad-hoc row in the smart new-job input — type the work and start
   directly, without picking a catalog job. Replaces the old "Just describe what
   you need" button. */
.aj-adhoc {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 12px;
  color: var(--text);
}
.aj-adhoc:hover { background: var(--soft); }
.aj-adhoc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.aj-adhoc .aj-adhoc-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.aj-adhoc .aj-adhoc-body { flex: 1; min-width: 0; display: grid; gap: 1px; }
.aj-adhoc .aj-adhoc-title { font-weight: 600; font-size: 14px; }
.aj-adhoc .aj-adhoc-sub { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aj-adhoc .aj-adhoc-action {
  flex-shrink: 0; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--accent); border-radius: 14px; padding: 5px 13px;
}

.step2 .assigned-job {
  background: var(--accent-soft);
  border: 1px solid #c5dcd0;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.step2 .assigned-job .label {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.step2 .assigned-job .name { font-weight: 600; margin-top: 2px; }
.step2 .assigned-job .desc { color: var(--muted); font-size: 13px; margin-top: 2px; }
.step2 textarea {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
}
.step2 textarea:focus { outline: none; border-color: var(--accent); }

.employee-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}
.employee-select {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
  background: var(--surface);
  color: var(--text);
}
.employee-select:focus { outline: none; border-color: var(--accent); }

/* Agent install panel */
#agent-install-panel { margin-top: 10px; }
.install-panel-heading {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.install-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 13px;
}
.install-label { font-weight: 500; min-width: 90px; }
.install-status { color: var(--muted); flex: 1; font-size: 12px; }
button.small { padding: 4px 10px; font-size: 12px; }

@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; padding: 16px; gap: 14px; }
  .layout { grid-template-columns: 1fr; flex: initial; }
  .rail { max-height: none; overflow-y: visible; }
  .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) */
/* ---------------------------------------------------------------- */

.tracker {
  padding: 12px 4px 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.tracker-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tracker-row {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.tracker .stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 34px;
  position: relative;
  z-index: 2;
}
/* Connector segment to the previous stage in the same row. The fill
   color flips green when the previous stage is done or the current
   stage is current — that produces the "fill bar threads through
   completed stages" effect without an SVG path. */
.tracker .stage::before {
  content: '';
  position: absolute;
  top: 13px;
  left: -50%;
  right: 50%;
  height: 3px;
  background: var(--line);
  z-index: 0;
}
.tracker .tracker-row .stage:first-child::before { display: none; }
.tracker .stage.done::before { background: var(--done); }
.tracker .stage.current::before { background: var(--warn); }
.tracker .stage-circle {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
  color: var(--muted);
  font-weight: 600;
  position: relative;
  z-index: 2;
}
.tracker .stage.done .stage-circle {
  background: var(--done);
  border-color: var(--done);
  color: #fff;
}
.tracker .stage.current .stage-circle {
  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: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tracker .stage.current .stage-label {
  color: var(--text);
  font-weight: 600;
}
.tracker-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.tracker-note .glyph { color: var(--accent); margin-right: 4px; }

/* Active-stage label that lives outside the rows. Always rendered by
   JS; hidden by default and shown only at narrow viewports where the
   per-stage labels are too cramped to read (spec R1.4 acceptance). */
.tracker-active-label {
  display: none;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
  font-weight: 600;
  text-align: center;
}

/* Narrow-viewport label collapse (spec R1.4 acceptance). At ≤ 640px,
   per-stage labels disappear; the standalone active label below the
   rows tells the manager which stage is current. Numbered circles
   keep the journey visible. */
@media (max-width: 640px) {
  .tracker .stage .stage-label { display: none; }
  .tracker .stage { min-width: 24px; }
  .tracker .stage-circle {
    width: 20px;
    height: 20px;
    border-width: 1px;
    font-size: 10px;
  }
  .tracker .stage::before { top: 10px; }
  .tracker-active-label { display: block; }
}

/* Pane-width label collapse: the tracker stays a single horizontal row at
   any width. When JS detects the pane is too narrow to fit every stage
   label (.tracker-compact), labels collapse to circles + the standalone
   active label — the row never wraps onto a second line. This is keyed to
   the tracker's own width, so it works even when the viewport is wide but
   the conversation pane is narrowed by the sidebar. */
.tracker.tracker-compact .stage .stage-label { display: none; }
.tracker.tracker-compact .tracker-active-label { display: block; }

/* 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: fixed;
  width: 320px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  z-index: 200;
}
.template-popover .group {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.template-popover .group:last-child { border-bottom: none; }
.template-popover .group-label {
  font-size: 11px;
  color: var(--accent-strong);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin: 0 0 4px 0;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.template-popover .group-label .group-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.template-popover .group.delegation .group-dot { background: var(--picker-delegation); }
.template-popover .group.coaching .group-dot { background: var(--accent); }
.template-popover .group.verification .group-dot { background: var(--warn); }
.template-popover .group.learning .group-dot { background: var(--picker-learning); }
.template-popover .template-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  border: none;
  text-align: left;
  width: 100%;
  font: inherit;
  color: var(--text);
}
.template-popover .template-row:hover { background: var(--accent-soft); }
.template-popover .template-row strong { font-size: 13px; font-weight: 500; }
.template-popover .template-row span { font-size: 12px; color: var(--muted); }

/* 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; }


/* ── 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: 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;
  border-radius: 50%;
  border: 2px dashed var(--line);
  background: none;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.roster-chip-add:hover { border-color: var(--accent); color: var(--accent); }

/* Employee selector */
.employee-selector { padding: 4px 8px; position: relative; }
.emp-select-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.emp-select-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.emp-avatar-sm {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
  font-size: 9px;
  font-weight: 700;
  color: var(--accent-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.emp-avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.emp-caret { margin-left: auto; color: var(--muted); font-size: 11px; }
.emp-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 8px;
  right: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  overflow: hidden;
}
.emp-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font: inherit;
}
.emp-option:hover { background: var(--soft); }
.emp-option.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

/* Lock badge — inline after job title */
.lock-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--warn);
  margin-left: 6px;
  white-space: nowrap;
}
.job-option.locked { opacity: 0.85; }
.job-option.locked:hover { background: var(--warn-soft) !important; }

/* Persona job filter bar inside New Job modal */
#job-persona-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.jf-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 6px;
  border: 1.5px solid var(--line);
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.jf-chip:hover { border-color: var(--accent); }
.jf-chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-strong); }
.jf-chip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* Hire-required notice */
#hire-notice {
  margin: 0 0 0;
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  background: var(--warn-soft);
  padding: 16px 18px;
  margin: 0 0 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;
}

/* Issue #566 R7: "Taught by you" marking on runs of a personalized job.
   Follows the .ab-badge inline-badge pattern with a distinct purple accent. */
.taught-badge {
  margin-left: auto;
  padding: 1px 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  background: var(--teach-soft);
  color: var(--teach);
  border: 1px solid var(--teach-line);
  white-space: nowrap;
  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; }

/* ═══════════════════════════════════════════════════════════════════════════
   Issue #512 — Manager-style team flow shell
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hide legacy .page when shell is active */
body.hub-shell > .page { display: none !important; }
body.hub-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* Get-started rail */
.gs-rail { display: flex; align-items: center; gap: 10px; padding: 6px 18px; background: #eef4ff; border-bottom: 1px solid rgba(0,113,227,.18); font-size: 12px; flex-shrink: 0; }
.gs-rocket { font-size: 14px; flex-shrink: 0; }
.gs-steps { display: flex; align-items: center; gap: 4px; flex: 1; }
.gs-step { padding: 3px 10px; border-radius: 12px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; background: none; border: none; }
.gs-step.done { color: var(--done); }
.gs-step.current { background: var(--accent); color: #fff; font-weight: 600; }
.gs-sep { color: var(--line); font-size: 11px; }
.gs-cta { padding: 5px 14px; background: var(--accent); color: #fff; border: none; border-radius: 12px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.gs-hide { background: none; border: none; color: var(--muted); font-size: 15px; cursor: pointer; flex-shrink: 0; width: 22px; height: 22px; }
.gs-pill { position: fixed; bottom: 16px; right: 16px; z-index: 60; background: var(--accent); color: #fff; border: none; border-radius: 20px; font-size: 12px; font-weight: 600; padding: 8px 16px; cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.gs-pill[hidden] { display: none; }

/* Top nav: Company / Manager / Projects + avatar */
.hub-tabs { display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 8px 0 0; flex-shrink: 0; position: relative; }
.htab { padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.htab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.htab:hover { color: var(--text); }
.hub-tabs-spacer { flex: 1; }
.hub-avatar-btn { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; border: none; font-size: 10px; font-weight: 700; cursor: pointer; flex-shrink: 0; margin: 0 6px; }

/* Account menu */
.account-menu { display: none; position: absolute; top: 44px; right: 8px; width: 260px; z-index: 90; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); overflow: hidden; }
.account-menu.open { display: block; }
.am-header { padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.am-av { width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.am-name { font-size: 13px; font-weight: 700; }
.am-email { font-size: 11px; color: var(--muted); }
.am-item { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px; cursor: pointer; font-size: 13px; }
.am-item:hover { background: var(--bg); }
.am-ico { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; margin-top: 1px; }
.am-label { font-weight: 600; }
.am-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.am-div { height: 1px; background: var(--line); margin: 4px 0; }
.am-foot { padding: 8px 16px; font-size: 13px; color: var(--muted); cursor: pointer; }
.am-foot:hover { background: var(--bg); }

/* Hub areas */
.hub-area { display: none; flex: 1; overflow: hidden; }
.hub-area.on { display: flex; flex-direction: column; }
.hub-area-page { max-width: 860px; margin: 0 auto; padding: 28px 24px 48px; overflow-y: auto; flex: 1; /* authoritative rule — see also Round-2 override below which is now removed */ }

/* #521 R6: Company/Manager use the same rail + main shell as the project workspace. */
.area-shell { display: flex; flex: 1; min-height: 0; }
.area-rail { width: 244px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); overflow-y: auto; padding: 6px 0; }
.area-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.area-rail-head { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 14px 16px 6px; }
.area-rail-job { display: flex; align-items: center; gap: 11px; padding: 10px 16px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.area-rail-job:hover { background: var(--bg); }
.area-rail-job .arj-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.area-rail-job .arj-name { font-size: 13px; font-weight: 600; color: var(--text); }
.area-rail-job .arj-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.area-rail-note { padding: 10px 16px 14px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.hub-section-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.hub-eyebrow { font-size: 11px; color: var(--muted); margin-bottom: 4px; }
.hub-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 6px; }
.hub-sub { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

/* Profile rows */
.syn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; }
.syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--line); }
.syn-row:last-child { border-bottom: none; }
.syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 90px; flex-shrink: 0; padding-top: 1px; }
.syn-val { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 13px; color: var(--text); line-height: 1.5; }
.syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }

/* Learnings */
.learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.lc-scope { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
.scope-org { background: var(--accent-soft); color: var(--accent); }
.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
.lc-body { flex: 1; min-width: 0; }
.lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
.lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.bless-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bless-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 12px; cursor: pointer; border: none; }
.bless-yes { background: var(--done); color: #fff; }
.bless-no  { background: var(--bg); color: var(--muted); }
.pending-banner { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.25); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }

/* Projects sub-tabs — HTML uses .proj-tabs (not .proj-tabs-bar) and .ptab-add (not .ptab-add-btn) */
.proj-tabs, .proj-tabs-bar { display: flex; align-items: center; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 8px 0 0; flex-shrink: 0; overflow-x: auto; }
.ptab { padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; flex-shrink: 0; margin-bottom: -1px; }
.ptab.on { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.ptab:hover { color: var(--text); }
.ptab-badge { font-size: 10px; font-weight: 700; color: var(--danger); background: rgba(162,71,71,.1); padding: 1px 6px; border-radius: 8px; margin-left: 4px; }
.ptab-add, .ptab-add-btn { margin-left: auto; padding: 8px 14px; font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }

/* Overview grid */
#proj-overview { flex: 1; overflow-y: auto; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 20px 18px; }
.proj-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: box-shadow .12s; }
.proj-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.proj-card-add { display: flex; align-items: center; justify-content: center; border-style: dashed; color: var(--muted); font-size: 13px; min-height: 120px; }
.proj-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.proj-brief { font-size: 12px; color: var(--muted); line-height: 1.4; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.proj-team { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.proj-badge { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--danger); background: rgba(162,71,71,.09); padding: 2px 8px; border-radius: 10px; }
.proj-badge.quiet { color: var(--muted); background: var(--bg); }

/* #521 R5/R6.4: collapsible project context sections at the top of the workspace
   conversation pane (Brief / Learnings), consistent with Company/Manager. */
.proj-context-top { flex-shrink: 0; padding: 12px 16px 0; overflow-y: auto; max-height: 46vh; }
/* #521: shared empty/CTA block — used by BOTH the Brief and Learnings sections so
   they look consistent (a left-aligned message, optional note, primary button). */
.ctx-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
.ctx-cta-ico { font-size: 26px; line-height: 1; }
.ctx-cta-title { font-size: 14px; font-weight: 600; color: var(--text, #1a1a1a); margin: 0; }
.ctx-cta-msg { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 520px; margin: 0; }
.ctx-cta-note { font-size: 12px; color: var(--text); line-height: 1.5; max-width: 520px; padding: 8px 12px; background: var(--soft, #f6f6f6); border: 1px solid var(--line, #e6e6e6); border-radius: 8px; }
.ctx-cta-btn { font-size: 14px; font-weight: 600; color: #fff; background: var(--accent, #1f6feb); border: none; border-radius: 8px; padding: 10px 16px; cursor: pointer; }
.ctx-cta-btn:hover { filter: brightness(1.05); }
.ctx-push-auto { font-size: 11px; color: var(--muted); opacity: .7; white-space: nowrap; }
/* Unified Company/Manager area layout: info view (accordions) vs conversation panel */
.area-info-view { flex: 1; overflow-y: auto; min-height: 0; }
/* Shared conversation host — a workspace-conv slot inside Company/Manager .area-main.
   The .page element is physically moved here when a company/manager job is active,
   inheriting all .workspace-conv CSS rules (header hidden, rail hidden, conv fills space). */
.area-conv-host { flex: 1; overflow: hidden; min-height: 0; }
/* Rail "info" nav button — mirrors the "Project Info" entry in the Projects tree sidebar */
.area-rail-info-btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 16px;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: none; border: none; border-bottom: 1px solid var(--line);
  text-align: left; cursor: pointer; margin-bottom: 2px;
}
.area-rail-info-btn:hover { background: var(--bg); }
.area-rail-info-btn.info-active { color: var(--accent); background: var(--accent-soft); }
/* #594 R2: area-level conversation panel (Company/Manager tab inline run view) — kept for reference */
.area-page-conv { display: flex; flex-direction: column; gap: 0; margin: 0 0 20px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.area-conv-topline { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.area-conv-thread { flex: 1; max-height: 340px; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.area-conv-empty { font-size: 13px; color: var(--muted); margin: 0; }
.area-conv-msg { display: flex; flex-direction: column; gap: 2px; }
.area-conv-msg--manager .area-conv-msg-text { align-self: flex-end; background: var(--accent-soft, #eef4ff); border-radius: 10px 10px 2px 10px; padding: 8px 12px; font-size: 13px; color: var(--text); max-width: 80%; margin: 0; }
.area-conv-msg--employee .area-conv-msg-text { align-self: flex-start; background: var(--surface, #f8f8f8); border: 1px solid var(--line); border-radius: 10px 10px 10px 2px; padding: 8px 12px; font-size: 13px; color: var(--text); max-width: 80%; margin: 0; white-space: pre-wrap; }
.area-conv-coach { display: flex; align-items: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--bg, #fafafa); }
.area-conv-coach-ta { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--card, #fff); outline: none; min-height: 38px; }
.area-conv-coach-ta:focus { border-color: var(--accent); }
.area-conv-coach-send { flex-shrink: 0; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent, #0071e3); border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; height: 38px; }
.area-conv-coach-send:hover { filter: brightness(1.08); }
.ctx-loading { font-size: 13px; color: var(--muted); padding: 10px 4px; }
.ctx-push-bar { display: flex; align-items: center; gap: 10px; padding: 9px 14px; margin-top: 6px; background: var(--accent-soft, #eef4ff); border: 1px solid var(--line); border-radius: 8px; }
.ctx-push-msg { flex: 1; font-size: 13px; color: var(--text); }
.ctx-push-btn { font-size: 13px; font-weight: 600; color: #fff; background: var(--accent, #0071e3); border: none; border-radius: 6px; padding: 6px 14px; cursor: pointer; white-space: nowrap; }
.ctx-push-btn:hover { filter: brightness(1.07); }
.ctx-push-dismiss { font-size: 12.5px; color: var(--muted); background: none; border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 5px; padding: 4px 10px; cursor: pointer; white-space: nowrap; }
.ctx-push-dismiss:hover { color: var(--text); border-color: var(--muted); }
.push-to-team-banner { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin: 10px 0; background: var(--accent-soft, #eef4ff); border: 1px solid var(--line); border-radius: 10px; }
.ptb-ico { font-size: 20px; flex-shrink: 0; line-height: 1.4; }
.ptb-copy { flex: 1; font-size: 13px; color: var(--text); line-height: 1.6; }
.ptb-copy strong { font-weight: 600; }
.ptb-push-btn { font-size: 13px; font-weight: 600; color: #fff; background: var(--accent, #0071e3); border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ptb-push-btn:hover { filter: brightness(1.07); }
.ptb-dismiss { font-size: 13px; color: var(--muted); background: none; border: 1px solid var(--line, rgba(0,0,0,.1)); border-radius: 6px; padding: 6px 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ptb-dismiss:hover { color: var(--text); border-color: var(--muted); }
/* #521: project-onboarding input modal (manager's direction before a run). */
.obi-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; font: inherit; font-size: 14px; line-height: 1.5; padding: 11px 13px; border: 1px solid var(--line, #e2e2e2); border-radius: 10px; background: var(--surface, #fff); color: var(--ink, #1a1a1a); }
.obi-input:focus { outline: none; border-color: var(--accent, #1f6feb); }
.obi-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.obi-cancel { font-size: 14px; font-weight: 500; color: var(--muted, #666); background: none; border: none; padding: 10px 14px; cursor: pointer; }
.obi-start { font-size: 14px; font-weight: 600; color: #fff; background: var(--accent, #1f6feb); border: none; border-radius: 8px; padding: 10px 18px; cursor: pointer; }
.obi-start:hover { filter: brightness(1.05); }
.ctx-acc { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.ctx-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 14px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.ctx-acc > summary::-webkit-details-marker { display: none; }
.ctx-acc > summary:hover { background: var(--bg); }
.ctx-acc > summary .ca-chev { font-size: 10px; color: var(--muted); transition: transform .15s; }
.ctx-acc[open] > summary .ca-chev { transform: rotate(90deg); }
.ctx-acc > summary .ca-note { font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; color: var(--muted); }
/* #ai-hub-polish F2: a long section must not bury the others. Cap the body and
   let it scroll internally so every accordion header stays reachable. */
.ctx-acc-body { padding: 4px 14px 14px; max-height: min(62vh, 620px); overflow-y: auto; }

/* #ai-hub-polish F1: ease the open/close instead of snapping. Animate the
   <details> content slot; interpolate-size lets block-size animate to/from auto.
   @supports keeps older engines on the instant (pre-polish) behavior, and the
   prefers-reduced-motion block above neutralizes the transition. */
@supports selector(::details-content) {
  .ctx-acc::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size .24s ease, content-visibility .24s allow-discrete;
  }
  .ctx-acc[open]::details-content { block-size: auto; }
}

/* #521: project-onboarding loop banner inside the Brief — "team is processing /
   here's their understanding to review". */
.ob-brief-banner { display: flex; align-items: flex-start; gap: 10px; border-radius: 10px; padding: 12px 14px; margin: 6px 0 12px; font-size: 13px; line-height: 1.5; }
.ob-brief-banner .obb-ico { font-size: 16px; flex-shrink: 0; }
.ob-brief-banner.ob-processing { background: var(--accent-soft); border: 1px solid rgba(0,113,227,.22); color: var(--text); }
.ob-brief-banner.ob-review { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.3); color: var(--text); }

/* Project workspace */
#proj-workspace {
  --tree-sidebar-width: 216px;
  display: flex;
  flex: 1;
  min-height: 0;
}
.tree-sidebar {
  width: var(--tree-sidebar-width);
  min-width: 176px;
  max-width: 380px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}
.tree-collapse-btn {
  width: 22px;
  flex-shrink: 0;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.tree-collapse-btn:hover {
  color: var(--text);
  background: var(--bg);
}
.tree-collapse-btn::before { content: "<"; }
.tree-resizer {
  width: 7px;
  flex-shrink: 0;
  cursor: col-resize;
  background: linear-gradient(to right, transparent 0 2px, var(--line) 2px 3px, transparent 3px 100%);
}
.tree-resizer:hover,
#proj-workspace.tree-resizing .tree-resizer {
  background: linear-gradient(to right, transparent 0 2px, var(--accent) 2px 4px, transparent 4px 100%);
}
#proj-workspace.tree-collapsed .tree-sidebar {
  width: 0;
  min-width: 0;
  max-width: 0;
  padding: 0;
  border-right: 0;
  overflow: hidden;
}
#proj-workspace.tree-collapsed .tree-sidebar > * { display: none; }
#proj-workspace.tree-collapsed .tree-collapse-btn::before { content: ">"; }
#proj-workspace.tree-collapsed .tree-resizer { display: none; }
.tree-emp { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; user-select: none; }
.tree-emp:hover { background: var(--bg); }
.t-av { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.t-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.t-emp-add { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--accent); font-size: 14px; line-height: 20px; text-align: center; opacity: 1; border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; transition: background .1s, border-color .1s; }
.tree-emp:hover .t-emp-add { background: var(--accent-soft); border-color: rgba(0,113,227,.28); }
.t-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.tree-job { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 44px; cursor: pointer; }
.tree-job:hover { background: var(--bg); }
.tree-job.selected { background: var(--bg); }
.tj-label { font-size: 12px; color: var(--muted); flex: 1; }
.tree-job.selected .tj-label { color: var(--text); font-weight: 500; }
.tj-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* #533 R6 — delete a run. Hover-revealed controls (mirrors the eh-add "+"
   affordance) plus a small inline confirm. Hub-local delete; never touches disk. */
.conv-item { position: relative; }
.run-del { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); font-size: 12px; line-height: 1;
  display: none; align-items: center; justify-content: center; cursor: pointer; }
.conv-item:hover .run-del, .run-del:focus-visible { display: flex; }
.run-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
.tree-job { position: relative; }
.tree-job .tj-del { margin-left: 4px; width: 18px; height: 18px; border-radius: 5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 11px; line-height: 1; display: none; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; }
.tree-job:hover .tj-del, .tj-del:focus-visible { display: flex; }
.tree-job .tj-del:hover { color: var(--danger, #d2261f); border-color: var(--danger, #d2261f); }
.del-confirm { margin: 8px 14px 4px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 12px; color: var(--text); line-height: 1.5; }
.del-confirm .dc-row { display: flex; gap: 8px; margin-top: 8px; }
.del-confirm button { font: inherit; font-size: 12px; border-radius: 7px; padding: 5px 12px; cursor: pointer; }
.del-confirm .dc-del { background: var(--danger, #d2261f); color: #fff; border: none; }
.del-confirm .dc-cancel { background: var(--surface); border: 1px solid var(--line); color: var(--text); }

/* R1 (#521): employees are the heroes — large accordion rows replace .tree-emp.
   The summary is the employee (40px avatar, name, role, status dot); their jobs
   nest in the body and collapse with the row. */
/* .proj-updates-acc shares this chrome but is intentionally NOT .emp-hero (that
   class is the employee-hero selector). */
.emp-hero, .proj-updates-acc { border-bottom: 1px solid var(--line); }
.emp-hero > summary, .proj-updates-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px; padding: 11px 14px; user-select: none; }
.emp-hero > summary::-webkit-details-marker, .proj-updates-acc > summary::-webkit-details-marker { display: none; }
.emp-hero > summary:hover, .proj-updates-acc > summary:hover { background: var(--bg); }
.emp-hero .eh-av, .proj-updates-acc .eh-av { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.emp-hero .eh-id, .proj-updates-acc .eh-id { flex: 1; min-width: 0; }
.emp-hero .eh-name, .proj-updates-acc .eh-name { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.emp-hero .eh-role, .proj-updates-acc .eh-role { font-size: 11px; color: var(--muted); margin-top: 1px; }
.emp-hero .eh-dot, .proj-updates-acc .eh-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.emp-hero .eh-add, .proj-updates-acc .eh-add { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--accent); font-size: 13px; line-height: 18px; text-align: center; flex-shrink: 0; border: 1px solid var(--line); opacity: 0; transition: opacity .12s; cursor: pointer; }
.emp-hero > summary:hover .eh-add, .proj-updates-acc > summary:hover .eh-add { opacity: 1; }
/* Issue #538 — per-employee "find a human manager" action in the employee hero. */
.emp-hero .eh-hire-manager { width: 22px; height: 22px; border-radius: 50%; background: var(--bg); font-size: 12px; line-height: 20px; text-align: center; flex-shrink: 0; border: 1px solid var(--line); opacity: 0; transition: opacity .12s; cursor: pointer; padding: 0; }
.emp-hero > summary:hover .eh-hire-manager { opacity: 1; }
.emp-hero .eh-hire-manager:hover { border-color: var(--accent); }
/* Project Updates "+" is a primary affordance — always visible, not hover-only. */
.proj-updates-acc .eh-add { opacity: 1; }
.emp-hero .eh-chev, .proj-updates-acc .eh-chev { font-size: 10px; color: var(--muted); flex-shrink: 0; transition: transform .15s; }
.emp-hero[open] > summary .eh-chev, .proj-updates-acc[open] > summary .eh-chev { transform: rotate(90deg); }
.emp-hero .eh-jobs, .proj-updates-acc .eh-jobs { padding: 0 0 6px; }
.emp-hero .eh-jobs .tree-job, .proj-updates-acc .eh-jobs .tree-job { padding-left: 36px; }
.emp-hero .eh-empty, .proj-updates-acc .eh-empty { font-size: 11px; color: var(--muted); padding: 4px 14px 6px 36px; }
.tree-sep { height: 1px; background: var(--line); margin: 6px 14px; }
.tree-action { margin: 2px 14px; padding: 7px 10px; font-size: 12px; color: var(--accent); font-weight: 600; background: none; border: none; cursor: pointer; text-align: left; width: calc(100% - 28px); }
.tree-action:hover { background: var(--bg); border-radius: 8px; }
.tree-legend { padding: 6px 14px 10px; display: flex; flex-direction: column; gap: 5px; }
.tree-legend-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tree-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }

/* Dot color helpers */
.dot-red   { background: var(--state-waiting) !important; }
.dot-amber { background: var(--state-working) !important; }
.dot-green { background: var(--state-complete) !important; }
.dot-grey  { background: var(--line) !important; }
/* #549 R4: amber-static — same amber colour as dot-amber but no pulse animation.
   Used for manager-stopped runs to distinguish intentional pause from active work. */
.dot-amber-static { background: var(--warn) !important; }

/* Workspace conversation pane */
.workspace-conv { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
.workspace-conv > .page { display: flex !important; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; padding: 0; max-width: none; }
.workspace-conv .layout { flex: 1; min-height: 0; overflow: hidden; }
.workspace-conv .conversation { flex: 1; width: 100%; min-width: 0; }
.workspace-conv .panel-details--thread { overflow: hidden; }

/* #521 UI rework: the project workspace has TWO mutually-exclusive views inside
   .workspace-conv — the Brief & Learnings page (#proj-context-top) and the job
   conversation (.page). Cramming both into one pane left the conversation short
   and squeezed the thread/coach/micro-manage. Now a job conversation gets the
   FULL height (no Brief stealing space), and the Brief is its own page reached
   from the sidebar. JS toggles .mode-conv / .mode-brief on .workspace-conv. */
.workspace-conv.mode-conv #proj-context-top { display: none; }
.workspace-conv.mode-brief > .page { display: none !important; }
.workspace-conv.mode-brief #proj-context-top {
  max-height: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
}

/* Conversation view (full height): the open panels SHARE the available real
   estate instead of being pinned to fixed caps. Each open panel grows to fill its
   slice and scrolls internally when its content overflows (its own scrollbar).
   #active-conv keeps overflow-y:auto only as a fallback for very short windows
   where the panels' min-heights can't all fit. */
.workspace-conv #active-conv {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.workspace-conv #active-conv > .conv-topline,
.workspace-conv #active-conv > .conversation-status { flex: 0 0 auto; }

/* Manager/employee thread — the primary conversation. The "Ready for review"
   card lives inside #messages, so it scrolls with the thread. Open thread grows
   to fill spare height; collapsed it is just its summary bar. */
.workspace-conv #thread-panel { flex: 0 0 auto; min-height: 0; }
/* Open thread is the sole space-filler: it grows to take all height the support
   stack does not need, and scrolls #messages internally. Collapsed it is just
   its summary bar. */
.workspace-conv #thread-panel[open] {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.workspace-conv #thread-panel > summary { flex: 0 0 auto; }
/* Chromium wraps <details> content in a ::details-content slot, so #messages is
   not a direct flex child of the panel. Make the slot a column flex container
   that fills the panel; then #messages can flex-grow and scroll inside it. */
.workspace-conv #thread-panel[open]::details-content {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.workspace-conv #thread-panel[open] #messages {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}
.workspace-conv #thread-panel:not([open]) #messages { display: none; }

/* Support stack: Coach (input) + Micro-manage (log). It sizes to its content and
   never grows past it, so the thread keeps the spare real estate. Each open body
   has a viewport-relative cap and scrolls internally, so it shows more on bigger
   screens (and far more than the old 1-line peek) without crowding the thread. */
.workspace-conv .support-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 0 1 auto;
}
.workspace-conv .support-stack > .panel-details--coach { flex: 0 0 auto; }
.workspace-conv .support-stack > .panel-details--coach[open] > .panel-body {
  max-height: clamp(140px, 24vh, 260px);
  overflow-y: auto;
}
.workspace-conv .panel-details--coach .panel-body { padding-bottom: 8px; }
.workspace-conv .coach-input textarea {
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.workspace-conv .coach-note { display: none; }
.workspace-conv .quick-coach-row { gap: 5px; margin-bottom: 8px; }
.workspace-conv .quick-coach-btn { padding: 4px 9px; }

.workspace-conv .support-stack > .micro { flex: 0 0 auto; min-height: 0; }
.workspace-conv .support-stack > .micro[open] > .micro-log {
  max-height: clamp(120px, 24vh, 260px);
  overflow-y: auto;
}

.workspace-conv #active-conv.has-delegation-board .delegation-ledger[open] .delegation-ledger-body {
  max-height: clamp(140px, 24vh, 260px);
}
.workspace-conv #active-conv.has-manager-oversight .manager-oversight-board[open] .manager-oversight-list {
  max-height: clamp(120px, 22vh, 240px);
  overflow-y: auto;
}
.workspace-conv #active-conv.has-delegation-board .progress,
.workspace-conv #active-conv.has-manager-oversight .progress {
  max-height: 68px;
  overflow: hidden;
}
.workspace-conv #active-conv.has-delegation-board #coach-panel[open] .panel-body,
.workspace-conv #active-conv.has-manager-oversight #coach-panel[open] .panel-body {
  max-height: clamp(120px, 18vh, 240px);
  overflow-y: auto;
}
.workspace-conv #active-conv.has-delegation-board .support-stack,
.workspace-conv #active-conv.has-manager-oversight .support-stack {
  flex: 0 0 auto;
  max-height: none;
  overflow-y: visible;
}
.workspace-conv #active-conv.has-manager-oversight {
  gap: 6px;
}
.workspace-conv .support-stack > .panel-details,
.workspace-conv .support-stack > .micro { margin-bottom: 0; }

@media (max-width: 820px) {
  /* On narrow screens drop the fill model: panels flow naturally and the page
     scrolls, with each open body keeping a viewport-relative scroll cap. */
  .workspace-conv #active-conv {
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  .workspace-conv #thread-panel[open],
  .workspace-conv .support-stack,
  .workspace-conv .support-stack:has(.micro[open]),
  .workspace-conv .support-stack > .micro[open] {
    flex: 0 0 auto;
    display: block;
    min-height: 0;
  }
  .workspace-conv #thread-panel[open] #messages,
  .workspace-conv .support-stack > .micro[open] > .micro-log {
    flex: initial;
    height: auto;
    max-height: clamp(140px, 32vh, 280px);
    overflow-y: auto;
  }
  .workspace-conv .support-stack > .panel-details[open] > .panel-body {
    max-height: clamp(140px, 32vh, 280px);
    overflow-y: auto;
  }
}

@media (max-width: 640px) {
  body.hub-shell { overflow-x: hidden; }
  .gs-rail { overflow-x: auto; padding-inline: 10px; }
  .hub-tabs { min-width: 0; }
  .htab { padding-inline: 14px; }
  .proj-tabs,
  .proj-tabs-bar {
    min-width: 0;
  }
  #proj-workspace {
    flex-direction: column;
    overflow: hidden;
  }
  .tree-sidebar {
    width: 100%;
    min-width: 0;
    max-width: none;
    max-height: 210px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .tree-collapse-btn,
  .tree-resizer {
    display: none;
  }
  #proj-workspace.tree-collapsed .tree-sidebar {
    width: 100%;
    max-width: none;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    overflow-y: auto;
  }
  #proj-workspace.tree-collapsed .tree-sidebar > * { display: flex; }
  .workspace-conv {
    width: 100%;
    min-width: 0;
  }
  .workspace-conv .layout {
    min-width: 0;
  }
  .manager-oversight-header {
    display: grid;
    gap: 4px;
  }
  .manager-oversight-meta {
    flex-shrink: 1;
  }
}

/* Review surfaces */
.completion-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 8px; }
.completion-card .cc-title { font-weight: 700; margin-bottom: 6px; font-size: 14px; }
.completion-card .cc-row { font-size: 13px; color: var(--text); line-height: 1.65; }
.art-strip2 { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--bg); }
.art-strip2 .as-name { font-size: 13px; font-weight: 600; }
.art-strip2 .as-sub { font-size: 11px; color: var(--muted); }
.act-bar { border-top: 1px solid var(--line); padding: 8px 16px 12px; background: var(--surface); }
.act-note { font-size: 11px; color: var(--muted); margin-bottom: 7px; line-height: 1.4; }
.act-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.act-row .chips-label { font-size: 11px; color: var(--muted); font-weight: 600; }
.act-input { display: flex; gap: 10px; align-items: flex-end; }
.act-input textarea { flex: 1; border: 1px solid var(--line); border-radius: 9px; padding: 8px 12px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); resize: none; height: 42px; }
.rv-open    { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; background: var(--text); color: #fff; border: none; cursor: pointer; flex-shrink: 0; }
.rv-ghost   { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; background: var(--bg); color: var(--text); border: 1px solid var(--line); cursor: pointer; flex-shrink: 0; }
.rv-changes { font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 14px; background: var(--bg); color: var(--warn); border: 1px solid rgba(176,132,66,.35); cursor: pointer; flex-shrink: 0; }
.rv-approve { font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 14px; background: var(--done); color: #fff; border: none; cursor: pointer; flex-shrink: 0; }

/* Modals */
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 70; overflow-y: auto; }
.modal-backdrop.open { display: block; }
.modal-card { max-width: 560px; margin: 48px auto; background: var(--surface); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,.22); overflow: hidden; }
.modal-hdr { padding: 18px 22px; border-bottom: 1px solid var(--line); }
.modal-hdr h2 { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.modal-hdr p { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.5; }
.modal-body { padding: 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.modal-close { float: right; background: var(--bg); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal-close:hover { color: var(--text); }
.aom-cancel-btn { background: none; border: 1px solid var(--line); border-radius: 20px; padding: 9px 20px; font-size: 14px; cursor: pointer; color: var(--muted); }
.aom-cancel-btn:hover { color: var(--text); }
.modal-footer { padding: 12px 22px 20px; display: flex; align-items: center; justify-content: space-between; }
.modal-next { padding: 9px 22px; background: var(--text); color: #fff; border: none; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; }
.modal-back { font-size: 13px; color: var(--muted); background: none; border: none; cursor: pointer; }
.modal-step-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 18px; }
.modal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.modal-dot.on { background: var(--text); }
.np-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.np-field input, .np-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; font: inherit; font-size: 13px; background: var(--bg); color: var(--text); resize: none; }
.np-field input:focus, .np-field textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.job-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.job-row:last-child { border-bottom: none; }
.job-row .jr-av { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }
.job-row .jr-body { flex: 1; min-width: 0; }
.job-row .jr-name { font-size: 13px; font-weight: 600; }
.job-row .jr-who { font-size: 11px; color: var(--muted); margin-top: 1px; }
.job-row.locked { cursor: pointer; opacity: .72; }
.jr-lock { font-size: 11px; color: var(--muted); flex-shrink: 0; display: flex; align-items: center; gap: 4px; }
.jr-action { font-size: 12px; font-weight: 600; padding: 5px 13px; border-radius: 13px; background: var(--accent); color: #fff; border: none; cursor: pointer; flex-shrink: 0; }
.modal-cat-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 2px; }
.emp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.emp-tile { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; text-align: center; background: var(--bg); }
.emp-tile:hover, .emp-tile.selected { border-color: var(--accent); background: var(--accent-soft); }
.et-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.et-name { font-size: 12px; font-weight: 600; color: var(--text); }
.et-role { font-size: 10px; color: var(--muted); }
.emp-tile.selected .et-name { color: var(--accent); }
.pricing-card { background: var(--surface); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 32px rgba(0,0,0,.18); max-width: 380px; margin: 48px auto; text-align: center; padding: 28px 28px 24px; }
.pricing-av { width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; color: #fff; margin: 0 auto 14px; }
.pricing-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 16px; }
.sum-row { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border-bottom: none; }
.sum-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 80px; flex-shrink: 0; padding-top: 1px; }
.sum-val { font-size: 13px; color: var(--text); flex: 1; line-height: 1.5; }
.sum-team { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.brief-start-btn { width: 100%; padding: 12px; background: var(--accent); color: #fff; border: none; border-radius: 11px; font-size: 14px; font-weight: 700; cursor: pointer; margin-top: 4px; }


/* ── #512 CSS class-name corrections (hub-tab vs htab, avatar-btn, legacy suppression) ── */

/* The nav buttons use hub-tab, not htab */
.hub-tab { padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--muted); border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.hub-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.hub-tab:hover { color: var(--text); }

/* Avatar button */
.avatar-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: #fff;
  border: 2px solid rgba(255,255,255,0.3);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; flex-shrink: 0; margin-left: auto;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: opacity .12s, box-shadow .12s;
}
.avatar-btn:hover { opacity: .85; box-shadow: 0 2px 8px rgba(0,0,0,.22); }

/* Suppress the old Hub's header and rail when inside the workspace-conv */
.workspace-conv .header { display: none !important; }
.workspace-conv .rail { display: none !important; }

/* The legacy "+ New job" entry (#new-conv-btn) is relocated by tfRenderTree out
   of the suppressed rail into the visible tree-sidebar. Style it as the
   prominent top action so the standalone conversation flow stays reachable. */
#tree-sidebar #new-conv-btn.tree-new-conv {
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: #fff;
  background: var(--accent, #1f6feb);
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
#tree-sidebar #new-conv-btn.tree-new-conv:hover { filter: brightness(1.05); }

/* #521: Brief & Learnings nav entry — the project's own page, above New job. */
#tree-sidebar .tree-brief-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 6px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  color: var(--ink, #1a1a1a);
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 8px;
  cursor: pointer;
}
#tree-sidebar .tree-brief-nav:hover { background: var(--bg, #f6f6f6); }
#tree-sidebar .tree-brief-nav.active {
  border-color: var(--accent, #1f6feb);
  background: color-mix(in srgb, var(--accent, #1f6feb) 8%, transparent);
  color: var(--accent, #1f6feb);
}
#tree-sidebar .tree-brief-nav .tbn-ico { font-size: 14px; }

/* #521: Project Updates accordion — groups project-onboarding + sleep-on-learnings
   with run history. Reuses .emp-hero/.area-rail-acc chrome; adds the "+" run menu. */
#tree-sidebar .proj-updates-acc { position: relative; }
#tree-sidebar .pu-menu {
  position: absolute;
  top: 46px;
  right: 8px;
  z-index: 40;
  min-width: 200px;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e2e2);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  padding: 6px;
}
#tree-sidebar .pu-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  font-size: 13px;
  text-align: left;
  color: var(--ink, #1a1a1a);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
#tree-sidebar .pu-menu-item:hover { background: var(--bg, #f6f6f6); }
#tree-sidebar .pu-job { padding: 4px 0 2px; }
#tree-sidebar .pu-job + .pu-job { margin-top: 4px; border-top: 1px solid var(--line, #ececec); padding-top: 8px; }
#tree-sidebar .pu-job-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--muted, #666);
  padding: 2px 2px 4px;
}

/* Relocated Runs section (legacy conversation switcher) inside the tree. */
#tree-sidebar .rail-section--runs.tree-runs { display: block; margin-top: 6px; }
#tree-sidebar .rail-section--runs.tree-runs .rail-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--sub); margin: 4px 0; }
#tree-sidebar .rail-section--runs.tree-runs .conv-list { display: block; }
#tree-sidebar .rail-section--runs.tree-runs .conv-item { display: flex; width: 100%; text-align: left; }

/* Make workspace-conv take the remaining flex space and hide its outer scrollbar */
.workspace-conv > .page { overflow: hidden; }
.workspace-conv .layout { display: flex; gap: 0; min-height: 0; flex: 1; overflow: hidden; }

@media (max-width: 820px) {
  body.hub-shell {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }
  .hub-area,
  .area-main,
  #proj-workspace,
  .workspace-conv,
  .workspace-conv > .page,
  .workspace-conv .layout {
    overflow: visible;
  }
}

/* #ai-hub-polish F3: Company & Manager areas had no narrow-width layout — the
   fixed 244px rail pushed the main column off the right edge (horizontal scroll).
   Below the Projects-workspace breakpoint, stack the rail above the content and
   let the page shrink so nothing overflows. 2-column stays intact on tablets. */
@media (max-width: 640px) {
  body.hub-shell { overflow-x: hidden; }
  .area-shell { flex-direction: column; }
  .area-rail {
    width: 100%;
    flex-shrink: 0;
    max-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .hub-area-page { padding: 22px 16px 40px; min-width: 0; max-width: 100%; }
}


/* ── #512 Round 2: actual class names from rendered HTML ────────────────── */

/* Area layout — (D35 fix: consolidated at line ~2037; this duplicate removed) */
.eyebrow { font-size: 11px; color: var(--muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.area-h1 { font-size: 28px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 8px; }
.area-lede { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }
.sec-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* Profile card */
.card.area-profile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-bottom: 24px; margin-top: 10px; }
.syn-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.syn-row:last-child { border-bottom: none; }
.syn-label { font-size: 12px; font-weight: 600; color: var(--muted); width: 88px; flex-shrink: 0; padding-top: 2px; }
.syn-val { flex: 1; min-width: 0; overflow-wrap: break-word; font-size: 13px; color: var(--text); line-height: 1.5; }
.syn-edit { font-size: 12px; color: var(--accent); font-weight: 500; background: none; border: none; cursor: pointer; flex-shrink: 0; }
/* #ai-hub-polish: at phone widths the fixed label column starves the value and
   forces mid-word wraps. Stack label over value so the value gets full width.
   Placed after the duplicate .syn-* block above so source order lets it win. */
@media (max-width: 560px) {
  .syn-row { flex-wrap: wrap; gap: 4px 12px; }
  .syn-label { width: 100%; }
  .syn-val { flex: 1 1 100%; }
}

/* Issue #512 R3/R8 — Team Context inline editor. */
/* ctx-content is now a div with rendered markdown (formatEmployeeText), not a raw <pre> */
.ctx-content { font-size: 13px; line-height: 1.6; color: var(--text); word-break: break-word; }
.ctx-content p { margin: 0 0 6px; }
.ctx-content p:last-child { margin-bottom: 0; }
.ctx-content ul, .ctx-content ol { margin: 4px 0 6px 18px; padding: 0; }
.ctx-content li { margin-bottom: 3px; }
.ctx-content h1, .ctx-content h2, .ctx-content h3 { font-size: 13px; font-weight: 700; margin: 8px 0 4px; }
.ctx-content code { background: var(--bg); border-radius: 4px; padding: 1px 5px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.ctx-content strong { font-weight: 700; }
.ctx-path { margin-top: 6px; font-size: 11px; color: var(--sub); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* #533 R1/R2 — readable context/rules document view: keep section headings and the
   file's numbering instead of flattening to compacted lines. */
.ctx-doc { font-size: 13px; line-height: 1.6; color: var(--text); }
.ctx-doc .cd-h { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.ctx-doc .cd-h:first-child { margin-top: 0; }
.ctx-doc ol, .ctx-doc ul { margin: 0 0 6px; padding-left: 22px; }
.ctx-doc ol li, .ctx-doc ul li { margin: 0 0 4px; padding-left: 3px; }
.ctx-doc ol li::marker { color: var(--muted); font-weight: 600; }
.ctx-doc p { margin: 0 0 8px; }
.ctx-doc p:last-child, .ctx-doc ol:last-child, .ctx-doc ul:last-child { margin-bottom: 0; }
.ctx-editor { width: 100%; min-height: 160px; resize: vertical; box-sizing: border-box; padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.ctx-editor:focus { outline: none; border-color: var(--accent); }
.ctx-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ctx-save { font-size: 12px; font-weight: 600; color: #fff; background: var(--accent); border: none; border-radius: 8px; padding: 6px 14px; cursor: pointer; }
.ctx-save:disabled { opacity: .6; cursor: default; }
.ctx-cancel { font-size: 12px; color: var(--muted); background: none; border: none; cursor: pointer; }
.ctx-err { font-size: 12px; color: var(--red, #d33); }
.ctx-rerun-row { justify-content: flex-end; }

/* Friendly context/rules view: managers should not have to read Markdown. */
.ctx-content ul,
.ctx-content ol,
.ctx-content h1,
.ctx-content h2,
.ctx-content h3,
.ctx-content code {
  all: unset;
}
.ctx-content {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ctx-context-line {
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.5;
}
.ctx-rule-block {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
}
.ctx-rule-item {
  position: relative;
  padding: 8px 10px 8px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.45;
}
.ctx-rule-item::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .65;
}
.ctx-editor {
  min-height: 132px;
  font-family: inherit;
  font-size: 13px;
}
.ctx-rule-editor { display: flex; flex-direction: column; gap: 8px; }
.ctx-rule-edit-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ctx-rule-input {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.ctx-rule-input:focus { outline: none; border-color: var(--accent); }
.ctx-rule-remove,
.ctx-add-rule {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 10px;
  cursor: pointer;
}
.ctx-add-rule { margin-top: 8px; color: var(--accent); }
.ctx-rule-remove:hover,
.ctx-add-rule:hover {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: rgba(0,113,227,.25);
}

/* Learnings head row */
.learn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; margin-top: 24px; }
.learn-head-note { font-size: 12px; color: var(--muted); }
.learn-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.lh-title { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.lh-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.lh-run { padding: 5px 13px; background: var(--bg); color: var(--accent); border: 1px solid rgba(0,113,227,.22); border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.lh-run:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Empty state */
.learn-empty { text-align: center; padding: 40px 24px; }
.le-emoji { font-size: 32px; margin-bottom: 10px; }
.le-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.le-sub { font-size: 13px; color: var(--muted); line-height: 1.6; max-width: 360px; margin: 0 auto; }
/* #521: real on-disk preserved-learning tally shown under the empty state. */
.le-count { font-size: 12px; color: var(--text); margin: 12px auto 0; max-width: 360px; padding: 8px 12px; background: var(--soft, #f6f6f6); border: 1px solid var(--line, #e6e6e6); border-radius: 8px; }

/* Learn card */
.learn-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.lc-scope { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; white-space: nowrap; }
.scope-org { background: var(--accent-soft); color: var(--accent); }
.scope-mgr { background: rgba(139,95,191,.12); color: #7b46bc; }
.scope-proj { background: rgba(46,125,50,.1); color: var(--done); }
.lc-body { flex: 1; min-width: 0; }
.lc-text { font-size: 13px; color: var(--text); line-height: 1.55; }
.lc-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.bless-actions { display: flex; gap: 6px; flex-shrink: 0; }
.bless-btn { font-size: 11px; font-weight: 600; padding: 4px 11px; border-radius: 12px; cursor: pointer; border: none; }
.bless-yes { background: var(--done); color: #fff; }
.bless-no  { background: var(--bg); color: var(--muted); }

/* Pending banner */
.pending-banner { background: var(--warn-soft); border: 1px solid rgba(176,132,66,.25); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.pending-banner .pb-body { flex: 1; }
.pb-title { font-size: 13px; font-weight: 700; }
.pb-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pb-bless-all { padding: 6px 14px; background: var(--done); color: #fff; border: none; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

/* Reverse mentoring */
.rm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.rm-av { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0; }
.rm-body { flex: 1; }
.rm-text { font-size: 13px; color: var(--text); line-height: 1.55; }
.rm-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.rm-actions { display: flex; gap: 6px; flex-shrink: 0; }
.rm-got-it { padding: 5px 12px; background: var(--done); color: #fff; border: none; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; }
.rm-dismiss { padding: 5px 10px; background: var(--bg); color: var(--muted); border: none; border-radius: 12px; font-size: 11px; cursor: pointer; }
.rm-empty { text-align: center; padding: 28px 16px; color: var(--muted); font-size: 13px; }
.rm-footer { font-size: 12px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* Get-started rail: proper pill steps */
.gs-step { background: none; border: none; }
.gs-step.done { color: var(--done); font-weight: 500; cursor: default; }
.gs-step.done::before { content: '✓ '; }
.gs-step.current { background: var(--accent); color: #fff; font-weight: 600; padding: 3px 12px; border-radius: 12px; }

/* Hub top nav: proper layout */
.hub-tabs { height: 44px; }
.hub-tab { height: 44px; }

/* Tree legend */
.tree-legend-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.tree-legend-row { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.dot-red   { background: var(--state-waiting) !important; }
.dot-amber { background: var(--state-working) !important; }
.dot-green { background: var(--state-complete) !important; }
.dot-grey  { background: var(--line) !important; }

/* Project overview: section header */
.overview-head { padding: 20px 20px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }

/* Proj card team avatars row */
.proj-team .av { width: 24px; height: 24px; font-size: 9px; position: relative; }
.proj-team .av .pip { position: absolute; bottom: 0; right: 0; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--surface); }

/* Workspace: make the tree legend not look like a wall of text */
.tree-legend { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   #512 Comprehensive UI Polish — All missing CSS classes from audit
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── D01-D11: New-project modal (np-overlay, np-wrap, np-step, np-card, etc.) ── */
.np-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,30,.45);
  z-index: 60;
  overflow-y: auto;
}
.np-overlay:not([hidden]) { display: block; }
/* JS removes hidden attribute to show: also handle that */
#np-modal:not([hidden]) { display: block; }

.np-wrap {
  max-width: 560px;
  margin: 40px auto;
  padding: 0 24px 60px;
}

.np-step { display: none; }
.np-step.on { display: block; }

.np-close {
  position: fixed;
  top: 16px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  font-size: 18px;
  color: var(--muted);
  z-index: 61;
  border: none;
  cursor: pointer;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-close:hover { color: var(--text); }

.np-step-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 24px;
}
.np-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
}
.np-dot.on { background: var(--text); }

.np-card {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.np-hdr {
  padding: 22px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.np-hdr .step-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin-bottom: 6px;
}
.np-hdr h2 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
}
.np-hdr p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

.np-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.np-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.np-next {
  padding: 9px 22px;
  background: var(--text);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.np-next:hover { opacity: .88; }

.np-back {
  font-size: 13px;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
}
.np-back:hover { color: var(--text); }

/* ── D11: Source attachment row (step 2) ── */
.np-source {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--line);
}
.np-source input {
  flex: 1;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.np-source input::placeholder { color: var(--muted); }
.np-source-btn {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.np-note {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.np-optional {
  color: var(--muted);
  font-weight: 400;
}
.np-link { color: var(--accent); }

/* ── D12: Shared .modal-overlay backdrop (assign-job, add-emp, pricing) ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20,20,30,.45);
  z-index: 70;
  overflow-y: auto;
}
.modal-overlay:not([hidden]) { display: block; }
/* Also handle JS hidden attribute removal */
#assign-job-modal:not([hidden]),
#add-emp-modal:not([hidden]),
#pricing-modal:not([hidden]) { display: block; }

/* ── D36: Pricing modal internal structure ── */
.pricing-overlay { z-index: 71; }
.pricing-body {
  padding: 0 28px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.pricing-body h2 { font-size: 20px; font-weight: 700; margin: 0; }
.pricing-body p { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0; }
.pr-av {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 auto 4px;
  flex-shrink: 0;
}
.pr-price {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
}
.pr-price span {
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
}
.pr-cta {
  width: 100%;
  padding: 12px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: block;
  margin-top: 16px;
}
.pr-cta:hover { opacity: .88; }
.pr-foot {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 2px;
}

/* ── D37: Area foot note, project learnings panel, pl-back, stat-grid ── */
.area-foot-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
  line-height: 1.5;
  font-style: italic;
}
.proj-learnings-panel {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}
.pl-back {
  font-size: 13px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 8px;
  font-weight: 500;
}
.pl-back:hover { opacity: .8; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.stat-card {
  background: var(--surface);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
}
.stat-num { font-size: 26px; font-weight: 700; }
.stat-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* ── D18: Profile card — better shadow to match mock ── */
.card.area-profile {
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  border: none;
}

/* ── D19: Hide lh-run button from default learnings head — only show when pending ── */
/* The JS always renders it; suppress via CSS for default display */
/* NOTE: We keep it functional; just reduce its visual weight (D19 P2) */
.lh-run {
  padding: 5px 12px;
  background: var(--bg);
  color: var(--accent);
  border: 1px solid rgba(0,113,227,.2);
  border-radius: 14px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.lh-run:hover { background: var(--accent-soft); }

/* ── D22: proj-grid padding-top match mock spec ── */
.proj-grid { padding-top: 28px !important; }

/* ── D24: tree-action font-weight fix ── */
.tree-action { font-weight: 500; }

/* ── D29/D30: Account menu am-item inner div stacking ── */
.am-item > div {
  display: flex;
  flex-direction: column;
}
.am-label { display: block; font-size: 13px; font-weight: 600; }
.am-sub { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

/* ── D32: am-div separator — use background-color band not hairline ── */
.am-div { height: 6px; background: var(--bg); margin: 2px 0; border: none; }

/* ── D38: jr-av placeholder for locked rows ── */
.job-row.locked .jr-av {
  background: #cfcfd6;
}

/* ── D39: reduce bottom padding to prevent unnecessary scrollbar ── */
.hub-area-page { padding-bottom: 32px; }

/* ── nav-right alignment ── */
.nav-right {
  margin-left: auto;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 8px;
}

/* ── Account menu position fix (was 44px, now relative to .nav-right) ── */
.account-menu {
  top: calc(100% + 6px);
  right: 0;
}

/* ── Ensure modal-card has correct max-width for pricing card ── */
.pricing-card {
  max-width: 380px;
  text-align: center;
  padding: 24px 0 0;
}

/* pr-av fallback background when persona color not set by JS */
.pr-av { background: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   #512 FINAL POLISH — all remaining missing classes + CSS variable gaps
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS variables required by JS inline styles (dot colors) ── */
:root {
  --red:   #ff3b30;
  --amber: #ff9500;
  --green: #34c759;
  --grey:  #c7c7cc;
}
@media (prefers-color-scheme: dark) {
  :root {
    --red:   #ff453a;
    --amber: #ff9f0a;
    --green: #30d158;
    --grey:  #636366;
  }
}

/* ── .av — standalone team avatar chip (proj-team context, set by JS) ── */
.av {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  position: relative;
  flex-shrink: 0;
}

/* ── Reverse mentoring card classes ── */
.rev-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}
.rev-from {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.rev-av {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.rev-msg {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
}
.rev-actions {
  display: flex;
  gap: 6px;
}
.rev-gotit {
  padding: 5px 13px;
  background: var(--done);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.rev-dismiss {
  padding: 5px 10px;
  background: var(--bg);
  color: var(--muted);
  border: none;
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
}

/* ── New-project step-4 summary rows (actual class names from JS) ── */
.np-summary-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.np-summary-row:last-of-type { border-bottom: none; }
.np-summary-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  width: 80px;
  flex-shrink: 0;
  padding-top: 1px;
}
.np-summary-val {
  font-size: 13px;
  color: var(--text);
  flex: 1;
  line-height: 1.5;
}

/* ── New-project start button + note (step 4) ── */
.np-start-btn {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}
.np-start-btn:hover { opacity: .88; }
.np-start-note {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}

/* ── cat-label — section label in assign-job / add-emp modal ── */
.cat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 12px 0 4px;
}

/* ── locked-tile — greyed-out not-hired emp tile ── */
.emp-tile.locked-tile {
  opacity: .55;
  cursor: not-allowed;
}
.emp-tile.locked-tile:hover {
  border-color: var(--line);
  background: var(--bg);
}

/* ── et-lock — 🔒 icon inside locked emp tile ── */
.et-lock {
  font-size: 11px;
  color: var(--muted);
}

/* #521 R9: hire-missing prompt in the new-project team step */
.np-hire-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.emp-tile.locked-tile.hireable { opacity: 1; cursor: pointer; border-style: dashed; }
.emp-tile.locked-tile.hireable:hover { border-color: var(--accent); background: var(--accent-soft); }
.emp-tile.locked-tile.hireable .et-av { opacity: .7; }
.et-hire { font-size: 11px; font-weight: 700; color: var(--accent); }

/* ── gs-step pill shape refinements ── */
.gs-step { font-size: 12px; }
.gs-step.current { padding: 4px 12px; border-radius: 12px; }

/* ── hub-tabs height consistency + avatar-btn right-alignment ── */
.hub-tabs { height: 44px; }
.hub-tab  { height: 44px; }
.nav-right { height: 44px; display: flex; align-items: center; }
.avatar-btn { margin-left: 8px; }

/* ── New-project: folder picker row ── */
.np-folder-row { display:flex; gap:8px; }
.np-folder-row input { flex:1; }
.np-browse-btn { padding:9px 16px; background:var(--text); color:#fff; border:none; border-radius:9px; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.np-browse-btn:hover { opacity:.85; }
.np-field-hint { font-size:11px; color:var(--muted); margin-top:5px; line-height:1.5; }

/* ── #512 R7: docx re-upload panel ── */
.rc-docx-upload { margin-top:10px; padding:12px 14px; background:var(--accent-soft); border:1px solid rgba(0,113,227,.2); border-radius:10px; display:flex; flex-direction:column; gap:10px; }
.rdu-label { font-size:12px; color:var(--muted); line-height:1.5; }
.rdu-file-label { display:flex; align-items:center; gap:10px; cursor:pointer; }
.rdu-choose-btn { padding:6px 14px; background:var(--surface); border:1px solid var(--line); border-radius:8px; font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; }
.rdu-filename { font-size:12px; color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rdu-extract-btn { align-self:flex-end; padding:7px 16px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
.rdu-extract-btn:disabled { opacity:.5; cursor:default; }

/* ── #512 R7: 'Done reviewing' button (replaces upload panel) ── */
.rc-done-reviewing { margin-top:10px; padding:12px 14px; background:var(--accent-soft); border:1px solid rgba(0,113,227,.2); border-radius:10px; display:flex; flex-direction:column; gap:8px; }
.rdr-label { font-size:12px; color:var(--muted); line-height:1.5; }
.rdr-done-btn { padding:9px 18px; background:var(--done); color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; align-self:flex-start; }
.rdr-done-btn:disabled { opacity:.55; cursor:default; }

/* ── Issue #538: Hire a human manager ─────────────────────────────────── */
.hm-roster-action {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 5px;
  font-size: 12px; font-weight: 600; color: var(--accent);
  background: none; border: none; cursor: pointer; padding: 0; text-align: left;
}
.hm-roster-action:hover { text-decoration: underline; }
.hm-section-cta {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.hm-section-cta .hm-ic { font-size: 24px; }
.hm-section-cta .hm-copy { flex: 1; }
.hm-section-cta .hm-copy strong { display: block; font-size: 14px; color: var(--text); }
.hm-section-cta .hm-copy small { font-size: 12px; color: var(--muted); }
.hm-fieldrow { display: flex; gap: 10px; }
.hm-fieldrow .hm-field { flex: 1; }
.hm-field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.hm-field select, .hm-field input, .hm-field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px;
  font: inherit; font-size: 13px; background: var(--bg); color: var(--text);
}
.hm-field textarea { resize: vertical; min-height: 60px; }
.hm-field select:focus, .hm-field input:focus, .hm-field textarea:focus { outline: 2px solid var(--accent); border-color: transparent; }
.hm-query { display: flex; align-items: flex-start; gap: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; }
.hm-query code { flex: 1; font-family: ui-monospace, "SF Mono", "JetBrains Mono", monospace; font-size: 12px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-break: break-word; }
.hm-copy-btn { flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 7px; padding: 4px 10px; cursor: pointer; }
.hm-copy-btn:hover { border-color: var(--accent); }
.hm-qualities { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 0; }
.hm-quality { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text); }
.hm-quality .hm-check { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-strong); display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.hm-quality small { display: block; color: var(--muted); font-size: 12px; }
.hm-jd > summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: 7px; }
.hm-jd > summary::-webkit-details-marker { display: none; }
.hm-jd[open] > summary .hm-chev { transform: rotate(90deg); }
.hm-jd .hm-chev { font-size: 10px; transition: transform .15s; }
.hm-jd-body { margin-top: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); padding: 14px 16px; font-size: 13px; line-height: 1.6; color: var(--text); white-space: pre-wrap; }
.hm-providers-label { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.hm-providers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hm-provider { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); cursor: pointer; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.hm-provider:hover { border-color: var(--accent); background: var(--accent-soft); }
.hm-provider .hm-logo { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; }
.hm-provider strong { font-size: 13px; }
.hm-provider small { font-size: 11px; color: var(--muted); }
.hm-logo.linkedin { background: #0a66c2; }
.hm-logo.indeed { background: #2557a7; }
.hm-logo.seekout { background: #6b3df0; }
.hm-foot { font-size: 11px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 520px) {
  .hm-fieldrow { flex-direction: column; }
  .hm-fieldrow .hm-field { max-width: none !important; }
}
/* ── #539: Command Palette Overlay ── */
.cp-backdrop { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.45); display:flex; align-items:flex-start; justify-content:center; padding-top:80px; }
.cp-backdrop[hidden] { display:none; }
.cp-palette { background:var(--surface); border:1px solid var(--line); border-radius:14px; width:min(640px,calc(100vw - 32px)); max-height:calc(100vh - 140px); display:flex; flex-direction:column; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.22); }
.cp-search-row { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.cp-search-icon { font-size:18px; color:var(--muted); flex-shrink:0; }
#cp-search { flex:1; border:none; background:transparent; font-size:15px; color:var(--text); outline:none; }
#cp-search::placeholder { color:var(--muted); }
.cp-results-scroll { flex:1; overflow-y:auto; min-height:0; }
.cp-section { padding:6px 0; }
.cp-section-label { font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--muted); padding:4px 16px 2px; text-transform:uppercase; }
.cp-row { display:flex; align-items:center; gap:10px; padding:9px 16px; cursor:pointer; border:none; background:transparent; width:100%; text-align:left; color:var(--text); font-size:13px; }
.cp-row:hover, .cp-row--highlighted { background:var(--accent-soft,rgba(0,113,227,.08)); }
.cp-row-icon { font-size:15px; flex-shrink:0; }
.cp-row-body { flex:1; min-width:0; }
.cp-row-title { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-row-sub { font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.cp-row-tag { font-size:10px; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; flex-shrink:0; }
.cp-instructions-row { border-top:1px solid var(--line); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.cp-instructions-row[hidden] { display:none; }
.cp-job-chip { font-size:11px; font-weight:700; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.08)); border-radius:5px; padding:2px 8px; align-self:flex-start; }
#cp-instructions { border:1px solid var(--line); border-radius:8px; background:var(--bg); color:var(--text); font-size:13px; padding:9px 11px; resize:vertical; outline:none; font-family:inherit; }
#cp-instructions:focus { border-color:var(--accent,#0071e3); }
#cp-start-btn { align-self:flex-end; }
.cp-hints-bar { display:flex; align-items:center; gap:10px; padding:7px 14px; border-top:1px solid var(--line); background:var(--bg); flex-wrap:wrap; }
.cp-hint { font-size:11px; color:var(--muted); display:flex; align-items:center; gap:3px; }
.cp-hint--right { margin-left:auto; }
.cp-hint kbd { background:var(--surface); border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:10px; font-family:inherit; }
.cp-employee-footer { font-size:11px; color:var(--muted); padding:5px 14px 8px; }
.cp-rerun-toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:10px 18px; font-size:13px; color:var(--text); box-shadow:0 4px 16px rgba(0,0,0,.16); z-index:9100; pointer-events:none; white-space:nowrap; }

/* ── Issue #540: Company roster + Manager team ─────────────────────────── */
.company-hire-bar { display:flex; align-items:center; gap:8px; padding:9px 0 11px; flex-wrap:wrap; }
.chb-count { font-size:14px; font-weight:700; color:var(--text); }
.chb-label { font-size:13px; color:var(--sub); }
.chb-progress { flex:1; min-width:80px; height:5px; background:var(--line); border-radius:3px; overflow:hidden; }
.chb-progress-fill { height:100%; background:var(--accent,#0071e3); border-radius:3px; transition:width .3s; }
.persona-roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:12px; padding:4px 0 16px; }
.persona-roster-tile { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:default; transition:border-color .15s,background .15s; }
.persona-roster-tile.prt-hired { border-color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.06)); }
.persona-roster-tile:not(.prt-hired):hover { border-color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.04)); }
.prt-av { width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; color:#fff; }
.prt-name { font-size:13px; font-weight:700; color:var(--text); text-align:center; }
.prt-role { font-size:11px; color:var(--sub); text-align:center; line-height:1.3; }
.prt-hired-badge { font-size:10px; font-weight:700; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.1)); border-radius:5px; padding:2px 8px; margin-top:2px; }
.prt-hire-btn { font-size:11px; font-weight:700; color:#fff; background:var(--accent,#0071e3); border:none; border-radius:6px; padding:4px 12px; cursor:pointer; margin-top:2px; }
.prt-hire-btn:hover { background:var(--accent-hover,#005bbf); }
.prt-price { font-size:10px; color:var(--sub); margin-top:1px; }
.manager-no-team-msg { font-size:13px; color:var(--sub); margin:0 0 10px; }
.manager-go-company-btn { font-size:12px; font-weight:600; color:var(--accent,#0071e3); background:var(--accent-soft,rgba(0,113,227,.08)); border:1px solid var(--accent,#0071e3); border-radius:6px; padding:5px 13px; cursor:pointer; }
.manager-go-company-btn:hover { background:var(--accent-soft,rgba(0,113,227,.15)); }

/* ── Issue #540: AI Hub hiring surfaces ── */

/* Status dots (green=available, amber=out-of-stock, grey=none) */
.sdot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdot--green { background:#34c759; }
.sdot--amber { background:#ff9f0a; }
.sdot--grey  { background:var(--line); border:1px solid var(--muted); }

/* Persona grid — Company tab */
.persona-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px; margin-top:8px; }
/* #538 UI-polish (538-UIPV-P1): allow the hire button to wrap to its own full-width
   row so the avatar + name/role take the full first row; otherwise the nowrap button
   squeezed .persona-card-info to ~31px and clipped every name/role to "M…". */
.persona-card { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; position:relative; }
.persona-card-info { flex:1; min-width:0; }
.persona-card .btn-hire-primary { flex-basis:100%; margin-top:8px; }
.persona-card-info strong { display:block; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.persona-card-role { display:block; font-size:11px; color:var(--muted); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.seat-badge { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.btn-hire-primary { padding:5px 12px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; text-decoration:none; }
.btn-hire-primary:hover { opacity:.85; }

/* Manager team pool — Manager tab */
.manager-team-pool { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.team-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.btn-add-seat { padding:5px 12px; background:var(--accent); color:#fff; border:none; border-radius:8px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.btn-add-seat:hover { opacity:.85; }
.btn-add-seat:disabled { opacity:.5; cursor:default; }
.btn-hired-check { font-size:12px; color:var(--done); font-weight:600; }

/* Delegate button on roster chips */
.delegate-btn { padding:3px 9px; background:var(--accent-soft); color:var(--accent); border:1px solid rgba(0,113,227,.2); border-radius:6px; font-size:11px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; margin-left:auto; }
.delegate-btn:hover { background:var(--accent); color:#fff; }

/* Non-blocking hire strip (between #messages and send bar) */
.hire-strip { display:flex; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-shrink:0; }
.hire-strip[hidden] { display:none; }
.hs-avatar { flex-shrink:0; width:36px; height:36px; }
.hs-body { flex:1; min-width:0; }
.hs-title { margin:0; font-size:13px; font-weight:600; color:var(--text); }
.hs-sub { margin:2px 0 0; font-size:11px; color:var(--muted); line-height:1.4; }
.hs-actions { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.hs-btn { padding:6px 14px; border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; border:none; }
.hs-btn[hidden] { display:none; }
.hs-btn--primary { background:var(--accent); color:#fff; }
.hs-btn--primary:hover { opacity:.85; }
.hs-btn--ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.hs-btn--ghost:hover { color:var(--text); border-color:var(--text); }

/* ── Issue #578: Scheduled + Reactive Employees ── */

/* sourceTrigger chip on run rail items */
.trigger-badge { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:600; letter-spacing:.02em; flex-shrink:0; }
.trigger-badge--scheduled { background:rgba(0,122,255,.12); color:#0071e3; }
.trigger-badge--webhook   { background:rgba(88,86,214,.12); color:#5856d6; }

/* Deployment roster accordion */
#proj-deployments-acc { margin-top:0; }
.dep-actions { display:flex; gap:8px; margin-top:8px; }
.dep-add-btn { padding:4px 12px; background:var(--accent-soft,rgba(0,113,227,.08)); color:var(--accent,#0071e3); border:1px solid rgba(0,113,227,.2); border-radius:8px; font-size:12px; font-weight:600; cursor:pointer; }
.dep-add-btn:hover { background:var(--accent,#0071e3); color:#fff; }

/* Deployment cards */
.dep-card { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px; padding:8px 10px; background:var(--surface,#fff); border:1px solid var(--line,#e5e5e5); border-radius:10px; margin-bottom:6px; }
.dep-card-top { display:flex; align-items:center; gap:6px; flex:1; min-width:0; }
.dep-type-icon { font-size:14px; flex-shrink:0; }
.dep-label { font-size:13px; font-weight:600; color:var(--text,#1d1d1f); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dep-type-badge { display:inline-block; padding:1px 7px; border-radius:4px; font-size:10px; font-weight:600; flex-shrink:0; }
.dep-type-badge--scheduled { background:rgba(0,122,255,.12); color:#0071e3; }
.dep-type-badge--webhook   { background:rgba(88,86,214,.12); color:#5856d6; }
.dep-detail { width:100%; font-size:11px; color:var(--muted,#888); margin-left:20px; }
.dep-detail--url { display:flex; align-items:center; gap:6px; }
.dep-inbound-url { font-size:11px; word-break:break-all; color:var(--muted,#888); flex:1; }
.dep-inbound-url--inline { display:inline; font-size:11px; }
/* Assignment modals — redesigned */
.dep-modal-card { max-width:540px; }
.dep-modal-card .modal-hdr p { font-size:12px; color:var(--muted,#888); margin:3px 0 0; font-weight:400; }
.dep-optional { font-weight:400; font-size:11px; color:var(--muted,#888); }
.dep-preset-chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:2px; }
.dep-preset-chip { padding:6px 18px; border-radius:20px; font-size:13px; font-weight:500; border:1.5px solid var(--line,#e5e5e5); background:var(--bg,#f5f5f7); color:var(--muted,#888); cursor:pointer; transition:border-color .12s, color .12s, background .12s; }
.dep-preset-chip:hover { border-color:var(--accent,#0071e3); color:var(--accent,#0071e3); }
.dep-preset-chip.active { background:var(--accent,#0071e3); border-color:var(--accent,#0071e3); color:#fff; }
.dep-wh-inbound-reveal { margin-top:16px; padding-top:16px; border-top:1px solid var(--line,#e5e5e5); }
.dep-wh-inbound-header { margin-bottom:8px; }
.dep-wh-inbound-label { font-size:12px; font-weight:600; color:var(--text,#1d1d1f); display:block; }
.dep-wh-inbound-hint { font-size:11px; color:var(--muted,#888); display:block; margin-top:2px; }
.dep-card-actions { display:flex; gap:6px; margin-left:auto; align-items:center; flex-shrink:0; }
.dep-edit-btn { padding:2px 8px; background:transparent; border:1px solid var(--line,#e5e5e5); border-radius:6px; font-size:11px; color:var(--muted,#888); cursor:pointer; }
.dep-edit-btn:hover { border-color:var(--accent,#0071e3); color:var(--accent,#0071e3); }
.dep-del-btn { padding:2px 8px; background:transparent; border:1px solid var(--line,#e5e5e5); border-radius:6px; font-size:11px; color:var(--muted,#888); cursor:pointer; }
.dep-del-btn:hover { border-color:#ff3b30; color:#ff3b30; }
.dep-detail--emp { font-style:normal; }
.dep-empty { color:var(--muted,#888); font-size:12px; margin:4px 0 8px; line-height:1.5; }
.dep-cron-preview { font-size:11px; color:var(--accent,#0071e3); margin:2px 0 0; }

/* Deployment modals */
.dep-modal-actions { display:flex; gap:8px; margin-top:12px; }
.dep-error { color:#ff3b30; font-size:12px; margin-top:4px; }
.cancel-button { padding:7px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; background:transparent; color:var(--muted,#888); border:1px solid var(--line,#e5e5e5); }
.cancel-button:hover { border-color:var(--text,#1d1d1f); color:var(--text,#1d1d1f); }
.dep-inbound-url-row { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg,#f5f5f7); border-radius:8px; margin-top:6px; }