/* ==========================================================================
   emoji-picker.css — bouton et popover du sélecteur d'emojis unique
   (assets/emoji-picker.js). Couleurs : variables des six thèmes, voir
   assets/themes.css — aucune couleur en dur ici.
   ========================================================================== */

.kp-emoji-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.kp-emoji-bouton:hover,
.kp-emoji-bouton:focus-visible {
  background: var(--fond-3);
}

/* Rendu Twemoji (assets/emoji-render.js) : chaque emoji AFFICHE (fil, bio,
   messages, sidebar...) devient une <img class="kp-emoji">. Sans taille
   fixe ici, le SVG s'affiche a sa taille intrinseque (enorme) -> on le cale
   sur la taille du texte environnant, comme un caractere. */
img.kp-emoji {
  display: inline; /* contre img{display:block} de kalipay.css */
  max-width: none;
  height: 1.2em;
  width: 1.2em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.2em;
}

/* z-index 100050 : au-dessus de TOUTE pop-up existante du site, y compris
   .ed-voile (soirees/_moteur/contenu.php, 99998) — la plus haute du site
   avant celle-ci (bug corrigé le 23/09/2026 : le popover apparaissait
   derrière). Reste sous le bouton panique (assets/panique.css,
   2147483000) : c'est voulu, la sortie rapide doit pouvoir tout
   recouvrir. */
.kp-emoji-popover {
  position: fixed;
  z-index: 100050;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  border: 1px solid var(--trait);
}

/* Barre d'en-tête + croix de fermeture (26/09/2026) */
.kp-emoji-barre {
  display: flex;
  justify-content: flex-end;
  background: var(--carte);
  border-bottom: 1px solid var(--trait);
  padding: 2px 4px;
}

.kp-emoji-fermer {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--txt-2);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.kp-emoji-fermer:hover,
.kp-emoji-fermer:focus-visible {
  background: var(--fond-3);
  color: var(--txt);
}

/* Largeur 344px (23/09/2026, corrige un bug) : 320px coupait le dernier
   onglet de categorie -- la barre d'onglets compte 9 categories a 38px
   chacune (--category-emoji-size 1.375rem + 2x--category-emoji-padding
   0.5rem = 38px), soit 342px, et .kp-emoji-popover coupe tout debordement
   (overflow:hidden). 344px les fait toutes tenir. */
.kp-emoji-popover emoji-picker {
  width: 344px;
  height: 400px;
  --background:              var(--carte);
  --border-color:            var(--trait);
  --button-hover-background: var(--fond-3);
  --button-active-background:var(--fond-3);
  --category-font-color:     var(--txt-2);
  --indicator-color:         var(--accent);
  --input-border-color:      var(--trait-2);
  --input-font-color:        var(--txt);
  --input-placeholder-color: var(--txt-3);
  --outline-color:           var(--accent);
}

@media (max-width: 480px) {
  .kp-emoji-popover emoji-picker {
    width: 92vw;
    height: 60vh;
  }
}