/* WhatsApp dans SnapDesk, phase 3 (19 oct. 2026) — la boîte, la conversation, la bande de la fenêtre de 24 h, l'onglet
   d'un dossier. Recopié de la maquette validée (« WhatsApp dans SnapDesk ») : ses classes mq- deviennent wa-. */

/* ---- la boîte : la liste à gauche, la conversation à droite ---- */
.wa{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:16px;align-items:start}
.wa-liste{padding:0;overflow:hidden}
.wa-liste .toolbar{margin:0;padding:12px 14px;border-bottom:1px solid var(--border)}
.wa-gr{display:flex;align-items:center;gap:6px;padding:14px 16px 6px;font:var(--t-label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.wa-gr .count{font-size:10.5px}
.wa-conv{appearance:none;width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 16px;border:0;border-top:1px solid var(--border);background:none;text-align:left;font-family:inherit;color:inherit;cursor:pointer}
.wa-gr + .wa-conv,.wa-pli summary + .wa-conv{border-top:0}
.wa-conv:hover{background:var(--surface-2)}
.wa-conv.on{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--accent)}
.wa-conv:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.wa-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;font:600 13px var(--font-display);background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.wa-av.neuf{background:var(--pos-soft);color:var(--pos);border-color:transparent}
.wa-c{display:grid;gap:1px;min-width:0}
.wa-c b{font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-c small{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-c span{font-size:12.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-h{display:grid;justify-items:end;gap:5px;font-size:11.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.wa-point{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.wa-pli{border-top:1px solid var(--border)}
.wa-pli summary{display:flex;align-items:center;gap:6px;padding:12px 16px;cursor:pointer;list-style:none;font:var(--t-label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.wa-pli summary::-webkit-details-marker{display:none}
.wa-pli summary small{margin-left:auto;font:500 11.5px var(--font-body);text-transform:none;letter-spacing:0}
.wa-pli summary svg{transition:transform .15s}
.wa-pli[open] summary svg{transform:rotate(90deg)}
.wa-ignores{appearance:none;display:block;width:100%;padding:12px 16px;border:0;border-top:1px solid var(--border);background:none;text-align:left;font:500 12.5px var(--font-body);color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.wa-accueil{max-width:560px;padding:28px 28px 26px}
.wa-accueil-ic{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:var(--r-ctrl);background:var(--pos-soft);color:var(--pos);margin-bottom:14px}
.wa-accueil p{margin:6px 0 0;color:var(--ink-2);font-size:14px;line-height:1.6}

/* ---- une conversation ---- */
.wa-fil-carte{padding:0;overflow:hidden}
.wa-rien{display:grid;justify-items:center;gap:8px;padding:56px 20px;color:var(--ink-3);font-size:13.5px}
.wa-rien p{margin:0}
.wa-tete{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 18px;border-bottom:1px solid var(--border)}
.wa-id{flex:1 1 0;min-width:0;display:grid;gap:1px}
.wa-id b{font:600 15px/1.3 var(--font-display);color:var(--ink)}
.wa-id span{font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-id a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--border-strong)}
.wa-acts{display:flex;gap:2px;flex:none}
.wa-retour{display:none;align-items:center;appearance:none;border:0;background:none;padding:6px 4px 6px 0;color:var(--ink-2);cursor:pointer}
.wa-retour svg{transform:rotate(180deg)}

.wa-qui{margin:14px 18px 0;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface)}
.wa-qui p{margin:0 0 4px;font-size:13.5px;color:var(--ink)}
.wa-qui small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.wa-qui-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.wa-qui .choice-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:12px 0 0}
.wa-qui .choice{padding:12px 14px;gap:3px}
.wa-qui .choice-t{font-weight:650;font-size:13.5px;color:var(--ink)}
.wa-qui .choice-d{font-size:12px;color:var(--ink-3)}

/* la bande de la fenêtre de 24 h */
.wa-fen{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 18px;border-bottom:1px solid var(--border);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wa-qui + .wa-fen{margin-top:14px;border-top:1px solid var(--border)}
.wa-fen-t{flex:1 1 260px;min-width:0}
.wa-fen-t b{color:var(--ink);font-weight:650}
.wa-fen-b{flex:0 0 120px;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}
.wa-fen-b i{display:block;height:100%;border-radius:2px;background:var(--pos)}

/* les bulles */
.wa-messages{display:flex;flex-direction:column;gap:4px;padding:8px 18px 16px;background:var(--surface-2);max-height:min(62vh,640px);overflow-y:auto}
.wa-jour{align-self:center;margin:12px 0 6px;padding:3px 10px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.wa-avant{align-self:center;margin:10px 0 2px;font-size:12px;color:var(--ink-3);text-align:center}
.wa-avant a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.wa-b{align-self:flex-start;max-width:min(78%,440px);padding:7px 11px 5px;border-radius:var(--r-ctrl) var(--r-ctrl) var(--r-ctrl) 4px;background:var(--surface);border:1px solid var(--border);font-size:13.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.wa-b.moi{align-self:flex-end;border-radius:var(--r-ctrl) var(--r-ctrl) 4px var(--r-ctrl);background:#FDEFED;border-color:rgba(237,88,71,.2)}
html[data-theme="dark"] .wa-b.moi{background:rgba(240,128,110,.14);border-color:rgba(240,128,110,.28)}
.wa-auteur{display:block;font-size:11.5px;font-weight:650;color:var(--ink-2);margin-bottom:2px}
.wa-m{display:flex;justify-content:flex-end;align-items:center;gap:5px;margin-top:2px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.wa-coches{display:inline-flex;color:var(--ink-3)}
.wa-coches.lu{color:var(--info)}
.wa-coches svg + svg{margin-left:-7px}
.wa-echec{display:inline-flex;align-items:center;gap:3px;color:var(--neg);font-weight:600}
.wa-media{display:flex;align-items:center;gap:9px;margin:2px 0 6px;padding:8px 10px;border-radius:var(--r-ctrl);background:var(--surface-2);font-size:12.5px;color:var(--ink-2)}
.wa-b.moi .wa-media{background:rgba(255,255,255,.7)}
html[data-theme="dark"] .wa-b.moi .wa-media{background:rgba(0,0,0,.15)}
.wa-media small{display:block;color:var(--ink-3);font-size:11.5px}
.wa-pied{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--border);font-size:12.5px;color:var(--ink-3);background:var(--surface)}

/* ---- la fenêtre « Qui est +41… ? » et « Changer de dossier » ---- */
.wa-pane{margin-top:16px}
/* le numéro entier, même au téléphone : le titre passe à la ligne plutôt que de le couper */
.mhead-t.wa-titre{white-space:normal;overflow-wrap:anywhere}
.wa-ligne-sw{display:flex;align-items:flex-start;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--r-md)}
.wa-ligne-sw b{display:block;font-size:13.5px;color:var(--ink)}
.wa-ligne-sw small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.wa-lab{margin:16px 0 8px;font:var(--t-label);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3)}
.wa-lab:empty{display:none}
.wa-res{display:grid;gap:6px}
.wa-res label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-ctrl);cursor:pointer}
.wa-res label.on{border-color:var(--accent);background:rgba(237,88,71,.05)}
.wa-res input{margin-top:2px}
.wa-res b{display:block;font-size:13.5px;font-weight:650;color:var(--ink)}
.wa-res small{display:block;font-size:12.5px;color:var(--ink-3)}
.wa-coche{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;margin-top:12px;font-size:13px;color:var(--ink-2);cursor:pointer}
.wa-coche small{display:block;font-size:12px;color:var(--ink-3)}

/* ---- l'onglet WhatsApp d'un dossier : à fleur de la carte ; son point dit que le client attend ta réponse ---- */
.ctab .wa-pdot{background:var(--accent)}
.wa-dos{margin:-20px -24px}
.wa-dos .wa-messages{max-height:none}

/* ---- Phase 4 (20 oct. 2026) : écrire depuis SnapDesk — maquette « Écrire sur WhatsApp » (ses mq- deviennent wa-) ---- */
.wa-ecrire{border-top:1px solid var(--border);background:var(--surface);padding:12px 16px 14px}
.wa-ecrire textarea{width:100%;min-height:78px;resize:vertical;font:var(--champ-graisse) var(--champ-taille)/1.55 var(--font-body);padding:10px 12px;border:1.5px solid var(--border-strong);border-radius:var(--r-ctrl);background:var(--surface);color:var(--ink)}
.wa-ecrire textarea:focus{outline:none;border-color:var(--accent)}
.wa-ecrire-a{display:flex;align-items:center;gap:8px;margin-top:10px}
.wa-esp{flex:1}
.wa-ecrire-a small{font-size:12px;color:var(--ink-3)}
.wa-ferme{display:flex;align-items:center;gap:10px 12px;flex-wrap:wrap}
.wa-ferme p{flex:1 1 260px;margin:0;font-size:13px;line-height:1.5;color:var(--ink-2)}

/* une carte de la file : un brouillon (de Claude en pointillés corail), un refus, un échec — à droite, comme ce qui partira */
.wa-envoi{align-self:flex-end;width:min(82%,460px);margin:8px 0 2px;padding:10px 12px;border-radius:var(--r-ctrl) var(--r-ctrl) 4px var(--r-ctrl);border:1.5px dashed var(--border-strong);background:var(--surface)}
.wa-envoi.claude{border-color:rgba(237,88,71,.45)}
.wa-envoi.refus{border-style:solid}
.wa-envoi-t{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px;font-size:11.5px;font-weight:650;color:var(--ink-2)}
.wa-envoi-t small{font-weight:500;color:var(--ink-3)}
.wa-envoi-m{display:inline-flex;align-items:center;gap:5px;margin-bottom:4px;font-size:11.5px;color:var(--ink-3)}
.wa-envoi-x{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.wa-envoi-edit textarea{width:100%;font:var(--champ-graisse) var(--champ-taille)/1.5 var(--font-body);padding:8px 10px;border:1.5px solid var(--accent);border-radius:var(--r-ctrl);background:var(--surface);color:var(--ink);resize:vertical}
.wa-raison{margin:8px 0 0;padding:8px 10px;border-radius:var(--r-ctrl);background:var(--neg-soft);color:var(--neg);font-size:12.5px;line-height:1.5}
.wa-raison.neutre{background:var(--surface-2);color:var(--ink-2)}
.wa-envoi-a{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:10px}

/* la fenêtre « Un modèle » : les modèles et leurs valeurs à gauche, ce qui partira à droite */
.wa-volets{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px}
.wa-modeles{display:grid;gap:8px}
.wa-modeles label{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--r-ctrl);cursor:pointer}
.wa-modeles label.on{border-color:var(--accent);background:rgba(237,88,71,.05)}
.wa-modeles b{display:block;font-size:13.5px;font-weight:650;color:var(--ink)}
.wa-modeles b small{display:inline;font-weight:500}
.wa-modeles small{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.45}
.wa-valeur{margin-top:14px}
.wa-puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.wa-puce{appearance:none;border:1px solid var(--border-strong);background:var(--surface);border-radius:99px;padding:3px 10px;font:500 12px var(--font-body);color:var(--ink-2);cursor:pointer}
.wa-puce:hover{border-color:var(--ink-3);color:var(--ink)}
.wa-apercu{background:var(--surface-2);border-radius:var(--r-ctrl);padding:14px;display:flex;flex-direction:column}
.wa-apercu .wa-b{max-width:100%}
.wa-trou{padding:0 3px;border-radius:4px;background:var(--warn-soft);color:var(--warn);font-weight:600}
.wa-verdict{display:flex;gap:8px;align-items:flex-start;margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wa-verdict b{color:var(--ink)}
.wa-verdict svg{flex:none;margin-top:2px;color:var(--pos)}
.wa-verdict.non svg{color:var(--neg)}
.wa-sources{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-bottom:16px}
.wa-sources .choice{padding:12px 14px;gap:3px}
.wa-sources .choice-t{font-weight:650;font-size:13.5px;color:var(--ink)}
.wa-sources .choice-d{font-size:12px;color:var(--ink-3)}
.wa-sync{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;font-size:12.5px;color:var(--ink-3)}
.wa-liste-m .list-row{align-items:flex-start}
.wa-liste-m .list-row-s{white-space:normal}

/* ---- au téléphone : une chose par écran — la liste, ou la conversation avec son retour ---- */
@media(max-width:760px){
  .wa{grid-template-columns:minmax(0,1fr)}
  .wa:not(.ouvert) .wa-fil-carte{display:none}
  .wa.ouvert .wa-liste{display:none}
  .wa-retour{display:inline-flex}
  .wa-tete{padding:10px 12px}
  .wa-acts .wa-pc{display:none}
  .wa-qui{margin:12px 12px 0}
  .wa-qui-a .btn{flex:1 1 100%;justify-content:center;min-height:44px}
  .wa-qui .choice-grid{grid-template-columns:minmax(0,1fr)}
  .wa-fen{padding:10px 12px}
  .wa-fen-b{flex-basis:100%}
  .wa-messages{padding:6px 12px 14px;max-height:none}
  .wa-b{max-width:88%}
  .wa-pied{padding:12px}
  .wa-dos{margin:-16px}
  .wa-ecrire{padding:12px}
  .wa-ecrire-a{flex-wrap:wrap}
  .wa-ecrire-a .btn-primary,.wa-ferme .btn{flex:1 1 100%;justify-content:center;min-height:44px}
  .wa-envoi{width:92%}
  .wa-envoi-a .btn{flex:1 1 auto;justify-content:center}
  .wa-volets,.wa-sources{grid-template-columns:minmax(0,1fr)}
}

/* ---- les accusés du client (30 oct. 2026) : une réaction sur le message qu'elle vise, un message supprimé ---- */
.wa-b{position:relative}
.wa-b.wa-avec-reac{margin-bottom:12px}
.wa-reac{position:absolute;bottom:-12px;right:10px;display:inline-flex;gap:2px;padding:1px 6px;border-radius:99px;background:var(--surface);border:1px solid var(--border);font-size:13px;line-height:18px;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.wa-b.moi .wa-reac{right:auto;left:10px}
.wa-suppr{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-style:italic;color:var(--ink-3)}
.wa-suppr .wa-m{flex:1 1 100%}
.wa-reac-seule{align-self:center;font-size:12px;color:var(--ink-3)}

/* ---- La fenêtre d'un modèle (30 oct. 2026 — maquette « Envoyer un modèle WhatsApp », « 1 reco … 6 reco ») : les deux
   volets de la fenêtre d'un e-mail (courriel-envoi.css : .crl-volets, .crl-form, .crl-vue), le modèle et ses valeurs à
   gauche, la conversation comme sur son téléphone à droite. Ses classes `mq-` y deviennent `wa-`. ---- */
.wa-mvide{padding:22px 24px}
.crl-form .wa-lab{margin:0 0 8px}
/* une carte par message, la paire tu / vous en une seule */
.wa-mods{display:grid;gap:8px}
.wa-mod{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 12px;border:1.5px solid var(--border);border-radius:var(--r-ctrl);background:var(--surface);cursor:pointer;text-align:left}
.wa-mod:hover{border-color:var(--border-strong)}
.wa-mod:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wa-mod.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
.wa-mod .pick{margin-top:2px;pointer-events:none}
.wa-mod b{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13.5px var(--font-body);color:var(--ink)}
.wa-mod small{font-size:12.5px;color:var(--ink-3);line-height:1.45;margin-top:2px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wa-forme{flex:none}
.wa-forme button{padding:4px 10px;font-size:12px}
.wa-sync{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px;font-size:12px;color:var(--ink-3)}
.wa-sync .t-link-muted{font-size:12px}
/* les valeurs : un nom, l'exemple déposé chez Meta, la valeur posée, des puces */
.wa-vals{display:grid;gap:12px}
.wa-val{margin:0}
.wa-val label{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wa-val label code{font:600 11.5px ui-monospace,monospace;color:var(--ink-3);background:var(--surface-2);border-radius:5px;padding:1px 5px}
.wa-val label small{margin-left:auto;font-size:11.5px;font-weight:500;color:var(--ink-3)}
/* son accord, dans la même fenêtre */
.wa-acc{border:1.5px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:var(--r-ctrl);padding:14px;background:color-mix(in srgb,var(--accent) 4%,var(--surface))}
.wa-acc h4{margin:0 0 4px;font:600 14px 'Switzer',sans-serif;color:var(--ink)}
.wa-acc > p{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.wa-acc .choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.wa-acc .choice{padding:9px 11px}
.wa-acc .field{margin:0}
.wa-acc-coche{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:12.5px;line-height:1.45;color:var(--ink-2);cursor:pointer}
.wa-acc-coche b{color:var(--ink)}
/* l'aperçu : la conversation telle que le client la voit sur son téléphone (les couleurs de WhatsApp) */
.wa-tel{border:1px solid var(--border);border-radius:22px;overflow:hidden;background:var(--surface);max-width:400px;width:100%;margin:0 auto;box-shadow:0 10px 30px -18px rgba(0,0,0,.35)}
.wa-tel-tete{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#F6F5F3;border-bottom:1px solid var(--border)}
.wa-tel-av{width:34px;height:34px;border-radius:50%;background:#1D2026;display:grid;place-items:center;flex:none}
.wa-tel-av i{width:12px;height:12px;border-radius:50%;background:#ED5847}
.wa-tel-tete b{display:block;font:600 13.5px 'Switzer',sans-serif;color:#111B21}
.wa-tel-tete small{display:flex;align-items:center;gap:4px;font-size:11.5px;color:#667781}
.wa-tel-fil{padding:14px 12px 18px;min-height:230px;display:flex;flex-direction:column;gap:6px;background:#EFEAE2;background-image:radial-gradient(rgba(0,0,0,.035) 1px,transparent 1px);background-size:14px 14px}
.wa-tel-jour{align-self:center;font-size:11px;color:#54656F;background:#fff;border-radius:var(--r-ctrl);padding:3px 9px;box-shadow:0 1px .5px rgba(0,0,0,.13)}
.wa-tel-b{align-self:flex-start;max-width:88%;background:#fff;border-radius:2px var(--r-ctrl) var(--r-ctrl) var(--r-ctrl);padding:7px 9px 5px;font-size:13.5px;line-height:1.45;color:#111B21;box-shadow:0 1px .5px rgba(0,0,0,.13);overflow-wrap:anywhere}
.wa-tel-lien{color:#027EB5}
.wa-tel-h{display:block;text-align:right;font-size:10.5px;color:#667781;margin-top:2px}
.wa-tel-pied{padding:8px 12px;background:#F6F5F3;border-top:1px solid var(--border);font-size:11.5px;color:#667781;text-align:center}
.wa-verdicts{display:grid;gap:6px}
.wa-verdicts .wa-verdict{margin:0}
.wa-verdict.info svg{color:var(--ink-3)}
.wa-verdict.attention svg{color:var(--warn)}
@media(max-width:620px){
  .wa-acc .choice-grid{grid-template-columns:minmax(0,1fr)}
  .wa-mod{grid-template-columns:18px minmax(0,1fr)}
  .wa-forme{grid-column:2}
}