/* One quiet block where the answer will be, while the turn has written
   nothing yet. It sits as the next sibling of LibreChat's empty-answer
   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;
}

.fh-progress-main {
  grid-row: 1;
  grid-column: 2;
}

/* Where the turn is reaching. One step quieter than the line above it: the
   stage is what a waiting reader needs, the place is what reassures them. */
.fh-progress-detail {
  grid-row: 2;
  grid-column: 2;
  font-size: 0.75rem;
  opacity: 0.8;
}

.fh-progress-detail[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; }
}