/* The AI agent setups: a new AI agent in one system, and the sub-accounts of the AI Agent app (their list, picking them,
   the settings they share or get of their own, and the install that saves an agent for each). Every class starts af-. */

/* ---------- Small pieces ---------- */
.af-quiet { font-size: var(--fs-xs); color: var(--ink-4); }
.af-pre { white-space: pre-line; }
.af-group .rl-name small, .af-copy-row .rl-name small { font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-4); }
.af-copy-row .rl-name small { white-space: normal; }
.af-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.af-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
/* The buttons of an action bar wrap and say less on a phone, so two ways to save always fit. */
.af-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.af-short { display: none; }

/* The system to pick, and the line that asks for one that is not listed. */
.af-pickline .syspick { max-width: 440px; }
.af-request { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }
.af-request svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.af-request a { font-weight: 600; }

/* A typed key's scopes, and the line that says keys are kept safe. */
.af-scopes { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.af-scopes-t b { display: flex; align-items: center; gap: 6px; font-size: var(--fs-s); color: var(--ink); }
.af-scopes-t span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-4); }
.af-scope-list { grid-column: 1 / -1; }
.af-scope-list summary { width: max-content; cursor: pointer; font-size: var(--fs-xs); font-weight: 600; color: var(--brand-text); }
.af-scope-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.af-lock { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: var(--fs-xs); color: var(--ink-4); }
.af-lock svg { width: 14px; height: 14px; flex: none; }
.af-soon { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--brand-line, var(--line)); border-radius: var(--r-m); background: var(--brand-soft); font-size: var(--fs-s); line-height: 1.5; color: var(--ink); }
.af-soon svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--brand-text); }

/* What switching on costs, in plain paragraphs. */
.af-terms { max-width: 760px; font-size: var(--fs-s); line-height: 1.55; color: var(--ink-2); }
.af-terms p { margin: 0; white-space: pre-line; }
.af-terms p + p { margin-top: 8px; }
.af-terms.warn { color: var(--warn); }

/* ---------- Lists of sub-accounts: the Sub-accounts page, picking them, and the install ---------- */
.af-subs { --rl-cols: minmax(0, 1fr) 190px 210px 260px 100px; --rl-cols-md: minmax(0, 1fr) 190px 100px; }
.af-subs.has-switch { --rl-cols: minmax(0, 1fr) 190px 210px 220px 196px; --rl-cols-md: minmax(0, 1fr) 190px 196px; }
.af-subs .rl-type .rl-pick { margin-right: 2px; }
.af-picklist { --rl-cols: 22px minmax(0, 1fr) 210px 210px; --rl-cols-md: 22px minmax(0, 1fr) 210px; }
.af-install-list { --rl-cols: minmax(0, 1fr) 210px 210px; --rl-cols-md: minmax(0, 1fr) 210px; }
.af-copy { --rl-cols: 22px minmax(0, 1fr) 150px; --zl: 0px; --zr: 0px; }

/* ---------- How to set them up ---------- */
.af-how { --opts: 3; }

/* ---------- The editor: the sub-accounts on the left, what the one picked may do on the right ---------- */
.af-editor.halves { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: start; }
.af-edit > .zone:last-child { border-bottom: 0; }
.af-editor.single .af-edit > .zone:last-child { border-bottom: 1px solid var(--line); }
.af-locs { --rl-cols: minmax(0, 1fr) 48px 118px; }
button.af-loc {
  width: 100%; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  min-height: 56px;
}
button.af-loc:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.af-loc.on { background: color-mix(in srgb, var(--brand-text) 8%, var(--panel)); box-shadow: inset 3px 0 0 var(--brand); }
.af-loc .rt-ic { width: 30px; height: 30px; }
.af-loc-note { font-size: var(--fs-xs); color: var(--ink-4); }
.af-loc.own .af-loc-note { color: var(--brand-text); font-weight: 600; }
.af-loc-pkg {
  justify-self: end; padding: 2px 9px; border-radius: var(--r-full); background: color-mix(in srgb, var(--brand-text) 12%, var(--panel));
  color: var(--brand-text); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap;
}
.af-loc-pkg.is-unset { background: var(--panel-3); color: var(--ink-4); }
.af-own { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-s); color: var(--ink-2); white-space: nowrap; }
.af-locked { padding-bottom: 4px; }

/* What the agents need, what is free, kept and still to buy. */
.af-places { --rl-cols: minmax(0, 1fr) 96px 96px 96px; }
.af-places.keeps { --rl-cols: minmax(0, 1fr) 96px 96px 96px 96px; }
.af-buys { color: var(--warn); font-weight: 700; }

@container page (max-width: 1180px) {
  .af-editor.halves { grid-template-columns: minmax(0, 1fr); }
  .af-edit > .zone:last-child { border-bottom: 0; }
}

@container page (max-width: 640px) {
  .af-places { --rl-cols: minmax(0, 1fr) repeat(3, 44px); }
  .af-places.keeps { --rl-cols: minmax(0, 1fr) repeat(4, 40px); }
  .af-scopes { grid-template-columns: minmax(0, 1fr); }
  .af-own { white-space: normal; }
  .af-long { display: none; }
  .af-short { display: inline; }
}