.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}

.panel :global(.cc-file-path-link) {
  color: var(--text-primary);
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: var(--font-mono, ui-monospace, monospace);
  line-height: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(var(--accent-primary-rgb), 0.35);
  text-underline-offset: 2px;
  cursor: pointer;
  word-break: break-all;
}

.panel :global(.cc-file-path-link:hover) {
  color: var(--accent-primary);
  text-decoration-color: currentColor;
}

/* Filler shown while a workspace's sessions are still loading from the
   backend (typical window: 50-150ms on a sidebar click, longer on first
   launch). Holds the content area open with the theme background so the
   panel chrome above (workspace header + tab strip) doesn't reflow, and
   no empty-state placard flashes between `selectedWorkspaceId` flipping
   and the `setSessionsForWorkspace` response landing. See the
   `sessionsLoaded` comment in ChatPanel.tsx for the load-order details. */
.loadingShell {
  flex: 1;
  min-height: 0;
}

/* Optimistic-fork placeholder. Rendered in place of the chat content
   between the user clicking "Fork from here" and the backend's
   `fork_workspace_at_checkpoint` returning. The user has already been
   navigated to the placeholder workspace at this point — this placard
   tells them what's happening so the navigation doesn't read as an
   inexplicable empty pane. Same flex sizing as `.empty` / `.loadingShell`
   so the surrounding chrome doesn't reflow when the swap completes. */
.preparingFork {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-faint);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.preparingForkSpinner {
  animation: preparingForkSpin 1s linear infinite;
  color: var(--accent-primary);
  opacity: 0.7;
}

.preparingForkText {
  text-align: center;
  max-width: 320px;
  line-height: 1.4;
}

/* Sub-line under the main placard text — used by the
   optimistic-create placard to show the generated workspace slug as
   secondary info, so the primary "Preparing workspace in <repo>…"
   line stays readable while the slug is still visible. Muted color
   + smaller font matches the visual weight of a hint. */
.preparingForkSub {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0;
}

@keyframes preparingForkSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Messages area */
/* Wraps the search bar + scrolling messages list. The bar is absolutely
   positioned over the top of this wrapper so opening Cmd+F doesn't push
   the messages list down. The wrapper itself participates in the chat
   panel's flex column with `flex: 1` like .messages used to. */
.messagesWrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: none;
  /* Right gap matches xterm's `inset: 8px` and Monaco's host
   * `margin-right: var(--scrollbar-edge-inset)`. The custom slider
   * (rendered by `<OverlayScrollbar />`) lives inside this 8px lane. */
  margin-right: var(--scrollbar-edge-inset);
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  contain: layout style;
  /* Hide the host's native scrollbar — `<OverlayScrollbar />` draws a
   * pixel-sized DOM slider that matches xterm.js / Monaco. macOS
   * WKWebView ignores `::-webkit-scrollbar` widths when the system uses
   * overlay scrollbars, and overlay scrollbars don't scale with browser
   * zoom, so the custom slider is the only way to keep all three
   * surfaces consistent. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.messages::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 14px;
  letter-spacing: 0.01em;
}

.empty::before {
  content: ">";
  display: block;
  font-size: 28px;
  font-weight: 200;
  color: rgba(var(--accent-primary-rgb), 0.2);
  font-family: var(--font-mono);
}

.emptyPreparing::before {
  content: none;
}

.emptySpinner {
  animation: preparingForkSpin 1s linear infinite;
  color: var(--accent-primary);
  opacity: 0.7;
}

.emptyTitle {
  color: var(--text-muted);
}

.emptySub {
  max-width: 360px;
  text-align: center;
  line-height: 1.45;
  color: var(--text-faint);
}

.errorBanner {
  background: var(--accent-error-bg);
  border: 1px solid var(--accent-error-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--accent-error);
  white-space: pre-wrap;
  word-break: break-word;
}

.envErrorBanner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--accent-error-bg);
  border: 1px solid var(--accent-error-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--accent-error);
  word-break: break-word;
}

.envErrorRetry {
  flex-shrink: 0;
  border: 1px solid var(--accent-error-border);
  border-radius: 6px;
  background: var(--chat-input-bg);
  color: var(--text-primary);
  font: inherit;
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
}

.envErrorRetry:hover {
  background: var(--hover-bg);
}

/* --- Block-based message layout ---
 * User messages are compact "prompt" blocks.
 * Assistant messages are clean prose that flows below.
 * Turns are separated by whitespace, not borders.
 */

.message {
  max-width: 100%;
}

/* User messages — compact input blocks */
.role_User {
  position: relative;
  background: var(--chat-user-bg);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 20px;
}

.messages > .role_User:first-child,
.messages > .errorBanner + .role_User {
  margin-top: 0;
}

.role_User .content {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
}

.userMessageCopyButton {
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  opacity: 0;
  /* Don't intercept clicks/text-selection while hidden — only bubble hover or
     keyboard focus re-enables hit testing below. */
  pointer-events: none;
  transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.role_User:hover .userMessageCopyButton {
  opacity: 0.7;
  pointer-events: auto;
}

.role_User:hover .userMessageCopyButton:hover {
  opacity: 1;
  background: var(--hover-bg);
  border-color: var(--divider);
  color: var(--text-primary);
}

.userMessageCopyButton:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

/* Assistant messages — clean prose, no chrome */
.role_Assistant {
  background: transparent;
  padding: 6px 2px;
}

/* When the message leads with a Thinking block, that block already
   carries its own 4px top margin — don't stack the message's 6px top
   padding on top of it, or the Thinking box ends up farther below the
   preceding entry (skill marker, tool-call group, …) than those
   entries sit from one another. */
.messageLeadingThinking {
  padding-top: 0;
}

/* System messages — subtle inline pill */
.role_System {
  background: var(--chat-system-bg);
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  border-radius: 20px;
  padding: 5px 14px;
  align-self: center;
  max-width: 80%;
  margin: 12px 0;
}

/*
 * Multi-line system messages (e.g. /plan open dumping a plan file) need a
 * card treatment instead of the single-line pill — lists, headings, and
 * code fences don't read centered.
 */
.role_System_block {
  background: var(--chat-system-bg);
  text-align: left;
  font-size: 13px;
  color: var(--text-primary);
  border-radius: 10px;
  padding: 12px 16px;
  align-self: stretch;
  max-width: 100%;
  margin: 12px 0;
}

.role_System_block .content {
  text-align: left;
}

/* Role labels */
.roleLabel {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-faint);
  margin-bottom: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.roleLabel::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--accent-primary-rgb), 0.4);
  flex-shrink: 0;
}

.role_Assistant .roleLabel {
  display: none;
}

.role_System .roleLabel {
  display: none;
}

/* Per-element markdown typography (h1–h6, tables, code blocks, lists, callouts,
 * file-path links, etc.) lives in MessageMarkdown.module.css so every surface
 * that renders <MessageMarkdown> — chat, Files-tab preview, attachment cards —
 * gets the same rendering. ChatPanel.module.css only carries chat-specific
 * concerns (the chat-baseline typography below, role variants on .content
 * higher up, and the search-mark overlay below). */

/* Chat-baseline typography. MessageMarkdown's `.body` wrapper deliberately
 * doesn't set font-size / line-height / color so each surface can pick its
 * own scale — chat opts into the 14px / 1.7 baseline here; the markdown
 * `em`-relative heading sizes inside `.body` are computed against this. */
.content {
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;
  color: var(--text-primary);
}

.authFailureText {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

.authFailureResolvedText {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

.authResolvedLabel {
  color: var(--status-running);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Cmd/Ctrl+F search highlights. Scoped to .messages with :global() so the
   wrapper components in this folder (and the post-render DOM walker in
   HighlightedMessageMarkdown) can style raw <mark> tags without needing to
   import CSS modules.

   Critical: every property here must be width-neutral. Padding, margins,
   border, and bolder font-weight all change inline metrics — when the
   user types, marks appear/disappear per keystroke and any width-changing
   style reflows the surrounding text. The user perceives this as text
   "jumping around" with every keystroke. Background color, text color,
   and box-shadow do not affect layout, so they're safe. */
.messages :global(mark.cc-search-match) {
  background: var(--accent-bg-strong);
  color: inherit;
  /* No padding, border-radius (with padding), border, margin, or font-
     weight change here — see comment above. The flat background reads
     fine because matched text sits flush against accent-tinted bg. */
}

.messages :global(mark.cc-search-match.cc-search-match-active) {
  background: var(--accent-primary);
  color: var(--on-accent);
  /* box-shadow is render-only (no layout impact) so we use it to add a
     subtle ring around the active match without shifting any character.
     Bold weight would be more visually prominent but bold metrics are
     wider than regular, which would reflow text every time the user
     cycles to a new match. */
  box-shadow: 0 0 0 1px var(--accent-primary);
}

/* Processing indicator */
.processing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  background: rgba(var(--accent-primary-rgb), 0.03);
  border-radius: 8px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.06);
  margin-top: 4px;
}

.spinnerWrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--accent-primary);
  filter: drop-shadow(0 0 3px rgba(var(--accent-primary-rgb), 0.4));
}

.spinner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(currentColor 225deg, transparent 225deg);
  mask: radial-gradient(circle closest-side, transparent calc(100% - 2px), black calc(100% - 2px));
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 2px), black calc(100% - 2px));
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

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

/* Pending steering prompt indicator */
.pendingSteer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12px;
  background: rgba(var(--accent-primary-rgb), 0.04);
  border-radius: 6px;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.1);
  border-left: 2px solid rgba(var(--accent-primary-rgb), 0.5);
  margin-top: 4px;
  animation: pendingSteerPulse 2s ease-in-out infinite;
}

.pendingSteerIcon {
  display: inline-flex;
  align-items: center;
  color: var(--accent-primary);
  opacity: 0.7;
  flex-shrink: 0;
}

.pendingSteerLabel {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-primary);
  opacity: 0.8;
  flex-shrink: 0;
  white-space: nowrap;
}

.pendingSteerContent {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--text-muted);
}

@keyframes pendingSteerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .pendingSteer {
    animation: none;
  }
}

.elapsed {
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}

.compactingLabel {
  color: var(--accent-primary);
  font-size: 12px;
  font-weight: 500;
  animation: compactingPulse 1.6s ease-in-out infinite;
}

@keyframes compactingPulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Tool activities — compact inline annotations */
.toolActivities {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.turnSummary {
  border: 1px solid var(--divider);
  border-radius: 6px;
  margin: 4px 0;
  transition: border-color var(--transition-fast);
  overflow: hidden;
  flex-shrink: 0;
}

.turnSummary:hover {
  border-color: var(--text-faint);
}

.turnHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  font-size: 12px;
  transition: background var(--transition-fast);
}

.turnHeader[role="button"] {
  cursor: pointer;
}

.turnSummary:hover > .turnHeader {
  background: var(--hover-bg-subtle);
}

.turnLabel {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
}

.turnActivities {
  border-top: 1px solid var(--divider);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.turnActivities .toolActivity {
  border: none;
  border-radius: 0;
}

.turnActivities .toolHeader {
  padding: 2px 8px;
  cursor: default;
}

.turnSummaryWrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 4px 0;
}

.turnSummaryWrapper > .turnSummary {
  margin: 0;
}

.inlineTurnActivities {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.inlineTurnActivities .toolActivity {
  border: none;
  border-radius: 0;
}

.inlineTurnActivities .toolHeader {
  padding: 2px 8px;
  cursor: default;
}

.inlineTurnActivities .toolHeader:hover {
  background: transparent;
}

/* Footer below a completed turn: elapsed time + copy + fork actions. */
.turnFooter {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 2px;
  color: var(--text-dim);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.messageTurnFooter {
  margin: -2px 0 6px;
}

.turnFooterElapsed {
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.turnFooterTokens {
  font-family: var(--font-mono);
  color: var(--text-dim);
}

.turnFooterDot {
  color: var(--text-faint);
  user-select: none;
}

.turnFooterButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.turnFooterButton:hover {
  color: var(--text);
  background: var(--hover-bg-subtle);
}

.turnFooterButton:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.turnEditSummary {
  border: 1px solid var(--divider);
  border-radius: 6px;
  margin: 4px 0;
  /* The messages list is `display: flex; flex-direction: column;
   * overflow: auto`. Per the flex spec, a flex item whose own
   * `overflow` is not `visible` gets `min-height: 0` implicitly —
   * the `overflow: hidden` we set for the rounded corners would
   * collapse this card to its border height (~2px) and hide the file
   * list entirely. Pin `flex-shrink: 0` so the card always lays out
   * at its intrinsic content height. */
  flex-shrink: 0;
  overflow: hidden;
  background: var(--chat-input-bg);
}

.turnEditSummaryHeader {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.turnEditSummaryHeader[aria-expanded="true"] {
  border-bottom-color: var(--divider);
}

.turnEditSummaryHeader:hover {
  background: var(--bg-hover);
}

.turnEditSummaryTitle {
  flex: 1;
  min-width: 0;
}

.turnEditFileList {
  display: flex;
  flex-direction: column;
}

.turnEditFile {
  border-top: 1px solid var(--divider);
}

.turnEditFile:first-child {
  border-top: none;
}

/* Wraps the file-row button (path + stats) plus the trailing
 * action cluster (popout + chevron) so they sit on the same baseline.
 * Nested buttons aren't valid HTML, so the actions live as siblings
 * of the main row button. */
.turnEditFileRowWrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}

.turnEditFileRowWrap:hover {
  background: var(--hover-bg-subtle);
}

.turnEditFileRow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.turnEditFileRow:hover:not(:disabled) {
  color: var(--text-primary);
}

.turnEditFileRow:disabled {
  cursor: default;
  opacity: 1;
}

.turnEditFilePath {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turnEditFileActions {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 6px;
  flex: 0 0 auto;
}

.turnEditFileActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.turnEditFileActionBtn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
}

.turnEditDiffPreview {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 320px;
  border-top: 1px solid var(--divider);
  background: var(--chat-bg);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  animation: editDiffReveal 0.16s ease-out;
}

.turnEditDiffState {
  border-top: 1px solid var(--divider);
  padding: 8px 10px;
  background: var(--chat-bg);
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 12px;
  animation: editDiffReveal 0.16s ease-out;
}

.turnEditDiffLine {
  display: grid;
  grid-template-columns: 40px 40px 18px minmax(0, 1fr);
  min-height: 22px;
  color: var(--text-dim);
}

.turnEditDiffLineAdded {
  background: var(--diff-added-bg);
}

.turnEditDiffLineRemoved {
  background: var(--diff-removed-bg);
}

.turnEditDiffLineNumber {
  padding-right: 8px;
  text-align: right;
  color: var(--diff-line-number);
  user-select: none;
  border-right: 1px solid var(--divider);
}

.turnEditDiffPrefix {
  text-align: center;
  color: var(--text-faint);
}

.turnEditDiffLineAdded .turnEditDiffPrefix {
  color: var(--diff-added-text);
  font-weight: 600;
}

.turnEditDiffLineRemoved .turnEditDiffPrefix {
  color: var(--diff-removed-text);
  font-weight: 600;
}

/* Hunk header row that breaks up multi-region diffs vertically. The
 * `@@ -OLD,N +NEW,M @@` text sits on a faint band so it reads as a
 * separator without competing with added/removed rows. */
.turnEditDiffHunk {
  padding: 4px 12px;
  background: var(--hover-bg-subtle);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  color: var(--diff-hunk-header);
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: pre;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turnEditDiffContent {
  min-width: 0;
  padding-left: 4px;
  overflow: hidden;
  color: var(--text-primary);
  font: inherit;
  text-overflow: ellipsis;
  white-space: pre;
}

.inlineEditSummary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.inlineEditIcon {
  flex: 0 0 auto;
  color: var(--text-faint);
}

.inlineEditVerb {
  flex: 0 0 auto;
  color: var(--text-dim);
}

.inlineEditPath {
  flex: 1 1 0;
  min-width: 0;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  color: var(--accent-primary);
}

.inlineEditPathButton {
  text-align: left;
}

.changeStats {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.changeStatsValue {
  display: inline-block;
  animation-duration: 0.24s;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.changeStatsValueUp {
  animation-name: changeStatRise;
}

.changeStatsValueDown {
  animation-name: changeStatDrop;
}

.changeStatsAdded {
  color: var(--diff-added-text);
}

.changeStatsRemoved {
  color: var(--diff-removed-text);
}

@keyframes changeStatRise {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes changeStatDrop {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes editDiffReveal {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.taskProgressBar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
}

.taskProgressTrack {
  flex: 1;
  height: 4px;
  background: var(--divider);
  border-radius: 2px;
  overflow: hidden;
}

.taskProgressFill {
  height: 100%;
  background: var(--accent-dim);
  border-radius: 2px;
  transition: width 0.4s ease;
}

.taskProgressDone {
  background: var(--badge-done);
}

.taskProgressLabel {
  font-size: 11px;
  color: var(--text-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.toolActivity {
  border: 1px solid var(--divider);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.toolActivity:hover {
  border-color: var(--text-faint);
}

.toolHeader {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  text-align: left;
  transition: background var(--transition-fast);
}

.toolHeader:hover {
  background: var(--hover-bg-subtle);
}

.toolChevron {
  font-family: var(--font-mono);
  width: 10px;
  color: var(--text-faint);
  transition: transform var(--transition-fast);
}

.toolDetailsToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: -1px 0;
  padding: 0;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}

.toolDetailsToggle:hover {
  color: var(--text-dim);
  background: var(--hover-bg-subtle);
}

.toolDetailsToggle:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 1px;
}

.toolDetailsToggle svg {
  transition: transform var(--transition-fast);
}

.toolDetailsToggleExpanded svg {
  transform: rotate(90deg);
}

.toolName {
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
}

.toolSummary {
  color: var(--text-faint);
  font-family: var(--font-mono);
  flex: 1 1 0;
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  min-width: 0;
  font-size: 11px;
}

.toolSummary::before {
  content: "  ";
  color: var(--text-faint);
}

/* "<skill> activated" marker — its own transcript entry, sized to match
   the tool-group and thinking blocks it sits among (mirrors `.turnSummary`
   + `.turnHeader` / ThinkingBlock `.container` + `.header`). Non-interactive,
   so no pointer cursor or expand chevron. */
.skillBlock {
  border: 1px solid var(--divider);
  border-radius: 6px;
  margin: 4px 0;
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color var(--transition-fast);
}

.skillBlock:hover {
  border-color: var(--text-faint);
}

/* Inline tool-display mode: shed the box so the marker sits flush with
   the compact, borderless rows around it (mirrors `.containerInline` /
   `.inlineTurnActivities .toolActivity`). */
.skillBlockInline {
  border: none;
  border-radius: 0;
  margin: 0;
}

.skillBlockInline:hover {
  border-color: transparent;
}

.skillActivation {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
}

.skillActivationInline {
  padding: 2px 8px;
}

.skillActivationIcon {
  flex-shrink: 0;
  color: var(--accent-primary);
}

.skillActivationName {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
}

.skillActivationSuffix {
  color: var(--text-faint);
}

.toolDetailsCode {
  max-height: 320px;
  margin: 0;
  padding: 10px 12px 12px 32px;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--text-dim);
  background: var(--chat-input-bg);
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  position: relative;
}

.toolDetailsCode code {
  display: block;
  min-width: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.agentToolProgress {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 8px 4px 8px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.agentToolStatus {
  color: var(--text-dim);
}

.agentToolGroup {
  border: 1px solid var(--divider);
  border-radius: 6px;
}

.agentToolGroupInline {
  border: none;
  border-radius: 0;
}

.agentToolGroupHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 2px 10px;
  min-width: 0;
}

.agentToolGroupHeader[role="button"] {
  cursor: pointer;
}

.agentToolGroupInline .agentToolGroupHeader {
  padding: 2px 8px;
}

.agentToolCallList {
  display: grid;
  gap: 2px;
  padding: 0;
}

.agentToolGroupInline .agentToolCallList {
  padding: 0 8px 2px 24px;
}

.agentNestedChat {
  display: grid;
  gap: 8px;
  padding: 6px 8px 8px 24px;
}

.agentNestedMessage,
.agentNestedSection {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.agentNestedRole {
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
}

.agentNestedText {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agentNestedMarkdown {
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}

.agentNestedMarkdown > *:first-child {
  margin-top: 0;
}

.agentNestedMarkdown > *:last-child {
  margin-bottom: 0;
}

.agentToolCall {
  display: flex;
  min-width: 0;
  gap: 8px;
  align-items: flex-start;
  color: var(--text-faint);
  font-family: var(--font-mono);
  font-size: 11px;
}

.agentToolCallName {
  flex: 0 0 auto;
}

.agentToolCallSummary {
  flex: 1 1 0;
  min-width: 0;
  color: var(--text-faint);
  overflow: visible;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.agentToolCallSummary::before {
  content: " ";
}

.agentToolCallStatus {
  flex: 0 0 auto;
  color: var(--text-dim);
}

.toolContent {
  padding: 10px 12px;
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
  border-top: 1px solid var(--divider);
  background: var(--chat-input-bg);
  line-height: 1.5;
}

.toolDetail {
  padding: 6px 10px;
  margin: 0;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-dim);
  max-height: 150px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.4;
  border-top: 1px solid var(--divider);
  background: var(--chat-input-bg);
}

/* Bottom queue popover */
.queuedPopover {
  width: min(calc(100% - 48px), 920px);
  max-height: 180px;
  margin: -10px auto 8px;
  padding: 8px;
  background: var(--chat-input-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: 5;
  flex-shrink: 0;
}

.queuedPopoverHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 24px;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--divider);
}

.queuedList {
  display: flex;
  flex-direction: column;
  max-height: 132px;
  overflow-y: auto;
  padding-top: 4px;
}

.queuedLabel {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  white-space: nowrap;
}

.queuedClearAll {
  border: none;
  background: transparent;
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.queuedClearAll:hover {
  color: var(--text-primary);
  background: var(--hover-bg-subtle);
}

.queuedMessage {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 5px 4px 5px 8px;
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--text-muted);
}

.queuedMessage:hover {
  background: var(--hover-bg-subtle);
}

.queuedMessageEditing {
  align-items: flex-start;
  background: var(--hover-bg-subtle);
}

.queuedIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.queuedContent {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  min-width: 0;
}

.queuedEditForm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.queuedEditTextarea {
  flex: 1;
  min-width: 0;
  min-height: 54px;
  max-height: 120px;
  padding: 7px 9px;
  resize: vertical;
  border: 1px solid rgba(var(--accent-primary-rgb), 0.28);
  border-radius: var(--radius-md);
  background: var(--chat-input-bg);
  color: var(--text-primary);
  font: inherit;
  line-height: 1.45;
}

.queuedEditTextarea:focus {
  outline: 2px solid rgba(var(--accent-primary-rgb), 0.38);
  outline-offset: 1px;
}

.queuedEditActions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.queuedEdit,
.queuedEditSave,
.queuedEditCancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-faint);
}

.queuedEdit:hover {
  color: var(--text-primary);
  background: var(--hover-bg-subtle);
}

.queuedEditSave {
  color: var(--accent-primary);
}

.queuedEditSave:hover:not(:disabled) {
  background: var(--accent-bg);
  border-color: rgba(var(--accent-primary-rgb), 0.24);
}

.queuedEditSave:disabled {
  cursor: default;
  opacity: 0.45;
}

.queuedEditCancel:hover {
  color: var(--text-primary);
  background: var(--hover-bg-subtle);
}

.queuedSteer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.queuedSteer:hover:not(:disabled) {
  background: var(--accent-bg);
  border-color: rgba(var(--accent-primary-rgb), 0.24);
}

.queuedSteer:disabled {
  cursor: default;
  opacity: 0.55;
}

.queuedSteerSpinner {
  animation: spin 0.8s linear infinite;
}

.queuedCancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-faint);
}

.queuedCancel:hover {
  color: var(--accent-error);
  background: var(--accent-error-bg);
  border-color: var(--accent-error-border);
}

/* Input area — Composer wrapper */
.inputArea {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--chat-input-bg);
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  margin: 0 6px 6px;
  outline: none;
}

.inputArea:focus-within {
  border-color: rgba(var(--accent-primary-rgb), 0.5);
}

.inputAreaShell {
  border-color: color-mix(in srgb, var(--status-running) 50%, transparent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--status-running) 12%, transparent);
}

.inputAreaShell:focus-within {
  border-color: color-mix(in srgb, var(--status-running) 72%, transparent);
}

.inputControls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
}

.inputControlsLeft {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.inputControlsRight {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
}

.inputTextWrap {
  position: relative;
}

.inputTextWrapShell {
  background: color-mix(in srgb, var(--status-running) 4%, transparent);
}

.inputModePrefix {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 7px;
  border: 1px solid color-mix(in srgb, var(--status-running) 35%, transparent);
  border-radius: var(--radius-md);
  background: var(--chat-input-bg);
  color: var(--status-running);
  font-size: var(--fs-xs);
  font-weight: 600;
  pointer-events: none;
}

.inputModeBang {
  font-family: var(--font-mono);
  font-weight: 700;
}

.inputHighlight {
  position: absolute;
  inset: 0;
  min-height: var(--composer-h, 52px);
  max-height: max(160px, var(--composer-h, 52px));
  overflow: hidden;
  padding: 14px 18px 8px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  pointer-events: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 14px 18px 8px;
  color: var(--text-primary);
  font-size: var(--fs-md);
  font-family: inherit;
  line-height: var(--lh-body);
  outline: none;
  resize: none;
  min-height: var(--composer-h, 52px);
  max-height: max(160px, var(--composer-h, 52px));
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.inputWithHighlight {
  color: transparent;
  caret-color: var(--text-primary);
}

.inputShellMode {
  padding-left: 104px;
  font-family: var(--font-mono);
}

.input:focus-visible {
  box-shadow: none;
}

.input::placeholder {
  color: var(--text-faint);
}

.inputPlanMode {
  border-bottom: 2px dashed rgba(var(--accent-primary-rgb), 0.5);
  background: rgba(var(--accent-primary-rgb), 0.04);
}

.inputPlanMode:focus {
  border-bottom-color: rgba(var(--accent-primary-rgb), 0.6);
}

.ultrathinkChar {
  color: var(--ultrathink-color);
}

.ultrathinkCharAnimated {
  animation: ultrathink-shimmer 1.8s ease-in-out infinite;
}

@keyframes ultrathink-shimmer {
  0%, 100% {
    color: var(--ultrathink-color);
  }
  50% {
    color: var(--ultrathink-shimmer);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ultrathinkCharAnimated {
    animation: none;
  }
}

.sendBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-primary);
  border: none;
  color: var(--app-bg);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast);
  box-shadow: 0 2px 8px rgba(var(--accent-primary-rgb), 0.35);
}

.sendBtn:hover:not(:disabled) {
  background: var(--accent-dim);
}

.sendBtn:active:not(:disabled) {
  filter: brightness(0.95);
}

.sendBtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: saturate(0.5);
}

.sendBtnStop {
  background: var(--hover-bg-subtle);
  border: 1px solid var(--divider);
  color: var(--text-muted);
  box-shadow: none;
}

.sendBtnStop:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: var(--text-dim);
  color: var(--text-primary);
  filter: none;
}

.sendBtnStop:active:not(:disabled) {
  filter: brightness(0.95);
}

.voiceBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--hover-bg-subtle);
  color: var(--text-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.voiceBtn:hover:not(:disabled) {
  background: var(--hover-bg);
  border-color: rgba(var(--accent-primary-rgb), 0.45);
  color: var(--text-primary);
}

.voiceBtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.voiceBtnRecording {
  background: rgba(var(--accent-primary-rgb), 0.14);
  border-color: rgba(var(--accent-primary-rgb), 0.55);
  color: var(--accent-primary);
}

.voiceBtnTranscribing {
  background: var(--panel-bg);
  border-color: var(--status-running);
  color: var(--text-primary);
}

.voiceRecordingStatus,
.voiceStatusText,
.voiceErrorBtn {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
  background: var(--hover-bg-subtle);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.voiceStatusText {
  max-width: min(300px, 38vw);
}

.voiceStatusText span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.voiceStatusSpinner {
  flex-shrink: 0;
  animation: voice-spin 0.9s linear infinite;
}

.voiceErrorBtn {
  cursor: pointer;
  color: var(--status-stopped);
  background: color-mix(in srgb, var(--status-stopped) 8%, transparent);
  border-color: var(--status-stopped);
  max-width: min(280px, 32vw);
  font-size: var(--fs-xs);
  animation: voice-error-fade-in 180ms ease-out;
}

.voiceErrorBtn:hover {
  background: color-mix(in srgb, var(--status-stopped) 14%, transparent);
}

.voiceErrorIcon {
  flex-shrink: 0;
}

.voiceErrorText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

@keyframes voice-error-fade-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.voiceWaveform {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: 16px;
  height: 14px;
}

.voiceWaveform span {
  display: block;
  width: 3px;
  min-height: 4px;
  border-radius: 2px;
  background: var(--accent-primary);
}

@keyframes voice-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .voiceStatusSpinner {
    animation: none;
  }
}

/* -- Attachment UI -- */

.inputDragActive {
  outline: 2px dashed var(--accent-primary);
  outline-offset: -2px;
  background: rgba(var(--accent-primary-rgb), 0.04);
}

.attachmentStrip {
  display: flex;
  gap: 8px;
  padding: 4px 0 8px;
  overflow-x: auto;
}

.attachmentThumb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--divider);
  flex-shrink: 0;
}

.attachmentThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}

.attachmentRemove {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--overlay-bg);
  color: var(--text-primary);
  border: none;
  border-radius: var(--radius-pill);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}

.attachmentRemove:hover {
  background: var(--overlay-bg-heavy);
}

.attachBtn {
  background: var(--hover-bg-subtle);
  border: 1px solid var(--divider);
  color: var(--text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  padding: 0;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  flex-shrink: 0;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.attachBtn:hover {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: var(--text-dim);
}

.attachBtnActive {
  background: var(--hover-bg);
  color: var(--text-primary);
  border-color: var(--text-dim);
}

.attachBtnWrap {
  position: relative;
}

.inProgressNote {
  color: var(--accent-dim);
}

/* -- Inline message images -- */

.messageImages {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.messageImage {
  max-width: 300px;
  max-height: 300px;
  border-radius: 8px;
  border: 1px solid var(--divider);
  object-fit: contain;
  cursor: pointer;
}

.messagePdf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--divider);
  background: var(--hover-bg-subtle);
  color: var(--text-muted);
  font-size: 13px;
}

.textFileBadge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 2px;
  background: var(--hover-bg-subtle);
  color: var(--text-muted);
  padding: 4px;
  text-align: center;
  overflow: hidden;
}

.textFileName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 9px;
}

.textFileSize {
  font-size: 9px;
  color: var(--text-faint);
}

.loadingOlder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-muted);
}

.loadingOlderSpinner {
  animation: spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .loadingOlderSpinner {
    animation: none;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
