/* /Components/FeedCommentThread.razor.rz.scp.css */
/* Indicador "digitando" do bot: 3 pontinhos animados em sequência, no estilo dos chats.
   CSS flat (sem nesting, sem oklch/color-mix) porque o .razor.css scoped NÃO passa pelo
   downlevel do Lightning CSS — precisa funcionar em Safari >= 15. O isolamento de CSS do
   Blazor escopa o nome do @keyframes e a referência em `animation` juntos, então a animação
   é local a este componente. */
.typing-dots[b-4bunppblng] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.typing-dots span[b-4bunppblng] {
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: var(--color-brand);
    animation: bolao-typing-b-4bunppblng 1.2s infinite ease-in-out both;
}

/* Atrasos escalonados por classe (em vez de :nth-child) para não depender de como o
   isolamento de CSS do Blazor reescreve as pseudo-classes. */
.typing-dots .typing-d2[b-4bunppblng] {
    animation-delay: 0.18s;
}

.typing-dots .typing-d3[b-4bunppblng] {
    animation-delay: 0.36s;
}

/* No escuro o azul-marca fica pouco contrastado sobre o card — usa o tom claro. */
.dark .typing-dots span[b-4bunppblng] {
    background-color: var(--color-brand-light);
}

@keyframes bolao-typing-b-4bunppblng {
    0%, 60%, 100% {
        opacity: 0.25;
        transform: translateY(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Layout estilizado com utilitários do Tailwind diretamente no markup. */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Navegação estilizada com utilitários do Tailwind diretamente no markup. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Conteúdo de cada estado: escondido por padrão, revelado pela classe que o Blazor
   liga no #components-reconnect-modal conforme o estado da reconexão. */
.components-reconnect-first-attempt-visible[b-yyuj85j15q],
.components-reconnect-repeated-attempt-visible[b-yyuj85j15q],
.components-reconnect-failed-visible[b-yyuj85j15q],
.components-pause-visible[b-yyuj85j15q],
.components-resume-failed-visible[b-yyuj85j15q],
.components-rejoining-animation[b-yyuj85j15q] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-yyuj85j15q],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-yyuj85j15q],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-yyuj85j15q],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-yyuj85j15q],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-yyuj85j15q],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-yyuj85j15q],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-yyuj85j15q] {
    display: block;
}

/* Toast no canto inferior. NÃO é modal: a visibilidade vem do atributo [open] (folha de
   estilo do navegador, igual a qualquer <dialog>) + dialog.show(); aqui só posicionamos e
   estilizamos a caixa, sem ::backdrop e sem cobrir/travar a página. Sem CSS nesting nem
   oklch/color-mix — compatível com Safari >= 15. */
#components-reconnect-modal[b-yyuj85j15q] {
    position: fixed;
    z-index: 1000;
    bottom: 1rem;
    right: 1rem;
    left: auto;
    top: auto;
    width: auto;
    max-width: calc(100vw - 2rem);
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: 0.625rem;
    background-color: #1f2937;
    color: #f9fafb;
    font-size: 0.875rem;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

#components-reconnect-modal[open][b-yyuj85j15q] {
    animation: components-reconnect-toast-in-b-yyuj85j15q 0.25s ease both;
}

@keyframes components-reconnect-toast-in-b-yyuj85j15q {
    0% {
        opacity: 0;
        transform: translateY(0.75rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.components-reconnect-container[b-yyuj85j15q] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
}

#components-reconnect-modal p[b-yyuj85j15q] {
    margin: 0;
    text-align: left;
}

#components-reconnect-modal button[b-yyuj85j15q] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 0.375rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    white-space: nowrap;
    cursor: pointer;
}

#components-reconnect-modal button:hover[b-yyuj85j15q] {
    background-color: #3b6ea2;
}

#components-reconnect-modal button:active[b-yyuj85j15q] {
    background-color: #6b9ed2;
}

/* Spinner enxuto (anel girando) — cabe ao lado do texto no toast. */
.components-rejoining-animation[b-yyuj85j15q] {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: components-rejoining-animation-b-yyuj85j15q 0.8s linear infinite;
}

@keyframes components-rejoining-animation-b-yyuj85j15q {
    100% {
        transform: rotate(360deg);
    }
}

/* No celular, ocupa a largura embaixo, sem cobrir o conteúdo. */
@media (max-width: 480px) {
    #components-reconnect-modal[b-yyuj85j15q] {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        max-width: none;
    }
}
/* /Components/RankingTimelineChart.razor.rz.scp.css */
/* Flat (sem nesting, sem oklch/color-mix) — não passa pelo downlevel do Lightning CSS. */

.series[b-c43hcdl9w1] {
    cursor: pointer;
}

/* Alvo de hover largo e invisível: facilita acertar a linha no meio do "espaguete". */
.hit[b-c43hcdl9w1] {
    fill: none;
    stroke: transparent;
    stroke-width: 14px;
    pointer-events: stroke;
}

.line[b-c43hcdl9w1] {
    fill: none;
    stroke-linejoin: round;
    stroke-linecap: round;
    pointer-events: none;
    transition: stroke-width 0.12s ease, stroke-opacity 0.12s ease, opacity 0.12s ease;
}

/* Ao passar o mouse sobre o gráfico, escurece todas as séries... */
.series-group:hover .series[b-c43hcdl9w1] {
    opacity: 0.12;
}

/* ...e traz de volta (destacada) só aquela sob o cursor. */
.series-group:hover .series:hover[b-c43hcdl9w1] {
    opacity: 1;
}

.series:hover .line[b-c43hcdl9w1] {
    stroke-width: 4px;
    stroke-opacity: 1;
}