/**
 * @file agents-detail.css
 * @description Styles for agent detail view sub-tabs (tasks, directives).
 *   Uses agd- prefix to avoid collisions with other profile styles.
 *   All colors use CSS variables from theme.css.
 * @version-history
 *   v1.21.0 -- 2026-08-13 -- The card-footer host link truncates instead of wrapping: a hostname is
 *     one unbreakable token, and wrapping it took the footer row from 31px to 54px at 390px.
 *   v1.20.0 -- 2026-07-17 -- Generalize the card scheme: .pf-agd-card (standalone or
 *     grid child) + .pf-agd-card-grid/--full replace the integration-only
 *     .pf-agd-prod-grid; quality section titles drop the stacked-layout margin-top.
 *   v1.19.0 -- 2026-07-17 -- Integration production view: .pf-agd-prod-grid two-column
 *     card grid (+ --full spans); .pf-agd-info-row becomes a fixed 150px-label grid so
 *     values and status dots align in one column.
 *   v1.18.0 -- 2026-07-17 -- Style unification round: pf-agd-section-label matches
 *     pf-agd-section-title (0.8rem); governance grid items stack label-over-value;
 *     "Next:" inside the zone-2 banner title is no longer uppercased; the "+ Add tag"
 *     chip is neutral (dim) until hover.
 *   v1.17.0 -- 2026-07-12 -- Add agent ID-card styles (.pf-agd-idcard*) — a hover/focus-revealed
 *     identity plate over each Shared Board mini-card (labelled GAII, issued date, last seen,
 *     task/message tallies, trust + morsels, issuer node). Absolutely positioned so reveal
 *     causes no grid layout shift; board card gains position:relative + focus-visible ring.
 *   v1.16.0 -- 2026-07-07 -- Add inline image-preview styles for stored memory values that
 *     reference image URLs (.pf-agd-memory-imgs, -img-link, -img) — e.g. crews.<agent>.images.*.
 *   v1.15.0 -- 2026-07-06 -- .pf-agd-solo-toast gets the shared toast max-width min(92vw, 40rem)
 *     + centered wrapping so long messages stay readable, incl. mobile.
 *   v1.14.0 -- 2026-07-03 -- Add Contracts sub-tab styles (.pf-agd-contracts, .agc-caps, .agc-list,
 *     .agc-row, .agc-where, .agc-org, .agc-since) — agent-side contract-engagement visibility.
 *   v1.13.0 -- 2026-06-24 -- Secretary P5 (S-A): add .pf-agd-badge--specialist (specialist agent type badge).
 *   v1.12.0 -- 2026-06-22 -- Add .pf-agd-capwrap rule so the capabilities summary
 *     ("N tools · N skills · N langs") gets the card content inset (1rem) instead of
 *     sitting flush against the edge, plus a small top gap from the tag/badge strip.
 *   v1.11.0 -- 2026-06-21 -- Add has-unseen DOT badge modifier (.pf-agd-*-badge--dot): a small
 *     round indicator replacing the old numeric change-count badge.
 *   v1.10.0 -- 2026-06-03 -- Add fleet "running now" panel styles (.pf-agd-active,
 *     -head, -empty, -list, -row, -dot, -agent, -title, -time) for the cross-agent
 *     active-tasks list between the board and the agent list. All colors tokenized
 *     (var(--success) running dot/hover, var(--card-bg)/-alt, --border, --text-dim/-muted).
 *   v1.9.0 -- 2026-06-02 -- Component unification (#24 search bar): tokenize the
 *     hardcoded hex fallbacks in .pf-agd-search-input (var(--border, #E5E7EB) ->
 *     var(--border); var(--card-bg, #FFFFFF) -> var(--card); var(--text, #1A1A2E)
 *     -> var(--text)) so the task search input flips in dark mode. Markup left in
 *     place (view-scoped task filter state; not migrated to canonical SearchBar).
 *   v1.8.0 -- 2026-06-02 -- Component unification (#21 key/value rows): tokenize the
 *     hardcoded hex fallbacks in .pf-agd-info-label/.pf-agd-info-value
 *     (var(--text-dim, #6B7280) -> var(--text-dim); var(--text, #1A1A2E) ->
 *     var(--text)) so the agent-detail info rows flip in dark mode. Markup left
 *     in place (borderless look differs from canonical .kv-row).
 *   v1.7.0 -- 2026-06-02 -- Component unification (#6 stat cards): remove .agd-stat- and
 *     .pf-agd-stat- prefixed rules; agent activity/quality stats use canonical .stat-card
 *     family. (NB: the original entry ended in "star-slash" which TERMINATED this comment
 *     block early and made the parser eat the next rule — keep raw selector globs out of
 *     comments.)
 *   v1.0.0 -- 2026-05-21 -- Initial creation for Agent Dashboard Phase 1
 *   v1.1.0 -- 2026-05-22 -- Add capability badge styles for Capabilities sub-tab
 *   v1.2.0 -- 2026-05-22 -- Add Activity sub-tab styles (stats cards, chart, jobs, event log)
 *   v1.3.0 -- 2026-05-22 -- Add Services and Messages sub-tab styles
 *   v1.6.0 -- 2026-05-22 -- Add Task Creation Builder split-panel styles
 *   v1.5.0 -- 2026-05-22 -- Add task timestamp and todo completion time styles
 *   v2.0.0 -- 2026-05-24 -- Add styles for audit fix components (status dots, config actions, URL forms, help text)
 *   v2.1.0 -- 2026-05-24 -- Add scope footer and config upload styles for F8-F16 audit fixes
 *   v2.1.0 -- 2026-05-24 -- Add webhook edit form, role badge, strengths/gaps styles for Integration tab
 *   v1.4.0 -- 2026-05-22 -- Add Task TODO list, progress, environment badges, Start button styles
 *   v2.2.0 -- 2026-05-24 -- Fix C6: remove GAII CSS, M2: compact connect content
 *   v2.3.0 -- 2026-05-24 -- Add F18 violation badge, C5 directives textarea styles
 *   v2.4.0 -- 2026-05-24 -- Add header-row flex layout for title + connect button alignment
 *   v2.5.0 -- 2026-05-31 -- Add stored-memory-key inline editor (textarea), memory-detail wrapper, in-row edit/delete action rows, and danger-tinted ghost action styles for the Data Access tab
 *   v2.6.0 -- 2026-05-31 -- Add stored-key create form layout (pf-agd-keyadd-form, vertical stack)
 *   v2.7.0 -- 2026-05-31 -- Add stored-key sort controls (pf-agd-keys-controls/sort-*) and per-key created/updated meta (pf-agd-key-meta)
 *   v2.8.0 -- 2026-05-31 -- Add pop-out button (pf-agd-popout-btn), drag-to-reorder rows (pf-agd-dnd-*), and solo pop-out window layout (pf-agd-solo*)
 *   v2.9.0 -- 2026-05-31 -- Collapsed bar two-row layout (pf-agd-collapsed-main + pf-agd-collapsed-meta divider) to stop status overflow; move drag grip into the left margin so the card border stays flush
 *   v2.10.0 -- 2026-05-31 -- Extend the drag-row drop target left over the grip gutter (padding-left + negative margin-left) so dropping on/near the handle registers; card border stays aligned
 *   v2.11.0 -- 2026-05-31 -- Add Quality tab styles (per-context review rows, duration chips, custom-metric rows)
 *   v2.12.0 -- 2026-05-31 -- Add deliverable rating control styles (star picker, current-rating row, rate modal fields)
 *   v2.13.0 -- 2026-05-31 -- Add Quality-tab "Rate deliverables" pending-list row styles
 *   v2.14.0 -- 2026-06-01 -- Add Tasks-tab max-concurrent-tasks config row styles
 *   v2.15.0 -- 2026-06-01 -- Blur-title eye is now hover-only (revealed on task-row hover/focus) to de-clutter the list; blurred rows keep their eye visible
 *   v2.16.0 -- 2026-06-01 -- Add Tasks-tab triage UI styles (bucket segments + counts, search bar, time chips, per-task triage buttons)
 *   v2.17.0 -- 2026-06-01 -- Add per-task memory entries list styles (expanded task)
 *   v2.18.0 -- 2026-06-01 -- Per-task memory entries are collapsible with pretty-printed JSON bodies
 *   v2.19.0 -- 2026-06-01 -- Structured JSON view for memory values (key/value rows, indented nested blocks, type colours)
 *   v2.20.0 -- 2026-06-01 -- Tab bar wraps (flex-wrap) instead of horizontal scroll so all 10 tabs stay visible on two rows
 *   v2.21.0 -- 2026-06-02 -- Unseen-change badges: collapsed-card mini-badge (pf-agd-change-badge) + per-tab number badges (pf-agd-tab-badge)
 *   v2.22.0 -- 2026-06-02 -- Add divider line above the tab bar (border-top + spacing) so tabs don't blend with the status row above
 *   v2.23.0 -- 2026-06-02 -- Compact .md-body styles for agent message bubbles (Markdown-rendered outbound replies)
 *   v2.24.0 -- 2026-06-02 -- Compact .md-body styles for Markdown-rendered non-JSON task memory values (pf-agd-task-memory-md)
 *   v2.25.0 -- 2026-06-03 -- Compact .md-body styles for Markdown-rendered task descriptions (pf-agd-task-desc) so long agent-authored prompts render with structure
 *   v2.11.0 -- 2026-05-31 -- Widen the solo pop-out window (and pf-agd-solo max-width) so the agent card matches the list-view width and the full tab bar fits
 *   v2.12.0 -- 2026-05-31 -- Add completed-task deliverable styles (pf-agd-deliverable*) linking a task to its agent-memory output key
 *   v2.13.0 -- 2026-05-31 -- Add per-task blur-title toggle styles (pf-agd-blur-toggle, pf-agd-task-title--blurred) for hiding sensitive titles in screen recordings
 *   v2.26.0 -- 2026-06-09 -- Add custom agent-group styles (pf-agd-cgroup-bar/header/toggle/name/empty) for the drag-to-assign "Custom groups" list mode
 *   v2.27.0 -- 2026-06-09 -- Add editable tag-strip styles (pf-agd-tag-chip--editable, pf-agd-tag-chip-remove, pf-agd-tag-add-btn/input) for inline tag add/remove in the expanded card header
 *   v2.28.0 -- 2026-06-10 -- Detail-tab stat cards: content-sized + centered as a group
 *     (labels like "Onnistumisprosentti" no longer overflow); header-row gains bottom
 *     margin so the connect button isn't flush against the description text.
 *   v2.29.0 -- 2026-08-08 -- .pf-agd-idcard-copy deleted — the GAII copy button is btn-ghost btn-sm btn-copy-inline.
 */

/* Header row: title left, connect button right. The bottom margin keeps the
   connect button from sitting flush against the description text below. */
.pf-agd-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.65rem;
}

/* Stat cards inside agent detail tabs (Activity, Quality): size each card to its
   content so long uppercase labels ("Onnistumisprosentti") fit, and center the
   group instead of left-stacking it. */
.pf .pf-agd-tab-content .stat-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 1.25rem;
}
.pf .pf-agd-tab-content .stat-card {
  flex: 0 1 auto;
  min-width: 170px;
  padding: 14px 26px;
}

/* Sub-tab bar */
.pf .agd-subtab-bar ,
.pf .pf-agd-subtab-bar  {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border, #E5E7EB);
  margin-top: 1rem;
  padding-bottom: 0;
}
.pf .agd-subtab ,
.pf .pf-agd-subtab  {
  padding: 0.35rem 1rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim, #6B7280);
  cursor: pointer;
  font-size: 0.875rem;
  transition: color 0.15s, border-color 0.15s;
}
.pf .agd-subtab:hover ,
.pf .pf-agd-subtab:hover  { color: var(--text, #1A1A2E); }
.pf .agd-subtab-active ,
.pf .pf-agd-subtab-active  {
  color: var(--accent, #E8564A);
  border-bottom-color: var(--accent, #E8564A);
  font-weight: 600;
}

/* Sub-tab content area */
.pf .agd-subtab-content ,
.pf .pf-agd-subtab-content  {
  padding: 1rem 0 0.5rem;
  min-height: 120px;
}

/* Section headers inside sub-tabs */
.pf .agd-section-header ,
.pf .pf-agd-section-header  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.pf .agd-section-title ,
.pf .pf-agd-section-title  {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-dim, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
/* When used as a standalone group heading (outside .pf-agd-section-header),
   e.g. the Schedules tab's AIMEAT-dispatched / Agent-internal groups. */
.pf .sch-section > .pf-agd-section-title {
  display: block;
  margin: 0.25rem 0 0.5rem;
}

/* Task list items */
.pf .agd-task-item ,
.pf .pf-agd-task-item  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  margin-bottom: 0.35rem;
  background: var(--card-bg, #FFFFFF);
  cursor: pointer;
  transition: background 0.15s;
}
.pf .agd-task-item:hover ,
.pf .pf-agd-task-item:hover  { background: var(--card-bg-alt, #F3F4F6); }
.pf .agd-task-title ,
.pf .pf-agd-task-title  { font-weight: 500; flex: 1; font-size: 0.85rem; }
.pf .agd-task-meta ,
.pf .pf-agd-task-meta  { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.pf .agd-task-time ,
.pf .pf-agd-task-time  { font-size: 0.75rem; color: var(--text-dim, #6B7280); }

/* Status badges */
.pf .agd-status ,
.pf .pf-agd-status  {
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.pf .agd-status-draft ,
.pf .pf-agd-status-draft  { background: var(--card-bg-alt, #F3F4F6); color: var(--text-dim, #6B7280); }
.pf .agd-status-queued ,
.pf .pf-agd-status-queued  { background: rgba(217, 119, 6, 0.1); color: var(--warn, #F59E0B); }
.pf .agd-status-active ,
.pf .pf-agd-status-active  { background: rgba(37, 99, 235, 0.1); color: var(--blue, #3B82F6); }
.pf .agd-status-done ,
.pf .pf-agd-status-done  { background: rgba(16, 185, 129, 0.1); color: var(--success, #10b981); }
.pf .agd-status-failed ,
.pf .pf-agd-status-failed  { background: rgba(239, 68, 68, 0.1); color: var(--danger, #ef4444); }
.pf .agd-status-stalled ,
.pf .pf-agd-status-stalled  { background: rgba(239, 68, 68, 0.1); color: var(--warn, #F59E0B); }
.pf .pf-agd-status-revision_requested { background: rgba(217, 119, 6, 0.18); color: var(--warn, #F59E0B); }

/* Task revision flow (since 1.14.5): outdated todos shown collapsed beneath
   the active proposal so the owner can see what was replaced after a
   /request-changes round-trip. */
.pf .pf-agd-todo-history {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border, #E5E7EB);
}
.pf .pf-agd-todo-history-toggle {
  background: none;
  border: none;
  color: var(--text-dim, #6B7280);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.25rem 0;
  text-align: left;
}
.pf .pf-agd-todo-history-toggle:hover { color: var(--text); }
.pf .pf-agd-todo-list-outdated {
  opacity: 0.6;
  margin-top: 0.25rem;
}
.pf .pf-agd-todo-outdated .pf-agd-todo-title {
  text-decoration: line-through;
  color: var(--text-dim, #6B7280);
}

/* Request-changes modal contents */
.pf .pf-agd-modal-help {
  color: var(--text-dim, #6B7280);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.pf .pf-agd-revision-textarea {
  width: 100%;
  min-height: 8rem;
  padding: 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  background: var(--card, #FFFFFF);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  resize: vertical;
  box-sizing: border-box;
}

/* Task creation form */
.pf .agd-create-form ,
.pf .pf-agd-create-form  {
  padding: 0.75rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  margin-top: 0.5rem;
  background: var(--card-bg, #FFFFFF);
}
.pf .agd-form-field ,
.pf .pf-agd-form-field  { margin-bottom: 0.65rem; }
.pf .agd-form-field label ,
.pf .pf-agd-form-field label  {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-dim, #6B7280);
}
.pf .agd-form-field input,
.pf .agd-form-field textarea,
.pf .agd-form-field select ,
.pf .pf-agd-form-field input,
.pf .pf-agd-form-field textarea,
.pf .pf-agd-form-field select  {
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
  font-size: 0.85rem;
  font-family: inherit;
  box-sizing: border-box;
}
.pf .agd-form-field input:focus,
.pf .agd-form-field textarea:focus,
.pf .agd-form-field select:focus ,
.pf .pf-agd-form-field input:focus,
.pf .pf-agd-form-field textarea:focus,
.pf .pf-agd-form-field select:focus  {
  outline: none;
  border-color: var(--accent, #E8564A);
}
.pf .agd-form-field textarea ,
.pf .pf-agd-form-field textarea  { min-height: 70px; resize: vertical; }
.pf .agd-form-actions ,
.pf .pf-agd-form-actions  { display: flex; gap: 0.5rem; margin-top: 0.75rem; }

/* Task expanded detail / event log */
.pf .agd-task-expanded ,
.pf .pf-agd-task-expanded  {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #E5E7EB);
  border-top: none;
  border-radius: 0 0 var(--radius-xs, 6px) var(--radius-xs, 6px);
  margin-top: -0.35rem;
  margin-bottom: 0.35rem;
  background: var(--card-bg-alt, #F3F4F6);
  font-size: 0.85rem;
}
.pf .agd-task-desc ,
.pf .pf-agd-task-desc  { color: var(--text-dim, #6B7280); margin-bottom: 0.5rem; line-height: 1.4; }
.pf .agd-task-timestamps ,
.pf .pf-agd-task-timestamps  {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  margin-bottom: 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border, #E5E7EB);
}
.pf .agd-todo-completed-at ,
.pf .pf-agd-todo-completed-at  {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  margin-top: 0.15rem;
}
.pf .agd-task-actions ,
.pf .pf-agd-task-actions  { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }

.pf .agd-event-log ,
.pf .pf-agd-event-log  { max-height: 200px; overflow-y: auto; margin-top: 0.5rem; }
.pf .agd-event-item ,
.pf .pf-agd-event-item  {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--border, #E5E7EB);
  font-size: 0.8rem;
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.pf .agd-event-item:last-child ,
.pf .pf-agd-event-item:last-child  { border-bottom: none; }
.pf .agd-event-time ,
.pf .pf-agd-event-time  { color: var(--text-dim, #6B7280); font-size: 0.7rem; flex-shrink: 0; }
.pf .agd-event-type ,
.pf .pf-agd-event-type  { font-weight: 500; flex-shrink: 0; }

/* Empty state */
.pf .agd-empty ,
.pf .pf-agd-empty  {
  text-align: center;
  padding: 1.5rem;
  color: var(--text-dim, #6B7280);
  font-size: 0.85rem;
}
.pf .pf-agd-empty-hint {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-top: 0.25rem;
}

/* Directives display */
.pf .agd-directive-section ,
.pf .pf-agd-directive-section  { margin-bottom: 1rem; }
.pf .agd-directive-section h4 ,
.pf .pf-agd-directive-section h4  {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-dim, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pf .agd-purpose-text ,
.pf .pf-agd-purpose-text  {
  font-size: 0.85rem;
  color: var(--text, #1A1A2E);
  line-height: 1.5;
  padding: 0.35rem 0;
}
.pf .agd-rule-item ,
.pf .pf-agd-rule-item  {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.85rem;
  line-height: 1.4;
}
.pf .agd-rule-text ,
.pf .pf-agd-rule-text  { flex: 1; }
.pf .agd-rule-source ,
.pf .pf-agd-rule-source  {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  margin-top: 2px;
}
.pf .agd-source-system ,
.pf .pf-agd-source-system  { background: var(--card-bg-alt, #F3F4F6); color: var(--text-dim, #6B7280); }
.pf .agd-source-owner ,
.pf .pf-agd-source-owner  { background: rgba(37, 99, 235, 0.1); color: var(--blue, #3B82F6); }
.pf .agd-source-agent ,
.pf .pf-agd-source-agent  { background: rgba(16, 185, 129, 0.1); color: var(--success, #10b981); }

/* Resource / memory area lists */
.pf .agd-list-item ,
.pf .pf-agd-list-item  {
  padding: 0.25rem 0;
  font-size: 0.85rem;
  color: var(--text, #1A1A2E);
  border-bottom: 1px solid var(--border-subtle, #F3F4F6);
}
.pf .agd-list-item:last-child ,
.pf .pf-agd-list-item:last-child  { border-bottom: none; }
.pf .agd-list-item code ,
.pf .pf-agd-list-item code  {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  background: var(--code-bg, #F3F4F6);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Editable rule input row */
.pf .agd-rule-edit-row ,
.pf .pf-agd-rule-edit-row  {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.35rem;
}
.pf .agd-rule-edit-row input ,
.pf .pf-agd-rule-edit-row input  {
  flex: 1;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  font-size: 0.85rem;
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
  font-family: inherit;
}
.pf .agd-rule-edit-row input:focus ,
.pf .pf-agd-rule-edit-row input:focus  {
  outline: none;
  border-color: var(--accent, #E8564A);
}
.pf .agd-remove-btn ,
.pf .pf-agd-remove-btn  {
  background: none;
  border: none;
  color: var(--danger, #ef4444);
  cursor: pointer;
  font-size: 1rem;
  padding: 0 0.25rem;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.pf .agd-remove-btn:hover ,
.pf .pf-agd-remove-btn:hover  { opacity: 1; }
.pf .agd-add-btn ,
.pf .pf-agd-add-btn  {
  background: none;
  border: 1px dashed var(--border, #E5E7EB);
  color: var(--text-dim, #6B7280);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-xs, 6px);
  transition: border-color 0.15s, color 0.15s;
  margin-top: 0.25rem;
}
.pf .agd-add-btn:hover ,
.pf .pf-agd-add-btn:hover  {
  border-color: var(--accent, #E8564A);
  color: var(--accent, #E8564A);
}

/* Group picker popup (memory tab visibility cycling) */
.pf .agd-group-picker,
.pf .pf-agd-group-picker {
  position: absolute;
  z-index: 10;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius, 6px);
  padding: var(--space-sm, 0.5rem);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.08));
  min-width: 200px;
}
.pf .agd-group-option,
.pf .pf-agd-group-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
}

/* ── Capabilities sub-tab ── */

/* Badge list container */
.pf .agd-cap-list ,
.pf .pf-agd-cap-list  {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

/* Individual capability badge */
.pf .agd-cap-badge ,
.pf .pf-agd-cap-badge  {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  font-size: 0.8rem;
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
}
.pf .agd-cap-name ,
.pf .pf-agd-cap-name  {
  font-weight: 500;
}

/* Type badges (MCP / skill / tool) */
.pf .agd-cap-type ,
.pf .pf-agd-cap-type  {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--card-bg-alt, #F3F4F6);
  color: var(--text-dim, #6B7280);
}
.pf .agd-cap-type-mcp ,
.pf .pf-agd-cap-type-mcp  {
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue, #3B82F6);
}
.pf .agd-cap-type-skill ,
.pf .pf-agd-cap-type-skill  {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success, #10b981);
}
.pf .agd-cap-type-tool ,
.pf .pf-agd-cap-type-tool  {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warn, #F59E0B);
}

/* Verified / self-reported badges */
.pf .agd-cap-verified ,
.pf .pf-agd-cap-verified  {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  background: rgba(16, 185, 129, 0.1);
  color: var(--success, #10b981);
}
.pf .agd-cap-unverified ,
.pf .pf-agd-cap-unverified  {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  background: var(--card-bg-alt, #F3F4F6);
  color: var(--text-dim, #6B7280);
}

/* Domain badge variant */
.pf .agd-cap-domain ,
.pf .pf-agd-cap-domain  {
  background: var(--card-bg-alt, #F3F4F6);
}

/* Language tags row */
.pf .agd-cap-langs ,
.pf .pf-agd-cap-langs  {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.pf .agd-cap-lang-label ,
.pf .pf-agd-cap-lang-label  {
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
  font-weight: 500;
}
.pf .agd-cap-lang ,
.pf .pf-agd-cap-lang  {
  background: rgba(37, 99, 235, 0.08);
  color: var(--blue, #3B82F6);
  font-weight: 500;
}

/* Action queue support list */
.pf .agd-cap-queue-list ,
.pf .pf-agd-cap-queue-list  {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pf .agd-cap-queue-item ,
.pf .pf-agd-cap-queue-item  {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text, #1A1A2E);
}
.pf .agd-cap-check ,
.pf .pf-agd-cap-check  {
  color: var(--success, #10b981);
  font-weight: 700;
}

/* ── Activity sub-tab ── */

/* Activity stats cards — .agd-stat*/.pf-agd-stat* removed; agent activity/quality
   stats use canonical .stat-grid / .stat-card / .stat-card-value / .stat-card-label.
   Unified 2026-06-02 (#6). */

/* Activity chart area */
.pf .agd-chart-container ,
.pf .pf-agd-chart-container  { background: var(--card-bg, #FFFFFF); border: 1px solid var(--border, #E5E7EB); border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.pf .agd-chart-rows ,
.pf .pf-agd-chart-rows  { display: flex; flex-direction: column; gap: 4px; }
.pf .agd-chart-row ,
.pf .pf-agd-chart-row  { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; }
.pf .agd-chart-date ,
.pf .pf-agd-chart-date  { min-width: 52px; color: var(--text-muted, #9CA3AF); text-align: right; }
.pf .agd-chart-bar-track ,
.pf .pf-agd-chart-bar-track  { flex: 1; height: 14px; background: var(--card-bg-alt, #F3F4F6); border-radius: 3px; overflow: hidden; }
.pf .agd-chart-bar-fill ,
.pf .pf-agd-chart-bar-fill  { height: 100%; background: var(--accent, #E8564A); border-radius: 3px; transition: width 0.2s; }
.pf .agd-chart-count ,
.pf .pf-agd-chart-count  { min-width: 24px; text-align: right; font-weight: 600; color: var(--text-dim, #6B7280); }

/* Event log entries */
.pf .agd-log-entry ,
.pf .pf-agd-log-entry  { display: flex; gap: 8px; padding: 6px 10px; background: var(--card-bg, #FFFFFF); border: 1px solid var(--border, #E5E7EB); border-radius: 6px; margin-bottom: 3px; font-size: 0.8rem; align-items: center; }
.pf .pf-agd-log-entry--two-line { flex-direction: column; align-items: stretch; gap: 2px; }
.pf .pf-agd-log-entry-primary { display: flex; gap: 8px; align-items: center; }
.pf .pf-agd-log-entry-detail { font-size: 0.75rem; color: var(--text-muted, #9CA3AF); padding-left: 88px; }
.pf .agd-log-time ,
.pf .pf-agd-log-time  { color: var(--text-muted, #9CA3AF); white-space: nowrap; min-width: 80px; }
.pf .agd-log-type ,
.pf .pf-agd-log-type  { font-weight: 600; min-width: 80px; color: var(--text, #1A1A2E); }
.pf .agd-log-msg ,
.pf .pf-agd-log-msg  { flex: 1; color: var(--text-dim, #6B7280); }
.pf .agd-event-log-scroll ,
.pf .pf-agd-event-log-scroll  { max-height: 300px; overflow-y: auto; margin-bottom: 4px; }

/* Scheduled jobs badges */
.pf .agd-job-badge-aimeat ,
.pf .pf-agd-job-badge-aimeat  { background: var(--card-bg-alt, #F3F4F6); color: var(--success, #10B981); padding: 2px 6px; border-radius: 3px; font-size: 0.7rem; white-space: nowrap; flex-shrink: 0; }
.pf .agd-job-badge-agent ,
.pf .pf-agd-job-badge-agent  { background: var(--card-bg-alt, #F3F4F6); color: var(--warn, #F59E0B); padding: 2px 6px; border-radius: 3px; font-size: 0.7rem; white-space: nowrap; flex-shrink: 0; }

/* Time range selector */
.pf .agd-range-bar ,
.pf .pf-agd-range-bar  { display: flex; gap: 4px; margin-bottom: 8px; }
.pf .agd-range-btn ,
.pf .pf-agd-range-btn  { padding: 2px 8px; border: 1px solid var(--border, #E5E7EB); border-radius: 4px; background: none; cursor: pointer; font-size: 0.75rem; color: var(--text-dim, #6B7280); }
.pf .agd-range-btn.active ,
.pf .pf-agd-range-btn.active  { background: var(--accent, #E8564A); color: var(--bg, #FFFFFF); border-color: var(--accent, #E8564A); }

/* ── Services sub-tab ── */

.pf .agd-services-info ,
.pf .pf-agd-services-info  {
  background: var(--bg-dim, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
  margin-bottom: 1rem;
}
.pf .agd-services-list ,
.pf .pf-agd-services-list  {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pf .agd-service-card ,
.pf .pf-agd-service-card  {
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.pf .agd-service-name ,
.pf .pf-agd-service-name  {
  font-weight: 600;
  font-size: 0.9rem;
}
.pf .agd-service-desc ,
.pf .pf-agd-service-desc  {
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
  margin-top: 0.25rem;
}
.pf .agd-service-meta ,
.pf .pf-agd-service-meta  {
  display: flex;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted, #9CA3AF);
  margin-top: 0.5rem;
}

/* ── Messages sub-tab ── */

.pf .agd-msg-status-bar ,
.pf .pf-agd-msg-status-bar  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border, #E5E7EB);
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  margin-bottom: 0.75rem;
}
.pf .agd-msg-history ,
.pf .pf-agd-msg-history  {
  max-height: 400px;
  overflow-y: auto;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pf .agd-msg-bubble ,
.pf .pf-agd-msg-bubble  {
  max-width: 80%;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
}
.pf .agd-msg-inbound ,
.pf .pf-agd-msg-inbound  {
  align-self: flex-end;
  background: var(--accent-dim, #FEF2F1);
  border-bottom-right-radius: 4px;
}
.pf .agd-msg-outbound ,
.pf .pf-agd-msg-outbound  {
  align-self: flex-start;
  background: var(--surface, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-bottom-left-radius: 4px;
}
.pf .agd-msg-meta ,
.pf .pf-agd-msg-meta  {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  margin-top: 0.25rem;
}
.pf .agd-msg-meta-right ,
.pf .pf-agd-msg-meta-right  {
  text-align: right;
}
.pf .agd-msg-time ,
.pf .pf-agd-msg-time  {
  font-weight: 500;
  color: var(--text-secondary, #6B7280);
}
.pf .agd-msg-input ,
.pf .pf-agd-msg-input  {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--border, #E5E7EB);
  margin-top: 0.75rem;
  align-items: flex-end;
  width: 100%;
}
.pf .agd-msg-input textarea ,
.pf .pf-agd-msg-input textarea  {
  width: 100%;
  min-width: 0;
  resize: none;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  min-height: 2.5rem;
  max-height: 6rem;
  font-family: inherit;
}
.pf .agd-msg-proposed-task ,
.pf .pf-agd-msg-proposed-task  {
  background: var(--card, #FFFFFF);
  border: 1px solid var(--accent, #E8564A);
  border-radius: 8px;
  padding: 0.625rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.pf .agd-msg-proposed-task h5 ,
.pf .pf-agd-msg-proposed-task h5  {
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  color: var(--accent, #E8564A);
}

/* ── Option-prompt (agent asks the owner a single-select question) ── */
.pf .agd-msg-prompt {
  margin-top: 0.4rem;
  padding: 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  background: var(--card-bg-alt, #F3F4F6);
}
.pf .agd-msg-prompt-q {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--text, #1A1A2E);
}
.pf .agd-msg-prompt-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pf .agd-msg-prompt-option {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 999px;
  background: var(--card, #FFFFFF);
  color: var(--text, #1A1A2E);
  font-size: 0.8rem;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pf .agd-msg-prompt-option:hover:not(:disabled) {
  border-color: var(--accent, #E8564A);
}
.pf .agd-msg-prompt-option:disabled {
  cursor: default;
  opacity: 0.6;
}
.pf .agd-msg-prompt-option--chosen {
  border-color: var(--accent, #E8564A);
  background: var(--accent, #E8564A);
  color: #FFFFFF;
  opacity: 1;
  font-weight: 600;
}
.pf .agd-msg-prompt-option--other {
  font-style: italic;
}
.pf .agd-msg-pending-hint {
  font-size: 0.78rem;
  color: var(--accent, #E8564A);
  padding: 0.25rem 0.5rem;
}
.pf .agd-msg-threads ,
.pf .pf-agd-msg-threads  {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.pf .agd-msg-thread-btn ,
.pf .pf-agd-msg-thread-btn  {
  background: var(--surface, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.pf .agd-msg-thread-btn:hover,
.pf .agd-msg-thread-btn-active ,
.pf .pf-agd-msg-thread-btn:hover,
.pf .pf-agd-msg-thread-btn-active  {
  border-color: var(--accent, #E8564A);
  color: var(--accent, #E8564A);
}

/* ── Task Creation Builder (split-panel) ── */

.pf .agd-builder ,
.pf .pf-agd-builder  {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  margin-top: 0.5rem;
}
.pf .agd-builder-header ,
.pf .pf-agd-builder-header  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border, #E5E7EB);
  background: var(--card-bg, #FFFFFF);
}
.pf .agd-builder-header h4 ,
.pf .pf-agd-builder-header h4  {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.pf .agd-builder-panels ,
.pf .pf-agd-builder-panels  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 350px;
}
@media (max-width: 768px) {
  .pf .agd-builder-panels { grid-template-columns: 1fr; }
}
.pf .agd-proposal ,
.pf .pf-agd-proposal  {
  border-right: 1px solid var(--border, #E5E7EB);
  display: flex;
  flex-direction: column;
}
@media (max-width: 768px) {
  .pf .agd-proposal { border-right: none; border-bottom: 1px solid var(--border, #E5E7EB); }
}
.pf .agd-proposal-tabs ,
.pf .pf-agd-proposal-tabs  {
  display: flex;
  border-bottom: 1px solid var(--border, #E5E7EB);
  background: var(--bg-dim, #F9FAFB);
}
.pf .agd-proposal-tab ,
.pf .pf-agd-proposal-tab  {
  flex: 1;
  padding: 0.4rem 0.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim, #6B7280);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 500;
  text-align: center;
  transition: color 0.15s, border-color 0.15s;
}
.pf .agd-proposal-tab:hover ,
.pf .pf-agd-proposal-tab:hover  { color: var(--text, #1A1A2E); }
.pf .agd-proposal-tab-active ,
.pf .pf-agd-proposal-tab-active  {
  color: var(--accent, #E8564A);
  border-bottom-color: var(--accent, #E8564A);
}
.pf .agd-proposal-content ,
.pf .pf-agd-proposal-content  {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  font-size: 0.82rem;
  max-height: 400px;
}
.pf .agd-prop-section ,
.pf .pf-agd-prop-section  { margin-bottom: 0.75rem; }
.pf .agd-prop-section:last-child ,
.pf .pf-agd-prop-section:last-child  { margin-bottom: 0; }
.pf .agd-prop-label ,
.pf .pf-agd-prop-label  {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6B7280);
  margin-bottom: 0.25rem;
}
.pf .agd-prop-value ,
.pf .pf-agd-prop-value  { color: var(--text, #1A1A2E); line-height: 1.5; }
.pf .agd-prop-empty ,
.pf .pf-agd-prop-empty  { color: var(--text-muted, #9CA3AF); font-style: italic; font-size: 0.8rem; }
.pf .agd-prop-code ,
.pf .pf-agd-prop-code  {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  background: var(--code-bg, #F3F4F6);
  padding: 2px 6px;
  border-radius: 3px;
}
.pf .agd-prop-list ,
.pf .pf-agd-prop-list  { list-style: none; padding: 0; margin: 0; }
.pf .agd-prop-list li ,
.pf .pf-agd-prop-list li  { padding: 0.15rem 0; border-bottom: 1px solid var(--border-subtle, #F3F4F6); }
.pf .agd-prop-list li:last-child ,
.pf .pf-agd-prop-list li:last-child  { border-bottom: none; }
.pf .agd-prop-check ,
.pf .pf-agd-prop-check  { display: flex; align-items: baseline; gap: 0.35rem; }
.pf .agd-prop-check::before ,
.pf .pf-agd-prop-check::before  { content: '\2713'; color: var(--success, #10b981); font-weight: 600; }
.pf .agd-scope-item ,
.pf .pf-agd-scope-item  { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.2rem 0; }
.pf .agd-scope-name ,
.pf .pf-agd-scope-name  { font-weight: 500; min-width: 80px; }
.pf .agd-scope-type ,
.pf .pf-agd-scope-type  {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--bg-dim, #F9FAFB);
  color: var(--text-dim, #6B7280);
}
.pf .agd-builder-chat ,
.pf .pf-agd-builder-chat  { display: flex; flex-direction: column; background: var(--card-bg, #FFFFFF); }
.pf .agd-builder-chat-history ,
.pf .pf-agd-builder-chat-history  {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 350px;
}
.pf .agd-builder-chat-input ,
.pf .pf-agd-builder-chat-input  {
  display: flex;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border, #E5E7EB);
}
/* Live character counter shown under the task-creation description field. */
.pf .agd-chat-charcount {
  padding: 0 0.75rem 0.4rem;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-dim, #6B7280);
}
.pf .agd-chat-charcount-max {
  color: var(--danger, #EF4444);
  font-weight: 600;
}
.pf .agd-builder-chat-input textarea ,
.pf .pf-agd-builder-chat-input textarea  {
  flex: 1;
  resize: none;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.82rem;
  min-height: 2.5rem;
  max-height: 5rem;
  font-family: inherit;
}
.pf .agd-builder-analyzing ,
.pf .pf-agd-builder-analyzing  {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--text-dim, #6B7280);
  font-size: 0.85rem;
  text-align: center;
}
.pf .agd-builder-actions ,
.pf .pf-agd-builder-actions  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border, #E5E7EB);
  background: var(--bg-dim, #F9FAFB);
}
.pf .agd-builder-actions-right ,
.pf .pf-agd-builder-actions-right  { display: flex; gap: 0.5rem; }
.pf .agd-version-badge ,
.pf .pf-agd-version-badge  { font-size: 0.7rem; color: var(--text-muted, #9CA3AF); }

/* ── Task TODO list ── */

/* Progress badge shown next to task title */
.pf .agd-todo-progress ,
.pf .pf-agd-todo-progress  {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(37, 99, 235, 0.1);
  color: var(--blue, #3B82F6);
  white-space: nowrap;
}

/* TODO section wrapper inside expanded task */
.pf .agd-todo-section ,
.pf .pf-agd-todo-section  {
  margin: 0.5rem 0;
}
.pf .agd-todo-header ,
.pf .pf-agd-todo-header  {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  font-size: 0.8rem;
}
.pf .agd-todo-summary ,
.pf .pf-agd-todo-summary  {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pf .agd-todo-time ,
.pf .pf-agd-todo-time  {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
}

/* Environment badges (AIMEAT / Agent) */
.pf .agd-env-badge ,
.pf .pf-agd-env-badge  {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.pf .agd-env-aimeat ,
.pf .pf-agd-env-aimeat  {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success, #10b981);
}
.pf .agd-env-agent ,
.pf .pf-agd-env-agent  {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn, #F59E0B);
}

/* TODO item list */
.pf .agd-todo-list ,
.pf .pf-agd-todo-list  {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pf .agd-todo-item ,
.pf .pf-agd-todo-item  {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-xs, 6px);
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  font-size: 0.8rem;
  transition: border-color 0.15s;
}
.pf .agd-todo-active ,
.pf .pf-agd-todo-active  {
  border-color: var(--blue, #3B82F6);
  background: rgba(37, 99, 235, 0.04);
}
.pf .agd-todo-done ,
.pf .pf-agd-todo-done  {
  opacity: 0.7;
}
.pf .agd-todo-failed ,
.pf .pf-agd-todo-failed  {
  border-color: var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.04);
}
.pf .agd-todo-skipped ,
.pf .pf-agd-todo-skipped  {
  opacity: 0.5;
}

/* Status icon column */
.pf .agd-todo-icon ,
.pf .pf-agd-todo-icon  {
  flex-shrink: 0;
  font-size: 0.85rem;
  line-height: 1.4;
  width: 1.2rem;
  text-align: center;
}

/* Content column */
.pf .agd-todo-content ,
.pf .pf-agd-todo-content  {
  flex: 1;
  min-width: 0;
}
.pf .agd-todo-title ,
.pf .pf-agd-todo-title  {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-weight: 500;
  line-height: 1.4;
}
.pf .agd-todo-est ,
.pf .pf-agd-todo-est  {
  font-size: 0.65rem;
  color: var(--text-muted, #9CA3AF);
  white-space: nowrap;
}
.pf .agd-todo-desc ,
.pf .pf-agd-todo-desc  {
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  line-height: 1.4;
  margin-top: 0.15rem;
}
.pf .agd-todo-reason ,
.pf .pf-agd-todo-reason  {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
  margin-top: 0.1rem;
}
.pf .agd-todo-verify ,
.pf .pf-agd-todo-verify  {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  margin-top: 0.1rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border, #E5E7EB);
}

/* Waiting state (no todos yet) */
.pf .agd-todo-waiting ,
.pf .pf-agd-todo-waiting  {
  text-align: center;
  padding: 1rem;
  color: var(--text-muted, #9CA3AF);
  font-size: 0.8rem;
  font-style: italic;
  background: var(--card-bg, #FFFFFF);
  border: 1px dashed var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  margin: 0.5rem 0;
}

/* ══════════════════════════════════════════════════════════════
   Agent Detail Tab-View (Plan 4)
   All new classes use pf-agd- prefix (profile agent detail)
   ══════════════════════════════════════════════════════════════ */

/* ── Shared Agent Board ── */

.pf .pf-agd-board {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius, 8px);
  padding: 1rem;
  margin-bottom: 1rem;
}

/* Fleet "running now" panel (between the board and the agent list). */
.pf .pf-agd-active {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius, 8px);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.pf .pf-agd-active-head {
  margin-bottom: 0.5rem;
}
.pf .pf-agd-active-empty {
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-active-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.pf .pf-agd-active-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  background: var(--card-bg-alt, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  padding: 0.4rem 0.6rem;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pf .pf-agd-active-row:hover {
  background: var(--card-bg, #FFFFFF);
  border-color: var(--success, #10B981);
}
.pf .pf-agd-active-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success, #10B981);
}
.pf .pf-agd-active-agent {
  flex: 0 0 auto;
  max-width: 30%;
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf .pf-agd-active-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf .pf-agd-active-time {
  flex: 0 0 auto;
  font-size: 0.72rem;
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
@media (max-width: 768px) {
  .pf .pf-agd-board-grid { grid-template-columns: 1fr; }
}
.pf .pf-agd-board-card {
  position: relative;
  background: var(--card-bg-alt, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-left: 3px solid var(--text-muted, #9CA3AF);
  border-radius: var(--radius-xs, 6px);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.pf .pf-agd-board-card:hover,
.pf .pf-agd-board-card:focus-visible {
  background: var(--card-bg, #FFFFFF);
  border-color: var(--agd-state, var(--accent, #E8564A));
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}
.pf .pf-agd-board-card:focus-visible {
  box-shadow: 0 0 0 2px var(--agd-state, var(--accent, #E8564A));
}

/* ── Agent ID card (hover/focus-revealed identity plate over a board mini-card) ──
   The default face (name + one figure) is untouched; the ID card is absolutely
   positioned over the card so revealing it causes NO layout shift in the grid.
   It lifts slightly larger than the card (negative insets) with a shadow so it
   reads as the card "flipping" to its identity face. */
.pf .pf-agd-idcard {
  position: absolute;
  top: -3px;
  left: -3px;
  right: -3px;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--agd-state, var(--border, #E5E7EB));
  border-left: 3px solid var(--agd-state, var(--text-muted, #9CA3AF));
  border-radius: var(--radius, 8px);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.22));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.pf .pf-agd-board-card:hover .pf-agd-idcard,
.pf .pf-agd-board-card:focus-visible .pf-agd-idcard,
.pf .pf-agd-board-card:focus-within .pf-agd-idcard {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* Eyebrow row: "AI Identity" + state dot, mode badge on the right */
.pf .pf-agd-idcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pf .pf-agd-idcard-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-idcard-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--agd-state, var(--text-muted, #9CA3AF));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--agd-state, #9CA3AF) 22%, transparent);
}

/* Identity head: robot avatar + display name + teaching hint */
.pf .pf-agd-idcard-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.pf .pf-agd-idcard-avatar {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.pf .pf-agd-idcard-names {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pf .pf-agd-idcard-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--agd-state, var(--text, #1A1A2E));
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pf .pf-agd-idcard-hint {
  font-size: 0.62rem;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.3;
}

/* GAII block — the teaching centrepiece: labelled + full monospace value + copy */
.pf .pf-agd-idcard-gaii {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.45rem 0.5rem;
  background: var(--bg-dim, #F9FAFB);
  border: 1px solid var(--border-subtle, #F3F4F6);
  border-radius: var(--radius-xs, 6px);
}
.pf .pf-agd-idcard-gaii-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pf .pf-agd-idcard-gaii-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim, #6B7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf .pf-agd-idcard-gaii-label strong {
  color: var(--accent, #E8564A);
  font-weight: 700;
}
.pf .pf-agd-idcard-gaii-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text, #1A1A2E);
  word-break: break-all;
  line-height: 1.35;
}

/* Stat plate — 2-column grid of tombstone facts */
.pf .pf-agd-idcard-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem 0.6rem;
}
.pf .pf-agd-idcard-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--border-subtle, #F3F4F6);
  padding-bottom: 0.12rem;
}
.pf .pf-agd-idcard-stat-label {
  color: var(--text-muted, #9CA3AF);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.6rem;
}
.pf .pf-agd-idcard-stat-value {
  font-weight: 600;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-idcard-stat--active .pf-agd-idcard-stat-value { color: var(--blue, #3B82F6); }
.pf .pf-agd-idcard-stat--failed .pf-agd-idcard-stat-value { color: var(--danger, #ef4444); }

/* Footer: issuer node + call to action */
.pf .pf-agd-idcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.6rem;
  color: var(--text-muted, #9CA3AF);
  padding-top: 0.15rem;
  border-top: 1px solid var(--border-subtle, #F3F4F6);
}
.pf .pf-agd-idcard-issuer {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pf .pf-agd-idcard-manage {
  flex-shrink: 0;
  color: var(--accent, #E8564A);
  font-weight: 600;
}

/* Touch / coarse-pointer devices have no hover — keep the ID card out of the way
   there (the card still opens the full detail on tap). */
@media (hover: none) {
  .pf .pf-agd-idcard { display: none; }
}
.pf .pf-agd-board-card-name {
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}
.pf .pf-agd-board-card-activity {
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  margin-bottom: 0.15rem;
}
.pf .pf-agd-board-card-tags {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-board-tags {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border, #E5E7EB);
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-tag-pill {
  display: inline-block;
  background: var(--card-bg-alt, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 0.75rem;
  margin-right: 0.35rem;
}

/* ── Collapsed Agent Card ── */

.pf .pf-agd-card {
  margin-bottom: 0.5rem;
}
.pf .pf-agd-collapsed {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0.625rem 0.875rem;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.pf .pf-agd-collapsed:hover {
  background: var(--card-bg-alt, #F3F4F6);
}
.pf .pf-agd-collapsed--problem {
  border-color: var(--danger, #ef4444);
}
/* Top row: expand arrow + icon + name + badges + pop-out */
.pf .pf-agd-collapsed-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
/* Second row: delivery + status + last seen, smaller, faint divider above */
.pf .pf-agd-collapsed-meta {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-subtle, #F3F4F6);
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  line-height: 1.4;
}
.pf .pf-agd-expand-icon {
  font-size: 0.7rem;
  color: var(--text-dim, #6B7280);
  transition: transform 0.15s;
  flex-shrink: 0;
}
.pf .pf-agd-expand-icon--open {
  transform: none;
}
.pf .pf-agd-collapsed-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
}
.pf .pf-agd-collapsed-name {
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.pf .pf-agd-delivery-indicator {
  font-size: 0.72rem;
  color: var(--text-muted, #9CA3AF);
  margin-right: 0.5rem;
}
.pf .pf-agd-collapsed-badges {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.pf .pf-agd-collapsed-stats {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  white-space: nowrap;
  text-align: right;
}

/* Pop-out button (open agent in its own window) */
.pf .pf-agd-popout-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim, #6B7280);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  flex-shrink: 0;
}
.pf .pf-agd-collapsed-main .pf-agd-popout-btn { margin-left: auto; }
.pf .pf-agd-popout-btn:hover {
  color: var(--accent, #E8564A);
  background: var(--bg-dim, #F9FAFB);
}

/* ── Drag-to-reorder rows (ungrouped, unfiltered agent list) ── */
/* The row's box (= the drop target) is extended LEFT to cover the grip handle
   via padding-left, while a matching negative margin-left pulls the box back so
   the card border stays flush with the rest of the list. Net effect: the card
   stays aligned with the dividers above, the grip sits in the left gutter, and
   dropping anywhere over that gutter still drops onto the row (people grab the
   handle and drop near it). */
.pf .pf-agd-dnd-row {
  position: relative;
  padding-left: 1.5rem;
  margin-left: -1.5rem;
}
.pf .pf-agd-dnd-grip {
  position: absolute;
  left: 0.2rem;
  top: 1.1rem;
  z-index: 2;
  cursor: grab;
  color: var(--text-muted, #9CA3AF);
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
  user-select: none;
}
.pf .pf-agd-dnd-row:hover .pf-agd-dnd-grip { opacity: 0.7; }
.pf .pf-agd-dnd-grip:active { cursor: grabbing; }
.pf .pf-agd-dnd-dragging { opacity: 0.45; }

/* ── Solo (pop-out) window layout ── */
.pf-agd-solo {
  padding: 0.5rem 1rem;
  max-width: 860px; /* card gets ≈828px — same usable width as the list view */
  margin: 0 auto;
}
.pf .pf-agd-solo-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text, #1A1A2E);
  color: #FFFFFF;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  z-index: 1000;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.18));
  width: max-content;
  max-width: min(92vw, 40rem);
  text-align: center;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.pf .pf-agd-solo-toast--err { background: var(--danger, #EF4444); }

/* ── Badges (platform, readiness, federation) ── */

.pf .pf-agd-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.pf .pf-agd-badge--platform {
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  color: var(--blue, #3B82F6);
}
.pf .pf-agd-badge--model {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}
.pf .pf-agd-badge--readiness-expert { background: var(--accent-subtle, rgba(16, 185, 129, 0.1)); color: var(--success, #10b981); }
.pf .pf-agd-badge--readiness-full { background: var(--accent-subtle, rgba(16, 185, 129, 0.1)); color: var(--success, #10b981); }
.pf .pf-agd-badge--readiness-standard { background: var(--accent-subtle, rgba(59, 130, 246, 0.1)); color: var(--blue, #3B82F6); }
.pf .pf-agd-badge--readiness-basic { background: var(--accent-subtle, rgba(245, 158, 11, 0.1)); color: var(--warn, #F59E0B); }
.pf .pf-agd-badge--readiness-none { background: var(--card-bg-alt, #F3F4F6); color: var(--text-muted, #9CA3AF); }
.pf .pf-agd-badge--readiness-onboarding { background: var(--accent-subtle, rgba(245, 158, 11, 0.1)); color: var(--warn, #F59E0B); }
.pf .pf-agd-badge--degraded { color: var(--warn, #F59E0B); }
.pf .pf-agd-badge--federation {
  background: rgba(16, 185, 129, 0.1);
  color: var(--success, #10b981);
}

/* Mode badge -- distinguishes how the agent is used (added 2026-05-29) */
.pf .pf-agd-badge--mode {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.pf .pf-agd-badge--mode-autonomous {
  background: var(--accent-subtle, rgba(139, 92, 246, 0.1));
  color: var(--violet, #8B5CF6);
}
.pf .pf-agd-badge--mode-interactive {
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  color: var(--blue, #3B82F6);
}
.pf .pf-agd-badge--mode-task-runner {
  background: var(--accent-subtle, rgba(245, 158, 11, 0.1));
  color: var(--warn, #F59E0B);
}
.pf .pf-agd-badge--mode-coordinator {
  background: var(--accent-subtle, rgba(16, 185, 129, 0.1));
  color: var(--success, #10b981);
}
.pf .pf-agd-badge--mode-workstation {
  background: var(--accent-subtle, rgba(20, 184, 166, 0.1));
  color: var(--teal, #14b8a6);
}

/* Tag chip strip on expanded card */
.pf .pf-agd-tag-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0;
}
.pf .pf-agd-tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background: var(--bg-dim, #F3F4F6);
  color: var(--text-muted, #6B7280);
  border: 1px solid var(--border, #E5E7EB);
  white-space: nowrap;
  cursor: pointer;
}
.pf .pf-agd-tag-chip--active {
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  color: var(--blue, #3B82F6);
  border-color: var(--blue, #3B82F6);
}

/* Editable tag strip in the expanded card header (inline add/remove) */
.pf .pf-agd-tag-chip--editable { cursor: default; gap: 0.3rem; padding-right: 0.3rem; }
.pf .pf-agd-tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #9CA3AF);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 0.1rem;
  border-radius: 9999px;
}
.pf .pf-agd-tag-chip-remove:hover { color: var(--danger, #E8564A); }
.pf .pf-agd-tag-add-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  background: none;
  color: var(--text-dim, #6B7280);
  border: 1px dashed var(--border, #E5E7EB);
  cursor: pointer;
  white-space: nowrap;
}
.pf .pf-agd-tag-add-btn:hover { border-color: var(--accent, #E8564A); color: var(--accent, #E8564A); }
.pf .pf-agd-tag-add-input {
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 9999px;
  border: 1px solid var(--accent, #E8564A);
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
  width: 9rem;
}

/* Tag filter bar + group-by control */
.pf .pf-agd-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border, #E5E7EB);
}
.pf .pf-agd-filter-tags,
.pf .pf-agd-filter-groupby {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.pf .pf-agd-filter-label {
  font-size: 0.8rem;
  color: var(--text-muted, #6B7280);
  font-weight: 500;
}
.pf .pf-agd-filter-select {
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #111827);
}
.pf .pf-agd-filter-clear {
  background: none;
  border: none;
  color: var(--blue, #3B82F6);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
}
.pf .pf-agd-filter-clear:hover { text-decoration: underline; }

.pf .pf-agd-group { margin-bottom: 1.25rem; }
.pf .pf-agd-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 1px dashed var(--border, #E5E7EB);
}
.pf .pf-agd-group-count {
  font-size: 0.8rem;
  color: var(--text-muted, #6B7280);
}
.pf .pf-agd-group-untagged {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted, #6B7280);
}

/* ── Custom groups (user-defined sections, drag-to-assign) ── */
.pf .pf-agd-cgroup-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.pf .pf-agd-cgroup-hint {
  color: var(--text-muted, #6B7280);
  font-size: 0.78rem;
}
/* The header doubles as the drop target for filing agents into the group. */
.pf .pf-agd-cgroup-header {
  cursor: default;
}
.pf .pf-agd-cgroup-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted, #9CA3AF);
  font-size: 0.7rem;
  padding: 0 0.1rem;
  line-height: 1;
}
.pf .pf-agd-cgroup-toggle:hover { color: var(--accent, #E8564A); }
.pf .pf-agd-cgroup-name {
  flex: 1;
  text-align: left;
  background: none;
  border: none;
  cursor: text;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text, #1A1A2E);
  padding: 0.1rem 0.2rem;
  border-radius: 4px;
}
.pf .pf-agd-cgroup-name:hover { background: var(--bg-surface, #F3F4F6); }
.pf .pf-agd-cgroup-name-input {
  flex: 1;
  font-weight: 600;
  font-size: 0.9rem;
}
.pf .pf-agd-cgroup-empty {
  font-size: 0.82rem;
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
  padding: 0.5rem 0.25rem;
  border: 1px dashed var(--border, #E5E7EB);
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

/* ── Expanded Card ── */

.pf .pf-agd-expanded {
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius, 8px);
  overflow: hidden;
}

/* Zone 1: Identity */
.pf .pf-agd-zone1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
}
.pf .pf-agd-zone1-identity {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex-shrink: 0;
}
.pf .pf-agd-zone1-name {
  font-weight: 600;
  font-size: 0.95rem;
}
.pf .pf-agd-zone1-badges {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}
.pf .pf-agd-zone1-right {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
}

/* Capabilities summary (collapsed one-liner "N tools · N skills · N langs").
   The wrapper carries the card's content inset (1rem) so the summary doesn't sit
   flush against the card edge, plus a little top gap to separate it from the
   tag/badge strip above. */
.pf .pf-agd-capwrap {
  padding: 0.4rem 1rem 0.1rem;
}

/* Capabilities badges */
.pf .pf-agd-capabilities {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem 0.5rem;
}
.pf .pf-agd-cap-badge {
  font-size: 0.675rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-weight: 500;
}
.pf .pf-agd-cap-badge--tech {
  background: var(--success-bg, #ECFDF5);
  color: var(--success, #10B981);
}
.pf .pf-agd-cap-badge--domain {
  background: var(--info-bg, #EFF6FF);
  color: var(--info, #3B82F6);
}

/* Zone 2: Status (state-dependent) */
.pf .pf-agd-zone2 {
  padding: 0.625rem 1rem;
  font-size: 0.85rem;
}
.pf .pf-agd-zone2--new {
  border-left: 3px solid var(--warning, #F59E0B);
  background: rgba(245, 158, 11, 0.06);
}
.pf .pf-agd-zone2--onboarding {
  border-left: 3px solid var(--info, #3B82F6);
  background: rgba(59, 130, 246, 0.06);
}
.pf .pf-agd-zone2--production {
  padding: 0.375rem 1rem;
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-zone2--problem {
  border-left: 3px solid var(--danger, #ef4444);
  background: rgba(239, 68, 68, 0.14);
}
.pf .pf-agd-zone2-title {
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 0.25rem;
}
.pf .pf-agd-zone2-desc {
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
  line-height: 1.4;
}
/* "Next: <step>" nested inside the uppercase banner title reads as normal text,
   not as a second shouting headline. */
.pf .pf-agd-zone2-title .pf-agd-zone2-desc {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.pf .pf-agd-zone2-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.pf .pf-agd-zone2-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ── Progress bar (onboarding zone2) ── */
.pf .pf-agd-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--card-bg-alt, #F3F4F6);
  border-radius: 4px;
  overflow: hidden;
  margin: 0.35rem 0;
}
.pf .pf-agd-progress-fill {
  height: 100%;
  background: var(--info, #3B82F6);
  border-radius: 4px;
  transition: width 0.3s;
}

/* Step pills (onboarding zone2) */
.pf .pf-agd-step-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.pf .pf-agd-step-pill {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.pf .pf-agd-step-pill--passed {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success, #10b981);
}
.pf .pf-agd-step-pill--pending {
  background: var(--card-bg-alt, #F3F4F6);
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-step-pill--failed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--danger, #ef4444);
}
.pf .pf-agd-step-pill--warn {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warn, #F59E0B);
}

/* ── Tab Bar ── */

.pf .pf-agd-tabs {
  display: flex;
  /* Wrap to a second row instead of scrolling horizontally: with 10 tabs the
     bar no longer fits one line on the card width. TABS (agent-card.js) is
     ordered by owner usage frequency so the most-used tabs land on the top row
     and the rarely-touched setup tabs fall to the second. */
  flex-wrap: wrap;
  gap: 0;
  row-gap: 2px;
  /* Divider above the bar too, so the tabs read as their own block and don't
     blend into the status row (Polling | Last seen | Today: N done) above. */
  border-top: 1px solid var(--border, #E5E7EB);
  margin-top: 0.5rem;
  padding-top: 0.25rem;
  border-bottom: 1px solid var(--border, #E5E7EB);
}
.pf .pf-agd-tab {
  padding: 0.5rem 0.875rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim, #6B7280);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.pf .pf-agd-tab:hover { color: var(--text, #1A1A2E); }
.pf .pf-agd-tab--active {
  color: var(--accent, #E8564A);
  border-bottom-color: var(--accent, #E8564A);
  font-weight: 600;
}
.pf .pf-agd-tab-content {
  padding: 1rem;
  min-height: 150px;
}

/* ── Unseen-change badges ──
   Collapsed-card mini-badge + per-tab number badges (Tasks/Messages only). Neutral
   gray by default — red is reserved for unseen FAILED tasks, so a real alarm never
   drowns in routine counts. Counts come from the localStorage last-seen baseline. */
.pf .pf-agd-change-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 9px;
  background: var(--bg-dim, #F3F4F6);
  color: var(--text-dim, #4B5563);
  border: 1px solid var(--border, #E5E7EB);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}
.pf .pf-agd-change-badge--failed {
  background: var(--danger-bg, #FEE2E2);
  color: var(--danger-fg, #DC2626);
  border-color: var(--danger-border, #FECACA);
}
.pf .pf-agd-tab {
  /* allow the inline count badge to sit beside the label */
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pf .pf-agd-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--bg-dim, #F3F4F6);
  color: var(--text-dim, #4B5563);
  border: 1px solid var(--border, #E5E7EB);
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
}
.pf .pf-agd-tab-badge--failed {
  background: var(--danger-bg, #FEE2E2);
  color: var(--danger-fg, #DC2626);
  border-color: var(--danger-border, #FECACA);
}
/* Has-unseen DOT (no count): a small round indicator replacing the old number badge. */
.pf .pf-agd-change-badge--dot,
.pf .pf-agd-tab-badge--dot {
  min-width: 8px;
  width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}

/* ── Board legend (filter pills), capability summary, inline misc (2026-06-10 round) ── */
.pf .pf-agd-board-legend { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.pf .pf-agd-legend-pill { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--control-bg, var(--card)); border: 1px solid var(--control-border, var(--border)); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.76rem; color: var(--text-dim); cursor: pointer; }
.pf .pf-agd-legend-pill:disabled { opacity: 0.45; cursor: default; }
.pf .pf-agd-legend-pill--active { border-color: var(--accent); color: var(--text); }
.pf .pf-agd-legend-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pf .pf-agd-legend-count { color: var(--muted); }
.pf .pf-agd-cap-summary { background: none; border: none; padding: 0.15rem 0; font-size: 0.78rem; color: var(--text-dim); cursor: pointer; }
.pf .pf-agd-cap-summary:hover { color: var(--text); }
.pf .pf-agd-none-inline { font-size: 0.78rem; color: var(--muted); margin: 0 auto 0 0.5rem; }
.pf .pf-agd-inline-stars { display: inline-flex; gap: 1px; }
.pf .pf-agd-inline-star { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--border); padding: 0 1px; line-height: 1; }
.pf .pf-agd-inline-star--hot, .pf .pf-agd-inline-star:hover { color: var(--warn, #F59E0B); }
.pf .pf-agd-quality-pending-when { font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.pf .pf-agd-commands--empty { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.82rem; color: var(--text-dim); }

/* ── README tab (rendered from agents.<name>.readme markdown) ── */
.pf .pf-agd-readme {
  /* Comfortable reading width that still fits ~80-col ASCII art in code fences. */
  max-width: 760px;
  max-height: 60vh;
  overflow: auto;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-readme .md-body > :first-child { margin-top: 0; }
.pf .pf-agd-readme h1,
.pf .pf-agd-readme h2,
.pf .pf-agd-readme h3,
.pf .pf-agd-readme h4 {
  margin: 1rem 0 0.5rem;
  line-height: 1.3;
}
.pf .pf-agd-readme h1 { font-size: 1.4rem; }
.pf .pf-agd-readme h2 { font-size: 1.2rem; }
.pf .pf-agd-readme h3 { font-size: 1.05rem; }
.pf .pf-agd-readme p { margin: 0.5rem 0; }
.pf .pf-agd-readme ul,
.pf .pf-agd-readme ol { margin: 0.5rem 0; padding-left: 1.5rem; }
.pf .pf-agd-readme li { margin: 0.2rem 0; }
.pf .pf-agd-readme a { color: var(--accent, #E8564A); }
.pf .pf-agd-readme blockquote {
  margin: 0.5rem 0;
  padding: 0.25rem 0.75rem;
  border-left: 3px solid var(--border, #E5E7EB);
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-readme table {
  border-collapse: collapse;
  margin: 0.5rem 0;
  font-size: 0.85rem;
}
.pf .pf-agd-readme th,
.pf .pf-agd-readme td {
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.3rem 0.6rem;
  text-align: left;
}
.pf .pf-agd-readme th { background: var(--card-bg-alt, #F3F4F6); }
/* Inline code spans. */
.pf .pf-agd-readme .md-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}
/* Fenced code blocks: monospace + EXACT whitespace so ASCII-art logos
   (FIGLET output) keep alignment. Horizontal scroll instead of wrap. */
.pf .pf-agd-readme .md-pre {
  margin: 0.6rem 0;
  padding: 0.75rem;
  background: var(--card-bg-alt, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  overflow-x: auto;
}
.pf .pf-agd-readme .md-pre .md-code {
  display: block;
  white-space: pre;
  tab-size: 4;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text, #1A1A2E);
}

/* ── Markdown inside agent (outbound) message bubbles ──
   Agent replies render through the shared Markdown component. The README
   .md-body rules are scoped to .pf-agd-readme only, so message bubbles need
   their own compact variant: no outer margins (the bubble padding handles
   spacing), modest headings, bordered code chips (the bubble surface is grey,
   so a plain grey code background would blend). */
.pf .pf-agd-msg-bubble .md-body > :first-child { margin-top: 0; }
.pf .pf-agd-msg-bubble .md-body > :last-child { margin-bottom: 0; }
.pf .pf-agd-msg-bubble .md-body p { margin: 0.35rem 0; }
.pf .pf-agd-msg-bubble .md-body h1,
.pf .pf-agd-msg-bubble .md-body h2,
.pf .pf-agd-msg-bubble .md-body h3,
.pf .pf-agd-msg-bubble .md-body h4 {
  margin: 0.5rem 0 0.25rem;
  line-height: 1.3;
  font-size: 0.95rem;
}
.pf .pf-agd-msg-bubble .md-body h1 { font-size: 1.05rem; }
.pf .pf-agd-msg-bubble .md-body h2 { font-size: 1rem; }
.pf .pf-agd-msg-bubble .md-body ul,
.pf .pf-agd-msg-bubble .md-body ol { margin: 0.35rem 0; padding-left: 1.4rem; }
.pf .pf-agd-msg-bubble .md-body li { margin: 0.15rem 0; }
.pf .pf-agd-msg-bubble .md-body a { color: var(--accent, #E8564A); }
.pf .pf-agd-msg-bubble .md-body blockquote {
  margin: 0.4rem 0;
  padding: 0.2rem 0.6rem;
  border-left: 3px solid var(--border, #E5E7EB);
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-msg-bubble .md-body .md-code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.02rem 0.3rem;
  border-radius: 4px;
}
.pf .pf-agd-msg-bubble .md-body .md-pre {
  margin: 0.45rem 0;
  padding: 0.6rem;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  overflow-x: auto;
}
.pf .pf-agd-msg-bubble .md-body .md-pre .md-code {
  display: block;
  white-space: pre;
  background: none;
  border: none;
  padding: 0;
  tab-size: 4;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-msg-bubble .md-body table {
  border-collapse: collapse;
  margin: 0.4rem 0;
  font-size: 0.8rem;
}
.pf .pf-agd-msg-bubble .md-body th,
.pf .pf-agd-msg-bubble .md-body td {
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.25rem 0.5rem;
  text-align: left;
}
.pf .pf-agd-msg-bubble .md-body th { background: var(--card-bg-alt, #F3F4F6); }

/* ── Integration tab: Onboarding checklist ── */

.pf .pf-agd-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 1rem;
}
.pf .pf-agd-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-xs, 6px);
  font-size: 0.82rem;
  border: 1px solid var(--border, #E5E7EB);
  background: var(--card-bg, #FFFFFF);
}
.pf .pf-agd-step--passed {
  border-color: rgba(16, 185, 129, 0.3);
}
.pf .pf-agd-step--pending {
  opacity: 0.7;
}
.pf .pf-agd-step--failed {
  border-color: rgba(239, 68, 68, 0.3);
}
.pf .pf-agd-step-icon {
  font-size: 0.9rem;
  flex-shrink: 0;
  width: 1.2rem;
  text-align: center;
}
.pf .pf-agd-step-name {
  font-weight: 500;
  flex: 1;
}
.pf .pf-agd-step-detail {
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  margin-left: auto;
}

/* ── Integration tab: Production sections ── */

.pf .pf-agd-section {
  margin-bottom: 1.25rem;
}

/* Card scheme shared by every agent-detail tab: content groups become bordered
   cards (.pf-agd-card) and a tab that pairs short groups side by side wraps
   them in .pf-agd-card-grid (responsive two-column; --full spans both). This
   replaces the "one long ragged column with a dead right half" layout. */
.pf .pf-agd-card {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  background: var(--card, #FFFFFF);
  min-width: 0;
}
.pf .pf-agd-card + .pf-agd-card { margin-top: 0.85rem; }
.pf .pf-agd-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 0.85rem;
  align-items: stretch;
}
.pf .pf-agd-card-grid > .pf-agd-card {
  margin-top: 0;
  margin-bottom: 0;
}
.pf .pf-agd-card-grid > .pf-agd-card--full {
  grid-column: 1 / -1;
}
/* Same visual as .pf-agd-section-title — kept as a separate name only because the
   Integration tab wraps its sections differently. Keep the two in sync. */
.pf .pf-agd-section-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6B7280);
  margin-bottom: 0.5rem;
}
/* Fixed label column so values (and their status dots) line up in ONE column
   across every row of a section — ragged flex rows read as disarray. */
.pf .pf-agd-info-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 0.75rem;
  align-items: center;
  padding: 0.28rem 0;
  font-size: 0.82rem;
}
.pf .pf-agd-info-label {
  font-weight: 500;
  color: var(--text-dim);
  min-width: 0;
}
.pf .pf-agd-info-value {
  color: var(--text);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* ── Delivery log table ── */

.pf .pf-agd-delivery-log {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.pf .pf-agd-delivery-log th {
  text-align: left;
  padding: 0.35rem 0.5rem;
  font-weight: 600;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-dim, #6B7280);
  border-bottom: 1px solid var(--border, #E5E7EB);
}
.pf .pf-agd-delivery-log td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border-subtle, #F3F4F6);
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-delivery-log tr:last-child td { border-bottom: none; }
.pf .pf-agd-delivery-toggle { margin-top: 0.375rem; }

/* ── Messages tab: Command palette ── */

.pf .pf-agd-commands {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  margin-bottom: 1rem;
  overflow: hidden;
}
.pf .pf-agd-commands-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--bg-dim, #F9FAFB);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
}
.pf .pf-agd-commands-body {
  padding: 0.5rem 0.75rem;
}
.pf .pf-agd-commands-category {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--info, #3B82F6);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}
.pf .pf-agd-commands-category:first-child { margin-top: 0; }
.pf .pf-agd-command-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
}
.pf .pf-agd-command-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  min-width: 80px;
  flex-shrink: 0;
}
.pf .pf-agd-command-desc {
  flex: 1;
  color: var(--text-dim, #6B7280);
  font-size: 0.78rem;
}

/* Autocomplete dropdown for / commands */
.pf .pf-agd-autocomplete {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.06));
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}
.pf .pf-agd-autocomplete-item {
  display: flex;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.1s;
}
.pf .pf-agd-autocomplete-item:hover {
  background: var(--card-bg-alt, #F3F4F6);
}

/* ── Data Access tab ── */

.pf .pf-agd-data-section {
  margin-bottom: 1.25rem;
}
.pf .pf-agd-tag-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-subtle, #F3F4F6);
}
.pf .pf-agd-tag-row:last-child { border-bottom: none; }
.pf .pf-agd-tag-name {
  font-weight: 500;
  background: var(--card-bg-alt, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
}
.pf .pf-agd-tag-prefix {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-tag-sharing {
  margin-left: auto;
  font-size: 0.72rem;
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-area-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
  border-bottom: 1px solid var(--border-subtle, #F3F4F6);
}
.pf .pf-agd-area-row:last-child { border-bottom: none; }
.pf .pf-agd-area-row--clickable { cursor: pointer; }
.pf .pf-agd-area-row--clickable:hover { background: var(--bg-dim, #F9FAFB); }
.pf .pf-agd-memory-preview {
  background: var(--bg-dim, #F3F4F6);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0 0.5rem 1.5rem;
  font-size: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}
.pf .pf-agd-area-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
}
.pf .pf-agd-area-desc {
  flex: 1;
  color: var(--text-dim, #6B7280);
  font-size: 0.78rem;
}
.pf .pf-agd-area-perm {
  font-size: 0.7rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
}
.pf .pf-agd-area-perm--rw {
  background: var(--accent-subtle, rgba(16, 185, 129, 0.1));
  color: var(--success, #10b981);
}
.pf .pf-agd-area-perm--ro {
  background: var(--accent-subtle, rgba(245, 158, 11, 0.1));
  color: var(--warn, #F59E0B);
}

/* Inline edit/delete actions on a memory-area row */
.pf .pf-agd-area-actions {
  display: flex;
  gap: 0.25rem;
  flex-shrink: 0;
  margin-left: auto;
}

/* Stored memory key: expanded detail wrapper (value + action row) */
.pf .pf-agd-memory-detail {
  margin: 0.25rem 0 0.5rem 1.5rem;
}
.pf .pf-agd-memory-detail .pf-agd-memory-preview {
  margin-left: 0;
}

/* Inline image preview(s) for a memory value that references image URLs
   (e.g. crews.<agent>.images.* records from the image-maker crew). */
.pf .pf-agd-memory-imgs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.5rem;
}
.pf .pf-agd-memory-img-link {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-dim);
}
.pf .pf-agd-memory-img {
  display: block;
  max-width: 320px;
  max-height: 240px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Inline value editor textarea for a stored memory key */
.pf .pf-agd-memory-edit {
  width: 100%;
  box-sizing: border-box;
  min-height: 8rem;
  max-height: 360px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  background: var(--bg-dim, #F9FAFB);
  color: var(--text, #1A1A2E);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  resize: vertical;
}
.pf .pf-agd-memory-edit:focus {
  outline: none;
  border-color: var(--accent, #E8564A);
}
.pf .pf-agd-memory-edit:disabled {
  opacity: 0.6;
}

/* Action button row beneath a stored memory key's value/editor */
.pf .pf-agd-memory-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.4rem;
}

/* Completed-task deliverable link (task → agent-memory key) */
.pf .pf-agd-deliverable {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.4rem 0;
}
.pf .pf-agd-deliverable-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-deliverable-key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  background: var(--code-bg, #F3F4F6);
  padding: 1px 6px;
  border-radius: 3px;
  word-break: break-all;
}
.pf .pf-agd-deliverable-gone {
  font-size: 0.78rem;
  color: var(--warn, #F59E0B);
  font-style: italic;
  margin: 0.25rem 0 0.5rem;
}

/* Danger-tinted ghost button used for in-row delete actions */
.pf .pf-agd-action-danger {
  color: var(--danger, #EF4444);
}
.pf .pf-agd-action-danger:hover {
  color: var(--danger, #EF4444);
}

/* Effective scope summary */
.pf .pf-agd-scope-summary {
  background: var(--bg-dim, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  padding: 0.625rem 0.875rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  color: var(--text-dim, #6B7280);
  line-height: 1.5;
  margin-top: 1rem;
}

/* Scope summary footer note */
.pf .pf-agd-scope-footer {
  font-size: 0.72rem;
  color: var(--text-muted, #9CA3AF);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Config file upload row */
.pf .pf-agd-config-upload {
  margin-bottom: 1rem;
}
/* Hidden file input */
.pf .pf-agd-hidden-input {
  display: none;
}

/* ── Agent Config tab ── */

.pf .pf-agd-config-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.pf .pf-agd-config-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.82rem;
}
.pf .pf-agd-config-item:hover { background: var(--card-bg-alt, #F3F4F6); }
.pf .pf-agd-config-item--active {
  border-color: var(--accent, #E8564A);
  background: var(--card-bg-alt, #F3F4F6);
}
.pf .pf-agd-config-name { font-weight: 600; }
.pf .pf-agd-config-desc { flex: 1; font-size: 0.78rem; color: var(--text-dim, #6B7280); }
.pf .pf-agd-config-platform {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  color: var(--blue, #3B82F6);
}
.pf .pf-agd-config-preview {
  background: var(--bg-dim, #F9FAFB);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: var(--radius-xs, 6px);
  padding: 0.75rem 1rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  max-height: 300px;
  overflow-y: auto;
  line-height: 1.5;
}
.pf .pf-agd-config-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
}

/* ── Activity tab: Filter pills ── */

.pf .pf-agd-filter-bar {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.pf .pf-agd-filter-pill {
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 12px;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  transition: border-color 0.15s, color 0.15s;
}
.pf .pf-agd-filter-pill:hover { border-color: var(--accent, #E8564A); color: var(--text, #1A1A2E); }
.pf .pf-agd-filter-pill--active {
  background: var(--accent, #E8564A);
  color: var(--bg, #FFFFFF);
  border-color: var(--accent, #E8564A);
}

/* Activity event badges */
.pf .pf-agd-event-badge {
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 500;
  white-space: nowrap;
}
.pf .pf-agd-event-badge--tasks { background: var(--accent-subtle, rgba(16, 185, 129, 0.1)); color: var(--success, #10b981); }
.pf .pf-agd-event-badge--messages { background: var(--accent-subtle, rgba(59, 130, 246, 0.1)); color: var(--blue, #3B82F6); }
.pf .pf-agd-event-badge--governance { background: var(--accent-subtle, rgba(245, 158, 11, 0.1)); color: var(--warn, #F59E0B); }
.pf .pf-agd-event-badge--system { background: var(--card-bg-alt, #F3F4F6); color: var(--text-dim, #6B7280); }
.pf .pf-agd-event-badge--violation { background: rgba(239, 68, 68, 0.12); color: var(--danger, #ef4444); }

/* ── Directives tab (structured text editor) ── */
.pf .pf-agd-directives-content {
  white-space: pre-wrap;
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 80px;
  color: var(--text);
}
.pf .pf-agd-directives-textarea {
  width: 100%;
  min-height: 200px;
  font-size: 0.85rem;
  line-height: 1.6;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  resize: vertical;
}
.pf .pf-agd-directives-textarea:focus {
  outline: none;
  border-color: var(--accent, #E8564A);
}

/* ── Services tab ── */

.pf .pf-agd-service-status {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Audit fix additions ── */

/* Status dots (active/inactive) */
.pf .pf-agd-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.35rem;
  flex-shrink: 0;
}
.pf .pf-agd-status-dot--active { background: var(--success, #10b981); }
.pf .pf-agd-status-dot--inactive { background: var(--text-dim, #6B7280); }
.pf .pf-agd-status-dot--error { background: var(--danger, #ef4444); }

/* Active/Inactive badges */
.pf .pf-agd-badge--active { background: var(--success, #10b981); color: var(--bg, #fff); }
.pf .pf-agd-badge--inactive { background: var(--card-bg-alt, #F3F4F6); color: var(--text-dim, #6B7280); }

/* Config tab: action buttons row */
.pf .pf-agd-config-actions {
  display: flex;
  gap: 0.35rem;
}

/* Config tab: edit textarea */
.pf .pf-agd-config-edit {
  margin-top: 0.5rem;
}
.pf .pf-agd-config-textarea {
  width: 100%;
  min-height: 200px;
  padding: 0.5rem;
  font-family: monospace;
  font-size: 0.82rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  background: var(--card, #fff);
  color: var(--text, #1A1A2E);
  resize: vertical;
}

/* Zone 2 inline URL form */
.pf .pf-agd-zone2-url-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.5rem;
}
.pf .pf-agd-zone2-url-form input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  font-size: 0.82rem;
}

/* Help text (footer notes, explanatory text) */
.pf .pf-agd-help-text {
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

/* Directive footer */
.pf .agd-directive-footer ,
.pf .pf-agd-directive-footer  {
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  margin-top: 1rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border, #E5E7EB);
  line-height: 1.4;
}

/* Delivery method status indicator */
.pf .pf-agd-delivery-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.82rem;
  font-weight: 500;
}

/* Data access: area form */
.pf .pf-agd-area-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.pf .pf-agd-area-form input,
.pf .pf-agd-area-form select {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  font-size: 0.82rem;
}
.pf .pf-agd-area-form input { flex: 1; min-width: 120px; }

/* Data access: stored-key create form — stack inputs/value/actions vertically */
.pf .pf-agd-keyadd-form {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  padding: 0.5rem 0;
}
.pf .pf-agd-keyadd-form input,
.pf .pf-agd-keyadd-form select { width: 100%; box-sizing: border-box; }
.pf .pf-agd-keyadd-form .pf-agd-memory-edit { margin: 0; }

/* Data access: stored-key sort controls (in the section header) */
.pf .pf-agd-keys-controls {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.pf .pf-agd-sort-label {
  font-size: 0.72rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-sort-select {
  padding: 0.2rem 0.4rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
  font-size: 0.78rem;
}
.pf .pf-agd-sort-dir {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  background: var(--card-bg, #FFFFFF);
  color: var(--text-dim, #6B7280);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
}
.pf .pf-agd-sort-dir:hover {
  border-color: var(--accent, #E8564A);
  color: var(--accent, #E8564A);
}

/* Data access: per-key created/updated meta in the stored-key row */
.pf .pf-agd-key-meta {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
  white-space: nowrap;
}

/* Data access: package picker */
.pf .pf-agd-package-picker {
  margin-bottom: 0.5rem;
}
.pf .pf-agd-package-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  cursor: pointer;
  border-radius: 4px;
}
.pf .pf-agd-package-option:hover { background: var(--card-bg-alt, #F3F4F6); }
.pf .pf-agd-package-count {
  font-size: 0.72rem;
  color: var(--text-dim, #6B7280);
}

/* Agent count badge in section header */
.pf .pf-agd-count-badge {
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--text-dim, #6B7280);
}

/* Command badge for slash command messages */
.pf .pf-agd-command-badge {
  display: inline-block;
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-subtle, rgba(232, 86, 74, 0.1));
  color: var(--accent, #E8564A);
  font-weight: 500;
  margin-right: 0.25rem;
}

/* Slash command message bubble */
.pf .pf-agd-msg-command {
  border-left: 2px solid var(--accent, #E8564A);
}
.pf .pf-agd-service-status--active { background: var(--success, #10b981); }
.pf .pf-agd-service-status--inactive { background: var(--text-muted, #9CA3AF); }

/* ── Scope management (card footer) ── */

.pf .pf-agd-card-footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--border, #E5E7EB);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pf .pf-agd-card-actions {
  display: flex;
  gap: 0.5rem;
}
/* The link through to the agent's host carries a hostname, which can be long and is one
   unbreakable token. Left to wrap it doubled the footer row on a phone (31px → 54px measured at
   390px), so it stays on one line and truncates; the full address is in the title. */
.pf .pf-agd-card-actions a {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Input wrapper for autocomplete ── */
.pf .pf-agd-input-wrap {
  position: relative;
  flex: 1;
}
.pf .pf-agd-tag-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
}
.pf .pf-agd-progress-header {
  margin-top: 0.25rem;
}
.pf .agd-task-title-row ,
.pf .pf-agd-task-title-row  {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Per-task "hide title" toggle (eye icon) -- used to blur sensitive titles for
   screen recordings. Preference is browser-only (localStorage). */
.pf .pf-agd-blur-toggle  {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  /* Hidden by default to keep the task list uncluttered; revealed when the row
     is hovered or the button is focused. opacity (not display) so the title
     never shifts when the eye appears. A row whose title is currently hidden
     keeps its eye visible (see --on) so the hidden state stays discoverable. */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.pf .pf-agd-task-item:hover .pf-agd-blur-toggle  { opacity: 0.55; }
.pf .pf-agd-blur-toggle:hover  { opacity: 0.9; }
.pf .pf-agd-blur-toggle:focus-visible  { opacity: 0.9; }
/* A blurred (hidden-title) row shows its 🙈 at all times, hover or not. */
.pf .pf-agd-blur-toggle--on  { opacity: 0.85; }
.pf .pf-agd-task-item:hover .pf-agd-blur-toggle--on  { opacity: 0.95; }

.pf .pf-agd-task-title--blurred  {
  filter: blur(5px);
  user-select: none;
  cursor: pointer;
}
.pf .agd-task-group-title ,
.pf .pf-agd-task-group-title  {
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

/* ── Governance section (Activity tab) ── */
.pf .agd-governance-section ,
.pf .pf-agd-governance-section  {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.pf .agd-governance-grid ,
.pf .pf-agd-governance-grid  {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 16px;
  margin-bottom: 8px;
}

/* Label stacked above its value (stat-tile style) — side-by-side rows made the
   long values ("Completed: 0, Active: 0, Failed: 0") collide with the labels. */
.pf .agd-governance-item ,
.pf .pf-agd-governance-item  {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 4px 0;
}

.pf .agd-governance-label ,
.pf .pf-agd-governance-label  {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.pf .agd-governance-value ,
.pf .pf-agd-governance-value  {
  font-size: 0.8rem;
  font-weight: 600;
}
.pf .pf-agd-warning-text { color: var(--warning); }

.pf .agd-governance-delivery ,
.pf .pf-agd-governance-delivery  {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Integration tab: Webhook edit form ── */

.pf .pf-agd-webhook-form {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.5rem;
}
.pf .pf-agd-webhook-form input {
  flex: 1;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 4px;
  font-size: 0.82rem;
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
  font-family: inherit;
}
.pf .pf-agd-webhook-form input:focus {
  outline: none;
  border-color: var(--accent, #E8564A);
}

/* ── Integration tab: Roles badge ── */

.pf .pf-agd-role-badge {
  display: inline-block;
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 10px;
  font-weight: 500;
  background: var(--accent-subtle, rgba(59, 130, 246, 0.1));
  color: var(--blue, #3B82F6);
}

/* ── Integration tab: Strengths / Gaps text ── */

.pf .pf-agd-strengths-gaps {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  line-height: 1.5;
}
.pf .pf-agd-strengths-gaps-label {
  font-weight: 600;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-strengths-gaps-value {
  color: var(--text, #1A1A2E);
}

/* ── Compact Connect Agent content ── */

.pf .pf-agd-connect-content {
  margin-top: 0.75rem;
}

/* ── Message command-reply pairing ── */

.pf .pf-agd-msg-pair {
  margin-bottom: 0.75rem;
  border-left: 2px solid var(--border, #E5E7EB);
  padding-left: 0.5rem;
}
.pf .pf-agd-msg-reply-indicator {
  color: var(--text-muted, #9CA3AF);
  font-size: 0.75rem;
  padding: 0.15rem 0 0.15rem 0.25rem;
}
.pf .pf-agd-msg-reply {
  opacity: 0.95;
  border-left: 2px solid var(--info, #3B82F6);
  padding-left: 0.5rem;
}

/* ── Quality tab ── */

.pf .pf-agd-quality-desc {
  font-size: 0.8rem;
  color: var(--text-dim, #6B7280);
  margin: 0.25rem 0 0.75rem;
  line-height: 1.45;
}

/* Section titles sit at the top of their own card now — card padding + grid gap
   provide the separation the old stacked layout needed a margin-top for. */
.pf .pf-agd-quality .pf-agd-section-title {
  margin-top: 0;
}

/* Duration-by-context chips under the performance cards */
.pf .pf-agd-quality-durations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.pf .pf-agd-quality-dur-chip {
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  background: var(--bg-dim, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  padding: 0.15rem 0.5rem;
}

/* Per-context review rows */
.pf .pf-agd-quality-reviews {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pf .pf-agd-quality-review-row {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  background: var(--card-bg, #FFFFFF);
}
.pf .pf-agd-quality-review-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pf .pf-agd-quality-ctx {
  font-weight: 600;
  color: var(--text, #1A1A2E);
  min-width: 7rem;
}
.pf .pf-agd-quality-stars {
  color: var(--accent, #E8564A);
  letter-spacing: 1px;
}
.pf .pf-agd-quality-avg {
  font-weight: 600;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-quality-n {
  font-size: 0.75rem;
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-quality-lowconf {
  font-size: 0.7rem;
  color: var(--warning, #D97706);
  border: 1px solid var(--warning, #D97706);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
}
.pf .pf-agd-quality-review-meta {
  font-size: 0.72rem;
  color: var(--text-muted, #9CA3AF);
  margin-top: 0.3rem;
}
.pf .pf-agd-quality-overall {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-quality-overall .pf-agd-quality-stars,
.pf .pf-agd-quality-overall {
  letter-spacing: 0.5px;
}

/* Custom metric rows */
.pf .pf-agd-quality-custom {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.pf .pf-agd-quality-custom-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--border, #E5E7EB);
}
.pf .pf-agd-quality-custom-key {
  color: var(--text-dim, #6B7280);
  font-family: var(--font-mono, monospace);
}
.pf .pf-agd-quality-custom-val {
  color: var(--text, #1A1A2E);
  text-align: right;
  word-break: break-word;
}

/* ── Deliverable rating (Tasks tab) ── */

/* Current rating + rate/re-rate button row under a done task's deliverable */
.pf .pf-agd-rate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.pf .pf-agd-rate-current {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
}
.pf .pf-agd-rate-current-stars {
  color: var(--accent, #E8564A);
  letter-spacing: 1px;
}
.pf .pf-agd-rate-current-ctx {
  color: var(--text-dim, #6B7280);
  font-weight: 600;
}
.pf .pf-agd-rate-current-comment {
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
}

/* Star picker inside the rate modal */
.pf .pf-agd-rate-stars {
  display: flex;
  gap: 0.15rem;
  margin: 0.5rem 0 0.75rem;
}
.pf .pf-agd-rate-star {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--border, #E5E7EB);
  padding: 0;
  transition: color 0.12s;
}
.pf .pf-agd-rate-star:hover {
  color: var(--accent, #E8564A);
}
.pf .pf-agd-rate-star--on {
  color: var(--accent, #E8564A);
}

/* Context select + grounded checkbox rows in the rate modal */
.pf .pf-agd-rate-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-rate-field select {
  flex: 1;
}
.pf .pf-agd-rate-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  color: var(--text, #1A1A2E);
  cursor: pointer;
}

/* Quality tab "Rate deliverables" pending list */
.pf .pf-agd-quality-pending {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pf .pf-agd-quality-pending-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  background: var(--card-bg, #FFFFFF);
}
.pf .pf-agd-quality-pending-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-quality-pending-rated {
  font-size: 0.8rem;
  color: var(--accent, #E8564A);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.pf .pf-agd-quality-pending-unrated {
  font-size: 0.72rem;
  color: var(--text-muted, #9CA3AF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  padding: 0.05rem 0.4rem;
  white-space: nowrap;
}

/* Tasks tab — max concurrent tasks runner config */
.pf .pf-agd-concurrency {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.25rem 0 0.75rem;
  font-size: 0.85rem;
}
.pf .pf-agd-concurrency-label {
  color: var(--text-dim, #6B7280);
  font-weight: 600;
}
.pf .pf-agd-concurrency-input {
  width: 4rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  background: var(--card-bg, #FFFFFF);
  color: var(--text, #1A1A2E);
  font-size: 0.85rem;
}
.pf .pf-agd-concurrency-hint {
  color: var(--text-muted, #9CA3AF);
  font-size: 0.75rem;
}

/* ── Tasks-tab triage: bucket segments + search + time chips ── */
.pf .pf-agd-bucket-bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border, #E5E7EB);
  margin: 0.25rem 0 0.75rem;
}
.pf .pf-agd-bucket {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-dim, #6B7280);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.pf .pf-agd-bucket:hover { color: var(--text, #1A1A2E); }
.pf .pf-agd-bucket--active {
  color: var(--accent, #E8564A);
  border-bottom-color: var(--accent, #E8564A);
  font-weight: 600;
}
.pf .pf-agd-bucket-count {
  display: inline-block;
  min-width: 1.1rem;
  font-size: 0.7rem;
  color: var(--text-muted, #9CA3AF);
}
.pf .pf-agd-bucket--active .pf-agd-bucket-count { color: var(--accent, #E8564A); }
.pf .pf-agd-bucket-spacer { flex: 1; }
.pf .pf-agd-search-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.25rem 0.4rem;
  opacity: 0.6;
  border-radius: 6px;
}
.pf .pf-agd-search-toggle:hover { opacity: 1; }
.pf .pf-agd-search-toggle--on { opacity: 1; background: var(--bg-dim, #F3F4F6); }

.pf .pf-agd-search-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.pf .pf-agd-search-input {
  flex: 1;
  min-width: 12rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: 0.85rem;
}
.pf .pf-agd-time-chips { display: flex; gap: 0.25rem; }
.pf .pf-agd-time-chip {
  background: var(--bg-dim, #F3F4F6);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
  color: var(--text-dim, #6B7280);
  cursor: pointer;
}
.pf .pf-agd-time-chip--on {
  background: var(--accent, #E8564A);
  border-color: var(--accent, #E8564A);
  color: #fff;
}

/* Triage buttons pushed to the right of the task action row */
.pf .pf-agd-task-actions-spacer { flex: 1; }

/* Per-task memory entries (expanded task) -- collapsible per entry */
.pf .pf-agd-task-memory { margin: 0.5rem 0; }
.pf .pf-agd-task-memory-list {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.pf .pf-agd-task-memory-entry {
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 8px;
  background: var(--card-bg, #FFFFFF);
  overflow: hidden;
}
.pf .pf-agd-task-memory-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 0.4rem 0.55rem;
  font-size: 0.78rem;
}
.pf .pf-agd-task-memory-head:hover { background: var(--bg-dim, #F3F4F6); }
.pf .pf-agd-task-memory-caret {
  color: var(--text-muted, #9CA3AF);
  font-size: 0.65rem;
  flex-shrink: 0;
}
.pf .pf-agd-task-memory-key {
  color: var(--text-dim, #6B7280);
  font-family: var(--font-mono, monospace);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.pf .pf-agd-task-memory-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent, #E8564A);
  border: 1px solid var(--accent, #E8564A);
  border-radius: 4px;
  padding: 0.02rem 0.3rem;
}
.pf .pf-agd-task-memory-body {
  padding: 0.5rem 0.6rem;
  border-top: 1px solid var(--border, #E5E7EB);
  background: var(--bg-dim, #F3F4F6);
  color: var(--text, #1A1A2E);
  font-size: 0.75rem;
  line-height: 1.5;
  max-height: 340px;
  overflow: auto;
}
/* Raw (non-JSON) memory value: keep formatting, wrap long lines. */
.pf .pf-agd-task-memory-raw {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, monospace);
}

/* Markdown-rendered non-JSON memory values (e.g. an agent's latest_output).
   Compact, mirroring the message-bubble .md-body variant. The memory body
   background is grey (--bg-dim), so code chips get a border + light fill for
   contrast. */
.pf .pf-agd-task-memory-md .md-body > :first-child { margin-top: 0; }
.pf .pf-agd-task-memory-md .md-body > :last-child { margin-bottom: 0; }
.pf .pf-agd-task-memory-md .md-body p { margin: 0.3rem 0; }
.pf .pf-agd-task-memory-md .md-body h1,
.pf .pf-agd-task-memory-md .md-body h2,
.pf .pf-agd-task-memory-md .md-body h3,
.pf .pf-agd-task-memory-md .md-body h4 {
  margin: 0.45rem 0 0.2rem;
  line-height: 1.3;
  font-size: 0.85rem;
}
.pf .pf-agd-task-memory-md .md-body h1 { font-size: 0.95rem; }
.pf .pf-agd-task-memory-md .md-body h2 { font-size: 0.9rem; }
.pf .pf-agd-task-memory-md .md-body ul,
.pf .pf-agd-task-memory-md .md-body ol { margin: 0.3rem 0; padding-left: 1.3rem; }
.pf .pf-agd-task-memory-md .md-body li { margin: 0.12rem 0; }
.pf .pf-agd-task-memory-md .md-body a { color: var(--accent, #E8564A); }
.pf .pf-agd-task-memory-md .md-body blockquote {
  margin: 0.35rem 0;
  padding: 0.15rem 0.55rem;
  border-left: 3px solid var(--border, #E5E7EB);
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-task-memory-md .md-body .md-code {
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.72rem;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.02rem 0.3rem;
  border-radius: 4px;
}
.pf .pf-agd-task-memory-md .md-body .md-pre {
  margin: 0.4rem 0;
  padding: 0.55rem;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  overflow-x: auto;
}
.pf .pf-agd-task-memory-md .md-body .md-pre .md-code {
  display: block;
  white-space: pre;
  background: none;
  border: none;
  padding: 0;
  tab-size: 4;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-task-memory-md .md-body table {
  border-collapse: collapse;
  margin: 0.35rem 0;
  font-size: 0.72rem;
}
.pf .pf-agd-task-memory-md .md-body th,
.pf .pf-agd-task-memory-md .md-body td {
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.2rem 0.45rem;
  text-align: left;
}
.pf .pf-agd-task-memory-md .md-body th { background: var(--card-bg, #FFFFFF); }

/* Markdown-rendered task descriptions (agent-authored prompts are often long and
   structured). Compact, mirroring the task-memory variant. The expanded card
   background is grey (--card-bg-alt), so code chips get a white fill + border for
   contrast. Paragraphs keep the dim base colour; headings use the normal text
   colour to stand out. */
.pf .pf-agd-task-desc .md-body > :first-child { margin-top: 0; }
.pf .pf-agd-task-desc .md-body > :last-child { margin-bottom: 0; }
.pf .pf-agd-task-desc .md-body p { margin: 0.3rem 0; }
.pf .pf-agd-task-desc .md-body h1,
.pf .pf-agd-task-desc .md-body h2,
.pf .pf-agd-task-desc .md-body h3,
.pf .pf-agd-task-desc .md-body h4 {
  margin: 0.5rem 0 0.2rem;
  line-height: 1.3;
  font-size: 0.85rem;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-task-desc .md-body h1 { font-size: 0.95rem; }
.pf .pf-agd-task-desc .md-body h2 { font-size: 0.9rem; }
.pf .pf-agd-task-desc .md-body ul,
.pf .pf-agd-task-desc .md-body ol { margin: 0.3rem 0; padding-left: 1.3rem; }
.pf .pf-agd-task-desc .md-body li { margin: 0.12rem 0; }
.pf .pf-agd-task-desc .md-body a { color: var(--accent, #E8564A); }
.pf .pf-agd-task-desc .md-body strong { color: var(--text, #1A1A2E); }
.pf .pf-agd-task-desc .md-body blockquote {
  margin: 0.35rem 0;
  padding: 0.15rem 0.55rem;
  border-left: 3px solid var(--border, #E5E7EB);
  color: var(--text-dim, #6B7280);
}
.pf .pf-agd-task-desc .md-body .md-code {
  font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
  font-size: 0.72rem;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.02rem 0.3rem;
  border-radius: 4px;
}
.pf .pf-agd-task-desc .md-body .md-pre {
  margin: 0.4rem 0;
  padding: 0.55rem;
  background: var(--card-bg, #FFFFFF);
  border: 1px solid var(--border, #E5E7EB);
  border-radius: 6px;
  overflow-x: auto;
}
.pf .pf-agd-task-desc .md-body .md-pre .md-code {
  display: block;
  white-space: pre;
  background: none;
  border: none;
  padding: 0;
  tab-size: 4;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text, #1A1A2E);
}
.pf .pf-agd-task-desc .md-body table {
  border-collapse: collapse;
  margin: 0.35rem 0;
  font-size: 0.72rem;
}
.pf .pf-agd-task-desc .md-body th,
.pf .pf-agd-task-desc .md-body td {
  border: 1px solid var(--border, #E5E7EB);
  padding: 0.2rem 0.45rem;
  text-align: left;
}
.pf .pf-agd-task-desc .md-body th { background: var(--card-bg, #FFFFFF); }

/* Structured JSON view: key/value rows, nested blocks indented with a guide line. */
.pf .pf-agd-json-block { display: flex; flex-direction: column; gap: 0.05rem; }
.pf .pf-agd-json-row {
  display: flex;
  gap: 0.45rem;
  align-items: baseline;
  padding: 0.05rem 0;
}
.pf .pf-agd-json-row--nested { display: block; }
.pf .pf-agd-json-row--nested > .pf-agd-json-block {
  margin: 0.1rem 0 0.2rem 0.3rem;
  padding-left: 0.65rem;
  border-left: 1px solid var(--border, #E5E7EB);
}
.pf .pf-agd-json-key {
  font-weight: 600;
  color: var(--text-dim, #6B7280);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  flex-shrink: 0;
}
.pf .pf-agd-json-key::after { content: ':'; color: var(--text-muted, #9CA3AF); font-weight: 400; }
.pf .pf-agd-json-str { color: var(--text, #1A1A2E); word-break: break-word; }
.pf .pf-agd-json-num { color: var(--info, #3B82F6); font-family: var(--font-mono, monospace); }
.pf .pf-agd-json-bool { color: var(--accent, #E8564A); font-family: var(--font-mono, monospace); }
.pf .pf-agd-json-null,
.pf .pf-agd-json-empty { color: var(--text-muted, #9CA3AF); font-style: italic; }

/* ── Contracts sub-tab — agent-side contract-engagement visibility (active / retired). ── */
.pf .pf-agd-contracts { padding: 0.25rem 0; }
.pf .pf-agd-contracts .agc-mt { margin-top: 1rem; }
.pf .pf-agd-contracts .agc-caps { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.2rem; }
.pf .pf-agd-contracts .agc-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; }
.pf .pf-agd-contracts .agc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.45rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius-xs, 6px);
  background: var(--card);
}
.pf .pf-agd-contracts .agc-row--retired { opacity: 0.72; }
.pf .pf-agd-contracts .agc-where { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-size: 0.85rem; }
.pf .pf-agd-contracts .agc-org { color: var(--text-dim); font-size: 0.78rem; }
.pf .pf-agd-contracts .agc-since { color: var(--text-muted); font-size: 0.75rem; }