/* AI Access: the setup wizard's level picker and the assistant node; the rest is the integration wizard's. */
.rtwrap .rt-level { flex: none; align-self: center; }
.sumflow .sf-ai { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: var(--r-s); background: var(--brand-soft); color: var(--brand-text); }
.sumflow .sf-ai svg { width: 15px; height: 15px; }

@media (max-width: 640px) {
  .rtwrap .rt-level { flex-basis: 100%; }
  .rtwrap .rt-level label { flex: 1; justify-content: center; }
}

/* Several places in one go, under the agents and on the billing card. */
.ai-bulk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.ai-bulk-text { flex: 1 0 100%; min-width: 0; }
.ai-bulk-text b { display: block; font-weight: 600; }
.ai-bulk-text span { display: block; overflow-wrap: anywhere; font-size: var(--fs-s); color: var(--ink-3); }
.ai-bulk-field { display: grid; gap: 4px; flex: 0 1 360px; min-width: 0; font-size: var(--fs-xs); color: var(--ink-4); }
.ai-bulk-field.qty { flex: 0 0 110px; }
.ai-bulk > .btn { flex: none; white-space: nowrap; }
@media (max-width: 560px) {
  .ai-bulk-field:not(.qty) { flex-basis: 100%; }
}
/* Inside the waiting card the buy form is its foot, not a block of its own. */
.ai-waiting .ai-bulk { margin-top: 0; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; background: transparent; }

/* Questions to try an agent with, in the dialog on its page: the reads in blue, what changes a record in teal. */
.tryq-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tryq {
  --tq: var(--brand-text);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2);
}
.tryq.changes { --tq: var(--accent-teal); }
.tryq-n {
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-s);
  background: color-mix(in srgb, var(--tq) 16%, transparent); color: var(--tq); font-size: var(--fs-xs); font-weight: 700;
}
.tryq-t p { margin: 0; font-size: var(--fs-s); line-height: 1.5; color: var(--ink); }
.tryq-tag { display: inline-block; margin-top: 4px; font-size: var(--fs-2xs); font-weight: 600; color: var(--tq); }
@media (max-width: 560px) { .tryq { grid-template-columns: minmax(0, 1fr); } .tryq-n { display: none; } }

/* A typed key reaches only what its scopes allow: the ones the agent starts with, and per group of actions. */
.ai-scopes { position: relative; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--panel-2); }
.ai-scopes-copy { position: absolute; top: 8px; right: 10px; }
.ai-scopes summary { display: flex; align-items: center; gap: 8px; min-height: 30px; padding-right: 130px; list-style: none; cursor: pointer; }
.ai-scopes summary::-webkit-details-marker { display: none; }
.ai-scopes summary .chev { display: inline-flex; flex: none; color: var(--brand-text); transition: transform .2s ease; }
.ai-scopes summary .chev svg { width: 16px; height: 16px; }
.ai-scopes details[open] summary .chev { transform: rotate(180deg); }
.ai-scopes p { color: var(--ink-2); }
.ai-scope-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tile-do .why.ai-group-scopes { margin-top: 4px; color: var(--ink-3); }

/* 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); }
.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; }
#agent-try > .popup.detail { max-height: min(calc(100dvh - 120px), 760px); }