body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    color: inherit;
}

/* Trending (Top 10) -- fica fora do .site-conteudo, antes dele */
.trending {
    width: 100%;
    padding: 2rem 1.5rem;
}

.trending__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.trending__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    /* position+z-index -- .trending__trilho tem margin-top negativo (folga
       pro tooltip do selo não cortar, ver .trending__trilho) que avança por
       cima dessa faixa; sem isso o "Ver mais" fica clicável só visualmente,
       o trilho intercepta o clique por estar depois no DOM. */
    position: relative;
    z-index: 1;
}

.trending__titulo {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid var(--accent);
    border-radius: 0px 6px 6px 0px;
    background: var(--accent-10);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

.trending__swiper {
    position: relative;
}

.trending__trilho {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - 3 * 0.5rem) / 4);
    gap: 0.5rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* overflow-x:auto corta o eixo vertical também (mesmo esquema de
       .rodape__novos em barra.css) -- sem essa folga, o tooltip do selo
       (ver [data-dica]) da carta da fileira de cima ficava cortado. */
    padding-top: 40px;
    margin-top: -40px;
}

.trending__trilho::-webkit-scrollbar {
    display: none;
}

.trending-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem;
    min-height: 92px;
    border-radius: 6px;
    /* var(--panel-2) no lugar de #ffffff fixo -- no claro é quase branco
       (mesmo efeito pastel de antes), no escuro mistura com o painel
       escuro em vez de continuar clareando o card (que deixava o texto
       --text, claro no tema escuro, ilegível em cima de um fundo que
       insistia em ficar claro). */
    background: color-mix(in srgb, var(--trending-cor) 38%, var(--panel-2) 62%);
    color: var(--text);
    text-decoration: none;
}

.trending-card__numero {
    align-self: flex-start;
    margin-top: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--trending-cor);
    color: #ffffff;
    font-weight: var(--fw-bold);
    font-size: 0.8rem;
}

.trending-card__texto {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.trending-card__nome-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.trending-card__nome {
    font-weight: var(--fw-semibold);
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.trending-card__seguidores {
    font-size: 13px;
    color: var(--trending-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trending-card__tempo {
    font-size: 14px;
    color: var(--trending-texto-suave);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trending-card__img,
.trending-card__img--vazio {
    flex: 0 0 auto;
    width: 62px;
    height: 62px;
    border-radius: 3px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    border: 2px solid transparent;
    transition: border-color var(--t);
}

.trending-card:hover .trending-card__img,
.trending-card:hover .trending-card__img--vazio {
    border-color: var(--trending-cor);
}

.trending-card__img--vazio {
    background: color-mix(in srgb, var(--trending-cor) 42%, var(--panel-2) 58%);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 1.2rem;
}

.trending__seta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--panel-2);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--sombra-sm);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t);
}

.trending__swiper:hover .trending__seta {
    opacity: 1;
    visibility: visible;
}

.trending__seta--oculta {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none;
}

.trending__seta--prev {
    left: -14px;
}

.trending__seta--next {
    right: -14px;
}

@media (max-width: 900px) {
    .trending__trilho {
        /* "Peek": mostra 4 cards -- 2 inteiros (1 coluna cheia) e mais 2
           espiando a uns 70% da largura, convidando a arrastar pro lado. */
        grid-auto-columns: calc((100% - 0.5rem) / 1.7);
    }

    /* No mobile não tem hover, então a seta fica sempre visível (só some via --oculta nas pontas). */
    .trending__seta {
        opacity: 1;
        visibility: visible;
    }

    /* Card mais compacto pra não ficar cortado demais nessa largura menor. */
    .trending-card {
        gap: 0.5rem;
        padding: 0.6rem;
        min-height: 76px;
    }

    .trending-card__numero {
        margin-top: 4px;
        width: 22px;
        height: 22px;
        font-size: 0.7rem;
    }

    .trending-card__nome {
        font-size: 13px;
    }

    .trending-card__tempo {
        font-size: 12px;
    }

    .trending-card__img,
    .trending-card__img--vazio {
        width: 48px;
        height: 48px;
    }

    .trending-card__img--vazio {
        font-size: 1rem;
    }

    .trending__seta {
        width: 26px;
        height: 26px;
    }
}

/* Seção Atualizados -- fica fora do .site-conteudo, igual o Trending */
.secao-atualizados {
    width: 100%;
    padding: 2rem 1.5rem;
}

.secao-atualizados__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.secao-atualizados__corpo {
    display: flex;
    gap: 1.75rem;
    align-items: stretch;
}

/* Cabeçalho do card "Atualizados" da home -- mesmo padrão do
   Trending::topDez() (chip do título + "Ver todos" do outro lado), no lugar
   das abas que saíram daqui. */
.secao-atualizados__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    margin-bottom: 1.25rem;
}

.secao-atualizados__titulo {
    display: inline-block;
    margin-left: -1.25rem;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid var(--accent);
    border-radius: 0px 6px 6px 0px;
    background: var(--accent-10);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

/* Mesmo padrão visual do .barra__navlink da barra (sublinha que desliza
   embaixo do ativo/hover) -- só texto, sem gradiente, com um "chip" leve
   surgindo atrás no hover pra suavizar a troca entre uma aba e outra. Ainda
   usado por trendings.php (abas de formato Fotos/Perfis). */
.secao-atualizados__tabs {
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.secao-atualizados__tab {
    position: relative;
    padding: 0.4rem 0.6rem 0.75rem;
    margin: 0 -0.6rem;
    border-radius: 6px 6px 0 0;
    background: transparent;
    border: none;
    font-size: 1rem;
    font-weight: var(--fw-semibold);
    color: var(--text-2);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--t), background var(--t);
}

.secao-atualizados__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: transparent;
    border-radius: var(--radius-pill) var(--radius-pill) 0 0;
    transform: scaleX(0);
    transition: transform var(--t), background var(--t);
}

.secao-atualizados__tab:hover {
    color: var(--accent);
}

.secao-atualizados__tab:hover::after {
    background: var(--accent);
    transform: scaleX(1);
}

.secao-atualizados__tab--ativa {
    color: var(--accent);
}

.secao-atualizados__tab--ativa::after {
    background: var(--accent);
    transform: scaleX(1);
}

.secao-atualizados__principal {
    flex: 7 1 0;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.secao-atualizados__painel--oculto {
    display: none;
}

.secao-atualizados__ver-mais {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg-global);
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--text-3);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.secao-atualizados__ver-mais:hover {
    background: var(--accent-06);
    border-color: var(--accent-24);
    color: var(--accent);
    box-shadow: none;
}

/* Coluna da direita de Atualizados -- carrega o flex:3/30% (quem antes era
   o próprio .secao-atualizados__sidebar); agora é só um wrapper de coluna
   pros 2 boxes (Oficiais + Assinantes da Vez) empilharem SEPARADOS, com
   gap entre eles, cada um com a própria borda/fundo -- não mais 1 box só
   com os 2 dentro (pedido explícito). align-items:flex-start no corpo (ver
   abaixo) impede que os 2 boxes juntos sejam esticados até a altura do
   grid principal de Atualizados (que é bem mais alto), o que deixava vão
   vazio sobrando dentro dos boxes. */
.secao-atualizados__sidebar-coluna {
    flex: 3 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Preenchimento decorativo -- a coluna (Oficiais + Assinantes da Vez) quase
   sempre é mais baixa que o grid de Atualizados ao lado; em vez de deixar
   vão vazio ali, esse bloco cresce (flex:1) e mostra um pattern de pontinhos
   bem sutil só de enfeite. Só entra no HTML pra quem está DESLOGADO (ver
   SecaoAtualizados::html()) -- logado, a coluna já ganhou o bloco de Sorte
   do dia e fica alta o bastante sem precisar de enchimento. */
.secao-atualizados__sidebar-preenchimento {
    flex: 1 1 auto;
    min-height: 0;
    background-color: var(--bg-global);
    background-image: radial-gradient(var(--border) 1px, transparent 1.5px);
    background-size: 14px 14px;
}

/* Cada box (Oficiais OU Assinantes da Vez) -- display:flex column pro
   cabeçalho ficar fixo em cima e a lista logo abaixo. */
.secao-atualizados__sidebar {
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Mesma altura de .secao-atualizados__tabs, sem a borda embaixo (pedido
   explícito -- ficava competindo com a borda do próprio título). O título
   "cola" na borda esquerda do card via margin-left negativo (cancela o
   padding do painel); o botão "Ver todos" do outro lado NÃO cola, fica no
   padding normal. */
.secao-atualizados__sidebar-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2rem;
    margin-bottom: 0.85rem;
}

.secao-atualizados__sidebar-titulo {
    display: inline-block;
    margin-left: -1.25rem;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid var(--accent);
    border-radius: 0px 6px 6px 0px;
    background: var(--accent-10);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

/* Assinantes da Vez -- mesmo chip, na cor amarela/mostarda da Assinantes
   (#d9b23c, ver .secao-assinantes__titulo) em vez do accent roxo padrão. */
.secao-atualizados__sidebar-titulo--amarelo {
    border-left-color: #d9b23c;
    background: color-mix(in srgb, #d9b23c 14%, transparent);
}

/* Seção Assinantes -- mesmo esquema de 2 cards fora do .site-conteudo da
   SecaoAtualizados, só que sem abas e com o card lateral virando espaço de
   anúncio (Adsense) em vez de outro loop. */
.secao-assinantes {
    width: 100%;
    padding: 2rem 1.5rem;
}

.secao-assinantes__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.secao-assinantes__corpo {
    display: flex;
    gap: 1.75rem;
    align-items: stretch;
}

/* flex:1 1 auto (não mais a proporção 7:3 em flex-basis:0) -- o grid de
   avatares (110px fixos) precisa da MESMA largura útil do de Atualizados
   pra caber a mesma quantidade de colunas (5); a divisão proporcional
   dava um valor levemente menor aqui (mesmos números, resultado diferente),
   sobrando só 4 colunas. Largura fixa da sidebar ao lado (ver
   .secao-assinantes__corpo > .secao-atualizados__sidebar) garante o mesmo
   espaço sobrando pro principal em vez de depender dessa proporção. */
.secao-assinantes__principal {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.secao-assinantes__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    margin-bottom: 1.25rem;
}

/* Mesmo "chip" da .secao-atualizados__sidebar-titulo, só que na cor
   amarela/mostarda da paleta do Trending (#d9b23c) em vez do accent roxo.
   margin-left negativo cola só o título na borda esquerda do card (cancela
   o padding do painel) -- o botão "Ver todos" ao lado fica no padding
   normal, sem colar em lugar nenhum. */
.secao-assinantes__titulo {
    display: inline-block;
    margin-left: -1.25rem;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid #d9b23c;
    border-radius: 0px 6px 6px 0px;
    background: color-mix(in srgb, #d9b23c 14%, transparent);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

.secao-assinantes__anuncio {
    flex: 3 1 0;
    min-width: 0;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

.secao-assinantes__anuncio-rotulo {
    font-size: 0.65rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}

.secao-assinantes__adsbygoogle {
    width: 100%;
}

/* Trending Fotos -- grade 3x3 de miniaturas quadradas SEM nome de usuário
   (ver Nucleo\SecaoTrendingFotos::html()), no lugar que era o anúncio
   dentro da seção Assinantes da home. */
.secao-assinantes__corpo > .secao-atualizados__sidebar {
    flex: 0 0 280px;
}

.trending-fotos-mini {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.trending-fotos-mini__item {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    border-radius: var(--radius-xs);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: border-color var(--t);
}

.trending-fotos-mini__item:hover {
    border-color: var(--accent);
}

.trending-fotos-mini__item img {
    width: 100%;
    height: 100%;
    padding: 4px;
    object-fit: cover;
    display: block;
}

/* Publicidade da home -- saiu de dentro da seção Assinantes (virou o box de
   Trending Fotos, ver acima) e passou pro rodapé da página, como seção
   própria em 100% de largura (ainda dentro do --container). */
.secao-publicidade {
    width: 100%;
    padding: 1.5rem;
}

.secao-publicidade__inner {
    max-width: var(--container);
    margin: 0 auto;
}

/* Faixa de números da home ("O Pixelog tem X usuários..."), antes da
   publicidade -- ver Nucleo\SecaoResumoNumeros. Texto/números com pesos e
   tamanhos diferentes de propósito (números em negrito se destacam do
   texto de apoio ao redor). */
.secao-resumo {
    width: 100%;
    padding: 0 1.5rem 2rem;
}

.secao-resumo__inner {
    max-width: var(--container);
    margin: 0 auto;
    background: var(--rodape-bg);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

.secao-resumo__texto {
    margin: 0;
    text-align: center;
    color: var(--text-2);
    font-size: 14px;
    line-height: 1.6;
}

.secao-resumo__numero {
    font-size: 1rem;
    font-weight: var(--fw-semibold);
}

a.secao-resumo__numero--link {
    color: var(--accent);
    text-decoration: none;
}

a.secao-resumo__numero--link:hover {
    text-decoration: underline;
}

/* Seção Destaques da Semana -- bloco em 100% de largura, sem sidebar (já
   dividiu linha com Oficiais em 2 rounds diferentes -- agora é a vez de
   Atualizados, ver SecaoAtualizados::html()). Card em teste, estilo "post
   do Explorar do Tumblr": cabeçalho (avatar+insígnia+nome+verificado,
   categoria como texto) e a foto embaixo -- sem selo/imagem de categoria
   por enquanto, ver SecaoDestaques::card(). */
.secao-destaques {
    width: 100%;
    padding: 2rem 1.5rem;
}

.secao-destaques__inner {
    max-width: var(--container);
    margin: 0 auto;
}

/* Painel de Destaques da Semana tem classe própria (não mais
   .secao-atualizados__principal -- esse aqui não divide 70/30 com
   ninguém, então não faz sentido herdar nome/flex de outra seção). Sem
   fundo/borda/padding de propósito -- "cru" igual o Trending, sem o box
   branco por baixo (pedido explícito). */
.secao-destaques__principal {
    min-width: 0;
}

.secao-destaques__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    margin-bottom: 1.25rem;
}

.secao-destaques__titulo {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid #eab308;
    border-radius: 0px 6px 6px 0px;
    background: color-mix(in srgb, #eab308 14%, transparent);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

/* "Sorte do dia" -- 1 linha só (ícone + rótulo em negrito + frase), nas
   cores normais do site (--panel/--border/--accent), sem gradiente nem
   caixa alta -- pedido explícito de simplificar. Ver Nucleo\SecaoSorteDoDia. */
.secao-sorte {
    width: 100%;
    padding-top: 1.5rem;
}

.secao-sorte__inner {
    max-width: var(--container);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    background: var(--accent-10);
    border: 1px solid #7c3aed54;
    border-radius: var(--radius-lg);
    padding: 0.85rem 1.1rem;
    font-size: 14px;
    line-height: 1.5;
}

.secao-sorte__cabecalho {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.secao-sorte__icone {
    flex: 0 0 auto;
    color: var(--accent);
    font-size: 1.1rem;
}

.secao-sorte__titulo {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.secao-sorte__texto {
    color: var(--text-2);
}

/* auto-fit (não auto-fill) de propósito -- com poucos itens (ex: 6 numa
   linha que caberia 7), auto-fill reservava a 7ª coluna vazia mesmo sem
   card pra ocupar, deixando os cards agrupados à esquerda em vez de
   esticar até a borda direita (destoando do resto da home). auto-fit
   colapsa a coluna vazia e redistribui o espaço pros cards de verdade. */
.secao-destaques__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem 0.75rem;
}

/* .destaque-item é o <a> clicável (grid item de verdade); .destaque-card é
   só a caixa com borda (avatar/nome/foto) -- o selo (ver .destaque-card__selo
   embaixo) fica FORA dela de propósito, não é mais filho do card. */
.destaque-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.destaque-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    transition: border-color var(--t), box-shadow var(--t);
}

.destaque-item:hover .destaque-card {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-08);
}

.destaque-card__cabecalho {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.65rem;
}

.destaque-card__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border);
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
}

.destaque-card__info {
    min-width: 0;
    flex: 1 1 auto;
}

.destaque-card__nome-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.destaque-card__nome {
    font-size: 0.82rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.destaque-card__categoria {
    margin-top: 0.1rem;
    font-size: 0.72rem;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destaque-card__foto {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
    /* .destaque-card não tem mais overflow:hidden (clipava o tooltip do
       selo no cabeçalho, ver [data-dica] em barra.css) -- o arredondado
       de baixo agora é daqui mesmo, não mais herdado do corte do pai. */
    border-radius: 0 0 calc(var(--radius) - 1px) calc(var(--radius) - 1px);
}

/* Selo da categoria embaixo da foto, FORA da caixa do .destaque-card (não
   compartilha a borda/fundo dela) -- 80% de largura, centralizado, subindo
   por cima da borda inferior do card (margin-top negativo). */
.destaque-card__selo {
    width: 80%;
    margin: -30px auto 0;
    object-fit: contain;
    display: block;
}

/* Seção Verificados -- mesmo par principal/lateral (70/30) da Assinantes/
   Atualizados (reaproveita .secao-atualizados__principal/__sidebar direto).
   O painel principal não é um grid comum, é um carrossel de uma linha só
   -- reaproveita o swiper genérico do Trending (.trending__swiper/__seta*
   + trending.js, que já escuta qualquer [data-trending-swiper] da
   página), só que com um trilho em flex de 1 linha (.secao-verificados__
   trilho) no lugar do grid de 2 linhas do Trending. O lateral é o loop de
   Oficiais, com o título no mesmo "chip" das outras seções, mas na cor
   --accent (igual o título do próprio Trending). */
.secao-verificados {
    width: 100%;
    padding: 2rem 1.5rem;
}

.secao-verificados__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.secao-verificados__corpo {
    display: flex;
    gap: 1.75rem;
    align-items: stretch;
}

.secao-verificados__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.5rem;
    margin-bottom: 1.25rem;
}

.secao-verificados__titulo {
    display: inline-block;
    margin-left: -1.25rem;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid #6c8ef5;
    border-radius: 0px 6px 6px 0px;
    background: color-mix(in srgb, #6c8ef5 14%, transparent);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

/* Cards do carrossel com largura fixa (igual .cartao-usuario nos outros
   loops) -- no desktop o painel de 70% cabe uns 6 de cada vez naturalmente,
   sem precisar forçar nenhuma conta por "página". O width:100px aqui é só
   pra VENCER a regra responsiva .cartao-usuario{width:100%} (grid de 3
   colunas dos outros loops no mobile) por especificidade -- era essa regra
   que colapsava os cards pra largura inteira do trilho e só deixava 1
   aparecer por vez no celular; card com largura fixa resolve nas duas
   telas. */
.secao-verificados__trilho {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.secao-verificados__trilho::-webkit-scrollbar {
    display: none;
}

.secao-verificados__trilho .cartao-usuario {
    flex: 0 0 auto;
    width: 110px;
}

/* Lista de Oficiais -- mesmo .cartao-usuario (110px) do resto do site,
   só que num flex com wrap em vez do loop__grid genérico: como normalmente
   são só 1-2 contas, o grid auto-fill com justify-content:space-between
   espalhava os cards pelas pontas, deixando um vão enorme no meio. */
.oficiais-lista {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 1rem;
}

/* Header genérico reaproveitado por várias páginas sem componente próprio
   (conta.php, trendings.php, explorar.php) -- mesmo tamanho do chip
   ".trending__titulo" da home (e do resto dos chips do site --
   .diretorio__titulo, .secao-atualizados__sidebar-titulo). */
.mais-visitados__cabecalho {
    margin-bottom: 1.25rem;
}

.mais-visitados__titulo {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid var(--accent);
    border-radius: 0px 6px 6px 0px;
    background: var(--accent-10);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .secao-atualizados__corpo {
        flex-direction: column;
    }

    .secao-atualizados__principal,
    .secao-atualizados__sidebar-coluna {
        width: 100%;
    }

    /* Oficiais + Assinantes da Vez lado a lado mesmo no mobile (pedido
       explícito -- empilhados um embaixo do outro ficava esquisito aqui).
       Sorte do dia é o 1º filho desse mesmo flex row -- sem o wrap, ela
       dividia a linha com os outros dois em vez de ficar acima (ver regra
       de .secao-sorte logo abaixo, que força ela pra própria linha). */
    .secao-atualizados__sidebar-coluna {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.85rem;
    }

    /* Sorte do dia ocupa a linha inteira sozinha, acima de Oficiais +
       Assinantes da Vez (que aí sim ficam lado a lado na linha de baixo,
       ver flex-wrap acima) -- sem isso ela concorria a largura junto com os
       outros dois. Filho direto é .secao-sorte__inner (não .secao-sorte) --
       SecaoAtualizados::html() chama SecaoSorteDoDia::conteudo() direto, sem
       o wrapper <section class="secao-sorte"> que só SorteDoDia::html() usa. */
    .secao-atualizados__sidebar-coluna > .secao-sorte__inner {
        flex: 1 1 100%;
    }

    /* Em row, o preenchimento (3º filho, só existe pra esticar a coluna no
       desktop -- ver .secao-atualizados__sidebar-preenchimento) viraria uma
       3ª "coluna" vazia espremendo Oficiais/Assinantes da Vez -- sem
       utilidade aqui, esconde. */
    .secao-atualizados__sidebar-preenchimento {
        display: none;
    }

    /* Oficiais/Assinantes da Vez lado a lado deixa cada box só com ~metade
       da largura da coluna -- o tamanho fixo de 88px (padrão mobile de
       todo loop, ver .cartao-usuario__avatar acima) sobra espaço vazio do
       lado. Aqui a foto estica pra preencher a largura do card em vez do
       cap fixo -- só 1 card por linha (.oficiais-lista quebra em coluna),
       então não tem risco de espremer mais de uma foto grande na mesma linha. */
    .secao-atualizados__sidebar-coluna .cartao-usuario__avatar,
    .secao-atualizados__sidebar-coluna .cartao-usuario__avatar-img {
        width: 100%;
    }

    .secao-atualizados__sidebar-coluna > .secao-atualizados__sidebar {
        flex: 1 1 0;
        min-width: 0;
    }

    .secao-assinantes__corpo {
        flex-direction: column;
    }

    .secao-assinantes__principal,
    .secao-assinantes__anuncio {
        width: 100%;
    }

    .secao-verificados__corpo {
        flex-direction: column;
    }
}

.boas-vindas {
    background: var(--success-10);
    border: 1px solid var(--success);
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Loops (Atualizados / Assinantes / Verificados / Oficiais) */
.loop {
    margin-bottom: 2.25rem;
}

.loop__cabecalho {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3rem;
    margin-bottom: 1rem;
}

.loop__titulo {
    font-size: 18px;
    margin: 0;
    text-align: left;
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.loop__vazio {
    color: var(--text-3);
    font-size: 0.85rem;
}

.loop__ver-mais {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: var(--fw-medium);
}

.loop__ver-mais:hover {
    text-decoration: underline;
}

/* Sem justify-content:space-between de propósito -- com colunas fixas de
   110px, ele espalhava o gap de sobra entre os cards (ficava bem maior que
   o declarado abaixo, "respiro" excessivo). Gap fixo de 1.55rem em vez
   disso -- sobra um vão à direita quando as colunas não preenchem a
   largura toda do painel (não alinha com a borda), aceito de propósito. */
.loop__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 110px);
    gap: 1.55rem;
}

.cartao-usuario {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    text-decoration: none;
    color: inherit;
    width: 110px;
}

/* Moldura dos thumbnails dos loops (Atualizados/Assinantes/Verificados/
   Oficiais, home e diretório/abas internas) -- porta .thumb-px__midia do
   antigo, sem radius, com borda+fundo+destaque no hover. Destaques e
   Trending ficam de fora de propósito -- usam classe própria
   (.destaque-card__foto/.trending-card__img), nunca essa aqui. */
.cartao-usuario__avatar,
.cartao-usuario__avatar-img {
    position: relative;
    display: block;
    width: 110px;
    height: 110px;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--panel);
    overflow: hidden;
    transition: border-color var(--t), background-color var(--t), box-shadow var(--t), transform var(--t);
}

.cartao-usuario__avatar-img {
    padding: 4px;
    border-radius: 3px;
    object-fit: cover;
}

.cartao-usuario__avatar::before,
.cartao-usuario__avatar-img::before {
    content: "";
    position: absolute;
    inset: -4px;
    border: 1px solid var(--accent);
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--t);
    pointer-events: none;
}

.cartao-usuario__avatar:hover,
.cartao-usuario__avatar-img:hover {
    border-color: var(--accent);
    background: var(--panel);
}

.cartao-usuario__avatar:hover::before,
.cartao-usuario__avatar-img:hover::before {
    opacity: 0.4;
}

.cartao-usuario__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: 1.8rem;
}

.cartao-usuario__nome-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    max-width: 100%;
}

.cartao-usuario__nome {
    font-size: 13px;
    font-weight: var(--fw-medium);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cartao-usuario__selo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.cartao-usuario__selo img {
    max-width: 18px;
    max-height: 18px;
    display: block;
    object-fit: contain;
}

.cartao-usuario__selo--emoji {
    font-size: 1rem;
    line-height: 1;
}

.cartao-usuario__tempo {
    margin-top: 0.15rem;
    font-size: 12px;
    color: var(--text-3);
}

/* Diretório: página de listagem paginada (Atualizados e, no mesmo padrão,
   os próximos: Assinantes/Verificados/etc). Reaproveita o mesmo box
   (background var(--panel) + borda + radius) e o mesmo "chip" de título
   roxinho das seções da home, só que em largura cheia em vez de dividir
   70/30 -- e o .loop__grid/.cartao-usuario de sempre pro grid de fotos. */
.diretorio {
    width: 100%;
    padding: 1.5rem;
}

.diretorio__inner {
    max-width: var(--container);
    margin: 0 auto;
}

.diretorio__painel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Comunicado de página inteira (perfil não existe/suspenso/bloqueado/em
   manutenção/post excluído/flog sem posts ainda) -- ver
   perfil_comunicado_html() em perfil.php. Mesmo .diretorio/.diretorio__painel
   de /atualizados, só mais estreito e centralizado (não é uma listagem). */
.perfil-comunicado__inner { max-width: 480px; margin: 3.5rem auto; }
.perfil-comunicado { text-align: center; }
.perfil-comunicado__eyebrow {
    display: inline-block; margin-bottom: 0.9rem; padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent); background: var(--accent-10);
}
.perfil-comunicado__titulo { margin: 0 0 0.5rem; font-size: 1.35rem; font-weight: var(--fw-semibold); color: var(--text); }
.perfil-comunicado__texto { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
.perfil-comunicado__link { margin-top: 1.4rem; }

/* Entrevista de "Destaques da Semana" (destaques/entrevista.php) -- mesmo
   .diretorio/.diretorio__painel de sempre, só mais estreito que a largura
   cheia (formulário, não listagem) e mais largo que .perfil-comunicado__inner
   (que é só uma mensagem centralizada -- aqui tem formulário de verdade,
   perguntas configuráveis por categoria, ver Destaques\Perguntas). */
.destaques-entrevista__inner { max-width: 640px; margin: 2.5rem auto; }
.destaques-entrevista__cabecalho { text-align: center; margin-bottom: 1.5rem; }
.destaques-entrevista__eyebrow {
    display: inline-block; margin-bottom: 0.9rem; padding: 0.3rem 0.85rem;
    border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: var(--fw-bold);
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--accent); background: var(--accent-10);
}
.destaques-entrevista__titulo { margin: 0 0 0.5rem; font-size: 1.35rem; font-weight: var(--fw-semibold); color: var(--text); }
.destaques-entrevista__texto { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
.destaques-entrevista__respostas { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; text-align: left; }
.destaques-entrevista__resposta-pergunta { margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: var(--fw-semibold); color: var(--text); }
.destaques-entrevista__resposta-texto { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--text-2); white-space: pre-wrap; }

/* Corpo com sidebar (70/30), só pra quem precisa -- Trendings usa (oficiais
   + publicidade, DOIS blocos separados empilhados, igual a home -- lá
   também são duas <aside> distintas, uma por seção, nunca uma dentro da
   outra). Atualizados/Assinantes/Verificados não têm sidebar, então
   continuam só com .diretorio__painel sozinho, sem precisar do
   .diretorio__corpo. */
.diretorio__corpo {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.diretorio__corpo .diretorio__painel {
    flex: 7 1 0;
    min-width: 0;
}

/* Coluna da sidebar -- só o container que empilha os 2 blocos (oficiais +
   publicidade) com espaço entre eles; quem tem fundo/borda/padding é cada
   bloco, não a coluna. */
.diretorio__sidebar-col {
    flex: 3 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Só a coluna do /explorar usa sticky (o feed costuma ser bem mais alto que
   a sidebar) -- modificador em vez de mexer em .diretorio__sidebar-col
   direto, que também é usado por /trendings, /assinantes etc sem esse
   comportamento. top compensa a barra fixa (55px, ver .barra em barra.css) +
   um respiro; max-height+overflow evita a coluna ficar "presa" acima da
   dobra numa tela baixa. */
.diretorio__sidebar-col--sticky {
    position: sticky;
    top: calc(55px + 1.25rem);
    max-height: calc(100vh - 55px - 2.5rem);
    overflow-y: auto;
}

/* Bloco de Oficiais -- mesmo card que a sidebar da home usa
   (.secao-atualizados__sidebar), só que sem precisar de flex:3 (quem
   distribui a largura 70/30 agora é .diretorio__sidebar-col). */
.diretorio__sidebar {
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Bloco de publicidade (.secao-assinantes__anuncio, ver SecaoAssinantes::
   blocoPublicidade()) já tem fundo/borda/altura mínima próprios -- só
   precisa parar de tentar esticar verticalmente (flex:3 fazia sentido
   dentro de .secao-assinantes__corpo, que é uma LINHA; aqui dentro da
   coluna empilhada isso sobraria espaço à toa). */
.diretorio__sidebar-col .secao-assinantes__anuncio {
    flex: 0 0 auto;
    width: 100%;
}

/* /explorar: masonry de VERDADE (posicionamento absoluto calculado em JS,
   ver assets/js/explorar.js) -- não usa CSS column-count porque multi-column
   REBALANCEIA a distribuição inteira toda vez que o conteúdo muda (ex: cada
   leva do infinite scroll), fazendo cards que já estavam na tela mudarem de
   coluna/posição -- essa era a causa do "tudo ficando torto" ao carregar
   mais. Aqui cada item só é ENCAIXADO na coluna mais curta no momento em que
   entra, sem nunca mexer no que já foi posicionado (mesmo princípio do
   Isotope.js, sem depender de biblioteca com licença comercial). O
   container vira position:relative com altura somada via JS, e cada card
   vira position:absolute com left/top/width em px. */
.explorar-grid {
    position: relative;
}

.explorar-grid .explorar-card,
.explorar-grid .explorar-anuncio {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Só ganha essa classe depois que o JS já calculou a posição final E as
   imagens de dentro já carregaram de verdade -- daí aparece com um fade
   suave em vez de "estourar" de tamanho no meio da rolagem. */
.explorar-grid .explorar-card.explorar-grid__item--pronto,
.explorar-grid .explorar-anuncio.explorar-grid__item--pronto {
    opacity: 1;
    transform: translateY(0);
}

/* Placeholder cinza pulsante -- ocupa o lugar de um card que ainda não
   chegou (carga inicial ou próxima leva do infinite scroll), posicionado
   pelo mesmo motor de masonry (ver mostrarEsqueleto() no JS), então nunca
   sobrepõe nada nem deixa "buraco" quando é trocado pelo card de verdade. */
.explorar-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--radius-lg);
    background: linear-gradient(100deg, var(--panel-2) 30%, var(--border) 50%, var(--panel-2) 70%);
    background-size: 200% 100%;
    animation: explorar-skeleton-pulso 1.4s ease-in-out infinite;
}

@keyframes explorar-skeleton-pulso {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Sem overflow:hidden -- a foto nunca encosta nos cantos arredondados
   (cabeçalho em cima, legenda/rodapé embaixo, sempre "sanduichando" ela),
   então não precisa cortar nada; com overflow:hidden, o tooltip do selo de
   assinatura (ver [data-dica] em barra.css, que estoura PRA CIMA do badge)
   ficava cortado pelo próprio card quando o badge tá perto do topo. */
.explorar-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

/* flex-wrap -- num card estreito (2 colunas no mobile, pedido explícito),
   avatar + nome já ocupam quase toda a largura; sem quebrar linha, o tempo
   (flex:0 0 auto, não encolhe -- é uma data tipo "27/05/2026 22:16") sobrava
   nome-linha pra largura ZERO em vez de só truncar (min-width:0 sozinho não
   ajuda quando o vizinho fixo já estoura o espaço disponível). Quebrando, o
   tempo cai pra própria linha embaixo do nome em vez de engolir o espaço. */
.explorar-card__cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.8rem;
}

.explorar-card__avatar-link {
    flex: 0 0 auto;
    line-height: 0;
}

.explorar-card__avatar,
.explorar-card__avatar-img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.explorar-card__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-16);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: 0.8rem;
}

.explorar-card__nome-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}

.explorar-card__autor {
    color: var(--text);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: var(--fw-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.explorar-card__autor:hover {
    text-decoration: underline;
}

.explorar-card__tempo {
    color: var(--text-3);
    font-size: 12px;
    flex: 0 0 auto;
}

/* Selo do preenchimento da aba Seguindo (ver Postagens\Explorador::
   paginaSeguindoComPreenchimento()) -- deixa claro que esse post não é de
   quem o viewer segue, só um "espaço preenchido" pra grade nunca ficar
   vazia. */
.explorar-card__sugestao {
    flex: 0 0 auto;
    color: var(--accent);
    background: var(--accent-16);
    font-size: 0.68rem;
    font-weight: var(--fw-semibold);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.explorar-card__foto-link {
    display: block;
    line-height: 0;
}

.explorar-card__foto {
    width: 100%;
    height: auto;
    display: block;
}

.explorar-card__legenda {
    margin: 0;
    padding: 0.6rem 0.8rem 0;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.45;
}

.explorar-card__rodape {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.7rem 0.8rem 0.85rem;
}

.explorar-card__acao {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-3);
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--fw-semibold);
}

.explorar-card__acao i {
    font-size: 1.2rem;
}

.explorar-card__acao:hover {
    color: var(--accent);
}

/* Cabeçalho de /explorar -- só o título agora; abas + toggle de formato
   moraram pra .explorar__barra (ver abaixo), colada em cima da grade em vez
   de embaixo do título -- pedido explícito. */
.explorar__cabecalho {
    margin-bottom: 1.25rem;
}

/* Sem o painel com fundo/borda em volta do grid -- os cards (.explorar-card)
   já são blocos com fundo/borda próprios, então um wrapper "de novo" só
   duplicava a caixa à toa. Só carrega a divisão 70/30 com a sidebar (ver
   .diretorio__corpo), sem nenhum estilo visual de painel. */
.explorar__conteudo {
    flex: 7 1 0;
    min-width: 0;
}

/* Barra logo acima da grade: abas Descobrir/Seguindo de um lado, toggle
   Masonry/Feed do outro. Quando deslogado (sem abas, $tabsHtml vazio), o
   toggle sozinho ainda cola na direita por causa da margin-left:auto em
   .explorar-formato, não precisa de regra condicional aqui. */
/* align-items: flex-end (não center) -- o sublinhado da aba ativa
   (.secao-atualizados__tab--ativa::after) é ancorado no FUNDO do próprio
   link, não no fundo da barra; com os itens centralizados verticalmente
   numa linha mais alta que a altura da aba (por causa do toggle de
   formato ao lado), o sublinhado ficava flutuando acima do border-bottom
   da barra em vez de colado nele. */
.explorar__barra {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.explorar__barra .secao-atualizados__tabs {
    border-bottom: none;
    margin-bottom: 0;
}

.explorar-formato {
    display: flex;
    gap: 0.35rem;
    margin-left: auto;
}

.explorar-formato__botao {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--panel);
    color: var(--text-3);
    font-size: 1rem;
    cursor: pointer;
    transition: border-color var(--t), color var(--t), background-color var(--t);
}

.explorar-formato__botao:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.explorar-formato__botao--ativo,
.explorar-formato__botao--ativo:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texto);
}

/* Formato "Feed" (1 coluna, estilo Instagram) -- desliga o posicionamento
   absoluto do masonry (ver assets/js/explorar.js, posicionar() vira no-op
   nesse formato) e empilha em fluxo normal via flex. Cards em 100% da
   largura do bloco (pedido explícito -- sem cap de "post único" tipo
   Instagram, usa a coluna toda). */
.explorar-grid--feed {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1.25rem;
    height: auto !important;
}

.explorar-grid--feed .explorar-card,
.explorar-grid--feed .explorar-anuncio,
.explorar-grid--feed .explorar-skeleton {
    position: static;
    width: 100%;
}

.explorar-grid--feed .explorar-card {
    opacity: 1;
    transform: none;
}

/* Card de anúncio intercalado no feed (ver
   CartaoPostExplorar::montarGradeComAnuncios()) -- mesmo rótulo do slot da
   sidebar (.secao-assinantes__anuncio-rotulo), mas em formato de card
   (borda tracejada de propósito, pra ficar claro que é conteúdo patrocinado
   e não um post de verdade), posicionado pelo masonry igual qualquer outro
   item em .explorar-grid. */
.explorar-anuncio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 160px;
    background: var(--panel-2);
    border: 1px dashed var(--border-forte);
    border-radius: var(--radius-lg);
    padding: 1rem;
}

/* "Quem Seguir" / "Conheça esses Pixelogs" -- lista (não grid de cards),
   1 linha por pessoa: avatar + insígnia/nome + botão Seguir na ponta (ver
   Nucleo\SecaoQuemSeguir). Sem botão nenhum quando deslogado (a própria
   classe não entra no HTML nesse caso, ver SecaoQuemSeguir::linha()). */
.quem-seguir-lista {
    display: flex;
    flex-direction: column;
}

.quem-seguir-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
}

.quem-seguir-item:first-child {
    padding-top: 0;
}

.quem-seguir-item:last-child {
    padding-bottom: 0;
}

.quem-seguir-item__perfil {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
    flex: 1 1 auto;
    text-decoration: none;
}

.quem-seguir-item__avatar {
    width: 46px;
    height: 46px;
    border-radius: var(--radius);
    object-fit: cover;
    display: block;
    flex: 0 0 auto;
    border: 1px solid var(--border);
}

.quem-seguir-item__avatar--vazio {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-16);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: 1.1rem;
}

.quem-seguir-item__info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.quem-seguir-item__nome-linha {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.quem-seguir-item__stat {
    font-size: 0.75rem;
    color: var(--text-3);
}

.quem-seguir-item__nome {
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.quem-seguir-item__botao {
    flex: 0 0 auto;
    padding: 0.4rem 0.95rem;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--accent);
    color: var(--accent-texto);
    font-size: 0.78rem;
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background-color var(--t), opacity var(--t);
}

.quem-seguir-item__botao:hover {
    background: color-mix(in srgb, var(--accent) 85%, black 15%);
}

.quem-seguir-item__botao:disabled {
    opacity: 0.6;
    cursor: default;
}

.quem-seguir-item__botao--seguindo,
.quem-seguir-item__botao--seguindo:hover {
    background: var(--panel-2);
    color: var(--text-3);
    border: 1px solid var(--border);
}

.diretorio__titulo {
    display: inline-block;
    margin: 0 0 1.25rem -1.25rem;
    padding: 0.4rem 0.85rem;
    border-left: 3px solid var(--accent);
    border-radius: 0px 6px 6px 0px;
    background: var(--accent-10);
    color: var(--text);
    font-weight: var(--fw-semibold);
    font-size: 0.9rem;
}

.diretorio__subtitulo {
    margin: -0.75rem 0 1.25rem;
    color: var(--text-3);
    font-size: 0.85rem;
}

.diretorio__paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1.75rem;
}

.diretorio__pagina-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 0.55rem;
    border-radius: var(--radius-sm);
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 0.85rem;
    font-weight: var(--fw-medium);
    text-decoration: none;
    transition: background-color var(--t), color var(--t), border-color var(--t);
}

.diretorio__pagina-link:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.diretorio__pagina-link--ativa,
.diretorio__pagina-link--ativa:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texto);
}

.diretorio__pagina-link--seta {
    color: var(--text-3);
    font-size: 1rem;
}

.diretorio__pagina-link--reticencias {
    min-width: auto;
    height: auto;
    padding: 0 0.15rem;
    background: none;
    border: none;
    color: var(--text-3);
}

.diretorio__pagina-link--desabilitada,
.diretorio__pagina-link--desabilitada:hover {
    opacity: 0.35;
    pointer-events: none;
    border-color: var(--border);
    color: var(--text-3);
}

/* Estatísticas (estatisticas.php) -- só "Visitas recentes" (sem gráfico).
   Tabela de verdade via CSS grid: .estatisticas__thead/.estatisticas__tr
   usam display:contents pra virar linhas do MESMO grid de 4 colunas (cada
   <span>/<div> filho vira 1 célula), então cabeçalho e linhas ficam
   perfeitamente alinhados sem precisar de <table>. */
.estatisticas__cabecalho {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
    flex-wrap: wrap;
}

.estatisticas__subtitulo {
    font-size: 1rem;
    margin: 0;
    color: var(--text);
}

.estatisticas__contagem {
    font-size: 0.8rem;
    color: var(--text-2);
}

.estatisticas__contagem strong {
    color: var(--text);
}

.estatisticas__tabela {
    display: grid;
    grid-template-columns: minmax(200px, 1.7fr) 90px minmax(160px, 1fr);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.estatisticas__thead,
.estatisticas__tr {
    display: contents;
}

.estatisticas__thead span {
    background: var(--panel);
    color: var(--text-3);
    font-size: 0.68rem;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
}

.estatisticas__usuario,
.estatisticas__td {
    display: flex;
    align-items: center;
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

.estatisticas__tr:last-child > * {
    border-bottom: none;
}

.estatisticas__td--hora {
    color: var(--text-3);
}

.estatisticas__usuario {
    gap: 0.75rem;
}

/* 60x60 redondo -- mesmo tamanho/formato do avatar em notificacoes.php,
   padronizado em todo lugar que mostra "quem" ao lado de uma linha de lista. */
.estatisticas__avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-semibold);
    color: var(--text-2);
    font-size: 1.5rem;
}

.estatisticas__avatar--anonimo {
    color: var(--text-3);
    font-size: 1.7rem;
}

.estatisticas__usuario-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.estatisticas__usuario-linha {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.estatisticas__usuario-nome {
    color: var(--text);
    text-decoration: none;
    font-weight: var(--fw-semibold);
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estatisticas__usuario-nome--anonimo {
    color: var(--text-3);
    font-weight: var(--fw-medium);
}

.estatisticas__usuario-data {
    font-size: 0.72rem;
    color: var(--text-3);
}

.estatisticas__hora {
    color: var(--text-3);
    font-weight: var(--fw-medium);
    font-size: 0.82rem;
}

/* Origem: link puro (sem pill) -- interno mostra o path exato de onde veio
   (/fulano, /explorar...), externo mostra a marca reconhecida ou o host cru.
   Sem link nenhum (acesso direto) cai no texto discreto. */
.estatisticas__origem-link {
    color: var(--text-2);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.estatisticas__origem-link:hover {
    color: var(--accent);
}

.estatisticas__origem-texto {
    color: var(--text-3);
    font-size: 0.82rem;
}

@media (max-width: 760px) {
    .estatisticas__tabela {
        grid-template-columns: minmax(0, 1.6fr) 74px minmax(0, 1fr);
    }
}

/* Responsivo */
@media (max-width: 900px) {
    /* Grid em 3 colunas fixas nessa largura. Tamanho da foto fixo (88px) em
       todos os loops, pra ficar igual independente do container onde o
       grid está (secao-atualizados tem mais padding ao redor que o
       home__conteudo, então uma foto "fluida" a 100% da coluna saía com
       tamanho diferente em cada um). O min(88px, 100%) é só uma trava de
       segurança pra não estourar em telas ainda mais estreitas que o
       iPhone SE. */
    .loop__grid {
        grid-template-columns: repeat(3, 1fr);
        justify-content: normal;
        gap: 1rem 0.5rem;
    }

    .cartao-usuario {
        width: 100%;
    }

    .cartao-usuario__avatar,
    .cartao-usuario__avatar-img {
        width: min(88px, 100%);
        height: auto;
        aspect-ratio: 1 / 1;
    }

    .cartao-usuario__nome {
        font-size: 12px;
    }

    /* Grid mobile é de 3 em 3 -- se o total de itens não é múltiplo de 3, a
       última linha sobra capenga (1 ou 2 cards sozinhos). Esconde só esses
       "órfãos", só aqui no mobile (no desktop o grid é fluido e não sofre
       disso). Truque combinando :nth-last-child com :nth-child: descobre em
       CSS puro se o último (ou penúltimo) item cai numa linha incompleta,
       sem precisar saber o total de itens de antemão. */
    .loop__grid > .cartao-usuario:nth-last-child(1):nth-child(3n+1),
    .loop__grid > .cartao-usuario:nth-last-child(1):nth-child(3n+2),
    .loop__grid > .cartao-usuario:nth-last-child(2):nth-child(3n+1) {
        display: none;
    }

    .diretorio {
        padding: 1rem;
    }

    .diretorio__painel {
        padding: 1rem;
    }

    /* Acompanha o padding mobile do painel acima -- senão o bleed calculado
       pro desktop (1.25rem) sobraria/faltaria nessa largura. */
    .notificacoes__lista,
    .mensagens-inbox__lista {
        margin: 0 -1rem;
    }

    .notificacoes__item,
    .mensagens-inbox__item {
        padding: 0.75rem 1rem;
    }

    .diretorio__corpo {
        flex-direction: column;
    }

    .diretorio__corpo .diretorio__painel,
    .diretorio__sidebar-col,
    .explorar__conteudo {
        width: 100%;
    }

    /* Sidebar (Quem Seguir + Publicidade) some inteira no mobile -- pedido
       explícito. Anúncio não desaparece de vez: continua intercalado dentro
       da própria grade (CartaoPostExplorar::montarGradeComAnuncios()), só
       esse bloco avulso que não cabe bem numa tela estreita. */
    .diretorio__sidebar-col--sticky {
        display: none;
    }
}

/* /conta (Configurações) -- reaproveita .diretorio/.diretorio__inner/
   .diretorio__painel/.mais-visitados__titulo/.diretorio__titulo/.botao* já
   existentes (mesmo container/painel/título/botão do resto do site) e só
   define o que é específico daqui: abas, formulário, categoria de
   privacidade, switch e os modais de zona de perigo. Antes essa página
   inteira vinha de assets/css/base.css (estilo antigo, cores fixas tipo
   Discord, sem acompanhar claro/escuro) -- daqui pra baixo é tudo var(). */

.config-aviso {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
}

.config-aviso--erro {
    background: var(--danger-10);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
}

.config-aviso--sucesso {
    background: var(--success-10);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}

.config-aviso--pendente {
    background: var(--warning-10);
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
}

/* Aviso dinâmico via JS (ver mostrarAviso() em fotos.php) -- mesma caixa
   .config-aviso de cima, só que controlada por [hidden]/--visivel porque
   aparece/some sem reload de página (ações em AJAX). Escopado por atributo
   pra não afetar os avisos estáticos renderizados no servidor (ex: /conta),
   que continuam sem essa transição. */
[data-acervo-aviso] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

[data-acervo-aviso][hidden] {
    display: none;
}

[data-acervo-aviso].config-aviso--visivel {
    opacity: 1;
    transform: translateY(0);
}

.config-aviso__fechar {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: inherit;
    opacity: 0.6;
    padding: 0 0.15rem;
}

.config-aviso__fechar:hover {
    opacity: 1;
}

.config-abas {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}

.config-aba {
    color: var(--text-2);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: var(--fw-semibold);
    padding: 0 0 0.75rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--t), border-color var(--t);
}

.config-aba:hover {
    color: var(--accent);
}

.config-aba--ativa {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Numerozinho de pendências ao lado do rótulo da aba (ex: Convites) --
   inline (segue o fluxo do texto), diferente de .selo-contagem (que é
   position:absolute, pensado pra sobrepor um ícone na Barra). */
.config-aba__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: var(--fw-semibold);
    line-height: 1;
    vertical-align: middle;
}

.config-painel + .config-painel {
    margin-top: 1.25rem;
}

.config-painel--perigo {
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border) 70%);
}

.config-texto {
    margin: 0 0 1.1rem;
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.5;
}

.config-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.config-verificacao-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
}

.config-verificacao-intro .botao {
    margin-top: 0.4rem;
}

.config-verificacao-codigo {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-align: center;
    padding: 1rem;
    margin-bottom: 1.1rem;
    border: 2px dashed var(--accent);
    border-radius: var(--radius);
    background: var(--accent-10);
    color: var(--text);
}

.config-form__linha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.config-campo {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.config-campo__rotulo {
    font-size: 0.8rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.config-campo__controle {
    min-height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--border-forte);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--ff);
    font-size: 0.88rem;
    transition: border-color var(--t);
}

.config-campo__controle:focus-visible {
    outline: none;
    border-color: var(--accent);
}

.config-campo__controle:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

textarea.config-campo__controle {
    min-height: 90px;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    resize: vertical;
    font-family: var(--ff);
}

.config-campo__nota {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-3);
}

/* Aviso "Confirme sua conta" -- lembrete âmbar (não é erro nem sucesso),
   com o botão de reenvio ao lado do texto. */
.config-aviso-confirmacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    background: var(--warning-10);
    border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent);
    color: var(--text);
    padding: 0.85rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1.1rem;
}

.config-aviso-confirmacao__texto {
    flex: 1 1 220px;
}

.config-aviso-confirmacao__texto strong {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.2rem;
}

.config-aviso-confirmacao__texto p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.4;
}

/* Zona de perigo: cada ação é uma linha "título + descrição" à esquerda e
   um botão que abre o modal correspondente à direita -- pedido explícito
   pra sair do formulário sempre visível e virar link+modal. */
.config-perigo-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.9rem 0;
}

.config-perigo-item + .config-perigo-item {
    border-top: 1px solid var(--border);
}

.config-perigo-item__texto strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text);
    margin-bottom: 0.2rem;
}

.config-perigo-item__texto p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-2);
    line-height: 1.4;
    max-width: 46ch;
}

/* Categorias dentro de Privacidade (pedido explícito -- antes era uma lista
   só, sem agrupar por assunto). */
.config-categoria + .config-categoria {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.config-categoria__titulo {
    margin: 0 0 0.75rem;
    font-size: 0.8rem;
    font-weight: var(--fw-semibold);
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Switch -- substitui os checkboxes simples de Privacidade (pedido
   explícito, "mais elegante"). Input real fica invisível (opacity:0) mas
   continua no fluxo/focável -- :checked/:focus-visible do input controlam o
   trilho ao lado via seletor de irmão (~), sem precisar de JS pra isso. */
.config-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.75rem 0;
    cursor: pointer;
}

.config-switch + .config-switch {
    border-top: 1px solid var(--border);
}

.config-switch__texto {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.config-switch__titulo {
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.config-switch__dica {
    font-size: 0.78rem;
    color: var(--text-3);
    line-height: 1.4;
}

.config-switch__trilho-wrap {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 24px;
}

.config-switch__input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.config-switch__trilho {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--border-forte);
    transition: background var(--t);
}

.config-switch__trilho::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--sombra-sm);
    transition: transform var(--t);
}

.config-switch__input:checked ~ .config-switch__trilho {
    background: var(--accent);
}

.config-switch__input:checked ~ .config-switch__trilho::after {
    transform: translateX(16px);
}

.config-switch__input:focus-visible ~ .config-switch__trilho {
    outline: 2px solid var(--cor-foco);
    outline-offset: 2px;
}

.config-switch__input:disabled ~ .config-switch__trilho {
    opacity: 0.5;
    cursor: not-allowed;
}

.config-switch:has(.config-switch__input:disabled) {
    cursor: not-allowed;
}

/* Modais de zona de perigo (Desativar/Excluir) -- mesma linguagem visual
   dos outros modais do site (overlay + janela centralizada), só que num
   componente próprio e simples (sem os steps do modal de autenticação). */
/* Entrada/saída suave -- padrão pra todo .config-modal do site (zona de
   perigo em /conta, picker/editar/novo álbum em /fotos etc). [hidden] não dá
   pra transicionar direto (display:none não tem estado intermediário), por
   isso o JS de cada página faz um "abrir" em 2 passos: tira o [hidden] e,
   só no frame seguinte, adiciona .config-modal--visivel (é essa classe que
   dispara a transição de opacidade/escala abaixo). Fechar é o inverso:
   remove a classe primeiro, espera a transição acabar, só aí bota [hidden]
   de volta -- ver a função abrirModal()/fecharModal() compartilhada. */
.config-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.config-modal[hidden] {
    display: none;
}

.config-modal--visivel {
    opacity: 1;
}

.config-modal__fundo {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 31, 0.55);
}

.config-modal__janela {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    background: var(--panel-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-lg);
    transform: translateY(14px) scale(0.97);
    transition: transform 0.2s ease;
}

/* Variante mais larga -- usada em conteudos.php, cujo form tem um textarea
   grande (editor de texto) que fica apertado nos 460px padrão. */
.config-modal__janela--largo {
    max-width: 720px;
}

.config-modal--visivel .config-modal__janela {
    transform: translateY(0) scale(1);
}

.config-modal__cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.config-modal__titulo {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
}

.config-modal__fechar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t), color var(--t);
}

.config-modal__fechar:hover {
    background: var(--accent-06);
    color: var(--text);
}

.config-modal__corpo {
    padding: 1.25rem;
}

/* Modal de confirmação (window.confirm() customizado, ver
   assets/js/confirmacao.js -- window.pixelogConfirmar()) usado em ações tipo
   "excluir álbum"/"bloquear usuário". Mesmo padrão de entrada/saída suave do
   .config-modal acima (classe --visivel controlando opacity/transform,
   duplo requestAnimationFrame no JS pra abrir e timeout pra fechar). Fica
   acima de .config-modal (z-index maior) porque às vezes é um SEGUNDO
   passo de confirmação em cima de um modal já aberto. */
.modal-confirmacao {
    position: fixed;
    inset: 0;
    /* Precisa ficar acima do .postar-modal (z-index 1000) -- pixelogAlertar/
       pixelogPrompt (ver confirmacao.js) são usados de dentro do editor do
       modal de postar (link, cor), então esse modal de aviso precisa
       aparecer por cima dele, não atrás. */
    z-index: 1100;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-confirmacao[hidden] {
    display: none;
}

.modal-confirmacao:not([hidden]) {
    display: flex;
}

.modal-confirmacao--visivel {
    opacity: 1;
}

.modal-confirmacao__fundo {
    position: absolute;
    inset: 0;
    background: rgba(20, 16, 31, 0.55);
}

.modal-confirmacao__caixa {
    position: relative;
    z-index: 1;
    width: min(360px, calc(100vw - 2rem));
    background: var(--panel-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-lg);
    padding: 1.25rem;
    transform: translateY(14px) scale(0.97);
    transition: transform 0.2s ease;
}

.modal-confirmacao--visivel .modal-confirmacao__caixa {
    transform: translateY(0) scale(1);
}

.modal-confirmacao__texto {
    margin: 0 0 1.1rem;
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.45;
}

.modal-confirmacao__acoes {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
}

.modal-confirmacao__botao {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.9rem;
    font-size: 0.82rem;
    font-weight: var(--fw-medium);
    cursor: pointer;
    font-family: var(--ff);
    border: 1px solid var(--border-forte);
    transition: background var(--t), color var(--t), border-color var(--t);
}

.modal-confirmacao__botao--cancelar {
    background: transparent;
    color: var(--text-2);
}

.modal-confirmacao__botao--cancelar:hover {
    background: var(--panel);
}

.modal-confirmacao__botao--confirmar {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

.modal-confirmacao__botao--confirmar:hover {
    background: color-mix(in srgb, var(--danger) 85%, black 15%);
}

/* Variante neutra (não-destrutiva) -- pixelogAlertar()/pixelogPrompt() em
   confirmacao.js, usada pra avisos/perguntas comuns do editor (link, cor),
   diferente do vermelho de --confirmar que é só pra ação perigosa mesmo
   (bloquear, silenciar etc). */
.modal-confirmacao__botao--primario {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.modal-confirmacao__botao--primario:hover {
    background: color-mix(in srgb, var(--accent) 85%, black 15%);
}

.modal-confirmacao__campo {
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 1.1rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;
    font-family: var(--ff);
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--border-forte);
    border-radius: var(--radius-sm);
}

.modal-confirmacao__campo:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

@media (max-width: 640px) {
    .config-form__linha {
        grid-template-columns: 1fr;
    }

    .config-perigo-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .config-perigo-item .botao {
        width: 100%;
    }
}

/* /fotos (Minhas fotos) -- gestão de acervo: seleção em lote, arquivamento,
   lixeira e álbuns. Reaproveita .diretorio/.diretorio__painel/.config-abas/
   .config-modal/.config-campo/.botao* já existentes (mesmo container/abas/
   modal/campo/botão do resto do site) -- daqui pra baixo é só o que é
   específico da grade de fotos. Antes essa página inteira vinha de
   assets/css/base.css (estilo antigo, cores fixas), incluindo um checkbox
   de seleção nativo sem nenhum fundo -- sumia por cima de fotos claras. */
.acervo__todas {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.83rem;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
    margin-bottom: 1rem;
}

.acervo__todas input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.acervo__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.85rem;
}

/* Álbuns usam tile um pouco maior que fotos (150px), mesma proporção do
   .perfil__albuns-grid público em base.css -- é o mesmo componente de grade,
   só o tamanho do card muda pra bater com o que aparece no flog. */
.acervo__grid--albuns {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

/* Cartão quadrado, 6px de radius -- mesmo padrão de avatar/miniatura usado
   em todo o resto do site (comentários, ranking, cartão de usuário etc),
   em vez do --radius genérico (10px) de painel/botão. Borda começa
   transparente (só aparece no hover/seleção) pra bater com o visual "limpo"
   das fotos no flog público, que não tem nenhuma borda por padrão. */
.acervo__card {
    position: relative;
    display: block;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    background: var(--panel-2);
    transition: border-color var(--t);
}

.acervo__card:hover {
    border-color: var(--border-forte);
}

.acervo__card--selecionado {
    border-color: var(--accent);
}

/* Checkbox de seleção -- pedido explícito pra resolver o contraste ruim em
   cima de fotos claras: em vez do checkbox nativo "pelado" (sem fundo
   nenhum, sumia de vista em fotos brancas/claras), agora é um círculo com
   fundo escuro translúcido + anel branco, sempre visível não importa a cor
   da foto por trás. Mesmo padrão sibling (~) do .config-switch -- o input
   real fica invisível (opacity:0) mas continua focável/funcional, o visual
   mora no <span> irmão controlado por :checked/:focus-visible. */
.acervo__checkbox-caixa {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 2;
    width: 22px;
    height: 22px;
}

.acervo__checkbox {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.acervo__checkbox-visual {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: rgba(10, 10, 16, 0.5);
    transition: background var(--t), border-color var(--t), transform var(--t);
    pointer-events: none;
}

.acervo__card:hover .acervo__checkbox-visual {
    transform: scale(1.08);
}

.acervo__checkbox:checked ~ .acervo__checkbox-visual {
    background: var(--accent);
    border-color: var(--accent);
}

.acervo__checkbox:checked ~ .acervo__checkbox-visual::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.acervo__checkbox:focus-visible ~ .acervo__checkbox-visual {
    outline: 2px solid var(--cor-foco);
    outline-offset: 2px;
}

/* Botão de editar -- canto oposto ao checkbox, mesmo tratamento visual
   (círculo translúcido + anel branco, sempre legível em qualquer foto).
   Gerenciar fotos antigas é basicamente pra isso: corrigir título/legenda
   de uma foto já publicada, sem precisar excluir e postar de novo. */
.acervo__editar {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 2;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.92);
    background: rgba(10, 10, 16, 0.5);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
    transition: background var(--t), transform var(--t);
}

.acervo__editar:hover,
.acervo__editar:focus-visible {
    background: var(--accent);
    transform: scale(1.08);
}

.acervo__editar:focus-visible {
    outline: 2px solid var(--cor-foco);
    outline-offset: 2px;
}

.acervo__editar i {
    pointer-events: none;
}

.acervo__miniatura {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.acervo__miniatura--vazia {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--panel-2);
}

/* Overlay em cima da própria foto (gradiente escuro embaixo), não mais uma
   barra separada abaixo da miniatura -- mesmo padrão do flog público, que
   também resolve legendas/ações por cima da imagem (ver overlay de
   baixar/fixar/data em perfil.php) em vez de uma faixa extra no card. */
.acervo__info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    padding: 1.1rem 0.55rem 0.4rem;
    font-size: 0.7rem;
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
    pointer-events: none;
}

/* Regra de display não pode ficar incondicional -- senão sobrepõe o
   atributo [hidden] (mesmo cuidado do .config-modal). */
/* Fixo na tela (não só sticky dentro do painel) -- pra ser de verdade uma
   barra flutuante sobrepondo o conteúdo, o que é o que justifica o
   box-shadow abaixo (sem flutuar, a sombra não faz sentido nenhum). */
.acervo__barra-lote {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    z-index: 50;
    width: max-content;
    max-width: calc(100% - 2rem);
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0.9rem;
    box-shadow: var(--sombra-lg);
}

.acervo__barra-lote[hidden] {
    display: none;
}

.acervo__barra-lote:not([hidden]) {
    display: flex;
}

.acervo__contagem {
    font-size: 0.8rem;
    color: var(--text-2);
    margin-right: auto;
}

.acervo__botao-novo-album {
    margin-bottom: 0.85rem;
}

.acervo__album-form {
    flex-direction: column;
    gap: 0.65rem;
    max-width: 320px;
    margin-bottom: 1.1rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.9rem;
}

.acervo__album-form[hidden] {
    display: none;
}

.acervo__album-form:not([hidden]) {
    display: flex;
}

.acervo__form-acoes {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Wizard "Novo álbum" (modal 2 etapas) -- grade de seleção reaproveita
   .acervo__grid/.acervo__card/.acervo__checkbox* tal e qual (mesmo
   componente da grade principal), só o essencial daqui: espaçamento do
   "Carregar mais" e o link de voltar pra etapa anterior. */
.config-modal [data-novo-album-etapa] .acervo__grid {
    grid-template-columns: repeat(auto-fill, 90px);
    margin-bottom: 0.85rem;
    max-height: 320px;
    overflow-y: auto;
}

.acervo__form-mais {
    display: block;
    width: 100%;
    margin-bottom: 0.85rem;
}

.acervo__form-voltar {
    display: inline-block;
    margin-top: 0.85rem;
    font-size: 0.8rem;
    color: var(--text-3);
    background: none;
    border: none;
    cursor: pointer;
}

.acervo__form-voltar:hover {
    color: var(--accent);
}

.acervo__card--album {
    cursor: default;
}

.acervo__album-link {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}

.acervo__album-acoes {
    display: flex;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    background: var(--panel-2);
    border-top: 1px solid var(--border);
}

.acervo__album-botao {
    flex: 1;
    border: 1px solid var(--border-forte);
    border-radius: var(--radius-sm);
    padding: 0.3rem 0.4rem;
    font-size: 0.7rem;
    font-weight: var(--fw-medium);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    font-family: var(--ff);
    transition: background var(--t), color var(--t), border-color var(--t);
}

.acervo__album-botao:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.acervo__album-botao--perigo {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--border-forte) 55%);
    color: var(--danger);
}

.acervo__album-botao--perigo:hover {
    border-color: var(--danger);
    color: var(--danger);
    background: var(--danger-10);
}

@media (max-width: 640px) {
    .acervo__grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
        gap: 0.6rem;
    }
}

/* Favoritos: grade de cards (seguidos/bloqueados/silenciados/não retribuem)
   -- mesmo shell .diretorio/.config-abas/.config-aviso das outras páginas de
   gestão (fotos/estatísticas), e o mesmo .loop__grid/.cartao-usuario "cru"
   (sem card com fundo/borda em volta) usado em Atualizados/Assinantes/etc.
   As ações (favoritar/deixar de seguir/desbloquear/dessilenciar) ficam numa
   fileira de ícones logo abaixo do avatar -- mesma ideia do antigo
   .acervo__album-acoes (botões dividindo o espaço em partes iguais,
   flex: 1), só que só com ícone (sem texto) e cantos arredondados (não
   quadrados). O rótulo aparece no tooltip ([data-dica], componente global
   de barra.css). */
.favoritos__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 120px);
    justify-content: space-between;
    gap: 1.5rem 1rem;
}

/* Avatar/card maiores aqui que o padrão de 110px do .cartao-usuario (usado
   em Atualizados/Assinantes/etc.) -- escopado só pra esse grid, pra não
   mexer no tamanho padrão usado no resto do site. */
.favoritos__grid .cartao-usuario {
    width: 120px;
}

.favoritos__grid .cartao-usuario__avatar,
.favoritos__grid .cartao-usuario__avatar-img {
    width: 120px;
    height: 120px;
}

.favoritos__acoes {
    display: flex;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.5rem;
}

.favoritos__icone {
    flex: 1;
    height: 34px;
    border-radius: var(--radius);
    border: 1px solid var(--border-forte);
    background: var(--panel-2);
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}

.favoritos__icone:hover,
.favoritos__icone:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-10);
}

.favoritos__icone:focus-visible {
    outline: 2px solid var(--cor-foco);
    outline-offset: 2px;
}

.favoritos__icone i {
    pointer-events: none;
}

.favoritos__icone--ativo {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-10);
}

/* Meus links (links.php) / conteúdos (conteudos.php) -- cabeçalho em duas
   linhas: título à esquerda, botão de ação à direita, na mesma linha
   (título e botão de ação de página -- ex: "Notificações" + "Limpar
   notificações", "Mensagens" + "Nova mensagem"). flex-wrap como rede de
   segurança: só empilha (botão desce pra 2ª linha) se o espaço realmente
   não render, não é o padrão. */
.gestao__cabecalho {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gestao__cabecalho .diretorio__titulo {
    margin-bottom: 0;
}

.gestao-lista {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.gestao-lista__item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.9rem 1.1rem;
    transition: opacity var(--t), border-color var(--t), background var(--t);
}

/* Só visual -- os itens não são clicáveis, é feedback de "você está
   passando o mouse aqui" mesmo (a alça de arrastar já indica a real
   interação possível). */
.gestao-lista__item:hover {
    border-color: var(--border-forte);
    background: var(--panel);
}

.gestao-lista__item.arrastando {
    opacity: 0.35;
}

.gestao-lista__alca {
    cursor: grab;
    color: var(--text-3);
    font-size: 1rem;
    flex: 0 0 auto;
    user-select: none;
    padding: 0 0.15rem;
}

.gestao-lista__alca:active {
    cursor: grabbing;
}

.gestao-lista__miniatura {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gestao-lista__miniatura img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.gestao-lista__info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.gestao-lista__titulo {
    font-size: 0.88rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gestao-lista__subtitulo {
    font-size: 0.75rem;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gestao-lista__acoes {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.gestao-lista__acoes .acervo__album-botao {
    flex: 0 0 auto;
    padding: 0.3rem 0.65rem;
}

/* Conteúdos (conteudos.php) -- editor rico (WYSIWYG), substitui o
   editor-leve baseado em markdown-lite. Barra de botões + área
   contenteditable + textarea de código-fonte (alternam via [hidden]). */
.editor-rico {
    border: 1px solid var(--border-forte);
    border-radius: var(--radius);
    background: var(--panel-2);
    overflow: hidden;
}

.editor-rico__barra {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--panel);
}

.editor-rico__botao {
    min-width: 32px;
    height: 32px;
    padding: 0 0.6rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-2);
    font-size: 0.85rem;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--t), border-color var(--t), color var(--t);
}

.editor-rico__botao:hover {
    border-color: var(--border-forte);
    background: var(--panel-2);
    color: var(--text);
}

.editor-rico__botao--ativo,
.editor-rico__botao--ativo:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-10);
}

.editor-rico__separador {
    width: 1px;
    height: 20px;
    background: var(--border-forte);
    margin: 0 0.15rem;
}

.editor-rico__area {
    min-height: 260px;
    max-height: 480px;
    overflow-y: auto;
    padding: 0.7rem 0.85rem;
    font-family: var(--ff);
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text);
}

/* [hidden] some sozinho (é a regra padrão do navegador) -- não precisa de
   regra extra pro estado escondido. */
.editor-rico__area:focus-visible {
    outline: none;
}

.editor-rico__area p {
    margin: 0 0 0.85rem;
}

.editor-rico__area p:last-child {
    margin-bottom: 0;
}

.editor-rico__area a {
    color: var(--accent);
}

/* Embed de YouTube (botão dedicado -- ver editor_rico.js/Conteudo::limparNo).
   width/height="560"/"315" vêm fixos do próprio HTML (é o que o YouTube usa
   por padrão), então aqui só faz o iframe respeitar a largura do editor em
   telas menores sem esticar/cortar o vídeo. */
.editor-rico__area iframe {
    display: block;
    max-width: 100%;
    aspect-ratio: 560 / 315;
    height: auto;
    margin: 0.5rem 0;
    border-radius: var(--radius);
}

/* [hidden]/:not([hidden]) de propósito -- mesmo cuidado do
   .config-modal/.acervo__album-form/.modal-confirmacao no resto do site.
   "display: block" direto na classe .editor-rico__fonte (sem essa guarda)
   empata em especificidade com o [hidden] do navegador e, por ordem de
   declaração, vence -- o textarea de código-fonte fica visível o tempo
   todo, escondido ou não (foi exatamente o bug relatado). */
.editor-rico__fonte[hidden] {
    display: none;
}

.editor-rico__fonte:not([hidden]) {
    display: block;
    width: 100%;
    min-height: 260px;
    max-height: 480px;
    padding: 0.7rem 0.85rem;
    border: 0;
    resize: vertical;
    background: var(--panel-2);
    color: var(--text);
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.6;
}

.editor-rico__fonte:focus-visible {
    outline: none;
}

/* Dropdown de autocomplete de menção (@usuario) -- ver o mesmo bloco em
   barra.css (cópia exigida pelo mesmo motivo de sempre: barra.css é a
   folha garantida em toda página, geral.css é a folha "completa" das
   páginas fora do flog). assets/js/editor_rico.js monta e posiciona esse
   painel via JS. */
.editor-rico__mencoes {
    position: fixed;
    z-index: 1001;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 220px;
    overflow-y: auto;
    background: var(--panel-2);
    border: 1px solid var(--border-forte);
    border-radius: var(--radius);
    padding: 0.3rem;
    box-shadow: var(--sombra-lg);
    font-family: var(--ff);
}
.editor-rico__mencoes:not([hidden]) { display: flex; }
.editor-rico__mencao-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--text-2);
    background: none;
    border: none;
    width: 100%;
    min-width: 0;
    text-align: left;
}
.editor-rico__mencao-item:hover,
.editor-rico__mencao-item--ativo { background: var(--accent-06); }
.editor-rico__mencao-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; background: var(--panel-2); flex: 0 0 auto; }
.editor-rico__mencao-nome {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: var(--fw-medium);
}
.editor-rico__mencao-selo { color: var(--accent); font-size: 0.9rem; flex: 0 0 auto; }

/* Notificações (notificacoes.php) -- porta de base.css com tokens. Mesma
   estrutura de item de lista (foto + texto + ações) usada em vários lugares
   do site, só que sem drag-and-drop. */
.notificacoes__secao {
    margin-top: 1.5rem;
}

.notificacoes__secao:first-of-type {
    margin-top: 0;
}

.notificacoes__subtitulo {
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    margin: 0 0 0.85rem;
}

/* O bleed edge-to-edge do hover precisa acontecer AQUI (cancelando o padding
   do .diretorio__painel) -- a lista ganha margin negativo igual ao padding
   do painel-pai, e cada item ganha padding horizontal equivalente, assim o
   :hover/border-bottom alcança a borda real do card em vez de sobrar faixa
   em branco nas duas pontas. */
.notificacoes__lista {
    list-style: none;
    margin: 0 -1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Sem card (nem fundo, nem borda ao redor, nem radius) -- separador é só a
   linha embaixo de cada item. */
.notificacoes__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.25rem;
    transition: background-color 0.15s ease;
}

.notificacoes__item:hover {
    background: var(--accent-06);
}

/* Miniatura do post comentado/curtido (foto-link no lado direito) -- 60x60
   sem radius, tamanho fixo pedido (diferente do avatar do autor, que é
   pequeno/arredondado -- essa aqui é "a prova visual" do que rolou). */
.notificacoes__foto {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0;
    flex: 0 0 auto;
    display: block;
}

.notificacoes__foto-link {
    flex: 0 0 auto;
    line-height: 0;
}

.notificacoes__texto {
    flex: 1 1 auto;
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.5;
}

.notificacoes__texto a,
.notificacoes__link-texto {
    color: var(--text);
    font-weight: normal;
    text-decoration: none;
}

.notificacoes__texto a:hover,
.notificacoes__link-texto:hover {
    color: var(--accent);
}

.notificacoes__tempo {
    color: var(--text-3);
    font-size: 0.75rem;
}

.notificacoes__acoes {
    display: flex;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.notificacoes__botao {
    padding: 0.4rem 0.85rem;
}

/* Item "normal" da lista (não-convite): avatar do AUTOR da ação (quem
   comentou/curtiu/seguiu) à esquerda, username+selos+mensagem+tempo
   no meio, e um bloco à direita que muda por tipo -- miniatura do post ou
   botão de Seguir (ver notificacoes.php).
   Reaproveita .notificacoes__texto/.notificacoes__tempo acima (agora como
   linhas empilhadas dentro de .notificacoes__corpo, não mais soltas no meio
   do item) -- por isso os overrides abaixo, escopados só aqui, sem afetar o
   convite (que continua com a estrutura plana de sempre). */
.notificacoes__avatar-link {
    flex: 0 0 auto;
    line-height: 0;
}

.notificacoes__avatar,
.notificacoes__avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.notificacoes__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-16);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: 1.5rem;
}

.notificacoes__corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

/* .notificacoes__linha: username(+selos) e a mensagem da ação ("curtiu sua
   foto") juntos, correndo como texto normal (não flex) -- assim eles ficam
   na MESMA linha e só quebram pro início da próxima se não couberem, igual
   qualquer parágrafo. .notificacoes__nome-linha vira um bloco inline-flex
   dentro desse fluxo (mesma receita de .perfil__comentario-usuario-linha),
   com margem à direita fazendo o respiro até o texto da ação. */
.notificacoes__linha {
    display: block;
    line-height: 1.4;
}

.notificacoes__corpo .notificacoes__texto {
    display: inline;
    font-size: 0.85rem;
}

.notificacoes__corpo .notificacoes__tempo {
    display: block;
    margin-top: 0.15rem;
}

.notificacoes__nome-linha {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    vertical-align: middle;
}

.notificacoes__autor {
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    text-decoration: none;
}

.notificacoes__autor:hover {
    color: var(--accent);
}

.notificacoes__lado {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.notificacoes__seguir {
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: var(--fw-semibold);
    white-space: nowrap;
}

/* Caixa de entrada (mensagens.php) -- mesma linguagem visual da lista de
   notificações (separador em vez de card, avatar redondo 60px, texto plano
   sem pill). Item tem 3 partes: avatar-link, corpo (clicável, abre a
   conversa) e lado (contador de não lidas + botão arquivar). */
/* Mesmo bleed edge-to-edge do .notificacoes__lista logo acima (ver comentário
   lá) -- margin negativo cancelando o padding do .diretorio__painel. */
.mensagens-inbox__lista {
    list-style: none;
    margin: 0 -1.25rem;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.mensagens-inbox__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1.25rem;
    transition: background-color 0.15s ease;
}

.mensagens-inbox__item:hover {
    background: var(--accent-06);
}

.mensagens-inbox__avatar-link {
    flex: 0 0 auto;
    line-height: 0;
}

.mensagens-inbox__avatar,
.mensagens-inbox__avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.mensagens-inbox__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-16);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: 1.5rem;
}

.mensagens-inbox__corpo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
}

.mensagens-inbox__linha {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mensagens-inbox__nome-linha {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.mensagens-inbox__autor {
    font-size: 0.88rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mensagens-inbox__quando {
    color: var(--text-3);
    font-size: 0.75rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.mensagens-inbox__previa {
    color: var(--text-2);
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mensagens-inbox__item--nao-lida .mensagens-inbox__autor,
.mensagens-inbox__item--nao-lida .mensagens-inbox__previa {
    color: var(--text);
    font-weight: var(--fw-semibold);
}

.mensagens-inbox__lado {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mensagens-inbox__contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: var(--fw-semibold);
}

.mensagens-inbox__arquivar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.mensagens-inbox__arquivar:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Excluir -- mesma forma/tamanho do botão de arquivar (par lado a lado), só
   que já sinalizado em vermelho mesmo fora do hover (ação mais forte que
   arquivar, então fica visível de cara -- mesma lógica do botão "Excluir
   álbum" em fotos.php). */
.mensagens-inbox__excluir {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border) 65%);
    border-radius: 50%;
    background: transparent;
    color: var(--danger);
    font-size: 1rem;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.mensagens-inbox__excluir:hover {
    color: #fff;
    border-color: var(--danger);
    background: var(--danger);
}

/* Campo + resultados de busca do modal "Nova mensagem". O wrap fica
   position:relative pra a lista de resultados flutuar por CIMA do conteúdo
   como um dropdown de verdade (position:absolute), em vez de entrar no
   fluxo normal e "empurrar" a janela do modal pra baixo conforme os
   resultados chegam. */
.mensagens-busca__campo-wrap {
    position: relative;
}

/* Campo de busca maior que o .config-campo__controle padrão (é o único
   controle do modal, então pode respirar mais) + espaço reservado à
   esquerda pro ícone de lupa. */
.mensagens-busca__campo {
    width: 100%;
    min-height: 50px;
    padding-left: 2.6rem;
    font-size: 0.95rem;
}

.mensagens-busca__icone {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-3);
    font-size: 1.1rem;
    pointer-events: none;
}

/* .config-modal__janela tem overflow-y:auto (pro caso normal de modal com
   conteúdo mais longo que a tela) -- mas mesmo um filho posicionado como
   overlay (position:absolute, caso do dropdown acima) ainda conta pra área
   de overflow rolável do ancestral, e isso fazia esse modal específico
   ganhar uma barra de rolagem vertical (as setinhas ▲▼ na borda) sempre que
   o dropdown de resultados aparecia -- mesmo sem precisar rolar nada de
   verdade, já que é só um overlay flutuando por cima. Esse modal em
   particular nunca tem conteúdo alto o bastante pra precisar da própria
   janela rolar, então desliga esse overflow só aqui. */
#modalNovaMensagem .config-modal__janela {
    overflow-y: visible;
}

/* Borda no botão de fechar (X) SÓ deste modal -- .config-modal__fechar é
   componente compartilhado por todos os .config-modal do site (fotos.php,
   conta.php etc.), então a borda fica escopada aqui em vez de mudar o
   padrão em todo lugar. */
#modalNovaMensagem .config-modal__fechar {
    border: 1px solid var(--border);
}

.mensagens-busca__resultados {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--sombra-lg);
}

/* O JS controla visibilidade via atributo hidden (resultados.hidden =
   true/false), mas display:flex acima é uma regra de AUTOR e por isso
   sempre vence o display:none do UA stylesheet pra [hidden], não importa a
   especificidade -- sem essa regra aqui o dropdown fica sempre visível
   (vazio, com "Nenhum usuário encontrado.") mesmo antes de digitar algo. */
.mensagens-busca__resultados[hidden] {
    display: none;
}

.mensagens-busca__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
}

.mensagens-busca__item:hover {
    background: var(--accent-06);
}

.mensagens-busca__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--accent-16);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: var(--fw-semibold);
    flex: 0 0 auto;
}

.mensagens-busca__vazio {
    color: var(--text-3);
    font-size: 0.85rem;
    padding: 0.5rem;
    margin: 0;
}

/* .diretorio (mensagens/abrir.php) esticado até o rodapé em vez de parar
   numa altura fixa -- o body já é flex column com .rodape em margin-top:auto
   (ver barra.css), então basta esse ramo virar um item flex que cresce
   (flex:1) pra sobrar zero espaço morto entre o card e o rodapé; o
   .diretorio__inner e o painel dentro dele repassam esse crescimento até o
   card de verdade (ver .diretorio__painel.mensagens-chat abaixo). Modificador
   à parte (não mexe em .diretorio puro) porque as outras páginas que
   reaproveitam essa classe (Atualizados etc.) não devem esticar. */
.diretorio--chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.diretorio--chat .diretorio__inner {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* width:100% explícito -- .diretorio__inner já centraliza via
       margin:0 auto (regra base), mas como item de um flex column ele vira
       cross-axis com margem auto, e margem auto no eixo cruzado desliga o
       stretch padrão: sem isso o card encolhia pro tamanho do conteúdo do
       cabeçalho em vez de ocupar até var(--container), ficando torto (mais
       pra esquerda, bem mais estreito que o resto do site). */
    width: 100%;
}

/* Conversa individual (mensagens/abrir.php) -- mesmo card .diretorio__painel
   do resto do site, só que com padding zerado (cabeçalho/lista/form cuidam
   do próprio respiro) e virado column pra empurrar o form de envio pro
   rodapé do card. Cresce até preencher .diretorio__inner (ver
   .diretorio--chat acima) em vez de altura fixa, com scroll interno na
   lista, como qualquer chat. overflow:hidden de propósito FORA daqui --
   cortava tooltip/dropdown que precisam extrapolar o card (ex.: [data-dica]
   do selo de assinatura no cabeçalho); os cantos de cima/baixo do card são
   arredondados diretamente no cabeçalho/form abaixo em vez de depender de
   clip (mesmo raciocínio já usado em .editor-rico__barra, barra.css). */
.diretorio__painel.mensagens-chat {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: min(420px, 75vh);
}

.mensagens-chat__cabecalho {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.mensagens-chat__voltar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--text-2);
    text-decoration: none;
    font-size: 1.1rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.mensagens-chat__voltar:hover {
    background: var(--accent-06);
    color: var(--accent);
}

.mensagens-chat__usuario {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    color: var(--text);
}

.mensagens-chat__avatar-img,
.mensagens-chat__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.mensagens-chat__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-16);
    color: var(--accent);
    font-weight: var(--fw-semibold);
    font-size: 1.1rem;
}

.mensagens-chat__nome-linha {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.mensagens-chat__nome {
    font-size: 0.95rem;
    font-weight: var(--fw-semibold);
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sem underline no hover -- convenção do site inteiro (troca de cor só). */
.mensagens-chat__usuario:hover .mensagens-chat__nome {
    color: var(--accent);
}

.mensagens-chat__acoes {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Aviso de sucesso/erro dentro do chat (ver mostrarAviso() no script de
   abrir.php) -- mesma caixa .config-aviso do resto do site, só precisa de
   margem própria porque o painel aqui tem padding zerado (cabeçalho/lista/
   form é que cuidam do respiro, ver comentário lá em cima). */
.mensagens-chat__aviso {
    margin: 0.75rem 1.25rem 0;
}

.mensagens-chat__lista {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Estado vazio ("Nenhuma mensagem ainda") -- ocupa o espaço todo da lista
   (flex:1, já que .mensagens-chat__lista é a única outra coisa lá dentro
   nesse estado) pra centralizar ícone+texto tanto na vertical quanto na
   horizontal, não só a linha do texto. */
.mensagens-chat__vazio {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
}

.mensagens-chat__vazio i {
    font-size: 2.75rem;
    color: var(--text-3);
}

.mensagens-chat__vazio .loop__vazio {
    margin: 0;
}

/* max-width em px (não %) -- com o painel agora ocupando a largura toda do
   .diretorio__inner (ver remoção do modificador --estreito), uma bolha a
   75% do container ficaria enorme em telas largas. min() mantém responsivo
   no mobile e trava um teto confortável de leitura no desktop. */
.mensagens-chat__item {
    display: flex;
    flex-direction: column;
    max-width: min(70%, 520px);
    align-self: flex-start;
    align-items: flex-start;
}

.mensagens-chat__item--minha {
    align-self: flex-end;
    align-items: flex-end;
}

/* Botão de apagar + bolha na mesma linha -- pro botão (só nas mensagens
   próprias) aparecer colado do lado esquerdo da bolha, revelado só no hover
   do item inteiro (ver .mensagens-chat__apagar abaixo). */
.mensagens-chat__bolha-linha {
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    max-width: 100%;
}

.mensagens-chat__balao {
    padding: 0.55rem 0.85rem;
    border-radius: var(--radius-lg);
    background: var(--panel-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
    overflow-wrap: break-word;
    min-width: 0;
}

.mensagens-chat__item--minha .mensagens-chat__balao {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-texto);
}

/* Mensagem apagada -- volta pro visual neutro mesmo do lado "minha" (não faz
   sentido continuar destacada em accent se o conteúdo já não existe mais) e
   fica em itálico, tipo placeholder mesmo. */
.mensagens-chat__item--apagada .mensagens-chat__balao,
.mensagens-chat__item--minha.mensagens-chat__item--apagada .mensagens-chat__balao {
    background: transparent;
    border-style: dashed;
    color: var(--text-3);
    font-style: italic;
}

.mensagens-chat__apagar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-3);
    font-size: 0.85rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.mensagens-chat__item:hover .mensagens-chat__apagar {
    opacity: 1;
}

.mensagens-chat__apagar:hover {
    color: var(--danger);
    background: var(--danger-10);
}

.mensagens-chat__tempo {
    margin-top: 0.2rem;
    padding: 0 0.2rem;
    font-size: 0.7rem;
    color: var(--text-3);
}

.mensagens-chat__form {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Wrap em volta do textarea -- position:relative pra ancorar o gatilho de
   emoticon (.emoticon-seletor) no canto inferior direito do campo (ver
   .mensagens-chat__campo-wrap .emoticon-seletor abaixo). Assumiu o flex:1
   que antes era do próprio textarea, já que agora é ele quem ocupa o espaço
   dentro de .mensagens-chat__form. */
.mensagens-chat__campo-wrap {
    position: relative;
    flex: 1 1 auto;
}

/* Auto-cresce junto com o texto (ver autoCrescer() no script de abrir.php,
   que ajusta style.height pro scrollHeight a cada input) até --max-height,
   daí vira scroll interno -- por isso min-height/max-height aqui em vez de
   'rows' fixo, e box-sizing: border-box pra padding não bagunçar a conta do
   JS. Padding direito maior (2.4rem) pra o texto digitado não passar por
   baixo do botão de emoticon. */
.mensagens-chat__campo {
    width: 100%;
    resize: none;
    box-sizing: border-box;
    min-height: 42px;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel-2);
    color: var(--text);
    font-family: var(--ff);
    font-size: 0.88rem;
    line-height: 1.4;
    padding: 0.6rem 2.4rem 0.6rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mensagens-chat__campo:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-16);
}

.mensagens-chat__campo-wrap .emoticon-seletor {
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
}

/* barra.css define a MESMA .emoticon-seletor__painel (abrindo pra baixo,
   alinhada à esquerda, pro uso dela no postar-modal) e carrega DEPOIS de
   geral.css (ver ordem em Layout::abrir()) -- então vencia por ordem de
   cascata mesmo com a regra .mensagens-chat__campo-wrap .emoticon-seletor
   acima ancorando o gatilho certo. Precisa da especificidade extra (2
   classes) pra abrir pra cima e alinhada à direita aqui dentro, senão o
   painel nasce fora do card, por cima do rodapé. */
.mensagens-chat__campo-wrap .emoticon-seletor__painel {
    left: auto;
    right: 0;
    top: auto;
    bottom: calc(100% + 0.5rem);
}

.mensagens-chat__enviar {
    flex: 0 0 auto;
    height: 42px;
    padding: 0 0.85rem;
    border-radius: var(--radius-pill);
    border: none;
    background: var(--accent);
    color: var(--accent-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: var(--fw-semibold);
    font-family: var(--ff);
    cursor: pointer;
    white-space: nowrap;
    transition: filter 0.15s ease;
}

.mensagens-chat__enviar i {
    font-size: 1rem;
}

/* Só o ícone no mobile -- pouca largura sobrando fazia o texto do botão
   espremer o campo e quebrar o placeholder em 2 linhas (ver breakpoint
   640px acima). */
@media (max-width: 640px) {
    .mensagens-chat__enviar span {
        display: none;
    }

    .mensagens-chat__enviar {
        width: 42px;
        padding: 0;
    }
}

.mensagens-chat__enviar:hover {
    filter: brightness(1.08);
}

.mensagens-chat__enviar:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Emoticon inline dentro do texto já renderizado de uma mensagem (ver
   nucleo/Emoticons.php::substituir()) -- 18x16 é o tamanho real dos arquivos
   em assets/img/emoticons (não são quadrados), então usa a proporção certa
   em vez de espremer num quadrado. display:inline-block SEMPRE explícito
   aqui -- reset.css zera todo <img> pra display:block (pensado pra foto de
   post, não pra emoji no meio de texto), e sem isso o emoticon "pula" pra
   própria linha em vez de ficar lado a lado com o texto. */
.emoticon {
    display: inline-block;
    width: 18px;
    height: 16px;
    object-fit: contain;
    vertical-align: -3px;
}

/* Seletor de emoticons (nucleo/Emoticons.php::seletorHtml() +
   assets/js/emoticons.js) -- componente genérico, pensado pra ser colado em
   qualquer campo de texto (mensagens hoje, comentários amanhã). O gatilho é
   um botão "smile" discreto; o painel fica escondido por padrão e só
   aparece com a classe --aberto (alternada via JS no clique do gatilho ou
   fora dele). */
.emoticon-seletor {
    position: relative;
    display: inline-flex;
}

.emoticon-seletor__gatilho {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-3);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.emoticon-seletor__gatilho:hover {
    color: var(--accent);
    background: var(--accent-06);
}

.emoticon-seletor__painel {
    position: absolute;
    right: 0;
    bottom: calc(100% + 0.5rem);
    z-index: 6;
    display: none;
    width: 224px;
    padding: 0.6rem;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--sombra-lg);
}

.emoticon-seletor--aberto .emoticon-seletor__painel {
    display: block;
}

.emoticon-seletor__grade {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.3rem;
}

.emoticon-seletor__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    cursor: pointer;
    transition: background 0.15s ease;
}

.emoticon-seletor__item:hover {
    background: var(--accent-06);
}

.emoticon-seletor__item img {
    width: 18px;
    height: 16px;
    object-fit: contain;
}

@media (max-width: 640px) {
    .mensagens-chat__item {
        max-width: 88%;
    }
}