/*
 * Modale « Amis » (iteration-2 §4.3). Système de design §2 : uniquement les
 * variables de theme.css, --radius, aucune ombre latérale ni dégradé.
 */
.friends-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: calc(var(--space-7) * 7);
}

.friends-tabs {
  display: flex;
  gap: var(--space-4);
  border-bottom: var(--border-default);
}
.friends-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-muted);
  font-size: var(--font-size-label);
  font-weight: var(--font-weight-medium);
  padding: var(--space-2) var(--space-1);
  transition: var(--transition-fast);
}
.friends-tab--active {
  color: var(--color-ink-primary);
  border-bottom-color: var(--color-amber);
}

.friends-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-height: calc(var(--space-7) * 4);
}

.friends-section__title {
  font-family: var(--font-mono);
  font-size: var(--font-size-meta);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-meta);
  color: var(--color-cyan);
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.friend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-elevated);
  border-radius: var(--radius);
}
.friend-item__name {
  color: var(--color-ink-primary);
  font-size: var(--font-size-label);
}

.friends-sep {
  border: none;
  border-top: var(--border-default);
  width: 100%;
  margin: var(--space-2) 0;
}