/* B3 tâche 048 — AC35.1 / AC35.2. « Signaler ce fil » et le panneau qui
   s'ouvre dessous, en bas du volet de contexte de la messagerie V3.

   Une seule feuille pour les deux messageries : le partiel est partagé, ses
   classes aussi. Les variables (`--line`, `--ink-*`, `--red`) viennent de
   `.page-messages`, qui porte les deux écrans ; rien n'est redéfini ici.

   POURQUOI DANS LE VOLET et pas dans l'en-tête du fil : sous 760 px, la feuille
   V3 replie l'en-tête sur quatre éléments et cache tout le reste
   (`messagerie_v3.css:1599`, « display:none !important »). Un bouton posé
   là-haut aurait été introuvable sur téléphone. Le volet, lui, devient un
   tiroir sous 1100 px et reste atteignable par l'onglet « Contexte ».

   Le patron du dépliant est celui de la confirmation de refus (#3285,
   `.pm-decline-wrap`) : un <details>, aucun JavaScript maison, et le contenu
   replié sort de la MISE EN PAGE et pas seulement de la vue — Chrome garde un
   rectangle mesurable sous un <details> fermé, ce qui avait fait déborder un
   bouton à 401 px sur un écran de 390. */

.pm-report {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #e5e1db);
  min-width: 0;
}

.pm-report > summary.pm-report-toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line, #e5e1db);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-500, #6b6660);
  transition: .14s;
}

.pm-report > summary.pm-report-toggle svg { width: 13px; height: 13px; flex: 0 0 auto; }
.pm-report > summary::-webkit-details-marker { display: none; }
.pm-report > summary::marker { content: ""; }

.pm-report > summary.pm-report-toggle:hover,
.pm-report[open] > summary.pm-report-toggle {
  border-color: var(--red, #b23a2e);
  color: var(--red, #b23a2e);
}

/* Replié : hors mise en page, pas seulement hors vue. */
.pm-report:not([open]) .pm-report-panel { display: none; }

.pm-report-panel {
  margin-top: 10px;
  padding: 13px 15px;
  border: 1px solid var(--line, #e5e1db);
  border-radius: var(--r-md);
  background: #fff;
}

.pm-report-intro {
  margin: 0 0 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-500, #6b6660);
}

/* ── Mes signalements ─────────────────────────────────────────────────────
   Le bloc n'existe que s'il y en a : aucune règle ne dessine de liste vide. */
.pm-report-mine {
  margin: 0 0 13px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--line, #e5e1db);
}

.pm-report-mine-t {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-700, #3d3833);
}

.pm-report-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-report-item {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border: 1px solid var(--red-200);
  border-radius: 10px;
  background: var(--red-50);
}

/* Retiré : la ligne reste lisible (elle n'est pas effacée) mais elle ne se lit
   plus comme une alerte en cours. */
.pm-report-item.is-withdrawn {
  border-color: var(--line, #e5e1db);
  background: #fafafa;
}

.pm-report-item-b {
  flex: 1 1 200px;
  min-width: 0;
}

.pm-report-reason {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-900, #1a1614);
}

.pm-report-meta {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-500, #6b6660);
}

.pm-report-withdraw,
.pm-report-withdraw button {
  flex: 0 0 auto;
}

.pm-report-withdraw button {
  cursor: pointer;
  padding: 7px 12px;
  border: 1px solid var(--line, #e5e1db);
  border-radius: 9px;
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-700, #3d3833);
}

.pm-report-withdraw button:hover {
  border-color: var(--ink-400, #9a938b);
  color: var(--ink-900, #1a1614);
}

/* ── Le formulaire ────────────────────────────────────────────────────── */
.pm-report-reasons {
  margin: 0 0 11px;
  padding: 0;
  border: 0;
}

.pm-report-legend {
  padding: 0;
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-700, #3d3833);
}

.pm-report-reason-opt {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 2px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-900, #1a1614);
  cursor: pointer;
}

.pm-report-reason-opt input {
  flex: 0 0 auto;
  margin: 1px 0 0;
  accent-color: var(--red, #b23a2e);
}

.pm-report-comment-l {
  display: block;
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-700, #3d3833);
}

.pm-report-comment {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--line, #e5e1db);
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
}

.pm-report-comment:focus {
  outline: none;
  border-color: var(--red, #b23a2e);
}

.pm-report-submit {
  margin-top: 11px;
}

/* 390 px — le volet est alors un tiroir de `min(380px, 92vw)`. Rien ne fixe de
   largeur ici : tout prend la place disponible, et le champ de commentaire
   reste en `box-sizing:border-box` pour que ses 100 % comptent ses bordures.
   Un test système remesure le bord droit, panneau replié ET panneau ouvert. */
@media (max-width: 760px) {
  .pm-report,
  .pm-report[open] {
    width: 100%;
  }

  .pm-report-item { align-items: flex-start; }

  .pm-report-withdraw,
  .pm-report-withdraw button,
  .pm-report-submit {
    width: 100%;
  }
}