/* Oqora CRM · styles de la section Conversations (lot C, spécification C.2).
   Toutes les règles sont préfixées par la classe racine de la section (.s-conv) ; le fil ouvert dans le panneau de
   droite (Ma journée, setting) est rendu dans un <div class="s-conv sc-panneau"> pour hériter des mêmes règles.
   Seule crm.css (lot 0) définit des jetons :root et des règles globales (contrat H.2). */
.s-conv{ display:block; }
.s-conv .sc-cache{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; }

/* ---------------------------------------------------------------- trois zones (ordinateur) */
.s-conv .sc-ecran{ display:flex; align-items:flex-start; gap:var(--sp-4); min-width:0; }
.s-conv .sc-liste, .s-conv .sc-centre, .s-conv .sc-volet{ background:var(--surface); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); padding:var(--sp-4); min-width:0; }
.s-conv .sc-liste{ flex:0 0 330px; position:sticky; top:var(--sp-4); max-height:calc(100vh - 150px); display:flex;
  flex-direction:column; gap:var(--sp-3); }
.s-conv .sc-centre{ flex:1 1 auto; }
.s-conv .sc-volet{ flex:0 0 260px; position:sticky; top:var(--sp-4); }
.s-conv .sc-choisir{ padding:var(--sp-12) var(--sp-6); }

/* ---------------------------------------------------------------- liste */
.s-conv .sc-onglets{ display:flex; gap:4px; background:var(--bande); border-radius:var(--r-sm); padding:4px; }
.s-conv .sc-onglet{ flex:1 1 0; min-height:38px; border:0; border-radius:9px; background:none; color:var(--ink-soft);
  font-weight:650; font-size:var(--fs-sm); cursor:pointer; padding:0 var(--sp-2); }
.s-conv .sc-onglet[aria-pressed="true"]{ background:var(--surface); color:var(--ink); box-shadow:var(--sh-1); }
.s-conv .sc-puces{ display:flex; flex-wrap:wrap; gap:6px; }
.s-conv .sc-puce{ display:inline-flex; align-items:center; gap:6px; min-height:34px; border:0; border-radius:var(--r-full);
  padding:0 12px; background:var(--surface); color:var(--ink-soft); box-shadow:inset 0 0 0 1px var(--rule);
  font-size:var(--fs-sm); font-weight:650; cursor:pointer; }
.s-conv .sc-puce[aria-pressed="true"]{ background:var(--bleu-tint); color:var(--bleu); box-shadow:inset 0 0 0 1px var(--bleu); }
.s-conv .sc-puce--impossible{ color:var(--ink-faint); }
.s-conv .sc-puce svg{ width:15px; height:15px; }
.s-conv .sc-chercher .champ{ min-height:40px; }
.s-conv .sc-elements{ overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin:0 calc(-1 * var(--sp-2));
  padding:0 var(--sp-2); min-height:120px; }
.s-conv .sc-attente{ padding:var(--sp-4); }
.s-conv .sc-element{ flex:none; display:flex; gap:var(--sp-3); align-items:flex-start; width:100%; min-height:var(--tap); text-align:left;
  border:0; background:none; border-radius:var(--r-sm); padding:var(--sp-3) var(--sp-2); cursor:pointer; color:var(--ink);
  font:inherit; }
.s-conv .sc-element:hover{ background:var(--bande); }
.s-conv .sc-element--actif{ background:var(--bleu-tint); }
.s-conv .sc-element-corps{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.s-conv .sc-element-haut, .s-conv .sc-element-bas{ display:flex; align-items:baseline; gap:6px; min-width:0; }
.s-conv .sc-nom{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.s-conv .sc-element--repondre .sc-nom{ color:var(--bleu-dark); }
.s-conv .sc-pseudo{ font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.s-conv .sc-quand{ margin-left:auto; font-size:var(--fs-xs); white-space:nowrap; flex:none; }
.s-conv .sc-canal{ font-size:var(--fs-xs); flex:none; }
.s-conv .sc-extrait{ font-size:var(--fs-sm); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  min-width:0; flex:1 1 auto; }
.s-conv .sc-nonlus{ flex:none; min-width:20px; height:20px; border-radius:var(--r-full); background:var(--bleu); color:#fff;
  font-size:11px; font-weight:750; display:inline-grid; place-items:center; padding:0 6px; }
.s-conv .sc-marques{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.s-conv .sc-marque{ display:inline-flex; align-items:center; border-radius:6px; padding:2px 8px; font-size:var(--fs-xs);
  font-weight:650; background:var(--rule-soft); color:var(--ink-soft); }
.s-conv .sc-marque--ambre{ background:var(--ambre-tint); color:var(--ambre); }
.s-conv .sc-avatar{ flex:none; width:38px; height:38px; border-radius:var(--r-full); object-fit:cover; background:var(--bande); }
.s-conv .sc-avatar--initiales svg{ width:18px; height:18px; }
.s-conv .sc-avatar--initiales{ display:inline-grid; place-items:center; font-weight:750; font-size:var(--fs-sm);
  color:var(--bleu-dark); background:var(--bleu-tint); }

/* ---------------------------------------------------------------- fil */
.s-conv .sc-fil{ display:flex; flex-direction:column; gap:var(--sp-3); min-width:0; }
.s-conv .sc-fil-tete{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; min-width:0; }
.s-conv .sc-fil-qui{ flex:1 1 160px; min-width:0; }
.s-conv .sc-fil-nom{ font-size:var(--fs-lg); font-weight:800; overflow-wrap:anywhere; }
.s-conv .sc-fil-sous{ font-size:var(--fs-sm); overflow-wrap:anywhere; }
.s-conv .sc-actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.s-conv .sc-retour{ display:none; }
.s-conv .sc-properso{ display:flex; flex-direction:column; gap:var(--sp-2); background:var(--ambre-tint); border-radius:var(--r-sm);
  padding:var(--sp-3); }
.s-conv .sc-historique{ display:inline-flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-soft);
  min-height:32px; cursor:pointer; align-self:flex-start; }
.s-conv .sc-historique input{ width:18px; height:18px; }
.s-conv .sc-messages{ display:flex; flex-direction:column; gap:var(--sp-2); max-height:52vh; overflow-y:auto;
  padding:var(--sp-2) 2px; border-top:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft); }
.s-conv .sc-messages > *{ flex:none; }
.s-conv .sc-plus-anciens{ align-self:center; }
.s-conv .sc-bulle{ max-width:min(78%, 560px); border-radius:var(--r-md); padding:var(--sp-2) var(--sp-3);
  background:var(--bande); box-shadow:inset 0 0 0 1px var(--rule-soft); align-self:flex-start; min-width:0; }
.s-conv .sc-bulle--out{ align-self:flex-end; background:var(--bleu-tint); box-shadow:none; }
.s-conv .sc-bulle--auto{ background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.s-conv .sc-bulle--note{ background:var(--ambre-tint); box-shadow:none; }
.s-conv .sc-bulle--echec{ box-shadow:inset 0 0 0 1.5px var(--rouge); }
.s-conv .sc-texte{ white-space:pre-wrap; overflow-wrap:anywhere; }
.s-conv .sc-sujet{ font-weight:700; font-size:var(--fs-sm); margin-bottom:2px; overflow-wrap:anywhere; }
.s-conv .sc-meta{ font-size:var(--fs-xs); margin-top:4px; }
.s-conv .sc-echec{ color:var(--rouge); font-weight:700; }
.s-conv .sc-photo{ max-width:220px; max-height:260px; border-radius:var(--r-sm); margin-bottom:4px; }
.s-conv .sc-appel{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-2); align-self:center; font-size:var(--fs-sm);
  color:var(--ink-soft); background:var(--bande); border-radius:var(--r-full); padding:4px 12px; }
.s-conv .sc-appel--manque{ color:var(--rouge); background:var(--rouge-tint); }
.s-conv .sc-appel-texte{ display:inline-flex; align-items:center; gap:6px; }
.s-conv .sc-appel svg{ width:15px; height:15px; }
.s-conv .sc-audio audio{ max-width:260px; height:36px; }
.s-conv .sc-activite{ align-self:center; font-size:var(--fs-xs); text-align:center; }
.s-conv .sc-heure{ font-size:var(--fs-xs); }
.s-conv .sc-erreur{ color:var(--rouge); font-weight:650; }

/* ---------------------------------------------------------------- zone d'écriture */
.s-conv .sc-ecriture{ display:flex; flex-direction:column; gap:var(--sp-2); }
.s-conv .sc-puces--zone .sc-puce{ min-height:36px; }
.s-conv .sc-fenetre{ display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); color:var(--ambre); font-weight:650; }
.s-conv .sc-fenetre svg{ width:16px; height:16px; }
.s-conv .sc-raison{ display:flex; flex-direction:column; gap:var(--sp-2); background:var(--bande); border-radius:var(--r-sm);
  padding:var(--sp-3); font-size:var(--fs-sm); }
.s-conv .sc-raison p{ display:flex; gap:6px; align-items:flex-start; }
.s-conv .sc-raison svg{ width:16px; height:16px; flex:none; margin-top:2px; }
.s-conv .sc-objet{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); font-weight:650; }
.s-conv .sc-message textarea{ min-height:104px; resize:vertical; line-height:1.45; }
.s-conv .sc-compteur{ display:flex; flex-direction:column; gap:4px; font-size:var(--fs-sm); color:var(--ink-soft); }
.s-conv .sc-compteur--alerte [data-compteur-texte]{ color:var(--ambre); font-weight:650; }
.s-conv .sc-remplacer{ align-self:flex-start; }
.s-conv .sc-apercu:empty{ display:none; }
.s-conv .sc-apercu{ background:var(--bande); border-radius:var(--r-md); padding:var(--sp-4); }
.s-conv .sc-ecriture-actions{ justify-content:flex-end; }

/* ---------------------------------------------------------------- volet fiche */
.s-conv .sc-volet-titre{ font-size:var(--fs-md); font-weight:800; margin-bottom:var(--sp-3); }
.s-conv .sc-volet-liste{ margin:0 0 var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2); }
.s-conv .sc-volet-ligne dt{ font-size:var(--fs-xs); color:var(--ink-faint); font-weight:650; }
.s-conv .sc-volet-ligne dd{ margin:0; overflow-wrap:anywhere; }
.s-conv .sc-volet-actions{ display:flex; flex-direction:column; gap:var(--sp-2); }

/* ---------------------------------------------------------------- dans le panneau de droite */
.s-conv.sc-panneau .sc-messages{ max-height:none; overflow:visible; }
.s-conv.sc-panneau .sc-retour--panneau{ display:none; }

/* ---------------------------------------------------------------- écrans plus étroits */
@media (max-width:1279px){
  .s-conv .sc-volet{ display:none; }
}
@media (max-width:899px){
  .s-conv .sc-ecran{ flex-direction:column; }
  .s-conv .sc-liste{ flex:1 1 auto; width:100%; position:static; max-height:none; }
  .s-conv .sc-centre{ width:100%; }
  .s-conv .sc-ecran:not(.sc-ecran--fil) .sc-centre{ display:none; }
  .s-conv .sc-ecran--fil .sc-liste{ display:none; }
  .s-conv .sc-retour, .s-conv.sc-panneau .sc-retour--panneau{ display:inline-flex; }
  .s-conv .sc-messages{ max-height:none; overflow:visible; }
  .s-conv .sc-elements{ overflow:visible; }
}
@media (max-width:640px){
  .s-conv .sc-liste, .s-conv .sc-centre{ padding:var(--sp-3); border-radius:var(--r-md); }
  .s-conv .sc-onglet, .s-conv .sc-puce, .s-conv .sc-puces--zone .sc-puce{ min-height:var(--tap); }
  .s-conv .sc-historique{ min-height:var(--tap); }
  .s-conv .sc-ecriture-actions .btn{ flex:1 1 100%; }
  .s-conv .sc-bulle{ max-width:88%; }
  .s-conv .sc-fil-actions{ width:100%; }
  .s-conv .sc-fil-actions .btn{ flex:1 1 auto; }
}