/* Usa tokens do global-pages.css */
.results-shell{ padding:20px; }

/* Grid/lista de cards */
.results-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px,1fr));
  gap:14px;
}

/* Card */
.result-card{ overflow:hidden; }
.card__main{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px; border-bottom:1px solid var(--line);
}

/* bloco só com textos (sem avatar) */
.who{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.who__name{
  font-weight:800; letter-spacing:.2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.who__meta{ display:flex; align-items:center; gap:8px; color:var(--muted); flex-wrap:wrap }
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 8px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid var(--line); background:#fff;
}
.badge--age::before{ content:"🎂"; }
.dot{ opacity:.6 }

/* quando (lado direito) */
.when{ display:flex; flex-direction:column; text-align:right; gap:2px; }
.when__date{ font-weight:800 }
.when__time{ font-size:12px; color:var(--muted) }

/* Ações do card */
.card__actions{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:10px 14px;
}

/* Estados do botão principal */
.card__actions .add{
  background:var(--success); color:#fff; border:1px solid transparent;
}
.card__actions .add.pending{ background:var(--warning) }      /* “Solicitação enviada” */
.card__actions .add.friends{ background:var(--brand) }        /* “Já são amigos” */
.card__actions .add.blocked{ background:var(--danger) }       /* “Bloqueado” */
.card__actions .add:disabled{ opacity:.85; cursor:not-allowed }

/* Ações gerais */
.results-actions{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:14px;
}

/* Empty / Skeleton */
.empty{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; text-align:center; color:var(--muted);
}
.empty--error{ border-color:#fecaca; background:#fff1f2; color:#991b1b }

.skeleton{
  grid-column:1 / -1;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:14px;
}
.skeleton__line{
  height:12px;
  background:linear-gradient(90deg,#f3f4f6,#e5e7eb,#f3f4f6);
  background-size:200% 100%;
  border-radius:999px; margin:10px 0;
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:640px){
  .results-list{ grid-template-columns:1fr; }
}