/* ============================================================
   ListFlow Tutorial — Driver.js theme override
   Estilo: Command Terminal / dark glass-morphism
   Depende de variáveis em app-system.css (--app-*)
   ============================================================ */

/* ---------- Backdrop blur (4 tiras ao redor do highlight) ----------
   Em vez de uma camada única com clip-path (que quebrava em alguns
   stacking contexts), usamos 4 retângulos posicionados pelo JS:
   top, right, bottom, left — deixando o highlight 100% sem blur. */
.lf-tut-blur-container {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}
body.driver-active .lf-tut-blur-container { opacity: 1; }

.lf-tut-blur {
    position: fixed;
    backdrop-filter: blur(6px) saturate(1.05);
    -webkit-backdrop-filter: blur(6px) saturate(1.05);
    background: rgba(8, 11, 15, 0.35);
    will-change: top, left, width, height;
}

/* Driver.js usa SVG overlay em z=10000 — mantemos pra escurecer
   e garantir click fora; nosso blur fica ABAIXO do SVG path. */
.driver-overlay {
    z-index: 9999 !important;
}

/* ---------- Highlight do elemento ativo ---------- */
.driver-active-element {
    border-radius: 10px;
    transition: outline-color .2s ease;
    animation: lf-tut-pulse 2.2s ease-in-out infinite;
    position: relative;
    z-index: 10001;
}

@keyframes lf-tut-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 2px rgba(var(--app-primary-rgb), .9),
            0 0 0 6px rgba(var(--app-primary-rgb), .25),
            0 0 28px rgba(var(--app-primary-rgb), .35);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(var(--app-primary-rgb), 1),
            0 0 0 10px rgba(var(--app-primary-rgb), .12),
            0 0 38px rgba(var(--app-primary-rgb), .55);
    }
}

/* ---------- Popover (card escuro) ---------- */
.driver-popover.lf-tut-popover {
    all: unset;
    box-sizing: border-box;
    position: fixed;
    z-index: 1000000000;
    min-width: 300px;
    max-width: 380px;
    padding: 0;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(26, 29, 33, 0.96), rgba(21, 25, 30, 0.96));
    border: 1px solid rgba(var(--app-primary-rgb), .35);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .03) inset,
        0 18px 60px -12px rgba(0, 0, 0, .85),
        0 0 32px rgba(var(--app-primary-rgb), .18);
    color: var(--app-text-light);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow: hidden;
    animation: lf-tut-pop-in .35s cubic-bezier(.2, .9, .2, 1.05);
}

@keyframes lf-tut-pop-in {
    0%   { opacity: 0; transform: translateY(8px) scale(.96); }
    100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* faixa superior decorativa (estilo "command terminal") */
.driver-popover.lf-tut-popover::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--app-primary) 30%,
        var(--app-primary) 70%,
        transparent 100%);
    opacity: .85;
}

/* ---------- Header customizado (eyebrow) ---------- */
.lf-tut-header {
    display: flex;
    align-items: center;
    /* deixa espaço à direita pra o botão X (que é posicionado absoluto) */
    padding: 16px 50px 0 18px;
    min-height: 28px;
}

.lf-tut-eyebrow {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--app-primary);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.lf-tut-eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--app-primary);
    box-shadow: 0 0 8px rgba(var(--app-primary-rgb), .9);
    animation: lf-tut-blink 1.4s ease-in-out infinite;
}
@keyframes lf-tut-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* Botão X: posicionado absolutamente com offset, acima de tudo.
   !important nas dimensões e posição pra vencer o estilo nativo do Driver.js
   ("all: unset; position: absolute; top: 0; right: 0; width: 32px; height: 28px").
   O conteúdo `&times;` do Driver é substituído por <i class="bi bi-x-lg"> via JS
   pra garantir centralização visual perfeita (a glyph × tem métricas ruins). */
.driver-popover.lf-tut-popover .driver-popover-close-btn {
    all: unset;
    box-sizing: border-box !important;
    cursor: pointer;
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px;
    color: var(--app-text-body);
    background: transparent;
    line-height: 1 !important;
    font-size: 14px;
    z-index: 2;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}
.driver-popover.lf-tut-popover .driver-popover-close-btn > i.bi {
    line-height: 1 !important;
    font-size: 14px !important;
    display: block;
}
.driver-popover.lf-tut-popover .driver-popover-close-btn:hover,
.driver-popover.lf-tut-popover .driver-popover-close-btn:focus {
    background: rgba(255, 255, 255, .08);
    color: var(--app-text-title);
    transform: scale(1.08);
}
.driver-popover.lf-tut-popover .driver-popover-close-btn:active {
    transform: scale(.95);
}

/* ---------- Title & description ---------- */
.driver-popover.lf-tut-popover .driver-popover-title {
    display: block;
    /* margin-right maior pra deixar respiro do botão X (que mora em top:12 right:12) */
    margin: 8px 50px 0 18px;
    padding: 0;
    font-size: 17px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--app-text-title);
    letter-spacing: -.01em;
}

.driver-popover.lf-tut-popover .driver-popover-description {
    display: block;
    margin: 8px 18px 16px;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--app-text-body);
    font-weight: 400;
}
.driver-popover.lf-tut-popover .driver-popover-description strong {
    color: var(--app-text-light);
    font-weight: 600;
}
.driver-popover.lf-tut-popover .driver-popover-description code {
    background: rgba(var(--app-primary-rgb), .14);
    color: #ffd6dd;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
}

/* ---------- Progress bar ---------- */
.lf-tut-progress {
    height: 3px;
    background: rgba(255, 255, 255, .04);
    margin: 0 18px 12px;
    border-radius: 99px;
    overflow: hidden;
}
.lf-tut-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--app-primary), #ff5470);
    border-radius: 99px;
    transition: width .35s cubic-bezier(.2, .9, .2, 1);
    box-shadow: 0 0 10px rgba(var(--app-primary-rgb), .55);
}

/* ---------- Footer ---------- */
.driver-popover.lf-tut-popover .driver-popover-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(255, 255, 255, .05);
    background: rgba(0, 0, 0, .18);
}

.driver-popover.lf-tut-popover .driver-popover-progress-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--app-text-body);
    text-transform: uppercase;
}

.driver-popover.lf-tut-popover .driver-popover-navigation-btns {
    display: flex;
    gap: 8px;
}

.driver-popover.lf-tut-popover .driver-popover-footer button {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    padding: 8px 14px;
    border-radius: 7px;
    transition: transform .12s ease, background .15s ease, box-shadow .2s ease;
    text-shadow: none;
    border: 1px solid transparent;
}

/* botão "Anterior" (ghost) */
.driver-popover.lf-tut-popover .driver-popover-prev-btn {
    background: transparent;
    color: var(--app-text-body);
    border-color: rgba(255, 255, 255, .08);
}
.driver-popover.lf-tut-popover .driver-popover-prev-btn:hover {
    background: rgba(255, 255, 255, .04);
    color: var(--app-text-light);
}

/* botão "Próximo" (primary) */
.driver-popover.lf-tut-popover .driver-popover-next-btn {
    background: linear-gradient(180deg, var(--app-primary), var(--app-primary-hover));
    color: #fff;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .12) inset,
        0 6px 18px -6px rgba(var(--app-primary-rgb), .8);
}
.driver-popover.lf-tut-popover .driver-popover-next-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .18) inset,
        0 8px 22px -6px rgba(var(--app-primary-rgb), .9);
}
.driver-popover.lf-tut-popover .driver-popover-next-btn:active {
    transform: translateY(0);
}

.driver-popover.lf-tut-popover .driver-popover-btn-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ---------- Setinha (arrow) do popover redesenhada ---------- */
.driver-popover.lf-tut-popover .driver-popover-arrow {
    border-width: 8px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .4));
}
.driver-popover.lf-tut-popover .driver-popover-arrow-side-left   { border-color: transparent; border-left-color:   rgba(var(--app-primary-rgb), .5); }
.driver-popover.lf-tut-popover .driver-popover-arrow-side-right  { border-color: transparent; border-right-color:  rgba(var(--app-primary-rgb), .5); }
.driver-popover.lf-tut-popover .driver-popover-arrow-side-top    { border-color: transparent; border-top-color:    rgba(var(--app-primary-rgb), .5); }
.driver-popover.lf-tut-popover .driver-popover-arrow-side-bottom { border-color: transparent; border-bottom-color: rgba(var(--app-primary-rgb), .5); }

/* ---------- Setinha animada flutuante (pointer) ---------- */
/* Adicional ao arrow nativo: uma seta animada apontando do popover pro highlight */
.lf-tut-pointer {
    position: fixed;
    z-index: 1000000001;
    pointer-events: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--app-primary);
    filter: drop-shadow(0 0 10px rgba(var(--app-primary-rgb), .8));
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
}
.lf-tut-pointer.is-visible { opacity: 1; }
.lf-tut-pointer svg { width: 100%; height: 100%; display: block; }

.lf-tut-pointer.dir-left   { animation: lf-tut-bounce-x  1.1s ease-in-out infinite; }
.lf-tut-pointer.dir-right  { animation: lf-tut-bounce-xr 1.1s ease-in-out infinite; }
.lf-tut-pointer.dir-up     { animation: lf-tut-bounce-y  1.1s ease-in-out infinite; }
.lf-tut-pointer.dir-down   { animation: lf-tut-bounce-yd 1.1s ease-in-out infinite; }

@keyframes lf-tut-bounce-x  { 0%,100%{transform:translateX(0)}    50%{transform:translateX(-8px)} }
@keyframes lf-tut-bounce-xr { 0%,100%{transform:translateX(0)}    50%{transform:translateX( 8px)} }
@keyframes lf-tut-bounce-y  { 0%,100%{transform:translateY(0)}    50%{transform:translateY(-8px)} }
@keyframes lf-tut-bounce-yd { 0%,100%{transform:translateY(0)}    50%{transform:translateY( 8px)} }

/* ---------- Botão flutuante de ajuda (mascote livre, sem círculo) ----------
   Antes era um botão circular escuro com o mascote enjaulado dentro de 48px.
   Agora o mascote vira a apresentação: SVG flutua diretamente no canto, com
   `drop-shadow` dando elevação. Click target é o próprio bounding box do SVG
   (com padding interno generoso pra hit area confortável). */
.lf-tut-help-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 9000;
    /* Sem fundo, sem borda, sem border-radius — o robô fica solto */
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    /* Transição em passos curtos: 1.6s pra altura, 2.2s pra trocar de
       lateral. ease-in-out lembra "passos humanizados" — começa devagar,
       acelera no meio, freia. Hover/filter continuam rápidos. */
    transition: transform .2s ease, filter .25s ease,
                left 2.2s cubic-bezier(.45, .05, .35, 1),
                top  1.6s cubic-bezier(.45, .05, .35, 1);
    /* drop-shadow no SVG (não box-shadow) — segue o contorno do robô */
    filter:
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 4px rgba(var(--app-primary-rgb), 0.22));
}
.lf-tut-help-fab:hover {
    transform: translateY(-3px) scale(1.06);
    filter:
        drop-shadow(0 12px 22px rgba(0, 0, 0, 0.7))
        drop-shadow(0 0 10px rgba(var(--app-primary-rgb), 0.5));
}

/* ─── Botão "X" pra ancorar/soltar o mascote ───
   Aparece no hover. Click toggla a fixação no canto inferior esquerdo
   (persistido em localStorage por setupMascotRoaming). */
.lf-mascot-reset {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: #1f242a;
    color: #e5e7eb;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity .18s ease, transform .18s ease, background .18s ease;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.lf-tut-help-fab:hover .lf-mascot-reset {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.lf-mascot-reset:hover {
    background: rgb(var(--app-primary-rgb, 241, 44, 76));
    border-color: rgba(255, 255, 255, 0.4);
}
/* Quando o mascote está ancorado, o "X" vira "↻" (release) — sinaliza
   que clicar de novo vai liberá-lo pra voltar a passear pelas laterais.
   Estado controlado em engine.js via classe .lf-mascot-pinned-state. */
.lf-tut-help-fab.lf-mascot-pinned-state .lf-mascot-reset {
    color: transparent;       /* esconde o "×" original do innerHTML */
}
.lf-tut-help-fab.lf-mascot-pinned-state .lf-mascot-reset::before {
    content: '↻';
    color: #e5e7eb;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
}

/* ─── Mini-mascote SVG inline (robozinho dançando) ───────────────────
   Robô full-body articulado: cabeça com tela, antena, pescoço, torso,
   braços articulados, pernas e pés. Anima em loop por padrão (groove
   suave de ~1.1s/2.2s); acelera no hover e mais ainda na attention.
   Tudo CSS-driven, sem dep nova, com prefers-reduced-motion respeitado.
*/
.lf-mascot {
    width: 36px;
    height: 40px;
    display: block;
    overflow: visible;
    pointer-events: none;       /* clicks vão pro botão pai */
    /* groove suave do corpo todo (sobe e desce no ritmo) */
    animation: lf-mascot-groove 1.1s ease-in-out infinite;
}

/* ── paleta de cores ── */
.lf-mascot-head      { fill: #e5e7eb; stroke: rgba(0,0,0,0.18); stroke-width: 0.6; }
.lf-mascot-faceplate { fill: #1f242a; }                 /* tela do rosto */
.lf-mascot-ear       { fill: #94a3b8; }                 /* parafusos laterais */
.lf-mascot-neck      { fill: #94a3b8; }
.lf-mascot-body      { fill: #e5e7eb; stroke: rgba(0,0,0,0.18); stroke-width: 0.6; }
.lf-mascot-arm rect,
.lf-mascot-arm circle,
.lf-mascot-leg       { fill: #94a3b8; }
.lf-mascot-foot      { fill: #475569; }
.lf-mascot-eye-ball  { fill: #e5e7eb; }                 /* olho claro na tela escura */
.lf-mascot-eye-glint { fill: rgba(255,255,255,0.95); pointer-events:none; }
.lf-mascot-mouth {
    stroke: #e5e7eb;
    stroke-width: 1.4;
    stroke-linecap: round;
    fill: none;
}

/* ── antena ── */
.lf-mascot-antenna {
    stroke: rgb(var(--app-primary-rgb, 241, 44, 76));
    stroke-width: 1.4;
    stroke-linecap: round;
    fill: none;
}
.lf-mascot-antenna-tip {
    fill: rgb(var(--app-primary-rgb, 241, 44, 76));
    transform-box: fill-box;
    transform-origin: center;
    animation: lf-mascot-tip-pulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 2px rgba(var(--app-primary-rgb, 241, 44, 76), 0.7));
}

/* ── LED do peito ── */
.lf-mascot-chest-led {
    fill: rgb(var(--app-primary-rgb, 241, 44, 76));
    transform-box: fill-box;
    transform-origin: center;
    animation: lf-mascot-tip-pulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 1.5px rgba(var(--app-primary-rgb, 241, 44, 76), 0.6));
}

/* ── olhos: blinkam juntos a cada ~5s ── */
.lf-mascot-eye          { transform-box: view-box; animation: lf-mascot-blink 5.2s ease-in-out infinite; }
.lf-mascot-eye-left     { transform-origin: 13px 12.5px; }
.lf-mascot-eye-right    { transform-origin: 23px 12.5px; }

/* ── cabeça inclina lado a lado (tilt 4°) ── */
.lf-mascot-head-group {
    transform-box: view-box;
    transform-origin: 18px 19.6px;       /* base do pescoço */
    animation: lf-mascot-head-tilt 2.2s ease-in-out infinite;
}

/* ── torso balança ao contrário da cabeça (twist groove) ── */
.lf-mascot-body-group {
    transform-box: view-box;
    transform-origin: 18px 32.6px;       /* quadril */
    animation: lf-mascot-body-sway 2.2s ease-in-out infinite;
}

/* ── braços alternam swing pra cima/baixo (180° fora de fase) ── */
.lf-mascot-arm        { transform-box: view-box; }
.lf-mascot-arm-left   { transform-origin: 7.5px 23px;  animation: lf-mascot-arm-left  1.1s ease-in-out infinite; }
.lf-mascot-arm-right  { transform-origin: 28.5px 23px; animation: lf-mascot-arm-right 1.1s ease-in-out infinite; }

/* ── pernas flexionam alternadamente (efeito de "marcar o passo") ── */
.lf-mascot-leg {
    transform-box: fill-box;
    transform-origin: top center;
    animation: lf-mascot-leg-flex 1.1s ease-in-out infinite;
}
.lf-mascot-leg-right { animation-delay: -0.55s; }       /* fase oposta */

/* ── HOVER: a dança fica mais empolgada (mais rápida) ── */
.lf-tut-help-fab:hover .lf-mascot,
.lf-tut-help-fab:hover .lf-mascot-arm-left,
.lf-tut-help-fab:hover .lf-mascot-arm-right,
.lf-tut-help-fab:hover .lf-mascot-leg     { animation-duration: 0.55s; }
.lf-tut-help-fab:hover .lf-mascot-head-group,
.lf-tut-help-fab:hover .lf-mascot-body-group { animation-duration: 1.1s; }

/* ── ATTENTION (primeira visita): dança ainda mais rápida ── */
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot,
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-arm-left,
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-arm-right,
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-leg          { animation-duration: 0.45s; }
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-head-group,
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-body-group   { animation-duration: 0.9s; }
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-antenna-tip,
.lf-tut-help-fab.lf-tut-fab-attention .lf-mascot-chest-led    { animation-duration: 0.7s; }

/* ── keyframes ── */
@keyframes lf-mascot-groove {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.5px); }
}
@keyframes lf-mascot-head-tilt {
    0%, 100% { transform: rotate(-4deg); }
    50%      { transform: rotate(4deg); }
}
@keyframes lf-mascot-body-sway {
    0%, 100% { transform: rotate(2.5deg); }
    50%      { transform: rotate(-2.5deg); }
}
@keyframes lf-mascot-arm-left {
    0%, 100% { transform: rotate(-12deg); }
    50%      { transform: rotate(32deg); }
}
@keyframes lf-mascot-arm-right {
    0%, 100% { transform: rotate(12deg); }
    50%      { transform: rotate(-32deg); }
}
@keyframes lf-mascot-leg-flex {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.92); }
}
@keyframes lf-mascot-blink {
    0%, 91%, 100% { transform: scaleY(1); }
    93%, 96%      { transform: scaleY(0.08); }
}
@keyframes lf-mascot-tip-pulse {
    0%, 100% { opacity: 0.85; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.18); }
}

/* ─── "Graças" — performances breves no lugar ───
   Disparadas pelo state machine de roaming em engine.js (chooseAction).
   Cada classe sobrescreve a animação padrão (lf-mascot-groove) por uma
   dança curta. Removida no animationend pra voltar ao groove normal. */
.lf-mascot.performing-spin    { animation: lf-mascot-spin     0.9s cubic-bezier(.6,.05,.4,.95) 1; }
.lf-mascot.performing-jump    { animation: lf-mascot-jump     0.7s ease-out 1; }
.lf-mascot.performing-cheer   { animation: lf-mascot-cheer    0.7s ease-in-out 1; }
.lf-mascot.performing-wave-big{ animation: lf-mascot-wave-big 0.8s ease-in-out 1; }

@keyframes lf-mascot-spin {
    0%   { transform: rotate(0)        translateY(0); }
    20%  { transform: rotate(0)        translateY(-3px); }
    100% { transform: rotate(360deg)   translateY(0); }
}
@keyframes lf-mascot-jump {
    0%, 100% { transform: translateY(0)   scaleY(1); }
    25%      { transform: translateY(-14px) scaleY(0.92); }
    55%      { transform: translateY(-4px)  scaleY(1); }
    85%      { transform: translateY(-1px)  scaleY(1.06); }
}
@keyframes lf-mascot-cheer {
    0%, 100% { transform: scale(1)        rotate(0); }
    30%      { transform: scale(0.94)     rotate(-6deg); }
    65%      { transform: scale(1.18)     rotate(0); }
    85%      { transform: scale(1.05)     rotate(3deg); }
}
@keyframes lf-mascot-wave-big {
    0%, 100% { transform: rotate(0); }
    20%      { transform: rotate(-16deg); }
    50%      { transform: rotate(16deg); }
    78%      { transform: rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
    .lf-mascot.performing-spin,
    .lf-mascot.performing-jump,
    .lf-mascot.performing-cheer,
    .lf-mascot.performing-wave-big { animation: none !important; }
}

/* ─── Poses direcionais (pseudo-3D) ───────────────────────────────────
   Por default só a face frontal aparece. Classes em .lf-tut-help-fab
   (aplicadas pelo JS conforme delta de movimento) trocam pra back ou
   side. Flip horizontal espelha o mascote pra esquerda. Tilts inclinam
   levemente em diagonais. Walking gait substitui o groove de dança
   por uma cadência de passos. */
.lf-mascot-face-back,
.lf-mascot-face-side {
    display: none;
}
.lf-mascot-back-body { display: none; }
.lf-mascot-back-panel { fill: #2a2f37; }
.lf-mascot-vent {
    stroke: #94a3b8;
    stroke-width: 0.9;
    stroke-linecap: round;
    fill: none;
}

/* DIR-BACK: esconde face frontal e LED do peito; mostra vents */
.lf-tut-help-fab.lf-mascot-dir-back .lf-mascot-face-front { display: none; }
.lf-tut-help-fab.lf-mascot-dir-back .lf-mascot-face-back  { display: inline; }
.lf-tut-help-fab.lf-mascot-dir-back .lf-mascot-chest-led  { display: none; }
.lf-tut-help-fab.lf-mascot-dir-back .lf-mascot-back-body  { display: inline; }

/* DIR-SIDE: face de perfil (1 olho central) */
.lf-tut-help-fab.lf-mascot-dir-side .lf-mascot-face-front { display: none; }
.lf-tut-help-fab.lf-mascot-dir-side .lf-mascot-face-side  { display: inline; }

/* FLIP-X: mascote invertido horizontalmente (caminhar pra esquerda) */
.lf-tut-help-fab.lf-mascot-flip-x .lf-mascot {
    transform: scaleX(-1);
}

/* TILT em diagonais — leve inclinação na direção do movimento */
.lf-tut-help-fab.lf-mascot-tilt-up-right   .lf-mascot { transform: rotate(8deg); }
.lf-tut-help-fab.lf-mascot-tilt-up-left    .lf-mascot { transform: scaleX(-1) rotate(8deg); }
.lf-tut-help-fab.lf-mascot-tilt-down-right .lf-mascot { transform: rotate(-8deg); }
.lf-tut-help-fab.lf-mascot-tilt-down-left  .lf-mascot { transform: scaleX(-1) rotate(-8deg); }

/* ─── Walking gait (em movimento) ─────────────────────────────────────
   Quando .lf-mascot-walking está ativo, o body groove some e dá lugar a
   uma cadência de passos: pernas alternam (uma pra cima, outra plantada),
   braços contra-balançam, cabeça/torso bobeiam mais sutilmente. Período
   curto (0.5s) — sensação de andar com pressa. */
.lf-tut-help-fab.lf-mascot-walking .lf-mascot {
    animation: lf-mascot-walk-bob 0.5s ease-in-out infinite;
}
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-leg-left  { animation: lf-mascot-step-left  0.5s ease-in-out infinite; }
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-leg-right { animation: lf-mascot-step-right 0.5s ease-in-out infinite; }
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-foot-left  { animation: lf-mascot-foot-left  0.5s ease-in-out infinite; }
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-foot-right { animation: lf-mascot-foot-right 0.5s ease-in-out infinite; }
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-arm-left  { animation: lf-mascot-arm-walk-left  0.5s ease-in-out infinite; }
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-arm-right { animation: lf-mascot-arm-walk-right 0.5s ease-in-out infinite; }

@keyframes lf-mascot-walk-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-1.2px); }
}
@keyframes lf-mascot-step-left {
    0%, 100% { transform: translateY(0)   scaleY(1); }
    50%      { transform: translateY(-2px) scaleY(0.85); }
}
@keyframes lf-mascot-step-right {
    0%, 100% { transform: translateY(-2px) scaleY(0.85); }
    50%      { transform: translateY(0)   scaleY(1); }
}
@keyframes lf-mascot-foot-left {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes lf-mascot-foot-right {
    0%, 100% { transform: translateY(-2px); }
    50%      { transform: translateY(0); }
}
@keyframes lf-mascot-arm-walk-left {
    0%, 100% { transform: rotate(-18deg); }
    50%      { transform: rotate(20deg); }
}
@keyframes lf-mascot-arm-walk-right {
    0%, 100% { transform: rotate(20deg); }
    50%      { transform: rotate(-18deg); }
}

/* Walking precisa pivotar pernas pelo topo (junta com o corpo) pra
   simular passada — sem isso, scaleY achata a partir do meio. */
.lf-tut-help-fab.lf-mascot-walking .lf-mascot-leg {
    transform-box: fill-box;
    transform-origin: top center;
}

@media (prefers-reduced-motion: reduce) {
    .lf-tut-help-fab.lf-mascot-walking .lf-mascot,
    .lf-tut-help-fab.lf-mascot-walking .lf-mascot-leg,
    .lf-tut-help-fab.lf-mascot-walking .lf-mascot-foot,
    .lf-tut-help-fab.lf-mascot-walking .lf-mascot-arm {
        animation: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lf-mascot,
    .lf-mascot-eye,
    .lf-mascot-antenna-tip,
    .lf-mascot-chest-led,
    .lf-mascot-head-group,
    .lf-mascot-body-group,
    .lf-mascot-arm,
    .lf-mascot-leg {
        animation: none !important;
        transition: none !important;
    }
}

.lf-tut-help-fab .lf-tut-help-tooltip {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
    background: var(--app-bg-card);
    color: var(--app-text-light);
    border: 1px solid var(--app-border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.lf-tut-help-fab:hover .lf-tut-help-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Quando o mascote está na metade esquerda da tela (durante passeio), o
   tooltip flipa pra direita pra não ficar cortado fora do viewport.
   Classe controlada por setupMascotRoaming.updateTooltipSide(). */
.lf-tut-help-fab.lf-tut-tooltip-flipped .lf-tut-help-tooltip {
    right: auto;
    left: calc(100% + 12px);
    transform: translateY(-50%) translateX(-6px);
}
.lf-tut-help-fab.lf-tut-tooltip-flipped:hover .lf-tut-help-tooltip {
    transform: translateY(-50%) translateX(0);
}

/* "Spotlight" sob os pés do mascote pra chamar atenção na primeira visita.
   Antes era um pulse-ring circular ao redor do FAB inteiro — que perdeu o
   sentido quando removemos o círculo. Agora é uma elipse luminosa pulsante
   "iluminando" o robô como num palco, alinhada com o tema dançante. */
.lf-tut-help-fab.lf-tut-fab-attention::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    width: 40px;
    height: 14px;
    transform: translateX(-50%) scale(0.85);
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
        rgba(var(--app-primary-rgb), 0.55) 0%,
        rgba(var(--app-primary-rgb), 0.15) 55%,
        transparent 75%);
    pointer-events: none;
    z-index: -1;
    animation: lf-tut-fab-spotlight 1.4s ease-in-out infinite;
}
@keyframes lf-tut-fab-spotlight {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(0.85); }
    50%      { opacity: 0.95; transform: translateX(-50%) scale(1.18); }
}

/* ---------- Mobile tweaks ---------- */
@media (max-width: 576px) {
    .driver-popover.lf-tut-popover {
        min-width: 0;
        max-width: calc(100vw - 24px);
    }
    .lf-tut-help-fab {
        width: 44px;
        height: 44px;
        right: 14px;
        bottom: 14px;
    }
    .lf-tut-help-fab i { font-size: 20px; }
}