@layer components {
  /* Calm on purpose: it sits on the agent message's own tint, no frame; only a dead end stands out, in bold. */
  .agent-work { margin: 8px 0 0; font-size: 13px; }
  .agent-work-summary {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; cursor: pointer; list-style: none;
    color: var(--muted-foreground); line-height: 1.5;
  }
  .agent-work-summary::-webkit-details-marker { display: none; }
  .agent-work-summary:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; border-radius: 4px; }
  .agent-work-chevron { display: inline-flex; flex: none; transition: transform .15s; }
  .agent-work-chevron svg { stroke-width: 2.25; }
  .agent-work[open] > .agent-work-summary .agent-work-chevron,
  .agent-work-answer[open] > summary .agent-work-chevron { transform: rotate(90deg); }
  .agent-work-title { font-weight: 600; }
  .agent-work-stack { display: flex; align-items: center; flex: none; }
  .agent-work-stack-avatar, .agent-work-avatar {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 5px; color: var(--agent-color);
  }
  .agent-work-stack-avatar { background: color-mix(in oklab, var(--agent-color) 16%, var(--card)); }
  .agent-work-stack-avatar svg { stroke-width: 2; }
  .agent-work-stack .agent-work-stack-avatar { box-shadow: 0 0 0 1.5px var(--band, var(--background)); }
  .agent-work-stack .agent-work-stack-avatar + .agent-work-stack-avatar { margin-left: -5px; }
  .agent-work--bare .agent-work-summary { cursor: default; }
  .agent-work-spinner { display: inline-flex; animation: agent-work-spin 1s linear infinite; }
  @keyframes agent-work-spin { to { transform: rotate(360deg); } }
  .agent-work-meta::before { content: "·"; margin-right: 8px; color: var(--muted-foreground); }
  .agent-work-dead-end-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .agent-work-dead-end {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px;
    background: var(--jx-wait-soft); color: var(--jx-wait); font-weight: 700;
  }
  .agent-work-dead-end svg { stroke-width: 2.25; }
  .agent-work-dead-ends {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 4px;
    background: var(--jx-wait-soft); color: var(--jx-wait); font-weight: 700;
  }
  .agent-work-dead-ends svg { stroke-width: 2.5; }
  .agent-work--running > .agent-work-summary { min-height: 28px; }
  /* Room for Stop only while it shows: a reader who cannot stop the run keeps the full line. */
  .message-main--run:has(.message-run-stop:not([hidden])) .agent-work--running:not([open]) > .agent-work-summary { padding-right: 92px; }
  .agent-work--running .agent-work-label { flex: 1 1 8em; min-width: 0; }
  .agent-work:not([open]) .agent-work-range { display: none; }
  .agent-work-range time { font-variant-numeric: tabular-nums; }
  .agent-work-lines {
    display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0 6px; padding-left: 12px;
    border-left: 1px solid var(--border);
  }
  .agent-work-line { display: flex; gap: 8px; line-height: 1.5; color: var(--muted-foreground); }
  .agent-work-line-time { flex: none; margin-left: auto; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
  .agent-work-line-main { min-width: 0; flex: 1; }
  .agent-work-avatar { margin-top: 1px; background: color-mix(in oklab, var(--agent-color) 14%, transparent); }
  .agent-work-text, .agent-work-detail { margin: 0; text-wrap: pretty; overflow-wrap: anywhere; }
  .agent-work-name { font-weight: 600; color: var(--agent-color); }
  .agent-work-line--dead-end {
    padding: 8px 10px; border: 1px solid var(--border); border-left: 2px solid var(--jx-wait);
    border-radius: 8px; background: var(--card);
  }
  .agent-work-line--dead-end .agent-work-text { margin-top: 3px; color: var(--foreground); }
  .agent-work-line--error .agent-work-text { color: var(--jx-no); }
  .agent-work-detail { margin-top: 2px; color: var(--muted-foreground); }
  .agent-work-answer > summary { display: flex; align-items: center; gap: 4px; cursor: pointer; list-style: none; }
  .agent-work-answer > summary::-webkit-details-marker { display: none; }
  .agent-work-answer > summary:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; border-radius: 4px; }
  .agent-work-answer-body { margin-top: 4px; color: var(--foreground); overflow-wrap: anywhere; }
  .agent-work-answer-body p { margin: 0 0 4px; }
  .agent-work-end {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; padding-top: 8px;
    border-top: 1px solid var(--border);
  }
  .agent-work-footer { flex: 1; margin: 0; color: var(--muted-foreground); }
  .agent-work-collapse {
    margin-left: auto; padding: 0 2px; border: 0; background: none; font: inherit; font-weight: 600;
    color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  }
  .agent-work-collapse:hover { color: var(--foreground); }
  .agent-work-collapse:focus-visible { outline: 2px solid var(--jx-accent); outline-offset: 2px; border-radius: 4px; }

  @media (max-width: 767px) {
    .agent-work { font-size: var(--text-body); }
    .agent-work-summary, .agent-work--running > .agent-work-summary { min-height: var(--tap); }
    .message-main--run:has(.message-run-stop:not([hidden])) .agent-work--running:not([open]) > .agent-work-summary { padding-right: 100px; }
    .agent-work[open] > .agent-work-lines { padding-bottom: 4px; }
    .agent-work-end { padding-bottom: 8px; }
    .agent-work-collapse { min-height: var(--tap); }
  }

  @media (prefers-reduced-motion: reduce) {
    .agent-work-chevron { transition: none; }
    .agent-work-spinner { animation: none; }
  }
}