/* VirgilCopilot sparkle: colours per look, one motion per mood.
   The timings match the "Every state, animated" sheet on the design canvas.
   Reduced motion: no movement; the moods show by colour only. */

.vs { display: inline-block; vertical-align: middle; flex-shrink: 0; overflow: visible; }
.vs path, .vs .vs-ring, .vs .vs-flash { transform-box: fill-box; transform-origin: center; }

/* ── Looks ─────────────────────────────────────────────────────────────── */

.vs-duotone .vs-big { fill: #2F6BC4; }
.vs-duotone .vs-med, .vs-duotone .vs-sml { fill: #F2A93B; }
[data-bs-theme="dark"] .vs-duotone .vs-big { fill: #4F8AE0; }

/* Follows the text colour, like the Keenicons around it (grey, then primary when the menu item is active). */
.vs-keen path { fill: currentColor; }
.vs-keen .vs-big { opacity: .3; }

.vs-mono path { fill: currentColor; }

.vs-tile .vs-big { fill: #FFFFFF; }
.vs-tile .vs-med { fill: #F2A93B; }
.vs-tile .vs-sml { fill: #FFFFFF; opacity: .85; }
.vs-tile .vs-ring { fill: none; stroke: #8CB5EE; stroke-width: 3; opacity: 0; }
.vs-tile .vs-flash { fill: #F8285A; opacity: 0; }
.vs-tile .vs-dot { fill: #F8285A; stroke: #FFFFFF; stroke-width: 2.5; opacity: 0; }

/* ── Moods ─────────────────────────────────────────────────────────────── */

/* Thinking: before the first word. The small stars twinkle in turn; the big star breathes. */
.vs-thinking .vs-big { animation: vs-breathe 2.4s ease-in-out infinite; }
.vs-thinking .vs-med { animation: vs-twinkle 1.6s ease-in-out infinite; }
.vs-thinking .vs-sml { animation: vs-twinkle 1.6s ease-in-out .8s infinite; }

/* Working: a tool is running. The big star ticks a quarter turn and pauses (a four-point star looks the same after 90°). */
.vs-working .vs-big { animation: vs-tick 1.4s cubic-bezier(.6, 0, .2, 1) infinite; }
.vs-working .vs-med { animation: vs-twinkle 1.4s ease-in-out infinite; }
.vs-working .vs-sml { animation: vs-twinkle 1.4s ease-in-out .7s infinite; }

/* Speaking: the answer is streaming in. A quick twinkle, like talking. */
.vs-speaking .vs-big { animation: vs-pulse .9s ease-in-out infinite; }
.vs-speaking .vs-med { animation: vs-chatter .9s ease-in-out infinite; }
.vs-speaking .vs-sml { animation: vs-chatter .9s ease-in-out .45s infinite; }

/* Listening: dictation is on. The stars breathe; on the tile a ring breathes out. */
.vs-listening .vs-big { animation: vs-breathe 1.2s ease-in-out infinite; }
.vs-listening .vs-med { animation: vs-dim 1.2s ease-in-out infinite; }
.vs-listening .vs-sml { animation: vs-dim 1.2s ease-in-out .6s infinite; }
.vs-listening .vs-ring { animation: vs-ring 1.8s ease-out infinite; }

/* Done: once. A pop and a small burst. */
.vs-done .vs-big { animation: vs-pop .6s cubic-bezier(.3, 1.6, .5, 1); }
.vs-done .vs-med, .vs-done .vs-sml { animation: vs-burst .6s cubic-bezier(.3, 1.6, .5, 1); }

/* Error: once. A short shake and a red flash. */
.vs-error { animation: vs-shake .45s ease-in-out; }
.vs-error:not(.vs-tile) .vs-big { animation: vs-alarm 1.1s ease-out; }
.vs-error .vs-flash { animation: vs-flash 1.1s ease-out; }

/* Offline: grey, slowly fading in and out until the connection is back. */
.vs-offline { filter: grayscale(1); opacity: .6; }
.vs-offline .vs-big { animation: vs-fade 2.4s ease-in-out infinite; }

/* Attention: a reply is waiting. The amber star blinks three times; the dot stays. */
.vs-attention .vs-med { animation: vs-blink 1.2s ease-in-out 3; }
.vs-attention .vs-dot { opacity: 1; }

@keyframes vs-breathe { 50% { transform: scale(.92); } }
@keyframes vs-twinkle { 50% { transform: scale(.45); opacity: .35; } }
@keyframes vs-chatter { 50% { transform: scale(.55); } }
@keyframes vs-tick { 0% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }
@keyframes vs-pulse { 50% { transform: scale(1.06); } }
@keyframes vs-dim { 50% { opacity: .5; } }
@keyframes vs-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes vs-pop { 40% { transform: scale(1.18); } }
@keyframes vs-burst { 40% { transform: scale(1.55); } }
@keyframes vs-shake { 20%, 60% { transform: translateX(-2px); } 40%, 80% { transform: translateX(2px); } }
@keyframes vs-alarm { 0%, 55% { fill: #F8285A; opacity: 1; } }
@keyframes vs-flash { 0%, 55% { opacity: .92; } 100% { opacity: 0; } }
@keyframes vs-fade { 50% { opacity: .45; } }
@keyframes vs-blink { 50% { opacity: .15; } }

@media (prefers-reduced-motion: reduce) {
    .vs, .vs * { animation: none !important; }
    .vs-thinking .vs-med, .vs-working .vs-med, .vs-speaking .vs-med, .vs-listening .vs-med { opacity: .55; }
    .vs-error:not(.vs-tile) .vs-big { fill: #F8285A; opacity: 1; }
    .vs-error .vs-flash { opacity: .92; }
    .vs-listening .vs-ring { opacity: .6; }
}