/* ══ SOCLE — LE FIL D'UNE CONVERSATION, EN BULLES ══════════════════════════
   Partagé par la boîte partagée (comptoir) et l'onglet « Échanges » d'une
   affaire (airfact), comme `ticket-row.js` : deux écrans, un seul fichier.

   L'axe est « nous / eux ». Mesuré le 13-09-2026 : 95,8 % des fils n'ont qu'UN
   interlocuteur externe — séparer le client de l'architecte résoudrait un
   problème à 4 %, et demanderait une information de rôle qu'on n'a pas. Le
   multi-parties est porté par le NOM sur chaque bulle.

   ⚠ PAS DE DÉCOR DE MESSAGERIE — ni queue de bulle, ni avatar par ligne.
   83,6 % des fils n'ont qu'UN message : une messagerie qui n'en affiche qu'un
   a l'air cassée. La forme doit savoir n'être pas encore une conversation. */

.cfil {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.cfil-ligne { display: flex; }
.cfil-ligne.is-eux  { justify-content: flex-start; }
.cfil-ligne.is-nous { justify-content: flex-end; }

.cfil-bulle {
    /* Jamais toute la largeur : c'est l'ASYMÉTRIE qui dit le côté. Une bulle
       pleine largeur des deux côtés rendrait l'alignement illisible. */
    max-width: 78%;
    min-width: 0;
    padding: .5rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}
/* « Nous » se distingue par une teinte de FOND, pas par une couleur d'encre :
   le texte d'un mail doit rester lisible quel que soit son côté. */
.cfil-ligne.is-nous .cfil-bulle {
    background: var(--state-blue-bg);
    border-color: var(--state-blue-bg);
}

.cfil-tete {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .2rem;
}
/* LE NOM PORTE LE MULTI-PARTIES. C'est lui qui distingue le client de
   l'architecte quand ils sont deux dans le fil — sans exiger qu'on sache
   lequel est lequel. */
.cfil-auteur { font-weight: 600; font-size: 12px; }
.cfil-heure  { font-size: 11px; color: var(--text-muted); }

.cfil-corps {
    font-size: 13px;
    line-height: 1.45;
    /* Le texte d'un mail porte ses propres retours à la ligne : sans
       `pre-wrap`, un message entier s'écrase en un seul paragraphe. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cfil-meta { margin-top: .3rem; font-size: 11px; color: var(--text-muted); }

.cfil-vide { margin: 0; padding: .75rem 0; color: var(--text-muted); font-size: 13px; }

/* LA NOTE DU MONOLOGUE — affichée quand toutes les bulles sont du même côté.
   Sans elle, trois messages du client sans réponse laissent croire qu'on n'a
   jamais répondu, alors qu'on a peut-être répondu ailleurs. Elle est discrète :
   c'est un fait, pas une alerte. */
.cfil-note {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .25rem 0 0;
    font-size: 11px;
    color: var(--text-muted);
}
.cfil-note svg { width: 13px; height: 13px; flex: none; }

/* ── LES PIÈCES JOINTES D'UNE BULLE, EN PUCES (15-09-2026) ──────────────────
   Rendues par `ConversationFil.pieces()` : le composant place, l'hôte donne les
   adresses et ses propres actes. Une puce = un cadre partagé (`.cfil-piece-wrap`)
   qui porte la pièce (nom + taille, cliquable) puis ses actes (télécharger,
   ranger…), séparés par un filet. Le cadre est sur l'ENVELOPPE, pas sur chaque
   morceau : les actes s'ajoutent sans que la puce change de forme. */
.cfil-pieces {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .4rem;
}

.cfil-piece-wrap {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: hidden;
    transition: border-color 120ms ease;
}
.cfil-piece-wrap:hover,
.cfil-piece-wrap:focus-within { border-color: var(--gray-300); }

.cfil-piece {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    padding: .3rem .55rem;
    font-size: 12px;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
}
a.cfil-piece:hover { color: var(--primary); }
.cfil-piece svg { flex: none; color: var(--text-secondary); }
a.cfil-piece:hover svg { color: var(--primary); }
.cfil-piece.is-inerte { cursor: default; color: var(--text-muted); }

/* Le NOM porte l'information et se tronque ; la taille est un appoint.
   ⚠ Large à dessein (mesuré le 15-09-2026 sur /jobs/61 : « MEDIATHEQUE
   QUINTAOU - CR OPC N°34 du 06-05-2026 - Planning.pdf », 19 pièces au MÊME
   préfixe) : ce qui distingue ces noms est à la FIN, et une coupe à 260 px
   rendait dix-neuf puces identiques. L'enveloppe est bornée à 100 % de la
   bulle, donc la puce ne déborde jamais — elle se coupe seulement quand la
   bulle est plus étroite que le nom. */
.cfil-piece-nom {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 460px;
}
.cfil-piece-taille {
    flex: none;
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Un ACTE de puce : icône seule, derrière un filet. `<a>` ou `<button>`, la
   même forme — un bouton natif est remis à plat ici. */
.cfil-piece-acte {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .5rem;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.cfil-piece-acte:hover:not(:disabled) { background: var(--gray-100); color: var(--primary); }
.cfil-piece-acte:disabled { cursor: progress; opacity: .6; }
/* L'acte ACCOMPLI : l'encre du vert d'état, sans aplat — la couleur appartient
   à l'exception, et « déjà rangée » en est une. */
.cfil-piece-acte.is-fait { color: var(--state-green-fg); }
.cfil-piece-acte.is-fait:hover { color: var(--state-green-fg); }