/*
 * "What Ring did": the status line of a turn (fc-status.js), its plan and steps, the tool rows that fold into it, the
 * list of what a rewrite took out and the sources under an answer. Loaded after fc-chat.css (client/index.html).
 */

/* What Ring did (fc-status.js): one live line while Ring works, one folded summary once the answer is there. */
.fc-status { margin: 2px 0 6px; }
.fc-status:empty { display: none; }
.fc-status-ico { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fc-live { display: flex; align-items: center; gap: 9px; min-height: 28px; color: var(--text-secondary); font-size: 0.95rem; }
.fc-live .fc-status-ico { color: var(--text-tertiary); flex: none; }
/* one line, whatever the model is thinking: a long thought ends in an ellipsis instead of pushing the answer down */
.fc-live .fc-shimmer { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fc-live .fc-timer { flex: none; }
/* work mode: where in the plan Ring is ("Stap 2 van 5 · ronde 7"), quiet, after what it does */
.fc-live-ctx { flex: none; color: var(--text-tertiary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
/* work mode: Ring's plan as a checklist, above the live line and in the steps behind the summary. An open circle for a
 * step to do, the red dot pulsing like the one where the answer starts for the step Ring is on, a tick when done. */
.fc-plan { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; line-height: 1.35; }
.fc-plan li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; color: var(--text-tertiary); }
.fc-plan li[data-status="in_progress"] { color: var(--text-primary); font-weight: 600; }
.fc-plan li[data-status="completed"] { color: var(--text-secondary); }
.fc-plan-mark { display: grid; place-items: center; width: 16px; height: 1.2em; }
.fc-plan-mark .fc-status-ico { width: 14px; height: 14px; color: var(--text-primary); stroke-width: 2.2; }
.fc-plan-open { width: 11px; height: 11px; border-radius: 999px; border: 1.5px solid var(--border-xheavy); }
.fc-plan-skip { width: 10px; height: 1.5px; border-radius: 1px; background: var(--text-tertiary); }
.fc-plan li[data-status="skipped"] { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--border-xheavy); }
.fc-plan-now { width: 10px; height: 10px; border-radius: 999px; background: #ff3f37; animation: fc-dot 1.4s ease-in-out infinite; }
.fc-plan-note { margin: -2px 0 8px 26px; font-size: 0.85rem; color: var(--text-tertiary); }
.fc-panel .fc-plan { margin: 8px 0 2px; }
.fc-shimmer {
  background: linear-gradient(90deg, var(--text-tertiary) 0%, var(--text-tertiary) 40%, var(--text-primary) 50%, var(--text-tertiary) 60%, var(--text-tertiary) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fc-shimmer 2.2s linear infinite;
}
@keyframes fc-shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.fc-timer { color: var(--text-tertiary); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.fc-summary { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 0; color: var(--text-secondary); font-size: 0.9rem; text-align: left; }
.fc-summary:hover { color: var(--text-primary); }
.fc-summary:focus-visible { outline: 2px solid var(--border-heavy); outline-offset: 3px; border-radius: 6px; }
.fc-summary .fc-sep { color: var(--text-tertiary); }
.fc-summary > .fc-status-ico:last-child { width: 15px; height: 15px; transition: transform 0.2s; }
.fc-summary[aria-expanded="true"] > .fc-status-ico:last-child { transform: rotate(180deg); }
.fc-panel { margin: 8px 0 6px 2px; padding: 12px 14px 0; border-left: 2px solid var(--border-light); }
.fc-steps { list-style: none; margin: 0; padding: 0; }
.fc-steps > li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 12px; }
.fc-steps > li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 2px; width: 1px; background: var(--border-medium); }
.fc-dot { width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-tertiary); color: var(--text-secondary); }
.fc-dot .fc-status-ico { width: 13px; height: 13px; }
.fc-steps > li.fc-failed .fc-dot { background: rgba(255, 63, 55, 0.15); color: #ff3f37; }
.fc-step-t { font-weight: 600; font-size: 0.9rem; line-height: 22px; color: var(--text-primary); }
.fc-step-d { font-size: 0.85rem; color: var(--text-secondary); margin-top: 1px; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 4px; border-radius: 999px; background: var(--surface-tertiary); font-size: 0.8rem; color: var(--text-secondary); }
/* the model's thoughts inside the thinking step: the text as it came, quiet, scrolling when long */
.fc-thoughts { margin-top: 6px; max-height: 16rem; overflow-y: auto; white-space: pre-wrap; font-size: 0.85rem; line-height: 1.5; color: var(--text-secondary); }
.fc-tile { flex: none; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; font: 700 9.5px "Manrope", sans-serif; color: #fff; }
.fc-status-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Where the answer will start, a pulsing dot until its first word. LibreChat draws one only for an empty answer, and a
 * Ring answer never is: its steps stream in as thinking from the start. So the dot is drawn here, under the live line. */
.agent-turn:has(> .fc-status > .fc-live) > .flex-col > :first-child:not(:has(.markdown))::after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin: 4px 0 0 2px;
  border-radius: 999px;
  background: var(--text-primary);
  animation: fc-dot 1.4s ease-in-out infinite;
}
@keyframes fc-dot {
  0%, 100% { scale: 0.7; opacity: 0.5; }
  50% { scale: 1; opacity: 1; }
}
/* an app's logo where the status has an icon: the summary of an apps turn, the live line while its tool runs, its step */
.fc-status-app { width: 16px; height: 16px; flex: none; }
.fc-dot .fc-status-app { width: 13px; height: 13px; }
/* Once a turn has its summary, the tool calls that finished well fold into it ("Gmail · 4 mails gelezen"): LibreChat's rows
 * (ToolCall.tsx) and groups (ToolCallGroup.tsx) mark themselves with data-fc-*. A row that errored, still runs or waits for
 * a sign-in stays, and so does a Gmail card. A row goes with its details (the block right after it); a group with its
 * header and body. What the tools made (a picture) stays. The details and the body carry LibreChat's inline
 * `display: grid` (useExpandCollapse), which only !important beats: without it a block opened by hand or by "expand tools"
 * would stay on screen after its header, the only way to close it, went. */
.agent-turn:has(> .fc-status > .fc-summary) [data-fc-tool][data-fc-done="true"][data-fc-error="false"]:not([data-fc-card]),
.agent-turn:has(> .fc-status > .fc-summary) [data-fc-tool][data-fc-done="true"][data-fc-error="false"]:not([data-fc-card]) + div,
.agent-turn:has(> .fc-status > .fc-summary) [data-fc-tool-group][data-fc-done="true"][data-fc-error="false"] > button:first-child,
.agent-turn:has(> .fc-status > .fc-summary) [data-fc-tool-group][data-fc-done="true"][data-fc-error="false"] > button:first-child + div,
.agent-turn:has(> .fc-status > .fc-summary) [data-fc-tool-group][data-fc-done="true"][data-fc-error="false"]:not(:has(> :nth-child(3))) {
  display: none !important;
}
/* A running tool row does not shimmer: the status line above already moves while Ring works, and a second moving line
 * per row made a work run restless. The row's words say it runs ("Bouwt een presentatie"). */
.agent-turn [data-fc-tool] .shimmer {
  animation: none;
  background: none;
  -webkit-text-fill-color: currentColor;
}
/* Less motion asked for: tool rows and groups (ToolCall.tsx, ToolCallGroup.tsx) open and close without sliding, their
 * chevrons turn without turning and their icons do not pulse. The inline `transition` is useExpandCollapse's. */
@media (prefers-reduced-motion: reduce) {
  .agent-turn [data-fc-tool] .animate-pulse,
  .agent-turn [data-fc-tool-group] .animate-pulse { animation: none; }
  .agent-turn [data-fc-tool] .transition-transform { transition: none; }
  .agent-turn [data-fc-tool] + div[style],
  .agent-turn [data-fc-tool-group] > div[style] { transition: none !important; }
}
/* What a rewrite took out ("Wat de Humanizer weghaalde"): Relay's heading and list are hidden, fc-status.js shows a copy
 * after them, quiet, with a rule on the left, dashes and the quoted words in the text colour. */
.markdown .fc-changed-head, .markdown .fc-changed-list { display: none; }
.markdown .fc-changed { margin: 4px 0 14px 2px; padding: 10px 14px 4px; border-left: 2px solid var(--border-light); }
.markdown .fc-changed-t { margin: 0 0 6px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.markdown .fc-changed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 0.875rem; line-height: 1.45; color: var(--text-secondary); }
.markdown .fc-changed li { position: relative; margin: 0; padding: 2px 0 2px 22px; }
.markdown .fc-changed li::before { content: "–"; position: absolute; left: 2px; color: var(--text-tertiary); }
.markdown .fc-changed-q { color: var(--text-primary); }
/* In a Ring turn LibreChat's thinking blocks are hidden: the status shows Ring's steps and the model's thoughts as one of them */
[class*="group/reasoning"].fc-status-bare { display: none; }
/* the sources under an answer: a stack of initials with "N bronnen" that opens the list */
.markdown .fc-sources-head, .markdown .fc-sources-list { display: none; }
.markdown.fc-sources-open .fc-sources-head, .markdown.fc-sources-open .fc-sources-list { display: block; }
/* a block of its own under the answer: its margin falls together with the paragraph's instead of adding a line; line-height 1 centres the text on the tiles */
.fc-sources { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 10px; padding: 4px 11px 4px 6px; line-height: 1; border-radius: 999px; background: var(--surface-tertiary); font-size: 0.8rem; color: var(--text-secondary); }
.fc-sources:hover { color: var(--text-primary); }
.fc-sources:focus-visible { outline: 2px solid var(--border-heavy); outline-offset: 2px; }
.fc-tiles { display: inline-flex; }
.fc-tiles .fc-tile { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface-tertiary); }
.fc-tiles .fc-tile:first-child { margin-left: 0; }
@media (prefers-reduced-motion: reduce) {
  .fc-shimmer { animation: none; background: none; color: var(--text-secondary); }
  .fc-plan-now { animation: none; }
  .fc-summary > .fc-status-ico:last-child { transition: none; }
  .agent-turn > .flex-col > :first-child::after { animation: none; }
}