/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* THE THINKING DOTS ON /ask.
 *
 * An answer takes several seconds, and longer when the question needs a tool round, because the
 * loop asks, feeds the result back and asks again. Until now the whole feedback for that wait
 * was the browser tab spinner, so a slow answer and a dead button looked the same and readers
 * pressed Ask twice.
 *
 * A working indicator and deliberately not a progress bar: the server does not stream, so
 * nothing here knows how far along it is, and a bar that cannot know would be a lie with an
 * animation on it. */
.think-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 9999px;
  background: currentColor;
  animation: think-pulse 1.1s ease-in-out infinite;
}

@keyframes think-pulse {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-0.15rem); }
}

/* Motion is decoration here: the dots say "working", and they say it just as well standing
 * still. A reader who has asked for less of it gets the message without the movement. */
@media (prefers-reduced-motion: reduce) {
  .think-dot { animation: none; opacity: 0.6; }
}

/* THE QUESTION LEAVING THE BOX.
 *
 * The pending bubble appears directly above the form, so starting it low, small and
 * transparent reads as the text lifting out of the textarea it was typed in. Without it the
 * bubble simply blinks into existence and the eye misses that anything happened at all, which
 * on a form that then waits several seconds is the whole problem this is here to solve.
 *
 * Transform and opacity only. Both are compositor properties, so this cannot cause a layout
 * pass on a page that is about to be replaced anyway. */
@keyframes bubble-out {
  from { opacity: 0; transform: translateY(0.75rem) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)       scale(1); }
}

[data-thinking-target="pending"]:not([hidden]) > * {
  animation: bubble-out 0.28s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

/* The answer bubble follows the question rather than arriving with it, which is the order the
 * two things actually happen in. */
[data-thinking-target="pending"]:not([hidden]) > * + * {
  animation-delay: 0.1s;
}

/* Motion is decoration here. The bubble and the dots both say "working" perfectly well
 * standing still, and a reader who has asked for less movement gets the message either way. */
@media (prefers-reduced-motion: reduce) {
  [data-thinking-target="pending"]:not([hidden]) > * { animation: none; }
}