/* Brainify thinking dots. Markup: <span class="bf-dots" role="status" aria-label="Thinking"><i></i><i></i><i></i><i></i></span>
   Size follows font-size (1em square). Add class bf-dark on dark backgrounds. */
.bf-dots{--c:#05786E;display:inline-block;position:relative;width:1em;height:1em;vertical-align:middle;transform:rotate(12deg)}
.bf-dark .bf-dots,.bf-dots.bf-dark{--c:#2FB3A6}
.bf-dots::before{content:"";position:absolute;inset:0;animation:bf-dots-spin 1s cubic-bezier(.45,0,.55,1) infinite}
.bf-dots i{position:absolute;left:50%;top:50%;width:.19em;height:.19em;margin:-.095em;border-radius:50%;background:var(--c);
  animation:bf-dots-move 1s cubic-bezier(.45,0,.55,1) infinite}
.bf-dots i:nth-child(1){--x:-1;--y:-1}.bf-dots i:nth-child(2){--x:1;--y:-1}.bf-dots i:nth-child(3){--x:1;--y:1}.bf-dots i:nth-child(4){--x:-1;--y:1}
@keyframes bf-dots-move{
  0%{transform:rotate(0deg) translate(calc(var(--x)*.133em),calc(var(--y)*.133em))}
  50%{transform:rotate(45deg) translate(calc(var(--x)*.19em),calc(var(--y)*.19em))}
  100%{transform:rotate(90deg) translate(calc(var(--x)*.133em),calc(var(--y)*.133em))}}
@keyframes bf-dots-spin{to{transform:none}}
@media (prefers-reduced-motion:reduce){.bf-dots i{animation:none;transform:translate(calc(var(--x)*.133em),calc(var(--y)*.133em))}}