/* The page that waits for ChatGPT or Claude and turns green once the grant arrives, and the install that saves an agent
   for every sub-account. It only loops while it asks; every change settles in a second. */

/* ---------- The status and the link on the head ---------- */
.cn-state { transition: background .5s var(--ease); }
.cn-state i { transition: background .5s var(--ease); }
.af-connect.is-connected .cn-state, .af-install.is-done .cn-state { background: color-mix(in srgb, var(--stage-ok) 18%, transparent); }
/* Back to the chat, or no longer asking: the status holds still. */
.af-connect.is-chat .cn-state i { background: var(--stage-flow); }
.af-connect.is-stale .cn-state i, .af-install.is-stopped .cn-state i { background: var(--stage-muted); }

.cn-link { display: inline-flex; align-items: center; flex: 0 1 380px; max-width: 100%; min-width: 0; }
.cn-system { display: grid; justify-items: center; flex: none; }
.cn-system .brandmark { width: 116px; height: 38px; padding: 0 11px; border: 0; border-radius: var(--r-l); }
.cn-system .cn-hub { width: 116px; height: 38px; border-radius: var(--r-l); font-size: var(--fs-xs); line-height: 1.15; text-align: center; }
.cn-beam { min-width: 28px; }
/* One dash per tile, so the dashes can drift while it waits without a seam. */
.cn-beam.off { background-size: 10px 100%; }
.cn-plate {
  position: relative; width: auto; min-width: 96px; height: 38px; padding: 0 10px; border-radius: var(--r-l); line-height: 1.15; text-align: center;
  transition: background .5s var(--ease), box-shadow .5s var(--ease);
}
.af-connect.is-connected .cn-plate { background: color-mix(in srgb, var(--stage-ok) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-ok) 44%, transparent); }
.af-connect.is-connected .check-badge { transform: scale(1); }
.cn-logos { display: inline-flex; align-items: center; gap: 6px; }
.cn-logo { width: 26px; height: 26px; padding: 3px; border-radius: 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-line); }
.cn-dots { display: inline-flex; gap: 4px; }
.cn-dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .35; }

/* ---------- Picking the assistant: two cells side by side, split by a line ---------- */
.af-picks {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding-left: max(0px, calc(var(--zl, var(--pad-x)) - 20px)); padding-right: max(0px, calc(var(--zr, var(--pad-x)) - 20px));
}
.af-pick { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 168px; padding: 20px; color: var(--ink); transition: background .15s ease; }
.af-pick + .af-pick { border-left: 1px solid var(--line); }
.af-pick::before { content: ""; position: absolute; inset: -1px 0 auto; height: 2px; background: transparent; transition: background .15s ease; }
.af-pick:hover { background: var(--panel-2); }
.af-pick.is-picked { background: color-mix(in srgb, var(--brand-text) 7%, var(--panel)); }
.af-pick.is-picked::before { background: var(--brand); }
.af-pick b { font-size: var(--fs-m); font-weight: 600; }
.af-pick-desc { max-width: 44ch; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-4); }
.af-pick-go { position: absolute; top: 20px; right: 20px; color: var(--ink-4); }
.af-pick-go svg { width: 16px; height: 16px; }
.af-pick-logo { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-line); color: var(--brand-text); }
.af-pick-logo img { width: 28px; height: 28px; }
.af-pick-logo svg { width: 20px; height: 20px; }
.af-pick-wait { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 10px; font-size: var(--fs-s); font-weight: 500; color: var(--brand-text); }

/* ---------- A question or an idea to paste: the words in full, a Copy button beside them ---------- */
.af-questions, .af-ideas { --rl-cols: minmax(0, 1fr) 96px; }
.af-quote { min-width: 0; margin: 0; font-size: var(--fs-m); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; text-wrap: pretty; }
.af-one { border-bottom: 1px solid var(--line); }
.af-one > .zone { border-bottom: 0; }
/* Buttons that follow a list, on the same inline padding as its rows. */
.af-foot-do { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; padding-bottom: 20px; padding-left: var(--zl, var(--pad-x)); padding-right: var(--zr, var(--pad-x)); }
.af-switch-form { justify-self: end; }

/* ---------- The install: a progress line on the head, one row per sub-account below ---------- */
.af-run { display: grid; flex-basis: 100%; gap: 10px; max-width: 520px; margin-top: 8px; }
.cn-install-note { margin: 0; font-size: var(--fs-s); color: var(--stage-muted); font-variant-numeric: tabular-nums; white-space: pre-line; }
.af-install.is-stopped .cn-install-note { color: var(--stage-ink); }
/* A page the claim started sets itself up, so its button only shows once that start was skipped or stopped. */
html.js .app-shell:has(.af-install.is-auto) [data-install-go], html.js .app-shell:has(.af-install.is-running) [data-install-go] { display: none; }
.cn-progress { position: relative; height: 4px; overflow: hidden; border-radius: var(--r-full); background: color-mix(in srgb, var(--stage-flow) 22%, transparent); }
.cn-progress > span {
  position: absolute; inset: 0 auto 0 0; width: var(--done, 0%); border-radius: inherit; background: var(--stage-flow);
  transition: width .5s var(--ease), background .4s var(--ease);
}
.af-install.is-done .cn-progress > span { background: var(--stage-ok); }
/* Still reading claims no progress: a calm full track, which slides while motion is welcome. */
.cn-progress.is-reading > span { width: 100%; opacity: .4; }

/* What every agent of the install gets, before anything is saved. */
.cn-gets-list { display: grid; gap: 12px; margin: 0; }
.cn-gets-list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: baseline; gap: 12px; }
.cn-gets-list dt { font-size: var(--fs-2xs); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink-4); }
.cn-gets-list dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: var(--fs-s); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .af-connect.is-asking:not(.is-connected) .cn-state i, .af-install.is-running .cn-state i { animation: cn-pulse 1.8s ease-out infinite; }
  .af-connect.is-asking .cn-beam.off { animation: cn-dash 1s linear infinite; }
  .cn-dots i { animation: cn-dot 1.2s ease-in-out infinite; }
  .cn-dots i:nth-child(2) { animation-delay: .15s; }
  .cn-dots i:nth-child(3) { animation-delay: .3s; }
  .af-connect.just-connected .cn-plate { animation: cn-ring 1s var(--ease) .1s 1; }
  .af-connect.just-connected [data-when="next"], .af-connect.just-connected [data-when="connected"] { animation: cn-rise .5s var(--ease) .12s backwards; }
  .cn-progress.is-reading > span { width: 34%; opacity: 1; animation: cn-slide 1.3s var(--ease) infinite; }
}

@keyframes cn-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes cn-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stage-flow) 60%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
@keyframes cn-dash { to { background-position: 10px 0; } }
@keyframes cn-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes cn-ring {
  from { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-ok) 44%, transparent), 0 0 0 0 color-mix(in srgb, var(--stage-ok) 50%, transparent); }
  to { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stage-ok) 44%, transparent), 0 0 0 16px transparent; }
}
@keyframes cn-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---------- Widths ---------- */
@container page (max-width: 640px) {
  .af-picks { grid-template-columns: minmax(0, 1fr); }
  .af-pick { min-height: 0; }
  .af-pick + .af-pick { border-left: 0; border-top: 1px solid var(--line); }
  .cn-link { flex-basis: 100%; }
  .cn-system .brandmark, .cn-system .cn-hub { width: 96px; height: 34px; }
  .cn-plate { height: 34px; min-width: 80px; }
  .cn-gets-list > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .af-foot-do .btn { flex: 1 1 auto; }
}