/* The coding agent's conversation: grouped tool activity, permission prompts, the
 * changes a turn made and its receipt. Carried over from the Code Mode
 * document this page replaced, scoped to #view-agent.
 */

#view-agent .column { --row: 30px; --chrome: 13px; --meta: 12px; }
/* The coding agent's conversation.
 *
 * The rhythm is the point: prose and tool activity share one column, and tool
 * activity is deliberately quieter than prose so a long agent turn reads as a
 * margin note rather than as the content. Every value resolves to a palette
 * token injected by Python; there are no literals here.
 */

#view-agent .turn { display: flex; flex-direction: column; }
#view-agent .turn.user { align-items: flex-end; margin: 16px 0 10px; }
#view-agent .turn.user:first-child { margin-top: 4px; }

#view-agent .bubble {
  background: var(--user-bubble);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 8px 14px;
  max-width: 86%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#view-agent .assistant { margin: 3px 0 8px; }
#view-agent .assistant .body > *:first-child { margin-top: 0; }
#view-agent .assistant .body > *:last-child { margin-bottom: 0; }

/* ---- activity rows --------------------------------------------------- */
/* Clickable text, not a button. These rows are a running account of what the
   agent did, and a column of bordered boxes reads as a toolbar — the eye stops
   at every one. They carry no chrome at rest; what changes on hover is the
   colour of the words and the angle of the caret. The same treatment is used
   for the sidebar's project groups, so one gesture means one thing everywhere.
*/
#view-agent .activity { margin: 0; }

#view-agent .activity > .head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--row);
  padding: 1px 4px;
  cursor: pointer;
  color: var(--text3);
  font-size: var(--chrome);
  user-select: none;
  border-radius: var(--radius-control);
  transition: color var(--dur-fast) var(--ease);
}
#view-agent .activity > .head:hover { color: var(--text); }
#view-agent .activity > .head:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: -2px;
  color: var(--text);
}
#view-agent .activity.open > .head { color: var(--text2); }

#view-agent .activity .glyph {
  width: 14px;
  height: 14px;
  flex: none;
  color: var(--text3);
  display: flex;
  align-items: center;
  justify-content: center;
}
#view-agent .activity .glyph svg { width: 14px; height: 14px; }
#view-agent .activity.ok .glyph { color: var(--added); }
#view-agent .activity.bad .glyph { color: var(--danger); }

#view-agent .activity .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-agent .activity .label b { font-weight: 600; color: var(--text); }

/* Diff counts, wherever they appear: the activity row, the step inside it, the
   change card and each file in it. Green for what arrived, red for what left --
   the one place in the conversation where colour carries the meaning, and the
   card whose whole job is to report a diff used to show it in grey. */
#view-agent .counts { flex: none; font-size: var(--meta); font-variant-numeric: tabular-nums; }
#view-agent .counts .add { color: var(--added); }
#view-agent .counts .del { color: var(--removed); margin-left: 6px; }

/* The span carries the class and the rotation; the SVG inside it must not,
   or the two compose to 180 degrees and an open row points its caret left. */
#view-agent .activity > .head > .caret {
  width: 12px; height: 12px; flex: none; color: var(--text3);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--dur-fast) var(--ease);
}
#view-agent .activity > .head > .caret svg { width: 12px; height: 12px; }
#view-agent .activity.open > .head > .caret { transform: rotate(90deg); }

/* Opens to its own height rather than appearing. grid-template-rows animates
   between 0fr and 1fr, which is the only way to ease to a height the content
   decides — a max-height guess either clips long output or eases through
   emptiness before it arrives. */
#view-agent .activity > .detail,
#view-agent .step > .more { display: none; }
/* The grid item is a bare wrapper, added by agent.js. Setting these on the
   *content* is not enough: a margin or a max-height with its own scrollbar
   keeps the row's automatic minimum above zero, and a closed disclosure went
   on reserving the height of what it was hiding. */
#view-agent .activity > .detail > .inner,
#view-agent .step > .more > .inner { min-height: 0; overflow: hidden; }
/* Opened and closed by App.fold (js/moments.js), which moves them. */
#view-agent .activity.open > .detail,
#view-agent .step.open > .more { display: block; }
#view-agent .activity > .detail { padding-left: 22px; }
#view-agent .step > .more { padding-left: 18px; }
#view-agent .activity.open > .detail { padding-bottom: 4px; }
/* Opened, a group of steps is a small window that scrolls on its own, so a
   long run of reads or searches never pushes the conversation down. */
#view-agent .activity.open > .detail > .inner {
  max-height: min(20em, 42vh);
  overflow-y: auto;
  /* Not contained: at its end the wheel carries on down the session
     (css/reasoning.css says why). */
  padding: 6px 10px 6px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
#view-agent .activity > .detail > .inner::-webkit-scrollbar { width: 8px; }

#view-agent .step { border-left: 1px solid var(--border); padding-left: 10px; margin-left: -2px; }
#view-agent .step > .line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 1px 4px 1px 0;
  color: var(--text2);
  font-size: var(--chrome);
  border-radius: var(--radius-control);
  transition: color var(--dur-fast) var(--ease);
}
#view-agent .step.expandable > .line { cursor: pointer; user-select: none; }
#view-agent .step.expandable > .line:hover { color: var(--text); }
#view-agent .step.expandable > .line:hover .name { color: var(--text); }
#view-agent .step > .line:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: -2px; }
#view-agent .step .name { color: var(--text); font-weight: 500; flex: 1; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-agent .step .aside { color: var(--text3); font-size: var(--meta); flex: none; white-space: nowrap; }
#view-agent .step.bad .name { color: var(--danger); }
#view-agent .step .link { color: var(--link); cursor: pointer; }
#view-agent .step .link:hover { text-decoration: underline; }

/* A step with nothing further to show has no caret to turn. It turns at the
   right edge, on the same axis as the group caret above it — the two levels of
   one disclosure used to point at opposite sides of the column. */
#view-agent .step > .line > .caret {
  margin-left: 2px;
  width: 10px; height: 10px; flex: none; color: var(--text3);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
#view-agent .step > .line > .caret svg { width: 10px; height: 10px; }
#view-agent .step.expandable > .line > .caret { opacity: 1; }
#view-agent .step.open > .line > .caret { transform: rotate(90deg); }

/* A delegate's own account of what it did, in its own words. Prose, not
   terminal output, so it reads as a quotation rather than a log. */
#view-agent .report {
  margin: 5px 0 2px;
  padding: 8px 11px;
  border-left: 2px solid var(--border-strong);
  background: var(--card);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  color: var(--text2);
  font-size: var(--chrome);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 280px;
  overflow-y: auto;
}

#view-agent .output {
  margin: 5px 0 2px;
  padding: 8px 10px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-control);
  font-family: var(--font-mono);
  font-size: var(--chrome);
  line-height: 1.5;
  color: var(--code-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 320px;
  overflow-y: auto;
}

/* ---- running shimmer -------------------------------------------------- */
/* The label itself carries the motion: a moving highlight over the text, so a
   working agent needs no spinner competing with the prose. */
#view-agent .activity.running .label,
#view-agent .working .label {
  background: linear-gradient(90deg, var(--text2) 30%, var(--shimmer) 50%, var(--text2) 70%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: agent-sweep 1.9s linear infinite;
}
@keyframes agent-sweep {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}
/* The reader's own "reduced motion" setting, not the operating system's.
   This was a media query, so the switch in Settings > Appearance stopped every
   other animation in the application and left this one sweeping. */
.reduced-motion #view-agent .activity.running .label,
.reduced-motion #view-agent .working .label {
  animation: none;
  color: var(--text2);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.reduced-motion #view-agent .working .dot { animation: none; opacity: 1; transform: none; }

#view-agent .working { display: flex; align-items: center; gap: 8px; padding: 4px 8px; min-height: var(--row); color: var(--text2); font-size: var(--chrome); }
#view-agent .working .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none;
  animation: agent-pulse 1.4s ease-in-out infinite;
}
@keyframes agent-pulse { 0%, 100% { opacity: .35; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }
#view-agent .working .elapsed { font-size: var(--meta); color: var(--text3); font-variant-numeric: tabular-nums; }
#view-agent .working .hint { font-size: var(--meta); color: var(--text3); }

/* ---- queued messages --------------------------------------------------- */
/* Typed while the agent worked. Shown dimmed and in place, so it is obvious
   they have not been sent yet and obvious where they will go. */
#view-agent .queued {
  margin: 8px 0 4px;
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: transparent;
}
#view-agent .queued .label {
  font-size: var(--meta);
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
#view-agent .queued .item {
  color: var(--text2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 2px 0;
}

/* ---- permission prompt ------------------------------------------------ */
#view-agent .permission {
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-card);
  background: var(--card);
  padding: 11px 13px;
  margin: 8px 0;
}
#view-agent .permission .title { font-weight: 600; margin-bottom: 4px; }
#view-agent .permission .why { color: var(--text2); font-size: var(--chrome); margin-bottom: 8px; }
#view-agent .permission .cmd {
  font-family: var(--font-mono);
  font-size: var(--chrome);
  background: var(--code-bg);
  border: var(--hairline) solid var(--code-border);
  border-radius: var(--radius-control);
  padding: 7px 10px;
  color: var(--code-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin-bottom: 12px;
}
#view-agent .permission .where {
  display: flex; align-items: center; gap: 6px;
  color: var(--text3); font-size: var(--meta);
  font-family: var(--font-mono);
  margin: -6px 0 12px;
}
#view-agent .permission .where .glyph { display: inline-flex; width: 12px; height: 12px; }
#view-agent .permission .where .glyph svg { width: 12px; height: 12px; }
#view-agent .permission .actions { display: flex; gap: 8px; flex-wrap: wrap; }
#view-agent .permission .btn kbd {
  font: inherit; font-size: var(--meta); font-family: var(--font-mono);
  margin-left: 7px; padding: 0 4px; border-radius: var(--radius-badge);
  background: var(--surface-hover); color: var(--text3);
  border: 1px solid var(--border);
}
#view-agent .permission .btn.primary kbd { background: color-mix(in srgb, var(--accent-text) 18%, transparent); color: inherit; border-color: transparent; opacity: 0.8; }
#view-agent .permission.resolved .actions { display: none; }
#view-agent .permission .verdict { display: none; font-size: var(--chrome); color: var(--text2); }
#view-agent .permission.resolved .verdict { display: block; }
#view-agent .permission.resolved { border-left-color: var(--border-strong); }


/* ---- what the agent saw ----------------------------------------------- */
#view-agent .step .shot {
  display: block;
  margin: 6px 0 4px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--card);
  overflow: hidden;
  cursor: zoom-in;
  max-width: min(100%, 460px);
  transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease-spring);
}
#view-agent .step .shot:hover { border-color: var(--border-strong); transform: translateY(-1px); }
#view-agent .step .shot img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; object-position: top; }


/* ---- change summary --------------------------------------------------- */
#view-agent .changes {
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--card);
  margin: 12px 0 6px;
  overflow: hidden;
}
#view-agent .changes .top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
#view-agent .changes .top .what { font-weight: 600; flex: 1; }
#view-agent .changes .file {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
#view-agent .changes .file:last-child { border-bottom: none; }
#view-agent .changes .file:hover { background: var(--card-hover); }
#view-agent .changes .file:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: -2px; }
#view-agent .changes .more:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: -2px; }
#view-agent .changes .file .path { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--chrome); overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
#view-agent .changes .file .verb { font-size: var(--meta); color: var(--text3); text-transform: uppercase; letter-spacing: .04em; flex: none; }
#view-agent .changes .more { padding: 6px 12px; color: var(--text2); cursor: pointer; font-size: var(--chrome); }
#view-agent .changes .more:hover { color: var(--text); background: var(--card-hover); }
#view-agent .changes .tracked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  color: var(--text2);
  font-size: var(--chrome);
  line-height: 1.45;
}
#view-agent .changes .more + .tracked { border-top: 1px solid var(--border); }
#view-agent .changes .tracked .icon { width: 14px; height: 14px; margin-top: 2px; color: var(--text3); flex: none; }
#view-agent .changes .tracked .text { flex: 1; min-width: 0; }
#view-agent .changes .tracked .lead { color: var(--text); }
#view-agent .changes .tracked b { color: var(--text); font-weight: 600; }
#view-agent .changes .tracked .btn { flex: none; align-self: center; }
#view-agent .changes .tracked + .git { border-top: 1px solid var(--border); }
#view-agent .changes .git {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  padding: 6px 12px;
  border: none;
  background: transparent;
  color: var(--text2);
  font: inherit;
  font-size: var(--chrome);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
#view-agent .changes .more + .git { border-top: 1px solid var(--border); }
#view-agent .changes .git .icon { width: 14px; height: 14px; margin-right: 7px; color: var(--text3); flex: none; }
#view-agent .changes .git .sha,
#view-agent .changes .git .branch { font-family: var(--font-mono); color: var(--text); }
#view-agent .changes .git .text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-agent .changes .git .note { color: var(--text3); }
#view-agent .changes .git.quiet .note { color: var(--text2); }
#view-agent .changes .git:hover { color: var(--text); background: var(--card-hover); }
#view-agent .changes .git:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: -2px; }

/* ---- reasoning -------------------------------------------------------- */
#view-agent .thinking { margin: 2px 0 6px; }
#view-agent .thinking > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text3);
  font-size: var(--chrome);
  padding: 2px 8px;
  border-radius: var(--radius-control);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
#view-agent .thinking > summary::-webkit-details-marker { display: none; }
/* Chat's reasoning row has a caret and this one had nothing in place of the
   marker it hides, so the same disclosure was discoverable in one mode and
   looked like static text in the other. */
/* The same chevron every other disclosure in both documents uses, drawn from
   two borders rather than an SVG because a ::before cannot hold markup. A
   filled triangle here and a stroked chevron everywhere else is two answers to
   one question. */
#view-agent .thinking > summary::before {
  content: "";
  width: 5px;
  height: 5px;
  margin: 0 7px 1px 2px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur-fast) var(--ease);
}
#view-agent .thinking[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.reduced-motion #view-agent .thinking > summary::before { transition: none; }
#view-agent .thinking > summary:hover { color: var(--text2); background: var(--surface); }
#view-agent .thinking > summary:focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }
#view-agent .thinking .reasoning-window { margin: 4px 0 2px 8px; }

/* ---- errors ----------------------------------------------------------- */
#view-agent .failure {
  border: 1px solid var(--danger);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  margin: 8px 0;
  color: var(--text);
  background: var(--card);
}
#view-agent .failure .title { font-weight: 600; color: var(--danger); margin-bottom: 4px; }
#view-agent .failure .actions { margin-top: 10px; }

/* ---- turn footer ------------------------------------------------------ */
/* The receipt appears when you look at the turn, exactly as Chat Mode's message
   actions do — same fade, same curve, same reserved row so nothing reflows.
   A step count and a cost are worth having and not worth reading six times on
   the way down a session. */
#view-agent .footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 8px 2px;
  color: var(--text3);
  font-size: var(--meta);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
#view-agent .exchange:hover .footer,
#view-agent .exchange:focus-within .footer,
#view-agent .footer:focus-within { opacity: 1; }
#view-agent .footer .spacer { flex: 1; }
#view-agent .footer .act { cursor: pointer; transition: color var(--dur-fast) var(--ease); }
#view-agent .footer .act:hover { color: var(--text2); text-decoration: underline; }

/* The change card's verbs follow the same rule: the card itself always says
   what changed, its actions wait to be asked for. */
#view-agent .changes .top .btn,
#view-agent .changes .more { opacity: 0; transition: opacity var(--dur) var(--ease); }
#view-agent .exchange:hover .changes .top .btn,
#view-agent .exchange:hover .changes .more,
#view-agent .changes:focus-within .top .btn,
#view-agent .changes:focus-within .more { opacity: 1; }

/* ---- welcome ---------------------------------------------------------- */
/* The empty state fills the pane and sits low in it, so the headline lands
   just above the composer instead of floating over 300px of nothing. */
#view-agent .clearance {
  margin: 2px 0 4px 8px;
  color: var(--text3);
  font-size: var(--chrome);
}
#view-agent .output.failed { border-color: var(--danger); }


/* ---- exchanges and entry --------------------------------------------- */
/* One request and everything the agent did about it. */
#view-agent .exchange { display: flex; flex-direction: column; }
/* A long session stays quick: exchanges off screen are not laid out or
   painted until scrolled near (their last size is remembered). */
#view-agent .exchange:not(:nth-last-child(-n + 2)) {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
  overflow-clip-margin: 24px;
}

/* Switching session used to repaint the whole column at once, which reads as a
   flash. Content arrives at opacity 0 and settles, so a rebuild looks like the
   page filling rather than blinking. */

.reduced-motion #view-agent .footer,
.reduced-motion #view-agent .changes .top .btn,
.reduced-motion #view-agent .changes .more { transition: none; }
.reduced-motion #view-agent .activity > .detail,
.reduced-motion #view-agent .step > .more { transition: none; }