/* =============================================================================
   BARRA DE SINCRONIZAÇÃO NO PÉ DA LISTA (25/09/2026)
   -----------------------------------------------------------------------------
   Igual ao aviso do WhatsApp Web ("Sincronizando mensagens mais antigas"): uma faixa
   no pé da lista de conversas, com ícone, título, "N de M" e a barra fina de progresso.
   Montada por public/js/painel/sincronizacao.js. Usa os tokens --wa-* do estilo-whatsapp.css
   (variável resolve na hora do uso: vir antes dele no index não muda nada — e ele tem de ser
   a última folha). Escopo: só .sinc-*.
   ========================================================================== */

:root,
:root.dark-theme {
    --sinc-trilho: rgba(255, 255, 255, 0.1);
    --sinc-icone-fundo: #103529;
    --sinc-icone: #21c063;
}

:root.light-theme {
    --sinc-trilho: rgba(17, 27, 33, 0.1);
    --sinc-icone-fundo: #d9fdd3;
    --sinc-icone: #15603e;
}

.sinc-rodape {
    flex: none;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    padding: 12px 16px 14px;
    border-top: 1px solid var(--border);
    background: var(--bg-sidebar);
    color: var(--wa-texto);
}

.sinc-rodape[hidden] {
    display: none;
}

.sinc-icone {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--sinc-icone-fundo);
    color: var(--sinc-icone);
    font-size: 13px;
}

.sinc-rodape[data-fase="recebendo"] .sinc-icone i,
.sinc-rodape[data-fase="conversas"] .sinc-icone i {
    animation: sinc-gira 1.2s linear infinite;
}

.sinc-textos {
    min-width: 0;
}

.sinc-titulo {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--wa-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sinc-detalhe {
    font-size: 13px;
    line-height: 18px;
    color: var(--wa-texto-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sinc-fechar {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--wa-icone);
    cursor: pointer;
    font-size: 14px;
}

.sinc-fechar:hover {
    background: var(--wa-hover);
}

.sinc-fechar:focus-visible {
    outline: 2px solid var(--wa-verde);
    outline-offset: 2px;
}

.sinc-fechar[hidden] {
    display: none;
}

.sinc-progresso {
    grid-column: 1 / -1;
    height: 4px;
    border-radius: 2px;
    background: var(--sinc-trilho);
    overflow: hidden;
}

.sinc-progresso-preenchido {
    width: 0;
    height: 100%;
    border-radius: 2px;
    background: var(--wa-verde-botao);
    transition: width 0.3s ease;
}

@keyframes sinc-gira {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sinc-rodape[data-fase="recebendo"] .sinc-icone i,
    .sinc-rodape[data-fase="conversas"] .sinc-icone i {
        animation: none;
    }

    .sinc-progresso-preenchido {
        transition: none;
    }
}