/* ════════════════════════════════════════════════════════════════════════════
   AGENTS TAB — Agent Workbench Session 2
   `.ag-*` prefix. Module shadow per CLAUDE.md.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Panel-mode overrides ──
   The Agents tab repurposes #panel-agent (which used to be Flume-only). Flume
   mode keeps the existing full-viewport rule from history.css; home mode
   resets the chrome-edge negative margins so the work queue + grid render
   inside normal page padding. */
#panel-agent.agents-mode-home.active{
  display:block;
  /* Undo history.css `#panel-agent.active` overrides for the home view. */
  margin:0;
  height:auto;
  overflow:visible;
  animation:panelIn 0.22s cubic-bezier(0.22,1,0.36,1);
}
main:has(#panel-agent.agents-mode-home.active){overflow:auto}

/* Tab header */
.ag-tab-root{
  display:flex;flex-direction:column;gap:20px;
  /* No max-width cap — match Dashboard's full-panel-width behaviour. The
     1280px cap previously here made the Agents tab feel artificially
     narrow on wider screens vs every other tab. */
}
.ag-tab-header{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;padding-bottom:8px;
}
.ag-tab-header-titles{display:flex;flex-direction:column;gap:4px}
.ag-tab-title{
  font-size:22px;font-weight:700;color:var(--text);margin:0;
  letter-spacing:-0.01em;
}
.ag-tab-sub{font-size:13px;color:var(--text3);margin:0}
.ag-tab-header-actions{display:flex;gap:8px}

.ag-tab-error{
  background:var(--red-bg);color:var(--red);
  border:1px solid color-mix(in srgb,var(--red) 25%,transparent);
  border-radius:var(--radius-lg);padding:12px 14px;font-size:13px;
  display:flex;align-items:center;gap:10px;
}
.ag-tab-loading{
  color:var(--text3);font-size:13px;padding:24px 12px;
}
.ag-link-btn{
  background:none;border:none;color:var(--accent);cursor:pointer;
  font-family:inherit;font-size:inherit;padding:0;text-decoration:underline;
}

.ag-home{display:flex;flex-direction:column;gap:24px}

/* ── Page-load entry stagger ──────────────────────────────────────────────
   Mirrors the dashboard's `dashFadeInUp` pattern (`dashboard.css:44`) — same
   shape, namespaced. Sequence: header → per-squad title → cards per row
   (cascading left-to-right + top-to-bottom) → work queue last. Total cascade
   ~0.75s. `backwards` fill keeps elements invisible before their delay fires
   so nothing flashes in pre-delay. Guarded for `prefers-reduced-motion`.

   Re-runs on first mount of each element. Collapse-then-uncollapse a squad
   will re-trigger because the grid wrapper unmounts (`{!isCollapsed && …}`
   in AgentSquadGrid.tsx) — acceptable: a fresh appearance reads like a fresh
   appearance. */
@keyframes agFadeInUp{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}

.ag-tab-header,
.ag-squad-header,
.ag-squad-grid .ag-card,
.ag-queue{
  animation:agFadeInUp 0.45s ease backwards;
}

.ag-tab-header{animation-duration:0.35s;animation-delay:0s}

/* Stagger order matches the visual DOM order (Generalist top → Optimisers →
   Watchers → Analysts → queue). Selectors are tied to the squad MODIFIER
   class (not nth-of-type) so moving sections around in AgentSquadGrid.tsx
   doesn't silently leave cards firing at delay:0 — which is exactly the
   regression that happened when Ask Flume moved to the top and Health
   Officer (3rd Watchers card) + Brief Author (2nd Analysts card) lost
   their delay rules. */

/* Generalist (Ask Flume) — at top, no squad header */
.ag-squad--generalist .ag-card                   {animation-delay:0.05s}

/* Optimisers — 3 cards */
.ag-squad--optimiser .ag-squad-header            {animation-delay:0.10s}
.ag-squad--optimiser .ag-card:nth-child(1)       {animation-delay:0.14s}
.ag-squad--optimiser .ag-card:nth-child(2)       {animation-delay:0.20s}
.ag-squad--optimiser .ag-card:nth-child(3)       {animation-delay:0.26s}

/* Watchers — 3 cards */
.ag-squad--watcher .ag-squad-header              {animation-delay:0.28s}
.ag-squad--watcher .ag-card:nth-child(1)         {animation-delay:0.32s}
.ag-squad--watcher .ag-card:nth-child(2)         {animation-delay:0.38s}
.ag-squad--watcher .ag-card:nth-child(3)         {animation-delay:0.44s}

/* Analysts — 2 cards */
.ag-squad--analyst .ag-squad-header              {animation-delay:0.46s}
.ag-squad--analyst .ag-card:nth-child(1)         {animation-delay:0.50s}
.ag-squad--analyst .ag-card:nth-child(2)         {animation-delay:0.56s}

/* Queue lands after the squads — punctuates the cascade. */
.ag-queue{animation-delay:0.62s}

@media (prefers-reduced-motion:reduce){
  .ag-tab-header,
  .ag-squad-header,
  .ag-squad-grid .ag-card,
  .ag-queue{
    animation:none;
  }
}

/* ── Sub-view bar (Ask Flume back-to-home) ── */
.ag-subview-bar{
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;border-bottom:1px solid var(--border);flex-shrink:0;
  background:var(--surface);
}
.ag-subview-back{
  background:none;border:1px solid var(--border);border-radius:8px;
  color:var(--text2);cursor:pointer;font-family:inherit;font-size:12px;
  padding:5px 10px;
  transition:border-color 0.15s,color 0.15s;
}
.ag-subview-back:hover{border-color:var(--border2);color:var(--text)}
.ag-subview-title{font-size:13px;font-weight:600;color:var(--text)}

/* ════════════════════════════════════════════════════════════════════════════
   WORK QUEUE — operational lead of the home view
   ════════════════════════════════════════════════════════════════════════════ */

.ag-queue{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px 20px;
  display:flex;flex-direction:column;gap:14px;
}

.ag-queue-stats{display:flex;flex-wrap:wrap;gap:24px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.ag-queue-stat{display:flex;flex-direction:column;gap:2px}
.ag-queue-stat-num{
  font-size:22px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;letter-spacing:-0.01em;
}
.ag-queue-stat-lbl{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.05em}
.ag-queue-stat--risk .ag-queue-stat-num{color:var(--amber)}

.ag-queue-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ag-queue-row{
  display:grid;grid-template-columns:36px 1fr auto;
  gap:14px;align-items:center;
  padding:12px 14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  transition:border-color 0.15s,box-shadow 0.15s;
}
.ag-queue-row:hover{border-color:var(--border2);box-shadow:var(--shadow)}
.ag-queue-row-badge{
  width:36px;height:36px;border-radius:10px;
  background:var(--accent-bg);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
}
.ag-queue-row-main{display:flex;flex-direction:column;gap:4px;min-width:0}
.ag-queue-row-action{font-size:14px;font-weight:600;color:var(--text);line-height:1.35}
.ag-queue-row-summary{font-size:12px;color:var(--text2);line-height:1.4}
.ag-queue-row-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:2px}
.ag-queue-row-agent{font-size:11px;color:var(--text3);font-weight:500}
.ag-queue-row-actions{display:flex;gap:6px;flex-shrink:0}

/* Chips (impact + risk) */
.ag-chip{
  display:inline-block;padding:2px 8px;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:0.02em;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.ag-chip--impact{background:var(--green-bg);color:var(--green)}
.ag-chip--impact-neg{background:var(--red-bg);color:var(--red)}
.ag-chip--risk-lo{background:var(--surface3);color:var(--text3)}
.ag-chip--risk-med{background:var(--amber-bg);color:var(--amber)}
.ag-chip--risk-hi{background:var(--red-bg);color:var(--red)}

/* Empty state */
.ag-queue--empty{padding:0;border:none;background:none;box-shadow:none}
.ag-queue-empty-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:32px 24px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
}
.ag-queue-empty-icon{
  width:48px;height:48px;border-radius:50%;
  background:var(--green-bg);color:var(--green);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;margin-bottom:6px;
}
.ag-queue-empty-title{font-size:15px;font-weight:600;color:var(--text)}
.ag-queue-empty-sub{font-size:13px;color:var(--text3)}

/* ════════════════════════════════════════════════════════════════════════════
   SQUAD GRID
   ════════════════════════════════════════════════════════════════════════════ */

.ag-squads{display:flex;flex-direction:column;gap:18px}

.ag-squad{display:flex;flex-direction:column;gap:12px}
.ag-squad-header{
  display:flex;align-items:baseline;gap:10px;
  background:none;border:none;padding:6px 4px;cursor:pointer;
  font-family:inherit;text-align:left;
  border-radius:6px;
  transition:background 0.12s;
}
.ag-squad-header:hover{background:var(--surface-hover)}
.ag-squad-header--static{cursor:default}
.ag-squad-header--static:hover{background:none}
.ag-squad-chev{
  color:var(--text3);font-size:11px;display:inline-block;
  transition:transform 0.18s ease;
}
.ag-squad--collapsed .ag-squad-chev{transform:rotate(-90deg)}
.ag-squad-label{font-size:14px;font-weight:600;color:var(--text)}
.ag-squad-blurb{font-size:12px;color:var(--text3);flex:1}
.ag-squad-count{
  font-size:11px;color:var(--text3);font-weight:600;
  background:var(--surface3);padding:2px 8px;border-radius:6px;
}

.ag-squad-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.ag-squad-grid--solo{grid-template-columns:minmax(0,1fr)}

@media (max-width:1100px){
  .ag-squad-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .ag-squad-grid{grid-template-columns:minmax(0,1fr)}
  .ag-queue-row{grid-template-columns:32px 1fr;grid-template-rows:auto auto}
  .ag-queue-row-actions{grid-column:1 / -1;justify-content:flex-end}
}

/* ════════════════════════════════════════════════════════════════════════════
   AGENT CARD
   ════════════════════════════════════════════════════════════════════════════ */

.ag-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px;
  display:flex;flex-direction:column;gap:10px;
  cursor:pointer;
  transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;
  outline:none;
}
.ag-card:hover{
  border-color:var(--border2);
  box-shadow:var(--shadow-lg);
}
.ag-card:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow);
}
.ag-card--paused{opacity:0.78}
.ag-card--error{border-color:color-mix(in srgb,var(--red) 30%,var(--border))}

.ag-card-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ag-card-icon{
  width:32px;height:32px;border-radius:8px;
  background:var(--accent-bg);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.ag-card-name{
  font-size:14px;font-weight:600;color:var(--text);
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Dependency pill */
.ag-pill{
  display:inline-block;padding:2px 8px;border-radius:8px;
  font-size:10px;font-weight:600;letter-spacing:0.02em;white-space:nowrap;
}
.ag-pill--active{background:var(--green-bg);color:var(--green)}
.ag-pill--paused{background:var(--surface3);color:var(--text3)}
.ag-pill--needs_setup{background:var(--amber-bg);color:var(--amber)}
.ag-pill--insufficient_data{background:var(--blue-bg);color:var(--blue)}
.ag-pill--error{background:var(--red-bg);color:var(--red)}

.ag-needs-review{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
}

.ag-card-role{font-size:12px;color:var(--text2);line-height:1.5}

/* Inline variant — used by composer-primary slugs (Ask Flume) so the role
   summary sits in the head row beside the name instead of below it.
   Saves a row of vertical space when the card's micro-visual is a composer
   that needs the height. `flex:1` claims the slack between name and pill;
   `min-width:0` lets the text ellipsis kick in on narrow viewports. */
.ag-card-role-inline{
  font-size:12px;color:var(--text2);line-height:1.4;
  flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-card-role-inline::before{content:'·';margin-right:8px;color:var(--text3)}
/* Stop the name from claiming all the slack — it'd push the role off-screen. */
.ag-card-head:has(.ag-card-role-inline) .ag-card-name{flex:0 0 auto}

.ag-card-last{font-size:13px;color:var(--text);line-height:1.45}
.ag-card-last-text{color:var(--text)}
.ag-card-last-when{color:var(--text3);font-size:12px}
.ag-card-last-fallback{color:var(--text3);font-style:italic}
/* Session 6.7: when a micro-visual sits above, the last-action text becomes a
   subdued one-line caption rather than the headline of the card. Only used
   by slugs in MICROVISUAL_KEEPS_LAST_ACTION (empty in Wave 1). */
.ag-card-last--with-visual{font-size:12px;color:var(--text3);line-height:1.4;margin-top:2px}

/* ── Session 6.7 — micro-visuals (`.ag-mv-*`) ────────────────────────── */
.ag-mv{display:flex;flex-direction:column;gap:6px}

/* Budget Pacer — bars */
.ag-mv-bars{gap:4px}
.ag-mv-bar-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,2fr) auto;
  column-gap:10px;align-items:center;font-size:12px;
}
.ag-mv-bar-name{
  color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-mv-bar-track{
  height:6px;background:var(--surface3);border-radius:100px;overflow:hidden;
}
.ag-mv-bar-fill{
  height:100%;background:var(--accent);border-radius:100px;
  transition:width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.ag-mv-bar-label{
  color:var(--text2);font-variant-numeric:tabular-nums;font-size:11.5px;text-align:right;
}

/* Pacing Watchdog — pace track (mirrors .stat-pace-* on Monthly Budget hero) */
.ag-mv-pace{gap:6px}
.ag-mv-pace-head{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:12px;
}
.ag-mv-pace-name{
  color:var(--text2);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-mv-pace-badge{
  flex-shrink:0;font-size:11px;font-weight:500;
  padding:1px 7px;border-radius:100px;
  font-variant-numeric:tabular-nums;
}
.ag-mv-pace-badge--on            {background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.ag-mv-pace-badge--slightly-ahead{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.ag-mv-pace-badge--ahead         {background:color-mix(in srgb,var(--red)   15%,transparent);color:var(--red)}
.ag-mv-pace-badge--slightly-behind{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.ag-mv-pace-badge--behind        {background:color-mix(in srgb,var(--red)   15%,transparent);color:var(--red)}

.ag-mv-pace-track{
  position:relative;height:4px;background:var(--border);border-radius:2px;
  overflow:visible;
}
.ag-mv-pace-fill{
  height:100%;border-radius:2px;width:0;
  transition:width 0.6s cubic-bezier(0.22,1,0.36,1);
}
.ag-mv-pace-fill--on-track                           {background:var(--green)}
.ag-mv-pace-fill--slightly-under,
.ag-mv-pace-fill--slightly-over                      {background:var(--amber)}
.ag-mv-pace-fill--underpacing,
.ag-mv-pace-fill--overpacing                         {background:var(--red)}

.ag-mv-pace-ideal{
  position:absolute;top:-2px;bottom:-2px;width:2px;
  background:color-mix(in srgb,var(--text) 45%,transparent);
  border-radius:1px;
  transform:translateX(-1px);
  pointer-events:none;
}
.ag-mv-pace-caption{
  font-size:11.5px;color:var(--text3);
  font-variant-numeric:tabular-nums;
}

/* Health Officer — check list */
.ag-mv-checks{gap:3px}
.ag-mv-check-row{
  display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text2);
  line-height:1.4;
}
.ag-mv-check-dot{
  width:15px;height:15px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;flex-shrink:0;
}
.ag-mv-check-dot--green{background:var(--green-bg);color:var(--green)}
.ag-mv-check-dot--amber{background:var(--amber-bg);color:var(--amber)}
.ag-mv-check-dot--red  {background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.ag-mv-check-label{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* Search Waste Hunter — term list */
.ag-mv-terms{gap:2px}
.ag-mv-term{
  display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.4;
  font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
  color:var(--text2);
}
.ag-mv-term-marker{
  width:11px;flex-shrink:0;text-align:center;
  font-size:10px;color:var(--text3);
}
.ag-mv-term-text{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-mv-term--applied .ag-mv-term-text{
  text-decoration:line-through;color:var(--text3);
}
.ag-mv-term--applied .ag-mv-term-marker{color:var(--green)}
.ag-mv-term--pending .ag-mv-term-marker{color:var(--accent)}

/* Creative Fatigue Analyst — thumb grid */
.ag-mv-thumbs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:6px;
}
.ag-mv-thumb{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 8px;min-height:38px;
  background:var(--surface2);border:1px solid var(--border);border-radius:6px;
  font-size:11px;color:var(--text2);line-height:1.25;
  overflow:hidden;
}
.ag-mv-thumb--fatigued{opacity:0.55}
.ag-mv-thumb-tag{
  position:absolute;top:4px;right:5px;
  width:14px;height:14px;border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;
  background:color-mix(in srgb,var(--text3) 18%,transparent);
  color:var(--text2);
}
.ag-mv-thumb-tag--meta{
  background:color-mix(in srgb,var(--accent) 22%,transparent);
  color:var(--accent);
}
.ag-mv-thumb-tag--google{
  background:color-mix(in srgb,var(--green) 22%,transparent);
  color:var(--green);
}
.ag-mv-thumb-title{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding-right:18px;font-weight:500;
}
.ag-mv-thumb-badge{
  align-self:flex-start;
  margin-top:2px;
  font-size:9px;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--amber);
  background:var(--amber-bg);
  padding:1px 5px;border-radius:3px;font-weight:600;
}

/* Market Intelligence — competitor curves */
.ag-mv-competitors{gap:3px}
.ag-mv-comp-svg{width:100%;height:36px;display:block}
.ag-mv-comp-threshold{
  stroke:var(--text3);stroke-width:1;opacity:0.55;
}
.ag-mv-comp-path{
  fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.ag-mv-comp-path--0{stroke:var(--accent)}
.ag-mv-comp-path--1{stroke:var(--amber)}
.ag-mv-comp-meta{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:11.5px;color:var(--text2);min-height:18px;
}
.ag-mv-comp-domains{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;
}
.ag-mv-comp-chip{
  flex-shrink:0;
  font-size:10px;color:var(--accent);font-weight:600;
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  padding:1px 6px;border-radius:4px;
  white-space:nowrap;
}

/* Model Architect — mini Hill curve */
.ag-mv-hill{gap:3px}
.ag-mv-hill-svg{width:100%;height:36px;display:block}
.ag-mv-hill-path{
  fill:none;stroke:var(--accent);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
/* Tracer dot — ping-pongs along the curve via SMIL <animateMotion> declared
   inline on the element. A soft glow around the dot makes the motion feel
   ambient rather than mechanical. Hidden when the user prefers reduced
   motion (SMIL has no CSS animation-play-state equivalent, so we drop
   visibility rather than try to pause). */
.ag-mv-hill-tracer{
  fill:var(--accent);
  filter:drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 70%, transparent));
}
.ag-mv-hill-caption{
  font-size:12px;color:var(--text2);
}
@media (prefers-reduced-motion:reduce){
  .ag-mv-hill-tracer{display:none}
}

/* Brief Author — excerpt + read link */
.ag-mv-brief{gap:6px}
.ag-mv-brief-text{
  margin:0;font-size:12px;color:var(--text2);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;
}
.ag-mv-brief-link{
  align-self:flex-start;
  font-size:11px;color:var(--accent);font-weight:600;
  letter-spacing:0.01em;
}

/* Ask Flume — CTA bubble + typing dots */
/* ── Ask Flume live composer (replaces the old cta-bubble) ──────────────────
   Two-element row: textarea + circular send button. Sits inside the card's
   normal flow; click-anywhere on the card NO LONGER bubbles up to "View
   activity" from this region (the component stops propagation). The send
   handoff opens the full Flume page and auto-fires the message there. */
.ag-mv-composer{
  /* `.ag-mv` base sets `flex-direction:column` so the textarea + send would
     stack vertically (doubling the wrap height for no reason). Pin to row. */
  display:flex;flex-direction:row;align-items:flex-end;gap:8px;
  padding:6px 8px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:10px;
  transition:border-color 0.12s,box-shadow 0.12s;
}
.ag-mv-composer:focus-within{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.ag-mv-composer-input{
  flex:1 1 auto;min-width:0;width:100%;
  background:transparent;border:none;outline:none;resize:none;
  font:inherit;color:var(--text);
  font-size:13px;line-height:1.4;text-align:left;
  padding:4px 2px;
  max-height:120px;
}
.ag-mv-composer-input::placeholder{color:var(--text3)}
.ag-mv-composer-send{
  flex:0 0 auto;
  width:30px;height:30px;
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:8px;
  background:var(--accent);color:#fff;cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
  transition:background 0.12s,opacity 0.12s,transform 0.12s;
}
.ag-mv-composer-send:hover:not(:disabled){background:var(--accent2)}
.ag-mv-composer-send:active:not(:disabled){transform:scale(0.94)}
.ag-mv-composer-send:disabled{opacity:0.4;cursor:not-allowed}
/* ROASt theme — match the gradient affordance of the View activity button +
   "+ New Portfolio". */
.theme-roast .ag-mv-composer-send:not(:disabled){
  background:var(--accent-grad);background-clip:padding-box;
}
.theme-roast .ag-mv-composer-send:hover:not(:disabled){
  filter:brightness(1.04) saturate(1.06);
  box-shadow:0 6px 18px rgba(243,119,113,0.28);
}

/* Generalist-at-top section spacing — drops the original "Generalist · The
   senior — does everything else." header chrome since the composer card now
   leads. */
.ag-squad--generalist-top{margin-bottom:8px}

.ag-mv-cta{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:14px 14px 14px 4px;
  font-size:12.5px;color:var(--text2);
}
.ag-mv-cta-text{flex:1 1 auto;color:var(--text2)}
.ag-mv-cta-dots{
  display:inline-flex;align-items:center;gap:3px;flex-shrink:0;
}
.ag-mv-cta-dots span{
  width:4px;height:4px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,transparent);
  animation:ag-mv-cta-bounce 1.2s ease-in-out infinite;
}
.ag-mv-cta-dots span:nth-child(2){animation-delay:0.15s}
.ag-mv-cta-dots span:nth-child(3){animation-delay:0.30s}
@keyframes ag-mv-cta-bounce{
  0%,80%,100%{opacity:0.35;transform:translateY(0)}
  40%       {opacity:1;   transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){
  .ag-mv-cta-dots span{animation:none;opacity:0.6}
}

.ag-card-metrics{
  font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;line-height:1.4;
}

.ag-card-next{
  display:flex;align-items:baseline;gap:6px;
  font-size:11px;color:var(--text3);
  padding-top:4px;
  /* Pin to the bottom of the card so cards with short micro-visuals (e.g.
     Search Waste Hunter's 3-term list) don't leave a floating gap between
     the visual and this line. The action-chip (when present) + actions row
     follow naturally below. Cards without next-run (Ask Flume) keep the
     actions-row `margin-top:auto` for the same effect — see selector below. */
  margin-top:auto;
}
.ag-card-next-label{text-transform:uppercase;letter-spacing:0.05em}
.ag-card-next-when{color:var(--text2);font-weight:500}

.ag-card-action-chip{
  align-self:flex-start;
  font-size:11px;color:var(--amber);font-weight:600;
  background:var(--amber-bg);padding:4px 10px;border-radius:6px;
  text-decoration:none;
  transition:filter 0.12s;
}
.ag-card-action-chip:hover{filter:brightness(1.08)}

.ag-card-actions{
  display:flex;gap:8px;padding-top:8px;
  /* `margin-top:auto` pins the row to the bottom of the card. When next-run
     is also present it ALSO has `margin-top:auto` — but two auto margins in
     a flex column split the slack equally, leaving a gap between them. The
     `:has` rule below zeroes this one out so the next-run + chip + actions
     stack together at the bottom as one unit. */
  margin-top:auto;
  border-top:1px solid var(--border);
}
.ag-card:has(.ag-card-next) .ag-card-actions{margin-top:0}
.ag-card-btn{
  font-family:inherit;font-size:12px;font-weight:600;
  padding:7px 14px;border-radius:5px;cursor:pointer;
  border:1px solid transparent;letter-spacing:0.01em;line-height:1;
  transition:background 0.12s,border-color 0.12s,color 0.12s,box-shadow 0.12s,filter 0.12s;
}
.ag-card-btn:active{transform:scale(0.97)}
/* Geometry + colour match `.btn-primary` (components.css) so the View
   activity button reads as the same affordance as "+ New Portfolio". */
.ag-card-btn-primary{
  background:var(--accent);color:#fff;border-color:transparent;
  box-shadow:0 1px 2px rgba(0,0,0,0.08);
}
.ag-card-btn-primary:hover{background:var(--accent2);box-shadow:0 6px 18px rgba(0,0,0,0.14)}
.ag-card-btn-primary:disabled{opacity:0.55;cursor:not-allowed}
.ag-card-btn-secondary{
  background:var(--surface);color:var(--text2);border:1px solid var(--border);
}
.ag-card-btn-secondary:hover{
  background:var(--surface-hover);border-color:var(--border2);color:var(--text);
}
.ag-card-btn-secondary:disabled{opacity:0.55;cursor:not-allowed}

/* Session 6 — Pause + Configure tertiary buttons. Visually quieter than
   View activity (primary) + Talk (secondary). Resume (re-enable) uses the
   green accent so the affordance reads as a recovery action. */
.ag-card-btn-tertiary{
  background:transparent;color:var(--text3);border:1px solid var(--border);
}
.ag-card-btn-tertiary:hover{
  background:var(--surface-hover);border-color:var(--border2);color:var(--text2);
}
.ag-card-btn-tertiary:disabled{opacity:0.55;cursor:not-allowed}
.ag-card-btn-resume{
  color:var(--green);border-color:color-mix(in srgb, var(--green) 50%, var(--border));
}
.ag-card-btn-resume:hover{
  background:color-mix(in srgb, var(--green) 12%, transparent);color:var(--green);
}

/* Session 6 — user-disabled pill + card treatment. Distinct from the
   adapter's own 'paused' state (that means "agent's dependency is paused");
   this means "user explicitly disabled the agent in the Configure modal". */
.ag-pill--user-disabled{
  background:color-mix(in srgb, var(--amber) 15%, transparent);color:var(--amber);
}
.ag-card--user-disabled{opacity:0.78}
.ag-card--user-disabled .ag-card-metrics{opacity:0.7}

/* ════════════════════════════════════════════════════════════════════════════
   CONFIGURE MODAL — Agent Workbench Session 6 (`.ag-cfg-*` prefix)
   Two flavours: generic (Enabled + autonomy section) + Budget Pacer
   (read-only portfolio-shortcut table per D11 carve-out).
   ════════════════════════════════════════════════════════════════════════════ */
.ag-cfg-modal{
  /* Sits on top of `.modal-overlay`. Width chosen so the Budget Pacer
     per-portfolio table doesn't horizontal-scroll for typical (5-20)
     portfolio counts; generic body looks fine narrower but stays put. */
  width:min(620px, calc(100vw - 48px));
  max-height:calc(100vh - 96px);
  display:flex;flex-direction:column;
  background:var(--modal-bg);border-radius:14px;border:1px solid var(--border);
  backdrop-filter:blur(20px);
  overflow:hidden;
}
.ag-cfg-modal .modal-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:20px 24px 14px;border-bottom:1px solid var(--border);
  flex:0 0 auto;
}
.ag-cfg-modal .modal-close{
  background:none;border:none;font-size:24px;color:var(--text3);cursor:pointer;
  padding:0 4px;border-radius:6px;line-height:1;
}
.ag-cfg-modal .modal-close:hover{color:var(--text)}
.ag-cfg-body{padding:18px 24px;overflow-y:auto;flex:1 1 auto}
.ag-cfg-help{
  font-size:12.5px;color:var(--text3);line-height:1.5;margin:0 0 14px;
}
.ag-cfg-empty{
  font-size:13px;color:var(--text2);padding:24px 0;text-align:center;
}
.ag-cfg-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 0;border-bottom:1px solid var(--border);
}
.ag-cfg-row:last-child{border-bottom:none}
.ag-cfg-row-label{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 auto}
.ag-cfg-row-title{font-size:13.5px;font-weight:500;color:var(--text)}
.ag-cfg-row-help{font-size:12px;color:var(--text3);line-height:1.45}
.ag-cfg-row--toggle input[type="checkbox"]{
  width:36px;height:20px;flex:0 0 auto;cursor:pointer;
}
.ag-cfg-row--input input[type="number"]{
  width:80px;padding:6px 10px;border-radius:6px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-size:13px;
}
.ag-cfg-row--input input[type="number"]:disabled{opacity:0.55;cursor:not-allowed}
.ag-cfg-section{
  margin-top:18px;padding-top:18px;border-top:2px solid var(--border);
}
.ag-cfg-section-title{
  font-size:13px;font-weight:600;color:var(--text);margin:0 0 4px;
}
.ag-cfg-section--autonomy .ag-cfg-section-title{
  color:var(--amber);
}
.ag-cfg-footer{
  display:flex;justify-content:flex-end;gap:10px;
  padding:14px 24px;border-top:1px solid var(--border);
  flex:0 0 auto;
}

/* Budget Pacer table */
.ag-cfg-bp-table{
  display:flex;flex-direction:column;gap:0;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;
}
.ag-cfg-bp-row{
  display:grid;grid-template-columns:1.5fr 0.7fr 0.9fr 0.7fr 0.8fr;
  align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);
  font-size:12.5px;
}
.ag-cfg-bp-row:last-child{border-bottom:none}
.ag-cfg-bp-row--head{
  background:var(--surface);font-weight:600;color:var(--text2);font-size:11.5px;
  text-transform:uppercase;letter-spacing:0.04em;
}
.ag-cfg-bp-cell{padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-cfg-bp-cell--name{color:var(--text);font-weight:500}
.ag-cfg-bp-chip{
  display:inline-block;padding:2px 8px;border-radius:10px;
  background:var(--surface3);color:var(--text3);font-size:11px;font-weight:500;
}
.ag-cfg-bp-chip--on{background:var(--green-bg);color:var(--green)}

/* Confirm overlay for autonomy first-time-on.
   P2 audit follow-up: prior rule layered `backdrop-filter:blur(4px)` here on
   top of the parent `.ag-cfg-modal`'s `backdrop-filter:blur(20px)`. Per
   CLAUDE.md ("`backdrop-filter` inside a stacking context — PORTAL REQUIRED"),
   nested backdrop-filters only blur within the parent's composite layer and
   render inconsistently across themes. The semi-transparent `--bg 70%`
   background gives enough visual separation on its own; blur was decorative
   and theme-fragile. Removed 2026-05-18. */
.ag-cfg-confirm{
  position:absolute;inset:0;background:color-mix(in srgb, var(--bg) 82%, transparent);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.ag-cfg-confirm-card{
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:22px 24px;max-width:440px;box-shadow:var(--shadow-lg);
}
.ag-cfg-confirm-title{
  font-size:15px;font-weight:600;color:var(--text);margin:0 0 10px;
}
.ag-cfg-confirm-body{
  font-size:13px;color:var(--text2);line-height:1.55;margin:0 0 18px;
}
.ag-cfg-confirm-actions{display:flex;justify-content:flex-end;gap:10px}

/* ════════════════════════════════════════════════════════════════════════════
   ACTIVITY FEED — Agent Workbench Session 3 (per-agent drilldown)
   `.ag-feed-*` prefix. Visual language matches `.hist-*` from history.css for
   consistency with ChangeHistory (per plan §3.6).
   ════════════════════════════════════════════════════════════════════════════ */

/* Feed panel-mode mirrors the home-mode reset so the subview renders inside
   normal page padding rather than the legacy Flume full-viewport chrome. */
#panel-agent.agents-mode-feed.active{
  display:block;
  margin:0;height:auto;overflow:visible;
  animation:panelIn 0.22s cubic-bezier(0.22,1,0.36,1);
}
main:has(#panel-agent.agents-mode-feed.active){overflow:auto}

.ag-feed-root{
  display:flex;flex-direction:column;gap:18px;
  /* No max-width cap — matches the home view + Dashboard panel width. */
  padding:18px 24px 32px;
}

.ag-subview-actions{margin-left:auto;display:flex;gap:8px}

/* ── Identity strip ── */
.ag-feed-identity{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:18px 20px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;align-items:center;
}
.ag-feed-identity-icon{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  color:var(--accent);border-radius:10px;
}
.ag-feed-identity-titles{display:flex;flex-direction:column;gap:4px;min-width:0}
.ag-feed-identity-name{
  font-size:18px;font-weight:600;color:var(--text);margin:0;
  display:flex;align-items:center;gap:10px;letter-spacing:-0.01em;
}
.ag-feed-identity-role{font-size:13px;color:var(--text3);margin:0}
.ag-feed-identity-meta{
  display:flex;flex-direction:column;gap:2px;text-align:right;
}
.ag-feed-identity-meta-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em}
.ag-feed-identity-meta-value{font-size:12px;color:var(--text2);font-weight:500}

/* ── Stats strip ── */
.ag-feed-stats{
  display:flex;gap:12px;flex-wrap:wrap;
}
.ag-feed-stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:12px 16px;min-width:140px;
  display:flex;flex-direction:column;gap:2px;
}
.ag-feed-stat-value{font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.ag-feed-stat-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em}
.ag-feed-stat--accent .ag-feed-stat-value{color:var(--accent)}

/* ── Filters ── */
.ag-feed-filters{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:14px 16px;
  display:flex;flex-direction:column;gap:12px;
  position:relative;
}
.ag-feed-filter-group{display:flex;flex-direction:column;gap:6px}
.ag-feed-filter-label{font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:0.04em;font-weight:500}
.ag-feed-chip-row{display:flex;flex-wrap:wrap;gap:6px}
.ag-feed-chip{
  font-family:inherit;font-size:12px;font-weight:500;
  background:var(--surface2);color:var(--text2);
  border:1px solid var(--border);border-radius:999px;
  padding:5px 12px;cursor:pointer;
  transition:background 0.12s,border-color 0.12s,color 0.12s;
}
.ag-feed-chip:hover{border-color:var(--border2);color:var(--text)}
.ag-feed-chip--active{
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);
  color:var(--accent2);
}
.ag-feed-chip-count{
  font-size:10px;color:var(--text3);margin-left:4px;
  font-variant-numeric:tabular-nums;
}
.ag-feed-chip--active .ag-feed-chip-count{color:var(--accent2);opacity:0.85}
.ag-feed-filter-clear{
  position:absolute;top:14px;right:16px;
  background:none;border:none;color:var(--text3);cursor:pointer;
  font-family:inherit;font-size:11px;text-decoration:underline;padding:0;
}
.ag-feed-filter-clear:hover{color:var(--text)}

/* ── Feed list ── */
.ag-feed{
  list-style:none;margin:0;padding:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ag-feed-row{
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;gap:8px;
  transition:background 0.12s;
}
.ag-feed-row:last-child{border-bottom:none}
.ag-feed-row:hover{background:var(--surface2)}
.ag-feed-row--expanded{background:var(--surface2)}

.ag-feed-row-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.ag-feed-ts{
  color:var(--text3);font-family:var(--font-ui);
  font-variant-numeric:tabular-nums;font-size:11px;white-space:nowrap;
  min-width:72px;
}
.ag-feed-pill{
  display:inline-flex;align-items:center;
  padding:2px 8px;border-radius:999px;
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
  white-space:nowrap;
}
.ag-feed-pill--green  {background:var(--green-bg);  color:var(--green)}
.ag-feed-pill--red    {background:var(--red-bg);    color:var(--red)}
.ag-feed-pill--blue   {background:var(--blue-bg);   color:var(--blue)}
.ag-feed-pill--amber  {background:var(--amber-bg);  color:var(--amber)}
.ag-feed-pill--accent {background:var(--accent-bg); color:var(--accent2)}
.ag-feed-pill--muted  {background:var(--surface3);  color:var(--text3)}

.ag-feed-summary{
  flex:1 1 320px;min-width:0;
  font-size:13px;color:var(--text);line-height:1.4;
}
.ag-feed-reversible{
  font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;
  background:color-mix(in srgb,var(--blue) 14%,transparent);
  color:var(--blue);
  padding:2px 8px;border-radius:999px;white-space:nowrap;
  cursor:help;
}

.ag-feed-row-actions{
  display:flex;gap:8px;flex-wrap:wrap;
  padding-left:82px;
}
.ag-feed-action{
  font-family:inherit;font-size:11px;font-weight:500;
  background:transparent;color:var(--text2);
  border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;cursor:pointer;
  transition:background 0.12s,border-color 0.12s,color 0.12s;
}
.ag-feed-action:hover{border-color:var(--border2);color:var(--text);background:var(--surface)}
.ag-feed-action--link{color:var(--accent2);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.ag-feed-action--link:hover{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-color:var(--accent);color:var(--accent);
}

.ag-feed-why{
  margin-left:82px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  padding:10px 12px;
  font-size:12px;color:var(--text2);line-height:1.5;
  display:flex;flex-direction:column;gap:8px;
}
.ag-feed-why--loading{color:var(--text3);font-style:italic}
.ag-feed-why--error{color:var(--red);background:var(--red-bg);border-color:color-mix(in srgb,var(--red) 25%,transparent)}
.ag-feed-why--empty{color:var(--text3)}
.ag-feed-why-text{white-space:pre-line}
.ag-feed-why-link{
  align-self:flex-start;
  font-family:inherit;font-size:11px;color:var(--accent);
  background:none;border:none;padding:0;cursor:pointer;text-decoration:underline;
}
.ag-feed-why-link:hover{color:var(--accent2)}

/* ── Empty state ── */
.ag-feed-empty{
  background:var(--surface);
  border:1px dashed var(--border2);
  border-radius:var(--radius-lg);
  padding:28px 24px;text-align:center;
  display:flex;flex-direction:column;gap:6px;
}
.ag-feed-empty-title{font-size:14px;font-weight:500;color:var(--text)}
.ag-feed-empty-sub{font-size:12px;color:var(--text3)}

@media (max-width:720px){
  .ag-feed-identity{grid-template-columns:auto 1fr;gap:12px}
  .ag-feed-identity-meta{display:none}
  .ag-feed-row-actions{padding-left:0}
  .ag-feed-why{margin-left:0}
}