/* ============================================================
 * outsend ui · support.css
 * ============================================================
 * Vue « conversation » des échanges avec le support, partagée par les DEUX
 * surfaces qui l'affichent :
 *   - Admin  → onglet Signalements (admin.html)
 *   - User   → Paramètres › Messagerie support (settings.html)
 *
 * Même markup des deux côtés (.fb-split / .fb-list / .fb-thread), donc un seul
 * jeu de styles : un écart visuel entre les deux vues serait un bug, pas une
 * variante. Les couleurs viennent des tokens de style.css.
 * ============================================================ */

.fb-split{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:16px;align-items:start;}

/* ── Colonne gauche : les fils ─────────────────────────────────────── */
.fb-list{display:flex;flex-direction:column;gap:8px;max-height:70vh;overflow-y:auto;}
.fb-item{display:flex;flex-direction:column;gap:4px;width:100%;padding:10px 12px;text-align:left;
         border:1px solid var(--border);border-radius:10px;background:var(--bg-card);cursor:pointer;
         font:inherit;color:inherit;}
.fb-item:hover{border-color:var(--accent,#0D5D5C);}
.fb-item.is-active{border-color:var(--accent,#0D5D5C);background:rgba(13,93,92,0.06);}
.fb-item-top{display:flex;align-items:center;gap:6px;}
.fb-item-mail{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.fb-item-preview{font-size:13px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;
                 display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.fb-item-bottom{display:flex;align-items:center;justify-content:space-between;gap:6px;}

/* ── Colonne droite : la conversation ──────────────────────────────── */
/* Le conteneur est stylé ICI et pas via une classe `card` du markup : sans ça,
   la vue Paramètres (qui n'avait pas `card`) affichait un panneau sans bordure
   ni padding — bulles et zone de réponse flottaient dans le vide. */
.fb-thread{border:1px solid var(--border);border-radius:12px;background:var(--bg-card);padding:16px;}
.fb-thread-inner{display:flex;flex-direction:column;gap:12px;}
.fb-thread-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
                padding-bottom:10px;border-bottom:1px solid var(--border);}
.fb-messages{display:flex;flex-direction:column;gap:10px;max-height:48vh;overflow-y:auto;padding:2px;}
.fb-msg{display:flex;}
.fb-msg-bubble{max-width:78%;padding:9px 12px;border-radius:12px;font-size:14px;
               border:1px solid var(--border);background:var(--bg-card);}
.fb-msg-meta{margin-top:5px;font-size:11px;color:var(--text-muted);}
.fb-reply{border-top:1px solid var(--border);padding-top:12px;}
.fb-reply-actions{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:8px;}

/* Le message de l'auteur courant est aligné à droite. L'axe dépend donc de la
   surface : côté admin c'est l'équipe, côté utilisateur c'est lui. D'où les
   deux modificateurs sur le conteneur plutôt qu'une règle en dur. */
/* Sélecteur sur [data-side] SEUL, sans préfixer par le conteneur : il existe
   deux dispositions (.fb-split à deux colonnes côté admin, .fb-stack à une
   colonne côté Paramètres) et l'alignement ne dépend que de QUI regarde. */
[data-side="admin"] .fb-msg-admin{justify-content:flex-end;}
[data-side="admin"] .fb-msg-admin .fb-msg-bubble{background:rgba(13,93,92,0.08);border-color:rgba(13,93,92,0.25);}
[data-side="user"] .fb-msg-user{justify-content:flex-end;}
[data-side="user"] .fb-msg-user .fb-msg-bubble{background:rgba(13,93,92,0.08);border-color:rgba(13,93,92,0.25);}

@media (max-width:820px){
  .fb-split{grid-template-columns:1fr;}
  .fb-list{max-height:none;}
}

/* ── Variante « une colonne » (Paramètres › Messagerie support) ─────────
   Le panneau des Paramètres est trop étroit pour la grille à deux colonnes :
   la conversation y tombait à ~40 % de la largeur. Ici on affiche UNE vue à
   la fois — la liste, puis la conversation en pleine largeur — avec un retour
   explicite. L'admin garde la vue à deux colonnes : sa page est large. */
.fb-stack{display:block;}
.fb-stack .fb-list{max-height:none;overflow:visible;}
.fb-stack .fb-thread{padding:0;border:0;background:none;}
.fb-stack .fb-messages{max-height:none;}
.fb-item-chevron{margin-left:auto;color:var(--text-muted);font-size:18px;line-height:1;}
.fb-back{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;margin-left:-8px;
         border:0;background:none;cursor:pointer;font:inherit;font-size:14px;
         color:var(--text-muted);border-radius:6px;}
.fb-back:hover{color:var(--ink);background:var(--bg-soft);}