/* A conversation with an assistant, drawn finished by the server and played by js/outer/agent-chat.js
   (fragments/agent-chat.html): the question typed and sent, BillGrid's steps one by one, the answer word by word.
   Turns that haven't happened yet keep their place, so nothing below them moves while it plays. */

.agent-log { display: flex; flex-direction: column; gap: 14px; }

.agent-you { align-self: flex-end; max-width: 86%; margin: 0; padding: 9px 14px; border-radius: var(--r-xl) var(--r-xl) var(--r-xs) var(--r-xl); background: var(--sand-100); color: var(--ink); font-size: var(--fs-body); line-height: 1.5; }

.agent-it { align-self: flex-start; max-width: 92%; font-size: var(--fs-body); line-height: 1.55; color: var(--text); }
.agent-it p { margin: 0 0 8px; }
.agent-it p:last-child { margin-bottom: 0; }
.agent-it ul { margin: 0 0 8px; padding-left: 18px; }
.agent-it ul:last-child { margin-bottom: 0; }
.agent-it li + li { margin-top: 3px; }
/* An answer that is the assistant's own, captured (a real run): the whole width, arriving top down as it streamed. */
.agent-it--shot { align-self: stretch; max-width: none; }
.agent-shot { display: block; width: 100%; height: auto; }
.agent-it--shot.is-streaming .agent-shot { animation: agent-stream var(--agent-stream-ms, 1600ms) cubic-bezier(.3, .1, .3, 1) both; }
/* An answer from a real run set in type as ChatGPT sets it (--gpt-*): plain text on white, its cards and tables in
   hairlines; it arrives word by word, an .agent-block (a card, a table) whole. */
.agent-it--gpt { align-self: stretch; max-width: none; font-family: var(--gpt-font); font-size: 14.5px; line-height: 1.62; color: var(--gpt-ink); }
.agent-it--gpt b { font-weight: 600; }
.agent-it--gpt h4 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.35; color: var(--gpt-ink); }
.agent-it--gpt h5 { margin: 16px 0 6px; font-family: inherit; font-size: 15.5px; font-weight: 600; color: var(--gpt-ink); }
.agent-it--gpt p { margin: 0 0 10px; }
.agent-it--gpt .gpt-meta { margin-top: 2px; font-size: 12.5px; color: var(--gpt-muted); }
.gpt-note { font-size: 13px; color: var(--gpt-muted); }
.gpt-badge { display: inline-flex; align-items: center; gap: var(--icon-gap-xs); padding: 2px 9px; border-radius: var(--r-pill); background: var(--gpt-good-bg); color: var(--gpt-good); font-size: 12px; font-weight: 600; }
.gpt-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.gpt-stats > div { display: grid; gap: 2px; padding: 11px 13px; border: 1px solid var(--gpt-line); border-radius: 12px; }
.gpt-stats small { font-size: 12.5px; color: var(--gpt-soft); }
.gpt-stats b { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.gpt-stats em { display: inline-flex; align-items: center; gap: var(--icon-gap-xs); font-style: normal; font-size: 11.5px; color: var(--gpt-muted); }
.gpt-stats em.is-good { color: var(--gpt-good); }
.gpt-todo { margin: 0; padding-left: 20px; }
.gpt-todo li { padding: 6px 0 10px; }
.gpt-todo li + li { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--gpt-hairline); }
.gpt-table { width: 100%; margin: 2px 0 12px; border-collapse: collapse; font-size: 13.5px; }
.gpt-table th { padding: 6px 0; border-bottom: 1px solid var(--gpt-rule); text-align: left; font-weight: 600; }
.gpt-table td { padding: 6px 0; border-bottom: 1px solid var(--gpt-hairline); }
.gpt-table :is(th, td):first-child { width: 42%; }
.gpt-card { display: grid; gap: 4px; margin: 2px 0 12px; padding: 14px 16px; border: 1px solid var(--gpt-line); border-radius: 14px; font-size: 13.5px; }
.gpt-card > small { font-size: 11.5px; letter-spacing: .02em; color: var(--gpt-muted); }
.gpt-card > span { color: var(--gpt-soft); }
.gpt-big { font-size: 24px; font-weight: 500; letter-spacing: -.01em; }
.gpt-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.gpt-row--head b { font-size: 17px; }
.gpt-row--foot { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--gpt-hairline); font-size: 12.5px; color: var(--gpt-muted); }
.gpt-pill { padding: 1px 8px; border-radius: var(--r-pill); background: var(--gpt-fill); font-size: 11.5px; font-weight: 600; color: var(--gpt-strong); }
.gpt-card dl { display: grid; margin: 8px 0 0; padding-top: 6px; border-top: 1px solid var(--gpt-hairline); }
.gpt-card dl > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--gpt-hairline); }
.gpt-card dl > div.is-total { padding-top: 10px; border-bottom: 0; font-weight: 600; }
.gpt-card dl > div.is-total dd { font-size: 20px; font-weight: 500; }
.gpt-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.gpt-button { display: inline-flex; justify-content: center; align-items: center; gap: var(--icon-gap-sm); margin-top: 10px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--gpt-ink); color: var(--bg-panel); font-size: 13px; font-weight: 600; }
.gpt-button--wide { display: flex; margin-top: 2px; }
.agent-it--gpt .gpt-mail p { margin: 0 0 4px; }
.gpt-mail__body { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--gpt-hairline); }
.agent-it--gpt .gpt-mail__body p { margin-bottom: 8px; }

/* BillGrid at work: a head that says so, then each step, a spinner until it lands and a check after. */
.agent-work { align-self: flex-start; display: grid; gap: 6px; }
.agent-work__head { display: flex; align-items: center; gap: var(--icon-gap-md); margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.agent-work__head > .agent-mark { flex: none; display: block; width: 18px; height: 18px; border-radius: 5px; }
.agent-work__label { display: grid; }
.agent-work__label > span { grid-area: 1 / 1; }
.agent-work__now { visibility: hidden; }
.agent-work__steps { display: grid; margin: 0 0 0 8px; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--text-muted); }
.agent-work__steps li { display: flex; align-items: center; gap: var(--icon-gap-sm); padding: 3px 0 3px 15px; border-left: 1px solid var(--border); }
.agent-work__state { flex: none; display: grid; width: var(--icon-size-xs); height: var(--icon-size-xs); color: var(--paid-fg); }
.agent-work__state .bg-icon { grid-area: 1 / 1; }
.agent-work__spin { visibility: hidden; color: var(--caption); }

.agent-composer { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 6px 6px 16px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); box-shadow: var(--shadow-raise); }
.agent-composer__field { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-body); color: var(--caption); }
.agent-composer__send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sand-100); color: var(--caption); transition: background-color .2s, color .2s, transform .15s; }
.agent-composer__send .bg-icon { rotate: -90deg; }
.agent-composer.is-typing .agent-composer__field { color: var(--ink); }
.agent-composer.is-typing .agent-composer__field::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--ink); animation: agent-caret 1s steps(1) infinite; }
.agent-composer.is-typing .agent-composer__send { background: var(--ink); color: var(--bg-panel); }
.agent-composer.is-sending .agent-composer__send { transform: scale(.88); }

/* Playing: what hasn't happened yet keeps its place, unseen. */
.is-playing [data-agent-turn] { transition: opacity .32s ease, transform .32s ease; }
.is-playing [data-agent-turn].is-ahead { opacity: 0; transform: translateY(8px); }
.is-playing .agent-work__steps li { transition: opacity .25s ease; }
.is-playing .agent-work__steps li.is-ahead { opacity: 0; }
.agent-work.is-working .agent-work__now { visibility: visible; background: linear-gradient(90deg, var(--text-muted) 0 35%, var(--ink) 50%, var(--text-muted) 65% 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: agent-shimmer 1.6s linear infinite; }
.agent-work.is-working .agent-work__done { visibility: hidden; }
.agent-work__steps li.is-running .agent-work__spin { visibility: visible; animation: bg-spin .8s linear infinite; }
.agent-work__steps li.is-running .agent-work__tick { visibility: hidden; }
.agent-work__steps li.is-running { color: var(--ink); }
.agent-it.is-streaming .agent-w { opacity: 0; }
.agent-it.is-streaming .agent-w.is-on { opacity: 1; transition: opacity .18s ease; }
.agent-it.is-streaming li:not(:has(.agent-w.is-on))::marker { color: transparent; }

/* Something on the record that a step changes: [data-agent-after] arrives when that turn lands, [data-agent-before]
   leaves; drawn finished, only the after is there. .agent-swap stacks the two so the line never moves. */
.agent-swap { display: inline-grid; justify-items: end; }
.agent-swap > * { grid-area: 1 / 1; }
[data-agent-before] { visibility: hidden; }
.is-playing [data-agent-before]:not(.is-past) { visibility: visible; }
.is-playing [data-agent-after]:not(.is-here) { visibility: hidden; }
.is-playing [data-agent-after], .is-playing [data-agent-flash] { transition: background-color .6s ease; }
.is-fresh { animation: agent-fresh 1.8s ease-out; }

/* Several conversations under suggestion chips, as on the AI assistants page. */
.agent-demo { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-panel); box-shadow: var(--shadow-raise); }
.agent-demo__chrome { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-xs); color: var(--caption); }
.agent-demo__chrome b { color: var(--text-muted); font-weight: 600; }
.agent-demo__live { display: inline-flex; align-items: center; gap: var(--icon-gap-sm); }
.agent-demo__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--paid-fg); }
.agent-demo__stages { display: grid; padding: 20px 18px 8px; }
.agent-demo__stages > [role="tabpanel"] { grid-area: 1 / 1; }
.agent-demo__stages > [role="tabpanel"][hidden] { display: flex; visibility: hidden; }
.agent-demo__foot { display: grid; gap: 12px; padding: 10px 14px 14px; }
.agent-demo__picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.agent-pick { display: inline-flex; align-items: center; gap: var(--icon-gap-md); max-width: 100%; padding: 6px 8px 6px 7px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--bg-panel); color: var(--text); font: inherit; font-size: var(--fs-sm); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.agent-pick > .agent-mark { flex: none; display: block; width: 16px; height: 16px; border-radius: 4px; }
.agent-pick b { font-weight: 600; color: var(--site-accent); }
.agent-pick__go { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sand-100); color: var(--text-muted); }
.agent-pick:hover { border-color: var(--sand-300); background: var(--paper); }
.agent-pick[aria-selected="true"] { border-color: var(--site-accent); background: var(--site-pick-bg); }
.agent-pick:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

/* A record an answer links to (the draft it made). */
.agent-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--paper); font-size: var(--fs-sm); }
.agent-card__chip { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; padding: 2px 9px; border-radius: var(--r-pill); background: var(--draft-bg); color: var(--draft-fg); font-size: var(--fs-xs); font-weight: 600; }
.agent-card__title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 18px; color: var(--ink); }
.agent-card__sum { align-self: end; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.agent-card__sub { color: var(--text-muted); }
.agent-card__open { display: inline-flex; align-items: center; gap: var(--icon-gap-xs); font-weight: 600; color: var(--site-accent); }

@keyframes agent-shimmer { to { background-position: -150% 0; } }
@keyframes agent-caret { 50% { opacity: 0; } }
@keyframes agent-stream { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes agent-fresh { from { background-color: var(--site-pick-bg); box-shadow: 0 0 0 6px var(--site-pick-bg); } to { background-color: transparent; box-shadow: 0 0 0 6px transparent; } }

@media (max-width: 560px) {
  .agent-demo__stages { padding: 16px 14px 6px; }
  .agent-pick { font-size: var(--fs-xs); }
}
/* Paused (its [data-agent-pause]): the caret, the steps' shimmer and spinner stop where they are, as the playback does */
[data-agent-show].is-paused *, [data-agent-show].is-paused *::before, [data-agent-show].is-paused *::after { animation-play-state: paused !important; }