/* THE THINKING CLOUD (Peter, 2 Oct 2026: "I like this thinking, we should use it. The cloud animates as it's
   thinking."). One thin line coiled into six little loops around a circle, light grey, with a dark stretch that
   travels round the same loops while Bullet works something out, and a muted line beside it that changes every
   few seconds. Drawn by window.uiThinkLoader in ui.js (our own path, a rolling-circle curve worked out in code).
   Only where something was already waiting (the Ask answer while it is worked out, the Gmail looking steps);
   never added where there was no wait. Reduced motion: the dark stretch stands still, the words stay put. */
.think {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}
.think__mark { flex: none; display: block; overflow: visible; }
.think__path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.think__path--base { stroke: var(--color-border-strong); opacity: .45; }
/* half speed, calm (Peter, 2 Oct: "slow it down 50%, it is meant to be nice and calm"). the comet: a soft tail and a dark head, both riding the same dash clock so the head leads its tail */
.think__path--tail { stroke: var(--color-text); opacity: .3; stroke-dasharray: 26 74; }
.think__path--head { stroke: var(--color-text); stroke-dasharray: 14 86; }
.think__path--tail { animation: thinkTravel 3.6s linear infinite; }
.think__path--head { animation: thinkTravelHead 3.6s linear infinite; }   /* 12 ahead of the tail's start: the tail's front half */
@keyframes thinkTravel { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes thinkTravelHead { from { stroke-dashoffset: 88; } to { stroke-dashoffset: -12; } }
.think__text { transition: opacity .45s cubic-bezier(0.16, 1, 0.3, 1); }
.think__text.is-out { opacity: 0; }
/* mark only (a status column that already carries its own words, e.g. the Gmail looking steps) */
.think--mark { gap: 0; }

@media (prefers-reduced-motion: reduce) {
  .think__path--tail,
  .think__path--head { animation: none; }
  .think__path--tail { stroke-dashoffset: 70; }
  .think__path--head { stroke-dashoffset: 58; }
  .think__text { transition: none; }
}