/* ============================================================
   Palette de couleur personnalisée : violet a la place du bleu
   Bootstrap par defaut (--bs-primary). Valeurs Tailwind "violet".
   ============================================================ */
:root,
[data-bs-theme="dark"] {
  --bs-primary: #8b5cf6;
  --bs-primary-rgb: 139, 92, 246;
  --bs-primary-text-emphasis: #c4b5fd;
  --bs-primary-bg-subtle: #2e1a47;
  --bs-primary-border-subtle: #4c2889;

  --bs-link-color: #a78bfa;
  --bs-link-color-rgb: 167, 139, 250;
  --bs-link-hover-color: #c4b5fd;
  --bs-link-hover-color-rgb: 196, 181, 253;
}

/* Boutons pleins */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #8b5cf6;
  --bs-btn-border-color: #8b5cf6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #7c3aed;
  --bs-btn-hover-border-color: #7c3aed;
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #6d28d9;
  --bs-btn-active-border-color: #6d28d9;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #8b5cf6;
  --bs-btn-disabled-border-color: #8b5cf6;
}

/* Boutons contour */
.btn-outline-primary {
  --bs-btn-color: #8b5cf6;
  --bs-btn-border-color: #8b5cf6;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #8b5cf6;
  --bs-btn-hover-border-color: #8b5cf6;
  --bs-btn-focus-shadow-rgb: 139, 92, 246;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8b5cf6;
  --bs-btn-active-border-color: #8b5cf6;
  --bs-btn-disabled-color: #8b5cf6;
  --bs-btn-disabled-border-color: #8b5cf6;
}

/* Case a cocher / bouton radio coches */
.form-check-input:checked {
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}

.form-check-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 .25rem rgba(139, 92, 246, .25);
}

/* Onglets actifs (ex: pages Likes, filtres) */
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
  color: #fff;
  background-color: #8b5cf6;
  border-color: #8b5cf6;
}

/* ============================================================
   Ajustements légers par-dessus le thème sombre Bootstrap
   ============================================================ */

#messages {
  height: 380px;
  overflow-y: auto;
}

.message-bubble {
  max-width: 75%;
  border-radius: 1rem;
  padding: .5rem .9rem;
}

.message-bubble.me {
  margin-left: auto;
  background-color: var(--bs-primary);
  color: #fff;
}

.message-bubble.other {
  margin-right: auto;
  background-color: var(--bs-secondary-bg);
}

.message-text {
  white-space: pre-wrap;
  word-break: break-word;
}

#message-input {
  resize: none;
  max-height: 140px;
  overflow-y: auto;
}

.avatar-option {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  padding: 2px;
  background-color: var(--bs-secondary-bg);
}

.avatar-option.selected {
  border-color: var(--bs-primary);
}

.profile-avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bs-secondary-bg);
}

.avatar-wrapper {
  position: relative;
}

.avatar-wrapper img {
  border-radius: 50%;
  object-fit: cover;
  background-color: var(--bs-secondary-bg);
}

.status-dot {
  position: absolute;
  top: 0;
  right: 0;
  width: 28%;
  height: 28%;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bs-body-bg);
}

.status-dot.online {
  background-color: var(--bs-success);
}

.status-dot.recent {
  background-color: var(--bs-warning);
}

/* ============================================================
   Indicateur de genre (annuaire) : fond pastel transparent
   bleu / rose / violet selon le sexe renseigné.
   ============================================================ */
.gender-card-homme {
  background-color: rgba(96, 165, 250, .10);
  border-color: rgba(96, 165, 250, .35);
}

.gender-card-femme {
  background-color: rgba(244, 114, 182, .10);
  border-color: rgba(244, 114, 182, .35);
}

.gender-card-autre {
  background-color: rgba(196, 181, 253, .10);
  border-color: rgba(196, 181, 253, .35);
}

.gender-icon-homme {
  color: #60a5fa;
}

.gender-icon-femme {
  color: #f472b6;
}

.gender-icon-autre {
  color: #c4b5fd;
}

.gender-icon-neutre {
  color: var(--bs-secondary-color);
}