/* Ported to the React build from css/inbox.css — tokens reconciled to the
   Pursuit DS 2026 canonical sheet (legacy --border/--radius/--secondary names
   replaced; see react/css/bridge.css for remaining aliases). */

/* Inbox / Opportunities — page-level chrome and the records-nav
   rebuild. The Inbox reuses the same shell as detail mode (left
   column = records, right = body). Page-mode `inbox` swaps out the
   search-side chrome and shows the Inbox toolbar at the top of the
   left column. */
.app-frame[data-mode="inbox"] .fw-toolbar,
.app-frame[data-mode="inbox"] .ss-section,
.app-frame[data-mode="inbox"] #field-list,
.app-frame[data-mode="inbox"] .page-title-row,
.app-frame[data-mode="inbox"] .entity-row,
.app-frame[data-mode="inbox"] #save-search-split,
.app-frame[data-mode="inbox"] #records-nav .rn-back,
.app-frame[data-mode="inbox"] #records-nav .rn-head,
.app-frame[data-mode="inbox"] #records-nav .rn-list,
.app-frame[data-mode="inbox"] #records-nav .rn-sel-row { display: none; }
.app-frame[data-mode="inbox"] #records-nav { display: flex; }
/* Records-nav column is wider in inbox mode (need room for the
   profile dropdown label + the date / account / synopsis rows). */
.app-frame[data-mode="inbox"] .floating-widget-spacer { width: 320px; }
.app-frame[data-mode="inbox"] .floating-widget {
  padding: 0;
  overflow: hidden;
}

/* Inbox toolbar — sits at the top of the records-nav. Has the
   Account Profile dropdown and a small "more filters" icon button. */
.inbox-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: flex-start; gap: 8px;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--ps-neutral-150);
}
/* Quick-view chips under the toolbar. Each chip is an independent
   toggle (multi-select). Sits flush with the inbox list. */
.inbox-views {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 10px 14px 8px;
}
.inbox-views-label {
  font: 500 12px/1.2 var(--font-body);
  color: var(--muted-foreground);
  margin-right: 4px;
}
.inbox-view-chip {
  background: var(--UI-elements-hollow);
  border: 1px solid #fff;
  border-top-width: 1.5px;
  box-shadow: var(--shadow-xs);
  padding: 5px 12px;
  border-radius: 999px;
  font: 500 12px/1.2 var(--font-body);
  color: var(--muted-foreground);
  cursor: pointer;
  font-family: inherit;
}
.inbox-view-chip:hover { background: var(--ps-neutral-100); }
.inbox-view-chip.active {
  background: var(--primary);
  color: var(--primary-foreground);
  border-color: var(--ps-primary-100);
}
.inbox-profile-wrap {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.inbox-profile-heading {
  font: 500 11px/1.2 var(--font-mono);
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.inbox-profile-empty-hint {
  font: 400 12px/1.3 var(--font-body);
  color: var(--muted-foreground);
}
.inbox-profile-add {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12px/1 var(--font-body);
  color: var(--ps-primary-600);
  background: var(--card);
  border: 1px solid #fff; border-top: 1.5px solid #fff;
  border-radius: 6px;
  padding: 6px 11px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.inbox-profile-add:hover { background: var(--muted); }
.inbox-profile-add:active { transform: translateY(1px); }
.inbox-profile-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  background: var(--card);
  border: 1px solid #fff;
  border-top-width: 1.5px;
  box-shadow: var(--shadow-xs);
  border-radius: 8px;
  padding: 8px 10px 8px 12px;
  font: 500 14px/1 var(--font-body);
  color: var(--foreground);
  cursor: pointer;
}
.inbox-profile-glyph {
  color: var(--ps-primary-500);
  flex: 0 0 auto;
}
.inbox-profile-label {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.inbox-profile-chev {
  color: var(--muted-foreground);
  flex: 0 0 auto;
}
.inbox-profile-btn:hover { background: var(--ps-neutral-100); }
/* Chips variant — selected Profiles render as wrapping colored chips that
   grow the trigger vertically (icon top-left, chevron top-right). */
.inbox-profile-btn--chips {
  align-items: flex-start;
  flex-wrap: nowrap;
  padding: 7px 10px 7px 12px;
  cursor: pointer;
}
.inbox-profile-btn--chips .inbox-profile-glyph,
.inbox-profile-btn--chips .inbox-profile-chev { margin-top: 3px; }
.inbox-profile-chips {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}
.inbox-profile-chip {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%; min-width: 0;
  padding: 3px 4px 3px 9px;
  border-radius: 5px;
  color: #fff;
  font: 600 11px/1.3 var(--font-mono);
  letter-spacing: 0.03em;
}
/* Adaptive middle truncation: the head shrinks + ellipsizes while the
   tail stays pinned, so the chip shows the full name when there's room
   and only truncates the middle when the column is too narrow. */
.inbox-profile-chip-label {
  display: inline-flex;
  min-width: 0;
}
.ipl-head {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}
.ipl-tail {
  flex: 0 0 auto;
  white-space: nowrap;
}
.inbox-profile-chip-x {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  cursor: pointer;
}
.inbox-profile-chip-x:hover { background: rgba(255, 255, 255, 0.38); }
.inbox-profile-menu {
  position: fixed;
  /* Positioned by JS (positionProfilePopover) — top/left/width come
     from the trigger button's bounding rect. Portaled to body so it
     escapes the column's overflow:hidden clipping. */
  background: var(--popover);
  border: 1px solid #fff;
  border-top-width: 1.5px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 10px;
  z-index: 100;
}
/* Tighter than the Search-page value editor — no head bar, so the
   tag-area sits flush. Keeps the suggestion list scrollable on tall
   catalogs. */
.inbox-profile-menu .ve-combo-list { max-height: 240px; overflow-y: auto; }
.inbox-profile-menu .ve-input { padding: 7px 10px; font-size: 13px; }
/* Menu header: count + small DS secondary "Clear" button. */
.inbox-profile-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.inbox-profile-head-label {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.inbox-profile-clear {
  display: inline-flex; align-items: center;
  font: 500 12px/1 var(--font-body);
  color: var(--foreground);
  background: var(--card);
  border: 1px solid #fff; border-top: 1.5px solid #fff;
  border-radius: 6px;
  padding: 5px 11px;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}
.inbox-profile-clear:hover { background: var(--muted); }
.inbox-profile-clear:active { transform: translateY(1px); }
.ve-combo-item-meta {
  background: var(--ps-primary-60) !important;
  color: var(--ps-primary-700);
  font-weight: 500;
}
.ve-combo-item-meta:hover { background: var(--ps-primary-75) !important; }
.ve-combo-meta-hint { color: var(--ps-primary-700); opacity: 0.7; font-weight: 400; }

.inbox-empty-noprofile {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted-foreground);
  font: 500 13px/1.4 var(--font-body);
}
.inbox-empty-noprofile span {
  display: inline-block;
  margin-top: 6px;
  font-weight: 400;
  font-size: 12px;
  color: var(--muted-foreground);
}
.inbox-filter-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid #fff;
  border-top-width: 1.5px;
  box-shadow: var(--shadow-xs);
  border-radius: 8px;
  color: var(--muted-foreground);
  cursor: pointer;
  flex: 0 0 auto;
}
.inbox-filter-btn:hover { background: var(--ps-neutral-100); color: var(--foreground); }
.inbox-filter-btn.active {
  background: var(--ps-primary-60);
  border-color: var(--ps-primary-100);
  color: var(--ps-primary-700);
}
.inbox-filter-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ps-primary-500);
}
.inbox-filter-wrap { position: relative; flex: 0 0 auto; }

/* Filter popover — appears below the filter button. Lifted-surface
   border + soft shadow; sized to fit the records-nav column. */
.inbox-filters-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  background: var(--popover);
  border: 1px solid #fff;
  border-top-width: 1.5px;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  z-index: 200;
  display: flex; flex-direction: column; gap: 10px;
}
.inbox-filters-head {
  display: flex; align-items: center; justify-content: space-between;
  font: 600 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.inbox-filters-clear {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  border-radius: 6px;
  font: 500 12px/1 var(--font-body);
  color: var(--ps-primary-500);
  cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
.inbox-filters-clear:hover { background: var(--ps-primary-60); }
.inbox-filter-row {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  padding: 6px 4px;
  border-radius: 6px;
}
.inbox-filter-row:hover { background: var(--ps-neutral-100); }
.inbox-filter-row input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;
  width: 16px; height: 16px;
  accent-color: var(--ps-primary-500);
}
.inbox-filter-row-text {
  display: flex; flex-direction: column;
  gap: 2px;
}
.inbox-filter-row-title {
  font: 500 13px/1.3 var(--font-body);
  color: var(--foreground);
}
.inbox-filter-row-sub {
  font: 400 12px/1.35 var(--font-body);
  color: var(--muted-foreground);
}
.inbox-filter-section {
  margin-top: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ps-neutral-150);
  font: 600 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.inbox-filter-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.inbox-filter-date {
  display: flex; flex-direction: column;
  gap: 4px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.inbox-filter-date input {
  font: 400 13px/1.3 var(--font-body);
  border: 1px solid var(--ps-neutral-150);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--card);
  color: var(--foreground);
  width: 100%;
  outline: none;
}
.inbox-filter-date input:focus { border-color: var(--ps-primary-500); }

/* Inbox list — scrolls. Each row is a button styled as a stacked
   date / account-name / synopsis block. Active row is tinted; unread
   has a blue dot before the account name and a slightly heavier font. */
.inbox-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.inbox-row {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ps-neutral-150);
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font-family: inherit;
}
.inbox-row:hover { background: var(--ps-neutral-100); }
.inbox-row.active { background: var(--ps-primary-60); }
.inbox-row-date {
  font: 600 11px/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.inbox-row-title {
  display: flex; align-items: center; gap: 8px;
  font: 500 14px/1.3 var(--font-body);
  color: var(--foreground);
}
.inbox-row.unread .inbox-row-title { font-weight: 600; }
.inbox-row.unread .inbox-row-account { color: var(--ps-primary-700); }
.inbox-unread-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ps-primary-500);
  flex: 0 0 auto;
}
.inbox-row-synopsis {
  font: 400 13px/1.45 var(--font-body);
  color: var(--muted-foreground);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Status badges below the synopsis — small pill chips. */
.inbox-row-status {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 4px;
}
.inbox-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font: 600 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.inbox-status i, .inbox-status svg { width: 11px; height: 11px; }
.inbox-status-saved {
  background: rgba(234, 179, 8, 0.12);
  color: #92400e;
}
.inbox-status-done {
  background: rgba(34, 197, 94, 0.12);
  color: #166534;
}
.inbox-status-dismissed {
  background: var(--ps-neutral-100);
  color: var(--muted-foreground);
}

/* Inbox body — top toolbar row with search-in-signals input + Draft
   Email split + Ask AI. Search input is wide and flex-grows. */
.inbox-search-row {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
}
.inbox-body-search {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
  background: var(--card);
  border: 1px solid #fff;
  border-top-width: 1.5px;
  box-shadow: var(--shadow-xs);
  border-radius: 8px;
  padding: 8px 12px;
  min-width: 0;
}
.inbox-body-search i { color: var(--muted-foreground); flex: 0 0 auto; }
.inbox-body-search input {
  flex: 1 1 auto;
  border: 0; outline: none; background: transparent;
  font: 400 14px/1 var(--font-body);
  color: var(--foreground);
  min-width: 0;
}
.inbox-body-search-clear {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: var(--ps-neutral-150, #e5e5e6);
  color: var(--muted-foreground);
  cursor: pointer;
}
.inbox-body-search-clear:hover { color: var(--foreground); background: var(--ps-neutral-200, #d8d8da); }
.inbox-body-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted-foreground);
  font: 400 14px/1.5 var(--font-body);
}

/* Inbox empty body. */
.inbox-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px;
  color: var(--muted-foreground);
  gap: 16px;
  text-align: center;
}
.inbox-empty-anim {
  width: 200px; max-width: 60%;
  aspect-ratio: 1 / 1;
  color: var(--ps-secondary-400);
}
.inbox-empty-text {
  font: 400 15px/1.4 var(--font-body);
  text-align: center;
}

/* Inbox signal card — contacts rendered as wider rows (single column)
   matching the screenshot layout: name + title on left, email + phone
   inline to the right, kebab at the end. */
.inbox-signal-card .inbox-contacts {
  display: flex; flex-direction: column;
  gap: 8px;
}
.inbox-signal-card .inbox-contacts .dv-contact-chip {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(180px, 1fr) minmax(140px, 0.7fr) auto;
  align-items: center;
  gap: 16px;
  background: var(--ps-neutral-100);
  padding: 12px 16px;
}
.dv-contact-email-text {
  font: 400 13px/1.3 var(--font-body);
  color: var(--ps-primary-500);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dv-contact-email-text:hover { text-decoration: underline; }
.dv-contact-phone-text {
  font: 400 13px/1.3 var(--font-body);
  color: var(--foreground);
  white-space: nowrap;
}
.dv-icon-btn-sm {
  width: 30px; height: 30px;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--muted-foreground);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dv-icon-btn-sm:hover { background: rgba(0,0,0,0.04); }
.dv-icon-btn-sm i, .dv-icon-btn-sm svg { width: 16px; height: 16px; }
.dv-action-btn-chev {
  width: 14px; height: 14px;
  margin-left: 4px;
  color: var(--muted-foreground);
}

/* Sidebar active state for top-level page links. */
.sidebar-nav .nav-item[data-page-link].active {
  background: var(--sidebar-active-bg);
}

/* Compact search bar variant used when the bar lives in the global
   header (e.g. Opportunities Inbox). 42px tall, 14px text. */
.global-search-slot .sb-tokens {
  min-height: 42px;
  padding: 0 16px;
  border-radius: 10px;
}
.global-search-slot .sb-tokens > i,
.global-search-slot .sb-tokens > .sb-leading {
  margin-top: 11px;
}
.global-search-slot .sb-tokens > .sb-clear-all {
  margin-top: 13px;
}
.global-search-slot .sb-tokens-row .sb-input {
  font-size: 14px;
  padding: 4px 0;
}
.global-search-slot .sb-tokens-row { padding: 1px 0; }
.global-search-slot .sb-token-chip { font-size: 12px; }

/* ========================================================================
   TOAST — bottom-center transient confirmation with optional action
   button. Used for "Opportunity saved" + Show, and reusable for any
   other "did the thing — here's where it landed" moment.
   ======================================================================== */
.toast-host {
  position: fixed;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  display: flex; flex-direction: column-reverse; gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 8px 10px 16px;
  background: rgba(15, 17, 22, 0.92);
  color: #fff;
  border: 0.5px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  font: 500 14px/1.4 'IBM Plex Sans', sans-serif;
  letter-spacing: -0.005em;
  min-width: 280px; max-width: 520px;
  backdrop-filter: blur(10px);
  animation: toast-in 200ms cubic-bezier(.2,.8,.2,1);
}
.toast.leaving { animation: toast-out 180ms ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-out {  to  { opacity: 0; transform: translateY(12px); } }
.toast-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: #ffd54a;
  flex-shrink: 0;
}
.toast-msg { flex: 1 1 auto; min-width: 0; }
.toast-action {
  background: transparent;
  border: 0;
  color: #8ea0ff;
  font: 600 13px/1.4 inherit;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.toast-action:hover { background: rgba(255,255,255,0.08); color: #fff; }
.toast-close {
  background: transparent;
  border: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  flex-shrink: 0;
}
.toast-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.toast-close svg { width: 12px; height: 12px; display: block; }

/* ========================================================================
   AGENTS — page mode + agent detail layout
   Agents lives in the same app-frame shell as Search/Inbox/Detail.
   data-mode="agent" toggles the chrome same way data-mode="inbox" does:
   the search-side widgets/toolbars hide, the global header keeps the
   breadcrumb, and the work area gets a 2-column grid built by
   renderAgentPage() (config left, live preview right).
   ======================================================================== */
.app-frame[data-mode="agent"] .ss-section,
.app-frame[data-mode="agent"] #field-list,
.app-frame[data-mode="agent"] .page-title-row,
.app-frame[data-mode="agent"] .search-bar-wrap,
.app-frame[data-mode="agent"] .entity-row,
.app-frame[data-mode="agent"] #save-search-split,
.app-frame[data-mode="agent"] #records-nav { display: none; }
/* The left filter-widget shell isn't needed in agent mode — the agent
   uses the full content width for its 2-col grid. */
.app-frame[data-mode="agent"] .floating-widget-spacer { display: none; }
.app-frame[data-mode="agent"] .body {
  padding: 0;
  gap: 0;
}
.app-frame[data-mode="agent"] .content-panel {
  padding: 0;
}
.app-frame[data-mode="agent"] .page-header {
  display: none;
}

/* Outer work-area wrapper that the agent page builds into.
   Centered + max-width to match the Worksheets library — easier to read
   than full-bleed. Covers Agents detail, Templates editor, Account and
   Territories (.terr-page). */
.agent-work {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 20px 32px 24px;
  gap: 18px;
  overflow: hidden;
  min-height: 0;
  width: 100%; max-width: 1180px; margin-inline: auto;
}

/* fl-section action button — right-aligned link inside an .fl-section
   header. The base .fl-section is display:block in the field-list use
   case, so we promote it to flex only when an action child is present. */
.fl-section:has(.fl-section-action) {
  display: flex; align-items: center; justify-content: space-between;
}
.fl-section-action {
  text-transform: none; letter-spacing: 0;
  font: 500 12px/1 var(--font-body);
  color: var(--primary); background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.fl-section-action:hover { color: var(--ps-primary-700); }
.fl-section-action i { width: 12px; height: 12px; }

/* Agent identity head: name + status pill on the left, Pause/Run-now
   actions on the right. */
.agent-work .detail-head { gap: 16px; align-items: flex-start; }
.agent-work .detail-head-text { gap: 10px; }
.agent-work .detail-record-name { margin: 2px 0 0; }
.agent-work .detail-record-name-row { align-items: flex-start; width: 100%; }
.agent-work .detail-record-name-row .detail-record-name { flex: 1 1 auto; min-width: 0; }
.detail-record-name-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.detail-head-actions {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 4px;
}
.status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px 4px 9px;
  font: 500 12px/1 var(--font-body);
  border-radius: 999px;
  white-space: nowrap;
}
.status-pill .status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
}
.status-pill svg { width: 13px; height: 13px; flex-shrink: 0; }
.status-pill.active {
  background: #e6f0ec; color: var(--ps-secondary-700);
  border: 1px solid #cee0d4;
}
.status-pill.active .status-dot { background: var(--ps-secondary-500); }
.status-pill.paused {
  background: #fbf6dd; color: #6b5e15;
  border: 1px solid #ece5b3;
}
.status-pill.paused .status-dot { background: #b0a439; }
.status-pill.draft {
  background: var(--ps-primary-60);
  color: var(--ps-primary-700);
  border: 1px solid var(--ps-primary-75);
}
.status-pill.draft .status-dot { background: var(--ps-primary-500); }

/* === New-agent setup: locked config cards =======================
   A draft agent's downstream cards (Scoring / Schedule / Preview)
   stay locked until the prerequisite step is filled. The body dims
   and becomes non-interactive; a dashed "lock hint" pill in the
   toolbar tells the user what unlocks it. */
.floating-widget.cfg-card--locked .cfg-body,
.floating-widget.cfg-card--locked .agent-card-body,
.floating-widget.cfg-card--locked .fw-items,
.floating-widget.cfg-card--locked .agent-res-foot-row {
  opacity: 0.4;
  filter: grayscale(0.5);
  pointer-events: none;
  user-select: none;
}
.floating-widget.cfg-card--locked .fw-toolbar-title { opacity: 0.6; }
.cfg-lock-hint {
  display: inline-flex; align-items: center; gap: 5px;
  margin-left: auto;
  font: 500 11.5px/1 var(--font-body);
  color: var(--muted-foreground);
  padding: 4px 10px;
  border: 1px dashed var(--ps-neutral-300, #b8b8bc);
  border-radius: 999px;
  background: var(--ps-neutral-100, #f6f6f7);
}
.cfg-lock-hint i { width: 12px; height: 12px; flex: 0 0 auto; }
.cfg-lock-hint--warn {
  color: var(--ps-tertiary-700, #8a6f00);
  border-color: #ece5b3;
  background: var(--ps-tertiary-50, #fff8e1);
}
/* Setup empty-state inside a locked Results Preview / placeholder */
.agent-setup-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--muted-foreground);
  font: 400 13px/1.5 var(--font-body);
}
.agent-setup-empty .ase-icon {
  width: 40px; height: 40px;
  margin: 0 auto 10px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ps-neutral-100, #f6f6f7);
  color: var(--ps-neutral-400, #929297);
}
.agent-setup-empty .ase-icon i { width: 20px; height: 20px; }
.agent-setup-empty strong { display: block; color: var(--foreground); font-weight: 600; margin-bottom: 3px; }

/* Two-column work area inside the agent page. */
.agent-cols {
  flex: 1; min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px;
}
/* Single-column variant (e.g. the read-only assigned-agent detail, which
   shows only the territory + base-filters cards). Constrained width so the
   lone column reads as an intentional column rather than full-bleed. */
.agent-cols--single { grid-template-columns: minmax(0, 760px); }
/* Grid cells need min-height: 0 so their internal scroll wrappers
   can shrink rather than blow out the row height. */
.agent-cols > * { min-height: 0; }
@media (max-width: 1100px) {
  .agent-cols { grid-template-columns: 1fr; }
}

/* Left column = a vertical stack of three config cards above a small
   reset/save footer. The stack itself scrolls; the footer pins below. */
.agent-cfg-col {
  display: flex; flex-direction: column;
  min-height: 0;
  gap: 12px;
}
.agent-cfg-stack {
  display: flex; flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  padding-right: 4px;       /* room for the scrollbar without pushing content */
}
/* Stacked cards size to their content rather than stretching to fill
   the column — .floating-widget defaults to `height: 100%` for the
   single-card search-side use, but here we have a vertical stack. */
.agent-cfg-stack > .floating-widget {
  height: auto;
  flex: 0 0 auto;
}
.agent-cfg-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 4px;
  flex-shrink: 0;
}
.agent-cfg-footer .saved {
  display: inline-flex; align-items: center; gap: 4px;
  font: 400 12px/1 var(--font-body);
  color: var(--ps-secondary-700);
}
.agent-cfg-footer .saved i { width: 13px; height: 13px; }

/* === Criterion editor modal === */
.modal-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  font: 400 14px/1.45 var(--font-body);
  color: var(--foreground);
  background: var(--popover);
  resize: vertical;
  min-height: 90px;
  outline: none;
}
.modal-textarea::placeholder { color: var(--muted-foreground); }
.modal-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ps-primary-75);
}
#agent-crit-overlay .modal { width: 480px; }
#agent-crit-kind { align-self: flex-start; }
#agent-crit-weight { display: inline-flex; align-items: center; gap: 6px; }
/* Wider, more touch-friendly weight dots in the modal */
#agent-crit-weight .crit-dot { width: 18px; height: 18px; }

/* Threshold sub-section content (plain explanatory line for now) */
.threshold-row {
  font: 400 13px/1.45 var(--font-body);
  color: var(--foreground);
}
.threshold-row strong { font-weight: 600; }

/* === Agents landing index (cards grid) === */
/* Centered + max-width to match the Worksheets library (Agents + Agent
   Templates landing grids). */
.agent-index {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 24px 32px 24px;
  gap: 20px;
  overflow: hidden;
  min-height: 0;
  width: 100%; max-width: 1180px; margin-inline: auto;
}
.agent-index-head { flex-shrink: 0; }
.agent-index-title {
  font: 600 28px/1.1 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.agent-index-sub {
  font: 400 14px/1.5 var(--font-body);
  color: var(--muted-foreground);
  margin-top: 6px;
  max-width: 680px;
}
.agent-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 18px;
  padding-right: 4px;
  overflow-y: auto;
  align-content: start;
}
.agent-index-card {
  background: var(--card);
  border: 1.5px solid #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,20,23,0.04), 0 6px 18px rgba(20,20,23,0.04);
  padding: 18px 20px 20px;
  display: flex; flex-direction: column;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit; color: inherit;
  transition: box-shadow 0.15s, transform 0.15s;
}
.agent-index-card:hover {
  box-shadow: 0 1px 2px rgba(77,95,255,0.06), 0 8px 22px rgba(77,95,255,0.10);
  transform: translateY(-1px);
}
.aix-head { display: flex; align-items: center; justify-content: space-between; }
.aix-deliveries {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}
.aix-name {
  font: 600 18px/1.25 var(--font-body);
  letter-spacing: -0.01em;
  color: var(--foreground);
  margin-top: 2px;
}
/* Identity block: procedural agent avatar + name/subtitle. Avatar is
   top-aligned (flush with the title) rather than centered against the
   whole text block, so it doesn't float when the title wraps or a pill
   sits below. */
.aix-identity { display: flex; align-items: flex-start; gap: 12px; }
.aix-identity-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.aix-identity-text .aix-name { margin-top: 0; }
.aix-avatar {
  width: 46px; height: 46px; border-radius: 12px; overflow: hidden;
  flex-shrink: 0; border: 1.5px solid transparent;
}
.aix-avatar svg { width: 100%; height: 100%; display: block; }
.aix-identity-text .aix-status-sub { align-self: flex-start; margin-top: 3px; }
.aix-filters {
  font: 400 12.5px/1.4 var(--font-body);
  color: var(--muted-foreground);
}
.aix-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.aix-stat-label {
  font: 600 9.5px/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.aix-stat-value {
  font: 500 13px/1.3 var(--font-body);
  color: var(--foreground);
  margin-top: 4px;
}
.aix-stat-value.mono { font-family: var(--font-mono); }
.agent-index-new {
  background: transparent;
  border: 2px dashed var(--ps-primary-100);
  border-radius: 12px;
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  color: var(--ps-primary-700);
  font: inherit;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
}
.agent-index-new:hover {
  background: var(--ps-primary-60);
  border-color: var(--ps-primary-500);
}
.aix-new-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--ps-primary-60);
  display: flex; align-items: center; justify-content: center;
  color: var(--ps-primary-500);
  flex-shrink: 0;
}
.aix-new-icon i { width: 22px; height: 22px; }
.aix-new-text { display: flex; flex-direction: column; gap: 3px; }
.aix-new-text strong { font: 600 14.5px/1.2 var(--font-body); color: var(--ps-primary-800); }
.aix-new-text > span { font: 400 12px/1.3 var(--font-body); color: var(--ps-primary-700); }

/* === Inline filter editor (entered via "Edit filters" on the Filters card).
   Chips become removable (×); below the chips an "Add filter" button
   opens a popover with categorized fields, mirroring the Search field
   list. The whole editor lives inside the same .floating-widget — the
   card just grows taller. */
.sb-token-chip.editable { padding-right: 0; overflow: hidden; }
.sb-token-chip .chip-remove {
  width: 22px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0;
  color: var(--muted-foreground);
  border-left: 1px solid var(--hairline);
  cursor: pointer; padding: 0;
}
.sb-token-chip .chip-remove:hover { background: var(--muted); color: var(--destructive); }
.sb-token-chip .chip-remove i { width: 12px; height: 12px; }

.add-filter-row {
  position: relative;
  margin-top: 14px;
  padding: 0 2px;
}
.add-filter-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  font-size: 13px; font-weight: 500;
  background: var(--card);
  color: var(--primary);
  border: 1px dashed var(--ps-primary-100);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.add-filter-btn:hover { background: var(--ps-primary-60); }
.add-filter-btn i { width: 14px; height: 14px; }

.add-filter-popover {
  position: absolute;
  top: calc(100% + 6px); left: 0;
  min-width: 260px;
  background: var(--popover);
  border: 1px solid #fff; border-top-width: 1.5px;
  border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(20,20,23,0.12));
  padding: 6px;
  z-index: 100;
  max-height: 320px;
  overflow-y: auto;
}
.add-filter-popover[hidden] { display: none; }
.add-filter-popover .fl-section { padding: 10px 10px 4px; font-size: 10px; }
.add-filter-popover .fl-item {
  background: transparent; border: 0; width: 100%;
  font: inherit; text-align: left;
  padding: 7px 10px;
}
.add-filter-popover .fl-item .fl-name { font: 500 13px/1.3 var(--font-body); color: var(--foreground); }

/* "Editing" head bar on the Filters card — primary CTA + Cancel link */
.agent-filters-edit-actions {
  display: flex; align-items: center; gap: 8px;
}
.agent-filters-edit-actions .btn-secondary-cta {
  padding: 6px 14px;
  font-size: 13px;
}
.agent-filters-edit-actions .btn-secondary-cta .icon-frame {
  width: 18px; height: 18px;
}




/* --- React build guards: keep list-row labels on one line ------------- */
.inbox-row-title { white-space: nowrap; min-width: 0; }
.inbox-row-account { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.inbox-views-label { white-space: nowrap; }