/* Friends page styles */

.friends-page {
  padding: 36px 64px 64px;
  max-width: 800px;
}

.friends-page h1 { margin-bottom: 24px; }

.friends-add-card {
  margin-bottom: 24px;
}
.friends-add-card h3 { margin-bottom: 12px; }

.friends-search-row {
  display: flex;
  gap: var(--space-3);
}
.friends-search-row .input { flex: 1; }

#search-results {
  margin-top: 12px;
}

.friends-section {
  margin-bottom: 24px;
}
.friends-section h3 { margin-bottom: 12px; }

.friends-section .bb-friend-row,
.friends-add-card .bb-friend-row,
#search-results .bb-friend-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
}
.friends-section .bb-friend-row:last-child,
.friends-add-card .bb-friend-row:last-child,
#search-results .bb-friend-row:last-child {
  border-bottom: none;
}

.bb-friend-row .btn {
  margin-left: auto;
  flex: none;
}

@media (max-width: 768px) {
  .friends-page { padding: 24px 28px 48px; }
}
@media (max-width: 480px) {
  .friends-page { padding: 20px 18px 40px; }
  .friends-search-row { flex-direction: column; }
}