/* Ali, o mascote guia */
.ali { position: fixed; left: 0; top: 0; z-index: 90; width: 80px; transition: transform .9s var(--ease); pointer-events: none; }
.ali > * { pointer-events: auto; }
.ali-bt { display: block; width: 80px; height: 96px; padding: 0; border: 0; background: none; cursor: pointer; }
.ali-svg { width: 100%; height: 100%; overflow: visible; }
.ali-corpo { transform-origin: 40px 80px; animation: ali-bob 2.4s ease-in-out infinite; }
@keyframes ali-bob { 50% { transform: translateY(-3px); } }
.ali-olhos { transform-origin: 40px 38px; animation: ali-pisca 4.2s infinite; }
@keyframes ali-pisca { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.ali-pupilas { transition: transform .2s; }
.ali.olha-esq .ali-svg { transform: scaleX(-1); }
.ali.anda .ali-corpo { animation: ali-anda .3s ease-in-out infinite; }
.ali.anda .pe1 { animation: ali-pe .3s ease-in-out infinite; }
.ali.anda .pe2 { animation: ali-pe .3s ease-in-out infinite reverse; }
@keyframes ali-anda { 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes ali-pe { 50% { transform: translateY(-4px); } }
.ali.fala .ali-boca { animation: ali-boca .35s ease-in-out 4; }
@keyframes ali-boca { 50% { d: path("M32 51 Q40 63 48 51"); } }
.ali.fala .b2 { transform-origin: 72px 46px; animation: ali-acena .5s ease-in-out 2; }
@keyframes ali-acena { 50% { transform: rotate(-35deg); } }
.ali.cantinho .ali-bt { animation: ali-chama 3s 1s ease-in-out 2; }
@keyframes ali-chama { 10%, 30% { transform: rotate(-8deg); } 20%, 40% { transform: rotate(8deg); } 50% { transform: none; } }

.ali-balao { position: absolute; bottom: calc(100% + 6px); left: 30px; width: min(320px, calc(100vw - 40px)); background: #fff; color: var(--ink); border-radius: 18px; border-bottom-left-radius: 4px; padding: 16px 16px 12px; box-shadow: 0 24px 60px -18px rgb(16 20 28 / .45), 0 0 0 1px rgb(16 20 28 / .06); opacity: 0; transform: translateY(8px) scale(.94); transform-origin: bottom left; transition: opacity .25s, transform .35s var(--ease); pointer-events: none; }
.ali.balao-esq .ali-balao { left: auto; right: 30px; border-bottom-left-radius: 18px; border-bottom-right-radius: 4px; transform-origin: bottom right; }
.ali.aberto.fala .ali-balao { opacity: 1; transform: none; pointer-events: auto; }
.ali-txt { font-size: 15.5px; line-height: 1.45; }
.ali-txt b { color: var(--brand); }
.ali-acoes { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ali-acoes .btn { padding: 9px 14px; text-decoration: none; }
.ali-acoes [data-prox] { margin-left: auto; }
.ali-sec { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 8px 6px; font-size: 13.5px; }
.ali-sec:hover { color: var(--ink); }
.ali-n { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* o que o Ali está apontando */
.ali-alvo { position: relative; z-index: 2; box-shadow: 0 0 0 3px var(--brand), 0 0 0 9px color-mix(in srgb, var(--brand) 22%, transparent) !important; border-radius: var(--radius); animation: ali-anel 1.6s ease-in-out infinite; }
nav a.ali-alvo, .export.ali-alvo { border-radius: 10px; }
@keyframes ali-anel { 50% { box-shadow: 0 0 0 3px var(--brand), 0 0 0 14px color-mix(in srgb, var(--brand) 8%, transparent); } }

@media (max-width: 760px) {
  .ali { width: 64px; }
  .ali-bt { width: 64px; height: 77px; }
  .ali-balao, .ali.balao-esq .ali-balao { left: 0; right: auto; bottom: calc(100% + 4px); width: calc(100vw - 20px); border-radius: 16px; border-bottom-left-radius: 4px; }
}
@media (prefers-reduced-motion: reduce) { .ali { transition: none; } }
.ali.balao-baixo .ali-balao { bottom: auto; top: calc(100% + 6px); border-radius: 18px; border-top-left-radius: 4px; transform-origin: top left; }
.ali.balao-baixo.balao-esq .ali-balao { border-top-left-radius: 18px; border-top-right-radius: 4px; transform-origin: top right; }

/* braço apontando pro alvo */
.ali .b2 { transform-origin: 72px 47px; transition: transform .5s var(--ease); }
.ali.aponta .b2 { transform: rotate(var(--braco, -130deg)); transition-delay: .55s; }
.ali.aponta.fala .b2 { animation: none; }
/* barrinha do tempo até o próximo ponto */
.ali-balao::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--brand); opacity: .35; transform: scaleX(0); transform-origin: left; }
.ali.contando.fala .ali-balao::after { animation: ali-tempo var(--auto, 5s) linear forwards; }
.ali.pausa .ali-balao::after { animation-play-state: paused; }
@keyframes ali-tempo { to { transform: scaleX(1); } }