/* Tool-activity panel for the chat workspace.
 *
 * Only what agentic.css does not already provide. That stylesheet has no
 * classes for this because the agentic workspace has no live tool panel --
 * it shows an agent timeline after the fact instead.
 *
 * Uses the same custom properties as agentic.css (--muted, --rule, --accent,
 * --surface, --mono) so both pages stay on one theme.
 */

/* Reasoning, when the model emits it (deep mode). Collapsed by default: it is
   long, and it matters when an answer looks wrong rather than when it looks
   right. */
.chat-think {
  margin-bottom: 12px;
  border-left: 2px solid var(--rule);
  padding-left: 10px;
}

.chat-think > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--muted);
  list-style: none;
  user-select: none;
}

.chat-think > summary::before {
  content: "▸ ";
  display: inline-block;
  transition: transform 0.12s ease;
}

.chat-think[open] > summary::before {
  content: "▾ ";
}

.chat-think-body {
  margin-top: 6px;
  /* The model's raw working, so it keeps its own line breaks and is rendered
     as text -- never as markdown, which would let it style the page. */
  white-space: pre-wrap;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
  max-height: 22em;
  overflow-y: auto;
}

.chat-work {
  display: grid;
  gap: 2px;
  margin-bottom: 14px;
}

.chat-work:empty {
  display: none;
}

.chat-tool {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-left: 2px solid var(--rule);
  font-size: 0.78rem;
  color: var(--muted);
  /* The row is written the moment a tool starts and rewritten when it ends;
     without this the result appearing shifts everything below it. */
  min-height: 1.6em;
}

/* An agent narrating its own work, beside the tool rows it belongs to. Muted
   and italic so it reads as commentary on the timeline rather than as content:
   this text used to land in the answer body, where it looked like the model
   thinking out loud at the reader. */
.chat-note {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 10px;
  border-left: 2px solid transparent;
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
}

.chat-note-agent {
  flex: none;
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.chat-note-text {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-tool.is-running {
  border-left-color: var(--accent);
}

.chat-tool.is-error {
  border-left-color: #d05a5a;
}

.chat-tool-name {
  font-family: var(--mono);
  color: var(--ink);
  white-space: nowrap;
}

.chat-tool-args {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

.chat-tool-result {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.chat-tool.is-running .chat-tool-result::after {
  content: "…";
}

/* Sources are grouped under a heading only once there are some; the wrapper is
   added with the first card. */
.chat-sources-head {
  margin: 0 0 6px;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- evidence graph ---------------------------------------------------- */