/* One quiet block where the answer will be, until its last word is out. It sits
   in front of the answer's markdown body - never inside it, because that
   subtree is React's and a token-streaming re-render wipes whatever it finds
   there.

   The dot is ours. LibreChat's own dot is the ::after of an empty span under
   `.submitting .result-thinking:empty:last-child`, so text in that span breaks
   :empty and text after it breaks :last-child - either way its dot goes. Ours
   is drawn at the same size and rhythm, with the wording to its right. */
.fh-progress {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.125rem;
  align-items: start;
  margin: 0.125rem 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-secondary, #6b6b6b);
}

/* Hide the placeholder's dot only while ours is up, and only the span: the
   absolutely positioned wrapper around it holds no space either way, and
   leaving it in place keeps this to one class of LibreChat's. */
.fh-progress-host span.result-thinking {
  display: none;
}

/* 12px and a size pulse, which is what the dot being replaced does, so the
   screen does not change character between a turn this file draws and one it
   has not reached yet. */
.fh-progress::before {
  content: "";
  grid-row: 1;
  grid-column: 1;
  width: 12px;
  height: 12px;
  margin-top: 0.25rem;
  border-radius: 50%;
  background: var(--text-primary, #212121);
  animation: fh-progress-pulse 1.2s ease-in-out infinite;
}

/* One line per thing the turn did, under a head line with the whole wait -
   the same sizes and spacing as the full review's box, so the two read as one
   kind of thing. */
.fh-progress-lines {
  grid-row: 1;
  grid-column: 2;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fh-progress-lines li {
  margin: 0.3rem 0;
  line-height: 1.6;
}

.fh-progress-lines li:first-child {
  margin-top: 0;
}

.fh-progress-head {
  color: var(--text-primary, #212121);
  font-size: 0.875rem;
}

.fh-progress-lines li:not(.fh-progress-head) {
  padding-left: 0.75rem;
}

/* What is over steps back, so the line still running is the one that reads
   first. A tool that found nothing or failed is over too. */
.fh-progress-done,
.fh-progress-note {
  opacity: 0.75;
}

/* The answer as it is written. Full weight and full size, because these are
   the words the reader came for - the lines above are about the wait and
   this is not. pre-wrap keeps the model's own line breaks: it is plain text
   here and only becomes markdown when the delivered message renders it. */
.fh-progress-body {
  grid-row: 2;
  grid-column: 2;
  /* The container is --text-secondary because the wait is chrome. These are
     the answer's words, so they take the reader's colour back. */
  color: var(--text-primary, inherit);
  font-size: 1rem;
  margin-top: 0.5rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.fh-progress-body[hidden] {
  display: none;
}

@keyframes fh-progress-pulse {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.25); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fh-progress::before { animation: none; opacity: 0.6; }
}

/* A finished turn's block folds away rather than vanishing, so an answer
   under it slides up instead of jumping (fhellow-progress.js, fold). */
.fh-progress-leaving {
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  margin-bottom: 0;
  transition: height 250ms ease, opacity 200ms ease, margin 250ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .fh-progress-leaving {
    transition: none;
  }
}