/* The agent configuration screens, laid out: the agents list (agents/index, its
   row and detail sheet), the agent builder (agents/_builder, _tool_boxes,
   _prompt_envelope, _targeting) shared by custom agents, built-in overrides
   and templates, and the library instance editor (agent_instances/edit).

   Every piece is the kit's — a data table, badges, a Progress, a menu, a
   Sheet of Cards, Collapsibles — so this file only places them. */
@layer ui {
  /* --- the list ---------------------------------------------------------- */

  /* The agents table: a row carries a few lines, so cells sit at the top and
     the outer columns keep off the card's edge. */
  .ui-table.agents-table {
    :is(th, td):first-child { padding-inline-start: 1rem; }
    :is(th, td):last-child { padding-inline-end: 1rem; }
  }

  .agent-row > td {
    padding-block: 0.75rem;
    vertical-align: top;
  }

  .agent-row__identity {
    min-inline-size: 16rem;
  }

  /* The name opens the detail sheet: a button set as the title link. */
  .agent-row__name {
    text-align: start;
  }

  /* What it runs on, when, and why it's in its state: one wrapping line. */
  .agent-row__meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.125rem 0.75rem;
  }

  /* An acceptance rate's Progress keeps to a column's width. */
  .acceptance {
    max-inline-size: 8rem;
  }

  /* A row's on/off: the switch and its word, side by side. */
  .agent-switch {
    align-items: center;
    display: inline-flex;
    gap: 0.375rem;
  }

  /* --- the detail sheet -------------------------------------------------- */

  /* Wider than the kit's sheet, for the scorecard. */
  .ui-sheet.agent-sheet {
    inline-size: min(32rem, 100vw);
    max-inline-size: 100vw;
  }

  /* An upgrade alert's words and its button (the sheet, the instance editor). */
  .agent-upgrade {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    justify-content: space-between;
  }

  /* --- the builder ------------------------------------------------------- */

  /* "Reports, never suggests": said only while the propose box is empty. */
  .ui-alert.agent-builder__report-only {
    display: none;

    .agent-builder:not(:has(.tool-box--propose input:checked)) & {
      display: grid;
    }
  }

  /* A cadence's number, beside its unit. */
  .agent-cadence__value {
    flex-shrink: 0;
    inline-size: 5rem;
  }

  /* A tool box: its title's icon beside its words; each platform a
     Collapsible whose caret turns while it's shut; its tools in columns. */
  .tool-box__title {
    align-items: center;
    display: flex;
    gap: 0.5rem;
  }

  .tool-box__summary {
    inline-size: fit-content;
  }

  .tool-box__section:not([open]) .tool-box__caret {
    rotate: -90deg;
  }

  .tool-box__tools {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    margin: 0;
    padding: 0.5rem 0.75rem 0.75rem;
  }

  /* The empty propose box's line, while nothing in it is chosen. */
  .tool-box__none {
    display: none;

    .tool-box:not(:has(input:checked)) & {
      display: block;
    }
  }

  /* The prompt around the instructions: the line saying whose prompt it is,
     the fixed text above, the field, the fixed text below and the context
     under them, close together so they read as one document. */
  .prompt-envelope {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;

    > .ui-textarea {
      inline-size: 100%;
    }
  }

  .prompt-envelope__hint {
    align-items: center;
    display: flex;
    gap: 0.25rem;
  }

  .prompt-envelope__frame {
    margin: 0;
  }

  .prompt-envelope__summary {
    cursor: pointer;
    list-style: none;
    padding-block: 0.25rem;

    &::-webkit-details-marker { display: none; }
  }

  .prompt-envelope__context:not([open]) .prompt-envelope__caret {
    rotate: -90deg;
  }

  /* Campaign boxes in a short scrolling list, so what's narrowed shows. */
  .campaign-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    max-block-size: 12rem;
    overflow-y: auto;
    padding: 0;
  }

  /* --- the instance editor's sidebar ------------------------------------- */

  /* The template's method, rendered: long, so it scrolls inside its box. */
  .agent-box__prompt {
    max-block-size: 28rem;
    overflow: auto;
  }
}