conversation.css

.messages-list {
  flex: 1;
  overflow-y: auto;
  /* The log streams content in, so the scrollbar appears the moment the
     conversation overflows. Reserving the gutter up front stops the content
     column from narrowing mid-stream (a visible horizontal reflow per message). */
  scrollbar-gutter: stable;
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  min-height: 0;
}
.conversation-scroll {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.scroll-to-bottom {
  position: absolute;
  left: 50%;
  bottom: var(--spacing-md);
  transform: translateX(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--accent) 80%, transparent);
  color: #fff;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  z-index: 4;
  opacity: 0.92;
  transition:
    opacity 0.15s,
    background 0.15s;
}
.scroll-to-bottom:hover {
  opacity: 1;
  background: var(--accent);
}
.scroll-to-bottom:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.conversation-queued {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  max-height: 38%;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: var(--spacing-sm) var(--spacing-md);
  /* No fill or border of its own: this panel used to be a full-width
     hard-cornered --bg-elevated box docked above the rounded floating composer,
     a second hard box stacked under each queued bubble. Left transparent, it
     recedes — a queued message renders as an ordinary user bubble (see
     .msg-user), just with the "Queued" badge and dimmed body, so there is no
     extra box, only the message itself floating over the conversation. */
  background: transparent;
}
.conversation-queued[hidden] {
  display: none;
}
.agent-activity {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: min(100%, var(--chat-content-max));
  margin-inline: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: transparent;
}
.agent-activity[hidden] {
  display: none;
}
.reasoning-activity-icon {
  width: var(--font-size-lg);
  height: var(--font-size-lg);
  flex-shrink: 0;
  overflow: visible;
  color: var(--accent);
}
/* The live label lines up with message prose; the spiral sits out of flow in
   the row's own padding — the same gutter column running tool rows use
   (see .tool-activity-icon-slot in tool-cards.css). */
.agent-activity > .reasoning-activity-icon {
  position: absolute;
  right: calc(100% - var(--spacing-md) + var(--spacing-xs) / 2);
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--spacing-md) - var(--spacing-xs) / 2);
  height: calc(var(--spacing-md) - var(--spacing-xs) / 2);
  pointer-events: none;
}
.reasoning-activity-path {
  fill: none;
  stroke: currentColor;
  stroke-width: 152;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: 0;
  animation: reasoning-activity-draw 2.5s ease-in-out infinite;
}
@keyframes reasoning-activity-draw {
  0%,
  1% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  2% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  46%,
  56% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  98% {
    stroke-dashoffset: -1;
    opacity: 1;
  }
  99%,
  100% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reasoning-activity-path {
    stroke-dasharray: 1 0;
    opacity: 1;
    animation: none;
  }
}
/* Transcript-loading notice (see hydrationNoticeEl in conversation.ts): fills
   the otherwise-empty pane while a switched-to thread's messages are read off
   disk. Same voice as .agent-activity — secondary text, spiral accent icon —
   but in-flow and roomier, since it is the only thing on screen. */
.conversation-hydrating {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: min(100%, var(--chat-content-max));
  margin-inline: auto;
  padding: var(--spacing-lg) var(--spacing-md);
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.conversation-hydrating > .reasoning-activity-icon {
  width: var(--font-size-lg);
  height: var(--font-size-lg);
  flex-shrink: 0;
  overflow: visible;
  color: var(--accent);
}
.agent-activity-clickable {
  cursor: pointer;
}
.agent-activity-clickable:hover {
  color: var(--text-primary);
}
.msg {
  width: min(100%, var(--chat-content-max));
  margin-inline: auto;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  /* Contain horizontal overflow (wide code, long unbroken URLs) within the
     message so it scrolls here rather than pushing the whole conversation
     panel sideways. The message is auto-height, so this never adds a vertical
     scrollbar. A wide table scrolls in its own box (.table-copy-scroll), which
     sits closer to the content and so takes precedence over this. */
  overflow-x: auto;
  /* overflow-x other than `visible` drops this flex item's automatic minimum
     size to 0 (a column flex item's min-height:auto floor only holds while
     overflow is visible). Without this, once the conversation overflows the
     .messages-list column the flex layout shrinks and clips messages — they
     appear "collapsed". Keep every message at its content height. */
  flex-shrink: 0;
}
/* Reasoning ("thinking") disclosure, shown above the answer. Copse commenting
   on its own turn rather than answering, so it takes the hatched plate rather
   than the flat one the agent's own prose gets — see base.css. The surface is
   scoped to [open]: a <details> cannot be laid out as a grid without Chromium's
   ::details-content box reflowing the body, and a closed disclosure is one
   summary line that wants no plate at all. */
.message-reasoning {
  --sev: var(--accent);
  margin-bottom: var(--spacing-sm);
  border: 0;
  border-radius: var(--radius);
}
.message-reasoning[open] {
  padding: var(--spacing-md) var(--spacing-lg);
  background:
    repeating-linear-gradient(
      135deg,
      color-mix(in srgb, var(--sev) var(--callout-hatch-line), transparent) 0 1px,
      transparent 1px var(--callout-hatch-pitch)
    ),
    color-mix(in srgb, var(--sev) var(--callout-hatch-fill), transparent);
}
.message-reasoning:not([open]) {
  margin-bottom: var(--spacing-xs);
}
.message-reasoning-summary {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  list-style: none;
  font-size: var(--font-size-sm);
  /* The rail carried the accent down the whole block; with it gone the label is
     what carries it, and this one is a disclosure you click. */
  color: var(--sev);
  user-select: none;
  width: fit-content;
  border-radius: var(--radius);
  padding: 2px var(--spacing-xs);
}
.message-reasoning-summary:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.message-reasoning-summary::-webkit-details-marker {
  display: none;
}
.message-reasoning-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--font-size-lg);
  height: var(--font-size-lg);
}
.message-reasoning-icon::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform 0.12s ease;
}
.message-reasoning[open]:not(.message-reasoning-live) .message-reasoning-icon::before {
  transform: rotate(90deg);
}
.message-reasoning-icon > .reasoning-activity-icon {
  display: none;
}
.message-reasoning-live .message-reasoning-icon::before {
  display: none;
}
.message-reasoning-live .message-reasoning-icon > .reasoning-activity-icon {
  display: block;
}
.message-reasoning-text {
  margin-top: var(--spacing-xs);
  white-space: normal;
  word-break: break-word;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-base);
}
.message-reasoning-text p {
  margin: 0;
}
.message-reasoning-text p + p,
.message-reasoning-text p + ul,
.message-reasoning-text p + ol,
.message-reasoning-text ul + p,
.message-reasoning-text ol + p {
  margin-top: var(--spacing-sm);
}
.message-reasoning-text > :first-child {
  margin-top: 0;
}
.message-reasoning-text ul,
.message-reasoning-text ol {
  margin: var(--spacing-sm) 0;
  padding-inline-start: 1.5em;
  list-style-position: outside;
  white-space: normal;
}
.message-reasoning-text code {
  font-family: var(--font-mono);
  padding: 1px 4px;
  background: var(--bg-muted);
}

/* Cursor ACP trailing transport RetriableError — developer-mode disclosure only. */
.acp-transport-noise {
  margin-top: var(--spacing-sm);
  color: var(--text-muted);
  font-size: 0.85em;
}
.acp-transport-noise-summary {
  cursor: pointer;
  list-style: none;
  color: var(--text-muted);
}
.acp-transport-noise-summary::-webkit-details-marker {
  display: none;
}
.acp-transport-noise-summary::before {
  content: '▸ ';
  font-size: 0.75em;
}
.acp-transport-noise[open] > .acp-transport-noise-summary::before {
  content: '▾ ';
}
.acp-transport-noise-body {
  margin: var(--spacing-xs) 0 0;
  padding: var(--spacing-xs) var(--spacing-sm);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text-secondary);
  background: var(--bg-muted);
  border-radius: 3px;
}
.message-body {
  position: relative;
}
.msg-copy {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  transition: opacity 0.1s;
}
.message-body:hover .msg-copy {
  opacity: 1;
}
.message-body:hover:has(.code-block-shell:hover) .msg-copy,
.message-body:hover:has(.code-block-shell:focus-within) .msg-copy {
  opacity: 0;
}
/* Per-prompt actions (fork the conversation from here / resend the prompt).
   Mirrors .msg-copy's hover affordance, anchored to the bubble's bottom-right
   so it never covers the first line of a long prompt. */
.msg-actions {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: var(--spacing-xs);
  opacity: 0;
  transition: opacity 0.1s;
}
.message-body:hover .msg-actions,
.msg-actions:focus-within {
  opacity: 1;
}
/* A deterministic image-input failure keeps both recovery actions visible on
   the latest prompt, so switching model/resending does not depend on hover. */
.msg-user:not(:has(~ .msg-user)):has(~ .msg-image-input-unsupported) .msg-actions {
  opacity: 1;
}
.msg-action {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  cursor: pointer;
}
.msg-action:hover:not(:disabled) {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.msg-action:disabled {
  cursor: default;
  opacity: 0.6;
}
.msg-action[hidden] {
  display: none;
}
/* The user's own replies read as "yours" through a restrained accent-tinted
   fill and matching hairline — distinct from the trace without becoming a
   full-width blue slab. */
.msg-user {
  width: min(100%, var(--chat-user-max));
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
/* Mid-fold accordion for long user prompts: head + tail stay visible; middle
   collapses behind a dashed "expand" / "collapse" control. */
.msg-user-fold-head,
.msg-user-fold-middle,
.msg-user-fold-tail {
  min-width: 0;
}
.msg-user-fold-head > :first-child,
.msg-user-fold-middle > :first-child,
.msg-user-fold-tail > :first-child {
  margin-top: 0;
}
.msg-user-fold-head > :last-child,
.msg-user-fold-middle > :last-child,
.msg-user-fold-tail > :last-child {
  margin-bottom: 0;
}
.msg-user-fold-control {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 3.1em;
  margin: 0;
  padding: 0.35em 0;
}
.msg-user-fold:not(.is-expanded) .msg-user-fold-middle {
  display: none;
}
.msg-user-fold-toggle {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  color: var(--text-secondary);
  background: transparent;
  border: 1px dashed var(--border-subtle);
  border-radius: 999px;
  padding: 1px 7px;
  margin: 0;
  cursor: pointer;
}
.msg-user-fold-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
}
.msg-user-fold-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.msg-user-fold-chev {
  width: 11px;
  height: 11px;
  flex: none;
  transition: transform 0.15s ease;
}
.msg-user-fold.is-expanded .msg-user-fold-chev {
  transform: rotate(180deg);
}
/* User prompts sit against the right edge of the centered reading column while
   their text remains naturally left-aligned. Auto space goes on the leading
   side; the trailing margin mirrors the reading column's outer gutter and
   collapses to zero on narrower panes. */
.messages-list > .msg-user {
  position: relative;
  margin-left: auto;
  margin-right: max(0px, calc((100% - var(--chat-content-max)) / 2));
}
/* Keep the request that owns the current response in view as its output grows.
   Historical prompts remain ordinary transcript content: only the last user
   sibling sticks, so multiple prompts never pile up at the top. */
.messages-list > .msg-user:not(:has(~ .msg-user)) {
  position: sticky;
  /* Cancel the list's 16px top padding so scrolling text cannot peek above the
     anchored prompt. A pinned TODO panel remains a natural boundary above it. */
  top: calc(-1 * var(--spacing-lg));
  z-index: 3;
  box-shadow: var(--shadow-sm);
}
/* A narrow split pane cannot afford to pin a tall request over the response it
   owns. Let the prompt rejoin the transcript once the chat column reaches the
   compact width used beside a full-size Browser or editor. */
@container chat-pane (max-width: 360px) {
  .messages-list > .msg-user:not(:has(~ .msg-user)) {
    position: relative;
    top: auto;
    z-index: auto;
  }
}
.msg-assistant {
  background: transparent;
}
/* Primary-chat model chrome — only present when the thread used more than one
   picker model. Mirrors the subagent card's muted model line. */
.message-model {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary, var(--text-secondary));
  margin-bottom: var(--spacing-xs);
}
/* A text-only response is the readable outcome of a run. Give it more breathing
   room than the execution trace without inventing a new completion state. */
.msg-assistant:has(.message-text:not(:empty)):not(:has(.tool-card)) {
  margin-block: var(--spacing-xs);
  padding-block: var(--spacing-lg);
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
}
.msg-assistant:has(.message-text:not(:empty)):not(:has(.tool-card))
  > .message-body
  > .message-text {
  font-size: var(--font-size-md);
  line-height: var(--line-height-base);
}
/* Markdown content styling lives in @copse/streaming-markdown's default.css,
   scoped under `.streaming-markdown` (added to every render sink). Map the
   package's `--sm-*` knobs onto agent-pane's theme tokens so rendered markdown
   tracks the active theme. Host-only chrome the package never emits — code/table
   copy buttons, mermaid expand/zoom, artifact images — stays below. */
.streaming-markdown {
  --sm-space-xs: var(--spacing-xs);
  --sm-space-sm: var(--spacing-sm);
  --sm-space-md: var(--spacing-md);
  --sm-radius: var(--radius);
  --sm-font-mono: var(--font-mono);
  --sm-font-size-sm: var(--font-size-sm);
  --sm-fg-muted: var(--text-secondary);
  --sm-border: var(--border);
  --sm-accent: var(--accent);
  --sm-link: var(--link);
  --sm-code-bg: var(--bg-elevated);
  --sm-error: var(--error);
  /* The package defaults to GitHub's alert palette; Copse has its own semantic
     tokens for four of the five, and invents --info and --important for the
     other two (tokens.css). markdown.css restyles the blocks themselves. */
  --sm-alert-note: var(--info);
  --sm-alert-tip: var(--success);
  --sm-alert-important: var(--important);
  --sm-alert-warning: var(--warning);
  --sm-alert-caution: var(--danger);
}
/* Links inside rendered markdown follow the app's link tier (the package's
   default keys them off its accent, which is too dim on the dark surfaces). */
.streaming-markdown a {
  color: var(--link);
}
.streaming-markdown a:hover {
  color: var(--link-hover);
}
.message-text:empty {
  display: none;
}
.msg-assistant:has(.tool-card) + .msg-assistant {
  margin-block-start: calc(-1 * var(--spacing-xs));
}
.message-images {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}
.message-image {
  max-width: min(100%, 320px);
  max-height: 240px;
  border-radius: var(--radius);
  object-fit: contain;
  border: 1px solid var(--border);
  background: var(--bg-base);
}
.message-text .remote-artifact-image {
  display: block;
  max-width: 100%;
  max-height: min(520px, 60vh);
  margin: var(--spacing-sm) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  object-fit: contain;
}
.message-text .code-block-shell {
  position: relative;
}
.code-block-copy {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  opacity: 0;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  transition: opacity 0.1s;
  z-index: 1;
}
.message-text .code-block-shell:hover .code-block-copy,
.message-text .code-block-shell:focus-within .code-block-copy {
  opacity: 1;
}
.message-text:has(.code-block-shell:hover)
  .code-block-shell:not(:hover):not(:focus-within)
  .code-block-copy,
.message-text:has(.code-block-shell:focus-within)
  .code-block-shell:not(:focus-within):not(:hover)
  .code-block-copy {
  opacity: 0;
}
/* GFM table copy control (#615): mirror the code-block hover affordance. The
   shell carries the table's block margin so wrapping causes no layout shift, and
   the button floats in the top-right corner (revealed on hover/focus). */
.message-text .table-copy-shell {
  position: relative;
  margin: var(--spacing-sm) 0;
}
/* A table too wide to fit (e.g. an unbroken URL) scrolls within its own box
   rather than adding a horizontal scrollbar to the whole conversation. */
.message-text .table-copy-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.message-text .table-copy-scroll > table {
  margin: 0;
  /* The wrapper owns horizontal scrolling. Keep the table itself as a pure
     clip so Chromium paints its rounded top corners without overflow horns. */
  overflow: hidden;
}
.table-copy {
  position: absolute;
  top: var(--spacing-xs);
  right: var(--spacing-xs);
  opacity: 0;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
  transition: opacity 0.1s;
  z-index: 1;
}
.message-text .table-copy-shell:hover .table-copy,
.message-text .table-copy-shell:focus-within .table-copy {
  opacity: 1;
}

/* Transcript attachment chips (conversation.ts renderUserTranscript): a paste
   sits inline at its placeholder; files/threads follow in .transcript-attachment-row.
   Display-only siblings of the composer's .inline-paste-chip — no remove button. */
.transcript-attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 260px;
  margin: 0 2px;
  padding: 1px 7px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: var(--font-size-sm);
  vertical-align: baseline;
}
/* These are lucide-style outline paths (dom/outline-icon.ts): without an
   explicit fill/stroke they take SVG's default black fill and render as a solid
   blob rather than an outline. The composer's own chips set this on their icon
   classes; the transcript chips need the same. */
.transcript-attachment-icon {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* The icon is the chip's first flex item, and with align-items: center nothing
   participates in baseline alignment — so the flex container exports the icon's
   bottom edge as its baseline and the whole pill floats ~3px above the sentence
   it sits in. Opting the label into baseline alignment makes the label text the
   chip's baseline, so it reads inline with the surrounding prompt text. (The
   label is the tallest item, so its own position inside the pill is unchanged.) */
.transcript-attachment-label {
  align-self: baseline;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transcript-attachment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* Canvas preview card: the thumbnail of a rendered artefact, with the Open
   button that promotes its (background) Browser-pane tab to the front. */
.canvas-preview-card {
  max-width: 1280px;
  margin: 8px 0 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated, var(--bg));
}
.canvas-preview-image {
  display: block;
  width: 100%;
  /* Prototypes are wide and often tall; cap the height so a long page cannot
     push the rest of the transcript off screen. */
  max-height: 260px;
  object-fit: cover;
  object-position: top center;
  background: var(--bg);
}
.canvas-preview-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}
.canvas-preview-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text-muted, var(--text));
}