/* ════════════════════════════════════════════════════════════════════
   Conversation d'annotation — proposition « Compact épuré » (choix communauté)
   Avatars + rôle, fines séparations, message de l'auteur surligné.
   Partagé par reader_v2.html et chapter_detail.html.
   ════════════════════════════════════════════════════════════════════ */

/* Avatar à initiales */
.annc-av {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 0.8rem;
  color: #fff;
  font-family: var(--font-ui, 'DM Sans', system-ui, sans-serif);
  letter-spacing: 0.02em;
  user-select: none;
}
.annc-av--sm { width: 28px; height: 28px; font-size: 0.72rem; }
.annc-av--author { background: linear-gradient(135deg, #8d6e63, #5c4a3a); }
.annc-av--c0 { background: linear-gradient(135deg, #3d6b5e, #2e5347); }
.annc-av--c1 { background: linear-gradient(135deg, #2471a3, #1a567f); }
.annc-av--c2 { background: linear-gradient(135deg, #a05a8a, #7a3f68); }
.annc-av--c3 { background: linear-gradient(135deg, #b9770f, #8a5807); }
.annc-av--c4 { background: linear-gradient(135deg, #5a6f8c, #3d4f66); }
.annc-av--c5 { background: linear-gradient(135deg, #487a4e, #2f5634); }
/* Avatar avec photo de profil */
.annc-av--img { background: none !important; overflow: hidden; }
.annc-av img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }

/* En-tête de l'annotation source */
.annc-src-head { display: flex; align-items: center; gap: 8px; }
.annc-src-head .annc-name { font-weight: 600; font-size: 0.92rem; color: var(--text, #2a2520); }
.annc-src-head .annc-date { font-size: 0.75rem; color: var(--text-muted, #8a7f74); }

/* Puce « Auteur » / libellé de rôle */
.annc-chip {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--accent, #5c4a3a); color: #fff;
  padding: 2px 7px; border-radius: 6px; line-height: 1.5;
}
.annc-role { font-size: 0.7rem; color: var(--text-muted, #8a7f74); }

/* Titre de section « N réponses » */
.annc-conv-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8rem; font-weight: 600;
  color: var(--text-muted, #8a7f74);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin-bottom: 6px;
}
.annc-conv-head::after { content: ""; flex: 1; height: 1px; background: var(--border, #e8e3dc); }

/* Fil de réponses compact */
.annc-replies { display: flex; flex-direction: column; }
.annc-reply {
  display: flex; gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--border, #e8e3dc);
}
.annc-reply:last-child { border-bottom: none; }
.annc-reply__body { flex: 1; min-width: 0; }
.annc-reply__line {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 2px; flex-wrap: wrap;
}
.annc-reply__line .annc-name { font-weight: 600; font-size: 0.86rem; color: var(--text, #2a2520); }
.annc-reply__line .annc-date { font-size: 0.72rem; color: var(--text-faint, #b5aca3); margin-left: auto; }
.annc-reply__txt {
  font-family: var(--font-body, 'Cormorant Garamond', Georgia, serif);
  font-size: 0.93rem; line-height: 1.5;
  color: var(--text-mid, #4a4540);
  margin: 0; white-space: pre-wrap; overflow-wrap: anywhere;
}
/* Message de l'auteur de l'œuvre : surligné pleine largeur (bleed sur le padding du modal-body) */
.annc-reply--author {
  background: var(--accent-light, #f0ebe4);
  margin: 0 -1rem;
  padding-left: 1rem; padding-right: 1rem;
  border-bottom-color: transparent;
}

/* Zone de saisie d'une réponse */
.annc-reply-form { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; }
.annc-reply-form textarea {
  flex: 1;
  border: 1px solid var(--border-strong, #c9c0b5);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.9rem;
  font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text, #2a2520);
  background: var(--surface, #fff);
  resize: none; min-height: 44px;
}
.annc-reply-form textarea:focus {
  outline: none;
  border-color: var(--green, #3d6b5e);
  box-shadow: 0 0 0 3px var(--green-light, #eaf3f0);
}
.annc-send-btn {
  flex: none;
  background: var(--green, #3d6b5e); color: #fff;
  border: none; border-radius: 12px;
  padding: 10px 18px; align-self: stretch;
  font-weight: 600; font-size: 0.88rem; cursor: pointer;
  transition: background 0.15s;
}
.annc-send-btn:hover { background: var(--green-hover, #2e5347); }

/* ── Barre d'actions de l'annotation ── */
.annc-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 6px 0 2px;
}
.annc-act {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 0.82rem; font-weight: 600; line-height: 1.2;
  padding: 7px 13px; border-radius: 10px; cursor: pointer;
  border: 1px solid transparent; background: var(--surface, #fff);
  color: var(--text-mid, #4a4540);
  transition: background 0.15s, border-color 0.15s, color 0.15s, filter 0.15s;
  white-space: nowrap;
}
.annc-act--edit   { border-color: var(--border-strong, #c9c0b5); }
.annc-act--edit:hover { background: var(--bg-alt, #f0ede8); }
.annc-act--delete { border-color: var(--border-strong, #c9c0b5); color: var(--danger, #c0392b); }
.annc-act--delete:hover { background: var(--danger-light, #fdf0ee); border-color: var(--danger, #c0392b); }
.annc-act--ok     { background: var(--success, #2e7d52); border-color: var(--success, #2e7d52); color: #fff; }
.annc-act--ok:hover { filter: brightness(0.93); }
.annc-act--reject { background: var(--danger, #c0392b); border-color: var(--danger, #c0392b); color: #fff; }
.annc-act--reject:hover { filter: brightness(0.93); }
.annc-act--report {
  margin-left: auto; background: none; border: none;
  color: var(--text-faint, #b5aca3); font-weight: 500; font-size: 0.78rem; padding: 6px 8px;
}
.annc-act--report:hover { color: var(--danger, #c0392b); background: var(--danger-light, #fdf0ee); }

/* ── Mini-formulaire d'édition de l'annotation ── */
.annc-edit-form { margin-bottom: 8px; }
.annc-edit-form select,
.annc-edit-form textarea {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--border-strong, #c9c0b5);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
  font-size: 0.9rem; font-family: var(--font-ui, system-ui, sans-serif);
  color: var(--text, #2a2520); background: var(--surface, #fff);
}
.annc-edit-form textarea { resize: vertical; min-height: 72px; }
.annc-edit-form select:focus,
.annc-edit-form textarea:focus {
  outline: none; border-color: var(--green, #3d6b5e);
  box-shadow: 0 0 0 3px var(--green-light, #eaf3f0);
}

/* ════════════════════════════════════════════════════════════════════
   Sélecteur de type d'annotation (fenêtre de création) — barre d'icônes
   1 clic = choisir ; double-clic / lien = définir par défaut (★).
   ════════════════════════════════════════════════════════════════════ */
.annc-typebar { display: flex; gap: 7px; }
.annc-type {
  flex: 1; min-width: 0;
  aspect-ratio: 1 / 1; max-width: 70px;
  border: 1.5px solid var(--border, #e8e3dc); border-radius: 12px;
  background: var(--surface, #fff); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-mid, #4a4540); position: relative; padding: 4px;
  transition: border-color .12s, background .12s, color .12s;
  touch-action: manipulation;   /* pas de zoom au double-tap */
  -webkit-tap-highlight-color: transparent;
}
.annc-type__ic { font-size: 1.4rem; line-height: 1; }
.annc-type__nm { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.annc-type__pin { position: absolute; top: 3px; right: 4px; font-size: 0.62rem; color: var(--warning, #d68910); display: none; }
.annc-type.is-default .annc-type__pin { display: block; }

/* Couleur par type (--tc/--tcl posées par la classe t-<type>) */
.annc-type.t-note       { --tc: var(--accent, #5c4a3a);  --tcl: var(--accent-light, #f0ebe4); }
.annc-type.t-suggestion { --tc: var(--green, #3d6b5e);   --tcl: var(--green-light, #eaf3f0); }
.annc-type.t-correction { --tc: var(--danger, #c0392b);  --tcl: var(--danger-light, #fdf0ee); }
.annc-type.t-question   { --tc: var(--warning, #d68910); --tcl: var(--warning-light, #fef9ec); }
.annc-type.t-praise     { --tc: var(--success, #2e7d52); --tcl: var(--success-light, #e8f5ee); }
.annc-type:hover   { border-color: var(--tc); background: var(--tcl); color: var(--tc); }
.annc-type.is-sel  { border-color: var(--tc); background: var(--tc); color: #fff; }
.annc-type.is-sel .annc-type__pin { color: #fff; }

/* Lien « définir par défaut » — grande cible, mobile-friendly */
.annc-typebar-default {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; padding: 6px 4px;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-ui, system-ui, sans-serif);
  font-size: 0.76rem; font-weight: 600; color: var(--green, #3d6b5e);
}
.annc-typebar-default:hover:not(:disabled) { text-decoration: underline; }
.annc-typebar-default.is-default { color: var(--text-muted, #8a7f74); cursor: default; font-weight: 500; }

/* Mobile : on garde la rangée mais cibles tactiles plus généreuses */
@media (max-width: 480px) {
  .annc-typebar { gap: 5px; }
  .annc-type { border-radius: 10px; max-width: none; }
  .annc-type__ic { font-size: 1.25rem; }
  .annc-type__nm { font-size: 0.55rem; }
  .annc-typebar-default { font-size: 0.82rem; padding: 9px 4px; }
}