/* ═══════════════════════════════════════════════════════════════════
   NAVEGAÇÃO MOBILE DO /SOCIAL

   A barra inferior cabe cinco itens; o site tem mais de cinco lugares.
   Grupos e Rodada ficavam inalcançáveis no celular — existiam no menu
   lateral, que o mobile esconde. O perfil resolvia isso com uma gaveta,
   mas só ele: cada página trazia (ou não) a sua cópia do CSS.

   Aqui a gaveta é uma só, e o botão que a abre é injetado pelo shell em
   qualquer página que tenha `#sc-nav`. Assim nenhum lugar do /social fica
   sem porta de entrada no celular.
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 940px) {
  /* A gaveta cobre a tela pela esquerda; o véu escurece o resto e fecha ao
     toque, que é o gesto que a pessoa já espera. */
  .sc-nav.aberta {
    display: flex !important; position: fixed; left: 0; top: 0; bottom: 0;
    width: min(280px, 84vw); background: #fff; z-index: 1600;
    padding: 20px 12px; overflow-y: auto;
    box-shadow: 4px 0 32px rgba(0,0,0,.16);
  }
  .sc-veu { position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 1590; }
  .sc-burger { display: inline-flex !important; }
  .sc-wrap { padding-bottom: 86px; }   /* espaço para a barra inferior */
}

.sc-burger {
  display: none; align-items: center; gap: 8px; margin-bottom: 14px;
  background: #fff; border: 1px solid var(--border, #E2DDD5); border-radius: 10px;
  padding: 8px 14px; font-family: var(--font); font-size: 13px; font-weight: 700;
  color: var(--t1, #16301C); cursor: pointer;
}
.sc-burger:hover { background: var(--bg, #F6F4F0); }

/* ── Rede de segurança contra rolagem horizontal ──────────────────
   As causas conhecidas foram corrigidas na origem (colunas de grade que
   não encolhiam). Isto é o cinto: uma única imagem, tabela ou palavra
   comprida em qualquer conteúdo futuro não deve empurrar a página inteira
   de lado. Fica só no celular, onde o estrago é visível. */
@media (max-width: 940px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .sc-wrap, .sc-shell, .sc-shell > main { max-width: 100%; min-width: 0; }
  /* Palavra sem espaço (URL colada, nome longo) não estica o cartão. */
  .fd-card, .fd-cmt, .ct-card { overflow-wrap: anywhere; }
}


/* ═══════════════ Ajustes de aperto no celular ═══════════════ */
@media (max-width: 560px) {
  /* ── Respostas: recuo menor ────────────────────────────────
     O fio da conversa custava 38px de recuo, e cada nível empilhava mais.
     Numa tela de 360px isso come um terço da largura e a resposta quebra
     em duas palavras por linha — o Facebook usa cerca de metade disso.
     Aqui o recuo cai para 20px e o fio acompanha; a hierarquia continua
     legível porque o avatar menor e o "L" já contam a história. */
  /* O fio desce alinhado ao CENTRO DA FOTO do comentário pai — é assim na
     referência do Facebook, e é o que torna a hierarquia óbvia sem gastar
     recuo. A thread vive dentro da coluna de texto do pai, que começa depois
     da foto (30px) mais o vão (9px); por isso o deslocamento é negativo.
     As respostas ficam alinhadas com o texto do pai: recuo zero, largura
     máxima. */
  /* A geometria da thread agora é a mesma em toda largura (ver feed-core.css):
     o fio no centro da foto, respostas alinhadas com o texto do pai. Não há
     mais nada a redefinir aqui — duplicar os números seria pedir para eles
     divergirem. */
  /* O cartão do post também aperta as margens: cada 4px de padding vira 8px
     de largura útil, e é aí que a resposta para de quebrar a cada palavra. */
  .fd-card { padding-left: 12px; padding-right: 12px; }

  /* Avatar de resposta menor: dentro da thread ele só marca de quem é. */
  .fd-thread .fd-cmt-ava { width: 26px; height: 26px; font-size: 11px; }

  /* As ações do comentário viravam colunas de uma letra ("Fl ag", "Excl uir").
     Sem quebra e com toque menor, elas cabem numa linha só. */
  .fd-cmt-pé { flex-wrap: wrap; row-gap: 2px; }
  .fd-cmt-acao { white-space: nowrap; padding: 3px 6px; font-size: 11px; }

  /* ── Compositor: botões sem quebrar a palavra ──────────────
     Cinco botões com rótulo lado a lado não cabem em 360px, e cada um
     virava uma torre de letras. Viram uma faixa rolável na horizontal:
     todos continuam alcançáveis, e nenhum deforma. */
  /* Sem rótulo, os quatro anexos viram ícones e os cinco botões cabem numa
     linha só. A faixa rolável que eu tinha tentado antes escondia botões atrás
     do "Publicar" — pior do que o problema original: a pessoa não via que
     havia mais. */
  .fd-comp-acts { display: flex; flex-wrap: nowrap; gap: 7px; align-items: center; }
  .fd-comp-acts .fd-btn-rot { display: none; }
  .fd-comp-acts > .fd-btn { flex: 0 0 auto; padding: 9px 12px; }
  /* "Publicar" fica com o rótulo e ocupa o que sobra: é a ação principal. */
  /* Sem esticar: o botão ocupava toda a sobra e ficava um bloco desproporcional
     ao lado de quatro ícones pequenos. Com `margin-left:auto` ele encosta na
     direita e fica do tamanho do próprio texto. */
  .fd-comp-acts > .fd-btn-primary {
    flex: 0 0 auto; margin-left: auto; white-space: nowrap;
    padding: 9px 20px; text-align: center;
  }

  /* "Compartilhar" não cabe ao lado de Reagir e Comentar; vira "Link". */
  .fd-act-longo { display: none; }
  .fd-act-curto { display: inline; }
  .fd-act { white-space: nowrap; }

  /* ── Cabeçalho de grupo ────────────────────────────────────
     O ícone quadrado ao lado do texto espremia nome, descrição e botões
     numa coluna de poucas letras. No celular ele passa a ficar acima, e a
     linha de botões ganha a largura inteira. */
  .gp-cab { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  /* O ícone sai da linha do texto: ao lado dele, nome e descrição ficavam
     com quatro letras por linha. */
  .gp-cab > div:not(.gp-cab-b) { flex: 1 1 100%; min-width: 0; }
  .gp-cab-b { flex: 1 1 100%; display: flex; gap: 8px; }
  /* Antes cada botão esticava para um terço da largura e virava um bloco
     enorme para uma ação secundária. Agora eles ficam do tamanho do texto,
     alinhados à esquerda. */
  .gp-cab-b { flex-wrap: wrap; }
  .gp-cab-b > .fd-btn { flex: 0 0 auto; white-space: nowrap; padding: 7px 14px; font-size: 12.5px; }
  .gp-cab-desc { margin-top: 4px; }
  .gp-barra { flex-wrap: wrap; gap: 8px; }
}


/* ── Respiro entre a topbar e o conteúdo ────────────────────────────
   No celular a distância era pensada para o desktop e comia quase uma
   dobra inteira antes do primeiro post. Cai para cerca de um terço. */
@media (max-width: 940px) {
  /* `!important` porque cada página declara o próprio `.sc-wrap` com padding
     composto DEPOIS deste arquivo na cascata — sem ele, a regra local vencia
     e o respiro continuava o mesmo em toda parte. */
  /* A topbar é `position: sticky`, não `fixed` — ela OCUPA espaço no fluxo.
     Reservar a altura dela no padding somava o respiro duas vezes, e era por
     isso que reduzir o valor não resolvia: o problema não era o valor, era a
     conta. Aqui sobra só o respiro de verdade. */
  .sc-wrap { padding: 10px 12px 84px !important; }
  .cr-wrap { padding: 10px 12px 24px !important; }
  /* A coluna lateral gruda logo abaixo da topbar — aí sim a altura dela conta,
     porque `sticky` a mantém no topo durante a rolagem. */
  .sc-nav { top: calc(var(--topbar-h, 56px) + 6px) !important; }

  /* Barra inferior: a regra que a MOSTRA morava no CSS de cada página, e
     duas delas não a tinham. Aqui ela vale para todas de uma vez. */
  /* A APARÊNCIA da barra também morava no CSS de cada página — em /grupos os
     itens saíam como links crus, sublinhados e em linha. Vai tudo para cá. */
  .sc-bnav { display: block !important; position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1500; background: #fff; border-top: 1px solid var(--border, #E2DDD5);
    padding-bottom: env(safe-area-inset-bottom); }
  .sc-bnav-in { display: flex; max-width: 520px; margin: 0 auto; }
  .sc-bitem { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 6px 2px; border: 0; background: none; font-family: var(--font);
    font-size: 10.5px; font-weight: 700; color: var(--t3, #7E8B84); cursor: pointer;
    text-decoration: none; min-height: 44px; justify-content: center; border-radius: 10px; }
  .sc-bitem.on { color: #007A2E; }
}
@media (min-width: 941px) {
  /* E some no desktop, onde a coluna lateral faz o papel dela. */
  .sc-bnav { display: none !important; }
}
@media (max-width: 560px) {
  .sc-wrap { padding-left: 8px !important; padding-right: 8px !important; }
}

/* O botão de menu herdava o tamanho de um botão de ação da página (na tela de
   mensagens ele saía enorme). Tamanho próprio, compacto. */
.sc-burger {
  /* `align-self` e `flex/justify-self` impedem que um grid ou flex da página
     estique o botão — foi o que aconteceu em /mensagens. */
  font-size: 13px !important; line-height: 1.2 !important;
  padding: 7px 12px !important; width: auto !important; min-height: 0 !important;
  height: auto !important; align-self: flex-start !important;
  justify-self: start !important; flex: 0 0 auto !important;
}
.sc-burger svg { width: 16px; height: 16px; flex: none; }


/* ── Respiro no desktop ──────────────────────────────────────────
   A mesma conta valia aqui: a topbar é `sticky` e já ocupa espaço, então
   reservar a altura dela no padding dobrava o vazio. Vale para todas as
   larguras — o mobile só tornou o exagero visível. */
@media (min-width: 941px) {
  .sc-wrap { padding-top: 14px !important; }
  .cr-wrap { padding-top: 14px; }
  .sc-nav { top: 14px; }
}


/* ── Aviso de ação (toast) ────────────────────────────────────────
   O estilo vivia dentro do CSS do /social/index.html, e as outras páginas
   — grupos, perfil, mensagens — chamavam `apToast` sem tê-lo: a mensagem
   saía como texto cru no canto superior esquerdo. Aqui vale para todas.
   Fora de media query de propósito: o aviso é o mesmo em qualquer largura. */
.ap-toast {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%) translateY(8px); z-index: 100500;
  background: #16301C; color: #fff; padding: 11px 20px; border-radius: 24px;
  font-size: 13.5px; font-weight: 600; max-width: calc(100vw - 32px);
  text-align: center; box-shadow: 0 8px 28px rgba(0,0,0,.26);
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.ap-toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Acima da barra inferior no celular, para não ficar escondido atrás dela. */
@media (max-width: 940px) { .ap-toast { bottom: 78px; } }