/* Só o necessário; todo o resto vem do global */

.friends-shell{ padding:20px; }

/* Top-right "Solicitações" */
.req-link{ display:inline-grid; grid-auto-flow:column; gap:8px; align-items:center; }
.count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 8px;
  font-size:.75rem; font-weight:700; border-radius:999px;
  background:#ef4444; color:#fff;
}

/* Ferramentas de busca */
.tools{ margin-bottom:14px; }
.search-row{ display:flex; gap:8px; align-items:center; }
.search-row .input{ flex:1; }

/* Grid de cards */
.friends-grid{
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Card de amigo */
.friend-card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--elev);
  padding:14px; display:flex; gap:12px; align-items:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.friend-card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08) }

.friend-avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--line);
}
.friend-info{ flex:1; min-width:0 }
.friend-name{ font-weight:700; margin:2px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.friend-meta{ font-size:12px; color:var(--muted) }

/* Botões de ação (ícones) */
.friend-actions{ display:flex; gap:10px }
.icon-btn{
  position:relative; width:40px; height:40px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line); background:#fff; color:var(--ink);
}
.icon-btn:hover{ background:#f9fafb }

/* Badge de não lidas no botão de chat (reaproveita "badge" global com ajustes locais) */
.icon-btn .badge{
  position:absolute; top:-6px; right:-6px;
  min-width:18px; height:18px; padding:0 6px; font-size:11px;
  display:none; /* mostrado via JS quando > 0 */
}

/* Empty state com cara de card */
.empty{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--elev); padding:24px; text-align:center; color:var(--muted);
  max-width:640px; margin:20px auto 0;
}

@media (max-width:520px){
  .friends-grid{ grid-template-columns:1fr; }
}