/*
 * The chat's "thinking" indicator: a playful phrase that changes every few seconds, next to a small animation
 * of three dots in a destination's colours. The page picks the phrase and the shape (see `createThinking` in
 * `@travel/mcp-core/client`); this file only draws them. Markup:
 *
 *   <span class="think-sr">Name is thinking</span>
 *   <span class="think-word" aria-hidden="true">Folding the map</span>
 *   <span class="think think-pulse" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
 *
 * Shapes: think-pulse, think-wave, think-orbit, think-bars, think-sparkle. A destination sets its colours:
 *
 *   .advisor { --think-1: #ed2939; --think-2: #fff; --think-3: #00a1de; }
 *
 * --think-1, --think-2, --think-3   the three dots (default: the text colour)
 * --think-outline                   a thin ring, for a white dot on a light page
 * --think-shine                     the highlight that sweeps over the phrase (default: the page's text colour)
 */
.think { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 16px; min-width: 28px; }
.think i { display: block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.think-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.think-word {
  background: linear-gradient(100deg, currentColor 40%, var(--think-shine, CanvasText) 50%, currentColor 60%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: think-word .45s cubic-bezier(.2, .8, .2, 1) both, think-shine 2.6s linear infinite;
}
@keyframes think-word { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes think-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .think-word { animation: none; -webkit-text-fill-color: currentColor; background: none; } }

.think-pulse i:nth-child(4) { display: none; }
.think-pulse i { animation: think-pulse 1.2s ease-in-out infinite; }
.think-wave i { animation: think-wave 1s ease-in-out infinite; }
.think-orbit { position: relative; width: 18px; min-width: 18px; }
.think-orbit i { position: absolute; width: 4px; height: 4px; }
.think-orbit i:nth-child(n+3) { display: none; }
.think-orbit i:nth-child(1) { animation: think-orbit 1.1s linear infinite; }
.think-orbit i:nth-child(2) { opacity: .45; animation: think-orbit 1.1s linear infinite reverse; width: 3px; height: 3px; }
.think-bars { gap: 2px; }
.think-bars i { width: 3px; height: 14px; border-radius: 2px; animation: think-bars .9s ease-in-out infinite; transform-origin: center; }
.think-sparkle { gap: 5px; }
.think-sparkle i { width: 6px; height: 6px; border-radius: 1px; animation: think-sparkle 1.4s ease-in-out infinite; }
.think-sparkle i:nth-child(4) { display: none; }

.think i:nth-child(1) { background: var(--think-1, currentColor); }
.think i:nth-child(2) { background: var(--think-2, currentColor); box-shadow: 0 0 0 1px var(--think-outline, transparent); }
.think i:nth-child(3) { background: var(--think-3, currentColor); }
.think-wave i:nth-child(4), .think-bars i:nth-child(4) { display: none; }
.think-orbit i:nth-child(2) { background: var(--think-3, currentColor); box-shadow: none; }
.think i:nth-child(2) { animation-delay: .15s; }
.think i:nth-child(3) { animation-delay: .3s; }
.think i:nth-child(4) { animation-delay: .45s; }
.think-orbit i:nth-child(2) { animation-delay: 0s; }
@keyframes think-pulse { 0%, 100% { transform: scale(.6); opacity: .35; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes think-wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
@keyframes think-orbit { from { transform: rotate(0) translateX(6px); } to { transform: rotate(360deg) translateX(6px); } }
@keyframes think-bars { 0%, 100% { transform: scaleY(.25); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes think-sparkle { 0%, 100% { transform: rotate(45deg) scale(.5); opacity: .4; } 50% { transform: rotate(225deg) scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .think i { animation: none !important; } .think-orbit i:nth-child(1) { transform: translateX(6px); } }