/* Messagerie interne générique — panneau global + lanceur header. Palette Communecter (#1E56A2). */

.co-msg-launcher{position:relative;background:transparent;border:none;cursor:pointer;color:inherit;
  display:inline-flex;align-items:center;justify-content:center;padding:6px;line-height:1;}
.co-msg-launcher svg{width:22px;height:22px;}
/* Badge de non-lus générique — s'affiche sur le lanceur ET sur tout bouton `.co-msg-open`
   embarqué (dashboard, menu costum…). Le parent doit être positionné (`.co-msg-open` l'est). */
.co-msg-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:#d9534f;color:#fff;font-size:10px;font-weight:700;line-height:1;display:none;
  align-items:center;justify-content:center;font-family:inherit;box-sizing:border-box;z-index:2;}
.co-msg-badge.on{display:inline-flex;}
.co-msg-open{position:relative;}
.co-msg-launcher .co-msg-badge{top:-2px;right:-4px;}

/* Le panneau s'ancre SOUS la barre de menu fixe du site (.navbar-top ~50px, z-index 100000)
   pour ne pas être recouvert par elle. --cm-top est l'offset ; ajustable par costum si besoin. */
#coMessaging{--cm-top:50px;position:fixed;top:var(--cm-top);right:0;height:calc(100vh - var(--cm-top));
  width:390px;max-width:100vw;background:#fff;
  box-shadow:-14px 0 40px rgba(23,55,102,.16);border-left:1px solid #dde5ee;z-index:100060;
  transform:translateX(103%);transition:transform .22s ease;display:flex;flex-direction:column;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:#26333f;}
#coMessaging.open{transform:translateX(0);}
#coMessaging *{box-sizing:border-box;}

#coMessaging .cm-head{display:flex;align-items:center;gap:10px;padding:14px 15px;border-bottom:1px solid #e8eef5;
  background:linear-gradient(180deg,#fff,#f6f9fc);flex:none;}
#coMessaging .cm-head .cm-title{font-weight:700;font-size:16px;color:#26333f;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-head .cm-sub{font-size:11.5px;color:#8496a9;font-weight:400;margin-top:1px;
  display:flex;align-items:center;gap:5px;min-height:14px;}
/* Présence : point vert */
#coMessaging .cm-online{width:8px;height:8px;border-radius:50%;background:#39b36a;
  box-shadow:0 0 0 2px rgba(57,179,106,.2);display:inline-block;flex:none;}
/* « en train d'écrire » : 3 points qui rebondissent */
#coMessaging .cm-head .cm-sub .cm-typing{display:inline-flex;align-items:flex-end;gap:2px;height:10px;}
#coMessaging .cm-typing i{width:4px;height:4px;border-radius:50%;background:#1E56A2;display:inline-block;
  animation:cm-bounce 1.1s infinite ease-in-out both;}
#coMessaging .cm-typing i:nth-child(2){animation-delay:.15s;}
#coMessaging .cm-typing i:nth-child(3){animation-delay:.3s;}
@keyframes cm-bounce{0%,80%,100%{transform:translateY(0);opacity:.4;}40%{transform:translateY(-4px);opacity:1;}}
#coMessaging .cm-ico{width:32px;height:32px;border-radius:9px;border:1px solid transparent;background:transparent;
  color:#54677b;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;}
#coMessaging .cm-ico:hover{background:#eef3f9;color:#1E56A2;border-color:#e8eef5;}
#coMessaging .cm-ico svg{width:17px;height:17px;}
#coMessaging .cm-ico.primary{background:#1E56A2;color:#fff;}
#coMessaging .cm-ico.primary:hover{background:#17457f;}

#coMessaging .cm-search{padding:10px 13px;border-bottom:1px solid #e8eef5;flex:none;}
#coMessaging .cm-search input{width:100%;background:#f6f9fc;border:1px solid #dde5ee;border-radius:9px;
  padding:8px 11px;font-size:13.5px;color:#26333f;outline:none;}
#coMessaging .cm-search input:focus{border-color:#1E56A2;box-shadow:0 0 0 3px rgba(30,86,162,.12);background:#fff;}

#coMessaging .cm-body{flex:1;overflow-y:auto;min-height:0;}

/* --- Inbox --- */
#coMessaging .cm-conv{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid #eef3f9;cursor:pointer;position:relative;}
#coMessaging .cm-conv:hover{background:#f6f9fc;}
#coMessaging .cm-conv .cm-meta{flex:1;min-width:0;}
#coMessaging .cm-conv .cm-r1{display:flex;align-items:baseline;gap:8px;}
#coMessaging .cm-conv .cm-name{font-weight:650;font-size:14px;color:#26333f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-conv .cm-time{margin-left:auto;font-size:11px;color:#8496a9;flex:none;}
#coMessaging .cm-conv .cm-prev{font-size:12.5px;color:#54677b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;}
#coMessaging .cm-conv .cm-prev.unread{color:#26333f;font-weight:600;}
#coMessaging .cm-conv .cm-badge{flex:none;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:#1E56A2;
  color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-top:1px;}
#coMessaging .cm-empty{padding:40px 24px;text-align:center;color:#8496a9;font-size:13.5px;font-style:italic;}

/* --- Avatars --- */
#coMessaging .cm-av{width:40px;height:40px;border-radius:50%;flex:none;display:inline-flex;align-items:center;
  justify-content:center;color:#fff;font-weight:700;font-size:13px;overflow:hidden;background-size:cover;background-position:center;}
#coMessaging .cm-av.sm{width:30px;height:30px;font-size:11px;}
#coMessaging .cm-av.org{border-radius:11px;}
#coMessaging .cm-av img{width:100%;height:100%;object-fit:cover;}

/* --- Thread --- */
#coMessaging .cm-thread{display:flex;flex-direction:column;gap:9px;padding:15px 13px;}
#coMessaging .cm-day{align-self:center;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8496a9;
  background:#eef3f9;border:1px solid #e8eef5;padding:3px 10px;border-radius:99px;margin:3px 0;}
#coMessaging .cm-msg{display:flex;gap:8px;max-width:84%;}
#coMessaging .cm-msg.out{align-self:flex-end;flex-direction:row-reverse;}
#coMessaging .cm-msg .cm-mbody{display:flex;flex-direction:column;gap:2px;min-width:0;}
#coMessaging .cm-msg .cm-sender{font-size:11px;font-weight:700;color:#17457f;padding-left:2px;}
#coMessaging .cm-bubble{padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.45;background:#f0f4f9;
  color:#31404f;border-top-left-radius:5px;word-wrap:break-word;overflow-wrap:anywhere;white-space:pre-wrap;}
#coMessaging .cm-msg.out .cm-bubble{background:#1E56A2;color:#fff;border-top-left-radius:14px;border-top-right-radius:5px;}
#coMessaging .cm-stamp{font-size:10px;color:#8496a9;padding:0 3px;}
#coMessaging .cm-msg.out .cm-stamp{text-align:right;}

/* --- Composer --- */
#coMessaging .cm-composer{display:flex;align-items:flex-end;gap:7px;padding:11px 13px;border-top:1px solid #e8eef5;flex:none;background:#fff;}
#coMessaging .cm-composer textarea{flex:1;background:#f6f9fc;border:1px solid #dde5ee;border-radius:12px;padding:9px 12px;
  font-size:13.5px;color:#26333f;resize:none;outline:none;max-height:120px;min-height:20px;line-height:1.4;
  font-family:inherit;}
#coMessaging .cm-composer textarea:focus{border-color:#1E56A2;background:#fff;}
#coMessaging .cm-attach{width:38px;height:38px;border-radius:11px;background:transparent;color:#54677b;border:none;flex:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
#coMessaging .cm-attach:hover{background:#eef3f9;color:#1E56A2;}
#coMessaging .cm-attach svg{width:19px;height:19px;}
#coMessaging .cm-send{width:38px;height:38px;border-radius:11px;background:#1E56A2;color:#fff;border:none;flex:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
#coMessaging .cm-send:hover{background:#17457f;}
#coMessaging .cm-send:disabled{background:#b9c8dc;cursor:not-allowed;}
#coMessaging .cm-send svg{width:17px;height:17px;}

/* --- Pièces jointes en attente (au-dessus du composer) --- */
#coMessaging .cm-pending{display:none;flex-wrap:wrap;gap:8px;padding:0;flex:none;background:#fff;}
#coMessaging .cm-pending.on{display:flex;padding:10px 13px 0;}
#coMessaging .cm-pchip{position:relative;display:inline-flex;align-items:center;gap:7px;max-width:190px;
  background:#f0f4f9;border:1px solid #dde5ee;border-radius:10px;padding:5px 24px 5px 6px;}
#coMessaging .cm-pchip img{width:30px;height:30px;border-radius:6px;object-fit:cover;flex:none;}
#coMessaging .cm-pchip .cm-pico{width:30px;height:30px;border-radius:6px;flex:none;display:inline-flex;align-items:center;
  justify-content:center;background:#e7effa;color:#1E56A2;}
#coMessaging .cm-pchip .cm-pico svg{width:16px;height:16px;}
#coMessaging .cm-pchip .cm-pico.err{background:#fbe3e2;color:#d9534f;font-weight:800;}
#coMessaging .cm-pchip .cm-pname{font-size:12px;color:#54677b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-pchip.err .cm-pname{color:#d9534f;}
#coMessaging .cm-pchip .cm-prem{position:absolute;top:2px;right:5px;cursor:pointer;font-size:14px;line-height:1;color:#8496a9;}
#coMessaging .cm-pchip .cm-prem:hover{color:#26333f;}
#coMessaging .cm-pspin{width:18px;height:18px;border:2px solid #cfe0f2;border-top-color:#1E56A2;border-radius:50%;
  animation:cm-spin .7s linear infinite;flex:none;margin:6px;}
@keyframes cm-spin{to{transform:rotate(360deg);}}

/* --- Pièces jointes rendues dans une bulle --- */
#coMessaging .cm-atts{display:flex;flex-direction:column;gap:6px;margin-top:2px;}
#coMessaging .cm-msg.out .cm-atts{align-items:flex-end;}
#coMessaging .cm-att-img{display:block;max-width:220px;border-radius:12px;overflow:hidden;line-height:0;}
#coMessaging .cm-att-img img{max-width:100%;max-height:260px;object-fit:cover;display:block;}
/* Les PJ sont rendues HORS de la bulle, sur le fond blanc du panneau : le chip fichier garde
   donc un fond clair lisible même pour mes propres messages (pas de blanc-sur-blanc). */
#coMessaging .cm-att-file{display:inline-flex;align-items:center;gap:9px;max-width:250px;text-decoration:none;
  background:#f0f4f9;border:1px solid #dde5ee;border-radius:11px;padding:8px 12px;color:#31404f;}
#coMessaging .cm-msg.out .cm-att-file{background:#e7effa;border-color:#cfe0f5;color:#17457f;}
#coMessaging .cm-att-file svg{width:20px;height:20px;flex:none;color:#1E56A2;}
#coMessaging .cm-att-file:hover{border-color:#1E56A2;}
#coMessaging .cm-att-meta{display:flex;flex-direction:column;min-width:0;}
#coMessaging .cm-att-n{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-att-s{font-size:10.5px;opacity:.7;}

/* --- Compose / picker --- */
#coMessaging .cm-picker{padding:14px;display:flex;flex-direction:column;gap:13px;}
#coMessaging .cm-hint{background:#eef3f9;border:1px solid #dde5ee;border-radius:9px;padding:9px 11px;font-size:12px;color:#54677b;}
#coMessaging .cm-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#54677b;margin:0 0 6px;}

/* Champ « À : » — jetons + saisie inline dans un seul cadre, résultats en dropdown */
#coMessaging .cm-tofield-wrap{position:relative;}
#coMessaging .cm-tofield{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:7px 9px;
  border:1px solid #dde5ee;border-radius:11px;background:#f6f9fc;transition:border-color .15s,box-shadow .15s,background .15s;}
#coMessaging .cm-tofield.focus{border-color:#1E56A2;background:#fff;box-shadow:0 0 0 3px rgba(30,86,162,.12);}
#coMessaging .cm-recsearch{flex:1;min-width:130px;border:none;background:transparent;outline:none;
  font-size:13.5px;color:#26333f;padding:3px 2px;font-family:inherit;}
#coMessaging .cm-chip{display:inline-flex;align-items:center;gap:6px;background:#e7effa;color:#17457f;border-radius:99px;
  padding:3px 8px 3px 4px;font-size:12.5px;font-weight:600;max-width:100%;}
#coMessaging .cm-chip .cm-chip-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-chip .cm-x{cursor:pointer;font-size:15px;line-height:1;opacity:.6;flex:none;}
#coMessaging .cm-chip .cm-x:hover{opacity:1;}
#coMessaging .cm-gname{width:100%;background:#f6f9fc;border:1px solid #dde5ee;border-radius:10px;padding:9px 12px;
  font-size:13px;color:#26333f;outline:none;}
#coMessaging .cm-gname:focus{border-color:#1E56A2;background:#fff;}

/* Résultats : liste déroulante ancrée sous le champ */
#coMessaging .cm-results{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:5;background:#fff;
  border:1px solid #dde5ee;border-radius:11px;box-shadow:0 12px 28px rgba(23,55,102,.16);
  max-height:290px;overflow-y:auto;}
#coMessaging .cm-results:empty{display:none;}
#coMessaging .cm-res{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid #eef3f9;cursor:pointer;}
#coMessaging .cm-res:last-child{border-bottom:none;}
#coMessaging .cm-res:hover{background:#f6f9fc;}
#coMessaging .cm-res .cm-meta{flex:1;min-width:0;}
#coMessaging .cm-res .cm-n{font-size:13.5px;font-weight:600;color:#26333f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-res .cm-t{font-size:11.5px;color:#8496a9;margin-top:1px;}
#coMessaging .cm-res .cm-t em{color:#17457f;font-style:normal;}
#coMessaging .cm-foot{padding:13px 14px;border-top:1px solid #e8eef5;display:flex;justify-content:flex-end;gap:10px;flex:none;}
#coMessaging .cm-btn{border:none;border-radius:99px;padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
#coMessaging .cm-btn.ghost{background:transparent;border:1px solid #dde5ee;color:#54677b;}
#coMessaging .cm-btn.solid{background:#1E56A2;color:#fff;}
#coMessaging .cm-btn.solid:disabled{background:#b9c8dc;cursor:not-allowed;}

#coMessaging .cm-loading{padding:30px;text-align:center;color:#8496a9;font-size:13px;}

/* --- Détails du groupe --- */
#coMessaging .cm-gdetails{padding:14px;display:flex;flex-direction:column;gap:18px;}
#coMessaging .cm-gsec{display:flex;flex-direction:column;}
#coMessaging .cm-gname-row{display:flex;gap:8px;}
#coMessaging .cm-gname-edit{flex:1;background:#f6f9fc;border:1px solid #dde5ee;border-radius:10px;padding:9px 12px;
  font-size:13.5px;color:#26333f;outline:none;}
#coMessaging .cm-gname-edit:focus{border-color:#1E56A2;background:#fff;}
#coMessaging .cm-gname-save{flex:none;padding:9px 16px;}
#coMessaging .cm-gparts{display:flex;flex-direction:column;border:1px solid #e8eef5;border-radius:11px;overflow:hidden;}
#coMessaging .cm-gpart{display:flex;align-items:center;gap:11px;padding:9px 12px;border-bottom:1px solid #eef3f9;}
#coMessaging .cm-gpart:last-child{border-bottom:none;}
#coMessaging .cm-gp-meta{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
#coMessaging .cm-gp-n{font-size:13.5px;font-weight:600;color:#26333f;}
#coMessaging .cm-gp-n em{color:#8496a9;font-weight:400;font-style:normal;}
#coMessaging .cm-gp-tag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:#17457f;background:#e7effa;border-radius:99px;padding:2px 8px;}
#coMessaging .cm-gp-tag.org{color:#8a5a1b;background:#f6ecdb;}
#coMessaging .cm-premove{width:28px;height:28px;flex:none;color:#b3435f;}
#coMessaging .cm-premove:hover{background:#fbe3e2;color:#d9534f;border-color:#f3c9c9;}
#coMessaging .cm-premove svg{width:15px;height:15px;}
#coMessaging .cm-gadd-search{width:100%;background:#f6f9fc;border:1px solid #dde5ee;border-radius:10px;padding:9px 12px;
  font-size:13.5px;color:#26333f;outline:none;}
#coMessaging .cm-gadd-search:focus{border-color:#1E56A2;background:#fff;}
#coMessaging .cm-gresults{margin-top:8px;}
#coMessaging .cm-gresults:empty{display:none;}
#coMessaging .cm-gresults .cm-res, #coMessaging .cm-gres{display:flex;align-items:center;gap:11px;padding:9px 10px;
  border:1px solid #eef3f9;border-radius:10px;margin-bottom:6px;cursor:pointer;}
#coMessaging .cm-gres:hover{background:#f6f9fc;border-color:#dde5ee;}
#coMessaging .cm-gres .cm-meta{flex:1;min-width:0;}
#coMessaging .cm-gres .cm-n{font-size:13.5px;font-weight:600;color:#26333f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#coMessaging .cm-gres .cm-t{font-size:11.5px;color:#8496a9;margin-top:1px;}
#coMessaging .cm-gres .cm-t em{color:#17457f;font-style:normal;}
#coMessaging .cm-gactions{gap:9px;}
#coMessaging .cm-leave,#coMessaging .cm-del-conv{width:100%;color:#d9534f;border-color:#f0cfcf;}
#coMessaging .cm-leave:hover,#coMessaging .cm-del-conv:hover{background:#fbe3e2;}

/* Corbeille sur une ligne de l'inbox (visible au survol) */
#coMessaging .cm-conv-del{position:absolute;top:50%;right:9px;transform:translateY(-50%);width:32px;height:32px;
  border:none;border-radius:8px;background:#fff;color:#b3435f;cursor:pointer;display:none;
  align-items:center;justify-content:center;box-shadow:-14px 0 12px 4px rgba(255,255,255,.95);}
#coMessaging .cm-conv:hover .cm-conv-del{display:inline-flex;}
#coMessaging .cm-conv-del:hover{background:#fbe3e2;color:#d9534f;}
#coMessaging .cm-conv-del svg{width:16px;height:16px;}

@media (max-width:480px){ #coMessaging{width:100vw;} }