@layer components {
  .person-picker { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .person-picker [hidden] { display: none; }
  .person-picker-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .person-picker-tokens:empty { display: none; }
  .person-picker-token {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 2px 4px 2px 9px;
    border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  }
  .person-picker-token-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .person-picker-remove {
    display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0;
    border: 0; border-radius: 999px; background: transparent; color: var(--muted-foreground); cursor: pointer;
  }
  .person-picker-remove:is(:hover, :active) { background: var(--accent); color: var(--foreground); }
  .person-picker-remove:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 1px; }
  /* Someone outside the channel, who joins it once the block is validated. */
  .person-joining {
    flex: none; padding: 0 7px; border: 1px solid var(--jx-accent-line); border-radius: 999px;
    color: var(--jx-accent); background: var(--jx-accent-soft); white-space: nowrap;
  }

  /* In the flow of the block, not a floating popover: the block grows while the list is open. */
  .person-picker-list {
    display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; padding: 5px;
    border: 1px solid var(--border); border-radius: 9px; background: var(--popover); color: var(--popover-foreground);
  }
  .person-picker-results { display: flex; flex-direction: column; gap: 4px; }
  .person-picker-query { margin: 0; padding: 4px 8px 0; font-weight: 500; }
  .person-picker-group { display: flex; flex-direction: column; gap: 1px; }
  .person-picker-group-label { padding: 5px 8px 4px; color: var(--muted-foreground); }
  .person-picker-empty { margin: 0; padding: 4px 8px 6px; color: var(--muted-foreground); }
  .person-option { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; cursor: pointer; }
  .person-option:is(:hover, :active) { background: var(--accent); }
  .person-option[aria-selected="true"] { background: var(--accent); box-shadow: inset 2px 0 0 var(--jx-accent); }
  .person-option-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
  .person-option-name, .person-option-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .person-option-title { color: var(--muted-foreground); }
  .person-picker-note { margin: 0; padding: 6px 8px 4px; border-top: 1px solid var(--border); color: var(--muted-foreground); }

  /* Under 1100 px the search lives in a sheet (Ui::SheetComponent): a button opens it, the tokens stay in the block.
     Its rows are whole checkboxes, 52 px high. */
  .person-picker-open { display: none; }
  .person-picker-sheet-search { margin-bottom: 8px; }
  .person-picker-sheet-group { display: flex; flex-direction: column; min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
  .person-picker-sheet-group > legend { padding: 8px 0 4px; }
  .person-row {
    display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 4px 2px;
    border-bottom: 1px solid var(--border); cursor: pointer;
  }
  .person-row:active { background: var(--accent); }
  .person-row-check { flex: none; width: 20px; height: 20px; margin: 0 0 0 auto; accent-color: var(--primary); }
  /* The agent's proposal, marked as in the mock-up: a pill after the name, never clipped with it. */
  .person-row-line { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .person-row-proposed {
    flex: none; padding: 0 6px; border-radius: 999px; background: var(--jx-accent-soft); color: var(--jx-accent);
    font-size: 13px; font-weight: 600; line-height: 1.6;
  }
  .person-row-proposed[hidden] { display: none; }
  /* An agent's badge in a row: the members panel's, sized like the people's avatars. */
  .person-row .member-agent-avatar { width: 22px; height: 22px; border-radius: 6px; }
  @media (max-width: 1099px) {
    .person-picker-open { display: inline-flex; align-self: flex-start; }
    .person-picker-input, .person-picker-list { display: none; }
  }

  /* Sheet only (adding members): at every width the button opens the sheet; the combobox is never shown. */
  .person-picker--sheet .person-picker-open { display: inline-flex; align-self: flex-start; }
  .person-picker--sheet :is(.person-picker-tokens, .person-picker-input, .person-picker-list) { display: none; }
}