/* AI Agents: the list of agents, one agent's page with its tabs, an automation, the proposed changes and the questions
   to try. Every class of these pages starts with ag-. The setup wizard's level picker and scopes stay at the end. */

/* ---------- A page head icon in the tone of what the page is about ---------- */
.phead-ic.ag-ic-ok { --rtc: var(--ok); }
.phead-ic.ag-ic-warn { --rtc: var(--warn); }
.phead-ic.ag-ic-teal { --rtc: var(--accent-teal); }

/* ---------- The list of AI agents ---------- */
.ag-list { --rl-cols: 128px minmax(0, 1fr) 204px 176px 104px 120px 40px; --rl-cols-md: 120px minmax(0, 1fr) 204px 40px; }
.ag-saved { --rl-cols: 128px minmax(0, 1fr) 170px 110px 168px; --rl-cols-md: 120px minmax(0, 1fr) 168px; }
.ag-install .zone-head > .crm-plate { flex: none; align-self: center; }

/* ---------- One agent: overview ---------- */
.ag-access { --rl-cols: minmax(0, 1fr) 64px 150px; }
.ag-level i { width: 22px; }
.ag-changes { --rl-cols: minmax(0, 1fr) 176px 168px; }
.ag-ovrules { --rl-cols: minmax(0, 1fr) 176px; }
.ag-connected { --rl-cols: 128px minmax(0, 1fr) 150px 176px; --rl-btn: 176px; }
/* Side by side lists end on the same line: the foot sits at the bottom of the taller half. */
.ag-half { display: flex; flex-direction: column; }
.ag-half > .rl-foot { margin-top: auto; }
.ag-changes .rl-name b, .ag-did .rl-name b { font-size: var(--fs-s); font-weight: 500; }
.ag-assistant {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; width: 110px; height: 26px;
  border-radius: 7px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--paper-ink); font-size: 11.5px; font-weight: 600;
}
.ag-assistant img { width: 14px; height: 14px; border-radius: 4px; }

/* ---------- One agent: automations and settings ---------- */
.ag-rules { --rl-cols: minmax(0, 1fr) minmax(0, 1.3fr) 196px 168px 120px 96px; --rl-cols-md: minmax(0, 1fr) 196px 96px; }
.ag-sentence { min-width: 0; font-size: var(--fs-s); line-height: 1.45; color: var(--ink-3); overflow-wrap: anywhere; }
.ag-ideas { --rl-cols: minmax(0, 1fr) 96px; }
.ag-idea { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ag-quote { min-width: 0; margin: 0; font-size: var(--fs-m); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }

/* ---------- Questions to try ---------- */
.ag-try { --rl-cols: minmax(0, 1fr) 196px 96px; --rl-cols-md: minmax(0, 1fr) 96px; }
.ag-try .rl-type { align-items: flex-start; }
.chatq { --rl-cols: minmax(0, 1fr) auto; --rl-cols-md: minmax(0, 1fr) auto; }
.chatq .rl-row { align-items: center; }
.chatq .chatq-switch { margin: 0 0 6px; }

/* ---------- Waiting agents picked in the list and switched on together ---------- */
.ag-list.has-switch { --rl-cols: 152px minmax(0, 1fr) 204px 176px 104px 120px 196px; --rl-cols-md: 144px minmax(0, 1fr) 204px 196px; }
.rl-pick { display: inline-flex; align-items: center; flex: none; }
.rl-pick input { width: 16px; height: 16px; margin: 0; accent-color: var(--ok); cursor: pointer; }

/* ---------- An automation ---------- */
.fig-big.ag-fig-word { font-family: var(--sans); font-size: 24px; letter-spacing: var(--tr-tight); }
.ag-rule-sentence { margin: 0; font-size: var(--fs-m); color: var(--ink); }
.ag-examples { --rl-cols: minmax(0, 1fr); }
.ag-did { --rl-cols: minmax(0, 1fr) 176px 168px; }

/* ---------- Proposed changes ---------- */
.ag-fields { table-layout: fixed; }
.ag-fields th:first-child { width: 26%; }
.ag-fields td { overflow-wrap: anywhere; }

/* An automation's rule as rows, on its page and in the Approve confirm: what starts it, then each step, with the icon of
   what it adds in the colour of the record type it works on (plain for a condition or a step on no record). */
.rule-rows { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2); }
.rule-row { display: flex; gap: 14px; padding: 12px 16px; }
.rule-row + .rule-row { border-top: 1px solid var(--line); }
.zone .rule-row { padding-left: var(--zl, var(--pad-x)); padding-right: var(--zr, var(--pad-x)); }
.popup .rule-rows { margin-top: 0; }
.rule-k { flex: none; width: 44px; padding-top: 5px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }
.rule-list { display: grid; flex: 1; gap: 8px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.rule-list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-m); font-weight: 500; line-height: 1.45; color: var(--ink); }
.rule-list li > span:last-child { min-width: 0; padding-top: 2px; overflow-wrap: anywhere; }
.rule-ic {
  display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--r-s);
  color: var(--rtc, var(--ink-3)); background: color-mix(in srgb, var(--rtc, var(--ink-3)) 12%, transparent);
}
.rule-ic svg { width: 14px; height: 14px; }

/* How far an agent may go with a record type, as filled bars. */
.tile-level { display: inline-flex; gap: 3px; flex: none; }
.tile-level i { width: 18px; height: 6px; border-radius: 2px; background: var(--panel-3); }
.tile-level i.on { background: var(--rtc, var(--brand)); }

@container page (max-width: 640px) {
  .ag-install .zone-head { flex-wrap: wrap; }
  .ag-install .zone-head > .right { flex-basis: 100%; margin-left: 0; }
  .ag-try .rl-type { align-items: center; }
}