/* Eight different ink poses, held for 160ms. No smooth rotation or morphing. */
.motion-doodle {
  display: inline-block;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  color: inherit;
  vertical-align: middle;
}
.motion-doodle > svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.motion-doodle-reel { transform: translateX(-448px); }
.is-doodle-playing .motion-doodle-reel,
.motion-doodle.is-doodle-playing .motion-doodle-reel {
  animation: fabiola-ink-reel 1120ms steps(7, end) both;
}
.motion-doodle--chat .motion-doodle-reel { stroke-width: 2.8; }
/* A compact icon can replace the existing launcher SVG without changing its hit area. */
.voice-launch .motion-doodle { width: 30px; height: 30px; }
body .voice-launch.chat-launch > .motion-doodle,
body:has(.service-story.is-story-on-screen:not(.is-story-static)) .voice-launch.chat-launch > .motion-doodle {
  position: static;
  width: 30px;
  height: 30px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: none;
  white-space: normal;
}
.voice-launch:is(:hover, :focus-visible) .motion-doodle-reel,
body:has(#voice-dialog[open]) .voice-launch .motion-doodle-reel {
  animation: fabiola-ink-reel 1120ms steps(7, end) both;
}
@keyframes fabiola-ink-reel {
  from { transform: translateX(0); }
  to { transform: translateX(-448px); }
}
@media (prefers-reduced-motion: reduce) {
  .motion-doodle-reel,
  .is-doodle-playing .motion-doodle-reel,
  .motion-doodle.is-doodle-playing .motion-doodle-reel,
  .voice-launch:is(:hover, :focus-visible) .motion-doodle-reel,
  body:has(#voice-dialog[open]) .voice-launch .motion-doodle-reel {
    animation: none;
    transform: translateX(-448px);
  }
}