/* =====================================================================
   KG-CHAT-PLUS — réactions aux messages et message épinglé (02/10/2026). Comportement : assets/js/kg-chat-plus.js.
   Chargé pour tous (index.php), après trait.css. Grammaire du site : encre, aplats, bords nets.
   ===================================================================== */

/* ---------------------------------------------------------------- la barre de survol (ordinateur) */
.ccp-survol{position:absolute;top:-30px;right:8px;z-index:4;display:flex;align-items:center;gap:1px;padding:2px;border:2px solid var(--t-bord);border-radius:10px;
  background:var(--t-carte);box-shadow:2px 2px 0 var(--t-ombre-c)}
.ccp-survol button{display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;border-radius:7px;background:none;color:var(--t-texte-2);cursor:pointer;
  font:17px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ccp-survol button:hover{background:var(--t-fond-2);color:var(--t-texte)}
.ccp-survol .ccp-sv-e:hover{transform:scale(1.15)}
.ccp-survol.bas{top:auto;bottom:-30px}
.ccp-sv-sep{width:1px;height:18px;margin:0 2px;background:var(--t-bord-doux)}
@media (hover:hover) and (pointer:fine){.ccp-actif .cc-reply-btn{display:none}}

/* ---------------------------------------------------------------- les pastilles sous un message */
.ccp-reacs{display:flex;flex-wrap:wrap;gap:4px;margin:3px 0 1px}
.ccp-r{display:inline-flex;align-items:center;gap:5px;height:25px;padding:0 8px;border:1.5px solid var(--t-bord-doux);border-radius:var(--t-r-pill);
  background:var(--t-fond-2);color:var(--t-texte);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s}
.ccp-r:hover{border-color:var(--t-bord)}
.ccp-r:active{transform:scale(.94)}
.ccp-r .ccp-e{font:15px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ccp-r .ccp-n{font:800 12px/1 var(--t-corps);font-variant-numeric:tabular-nums}
.ccp-r.moi{border-color:var(--t-bleu);background:color-mix(in srgb,var(--t-bleu) 20%,var(--t-carte))}
.ccp-r.moi .ccp-n{color:var(--t-bleu)}
[data-theme="dark"] .ccp-r.moi .ccp-n{color:#9cc4ff}
.ccp-plus{padding:0 7px;color:var(--t-texte-3)}
@media (hover:hover) and (pointer:fine){.ccp-plus{opacity:0}.cc-msg:hover .ccp-plus{opacity:1}}

/* ---------------------------------------------------------------- qui a réagi */
.ccp-qui{position:fixed;z-index:2147483100;display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:max-content;max-width:260px;padding:7px 10px;
  border:2px solid var(--t-bord);border-radius:10px;background:var(--t-carte);color:var(--t-texte);box-shadow:3px 3px 0 var(--t-ombre-c);
  font:600 12.5px/1.35 var(--t-corps);transform:translateY(-100%)}
.ccp-qui-e{font:22px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ccp-qui-t{flex:1;min-width:120px}
.ccp-qui-x{flex-basis:100%;height:28px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-rouge);color:#fff;font:800 12px/1 var(--t-corps);cursor:pointer}

/* ---------------------------------------------------------------- le sélecteur d'emoji */
.ccp-voile{position:fixed;inset:0;z-index:2147483000}
.ccp-voile-bas{display:flex;align-items:flex-end;background:rgba(10,8,20,.5)}
.ccp-picker{position:fixed;display:flex;flex-direction:column;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);background:var(--t-carte);color:var(--t-texte);
  box-shadow:5px 5px 0 var(--t-ombre-c);overflow:hidden}
.ccp-voile-bas .ccp-picker{position:relative;width:100%;height:min(64vh,520px);height:min(64dvh,520px);border-radius:var(--t-r) var(--t-r) 0 0;border-bottom:0;box-shadow:none;
  padding-bottom:env(safe-area-inset-bottom);animation:ccp-monte .18s ease-out}
@keyframes ccp-monte{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ccp-voile-bas .ccp-picker{animation:none}}
.ccp-pk-tete{flex:none;display:flex;align-items:center;gap:8px;padding:10px 10px 6px}
.ccp-pk-cherche{flex:1;display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-pill);background:var(--t-fond);color:var(--t-texte-3)}
.ccp-pk-cherche:focus-within{border-color:var(--t-bord)}
.ccp-pk-cherche input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--t-texte);font:600 14.5px/1 var(--t-corps)}
.ccp-pk-x{flex:none;display:grid;place-items:center;width:36px;height:36px;padding:0;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-carte);color:var(--t-texte);
  font:800 20px/1 var(--t-corps);cursor:pointer}
.ccp-pk-onglets{flex:none;display:flex;gap:2px;padding:0 8px 6px;overflow-x:auto;scrollbar-width:none;border-bottom:2px solid var(--t-bord-doux)}
.ccp-pk-onglets::-webkit-scrollbar{display:none}
.ccp-pk-onglets[hidden]{display:none}
.ccp-pk-onglets button{flex:none;display:grid;place-items:center;width:34px;height:32px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer;
  font:19px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;filter:grayscale(.6);opacity:.8}
.ccp-pk-onglets button:hover{background:var(--t-fond-2);filter:none;opacity:1}
.ccp-pk-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 8px 8px}
.ccp-pk-sec h4{position:sticky;top:-4px;z-index:1;margin:0;padding:6px 2px 4px;background:var(--t-carte);font:800 11.5px/1 var(--t-corps);color:var(--t-texte-3);text-transform:uppercase;letter-spacing:.04em}
.ccp-pk-sec{content-visibility:auto;contain-intrinsic-size:auto 300px}
.ccp-pk-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:1px}
.ccp-pk-grille button{display:grid;place-items:center;height:38px;padding:0;border:0;border-radius:8px;background:none;cursor:pointer;
  font:25px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.ccp-pk-grille button:hover,.ccp-pk-grille button:focus-visible{background:var(--t-fond-2);outline:0}
.ccp-pk-vide{margin:28px 10px;text-align:center;font:600 13.5px/1.4 var(--t-corps);color:var(--t-texte-2)}
.ccp-pk-charge{width:26px;height:26px;margin:40px auto;border:3px solid var(--t-bord-doux);border-top-color:var(--t-bord);border-radius:50%;animation:ccp-tourne .8s linear infinite}
@keyframes ccp-tourne{to{transform:rotate(1turn)}}
.ccp-pk-pied{flex:none;display:flex;align-items:center;gap:8px;min-height:40px;padding:4px 12px;border-top:2px solid var(--t-bord-doux);font:700 13px/1.2 var(--t-corps);color:var(--t-texte-2)}
.ccp-pk-apercu{font:24px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
@media (hover:none){.ccp-pk-pied{display:none}}

/* ---------------------------------------------------------------- téléphone : la feuille de l'appui long (comme Discord) */
.ccp-menu-voile{position:fixed;inset:0;z-index:299;background:rgba(10,8,20,.45)}
.ccp-menu-voile[hidden]{display:none}
.cc-context-menu.ccp-feuille{left:0!important;right:0!important;top:auto!important;bottom:0!important;width:100%;min-width:0;max-height:72vh;overflow-y:auto;
  border-radius:var(--t-r) var(--t-r) 0 0;border-bottom:0;box-shadow:none;padding:6px 0 calc(8px + env(safe-area-inset-bottom));animation:ccp-monte .18s ease-out}
.cc-context-menu.ccp-feuille::before{content:"";display:block;width:42px;height:5px;margin:4px auto 6px;border-radius:3px;background:var(--t-bord-doux)}
.cc-context-menu.ccp-feuille .cc-ctx-item{padding:14px 18px;font-size:15.5px}
.ccp-menu-reacs{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:4px 14px 12px;border-bottom:2px solid var(--t-bord-doux)}
.ccp-menu-reacs button{display:grid;place-items:center;aspect-ratio:1;max-height:52px;padding:0;border:2px solid var(--t-bord-doux);border-radius:50%;background:var(--t-fond-2);
  color:var(--t-texte-2);cursor:pointer;font:24px/1 "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;-webkit-tap-highlight-color:transparent}
.ccp-menu-reacs button.moi{border-color:var(--t-bleu);background:color-mix(in srgb,var(--t-bleu) 22%,var(--t-carte))}
.ccp-menu-reacs button:active{transform:scale(.92)}
.cc-context-menu:not(.ccp-feuille) .ccp-menu-reacs{grid-template-columns:repeat(7,32px);padding:6px 8px;gap:2px}
.cc-context-menu:not(.ccp-feuille) .ccp-menu-reacs button{width:32px;height:32px;font-size:18px;border-width:1.5px}

/* ---------------------------------------------------------------- le message épinglé */
.ccp-ep{flex:none;margin:6px 8px 2px;padding:7px 10px 8px;border:2px solid var(--t-bord);border-radius:12px;background:var(--t-carte);color:var(--t-texte);
  box-shadow:2px 2px 0 var(--t-ombre-c);cursor:pointer;position:relative;z-index:3}
.ccp-ep[hidden]{display:none}
.ccp-ep-tete{display:flex;align-items:center;gap:6px;font:700 11.5px/1.2 var(--t-corps);color:var(--t-texte-2)}
.ccp-ep-ico{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--t-bleu);color:#fff}
.ccp-ep-ico svg{width:13px;height:13px}
.ccp-ep-par{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccp-ep-par b{color:var(--t-texte)}
.ccp-ep-reste{flex:none;margin-left:auto;font-variant-numeric:tabular-nums;color:var(--t-texte-3)}
.ccp-ep-b{flex:none;height:24px;padding:0 9px;border:1.5px solid var(--t-bord-doux);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);
  font:800 11px/1 var(--t-corps);cursor:pointer}
.ccp-ep-b[data-ep="desepingler"]{border-color:var(--t-bord)}
.ccp-ep-x{width:24px;padding:0;font-size:15px}
.ccp-ep-msg{margin-top:5px;font:600 14px/1.4 var(--t-corps);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccp-ep.ouvert .ccp-ep-msg{white-space:normal;max-height:40vh;overflow-y:auto;overflow-wrap:anywhere}
.ccp-ep-nom{padding:0;border:0;background:none;color:var(--t-bleu);font:800 14px/1.4 var(--t-corps);cursor:pointer}
[data-theme="dark"] .ccp-ep-nom{color:#9cc4ff}
.ccp-ep-txt .cc-emote{height:22px;vertical-align:middle}