/* ------------------------------------------------------------------
   Barra de acoes da publicacao — PADRAO FIXO do SUIMOB.

   Sao sempre as mesmas quatro acoes, nesta ordem: curtir, gerar conexao,
   compartilhar, salvar. Vale para toda publicacao, em qualquer perfil
   (comprador, construtora e corretor) e no feed da Home. O desenho veio
   do mockup aprovado (docs/mockups/perfil-corretor.html e home-feed.html)
   e nao muda: qualquer acao nova entra em outro lugar do card, nao aqui.

   "Ver imovel" e afins sao links ACIMA da barra, nunca uma quinta acao.
   ------------------------------------------------------------------ */

.feed-acao {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .75rem;
  border-radius: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: rgb(var(--color-on-surface-variant));
  transition: background-color .15s, color .15s;
}
.feed-acao:hover {
  background: rgb(var(--color-surface-container-low));
  color: rgb(var(--color-secondary));
}

/* Estado ligado da acao (ja curtiu, ja salvou). */
.feed-acao-destaque { color: rgb(var(--color-secondary)); }

/* A acao que a plataforma existe para gerar: fica visivelmente acima das outras. */
.feed-acao-conexao {
  background: rgb(var(--color-secondary) / .1);
  color: rgb(var(--color-secondary));
}
.feed-acao-conexao:hover { background: rgb(var(--color-secondary) / .2); }

/* O numero ao lado da acao: quantas pessoas curtiram, quantas
   compartilharam. Nao ha numero de conexoes aqui — conexao e um pedido
   com aceite dos dois lados, e o que o botao mostra e o **estado** dela
   (ver `.feed-acao-conexao-*` abaixo), nao uma contagem.

   Salvar tambem nao tem numero, e e de proposito: salvar e organizacao
   pessoal, e anunciar "guardado por 40 pessoas" transformaria um gesto
   privado em vitrine.

   Discreto e herdando a cor do botao: o numero acompanha a acao, e um
   selo colorido do lado de cada uma competiria com o proprio rotulo. */
.feed-acao-contador {
  margin-left: .125rem;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

/* Zero nao se escreve: "0 curtidas" e um convite a nao ser o primeiro.
   O numero so aparece quando existe, e por isso o span nem e desenhado
   — mas a regra fica aqui para quem for ler o CSS procurando por ela. */

/* O icone preenchido do estado ligado. So a cor mudando e pouco: no
   modo escuro a diferenca entre o cinza e o secondary encolhe, e quem
   ja curtiu precisa ver que curtiu. */
.feed-acao-destaque .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* O botao de conexao depois que o pedido saiu ou o aceite veio: perde o
   fundo de convite e vira informacao. Continua legivel, mas para de
   chamar — o clique que ele pedia ja aconteceu. */
.feed-acao-conexao-feito {
  background: transparent;
  color: rgb(var(--color-on-surface-variant));
  cursor: default;
}
.feed-acao-conexao-feito:hover {
  background: transparent;
  color: rgb(var(--color-on-surface-variant));
}

/* Ja conectados: o handshake preenchido, na cor da acao que a
   plataforma existe para gerar. */
.feed-acao-conexao-aceita {
  background: transparent;
  color: rgb(var(--color-secondary));
  cursor: default;
}
.feed-acao-conexao-aceita:hover { background: transparent; }
.feed-acao-conexao-aceita .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
}

/* Enquanto o servidor responde. O clique ja foi aceito pela tela, e a
   barra fica intocavel ate a resposta chegar — sem isso, dois cliques
   rapidos mandariam duas requisicoes e a segunda desfaria a primeira. */
.feed-acao[data-ocupado] {
  opacity: .55;
  pointer-events: none;
}

/* No celular as quatro acoes nao cabem lado a lado escritas por extenso: a
   barra estoura a largura do card e "Salvar" fica fora da tela. Entao tres
   delas ficam so com o icone — o rotulo continua no aria-label, para quem
   navega por leitor de tela —, e "Gerar conexao" mantem o texto, porque e a
   acao que a plataforma existe para gerar e a unica que ninguem adivinha
   pelo desenho. */
@media (max-width: 640px) {
  .feed-acao:not(.feed-acao-conexao) .feed-acao-texto { display: none; }
  .feed-acao { padding: .5rem .625rem; }
}

/* ------------------------------------------------------------------
   O cartao do post e os dois estados da esteira.

   Vieram de css/home-feed.css quando a aba Publicacoes dos perfis
   passou a desenhar os mesmos cards do feed (js/feed-nucleo.js). Ficam
   aqui, e nao la, porque agora tres telas usam: a Home, o perfil
   profissional e o do comprador.
   ------------------------------------------------------------------ */

/* Cartao de post: mesma linguagem dos cards de hoje (surface + outline
   + raio 16). */
.feed-post {
  background: rgb(var(--color-surface-container-lowest));
  border: 1px solid rgb(var(--color-outline-variant));
  border-radius: 1rem;
  overflow: hidden;
}

/* Enquanto a resposta nao chega, a esteira troca de conteudo na frente
   de quem clicou. Deixar os cards velhos apagados diz "estou trocando"
   sem tirar a pagina do lugar — some-los deixaria a coluna pular. */
.feed-esteira-carregando {
  opacity: .45;
  pointer-events: none;
  transition: opacity .15s;
}

/* O esqueleto do primeiro carregamento. Tres retangulos com a altura
   aproximada de um card, para a coluna nascer com a altura que vai ter
   e nao empurrar a lateral quando os posts chegarem. */
.feed-esqueleto {
  height: 9.5rem;
  border-radius: 1rem;
  border: 1px solid rgb(var(--color-outline-variant));
  background: rgb(var(--color-surface-container-lowest));
  overflow: hidden;
  position: relative;
}

.feed-esqueleto::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--color-surface-container) / .9),
    transparent
  );
  transform: translateX(-100%);
  animation: feed-brilho 1.4s infinite;
}

@keyframes feed-brilho {
  to { transform: translateX(100%); }
}

/* Quem pediu para reduzir movimento nao precisa do brilho para
   entender que a tela esta carregando: o retangulo cinza ja diz. */
@media (prefers-reduced-motion: reduce) {
  .feed-esqueleto::after { animation: none; }
}

/* O post apontado pelo `?post=` do link de compartilhar. Rolar ate ele
   nao basta quando ha outros tres cards iguais em volta: a moldura diz
   qual deles e o do link. Ela some sozinha depois de alguns segundos
   (js/perfil-publicacoes.js) porque e uma resposta ao link, e nao um
   estado do post — acesa para sempre, faria o card parecer diferente
   dos outros sem motivo. */
.feed-post-apontado {
  border-color: rgb(var(--color-secondary));
  box-shadow: 0 0 0 2px rgb(var(--color-secondary) / .25);
  transition: border-color .3s, box-shadow .3s;
}

@media (prefers-reduced-motion: reduce) {
  .feed-post-apontado { transition: none; }
}