/* =====================================================================
   KG-EMOTES — le clavier d'emotes du chat du Live (02/10/2026). Comportement : assets/js/kg-emotes.js.
   Chargé APRÈS trait.css (index.php). Trois façons de s'afficher (data-mode) : « feuille » (téléphone en portrait : à la
   place du clavier, le chat au-dessus), « colonne » (paysage, plein écran maison : dans la colonne du chat), « bulle »
   (ordinateur : au-dessus de la saisie).
   ===================================================================== */

/* ------------------------------------------------ le bouton, à droite de la saisie */
.cc-emote-btn .kge-ico-clavier{display:none}
.cc-emote-btn.kge-vers-clavier .kge-ico-emote{display:none}
.cc-emote-btn.kge-vers-clavier .kge-ico-clavier{display:block}
.cc-emote-btn.kge-actif,.cc-emote-btn.kge-actif:hover{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 0 0 2px var(--t-bord)}

/* ------------------------------------------------ le panneau */
.kge{position:fixed;z-index:210;display:flex;flex-direction:column;min-height:0;overflow:hidden;background:var(--t-carte);color:var(--t-texte);
  border:var(--t-trait) solid var(--t-bord);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.kge.hidden{display:none}
.kge[data-mode="feuille"]{left:0;right:0;bottom:0;height:var(--ep-h,320px);border-width:var(--t-trait) 0 0;border-radius:18px 18px 0 0}
.kge[data-mode="colonne"]{left:auto;right:0;bottom:0;width:var(--chat-w,340px);height:var(--ep-h,220px);border-width:var(--t-trait) 0 0 var(--t-trait);border-radius:18px 0 0 0}
.kge[data-mode="bulle"]{border-radius:var(--t-r);box-shadow:4px 4px 0 var(--t-ombre-c)}   /* left, width, bottom, height : kg-emotes.js */
body.live-fs .kge{z-index:305}   /* le chat du plein écran maison est à 299 */
/* on cherche sur téléphone : le clavier monte, le panneau se pose dessus, réduit à la place qui reste (--ep-hc) */
html.ep-ouvert.ep-cherche.clavier-natif .kge[data-mode="feuille"],
html.ep-ouvert.ep-cherche.clavier-natif .kge[data-mode="colonne"]{bottom:var(--clavier-h,0px);height:var(--ep-hc,160px)}
html.clavier-anime .kge{transition:bottom var(--clavier-dur,.28s) var(--clavier-ease,ease-out),height var(--clavier-dur,.28s) var(--clavier-ease,ease-out)}
html.ep-cherche .kge-onglets{display:none}

/* l'en-tête : la recherche, ⌫, fermer */
.kge-tete{flex:none;display:flex;align-items:center;gap:8px;padding:10px 10px 8px 12px}
.kge-cherche{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);
  background:var(--t-fond);color:var(--t-texte-3);cursor:text}
.kge-cherche:focus-within{box-shadow:0 0 0 3px var(--accent)}
.kge-cherche svg{flex:none}
/* 16 px : en dessous, iOS zoome la page quand le champ prend le focus */
.kge-cherche input{flex:1;min-width:0;height:100%;padding:0;border:0;background:none;color:var(--t-texte);font:600 16px/1 var(--t-corps);outline:none;
  -webkit-appearance:none;appearance:none;-webkit-user-select:text;user-select:text}
.kge-cherche input::placeholder{color:var(--t-texte-3);opacity:1}
.kge-cherche input::-webkit-search-decoration{display:none}
.kge-btn{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:2px solid var(--t-bord);border-radius:50%;background:var(--t-carte);
  color:var(--t-texte);cursor:pointer;box-shadow:2px 2px 0 var(--t-ombre-c);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kge-btn:active{transform:translate(2px,2px);box-shadow:none}
@media (hover:hover){.kge-btn:hover{background:var(--t-carte-2)}}

/* les collections : une icône d'emote par collection ; l'onglet suit le défilement */
.kge-onglets{flex:none;display:flex;gap:4px;padding:0 10px 8px;overflow-x:auto;overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:none;
  border-bottom:2px solid var(--t-bord-doux)}
.kge-onglets::-webkit-scrollbar{display:none}
.kge-onglets:empty{display:none}
.kge-onglet{flex:none;display:grid;place-items:center;width:44px;height:38px;padding:0;border:2px solid transparent;border-radius:12px;background:none;
  color:var(--t-texte-2);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background var(--t-dur),border-color var(--t-dur)}
.kge-onglet img{width:26px;height:26px;object-fit:contain;pointer-events:none}
.kge-onglet.actif{background:var(--accent);border-color:var(--t-bord);color:var(--accent-ink)}
@media (hover:hover){.kge-onglet:not(.actif):hover{background:var(--t-carte-2)}}

/* la liste */
.kge-liste{position:relative;flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:0 8px 10px;scrollbar-width:thin;scrollbar-color:var(--t-bord-doux) transparent}
.kge-liste[hidden]{display:none}
.kge[data-mode="feuille"] .kge-liste{padding-bottom:var(--nav-relief,18px)}   /* la barre d'accueil de l'iPhone */
.kge-resultats{padding-top:8px}
.kge-sec-titre{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;padding:9px 4px 6px;
  background:var(--t-carte);font:800 12px/1.2 var(--t-corps);letter-spacing:.04em;text-transform:uppercase;color:var(--t-texte-3)}
.kge-gerer{padding:3px 9px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--accent);color:var(--accent-ink);
  font:800 11px/1 var(--t-corps);letter-spacing:0;text-transform:none;text-decoration:none}
.kge-grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:2px}
.kge-e{display:grid;place-items:center;height:46px;padding:0;border:0;border-radius:10px;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  touch-action:manipulation}
.kge-e img{width:32px;height:32px;object-fit:contain;pointer-events:none}
.kge[data-mode="bulle"] .kge-grille{grid-template-columns:repeat(auto-fill,minmax(40px,1fr))}
.kge[data-mode="bulle"] .kge-e{height:40px}
.kge[data-mode="bulle"] .kge-e img{width:28px;height:28px}
.kge-e:active{background:var(--t-carte-2)}
@media (hover:hover){.kge-e:hover{background:var(--t-carte-2)}}
.kge-e.kge-tape img{animation:kge-tape .18s ease-out}
@keyframes kge-tape{0%{transform:scale(.72)}100%{transform:none}}
.kge-vide{display:grid;place-items:center;margin:0;padding:30px 14px;text-align:center;font-weight:600;color:var(--t-texte-2)}

/* l'entrée et la sortie : comme un clavier (par le bas) sur téléphone, un léger levé sur ordinateur */
.kge.kge-glisse[data-mode="feuille"],.kge.kge-glisse[data-mode="colonne"]{animation:kge-monte .22s cubic-bezier(.25,.6,.25,1) both}
.kge.kge-glisse[data-mode="bulle"]{animation:kge-pop .14s ease-out both}
.kge.kge-sort{transform:translateY(100%);transition:transform .2s cubic-bezier(.4,0,1,1)}
@keyframes kge-monte{from{transform:translateY(100%)}to{transform:none}}
@keyframes kge-pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.kge,.kge *{animation:none!important;transition:none!important}}

/* ------------------------------------------------ le chat se pose AU-DESSUS du panneau : la saisie reste visible */
@media (max-width:900px){
  html.ep-ouvert .mobile-nav{visibility:hidden;pointer-events:none}
  /* comme avec le clavier du téléphone (trait.css) : le chat descend jusqu'en bas, recouvre la barre d'info du direct et
     garde en marge la hauteur du panneau ; le lecteur et l'en-tête ne bougent pas */
  html.ep-ouvert .chat-box[data-mode="live"]{top:calc(var(--header-h) + 56.25vw);bottom:0;padding-bottom:var(--ep-h,320px);z-index:95;background:var(--t-carte)}
}
html.ep-ouvert body.is-live-landscape .chat-box[data-mode="live"],
html.ep-ouvert body.live-fs .chat-box[data-mode="live"]{padding-bottom:var(--ep-h,220px)!important;background:var(--t-carte)}
html.ep-ouvert.ep-cherche.clavier-natif .chat-box[data-mode="live"]{padding-bottom:calc(var(--clavier-h,0px) + var(--ep-hc,160px))!important}
html.ep-anime .chat-box[data-mode="live"]{transition:top .22s cubic-bezier(.25,.6,.25,1),padding-bottom .22s cubic-bezier(.25,.6,.25,1)}

/* =====================================================================
   GIF v2 (02/10/2026) — vue GIF du panneau (kg-emotes.js), panier, feuille d'envoi, ⌫ dans la saisie,
   messages GIF dans le chat (app.js, KGChat) : texte puis GIF empilés ; « en attente d'un modérateur ».
   ===================================================================== */
/* ⌫ : dans la saisie, à droite, seulement panneau ouvert */
.cc-effacer{display:none;position:absolute;right:5px;top:50%;z-index:2;width:34px;height:34px;padding:0;place-items:center;transform:translateY(-50%);
  border:0;border-radius:50%;background:none;color:var(--t-texte-2);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.cc-effacer:active{background:var(--t-carte-2);color:var(--t-texte)}
@media (hover:hover){.cc-effacer:hover{background:var(--t-carte-2);color:var(--t-texte)}}
#ccInputWrap.kge-mode .cc-effacer{display:grid}
#ccInputWrap.kge-mode .cc-input{padding-right:42px}
/* le bouton GIF : le mot encadré par ses coins */
.kge-gif-btn{width:54px;border-radius:12px}
.kge-gif-btn svg{display:block}

/* la vue GIF remplace la vue emotes dans le même panneau */
.kge.kge-vue-gif > :not(.kge-gif){display:none!important}
.kge:not(.kge-vue-gif) > .kge-gif{display:none}
.kge-gif{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
.kge-gif-barre{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 12px 8px}
.kge-gif-sources{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
.kge-gif-sources::-webkit-scrollbar{display:none}
.kge-src{flex:none;height:30px;padding:0 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);
  font:800 12.5px/1 var(--t-corps);cursor:pointer;-webkit-tap-highlight-color:transparent}
.kge-src.actif{background:var(--accent);color:var(--accent-ink)}
.kge-src-seule{font:800 12px/1 var(--t-corps);letter-spacing:.04em;text-transform:uppercase;color:var(--t-texte-3)}
.kge-gif-prix{flex:none;display:inline-flex;align-items:center;gap:4px;font:400 16px/1 var(--t-titre);color:var(--t-texte);white-space:nowrap}
.kge-gif-prix span{font:700 12px/1 var(--t-corps);color:var(--t-texte-2)}
.kge-aura-ic{width:auto;height:17px;object-fit:contain;flex:none}
/* la grille : deux colonnes remplies tour à tour (la plus courte prend le suivant) */
.kge-gif-grille{flex:1;min-height:0;display:flex;align-items:flex-start;gap:6px;padding:8px 8px 10px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;border-top:2px solid var(--t-bord-doux)}
.kge-gif-grille > .kge-vide{flex:1}
.kge-gif-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.kge-g{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:2px solid var(--t-bord);border-radius:10px;background:var(--t-fond-2);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--t-dur) var(--t-ease)}
.kge-g img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.kge-g:active{transform:scale(.97)}
@media (hover:hover){.kge-g:hover{border-color:var(--accent)}}
/* choisi : cadre d'accent épais + son rang dans le message */
.kge-g.choisi{border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--accent)}
.kge-g-n{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:26px;height:26px;border:2px solid var(--t-bord);border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font:400 15px/1 var(--t-titre)}
.kge-g.kge-tape{animation:kge-tape .18s ease-out}
/* idées de recherche (catégories Tenor avec image, termes voisins) : une rangée qui défile */
.kge-gif-cats{flex:none;display:flex;gap:6px;padding:0 12px 8px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.kge-gif-cats::-webkit-scrollbar{display:none}
.kge-gif-cats[hidden]{display:none}
.kge-cat{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-pill);
  background:var(--t-carte);color:var(--t-texte);font:700 12.5px/1 var(--t-corps);cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.kge-cat:hover{border-color:var(--t-bord)}
.kge-cat-img{position:relative;width:96px;height:54px;padding:0;overflow:hidden;border-radius:10px;border-color:var(--t-bord);justify-content:center}
.kge-cat-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kge-cat-img span{position:relative;z-index:1;max-width:88px;padding:2px 6px;border-radius:6px;background:rgba(15,12,30,.72);color:#fff;font-size:11.5px;
  overflow:hidden;text-overflow:ellipsis}
.kge-gif-pied{flex:none;margin:0;padding:0 12px 8px;font:700 11px/1.2 var(--t-corps);color:var(--t-texte-3);text-align:right}
.kge-gif-pied:empty{display:none}
.kge[data-mode="feuille"] .kge-gif-pied{padding-bottom:var(--nav-relief,18px)}

/* le panier : au-dessus de la saisie, les GIF choisis, le prix du message */
.cc-gif-panier{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px 0;overflow-x:auto;scrollbar-width:none}
.cc-gif-panier[hidden]{display:none}
.cc-gif-panier::-webkit-scrollbar{display:none}
.cc-panier-g{position:relative;flex:none;width:58px;height:46px;border:2px solid var(--t-bord);border-radius:9px;overflow:hidden;background:var(--t-fond-2)}
.cc-panier-g img{display:block;width:100%;height:100%;object-fit:cover}
.cc-panier-g button{position:absolute;right:2px;top:2px;display:grid;place-items:center;width:22px;height:22px;padding:0;border:2px solid var(--t-bord);border-radius:50%;
  background:var(--t-carte);color:var(--t-texte);font:800 15px/1 var(--t-corps);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cc-panier-info{flex:none;display:flex;flex-direction:column;gap:2px;margin-left:2px;font:700 12px/1.2 var(--t-corps);color:var(--t-texte-2)}
.cc-panier-info b{font:400 15px/1 var(--t-titre);color:var(--t-texte)}
.cc-panier-info span{display:inline-flex;align-items:center;gap:3px;font:400 15px/1 var(--t-titre);color:var(--t-texte)}
.cc-panier-vider{flex:none;margin-left:auto;height:30px;padding:0 12px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-pill);background:none;color:var(--t-texte-2);
  font:800 12px/1 var(--t-corps);cursor:pointer}
/* le bouton d'envoi annonce qu'il emporte des GIF */
.cc-send.cc-send-gif{position:relative}
.cc-send.cc-send-gif::after{content:'GIF';position:absolute;right:-6px;top:-7px;padding:2px 4px;border:2px solid var(--t-bord);border-radius:6px;background:var(--t-carte);
  color:var(--t-texte);font:800 9px/1 var(--t-corps)}

/* la feuille d'envoi : texte, GIF, prix, validation par un modérateur */
.kge-envoi{position:fixed;inset:0;z-index:10060;display:flex;flex-direction:column;padding:14px;background:var(--t-voile,rgba(10,8,20,.55));overflow-y:auto;overscroll-behavior:contain}
.kge-envoi-carte{margin:auto;width:min(400px,100%);display:flex;flex-direction:column;gap:9px;padding:14px;border:var(--t-trait) solid var(--t-bord);border-radius:var(--t-r);
  background:var(--t-carte);color:var(--t-texte);box-shadow:4px 4px 0 var(--t-ombre-c);animation:t-entree .16s var(--t-ease) both}
@media (max-width:900px){.kge-envoi{padding:0}.kge-envoi-carte{margin:auto 0 0;width:100%;border-width:var(--t-trait) 0 0;border-radius:20px 20px 0 0;box-shadow:none;
  padding-bottom:calc(14px + var(--nav-relief,18px))}}
.kge-envoi-titre{margin:0;font:400 21px/1.1 var(--t-titre)}
.kge-envoi-texte{margin:0;padding:8px 10px;border:2px solid var(--t-bord-doux);border-radius:var(--t-r-s);background:var(--t-fond);font:600 15px/1.4 var(--t-corps);overflow-wrap:anywhere}
.kge-envoi-gifs{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-height:min(40vh,320px);overflow-y:auto}
.kge-envoi-g{display:block;width:min(200px,60%);max-height:150px;overflow:hidden;border:2px solid var(--t-bord);border-radius:10px;background:var(--t-fond-2)}
.kge-envoi-g img{display:block;width:100%;height:100%;object-fit:cover}
.kge-envoi-note{display:flex;align-items:flex-start;gap:7px;margin:0;font:600 12.5px/1.4 var(--t-corps);color:var(--t-texte-2)}
.kge-envoi-note svg{flex:none;margin-top:1px;color:var(--t-texte)}
.kge-conf-rep{margin:0;font:700 12.5px/1.3 var(--t-corps);color:var(--t-texte-2);overflow-wrap:anywhere}
.kge-conf-err{margin:0;padding:7px 10px;border:2px solid var(--t-rouge);border-radius:var(--t-r-s);font:700 13px/1.35 var(--t-corps);color:var(--t-texte)}
.kge-conf-err[hidden]{display:none}
.kge-conf-actions{display:flex;gap:8px}
.kge-conf-actions button{flex:1;min-height:46px;padding:0 12px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);font:800 14px/1 var(--t-corps);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;-webkit-tap-highlight-color:transparent}
.kge-conf-actions .kge-conf-non{flex:0 0 auto;background:var(--t-carte);color:var(--t-texte)}
.kge-conf-oui{background:var(--accent);color:var(--accent-ink);box-shadow:2px 2px 0 var(--t-ombre-c)}
.kge-conf-oui:active{transform:translate(2px,2px);box-shadow:none}
.kge-conf-oui:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.kge-conf-oui.kge-attente{opacity:.7}
.kge-conf-pied{margin:0;display:flex;flex-direction:column;gap:2px;text-align:center}
.kge-conf-pied span:first-child{font:700 12.5px/1.3 var(--t-corps);color:var(--t-texte-2)}
.kge-conf-pied span:last-child{font:600 11px/1.35 var(--t-corps);color:var(--t-texte-3);overflow-wrap:anywhere}

/* ------------------------------------------------ les messages GIF dans le chat : texte, puis les GIF empilés */
.cc-msg-gif .cc-text{display:block}
.cc-gifs{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:5px}
.cc-gif{display:block;max-width:100%;overflow:hidden;border:2px solid var(--t-bord);border-radius:10px;background:var(--t-fond-2)}
.cc-gif video,.cc-gif img{display:block;width:100%;height:100%;object-fit:cover}
/* mode Performance : image fixe, toucher pour animer */
.cc-gif:has(img.cc-gif-fixe){position:relative;cursor:pointer}
.cc-gif:has(img.cc-gif-fixe)::after{content:'GIF';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:5px 9px;border:2px solid var(--t-bord);
  border-radius:var(--t-r-pill);background:var(--accent);color:var(--accent-ink);font:800 12px/1 var(--t-corps)}
/* message GIF dont la fiche n'est pas (encore) arrivée */
.cc-gif-attente{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:4px 10px;border:2px dashed var(--t-bord-doux);border-radius:var(--t-r-pill);
  font:700 13px/1.2 var(--t-corps);color:var(--t-texte-2)}
.cc-gif-perdu{border-style:solid;opacity:.75}
/* mon message qui attend un modérateur (seul l'expéditeur le voit) */
.cc-msg.cc-msg-modo{margin:4px 0;border:2px dashed var(--t-bord-doux);border-radius:10px;background:color-mix(in srgb,var(--t-carte-2) 60%,transparent)}
.cc-msg.cc-msg-modo .cc-gifs{opacity:.85}
.cc-attente{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:6px;font:700 12.5px/1.3 var(--t-corps);color:var(--t-texte-2)}
.cc-attente-ic{display:grid;place-items:center;color:var(--t-texte)}
.cc-attente-t{font:400 15px/1 var(--t-titre);color:var(--t-texte);font-variant-numeric:tabular-nums}
.cc-attente button{min-height:28px;margin-left:auto;padding:0 11px;border:2px solid var(--t-bord);border-radius:var(--t-r-pill);background:var(--t-carte);color:var(--t-texte);
  font:800 12px/1 var(--t-corps);cursor:pointer}
.cc-attente-fin{color:var(--t-texte)}
.cc-attente-fin button{width:28px;padding:0;border-radius:50%;font-size:17px}
.cc-msg-simule .cc-text::after{content:"simulé (DEV) · rien n’est parti sur Twitch";display:block;margin-top:4px;font:700 11px/1.2 var(--t-corps);color:var(--t-texte-3)}