/**
 * Agent panel (TaskPanel_new).
 *
 * Every colour here is a `--fc-*` theme token, so the panel follows whichever
 * theme is active — the token values are swapped at the document root by
 * `theme.ts`, which ships seven of them (dark, light, gruvbox, tokyo-night,
 * kanagawa-lotus, shield, shield-light), not just dark and light.
 *
 * Prefixed `fc-agent-` rather than `fc-task-` on purpose: TaskPanel.css already
 * owns the `fc-task-` namespace and the two panels would otherwise collide.
 */

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

.fc-agent-panel {
  display: flex;
  flex-direction: column;
  /* Fills the resizable panel rather than imposing a fixed 450px card. */
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--fc-bgPanel);
  color: var(--fc-text);
  font-family: inherit;
}

/* ── Header ─────────────────────────────────────────────── */

.fc-agent-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--fc-border);
}

.fc-agent-heading {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.fc-agent-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--fc-text);
  /* Fluid width means a long objective must truncate, not overflow. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-agent-subtitle {
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--fc-textMuted);
}

.fc-agent-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.fc-agent-icon-button {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--fc-textMuted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.fc-agent-icon-button:hover:not(:disabled) {
  background: var(--fc-bgHover);
  color: var(--fc-text);
}

/* The pencil doubles as Start Task on the intro screen, where it is disabled
   until the draft is valid — so the state has to be visible, and the hover
   affordance above has to stop firing. */
.fc-agent-icon-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Body ───────────────────────────────────────────────── */

.fc-agent-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 20px 0;
}

.fc-agent-prompt-row {
  display: flex;
  justify-content: flex-end;
}

.fc-agent-prompt {
  width: 100%;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--fc-bgHover);
  color: var(--fc-text);
  font-size: 14px;
}

/* ── Collapsible sections ───────────────────────────────── */

.fc-agent-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fc-agent-section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.fc-agent-section-title {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: 600;
  color: var(--fc-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-agent-section-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fc-agent-elapsed {
  font-size: 12.5px;
  color: var(--fc-textMuted);
  white-space: nowrap;
}

.fc-agent-caret {
  font-size: 11px;
  color: var(--fc-textMuted);
  transition: transform 120ms ease;
}

.fc-agent-caret.is-collapsed {
  transform: rotate(180deg);
}

.fc-agent-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 2px solid var(--fc-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: fc-agent-spin 0.9s linear infinite;
}

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

/* Indented tree branch shared by the step list and the file list. */
.fc-agent-branch {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
  margin-left: 7px;
  padding-left: 26px;
  border-left: 1px solid var(--fc-borderLight);
}

/* ── Steps ──────────────────────────────────────────────── */

.fc-agent-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0 7px 18px;
}

.fc-agent-step-label {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.fc-agent-step-icon {
  width: 14px;
  flex-shrink: 0;
  color: var(--fc-textDim);
  font-size: 12px;
  text-align: center;
}

.fc-agent-step-text {
  font-size: 13px;
  color: var(--fc-textMuted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-agent-step-time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--fc-textDim);
  white-space: nowrap;
}

/* A pause, a failure, or a waiting Run, on the line of the conversation where it happened. */
.fc-agent-marker {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--fc-textMuted);
}

.fc-agent-marker .fc-agent-spinner {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}

/* ── Changed files ──────────────────────────────────────── */

.fc-agent-files {
  margin-top: 14px;
}

.fc-agent-files-icon {
  width: 16px;
  flex-shrink: 0;
  color: var(--fc-textMuted);
  font-size: 13px;
  text-align: center;
}

.fc-agent-files-count {
  font-size: 14px;
  color: var(--fc-text);
  white-space: nowrap;
}

.fc-agent-files-count b {
  font-weight: 600;
}

.fc-agent-files-breakdown {
  color: var(--fc-textMuted);
}

.fc-agent-file-list {
  max-height: 216px;
  overflow: hidden;
  /* Fades the overflowing tail instead of cutting a row in half. */
  mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 78%, transparent 100%);
}

.fc-agent-file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 0;
}

.fc-agent-file-status {
  width: 48px;
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--fc-success);
}

.fc-agent-file-status.is-deleted {
  color: var(--fc-error);
}

.fc-agent-file-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--fc-textMuted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Footer input ───────────────────────────────────────── */

.fc-agent-footer {
  flex-shrink: 0;
  margin-top: auto;
  padding: 16px 18px 20px;
}

.fc-agent-input {
  border: 1.5px solid var(--fc-accent);
  border-radius: 14px;
  background: var(--fc-bgInput);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fc-accent) 12%, transparent);
}

.fc-agent-input-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 12px 12px;
}

.fc-agent-pause {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fc-text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.fc-agent-pause-bars {
  display: flex;
  gap: 2px;
}

.fc-agent-pause-bars span {
  width: 3px;
  height: 11px;
  background: currentColor;
}

.fc-agent-stop {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--fc-accent);
  /* The arrow glyph paints from `currentColor`, so this is what keeps it legible
     against the filled disc — matching the stop square below it. */
  color: var(--fc-bgPanel);
  cursor: pointer;
}

.fc-agent-stop-square {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--fc-bgPanel);
}

/* ── Queued messages ────────────────────────────────────── */
/* Messages sent while the agent works sit on top of the composer, tucked slightly
   inside its edges so the tray reads as part of the same input. */

.fc-agent-queue {
  max-height: 176px;
  margin: 0 8px;
  padding: 4px 0;
  overflow-y: auto;
  list-style: none;
  border-radius: 12px 12px 0 0;
  background: color-mix(in srgb, var(--fc-text) 6%, var(--fc-bgPanel));
}

.fc-agent-queue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 35px;
  padding: 0 10px 0 12px;
  color: var(--fc-text);
  font-size: 13px;
}

.fc-agent-queue-icon {
  flex-shrink: 0;
  color: var(--fc-textMuted);
}

/* A steered message waits on top of the tray for the agent's next step. */
.fc-agent-queue-row.is-steered .fc-agent-queue-icon {
  color: var(--fc-accent);
}

.fc-agent-queue-mark {
  flex-shrink: 0;
  padding: 0 4px;
  color: var(--fc-textMuted);
  font-size: 11.5px;
}

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

.fc-agent-queue-steer,
.fc-agent-queue-remove {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fc-textMuted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.fc-agent-queue-steer {
  margin-left: 6px;
  padding: 4px 6px;
}

.fc-agent-queue-steer:hover,
.fc-agent-queue-remove:hover {
  background: var(--fc-bgHover);
  color: var(--fc-text);
}

.fc-agent-queue-remove:hover {
  color: var(--fc-error);
}

.fc-agent-queue-steer:focus-visible,
.fc-agent-queue-remove:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 1px;
}

/* Stop asks before it removes the waiting messages, directly above the tray it empties. */
.fc-agent-stop-confirm {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0 8px 8px;
  padding: 11px 13px;
  border: 1px solid var(--fc-error);
  border-radius: 10px;
  background: color-mix(in srgb, var(--fc-error) 8%, var(--fc-bgPanel));
  font-size: 12.5px;
}

.fc-agent-stop-confirm:focus-visible {
  outline: none;
}

.fc-agent-stop-confirm-title {
  color: var(--fc-text);
  font-weight: 600;
}

.fc-agent-stop-confirm p {
  margin: 0;
  color: var(--fc-textMuted);
  line-height: 1.5;
}

.fc-agent-stop-confirm-actions {
  justify-content: flex-end;
}

/* ── Task states ───────────────────────────────────────── */

.fc-agent-empty {
  padding: 16px 14px;
  color: var(--fc-textMuted);
  font-size: 12px;
}

.fc-agent-subtitle {
  white-space: normal;
}

.fc-agent-status {
  font-weight: 600;
  color: var(--fc-text);
}

.fc-agent-status--review_ready {
  color: var(--fc-warning, #e6a23c);
}
.fc-agent-status--approved {
  color: var(--fc-success);
}
.fc-agent-status--rejected,
.fc-agent-status--failed,
.fc-agent-status--canceled {
  color: var(--fc-error);
}

/* Buttons */
.fc-agent-primary,
.fc-agent-secondary,
.fc-agent-danger {
  padding: 7px 13px;
  border: 1px solid var(--fc-border);
  border-radius: 8px;
  background: transparent;
  color: var(--fc-text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.fc-agent-primary {
  border-color: var(--fc-accent);
  background: var(--fc-accent);
  color: var(--fc-accentText);
  font-weight: 600;
}

.fc-agent-primary:hover:not(:disabled) {
  filter: brightness(1.1);
}
.fc-agent-secondary:hover:not(:disabled) {
  background: var(--fc-bgHover);
}
.fc-agent-danger {
  border-color: var(--fc-error);
  color: var(--fc-error);
}
.fc-agent-danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--fc-error) 12%, transparent);
}

.fc-agent-primary:disabled,
.fc-agent-secondary:disabled,
.fc-agent-danger:disabled,
.fc-agent-stop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fc-agent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-agent-message {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fc-text);
}

.fc-agent-message p {
  margin: 0;
  white-space: pre-wrap;
}

.fc-agent-message--system {
  color: var(--fc-textMuted);
  font-size: 12px;
  font-style: italic;
}

/* The prompt bubble holds its own text plus any attachments. */
.fc-agent-prompt {
  white-space: pre-wrap;
}

/* Failure + review */
.fc-agent-failure,
.fc-agent-review {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--fc-border);
  border-radius: 10px;
  font-size: 12.5px;
}

.fc-agent-failure {
  border-color: var(--fc-error);
  background: color-mix(in srgb, var(--fc-error) 8%, transparent);
}

.fc-agent-failure p,
.fc-agent-review p {
  margin: 0;
  color: var(--fc-textMuted);
  line-height: 1.5;
}

.fc-agent-failure-title {
  font-weight: 650;
  color: var(--fc-error);
}

.fc-agent-failure code {
  display: block;
  overflow-x: auto;
  padding: 7px;
  border-radius: 6px;
  background: var(--fc-bgSubtle, var(--fc-bgHover));
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.fc-agent-review h4 {
  margin: 0;
  font-size: 13px;
}
/* The review note reuses `.fc-agent-input`, so it stands in the footer with the
   Task composer's shell, borderless textarea and attach-row insets — same place,
   same shape. Only the row contents differ, so that is all this rule touches:
   the decisions are a left-aligned group, not a trailing one, and claiming the
   row leaves the `space-between` nothing to push them against. */
.fc-agent-review-input .fc-task-attach-row .fc-agent-actions {
  flex: 1;
}

.fc-agent-error {
  padding: 8px 10px;
  border: 1px solid var(--fc-error);
  border-radius: 8px;
  background: color-mix(in srgb, var(--fc-error) 8%, transparent);
  color: var(--fc-error);
  font-size: 12px;
}

/* Step + change status marks */
.fc-agent-step-mark {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--fc-textDim);
}

.fc-agent-step-mark.is-completed {
  background: var(--fc-success);
}
.fc-agent-step-mark.is-failed {
  background: var(--fc-error);
}
.fc-agent-step-mark.is-paused {
  background: var(--fc-warning, #e6a23c);
}

.fc-agent-file-status.is-deleted {
  color: var(--fc-error);
}
.fc-agent-file-status.is-modified {
  color: var(--fc-warning, #e6a23c);
}
.fc-agent-file-status.is-renamed {
  color: var(--fc-textMuted);
}

/* Resume affordance mirrors the pause bars. */
.fc-agent-play-mark {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 9px solid currentColor;
}

/* The footer hosts the shared TaskComposer, which brings its own textarea. */
.fc-agent-input .fc-task-composer,
.fc-agent-input textarea {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--fc-text);
  font: inherit;
  font-size: 14px;
  padding: 14px 16px 8px;
  resize: none;
  outline: none;
}

/* ── Header overflow menu ───────────────────────────────── */
/* Anchors to the design's existing ⋯ button. Secondary Task actions live here
   so the body keeps its shape: prompt, activity, changed files, composer. */

.fc-agent-header-actions {
  position: relative;
}

.fc-agent-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 172px;
  padding: 4px;
  border: 1px solid var(--fc-border);
  border-radius: 9px;
  background: var(--fc-bgPanel);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.28);
}

.fc-agent-menu button {
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--fc-text);
  font: inherit;
  font-size: 12.5px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.fc-agent-menu button:hover {
  background: var(--fc-bgHover);
}
.fc-agent-menu button.is-danger {
  color: var(--fc-error);
}
.fc-agent-menu button.is-danger:hover {
  background: color-mix(in srgb, var(--fc-error) 12%, transparent);
}

/* TaskPanel.css gives the shared composer its own border and focus ring. Inside
   this panel the accent border already lives on `.fc-agent-input`, so the inner
   one would draw a second rounded rect on focus — suppress it. */
.fc-agent-input .fc-task-composer,
.fc-agent-input .fc-task-composer:focus-visible {
  border-color: transparent;
  outline: none;
}

/* The shared attach row sits inside the accent shell, so it loses the standalone
   panel's padding and reads as part of the input rather than a block below it.
   It now also hosts the submit controls, so it carries the bottom padding the
   design gave `.fc-agent-input-actions` when that row stood on its own. */
.fc-agent-input .fc-task-attach-row {
  padding: 0 12px 12px 16px;
}

/* Nested in the attach row, the actions group is no longer a full-width row of
   its own — `space-between` already pushes it right, so it drops the padding and
   the auto-margin that used to do that job. */
.fc-agent-input .fc-task-attach-row .fc-agent-input-actions {
  padding: 0;
}

/* Staged attachments are the first child inside the accent shell, so they take
   the same horizontal inset as the prompt rather than sitting on the border. */
.fc-agent-input .fc-task-reference-drafts {
  padding: 12px 16px 0;
}

/* Attachments and the bubble share one right-aligned column. */
.fc-agent-prompt-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: 85%;
  min-width: 0;
}

/* ── Intro copy ─────────────────────────────────────────
   Shown in place of a conversation before the first Task starts. */

.fc-agent-intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fc-agent-intro h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--fc-text);
}

.fc-agent-intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fc-textMuted);
}

.fc-agent-intro-modes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 0 0;
}

.fc-agent-intro-modes dt {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fc-text);
}

.fc-agent-intro-modes dd {
  margin: 2px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fc-textMuted);
}

/* ── Task history ───────────────────────────────────────
   Two screens that take over the whole panel: a grouped list of finished Tasks
   and a read-only view of one. Both reuse the panel's own tokens, so they
   follow every theme. */

.fc-agent-history-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 16px 20px 12px;
}

.fc-agent-history-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--fc-text);
}

/* Leading back arrow, sized past the 18px icon button so the glyph breathes. */
.fc-agent-back {
  width: 22px;
  height: 22px;
  margin-left: -4px;
}

.fc-agent-history-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0 16px 6px;
}

.fc-agent-history-search-icon {
  position: absolute;
  left: 10px;
  color: var(--fc-textMuted);
  font-size: 14px;
  pointer-events: none;
}

.fc-agent-history-search input {
  width: 100%;
  padding: 8px 10px 8px 30px;
  border: 1px solid var(--fc-border);
  border-radius: 9px;
  background: var(--fc-bgSubtle, var(--fc-bgHover));
  color: var(--fc-text);
  font: inherit;
  font-size: 13px;
}

.fc-agent-history-search input::placeholder {
  color: var(--fc-textMuted);
}

.fc-agent-history-search input:focus,
.fc-agent-history-search input:focus-visible {
  outline: none;
  border-color: var(--fc-accent);
}

.fc-agent-history-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 12px 16px;
}

.fc-agent-history-group + .fc-agent-history-group {
  margin-top: 14px;
}

.fc-agent-history-group-label {
  margin: 0;
  padding: 6px 8px 4px;
  color: var(--fc-textMuted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fc-agent-history-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: 8px 26px 8px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--fc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.fc-agent-history-row:hover,
.fc-agent-history-row:focus-visible {
  outline: none;
  background: var(--fc-bgHover);
}

/* One line only — a long objective is truncated rather than reflowing the row. */
.fc-agent-history-row-title {
  overflow: hidden;
  font-size: 13.5px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-agent-history-row-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--fc-textMuted);
  font-size: 11.5px;
}

/* The agent and model share the row with the stamp and the status, so they truncate first. */
.fc-agent-history-row-agent {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-agent-history-row-status.is-approved {
  color: var(--fc-success);
}

.fc-agent-history-row-status.is-rejected {
  color: var(--fc-error);
}

.fc-agent-history-row-status.is-canceled {
  color: var(--fc-textMuted);
}

/* Revealed on hover so the resting list stays quiet. */
.fc-agent-history-row-chevron {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  color: var(--fc-textMuted);
  font-size: 15px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.fc-agent-history-row:hover .fc-agent-history-row-chevron,
.fc-agent-history-row:focus-visible .fc-agent-history-row-chevron {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fc-agent-history-row-chevron {
    transition: none;
  }
}
/* ── Composer, attachments, answer text ─────────────────────
   Ported from TaskPanel.css: the shared composer shell, staged and sent attachments,
   and the rendered agent answer. */

.fc-task-composer {
  width: 100%;
  resize: vertical;
  border: 1px solid var(--fc-border);
  border-radius: 9px;
  padding: 10px 11px;
  box-sizing: border-box;
  background: var(--fc-surface-raised, var(--fc-bg));
  color: var(--fc-text);
  font: inherit;
  font-size: 12px;
  line-height: 1.45;
}

.fc-task-composer:focus,
.fc-task-composer:focus-visible {
  outline: none;
  box-shadow: none;
}

.fc-task-composer-shell {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: 1px dashed transparent;
  border-radius: 10px;
}

.fc-task-composer-shell.is-dragging {
  border-color: var(--fc-accent);
  background: color-mix(in srgb, var(--fc-accent) 7%, transparent);
}


/* ── Staged attachments ─────────────────────────────────
   Cards sit above the prompt in one horizontally scrolling row: images render
   as a bare thumbnail, everything else as an icon with its name and type. */

.fc-task-reference-drafts {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  /* The row scrolls rather than wrapping, so a long attachment list never
     pushes the prompt out of the composer. The top and right padding is what
     keeps the remove button's overhang visible: a scroll container clips at its
     padding box, so anything inside the padding still paints. */
  padding: 8px 8px 2px 0;
  scrollbar-width: thin;
}

.fc-task-reference-draft {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  height: 44px;
  border-radius: 10px;
  color: var(--fc-text);
}

.fc-task-reference-draft.is-file {
  max-width: 190px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--fc-border);
  background: var(--fc-bgPanel);
}

.fc-task-reference-draft.is-image {
  width: 44px;
  border: 1px solid var(--fc-border);
}

/* The thumbnail carries its own rounding. Clipping it on the card instead would
   also clip the remove button, which deliberately overhangs the corner. */
.fc-task-reference-draft.is-image img {
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
}

.fc-task-reference-glyph {
  display: flex;
  flex-shrink: 0;
  color: var(--fc-textMuted);
}

.fc-task-reference-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 1px;
}

.fc-task-reference-name {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fc-task-reference-draft small {
  color: var(--fc-textDim, var(--fc-text-muted));
  font-size: 10.5px;
}

/* An in-flight upload is dimmed; a failed one is called out in the error tone. */
.fc-task-reference-draft.is-uploading {
  opacity: 0.6;
}

.fc-task-reference-draft.is-failed {
  border-color: var(--fc-danger, #d84b4b);
}

.fc-task-reference-draft.is-failed small {
  color: var(--fc-danger, #d84b4b);
}

.fc-task-reference-retry {
  flex-shrink: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--fc-accent);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

/* Kept out of the card's flow so it can overlay a thumbnail, and revealed on
   hover or keyboard focus so the row stays as clean as the design. */
/* Floats on the card's top-right corner, half outside it — the row's padding
   is sized to keep that overhang from being clipped. */
.fc-task-reference-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--fc-border);
  border-radius: 50%;
  background: var(--fc-bgPanel);
  color: var(--fc-textMuted);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.22);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
  z-index: 999;
}

.fc-task-reference-remove:hover {
  color: var(--fc-text);
}

.fc-task-reference-draft:hover .fc-task-reference-remove,
.fc-task-reference-remove:focus-visible {
  opacity: 1;
}

/* Every card is positioned, so positioned siblings paint in DOM order and the
   next card would cover this one's overhanging remove button. Lifting the card
   under the cursor puts its button above the neighbours. */
.fc-task-reference-draft:hover,
.fc-task-reference-draft:focus-within {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fc-task-reference-remove {
    transition: none;
  }
}

.fc-task-attach {
  border: 0;
  background: transparent;
  color: var(--fc-textDim, var(--fc-text-muted));
  font: inherit;
  cursor: pointer;
}

.fc-task-attach-row {
  display: flex;
  align-items: center;
  /* Attach sits at the leading edge, the submit controls at the trailing one. */
  justify-content: space-between;
  gap: 8px;
  color: var(--fc-textDim, var(--fc-text-muted));
  font-size: 10px;
}

.fc-task-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--fc-accent);
  font-weight: 650;
}

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

.fc-task-markdown > :first-child {
  margin-top: 0;
}

.fc-task-markdown > :last-child {
  margin-bottom: 0;
}

.fc-task-markdown p,
.fc-task-markdown ul,
.fc-task-markdown ol,
.fc-task-markdown blockquote,
.fc-task-markdown pre,
.fc-task-markdown table,
.fc-task-markdown hr {
  margin: 0 0 9px;
}

.fc-task-markdown h4,
.fc-task-markdown h5,
.fc-task-markdown h6 {
  margin: 14px 0 6px;
  font-size: 12px;
  line-height: 1.35;
}

.fc-task-markdown h4,
.fc-task-markdown h5 {
  font-size: 13px;
}

.fc-task-markdown ul,
.fc-task-markdown ol {
  padding-left: 20px;
}

.fc-task-markdown li + li {
  margin-top: 3px;
}

.fc-task-markdown .contains-task-list,
.fc-task-markdown .task-list-item {
  list-style: none;
}

.fc-task-markdown .contains-task-list {
  padding-left: 0;
}

.fc-task-markdown blockquote {
  border-left: 2px solid var(--fc-border);
  padding-left: 9px;
  color: var(--fc-textDim, var(--fc-text-muted));
}

.fc-task-markdown a {
  color: var(--fc-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.fc-task-markdown code {
  border-radius: 4px;
  padding: 1px 4px;
  background: var(--fc-surface-raised, var(--fc-bg));
  font-family: var(--fc-font-mono, monospace);
  font-size: 0.92em;
}

.fc-task-markdown pre {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--fc-border);
  border-radius: 7px;
  padding: 9px 10px;
  background: var(--fc-surface-raised, var(--fc-bg));
}

.fc-task-markdown pre code {
  padding: 0;
  background: transparent;
  white-space: pre;
}

.fc-task-markdown table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.fc-task-markdown th,
.fc-task-markdown td {
  border: 1px solid var(--fc-border);
  padding: 4px 7px;
  text-align: left;
  white-space: nowrap;
}

.fc-task-markdown th {
  background: var(--fc-surface-raised, var(--fc-bg));
  font-weight: 650;
}

.fc-task-markdown hr {
  border: 0;
  border-top: 1px solid var(--fc-border);
}

/* Read-only twin of the inline pickers, shown once a Task is running: settled facts, not controls. */
.fc-task-setting-readonly {
  display: inline-flex;
  align-items: center;
  max-width: 160px;
  padding: 2px 0;
  overflow: hidden;
  color: var(--fc-textMuted);
  font-size: 13px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Sent-message attachments ───────────────────────────
   Thumbnails on their own row, then file cards in a two-column grid, both
   sitting above the message bubble. */

.fc-task-reference-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fc-task-reference-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.fc-task-reference-thumb,
.fc-task-reference-filecard {
  position: relative;
}

.fc-task-reference-thumb a {
  display: block;
  width: 76px;
  height: 76px;
}

.fc-task-reference-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.fc-task-reference-files {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* A lone file card would otherwise stretch to half the row and read as broken. */
.fc-task-reference-files:has(> :only-child) {
  grid-template-columns: minmax(0, 240px);
}

.fc-task-reference-filecard a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 44px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--fc-border);
  border-radius: 10px;
  background: var(--fc-bgPanel);
  color: var(--fc-text);
  text-decoration: none;
}

/* Revealed on hover or keyboard focus, mirroring the composer's remove button.
   Sits inside the card so the grid gap stays clean. */
.fc-task-reference-copy {
  position: absolute;
  top: -7px;
  right: -7px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--fc-border);
  border-radius: 50%;
  background: var(--fc-bgPanel);
  color: var(--fc-textMuted);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.22);
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.fc-task-reference-copy svg {
  width: 12px;
  height: 12px;
}

.fc-task-reference-thumb:hover .fc-task-reference-copy,
.fc-task-reference-filecard:hover .fc-task-reference-copy,
.fc-task-reference-copy:focus-visible {
  opacity: 1;
}

.fc-task-reference-thumb:hover,
.fc-task-reference-filecard:hover,
.fc-task-reference-thumb:focus-within,
.fc-task-reference-filecard:focus-within {
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .fc-task-reference-copy {
    transition: none;
  }
}


/* Groups the attach button with any leading composer controls, so the row's `space-between` splits leading
   from trailing rather than spreading every child evenly across the width. */
.fc-task-attach-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}