/* Ajustes de layout do site, por cima do tema Dashmix/OneUI.
   Criado em 08/09/2026.

   ---------------------------------------------------------------------------
   O ESPAÇO QUE FALTAVA EMBAIXO DE TODO BOTÃO
   ---------------------------------------------------------------------------
   O Marcelo notou em 08/09/2026, na tela de denúncia, e a palavra dele foi a
   certa: "isso acontece em todo o site". Acontece mesmo, e a causa é uma só.

   O tema declara:

       .block-content { padding: 20px 20px 1px; }

   Repare no 1px embaixo. O tema NÃO reserva espaço inferior: ele conta com o
   `margin-bottom` do último filho para criar essa folga. Funciona enquanto o
   último elemento é um `<p>`, uma `div.mb-3` ou um campo de formulário — todos
   trazem margem própria.

   Quebra quando o último elemento não tem margem nenhuma: um `<button>`, um
   `<form>`, um `<a class="btn">`. Aí ele encosta na borda do quadro, e a caixa
   parece cortada. Como o padrão "botão no fim do bloco" se repete em dezenas de
   telas, o defeito se repete junto.

   O conserto é aqui, e não página por página: sair acrescentando `mb-3` no
   último elemento de cada tela seria consertar o sintoma dezenas de vezes e
   esquecer na próxima tela nova.

   As duas linhas trabalham em par:
     1. devolve o espaço inferior, igual ao superior (20px em cima, 20px embaixo);
     2. zera a margem do último filho, senão quem JÁ tinha margem passaria a ter
        margem + padding e ficaria com o dobro do espaço dos outros.

   `.block-content-full` fica de fora de propósito: é a variação usada quando o
   conteúdo deve encostar nas bordas — tabelas que sangram até a borda do
   quadro. Mexer nela quebraria essas telas. */

.block-content:not(.block-content-full) {
    padding-bottom: 1.25rem;
}

.block-content:not(.block-content-full) > :last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------------------------
   FAIXA DE AJUDA DA TELA (08/09/2026)
   Ver Pages/Shared/_AjudaDaTela.cshtml para o comportamento e o porquê.

   Fechada, ela ocupa UMA LINHA - inclusive no celular, que era a condição do
   pedido. Por isso o corpo some com display:none em vez de encolher com
   altura: altura animada deixa sobra e a faixa "fechada" acaba com o dobro do
   tamanho no celular.
   --------------------------------------------------------------------------- */

.ajuda-tela__botao {
    display: flex;
    align-items: center;
    width: 100%;
    padding: .75rem 1rem;
    border: 0;
    background: none;
    font-weight: 600;
    text-align: left;
    color: inherit;
}

.ajuda-tela__botao:hover {
    text-decoration: underline;
}

.ajuda-tela__seta {
    transition: transform .15s ease;
}

.ajuda-tela__corpo {
    padding: 0 1rem 1rem;
}

/* O padding de cima do corpo é zero porque o botão já afasta o texto - somar
   os dois abriria um buraco entre o título e a primeira linha. */
.ajuda-tela__corpo p:first-child {
    margin-top: 0;
}

.ajuda-tela--fechada .ajuda-tela__corpo {
    display: none;
}

.ajuda-tela--fechada .ajuda-tela__seta {
    transform: rotate(-90deg);
}


/* ---------------------------------------------------------------------------
   O TOPO DA CONVERSA, EM DUAS FAIXAS NO CELULAR (08/09/2026)
   Ver Pages/mensagens.cshtml.

   O problema, relatado pelo Marcelo: "no celular ficou ruim, tudo na mesma
   linha... está muito apertado". Estava mesmo — eram SEIS coisas num flex só:
   foto, nome, situação (online/offline) e quatro botões (Ver perfil, Bloquear,
   Denunciar, Arquivar). Num monitor cabe; numa tela de 360px não cabe de jeito
   nenhum, e o que cede primeiro é o nome da pessoa.

   A solução não é diminuir tudo até caber: é dividir em duas perguntas, que
   são as duas coisas que o topo responde.

       QUEM   — com quem eu estou falando (foto, nome, online)
       O QUE  — o que eu posso fazer (os botões)

   No desktop as duas ficam lado a lado, exatamente como estavam. Abaixo de
   576px viram duas linhas, nesta ordem: primeiro QUEM, depois O QUE. A ordem
   importa — saber com quem se está falando vem antes de decidir o que fazer, e
   é a linha que o olho procura ao abrir a conversa.

   Os botões também encolhem no celular (fonte e padding menores), o que só é
   possível PORQUE ganharam a linha inteira: os quatro somados passam a caber
   com folga em vez de disputar espaço com o nome. */

.msg-topo {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.msg-topo-quem {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-grow: 1;
    /* Sem isto o nome longo empurra os botões para fora da tela em vez de ser
       cortado com reticências: um flex item não encolhe abaixo do próprio
       conteúdo enquanto o min-width for auto. */
    min-width: 0;
}

.msg-topo-acoes {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex-shrink: 0;
}

/* O `text-truncate` do Bootstrap só corta se o pai puder encolher. */
.min-width-0 {
    min-width: 0;
}

@media (max-width: 575.98px) {

    .msg-topo {
        flex-direction: column;
        align-items: stretch;
        gap: .5rem;
    }

    /* Espalhados na largura toda, em vez de amontoados à esquerda. */
    .msg-topo-acoes {
        justify-content: space-between;
        gap: .25rem;
    }

    .msg-topo-acoes .btn {
        padding: .25rem .45rem;
        font-size: .75rem;
    }
}

/* =====================================================================
   FACHADA DE VIDEO NO CARTAO  (12/09/2026)

   Cartao de artigo de cinema: a capa e o proprio trailer, e nao uma foto.
   Mas o que fica aqui e so uma <img> com um play DESENHADO em cima - nao
   um <iframe>.

   POR QUE ISSO IMPORTA: o <iframe> do YouTube carrega junto com a pagina.
   O botao vermelho que se ve nele ja e o player pronto. Doze cartoes com
   iframe seriam doze players baixados no celular de quem esta lendo, para
   a pessoa clicar em um - ou em nenhum. A fachada custa uns kilobytes, e
   o player de verdade so aparece dentro da materia, embaixo do texto.

   Ver Utils/CapaArtigoUtil.cs.
   ===================================================================== */
.capa-video { position: relative; display: block; }

.capa-video .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 38px;
    border-radius: 9px;
    background: rgba(20, 20, 20, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    pointer-events: none;      /* quem recebe o clique e o cartao inteiro */
    transition: background .15s ease;
}

/* O cartao inteiro e um <a>; o hover dele acende o play. */
a:hover .capa-video .play,
a:focus-visible .capa-video .play { background: rgba(196, 32, 32, .92); }

/* Carrossel da entrada usa cartao menor - o play acompanha. */
.capa-video.capa-menor .play { width: 44px; height: 31px; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
    .capa-video .play { transition: none; }
}