/* ═══════════════════════════════════════════════════════════════════
   Parler à mon ancêtre
   ═══════════════════════════════════════════════════════════════════ */

.anc { padding-block: var(--space-8, 2rem) var(--space-10, 2.5rem); }
.anc [hidden] { display: none !important; }

.anc h2 { font-size: var(--text-xl, 1.25rem); margin-bottom: var(--space-4, 1rem); }

.anc__solde {
  margin-bottom: var(--space-6, 1.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.anc__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8, 2rem);
}

@media (min-width: 900px) {
  .anc__grille { grid-template-columns: 260px minmax(0, 1fr); align-items: start; }
}

/* ─── Liste des ancêtres ──────────────────────────────────────────── */

.anc__liste {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-4, 1rem);
}

.anc__vide { font-size: var(--text-sm, 0.875rem); color: var(--clr-text-muted, #8A7E73); }

.anc__item {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  width: 100%;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--clr-bg-secondary, #fff);
  border: 2px solid var(--clr-border, #D4CCBF);
  border-radius: var(--radius-base, 8px);
  font: inherit;
  color: var(--clr-text, #1A1A1A);
  text-align: left;
  cursor: pointer;
}

.anc__item.is-actif { border-color: var(--clr-accent, #C7901E); background: var(--clr-accent-light, rgba(199, 144, 30, 0.12)); }

.anc__vignette {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--clr-bg-elevated, #EBE5D9);
  color: var(--clr-text-secondary, #52504C);
  font-weight: 700;
  font-size: var(--text-sm, 0.875rem);
}

.anc__item-texte { display: flex; flex-direction: column; min-width: 0; }
.anc__item-nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anc__item-dates { font-size: var(--text-xs, 0.75rem); color: var(--clr-text-muted, #8A7E73); }

/* ─── Fiche ───────────────────────────────────────────────────────── */

.anc__fiche,
.anc__panneau,
.anc__exemple {
  padding: var(--space-6, 1.5rem);
  background: var(--clr-bg-secondary, #fff);
  border: 1px solid var(--clr-border, #D4CCBF);
  border-radius: var(--radius-lg, 12px);
}

.anc__exemple { margin-bottom: var(--space-6, 1.5rem); }

.anc__champs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4, 1rem);
}

.anc__champs label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--clr-text, #1A1A1A);
}

.anc__champ-large { grid-column: 1 / -1; }

.anc__champs input,
.anc__champs select,
.anc__champs textarea,
.anc__saisie textarea {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border: 1px solid var(--clr-border-strong, #B8AFA3);
  border-radius: var(--radius-base, 8px);
  background: var(--clr-bg, #F5F0E8);
  color: var(--clr-text, #1A1A1A);
  font: inherit;
  font-weight: 400;
}

.anc__champs textarea,
.anc__saisie textarea { resize: vertical; }

.anc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  margin-top: var(--space-4, 1rem);
}

.anc__message {
  min-height: 1.2em;
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.anc__message.is-erreur { color: var(--clr-error, #C0392B); }

.anc__lien {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  color: var(--clr-primary, #1B4332);
  text-decoration: underline;
  cursor: pointer;
}

.anc__lien--danger { color: var(--clr-error, #C0392B); }

/* ─── Panneau : portrait et identité ──────────────────────────────── */

.anc__entete {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5, 1.25rem);
  align-items: flex-start;
  padding-bottom: var(--space-5, 1.25rem);
  margin-bottom: var(--space-5, 1.25rem);
  border-bottom: 1px solid var(--clr-separator, #E8E2D9);
}

.anc__portrait {
  flex-shrink: 0;
  width: 140px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-base, 8px);
  overflow: hidden;
  background: var(--clr-bg-elevated, #EBE5D9);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--clr-text-muted, #8A7E73);
  border: 4px solid #e8dcc4;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.anc__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anc__portrait:has(img) { padding: 0; }

.anc__identite { flex: 1; min-width: 220px; }
.anc__identite h2 { margin-bottom: var(--space-1, 0.25rem); }
.anc__identite p { color: var(--clr-text-secondary, #52504C); font-size: var(--text-sm, 0.875rem); }

/* ─── Conversation ────────────────────────────────────────────────── */

.anc__chat {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
  max-height: 520px;
  overflow-y: auto;
  padding-right: var(--space-1, 0.25rem);
}

.anc__exemple .anc__chat { max-height: none; }
.anc__exemple-aide { margin-top: calc(-1 * var(--space-3, 0.75rem)); margin-bottom: var(--space-4, 1rem); font-size: var(--text-sm, 0.875rem); color: var(--clr-text-muted, #8A7E73); }

.anc__bulle {
  max-width: 85%;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-radius: var(--radius-lg, 12px);
  line-height: 1.6;
  white-space: pre-line;
}

.anc__bulle--ancetre {
  align-self: flex-start;
  background: var(--clr-bg-elevated, #EBE5D9);
  font-family: 'Playfair Display', Georgia, serif;
  color: var(--clr-text, #1A1A1A);
  border-bottom-left-radius: 4px;
}

.anc__bulle--moi {
  align-self: flex-end;
  background: var(--clr-primary, #1B4332);
  color: var(--clr-text-inverse, #F5F0E8);
  border-bottom-right-radius: 4px;
}

.anc__bulle--attente { opacity: 0.7; font-style: italic; }

.anc__saisie {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: flex-end;
  margin-top: var(--space-4, 1rem);
}

.anc__saisie textarea { flex: 1; min-height: 2.8rem; }

.anc__demarrer { margin-top: var(--space-4, 1rem); }

.anc__restants {
  margin-top: var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
  color: var(--clr-text-muted, #8A7E73);
  text-align: right;
}

/* ─── Fiche détaillée ─────────────────────────────────────────────── */

.anc__form-aide {
  margin-bottom: var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.anc__groupe {
  margin: 0 0 var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem);
  border: 1px solid var(--clr-separator, #E8E2D9);
  border-radius: var(--radius-base, 8px);
}

.anc__groupe legend {
  padding: 0 var(--space-2, 0.5rem);
  font-weight: 700;
  color: var(--clr-primary, #1B4332);
}

/* ─── Historique des conversations ────────────────────────────────── */

.anc__conversations { margin-bottom: var(--space-5, 1.25rem); }

.anc__conversations-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.anc__conversations-tete h3 { font-size: var(--text-lg, 1.1rem); }

.anc__historique {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  max-height: 220px;
  overflow-y: auto;
}

.anc__conv {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  background: var(--clr-bg, #F5F0E8);
  border: 2px solid transparent;
  border-radius: var(--radius-base, 8px);
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  color: var(--clr-text, #1A1A1A);
  text-align: left;
  cursor: pointer;
}

.anc__conv.is-actif { border-color: var(--clr-accent, #C7901E); }
.anc__conv-apercu { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.anc__conv-infos { flex-shrink: 0; font-size: var(--text-xs, 0.75rem); color: var(--clr-text-muted, #8A7E73); }

.anc__conversation-tete {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--clr-separator, #E8E2D9);
  font-size: var(--text-sm, 0.875rem);
  color: var(--clr-text-secondary, #52504C);
}

.anc__actions--compact { margin-top: 0; }