/* The Agent conversation, refined.
 *
 * Loaded after agent.css, it restyles the panel around a few rules: typography and whitespace carry the
 * hierarchy, not borders; the answer and the version it made are the focus; the work behind it is one quiet
 * line until asked for; the composer stays under the conversation. Only `--fc-*` tokens are used, so every theme
 * follows.
 *
 *   1. Conversation body     4. The work behind an answer, in motion
 *   3. Messages and replies  5. The version a result created
 *                            6. Footer notices, chat history, viewport
 */

/* ============================================================
   1. Conversation body
   ============================================================ */
.fc-agent-body.c-body { gap: 14px; padding: 16px 20px 20px; scrollbar-width: thin; }
.fc-agent-body.c-body > * { flex-shrink: 0; } /* the conversation scrolls; nothing in it may be squeezed */
.fc-agent-status--completed { color: var(--fc-success); }

/* ============================================================
   3. Messages
   ============================================================ */
.c-user-row { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.c-user-row .fc-agent-prompt-stack { max-width: 88%; }
.c-user { padding: 8px 13px; border-radius: 14px; background: color-mix(in srgb, var(--fc-text) 8%, transparent); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }

.c-assistant { font-size: 13.5px; line-height: 1.62; overflow-wrap: anywhere; }
.c-assistant .fc-task-markdown { font-size: inherit; line-height: inherit; }
.c-assistant .fc-task-markdown p { margin: 0 0 8px; }
.c-assistant .fc-task-markdown > :last-child { margin-bottom: 0; }
.c-assistant .fc-task-markdown ul { margin: 0 0 8px; padding-left: 18px; }
.c-assistant .fc-task-markdown li::marker { color: var(--fc-textDim); }
.c-assistant .fc-task-markdown code { padding: 1px 4px; border-radius: 4px; background: color-mix(in srgb, var(--fc-text) 8%, transparent); font-size: 12px; }
.c-assistant p { margin: 0 0 6px; }
.c-muted { color: var(--fc-textMuted); }
.c-assistant.c-failed { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.c-assistant.c-failed strong { font-weight: 600; }
.c-note { margin: 0; color: var(--fc-textMuted); font-size: 12.5px; }
.c-link { padding: 2px 0; border: 0; background: transparent; color: var(--fc-accent); font: inherit; font-size: 13px; cursor: pointer; }
.c-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The hover menu on a message. Quiet until the message is hovered or focused. */
.c-hover-menu { flex: 0 0 auto; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--fc-textMuted); font: inherit; font-size: 11px; letter-spacing: 1px; line-height: 1; cursor: pointer; opacity: 0; }
.c-hover-menu:hover { background: var(--fc-bgHover); color: var(--fc-text); }
.c-hover-menu:focus-visible { outline: 2px solid var(--fc-accent); opacity: 1; }
.c-user-row:hover .c-hover-menu, .c-user-row:focus-within .c-hover-menu,
.c-version-row:hover .c-hover-menu, .c-version-row:focus-within .c-hover-menu, .c-hover-menu[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .c-hover-menu { opacity: 1; } }

/* Where another direction began: a line, not a card. */
.c-direction { display: flex; align-items: center; gap: 10px; margin: 6px 0; color: var(--fc-textDim); font-size: 11.5px; }
.c-direction::before, .c-direction::after { content: ''; flex: 1 1 0; height: 1px; background: var(--fc-borderLight); }

/* ============================================================
   4. The work behind an answer
   ============================================================
   Motion is kept to a few quiet cues while the Agent works: a soft shine that passes over the word "Working", the icon of
   the current action breathing gently, a small pulsing dot on the step in progress, and a fade for anything new. The panel redraws on every event, so every looping cue takes its
   phase from the clock (`--phase`): a redraw picks the loop up where it was instead of restarting it. */
@keyframes c-shine { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes c-soft { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes c-beat { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes c-fade { from { opacity: 0; } to { opacity: 1; } }

.is-entering { animation: c-fade 0.2s ease-out both; }

.c-process-head { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 2px 0; border: 0; background: transparent; color: var(--fc-textMuted); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.c-process-head:hover { color: var(--fc-text); }
.c-process-head:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; border-radius: 4px; }
.c-process-title { flex: 0 0 auto; }
.c-process.is-active .c-process-title { color: var(--fc-text); font-weight: 500; }
.c-process-detail { display: inline-flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; color: var(--fc-textDim); text-overflow: ellipsis; white-space: nowrap; }
.c-process-glyphs { display: inline-flex; gap: 5px; margin-left: 2px; color: var(--fc-textDim); font-size: 12px; opacity: 0.85; }
.c-process-glyphs > span { display: inline-flex; }
.c-process-meta { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; color: var(--fc-textDim); font-family: var(--font-mono); font-size: 11.5px; }
.c-process-meta .fc-agent-caret { opacity: 0.7; }
.c-process-mark { display: inline-flex; flex: 0 0 14px; justify-content: center; color: var(--fc-success); font-size: 11px; }
.c-process-mark.is-failed, .c-process.is-failed .c-process-title { color: var(--fc-error); }

.c-steps { display: flex; flex-direction: column; gap: 6px; max-height: 232px; margin: 7px 0 0 6px; padding: 2px 0 2px 14px; overflow-y: auto; border-left: 1px solid var(--fc-borderLight); list-style: none; }
.c-steps li { display: flex; align-items: center; gap: 9px; color: var(--fc-textMuted); font-size: 12px; }
.c-step-icon { display: inline-flex; flex: 0 0 14px; justify-content: center; color: var(--fc-textDim); font-size: 13px; }
.c-steps li.is-live { color: var(--fc-text); }
.c-steps li.is-live .c-step-icon { color: var(--fc-accent); }
.c-step-mark { display: inline-flex; flex: 0 0 14px; justify-content: center; color: var(--fc-textDim); font-size: 10px; }
.c-steps li.is-failed .c-step-mark { color: var(--fc-error); }
.c-step-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-step-done { flex: 0 0 auto; color: var(--fc-success); font-size: 10px; }
.c-step-live { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--fc-accent); animation: c-beat 1.2s ease-in-out infinite; animation-delay: var(--phase, 0ms); }
.c-step-time { margin-left: auto; flex: 0 0 auto; color: var(--fc-textDim); font-family: var(--font-mono); font-size: 11px; }

/* "Working…" carries a soft light that passes over it, left to right, slowly. */
.c-process.is-active .c-process-title.c-shine {
  background: linear-gradient(100deg, var(--fc-textMuted) 40%, var(--fc-text) 50%, var(--fc-textMuted) 60%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: c-shine 2.4s linear infinite; animation-delay: var(--phase, 0ms);
}
/* The icon before it is the current action's. It fades to the next one and breathes while it is live. */
.c-process-icon { display: inline-flex; flex: 0 0 14px; justify-content: center; font-size: 13px; color: var(--fc-text); }
.c-icon-inner { display: inline-flex; }
.c-icon-inner.is-live { animation: c-soft 1.8s ease-in-out infinite; animation-delay: var(--phase, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .is-entering, .c-step-live, .c-icon-inner.is-live, .vm { animation: none; }
  .c-process.is-active .c-process-title.c-shine { animation: none; background: none; color: var(--fc-text); -webkit-text-fill-color: currentColor; }
}

/* ============================================================
   5. The version a result created: one card, name then files
   ============================================================ */
.c-version { display: flex; flex-direction: column; margin: 6px 0 2px; overflow: hidden; border: 1px solid var(--fc-borderLight); border-radius: 12px; background: color-mix(in srgb, var(--fc-text) 2.5%, transparent); }
.c-version.is-current { border-color: color-mix(in srgb, var(--fc-accent) 40%, var(--fc-borderLight)); }
.c-version.is-viewing { border-style: dashed; border-color: color-mix(in srgb, var(--fc-warning, #e6a23c) 60%, var(--fc-borderLight)); }
.c-version-row { display: flex; align-items: center; gap: 2px; min-width: 0; }
.c-version-row:hover { background: color-mix(in srgb, var(--fc-text) 3%, transparent); }
.c-version-open { display: flex; align-items: center; gap: 11px; flex: 1 1 auto; min-width: 0; padding: 9px 4px 9px 10px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.c-version-open:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: -2px; }
.c-version-thumb { width: 52px; height: 40px; border-radius: 7px; }
.c-version-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-version-name { overflow: hidden; font-size: 13.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.c-version-meta { display: flex; align-items: center; gap: 6px; color: var(--fc-textMuted); font-size: 11.5px; }
.c-version-state { color: var(--fc-accent); }
.c-version-state::before { content: '· '; color: var(--fc-textDim); }
.c-version-state.is-viewing { color: var(--fc-warning, #e6a23c); }
.c-version-row .c-hover-menu { margin-right: 8px; }

/* Changed files, in the shape coding agents use: what happened, then one row per file with its own counts. */
.fx { border-top: 1px solid var(--fc-borderLight); }
.fx-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 4px; color: var(--fc-textMuted); font-size: 12px; }
.fx-view { padding: 2px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--fc-textMuted); font: inherit; font-size: 12px; cursor: pointer; }
.fx-view:hover { background: var(--fc-bgHover); color: var(--fc-text); }
.fx-list { margin: 0; padding: 0 4px 5px; list-style: none; }
.fx-row { display: grid; grid-template-columns: 16px auto minmax(0, 1fr) auto 10px; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--fc-text); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; }
.fx-row:hover { background: var(--fc-bgHover); }
.fx-row:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: -2px; }
.fx-glyph { display: inline-flex; color: var(--fc-textDim); }
.fx-glyph.is-added { color: var(--fc-success); }
.fx-glyph.is-deleted { color: var(--fc-error); }
.fx-name { font-weight: 500; white-space: nowrap; }
.fx-name.is-deleted { color: var(--fc-textMuted); text-decoration: line-through; }
.fx-dir { min-width: 0; overflow: hidden; color: var(--fc-textDim); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.fx-stat { display: inline-flex; gap: 6px; font-family: var(--font-mono); font-size: 11.5px; }
.fx-add { color: var(--fc-success); }
.fx-del { color: var(--fc-error); }
.fx-chevron { display: inline-block; color: var(--fc-textDim); font-size: 14px; line-height: 1; transition: transform 0.12s; }
.fx-item.is-open .fx-chevron { transform: rotate(90deg); }
.fx-diff { margin: 2px 8px 8px 32px; overflow: auto; max-height: 230px; border: 1px solid var(--fc-borderLight); border-radius: 8px; background: var(--fc-bg); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; }
.fx-line { display: flex; min-width: max-content; }
.fx-no { flex: 0 0 34px; padding-right: 8px; color: var(--fc-textDim); text-align: right; user-select: none; }
.fx-mark { flex: 0 0 14px; text-align: center; user-select: none; }
.fx-text { padding-right: 12px; white-space: pre; }
.fx-line.is-add { background: color-mix(in srgb, var(--fc-success) 14%, transparent); }
.fx-line.is-add .fx-mark { color: var(--fc-success); }
.fx-line.is-del { background: color-mix(in srgb, var(--fc-error) 14%, transparent); }
.fx-line.is-del .fx-mark { color: var(--fc-error); }
.fx-gap { padding-left: 48px; color: var(--fc-textDim); line-height: 1.2; user-select: none; }

/* ============================================================
   6. Footer: the composer stays under the conversation
   ============================================================ */
.fc-agent-footer.c-footer { padding: 8px 14px 14px; }
.c-footer .fc-agent-input { border: 1px solid var(--fc-border); border-radius: 16px; background: var(--fc-bgInput); box-shadow: none; transition: border-color 0.12s; }
.c-footer .fc-agent-input:focus-within { border-color: color-mix(in srgb, var(--fc-accent) 65%, var(--fc-border)); }
.c-footer .fc-agent-input .fc-task-composer, .c-footer .fc-agent-input textarea { padding: 13px 16px 6px; font-size: 13.5px; line-height: 1.5; }
.c-footer .fc-agent-input .fc-task-attach-row { padding: 0 10px 10px 12px; }
.c-footer .fc-task-setting-readonly, .c-footer .fc-inline-picker-trigger { font-size: 12px; }
.c-context { display: flex; align-items: center; gap: 7px; margin: 0 4px 8px; color: var(--fc-textMuted); font-size: 12px; }
.c-context-icon { display: inline-flex; flex: 0 0 auto; color: var(--fc-textDim); }
.c-context span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* An earlier version is on screen: a short note in place of the composer, not a warning. */
.c-viewing { padding: 12px 4px 0; border-top: 1px solid var(--fc-borderLight); font-size: 13px; line-height: 1.5; }
.c-viewing p { margin: 0 0 4px; overflow-wrap: anywhere; }
.c-viewing p.c-muted { font-size: 12.5px; }
.c-viewing-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.c-action { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--fc-border); border-radius: 8px; background: transparent; color: var(--fc-text); font: inherit; font-size: 12.5px; cursor: pointer; }
.c-action:hover { background: var(--fc-bgHover); }
.c-action.is-primary { border-color: color-mix(in srgb, var(--fc-accent) 70%, var(--fc-border)); color: var(--fc-accent); }
.c-action svg { flex: 0 0 auto; }

/* ============================================================
   Replies: the actions under an answer
   ============================================================ */
.c-reply { display: flex; flex-direction: column; gap: 8px; }
.c-actions { display: flex; align-items: center; gap: 2px; margin: -2px 0 0 -7px; opacity: 0; transition: opacity 0.12s; }
.c-reply:hover .c-actions, .c-actions:focus-within { opacity: 1; }
.c-actions.is-last { opacity: 0.55; }
.c-actions.is-last:hover, .c-reply:hover .c-actions.is-last { opacity: 1; }
@media (hover: none) { .c-actions { opacity: 1; } }
.c-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--fc-textDim); cursor: pointer; }
.c-act:hover:not(:disabled) { background: var(--fc-bgHover); color: var(--fc-text); }
.c-act:disabled { cursor: default; opacity: 0.45; }
.c-act.is-on { color: var(--fc-accent); }
.c-act:focus-visible { outline: 2px solid var(--fc-accent); }
.c-alts { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-top: 1px solid var(--fc-borderLight); background: transparent; color: var(--fc-textMuted); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.c-alts span[aria-hidden] { margin-left: auto; color: var(--fc-textDim); }
.c-alts:hover { background: var(--fc-bgHover); color: var(--fc-text); }

/* ============================================================
   Chat history: each chat, the version it reached, and where that version sits
   ============================================================ */
.fc-agent-history-row.is-active { background: color-mix(in srgb, var(--fc-accent) 8%, transparent); }
.fc-agent-history-row-version { color: var(--fc-text); }
.fc-agent-history-row-open { margin-left: 4px; color: var(--fc-accent); }

/* The status line under the chat title stays on one line. */
.fc-agent-subtitle { display: flex; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; }
.fc-agent-subtitle > :not(:first-child) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-discard { align-self: flex-start; font-size: 12px; color: var(--fc-textMuted); }

/* The map button in the Agent header carries its word, so it is not a mystery icon. */
.c-head-map { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; border: 1px solid var(--fc-borderLight); border-radius: 6px; background: transparent; color: var(--fc-textMuted); font: inherit; font-size: 11.5px; cursor: pointer; }
.c-head-map:hover { border-color: var(--fc-border); background: var(--fc-bgHover); color: var(--fc-text); }

/* The one-time note after the first version. */
.c-hint { position: relative; padding: 10px 30px 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--fc-accent) 8%, transparent); color: var(--fc-textMuted); font-size: 12.5px; line-height: 1.5; }
.c-hint p { margin: 0; }
.c-hint strong, .c-hint b { color: var(--fc-text); font-weight: 600; }
.c-hint-close { position: absolute; top: 6px; right: 6px; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--fc-textDim); cursor: pointer; }
.c-hint-close:hover { background: var(--fc-bgHover); color: var(--fc-text); }