/* ══════════════════════════════════════════════════════════════════════
   SOCIAL — a página de amigos
   ══════════════════════════════════════════════════════════════════════
   Maior que o dropdown de 320px que existia antes, sem virar tela cheia: o
   quadro continua visível atrás, e por isso a janela parece uma camada do
   MyDesk e não outro aplicativo.

   Arquivo próprio em vez de mais 200 regras no fim do `main.css`, que já tem
   milhares. O `?v=` dele anda sozinho — mexer no Social não invalida o cache
   do app inteiro.
   ══════════════════════════════════════════════════════════════════════ */

.sg-bg{position:fixed;inset:0;z-index:1600;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(6,6,10,.72);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  opacity:0;pointer-events:none;transition:opacity .26s cubic-bezier(.16,1,.3,1);}
.sg-bg.aberta{opacity:1;pointer-events:auto;}
/* A JANELA É A LINHA, não o cartão. O cartão principal e a gaveta de perfil
   são duas peças soltas, com borda e cantos próprios e um vão entre elas —
   como na referência. Assim a gaveta entra deslizando POR FORA, e fica claro
   que é outro objeto: um painel de perfil, não uma terceira coluna. */
.sg-janela{position:relative;display:flex;gap:14px;align-items:stretch;
  width:min(1000px,100%);height:min(620px,calc(100dvh - 48px));
  transform:translateY(14px) scale(.965);opacity:0;
  transition:transform .3s cubic-bezier(.16,1,.3,1),opacity .3s cubic-bezier(.16,1,.3,1);}
.sg-bg.aberta .sg-janela{transform:translateY(0) scale(1);opacity:1;}
.sg-principal{flex:1;min-width:0;display:flex;background:#0e0e14;
  border:1px solid rgba(255,255,255,.09);border-radius:20px;overflow:hidden;
  box-shadow:0 34px 90px rgba(0,0,0,.7);}

/* ── Barra lateral ───────────────────────────────────────────────────── */
.sg-lado{width:196px;flex-shrink:0;display:flex;flex-direction:column;padding:16px 12px 12px;
  background:#0a0a0f;border-right:1px solid rgba(255,255,255,.06);}
/* Centralizado, não encostado à esquerda: o logo é a assinatura da janela, e
   assinatura torta no canto parece sobra de layout. `justify-content:center`
   com padding igual dos dois lados. */
.sg-marca{display:flex;align-items:center;justify-content:center;padding:10px 4px 22px;}
/* O logo oficial já traz o nome junto — por isso não há texto ao lado. Um
   "MyDesk" escrito à mão ao lado da marca é a forma mais rápida de os dois
   discordarem quando a marca mudar. */
.sg-marca-logo{height:26px;width:auto;display:block;max-width:100%;}
.sg-nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto;}
.sg-nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:9px;
  background:none;font-family:Inter,sans-serif;font-size:.79rem;font-weight:500;
  color:rgba(240,240,240,.5);cursor:pointer;text-align:left;transition:background .16s,color .16s;}
.sg-nav-item:hover{background:rgba(255,255,255,.05);color:rgba(240,240,240,.85);}
.sg-nav-item.ativo{background:rgba(99,102,241,.16);color:#a5b4fc;font-weight:600;}
.sg-nav-ico{font-size:.85rem;width:16px;text-align:center;flex-shrink:0;}
.sg-sub{display:flex;flex-direction:column;gap:1px;margin:2px 0 4px 26px;}
.sg-sub-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;
  border:0;border-radius:7px;background:none;font-family:Inter,sans-serif;font-size:.755rem;
  color:rgba(240,240,240,.38);cursor:pointer;text-align:left;transition:background .16s,color .16s;}
.sg-sub-item:hover{background:rgba(255,255,255,.04);color:rgba(240,240,240,.7);}
.sg-sub-item.ativo{color:#c7d2fe;background:rgba(99,102,241,.10);font-weight:600;}
.sg-sub-badge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:#ef4444;color:#fff;
  font-size:.6rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.sg-nav-sep{height:1px;background:rgba(255,255,255,.06);margin:8px 4px;}
.sg-eu{display:flex;align-items:center;gap:9px;padding:10px 8px 4px;
  border-top:1px solid rgba(255,255,255,.06);margin-top:8px;}
.sg-eu-av{position:relative;width:34px;height:34px;flex-shrink:0;}
.sg-eu-av img,.sg-eu-av>div:first-child{width:34px!important;height:34px!important;border-radius:50%;object-fit:cover;}
.sg-eu-txt{min-width:0;}
.sg-eu-nome{font-size:.755rem;font-weight:600;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-eu-arroba{font-size:.665rem;color:rgba(240,240,240,.32);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-eu-est{display:flex;align-items:center;gap:4px;font-size:.63rem;color:rgba(240,240,240,.42);margin-top:2px;}
.sg-eu-est i{width:6px;height:6px;border-radius:50%;flex-shrink:0;}

/* ── Coluna do meio ──────────────────────────────────────────────────── */
.sg-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:20px 22px 0;}
.sg-topo{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;}
.sg-titulo{margin:0;font-family:Syne,sans-serif;font-size:1.32rem;font-weight:700;color:#f0f0f0;letter-spacing:-.4px;}
.sg-sub-titulo{margin:3px 0 0;font-size:.735rem;color:rgba(240,240,240,.36);}
.sg-pills{display:flex;gap:3px;margin-left:auto;background:rgba(255,255,255,.04);padding:3px;border-radius:10px;}
.sg-pill{padding:6px 14px;border:0;border-radius:8px;background:none;font-family:Inter,sans-serif;
  font-size:.745rem;font-weight:500;color:rgba(240,240,240,.42);cursor:pointer;transition:all .18s;}
.sg-pill:hover{color:rgba(240,240,240,.8);}
.sg-pill.ativo{background:#6366f1;color:#fff;font-weight:600;box-shadow:0 3px 12px rgba(99,102,241,.35);}
.sg-fechar{width:30px;height:30px;flex-shrink:0;border:0;border-radius:9px;background:rgba(255,255,255,.05);
  color:rgba(240,240,240,.45);font-size:.85rem;cursor:pointer;transition:all .16s;}
.sg-fechar:hover{background:rgba(239,68,68,.16);color:#fca5a5;}
.sg-ferramentas{display:flex;gap:10px;margin-bottom:16px;}
.sg-busca{flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);border-radius:10px;transition:border-color .18s,background .18s;}
.sg-busca:focus-within{border-color:rgba(99,102,241,.5);background:rgba(99,102,241,.06);}
.sg-busca-ico{font-size:.75rem;opacity:.35;flex-shrink:0;}
.sg-busca input{flex:1;background:none;border:0;outline:none;padding:9px 0;font-family:Inter,sans-serif;
  font-size:.79rem;color:#f0f0f0;}
.sg-busca input::placeholder{color:rgba(240,240,240,.24);}
.sg-add{display:flex;align-items:center;gap:6px;padding:9px 16px;border:0;border-radius:10px;background:#6366f1;
  font-family:Inter,sans-serif;font-size:.775rem;font-weight:600;color:#fff;cursor:pointer;white-space:nowrap;
  transition:background .16s,transform .16s,box-shadow .16s;box-shadow:0 4px 14px rgba(99,102,241,.28);}
.sg-add:hover{background:#5457e5;transform:translateY(-1px);box-shadow:0 6px 18px rgba(99,102,241,.4);}
.sg-add:active{transform:translateY(0);}
.sg-add span{font-size:.95rem;line-height:1;}
.sg-secao{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.sg-secao-lbl{font-size:.605rem;font-weight:700;letter-spacing:1.4px;color:rgba(240,240,240,.3);}
.sg-filtro-btn{display:flex;align-items:center;gap:5px;padding:4px 10px;border:1px solid rgba(255,255,255,.08);
  border-radius:7px;background:rgba(255,255,255,.03);font-family:Inter,sans-serif;font-size:.7rem;
  color:rgba(240,240,240,.5);cursor:pointer;transition:all .16s;}
.sg-filtro-btn:hover{background:rgba(255,255,255,.07);color:rgba(240,240,240,.8);}
.sg-filtro-btn span{font-size:.6rem;opacity:.6;}

/* ── LIMPAR CONVERSAS ────────────────────────────────────────────────────
   Mora onde o filtro mora e é do mesmo tamanho dele: são os dois a ação
   secundária da linha de seção, e dar destaque a este seria convidar ao
   clique — uma ação que varre a lista inteira não se anuncia como um botão
   principal.

   A SEGUNDA ETAPA FICA VERMELHA E CRESCE, porque nela o texto muda para uma
   frase. Sem a mudança de cor, os dois estados pareceriam o mesmo botão com
   outro rótulo, e a pessoa clicaria no segundo achando que ainda estava
   confirmando o primeiro. */
.sg-limpar{display:flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid rgba(255,255,255,.08);border-radius:7px;
  background:rgba(255,255,255,.03);font-family:Inter,sans-serif;font-size:.7rem;
  color:rgba(240,240,240,.42);cursor:pointer;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s,transform .12s;}
.sg-limpar:hover{background:rgba(255,255,255,.07);color:rgba(240,240,240,.8);}
.sg-limpar:active{transform:scale(.97);}
.sg-limpar span{font-size:.78rem;opacity:.6;}
.sg-limpar.confirmando{
  background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.38);
  color:#fca5a5;animation:sgLimparAtencao .32s cubic-bezier(.16,1,.3,1) both;}
.sg-limpar.confirmando:hover{background:rgba(239,68,68,.24);color:#fecaca;}
@keyframes sgLimparAtencao{
  from{transform:scale(.94);opacity:.4;}
  to  {transform:scale(1);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .sg-limpar,.sg-limpar.confirmando{transition:none;animation:none;}
}

/* ── A grade ─────────────────────────────────────────────────────────── */
.sg-lista{flex:1;min-height:0;overflow-y:auto;display:grid;gap:10px;padding-bottom:20px;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));align-content:start;}
.sg-card{display:flex;align-items:center;gap:11px;padding:12px;border-radius:13px;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s,box-shadow .18s;
  opacity:0;transform:translateY(10px);animation:sgCardIn .34s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes sgCardIn{to{opacity:1;transform:translateY(0);}}
.sg-card:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.4);}
.sg-card.ativo{border-color:rgba(99,102,241,.55);background:rgba(99,102,241,.10);}
.sg-card-av{position:relative;width:42px;height:42px;flex-shrink:0;}
.sg-card-av img,.sg-card-av>div:first-child{width:42px!important;height:42px!important;border-radius:50%;object-fit:cover;}
.sg-av-vazio{width:42px;height:42px;border-radius:50%;background:rgba(99,102,241,.16);display:flex;
  align-items:center;justify-content:center;font-size:.95rem;font-weight:700;color:rgba(165,180,252,.5);
  font-family:'Inter',sans-serif;line-height:1;user-select:none;}

/* ── ONDE O CONTAINER JÁ DESENHA O DISCO ─────────────────────────────────
   `.sp-avatar` e `.profile-avatar-big` são anteriores ao painel Social: elas
   já vêm com o círculo de gradiente, o centro e a letra branca, e recebiam a
   inicial como texto solto justamente por isso. Agora recebem o mesmo bloco que
   o resto do app — então ele se apaga aqui dentro, e o disco continua sendo o
   de fora. Sem isto, o cinza translúcido do bloco cobriria o gradiente e a
   letra trocaria de cor em duas telas que ninguém pediu para mudar. */
.sp-avatar .sg-av-vazio,.profile-avatar-big .sg-av-vazio{
  width:100%!important;height:100%!important;background:none;color:inherit;font-size:inherit;}
.sg-ponto{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;border:2px solid #0e0e14;}
.sg-ponto-g{width:17px;height:17px;border-width:3px;right:4px;bottom:4px;}
.sg-card-txt{min-width:0;flex:1;}
.sg-card-nome{font-size:.805rem;font-weight:600;color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-card-est{margin-top:2px;font-size:.675rem;color:rgba(240,240,240,.3);display:flex;flex-direction:column;gap:1px;}
.sg-card-arroba{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-card-dot{display:flex;align-items:center;gap:4px;}
.sg-card-dot i{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.sg-card-mais{width:22px;height:22px;flex-shrink:0;border:0;border-radius:6px;background:none;
  color:rgba(240,240,240,.25);font-size:.85rem;cursor:pointer;opacity:0;transition:all .16s;}
.sg-card:hover .sg-card-mais{opacity:1;}
.sg-card-mais:hover{background:rgba(255,255,255,.09);color:#f0f0f0;}
/* Enquanto o banco responde, o cartão respira em vez de ficar parado
   mentindo que já está pronto. */
.sg-carregando{animation:sgCardIn .34s cubic-bezier(.16,1,.3,1) forwards,
  sgPulso 1.4s ease-in-out .34s infinite;}
@keyframes sgPulso{0%,100%{opacity:1;}50%{opacity:.55;}}
.sg-vazio{grid-column:1/-1;text-align:center;padding:44px 16px;font-size:.79rem;color:rgba(240,240,240,.28);}

/* ── Procurar quem ainda não é amigo ────────────────────────────────────
   O campo só filtrava a lista da pessoa: digitar o @ de alguém novo respondia
   "ninguém com esse nome", que é a resposta certa para a pergunta errada.
   Agora, quando a lista não tem ninguém, a busca desce até o diretório. */
.sg-procura{grid-column:1/-1;text-align:center;padding:8px 16px 20px;
  font-size:.76rem;color:rgba(240,240,240,.34);}
.sg-procura b{color:rgba(240,240,240,.6);}
/* O achado é destacado porque veio de FORA da lista: sem a moldura ele se
   confunde com um amigo que a pessoa já tem. */
.sg-card-achado{grid-column:1/-1;border-color:rgba(99,102,241,.4);
  background:rgba(99,102,241,.08);}
.sg-card-add,.sg-card-cancelar{
  flex-shrink:0;border-radius:9px;padding:7px 13px;cursor:pointer;
  font-family:inherit;font-size:.72rem;font-weight:600;white-space:nowrap;
  transition:background .16s,border-color .16s,color .16s;
}
.sg-card-add{background:rgba(99,102,241,.24);border:1px solid rgba(99,102,241,.42);color:#c7d2fe;}
.sg-card-add:hover:not(:disabled){background:rgba(99,102,241,.36);}
/* Desabilitado ainda precisa ser LIDO: ele diz "já é seu amigo" ou "pedido
   enviado", que é a resposta à pergunta que a pessoa fez. */
.sg-card-add:disabled{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09);
  color:rgba(240,240,240,.42);cursor:default;}
/* Azul, e não vermelho: cancelar um pedido é reversível — basta mandar de
   novo. Vermelho é para o que não volta. */
.sg-card-cancelar{background:rgba(59,130,246,.14);border:1px solid rgba(59,130,246,.3);color:#93c5fd;}
.sg-card-cancelar:hover:not(:disabled){background:rgba(59,130,246,.26);}
.sg-card-cancelar:disabled{opacity:.6;cursor:default;}

.sg-sub-lbl{grid-column:1/-1;margin:14px 0 -2px;font-size:.63rem;font-weight:700;
  letter-spacing:.7px;color:rgba(240,240,240,.26);}
.sg-sub-lbl:first-child{margin-top:0;}

/* ── Responder um pedido ────────────────────────────────────────────────
   O cartão do pedido recebido era o mesmo da lista de amigos: nenhum botão, e
   clicar abria o perfil. Nao havia como aceitar um pedido em lugar nenhum da
   tela. Os botões ficam NO cartão, e não atrás do ⋮ — responder é a única
   coisa que se faz com um pedido, e esconder a única ação num menu é o mesmo
   que não tê-la. */
.sg-pedido-acoes{display:flex;gap:6px;flex-shrink:0;}
.sg-pedido-ok,.sg-pedido-nao{
  border-radius:9px;padding:7px 13px;cursor:pointer;font-family:inherit;
  font-size:.72rem;font-weight:600;white-space:nowrap;transition:background .16s,color .16s;
}
.sg-pedido-ok{background:rgba(16,185,129,.22);border:1px solid rgba(16,185,129,.4);color:#6ee7b7;}
.sg-pedido-ok:hover:not(:disabled){background:rgba(16,185,129,.34);}
/* Recusar não é destrutivo — a pessoa pode mandar de novo. Vermelho fica para
   o que não volta. */
.sg-pedido-nao{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:rgba(240,240,240,.55);}
.sg-pedido-nao:hover:not(:disabled){background:rgba(255,255,255,.1);color:#f0f0f0;}
.sg-pedido-ok:disabled,.sg-pedido-nao:disabled{opacity:.6;cursor:default;}
/* O ⋮ sai do cartão de pedido: com dois botões ao lado ele vira um terceiro
   alvo disputando o mesmo canto. */
.sg-card .sg-pedido-acoes ~ .sg-card-mais,
.sg-card:has(.sg-pedido-acoes) .sg-card-mais{display:none;}

/* ── Conversas ───────────────────────────────────────────────────────────
   `grid-column:1/-1` em vez de mudar o `grid-template-columns` da lista: a
   grade continua sendo a mesma para amigos e grupos, e a conversa apenas
   ocupa a linha inteira. Uma conversa é uma LINHA — a prévia é texto corrido,
   e texto corrido dentro de um cartão de 196px não cabe. */
.sg-conversa{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:11px 12px;
  border-radius:13px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  cursor:pointer;transition:background .18s,border-color .18s,transform .18s;
  opacity:0;transform:translateY(10px);animation:sgCardIn .34s cubic-bezier(.16,1,.3,1) forwards;}
.sg-conversa:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);
  transform:translateY(-1px);}
.sg-conversa:focus-visible{outline:2px solid rgba(99,102,241,.7);outline-offset:2px;}
.sg-conversa.nova{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.24);}
.sg-conversa-av{position:relative;width:38px;height:38px;flex-shrink:0;}
.sg-conversa-av img,.sg-conversa-av>div:first-child{width:38px!important;height:38px!important;
  border-radius:50%;object-fit:cover;}
.sg-conversa-av .sg-av-vazio{width:38px;height:38px;font-size:.85rem;}
.sg-conversa-txt{min-width:0;flex:1;}
.sg-conversa-topo{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.sg-conversa-nome{font-size:.785rem;font-weight:600;color:#f0f0f0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-conversa-hora{font-size:.62rem;color:rgba(240,240,240,.28);flex-shrink:0;
  font-variant-numeric:tabular-nums;}
/* Uma linha só, com reticências. A prévia responde "vale abrir?" — a
   mensagem inteira é o que a conversa mostra depois. */
.sg-conversa-previa{margin-top:2px;font-size:.7rem;color:rgba(240,240,240,.34);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-conversa.nova .sg-conversa-previa{color:rgba(240,240,240,.72);font-weight:500;}
.sg-conversa-eu{color:rgba(240,240,240,.24);}
.sg-conversa-ponto{width:8px;height:8px;border-radius:50%;background:#6366f1;flex-shrink:0;
  box-shadow:0 0 8px rgba(99,102,241,.8);}
/* O contador da barra lateral, no item Mensagens. */
.sg-nav-badge{margin-left:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:#ef4444;color:#fff;font-size:.6rem;font-weight:700;line-height:16px;
  text-align:center;flex-shrink:0;}

/* ── Gaveta de detalhe ───────────────────────────────────────────────── */
.sg-gaveta{width:0;flex-shrink:0;overflow:hidden;background:#0e0e14;
  border:1px solid rgba(255,255,255,.09);border-radius:20px;
  box-shadow:0 34px 90px rgba(0,0,0,.7);
  opacity:0;transform:translateX(18px);
  transition:width .3s cubic-bezier(.16,1,.3,1),opacity .26s ease,
             transform .3s cubic-bezier(.16,1,.3,1),margin-left .3s cubic-bezier(.16,1,.3,1);
  margin-left:-14px;}
.sg-gaveta.aberta{width:286px;overflow-y:auto;opacity:1;transform:translateX(0);margin-left:0;}
.sg-gaveta>*{opacity:0;animation:sgGavIn .3s cubic-bezier(.16,1,.3,1) .08s forwards;}
@keyframes sgGavIn{from{opacity:0;transform:translateX(12px);}to{opacity:1;transform:translateX(0);}}
.sg-gv-carregando{padding:26px;font-size:.76rem;color:rgba(240,240,240,.3);text-align:center;}
.sg-gv-topo{display:flex;justify-content:space-between;padding:14px 14px 0;}
.sg-gv-ico{width:28px;height:28px;border:0;border-radius:8px;background:rgba(255,255,255,.05);
  color:rgba(240,240,240,.45);font-size:.8rem;cursor:pointer;transition:all .16s;}
.sg-gv-ico:hover{background:rgba(255,255,255,.11);color:#f0f0f0;}
.sg-gv-av{position:relative;width:84px;height:84px;margin:6px auto 12px;}
.sg-gv-av img,.sg-gv-av>div:first-child{width:84px!important;height:84px!important;border-radius:50%;object-fit:cover;}
.sg-gv-nome{text-align:center;font-size:.95rem;font-weight:700;color:#f0f0f0;padding:0 14px;}
.sg-gv-arroba{text-align:center;font-size:.735rem;color:rgba(240,240,240,.34);margin-top:2px;}
.sg-gv-est{display:flex;align-items:center;justify-content:center;gap:5px;width:fit-content;
  margin:9px auto 0;padding:3px 11px;border-radius:20px;background:rgba(16,185,129,.12);
  border:1px solid rgba(16,185,129,.22);font-size:.665rem;color:rgba(240,240,240,.7);}
.sg-gv-est i{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
/* ── E QUANDO A PÍLULA É A SUA, ELA É UM BOTÃO ──────────────────────────
   O estado aparecia em tamanho grande na própria ficha e não se mexia dali:
   o único caminho era a pílula miúda do cartão do rodapé, que ninguém acha
   procurando. Aqui é onde a mão vai.

   A UA manda fonte, borda e alinhamento próprios num <button>; a herança
   abaixo devolve tudo o que a regra de cima já definia. A setinha existe
   para a pílula não parecer só um selo colorido a mais. */
.sg-gv-est.trocavel{
  font:inherit;font-size:.665rem;color:rgba(240,240,240,.7);
  -webkit-appearance:none;appearance:none;cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s;
}
.sg-gv-est.trocavel:hover{background:rgba(16,185,129,.2);
  border-color:rgba(16,185,129,.4);}
.sg-gv-est.trocavel:active{transform:scale(.97);}
.sg-gv-est.trocavel:focus-visible{outline:2px solid rgba(99,102,241,.75);
  outline-offset:2px;}
.sg-gv-est-seta{margin-left:1px;font-size:.6rem;opacity:.55;}
.sg-gv-acoes{display:flex;gap:6px;padding:16px 14px 4px;}
.sg-gv-acao{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 4px;border:0;
  border-radius:11px;background:rgba(255,255,255,.05);font-family:Inter,sans-serif;font-size:.655rem;
  font-weight:500;color:rgba(240,240,240,.6);cursor:pointer;
  transition:background .16s,transform .16s,color .16s;}
.sg-gv-acao:hover{background:rgba(99,102,241,.18);color:#c7d2fe;transform:translateY(-2px);}
.sg-gv-acao span{font-size:.95rem;}
.sg-gv-bloco{padding:16px 14px 0;}
.sg-gv-lbl{font-size:.685rem;font-weight:700;color:rgba(240,240,240,.72);margin-bottom:6px;}
.sg-gv-bio{margin:0;font-size:.725rem;line-height:1.65;color:rgba(240,240,240,.42);
  white-space:pre-wrap;overflow-wrap:anywhere;}
/* "Editar" mora no rótulo da seção, e não como quarto botão de ação: as ações
   são o que se faz COM a pessoa, e editar a descrição é o que se faz com o
   texto logo abaixo. Encostado no rótulo, ele diz o que edita. */
.sg-gv-lbl{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.sg-gv-editar{border:0;background:transparent;padding:0;font-family:Inter,sans-serif;
  font-size:.645rem;font-weight:600;color:rgba(199,210,254,.7);cursor:pointer;
  transition:color .14s;}
.sg-gv-editar:hover{color:#c7d2fe;text-decoration:underline;}
.sg-gv-bio-campo{width:100%;box-sizing:border-box;resize:vertical;min-height:62px;
  padding:8px 9px;border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);color:rgba(240,240,240,.86);
  font-family:Inter,sans-serif;font-size:.725rem;line-height:1.6;}
.sg-gv-bio-campo:focus{outline:0;border-color:rgba(99,102,241,.6);
  background:rgba(255,255,255,.06);}
.sg-gv-bio-pe{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-top:7px;}
.sg-gv-bio-conta{font-size:.62rem;color:rgba(240,240,240,.3);font-variant-numeric:tabular-nums;}
.sg-gv-bio-btns{display:flex;gap:6px;}
.sg-gv-bio-btn{border:0;border-radius:8px;padding:6px 11px;font-family:Inter,sans-serif;
  font-size:.645rem;font-weight:600;cursor:pointer;background:rgba(255,255,255,.06);
  color:rgba(240,240,240,.6);transition:background .14s,color .14s;}
.sg-gv-bio-btn:hover{background:rgba(255,255,255,.1);color:rgba(240,240,240,.85);}
.sg-gv-bio-btn.primario{background:#6366f1;color:#fff;}
.sg-gv-bio-btn.primario:hover{background:#4f46e5;}
.sg-gv-bio-btn:disabled{opacity:.55;cursor:default;}
/* O cartão de baixo virou porta para o próprio perfil — precisa parecer uma. */
.sg-eu{cursor:pointer;border-radius:11px;transition:background .14s;}
.sg-eu:hover{background:rgba(255,255,255,.05);}
.sg-eu:focus-visible{outline:2px solid rgba(99,102,241,.7);outline-offset:2px;}
/* A própria foto responde ao clique — foi onde a mão foi primeiro. A câmera
   só aparece no hover: um selo permanente sobre o rosto vira sujeira. */
.sg-gv-av.trocavel{cursor:pointer;}
.sg-gv-av.trocavel:focus-visible{outline:2px solid rgba(99,102,241,.7);outline-offset:4px;border-radius:50%;}
.sg-gv-av-capa{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:rgba(0,0,0,.55);font-size:1.35rem;opacity:0;
  transition:opacity .16s;pointer-events:none;}
.sg-gv-av.trocavel:hover .sg-gv-av-capa,
.sg-gv-av.trocavel:focus-visible .sg-gv-av-capa{opacity:1;}
/* O nome editável. O lápis fica sempre visível, ao contrário da câmera: o
   nome é texto e texto não se anuncia clicável sozinho — uma foto com hover
   escuro, sim. */
/* `width:fit-content` + `margin:auto`, e NÃO `inline-flex`. A regra base é
   `text-align:center` num bloco de largura cheia — isso centraliza o TEXTO
   dentro dele. Ao virar caixa que encolhe no conteúdo (para o fundo do hover
   abraçar só o nome), quem passa a mandar é o alinhamento do pai, que não é
   centralizado: o nome descolou para a esquerda enquanto o @ embaixo seguia
   no meio. A margem automática centraliza a caixa em si. */
.sg-gv-nome.editavel{cursor:pointer;display:flex;align-items:center;gap:6px;
  justify-content:center;width:fit-content;max-width:calc(100% - 20px);margin:0 auto;
  border-radius:7px;padding:1px 8px;transition:background .14s;}
.sg-gv-nome.editavel:hover{background:rgba(255,255,255,.06);}
.sg-gv-nome.editavel:focus-visible{outline:2px solid rgba(99,102,241,.7);outline-offset:1px;}
.sg-gv-lapis{font-size:.62rem;color:rgba(240,240,240,.26);}
.sg-gv-nome-campo{display:block;width:calc(100% - 28px);margin:0 auto;box-sizing:border-box;
  text-align:center;padding:4px 9px;border-radius:8px;
  border:1px solid rgba(99,102,241,.5);background:rgba(255,255,255,.05);
  color:#f0f0f0;font-family:Syne,Inter,sans-serif;font-size:.95rem;font-weight:700;}
.sg-gv-nome-campo:focus{outline:0;border-color:rgba(99,102,241,.85);}
/* O estado virou botão de verdade — antes era uma linha de texto. */
.sg-eu-est{border:0;background:transparent;padding:2px 6px;margin-left:-6px;border-radius:7px;
  font-family:Inter,sans-serif;cursor:pointer;transition:background .14s;}
.sg-eu-est:hover{background:rgba(255,255,255,.07);}
.sg-gv-pilha{display:flex;align-items:center;}
.sg-gv-mini{width:26px;height:26px;border-radius:50%;overflow:hidden;border:2px solid #0a0a0f;margin-right:-7px;}
.sg-gv-mini img,.sg-gv-mini>div:first-child{width:26px!important;height:26px!important;border-radius:50%;object-fit:cover;}
.sg-gv-mais-n{width:26px;height:26px;border-radius:50%;border:2px solid #0a0a0f;background:rgba(99,102,241,.22);
  display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:#c7d2fe;}
/* Lista de membros do grupo, na gaveta. Rola sozinha: um grupo de trinta
   pessoas não pode empurrar o botão de abrir o quadro para fora da vista. */
.sg-gv-membros{display:flex;flex-direction:column;gap:2px;max-height:210px;overflow-y:auto;}
.sg-gv-membro{display:flex;align-items:center;gap:9px;padding:5px 4px;border-radius:8px;
  transition:background .14s;}
.sg-gv-membro:hover{background:rgba(255,255,255,.04);}
/* ── TIRAR DO GRUPO ──────────────────────────────────────────────────────
   Só aparece com o mouse na linha: é uma ação rara e definitiva, e um botão
   vermelho permanente ao lado do nome de cada colega faz a lista de gente
   parecer uma lista de demissões. Continua alcançável pelo teclado, que não
   tem "passar o mouse". */
.sg-gv-membro-tirar{
  flex-shrink:0;margin-left:auto;opacity:0;transition:opacity .14s,background .14s,color .14s;
  border:1px solid rgba(239,68,68,.22);border-radius:7px;background:rgba(239,68,68,.1);
  color:rgba(252,165,165,.85);font-family:'Inter',sans-serif;font-size:.66rem;
  font-weight:600;padding:3px 9px;cursor:pointer;
}
.sg-gv-membro:hover .sg-gv-membro-tirar,
.sg-gv-membro-tirar:focus-visible{opacity:1;}
.sg-gv-membro-tirar:hover{background:rgba(239,68,68,.24);color:#fff;}
.sg-gv-membro-av{position:relative;width:26px;height:26px;flex-shrink:0;}
.sg-gv-membro-av img,.sg-gv-membro-av>div:first-child{width:26px!important;height:26px!important;
  border-radius:50%;object-fit:cover;}
.sg-gv-membro-av .sg-ponto{width:8px;height:8px;border-width:2px;}
.sg-gv-membro-txt{min-width:0;}
.sg-gv-membro-nome{font-size:.735rem;font-weight:600;color:rgba(240,240,240,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-gv-membro-arroba{font-size:.65rem;color:rgba(240,240,240,.32);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sg-gv-membro-mais{padding:6px 4px;font-size:.68rem;color:rgba(240,240,240,.32);}
/* O Painel do Líder é atalho, não a ação principal da gaveta. */
/* Só "Abrir quadro" é a ação principal. Painel do Líder, Painéis e Sair são
   atalhos — todos em roxo brigariam por atenção e nenhum venceria. */
/* ── AS AÇÕES DO LÍDER TAMBÉM SÃO BARRAS ───────────────────────────────
   Elas eram branco a 6% sem borda: sobre o fundo quase preto da gaveta isso
   desaparece, e "Painel Corporativo", "Painéis" e "Adicionar membro" liam como
   texto centralizado — dava para não perceber que eram clicáveis.

   A primeira correção deu superfície e CONTORNO — e parou aí, com o argumento
   de que "barra visível não é a mesma coisa que barra cheia": uma hierarquia
   que ninguém pediu, respondendo "administrar o grupo é secundário" a quem
   tinha pedido barras coloridas iguais às que já existem. Não eram iguais:
   eram contorno translúcido, e sobre o fundo quase preto continuavam sumindo.

   Agora são BARRA CHEIA, como as de baixo.

   O índigo é mais fundo que o dos botões de ação (#6366f1). Mesma família,
   então elas pertencem ao mesmo conjunto de barras; mais escuro, então as
   três se leem como um bloco só — administrar o grupo — sem disputar o olho
   com "Conversa" e "Abrir quadro", que são o que se faz todo dia. */
.sg-gv-sec{background:#4338ca!important;color:#fff!important;border:0!important;
  /* Juntas, e não espalhadas: as três são do mesmo assunto — administrar o
     grupo. Com os 20px de margem do botão base, cada uma parecia de uma
     seção diferente. */
  margin-top:8px!important;margin-bottom:0!important;}
/* A primeira delas abre o bloco, e aí sim a distância maior separa do que vem
   acima. `:first-of-type` não serve: nem sempre a de cima é a mesma — quem não
   é dono não vê Painel Corporativo nem Painéis. */
.sg-gv-bloco + .sg-gv-sec{margin-top:18px!important;}
.sg-gv-sec:hover{background:#3730a3!important;}
.sg-gv-sair{background:rgba(239,68,68,.12)!important;color:#fca5a5!important;margin-top:0!important;}
.sg-gv-sair:hover{background:rgba(239,68,68,.22)!important;}
/* ═══════════════════════════════════════════════════════════════════════
   A REGRA DE COR: azul é reversível, vermelho é definitivo
   ═══════════════════════════════════════════════════════════════════════
   Uma pergunta só decide a cor: dá para voltar atrás?

     azul      abrir o quadro, sair temporariamente — nada se perde
     vermelho  sair do grupo, excluir grupo — não tem desfazer

   Não existe meio-termo, e tentar inventar um custou caro: um botão chegou a
   ser âmbar, "o perigo do meio", e foi lido como o mais leve de todos. Cor a
   mais cria categoria que ninguém sabe ler. */
.sg-gv-remover{display:block;width:calc(100% - 28px);margin:20px 14px;padding:11px;border:0;border-radius:11px;
  background:#6366f1;font-family:Inter,sans-serif;font-size:.78rem;font-weight:600;color:#fff;cursor:pointer;
  transition:background .16s;}
.sg-gv-remover:hover{background:#5457e5;}
.sg-gv-remover.confirmando{background:#dc2626;}
/* A conversa do grupo. Verde-água em vez do índigo dos outros: ela é a única
   ação da gaveta que abre uma janela FLUTUANTE em vez de trocar de tela, e a
   cor separada evita que o olho a confunda com "Abrir quadro do grupo", logo
   abaixo — duas ações vizinhas com a mesma cara e destinos muito diferentes. */
.sg-gv-conversa{background:rgba(20,184,166,.9);}
.sg-gv-conversa:hover{background:rgba(20,184,166,1);}
/* Conversa e Abrir quadro andam juntos: são as duas portas de entrada do
   grupo, e 20px entre elas os fazia parecer de grupos diferentes. */
.sg-gv-conversa{margin-bottom:8px;}
#sg-gv-abrir{margin-top:0;}
.sg-gv-remover.confirmando:hover{background:#b91c1c;}

/* Em tela estreita a gaveta cobre a lista em vez de espremer as duas: 286px
   ao lado de uma grade de 196px não deixaria coluna nenhuma. */
@media (max-width:860px){
  .sg-bg{padding:12px;}
  .sg-lado{width:64px;padding:14px 8px 10px;}
  .sg-nav-item span:not(.sg-nav-ico),.sg-sub,.sg-eu-txt{display:none;}
  .sg-marca-logo{height:12px;}
  .sg-nav-item{justify-content:center;position:relative;}
  /* A regra acima esconde os `span` do item, e o contador de não lidas é um
     deles: some justamente o aviso, que é a parte que não podia sumir. Aqui
     ele vira um ponto no canto do ícone — sem o número, mas dizendo que há
     algo para ler, que é o essencial. */
  .sg-nav-item .sg-nav-badge{display:block;position:absolute;top:4px;right:8px;
    min-width:9px;width:9px;height:9px;padding:0;border-radius:50%;
    font-size:0;line-height:0;overflow:hidden;}
  .sg-janela{gap:0;}
  .sg-gaveta.aberta{position:absolute;right:0;top:0;bottom:0;width:min(300px,88%);z-index:2;
    margin-left:0;box-shadow:-16px 0 44px rgba(0,0,0,.65);}
}
@media (max-width:560px){
  .sg-topo{flex-wrap:wrap;}
  .sg-pills{order:3;width:100%;margin-left:0;}
  .sg-lista{grid-template-columns:1fr;}

  /* Relatado com print de iPhone 15: o "Adicionar amigo" saía pela borda
     direita, com só o "+" visível.

     A conta não fecha: 393px de tela, menos 64px da barra lateral recolhida,
     menos as margens, sobram ~290px para um campo de busca `flex:1` MAIS um
     botão com rótulo. Os dois lado a lado só cabem de tablet para cima. Aqui
     eles empilham, e o botão ocupa a linha inteira — que é onde o polegar
     acerta sem mirar. */
  .sg-ferramentas{flex-wrap:wrap;}
  .sg-busca{flex:1 1 100%;}
  .sg-add{flex:1 1 100%;justify-content:center;}

  /* O × ficava solto numa linha só dele, embaixo do subtítulo: o `flex-wrap`
     acima somado ao `order:3` das abas empurrava o fechar para o meio do
     texto. Preso no canto ele volta a ser o que é, e o título recupera a
     largura que ele ocupava. */
  .sg-topo{position:relative;padding-right:38px;}
  .sg-fechar{position:absolute;top:0;right:0;}
}
/* ── MENOS MOVIMENTO NÃO PODE VIRAR "NÃO FECHA" ────────────────────────
   Quem pediu menos movimento recebe a janela pronta: sem cascata, sem pulso.

   MAS `opacity:1!important` NÃO PODE VALER PARA A CAMADA DE FUNDO. É a
   opacidade que esconde `.sg-bg` quando ela perde a classe `.aberta` — com o
   `!important` de cima, fechar removia a classe e a camada continuava
   inteiramente visível, cobrindo a tela. O app fechava por dentro e a pessoa
   não via: a janela "não fechava" e nada mais parecia clicável, porque tudo
   estava atrás de uma tela que não sumia.

   Relatado em 10/08/2026 por um usuário que trocou de navegador e viu o mesmo
   defeito — e era esperado que visse: `prefers-reduced-motion` é ajuste do
   SISTEMA (Windows → Acessibilidade → Efeitos visuais), não do navegador.
   Não havia erro nenhum no console, o que atrasou o diagnóstico: quem procurava
   uma exceção não ia achar. A pista veio do próprio console dele, na linha em
   que o app anuncia que o sistema pediu menos movimento.

   O tratamento certo é por ESTADO: a camada aberta fica opaca, a fechada fica
   invisível — e nenhuma das duas anima. */
@media (prefers-reduced-motion:reduce){
  /* O cartão anima para dentro e para por aí: sem animação ele ficaria preso
     invisível, então aqui o `opacity:1` é o conserto, e não o defeito. */
  .sg-card{transition:none!important;animation:none!important;
    opacity:1!important;transform:none!important;}
  /* A janela se esconde junto com a camada, e por isso o forçamento vem com o
     ESTADO no seletor — o mesmo cuidado de `.sg-bg`. Hoje o pai já a esconde,
     mas escrever "sempre opaca" quando o certo é "opaca quando aberta" deixa
     uma armadilha pronta para o dia em que a janela sair de dentro da camada. */
  .sg-janela{transition:none!important;animation:none!important;}
  .sg-bg.aberta .sg-janela{opacity:1!important;transform:none!important;}
  /* A gaveta se esconde por LARGURA e por opacidade. Forçar a opacidade nela
     fechada deixava a borda de 1px aparecendo como um risco no canto. */
  .sg-gaveta{transition:none!important;animation:none!important;}
  .sg-gaveta.aberta,.sg-gaveta.aberta>*{opacity:1!important;transform:none!important;}
  .sg-gaveta:not(.aberta){opacity:0!important;}
  .sg-bg{transition:none!important;animation:none!important;}
  .sg-bg.aberta{opacity:1!important;}
  /* Sem a classe, invisível E sem captura de clique — as duas coisas, porque
     uma camada invisível que ainda recebe clique é o mesmo travamento sem o
     aviso visual. */
  .sg-bg:not(.aberta){opacity:0!important;pointer-events:none!important;}
}

/* ═══════════════════════════════════════════════════════════════════════
   CELULAR: A JANELA CABE, E O RODAPÉ DELA NÃO FICA SOB A NAVEGAÇÃO
   ═══════════════════════════════════════════════════════════════════════
   Relatado com print de iPhone: "não consigo arrastar a tela toda do social,
   meu ícone não aparece completamente".

   Duas causas somadas:

     · `.sg-janela` tem `height: min(620px, 100vh - 48px)` — altura FIXA. Num
       aparelho baixo, o que passa disso é cortado, e não há rolagem de página
       porque `.sg-bg` é `position:fixed`;
     · a navegação inferior do app é fixa por cima, e come os últimos ~62px +
       área de gestos. É exatamente onde mora o `.sg-eu`, o cartão da própria
       pessoa — daí "meu ícone não aparece completamente".

   A janela passa a ocupar o que sobra DEPOIS da navegação, e a barra lateral
   ganha rolagem própria: sem ela, o cartão de perfil continuaria fora de
   alcance em telas curtas mesmo com a janela no lugar certo. */
@media (max-width:768px){
  .sg-bg{
    padding:8px 8px calc(8px + var(--mb-nav-h, 62px) + env(safe-area-inset-bottom, 0px));
    align-items:stretch;
  }
  .sg-janela{ height:100%; max-height:100%; }
  /* A coluna lateral rola por dentro. `min-height:0` é o que permite isso:
     sem ele, um filho flex se recusa a encolher abaixo do próprio conteúdo e
     a rolagem nunca chega a existir. */
  .sg-lado{ overflow-y:auto; min-height:0; -webkit-overflow-scrolling:touch; }
  /* O cartão do perfil para de ser empurrado para fora: ele fecha a coluna e
     ganha uma folga que o separa da borda. */
  .sg-eu{ margin-top:auto; padding-bottom:10px; }
}

/* ── CRIAR GRUPO, TRAVADO ────────────────────────────────────────────────
   O botão continua visível quando a conta não é Empresarial: esconder faria a
   pessoa achar que o produto não cria grupo. Roxo é a cor do plano em todo o
   resto (landing, selo da barra, painel administrativo), e o clique abre o
   convite — não um "não". */
/* `border:1px solid`, e não `border-color`: a regra base do botão é `border:0`,
   e mudar só a cor não desenha borda nenhuma. */
.sg-add.sg-add-travado{background:rgba(168,85,247,.16);
  border:1px solid rgba(168,85,247,.34);color:#d8b4fe;}
.sg-add.sg-add-travado:hover{background:rgba(168,85,247,.3);
  box-shadow:0 6px 18px rgba(168,85,247,.3);}