/**
 * @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.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.
 */

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

/* 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 {
  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;
  transition: border-color 0.15s, background 0.15s;
}
.pf .pf-agd-board-card:hover {
  background: var(--card-bg, #FFFFFF);
}
.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));
}
.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--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(--accent, #E8564A);
  border: 1px dashed var(--border, #E5E7EB);
  cursor: pointer;
  white-space: nowrap;
}
.pf .pf-agd-tag-add-btn:hover { border-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 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;
}
.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);
}

/* ── 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;
}
.pf .pf-agd-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim, #6B7280);
  margin-bottom: 0.5rem;
}
.pf .pf-agd-info-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.82rem;
}
.pf .pf-agd-info-label {
  font-weight: 500;
  min-width: 120px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.pf .pf-agd-info-value {
  color: var(--text);
  word-break: break-all;
}

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

/* ── 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(140px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.pf .agd-governance-item ,
.pf .pf-agd-governance-item  {
  display: flex;
  justify-content: space-between;
  align-items: center;
  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;
}

.pf .pf-agd-quality .pf-agd-section-title {
  margin-top: 1.25rem;
}

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