/* =========================================================================
   SÉLECTEUR D'EMOJI — habillage design system TennoCore (tokens --tc-*)
   =========================================================================
   Le sélecteur est PARTAGÉ : tickets, auto-rôle, boutique, réactions,
   portails, monnaies, défis… Son balisage vit dans dashboard/index.html et sa
   logique dans dashboard/tickets.js (`window.openEmojiPicker`).

   ⚠️ Avant cette feuille, TOUT était en style en ligne posé par le JS
   (`btn.style.cssText = …`) avec des `onmouseover` / `onmouseout` pour le
   survol. Conséquences : aucun thème clair possible, aucune transition, et
   surtout un style en ligne l'emporte sur n'importe quelle règle CSS — il
   était donc impossible d'habiller le sélecteur sans toucher au JS. Les
   renderers posent désormais des CLASSES ; ne pas y réintroduire de
   `style.cssText`, la feuille redeviendrait inopérante.

   ⚠️ `filterEmojis()` pilote la visibilité par `style.display` (valeur vide
   pour « montrer »). Les règles ci-dessous ne doivent donc jamais dépendre
   d'un `display` particulier sur les enfants de la grille.

   Préfixe `tcep-` (TennoCore Emoji Picker) : le fichier est autonome, aucune
   des 5 500 lignes de styles.css n'est concernée.
   ========================================================================= */

/* ------------------------------------------------------------------ Voile */
/* ⚠️ Teinte portée par le FOND, jamais par `opacity` sur le voile entier :
   l'ancien `.overlay` appliquait `opacity: .95` au conteneur, ce qui délavait
   aussi la carte et ses emojis. */
.tcep-overlay {
    position: fixed;
    inset: 0;
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tc-space-4);
    background: rgba(3, 7, 14, 0.64);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: tcep-fade 140ms ease-out;
}

.theme-light .tcep-overlay {
    background: rgba(12, 30, 56, 0.35);
}

@keyframes tcep-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ------------------------------------------------------------------ Carte */
.tcep-card {
    display: flex;
    flex-direction: column;
    width: min(720px, 100%);
    height: min(78vh, 660px);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-xl);
    box-shadow: var(--tc-shadow-xl);
    overflow: hidden;
    animation: tcep-rise 160ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tcep-rise {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tcep-overlay,
    .tcep-card { animation: none; }
}

/* ------------------------------------------------------------------ En-tête */
.tcep-head {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--tc-space-3);
    padding: var(--tc-space-4) var(--tc-space-5);
    border-bottom: 1px solid var(--tc-border-subtle);
}

.tcep-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--tc-radius-md);
    background: var(--tc-primary-soft);
    color: var(--tc-primary-text);
    font-size: var(--tc-text-md);
}

.tcep-head__title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--tc-text-lg);
    font-weight: var(--tc-weight-semibold);
    letter-spacing: var(--tc-tracking-tight);
    color: var(--tc-text);
}

.tcep-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid transparent;
    border-radius: var(--tc-radius-md);
    background: transparent;
    color: var(--tc-text-muted);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tcep-close:hover {
    background: var(--tc-surface-hover);
    border-color: var(--tc-border-subtle);
    color: var(--tc-text);
}

/* ------------------------------------------------- Recherche + onglets */
.tcep-tools {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: var(--tc-space-3);
    padding: var(--tc-space-4) var(--tc-space-5) var(--tc-space-3);
}

.tcep-search {
    position: relative;
    display: flex;
    align-items: center;
}

.tcep-search__icon {
    position: absolute;
    left: var(--tc-space-3);
    font-size: var(--tc-text-sm);
    color: var(--tc-text-muted);
    pointer-events: none;
}

/* ⚠️ `#emoji-search` est ciblé par son ID : la règle doit l'emporter sur les
   styles génériques d'`input` de styles.css, qui ont une spécificité d'élément
   mais arrivent plus tard dans la cascade. */
.tcep-search #emoji-search,
.tcep-search input[type="text"] {
    width: 100%;
    padding: 0.55rem 2.25rem 0.55rem 2.25rem;
    margin: 0;
    font-size: var(--tc-text-md);
    font-family: inherit;
    color: var(--tc-text);
    background: var(--tc-surface-sunken);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.tcep-search input[type="text"]::placeholder { color: var(--tc-text-muted); }

.tcep-search input[type="text"]:focus {
    outline: none;
    border-color: var(--tc-primary-border);
    box-shadow: 0 0 0 3px var(--tc-primary-soft);
}

.tcep-search__clear {
    position: absolute;
    right: var(--tc-space-2);
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: var(--tc-radius-full);
    background: var(--tc-surface-hover);
    color: var(--tc-text-muted);
    font-size: var(--tc-text-xs);
    cursor: pointer;
}

.tcep-search__clear:hover { color: var(--tc-text); }
.tcep-search.has-value .tcep-search__clear { display: inline-flex; }

/* Onglets : pastilles segmentées, actif en aplat de charte. */
.tcep-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tc-space-2);
}

.tcep-tab {
    padding: 0.4rem 0.9rem;
    font-size: var(--tc-text-sm);
    font-weight: var(--tc-weight-medium);
    font-family: inherit;
    color: var(--tc-text-muted);
    background: var(--tc-surface-sunken);
    border: 1px solid var(--tc-border-subtle);
    border-radius: var(--tc-radius-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.tcep-tab:hover {
    color: var(--tc-text);
    border-color: var(--tc-border);
}

.tcep-tab.is-active {
    background: var(--tc-primary-fill);
    border-color: transparent;
    color: var(--tc-primary-contrast);
}

/* ------------------------------------------------------------ Catégories */
/* Barre horizontale défilante : jusqu'à neuf catégories Unicode, et il ne faut
   ni qu'elles passent à la ligne (la carte grandirait) ni qu'elles rétrécissent
   au point d'être incliquables. */
.tcep-cats {
    display: flex;
    /* ⚠️ `flex: 0 0 auto` OBLIGATOIRE, et c'est le piège du fichier.
       `overflow-x: auto` fait calculer `overflow-y` à `auto` (règle CSS : un
       axe non `visible` force l'autre), ce qui ramène la taille minimale
       AUTOMATIQUE du bloc à 0. La barre devient alors librement compressible :
       le corps débordant, flexbox l'écrasait à 28 px pour des boutons de 32,
       et l'on ne voyait plus que le haut des icônes, la grille semblant passer
       par-dessus. Sans l'`overflow`, la taille min-content l'aurait protégée —
       d'où un défaut qui n'apparaît QUE sur cet élément. */
    flex: 0 0 auto;
    gap: var(--tc-space-1);
    padding: var(--tc-space-2) var(--tc-space-5);
    overflow-x: auto;
    border-top: 1px solid var(--tc-border-subtle);
    border-bottom: 1px solid var(--tc-border-subtle);
    background: var(--tc-surface-sunken);
    scrollbar-width: thin;
}

.tcep-cats::-webkit-scrollbar { height: 6px; }
.tcep-cats::-webkit-scrollbar-thumb {
    background: var(--tc-border-strong);
    border-radius: var(--tc-radius-full);
}

.tcep-cat {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    flex: 0 0 auto;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--tc-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.tcep-cat:hover { background: var(--tc-surface-hover); }

.tcep-cat.is-active {
    background: var(--tc-primary-soft);
    border-color: var(--tc-primary-border);
    color: var(--tc-primary-text);
}

/* ------------------------------------------------------------------ Corps */
.tcep-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--tc-space-3) var(--tc-space-5) var(--tc-space-4);
    scrollbar-width: thin;
}

.tcep-body::-webkit-scrollbar { width: 8px; }
.tcep-body::-webkit-scrollbar-thumb {
    background: var(--tc-border-strong);
    border-radius: var(--tc-radius-full);
}
.tcep-body::-webkit-scrollbar-thumb:hover { background: var(--tc-text-muted); }

/* ⚠️ Grille et non flux en ligne : les boutons faisaient auparavant du
   `inline-block` au fil du texte, ce qui donnait une dernière ligne en
   escalier et des espaces inégaux entre colonnes. */
.tcep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: var(--tc-space-1);
    align-content: start;
}

/* Titre de catégorie : il DOIT traverser toute la grille, sinon il occupe une
   seule cellule et se lit comme un emoji parmi les autres. Collant, parce que
   la liste Unicode est longue et qu'on perd sinon de vue où l'on se trouve. */
.tcep-group {
    grid-column: 1 / -1;
    position: sticky;
    top: calc(var(--tc-space-3) * -1);
    z-index: 1;
    margin: var(--tc-space-3) 0 var(--tc-space-1);
    padding: var(--tc-space-2) 0;
    font-size: var(--tc-text-2xs);
    font-weight: var(--tc-weight-semibold);
    letter-spacing: var(--tc-tracking-wide);
    text-transform: uppercase;
    color: var(--tc-text-muted);
    background: var(--tc-surface);
}

.tcep-group:first-child { margin-top: 0; }

/* Une tuile d'emoji. */
.tcep-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    font-size: 1.4rem;
    line-height: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: background 110ms ease, border-color 110ms ease, transform 110ms ease;
}

.tcep-emoji:hover {
    background: var(--tc-surface-hover);
    border-color: var(--tc-border-subtle);
    transform: translateY(-1px);
}

.tcep-emoji:active { transform: translateY(0) scale(0.94); }

.tcep-emoji:focus-visible {
    outline: none;
    border-color: var(--tc-primary-border);
    box-shadow: 0 0 0 3px var(--tc-primary-soft);
}

/* ⚠️ `pointer-events: none` sur l'image : sans lui, `event.target` est le
   `<img>` et non le bouton — ce qui casserait tout code qui remonte au bouton
   par la cible. Le comportement d'origine, conservé. */
.tcep-emoji img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    pointer-events: none;
}

/* États vides : un message, jamais une zone blanche. Sans lui, une recherche
   sans résultat et un onglet qui n'a pas fini de charger se ressemblent. */
.tcep-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tc-space-2);
    padding: var(--tc-space-10) var(--tc-space-4);
    text-align: center;
    color: var(--tc-text-muted);
    font-size: var(--tc-text-sm);
}

.tcep-empty i { font-size: 1.6rem; opacity: 0.5; }

/* Compatibilité : les renderers posaient `<p class="empty">…</p>` dans la
   grille. La règle garde ces messages lisibles et centrés. */
.tcep-grid .empty {
    grid-column: 1 / -1;
    padding: var(--tc-space-10) var(--tc-space-4);
    text-align: center;
    color: var(--tc-text-muted);
    font-size: var(--tc-text-sm);
}

/* ------------------------------------------------------------------ Pied */
.tcep-foot {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--tc-space-3);
    padding: var(--tc-space-3) var(--tc-space-5);
    border-top: 1px solid var(--tc-border-subtle);
    background: var(--tc-surface-sunken);
}

.tcep-hint {
    font-size: var(--tc-text-xs);
    color: var(--tc-text-muted);
}

.tcep-done {
    padding: 0.45rem 1.1rem;
    font-size: var(--tc-text-sm);
    font-weight: var(--tc-weight-medium);
    font-family: inherit;
    color: var(--tc-text);
    background: var(--tc-surface);
    border: 1px solid var(--tc-border);
    border-radius: var(--tc-radius-md);
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
}

.tcep-done:hover {
    background: var(--tc-surface-hover);
    border-color: var(--tc-border-strong);
}

/* ------------------------------------------------------------ Étroit */
@media (max-width: 560px) {
    .tcep-overlay { padding: 0; }

    .tcep-card {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
    }

    .tcep-head,
    .tcep-tools,
    .tcep-cats,
    .tcep-body,
    .tcep-foot {
        padding-left: var(--tc-space-4);
        padding-right: var(--tc-space-4);
    }

    .tcep-hint { display: none; }
}