/* Mise en forme légère des messages du fil : palette de couleurs + éditeur riche.
   Fichier statique servi tel quel (NON traité par le build Tailwind, contrairement à
   app.css). Chargé après app.css → les variables de thème (--color-*) restent dispo. */

/* Palette (classes whitelistées côté serveur — jamais de style brut). Lisibles sur le
   thème clair « Sage Calm ». Servent au rendu des messages ET aux pastilles de la barre. */
.msg-c-rouge     { color: #c0392b; }
.msg-c-vert      { color: #2e7d32; }
.msg-c-bleu      { color: #1565c0; }
.msg-c-orange    { color: #c2611f; }
.msg-c-violet    { color: #7b2fbf; }
.msg-c-rose      { color: #c2185b; }
.msg-c-gris      { color: #5b6470; }
.msg-c-turquoise { color: #00838f; }

/* Rendu d'un message : conserve les retours à la ligne, sans excès d'espacement. */
.msg-contenu { white-space: pre-line; }
.msg-contenu span { white-space: normal; }

/* Éditeur riche du fil. */
.msg-editeur { border: 1px solid var(--color-base-300, #d7d7cf); border-radius: .5rem; overflow: hidden; }
.msg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .125rem; padding: .25rem;
  background: var(--color-base-200, #eeeee7); border-bottom: 1px solid var(--color-base-300, #d7d7cf); }
.msg-tb { min-width: 1.75rem; height: 1.75rem; padding: 0 .375rem; border-radius: .375rem;
  font-size: .9rem; line-height: 1; background: transparent; cursor: pointer; }
.msg-tb:hover { background: rgba(0, 0, 0, .06); }
.msg-tb-sep { width: 1px; height: 1.25rem; background: var(--color-base-300, #d7d7cf); margin: 0 .25rem; }
.msg-tb[data-color] { font-weight: 700; }
.msg-tb-clear { opacity: .6; }
.msg-input { min-height: 3.25rem; max-height: 14rem; overflow-y: auto; padding: .5rem .625rem;
  font-size: .875rem; outline: none; }
.msg-input:empty::before { content: attr(aria-label); opacity: .45; }
.msg-input:focus { box-shadow: inset 0 0 0 2px rgba(46, 111, 122, .35); }

/* ── Pièces jointes : grille de vignettes + lightbox ───────────────────────── */
.pj-grille { display: flex; flex-wrap: wrap; gap: .5rem; }
.pj-tuile { width: 7rem; margin: 0; }
.pj-vignette { position: relative; display: block; width: 7rem; height: 7rem; border-radius: .5rem;
  overflow: hidden; border: 1px solid var(--color-base-300, #d7d7cf); background: var(--color-base-200, #eeeee7);
  cursor: pointer; padding: 0; }
.pj-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pj-vignette:hover { border-color: var(--color-primary, #2e6f7a); }
/* Repli (icône par extension) : montré si l'aperçu échoue ou pour les types non-image. */
.pj-ico-repli { display: none; }
.pj-vignette.pj-cassee img { display: none; }
.pj-vignette.pj-cassee .pj-ico-repli { display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; font-size: .8rem; font-weight: 700; letter-spacing: .03em;
  color: var(--color-base-content, #555); opacity: .65; }
.pj-badge { position: absolute; bottom: .25rem; right: .25rem; font-size: .6rem; font-weight: 700;
  background: rgba(0, 0, 0, .6); color: #fff; padding: 0 .25rem; border-radius: .25rem; }
.pj-legende { display: flex; align-items: center; gap: .25rem; margin-top: .25rem; }
.pj-nom { font-size: .7rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 4.75rem; color: var(--color-primary, #2e6f7a); }
.pj-taille { font-size: .6rem; opacity: .6; white-space: nowrap; }
.pj-suppr { margin-left: auto; }

/* Lightbox (grand format image), overlay plein écran maison. */
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center;
  justify-content: center; background: rgba(0, 0, 0, .85); padding: 2rem; cursor: zoom-out; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .5); border-radius: .25rem; }