/* ═══════════════════════════════════════════════════════════════════════════
   A ABA DE AJUDA — o que fica na borda depois que o aviso sai

   Pedido do dono em 14/09/2026: "logo após que fechar, ficará uma pequena
   barrinha no canto encostado da tela à direita, ela servirá para que o botão
   retorne automaticamente, somente com aproximação por cima dela".

   O aviso continua igual (ver `balao_ajuda.js` e `static/js/bhq_toast.js`).
   Isto aqui é só o que sobra dele: um traço encostado na borda, na MESMA
   altura em que o aviso nasce, para o cartão parecer sair de dentro da aba em
   vez de aparecer solto noutro canto.

   ── A ÁREA DE TOQUE É MAIOR QUE O TRAÇO ────────────────────────────────────

   O traço tem 6px de largura porque tem de ser discreto — ele fica na tela o
   tempo todo. Mas 6px é alvo que ninguém acerta, e "aproximação" com 6px de
   tolerância vira caça ao pixel.

   Então o elemento clicável tem 28px e o traço é desenhado por `::before`
   dentro dele, colado à direita. O que se vê é fino; o que responde ao
   ponteiro é largo. Sem isso, a única forma de acertar seria encostar o
   ponteiro na borda da tela.
   ═══════════════════════════════════════════════════════════════════════════ */

.bhq-aba-ajuda {
    position: fixed;
    right: 0;

    /* A mesma altura do aviso (`#toast-container` começa em 76px), mais a
       diferença de altura entre o cartão e a aba, para os dois nascerem
       centrados um no outro. */
    top: 92px;
    z-index: 9989;          /* um abaixo do aviso: ele passa por cima dela */

    width: 28px;
    height: 64px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    /* Entra deslizando da borda, depois que o aviso sai. */
    opacity: 0;
    transform: translateX(10px);
    transition: opacity .35s ease, transform .35s ease;
}

.bhq-aba-ajuda.visivel {
    opacity: 1;
    transform: none;
}

/* O traço propriamente dito. */
.bhq-aba-ajuda::before {
    content: '';
    display: block;
    width: 6px;
    height: 100%;
    border-radius: 6px 0 0 6px;
    background: #2563eb;          /* o azul do aviso `info`, para os dois se lerem juntos */
    box-shadow: -2px 0 10px rgba(37, 99, 235, .35);
    transition: width .18s ease, background-color .18s ease;
}

/* Aproximou: o traço engorda um pouco. É a única resposta visual que ele dá —
   o resto do trabalho é do aviso, que aparece ao lado. */
.bhq-aba-ajuda:hover::before,
.bhq-aba-ajuda:focus-visible::before {
    width: 10px;
    background: #1d4ed8;
}

.bhq-aba-ajuda:focus-visible {
    outline: none;
}

.bhq-aba-ajuda:focus-visible::before {
    box-shadow: -2px 0 10px rgba(37, 99, 235, .35), 0 0 0 3px rgba(37, 99, 235, .35);
}

/* Enquanto o aviso está aberto a aba some: ela é o que RESTA dele, e as duas
   coisas na tela ao mesmo tempo seriam a mesma oferta repetida. */
.bhq-aba-ajuda.escondida {
    opacity: 0;
    pointer-events: none;
    transform: translateX(10px);
}

html[data-theme="dark"] .bhq-aba-ajuda::before {
    background: #60a5fa;
}

@media (prefers-reduced-motion: reduce) {
    .bhq-aba-ajuda,
    .bhq-aba-ajuda::before {
        transition-duration: .01ms;
    }
}