/* =====================================================================
   KG-KEYBOARD — clavier maison (mobile)
   Sprint live-ux 2026-07
   =====================================================================
   La hauteur du clavier est DETERMINISTE (calculee en CSS, pas mesuree en JS) :
   c'est ce qui permet au chat de retrecir exactement de --kb-h sans aucun
   recalcul, donc sans le moindre saut de layout.
   ===================================================================== */

:root {
    --kgk-key-h: 46px;
    --kgk-gap: 5px;
    --kgk-sugg-h: 42px;
    --kgk-grip-h: 14px;
    --kb-h: 0px;
}

body.kgk-open {
    --kgk-sugg-cur: var(--kgk-sugg-h);
    --kgk-search-cur: 0px;
    --kb-h: calc(var(--kgk-grip-h) + var(--kgk-sugg-cur) + var(--kgk-search-cur)
             + 4 * var(--kgk-key-h) + 5 * var(--kgk-gap)
             + env(safe-area-inset-bottom));
}
/* Recherche d'emoji/emote : un champ s'intercale au-dessus des touches, le
   clavier grandit d'autant (et le chat cede la meme hauteur). */
body.kgk-open.kgk-search { --kgk-search-cur: 44px }
/* Aucune suggestion a proposer -> la barre se replie, --kb-h suit tout seul. */
body.kgk-open.kgk-nosugg { --kgk-sugg-cur: 0px }
body.kgk-nosugg .kgk-sugg { display: none }

/* Ecrans courts : on comprime les touches plutot que de manger le chat. */
@media (max-height: 700px) {
    :root { --kgk-key-h: 42px; --kgk-sugg-h: 38px; }
}
@media (max-height: 620px) {
    :root { --kgk-key-h: 38px; --kgk-sugg-h: 34px; --kgk-gap: 4px; }
}
/* Telephone en paysage : le clavier vit dans la colonne chat, touches basses. */
@media (orientation: landscape) and (max-height: 560px) {
    :root { --kgk-key-h: 32px; --kgk-sugg-h: 30px; --kgk-gap: 3px; --kgk-grip-h: 10px; }
}

/* ============================ PANNEAU ============================ */
.kgk {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--kb-h);
    /* Au-dessus de TOUT : le modal de prediction est en 9999, le hub en 205.
       Quand le clavier est ouvert, rien ne doit le recouvrir (il est de toute
       facon invisible et hors ecran quand il est ferme). */
    z-index: 10050;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform .16s cubic-bezier(.22, .61, .36, 1);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    visibility: hidden;
}
.kgk.kgk-on {
    transform: translateY(0);
    visibility: visible;
}
body.low-perf .kgk { transition: none }

/* En paysage plein ecran, le clavier se cale sur la colonne chat pour ne
   jamais recouvrir la video. */
body.is-live-landscape .kgk {
    left: auto;
    right: 0;
    width: var(--chat-w);
    border-left: 1px solid var(--border);
}

/* ============================ POIGNEE ============================ */
.kgk-grip {
    height: var(--kgk-grip-h);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
}
.kgk-grip-bar {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-muted);
    opacity: .5;
}
.kgk-grip:active .kgk-grip-bar { opacity: .9; background: var(--accent) }

/* ========================= SUGGESTIONS ========================= */
.kgk-sugg {
    height: var(--kgk-sugg-cur, var(--kgk-sugg-h));
    box-sizing: border-box;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x;
}
.kgk-sugg::-webkit-scrollbar { display: none }
.kgk-sugg.kgk-sugg-off { opacity: .35 }

.kgk-sg {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: calc(var(--kgk-sugg-h) - 12px);
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}
.kgk-sg:active { background: var(--accent); border-color: var(--accent); color: #fff }
.kgk-sg-user { color: var(--accent) }
/* Pastille emote : l'image seule, format carre. Sans le nom on en voit 3x plus
   a l'ecran et l'oeil reconnait l'emote bien plus vite que son code. */
.kgk-sg-emote {
    width: calc(var(--kgk-sugg-h) - 10px);
    height: calc(var(--kgk-sugg-h) - 10px);
    padding: 0;
    justify-content: center;
    border-radius: 9px;
}
.kgk-sg-emote img {
    max-width: calc(var(--kgk-sugg-h) - 18px);
    max-height: calc(var(--kgk-sugg-h) - 18px);
    object-fit: contain;
}

/* ============================ TOUCHES ============================ */
.kgk-keys {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--kgk-gap);
    padding: var(--kgk-gap);
}
.kgk-keys.hidden { display: none }

.kgk-row {
    display: flex;
    gap: var(--kgk-gap);
    height: var(--kgk-key-h);
    flex-shrink: 0;
}

.kgk-key {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .35);
    transition: background .06s linear;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
}
/* Retour visuel calque sur iOS : une touche de CARACTERE ne change quasiment
   pas de teinte — c'est la bulle grossie au-dessus qui confirme l'appui (le
   doigt masque la touche, pas la bulle). Les touches de FONCTION, elles, n'ont
   pas de bulle : ce sont elles qui s'illuminent. */
.kgk-key.kgk-press { background: var(--bg-card-hover) }
.kgk-key[data-act].kgk-press { background: var(--accent); color: #fff; opacity: 1 }
.kgk-key[data-act].kgk-key-punct.kgk-press { background: var(--bg-card-hover); color: var(--text-primary) }

/* Petit point sur les touches qui cachent des accents (appui long). */
.kgk-key-alt { position: relative }
.kgk-key-alt::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 5px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: .65;
}

/* Touches de fonction : plus sombres, comme sur un clavier natif.
   ATTENTION specificite : [data-act] vaut (0,2,0), donc toute regle qui doit
   la surcharger est scopee .kgk-key[data-act].xxx — sinon elle est ignoree. */
.kgk-key[data-act] {
    background: var(--bg-input);
    color: var(--text-secondary);
    font-size: .95rem;
    font-weight: 600;
}
.kgk-key[data-act].kgk-key-shift,
.kgk-key[data-act].kgk-key-back { font-size: 1.15rem }
.kgk-key[data-act].kgk-key-shift.kgk-on { background: var(--bg-card-hover); color: var(--text-primary) }
.kgk-key[data-act].kgk-key-shift.kgk-lock { background: var(--accent); color: #fff }
.kgk-key[data-act].kgk-key-space { font-size: .78rem; color: var(--text-muted) }
.kgk-space-lbl { pointer-events: none; letter-spacing: .04em }
.kgk-key[data-act].kgk-key-emo { font-size: 1.25rem }
/* ponctuation collee a l'espace : c'est une touche de caractere deguisee */
.kgk-key[data-act].kgk-key-punct { font-size: 1.15rem; color: var(--text-primary) }

.kgk-key[data-act].kgk-key-send-on { background: var(--gradient-rubis, var(--accent)); color: #fff }
.kgk-key[data-act].kgk-key-send-off { background: var(--bg-input); color: var(--text-muted); opacity: .5 }

/* ---------------------- PAVE NUMERIQUE ----------------------
   Meme nombre de rangees que les lettres : --kb-h ne change pas, donc rien ne
   bouge quand on passe d'un champ texte a un champ nombre. */
.kgk-row-pad { gap: calc(var(--kgk-gap) * 2) }
.kgk-keys.kgk-pad { padding: var(--kgk-gap) 12% }
.kgk-keys.kgk-pad .kgk-key { font-size: 1.5rem; font-weight: 500 }
.kgk-keys.kgk-pad .kgk-key[data-act] { font-size: 1rem }
.kgk-ok { font-size: .95rem; font-weight: 800; letter-spacing: .06em }

/* pastilles de montant rapide au-dessus du pave */
.kgk-sg-num { font-variant-numeric: tabular-nums; font-weight: 700 }
.kgk-sg-max { color: var(--accent) }

/* Champ pilote par le pave : on le souligne, il remplace le focus natif. */
.kgk-active {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Les panneaux qui contiennent un champ nombre cedent la place au pave.
   Aucune mesure JS : une classe sur <body> et --kb-h font tout. */
body.kgk-numpad .cc-pred-modal { padding-bottom: calc(20px + var(--kb-h)) }
body.kgk-numpad .cc-hub {
    bottom: var(--kb-h) !important;
    height: calc(100vh - var(--kb-h) - var(--header-h) - 8px) !important;
}

/* --------- bulle grossie au-dessus de la touche pressee (iOS) ---------
   Elle est volontairement plus large et plus haute que la touche : c'est ce
   qui permet de lire la lettre alors que le doigt recouvre la touche. */
.kgk-pop {
    position: fixed;
    z-index: 10060;
    transform: translate(-50%, -112%);
    min-width: 54px;
    padding: 11px 8px;
    border-radius: 12px;
    /* Les couleurs du theme sont en rgba() : posees telles quelles, la bulle
       laisserait voir les touches au travers. On les composite donc sur un
       fond opaque (le degrade constant sert de calque de couleur). */
    background: linear-gradient(var(--bg-card-hover), var(--bg-card-hover)), var(--bg-primary);
    border: 1px solid var(--border-hover);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    box-shadow: var(--shadow-lg);
}
.kgk-pop.kgk-pop-on { opacity: 1 }
body.low-perf .kgk-pop { display: none }

/* --------- popup accents (appui long) --------- */
.kgk-accents {
    position: fixed;
    z-index: 10065;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 10px;
    /* opaque : sinon on lit les emotes de la barre de suggestions au travers */
    background: linear-gradient(var(--bg-card-hover), var(--bg-card-hover)), var(--bg-primary);
    border: 1px solid var(--border-hover);
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}
.kgk-acc {
    min-width: 40px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 1.3rem;
    color: var(--text-primary);
}
.kgk-acc.kgk-acc-on { background: var(--accent); color: #fff }

/* ========================= PANNEAU EMOTES ========================= */
.kgk-emo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.kgk-emo.hidden { display: none }

.kgk-emo-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.kgk-emo-abc, .kgk-emo-back, .kgk-emo-clear {
    height: 32px;
    min-width: 44px;
    border: none;
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    flex-shrink: 0;
}
.kgk-emo-abc:active, .kgk-emo-back:active, .kgk-emo-clear:active { background: var(--accent); color: #fff }
.kgk-emo-search {
    flex: 1;
    min-width: 0;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: .8rem;
    cursor: pointer;
}
.kgk-emo-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }

.kgk-emo-tabs {
    display: flex;
    gap: 4px;
    padding: 5px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}
.kgk-emo-tabs::-webkit-scrollbar { display: none }
.kgk-emo-tab {
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    white-space: nowrap;
    cursor: pointer;
}
.kgk-emo-tab.kgk-on { background: var(--accent); color: #fff }

.kgk-emo-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    gap: 2px;
    align-content: start;
    touch-action: pan-y;
}
.kgk-emo-i {
    height: 44px;
    border: none;
    border-radius: 6px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    cursor: pointer;
}
.kgk-emo-i:active { background: var(--bg-card-hover) }
.kgk-emo-i img { max-width: 34px; max-height: 34px; object-fit: contain }

/* Grille des emojis Unicode : ce sont des caracteres, pas des images. */
.kgk-emo-grid-uni { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)) }
.kgk-emo-u {
    height: 42px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    /* police emoji du systeme : indispensable sinon rendu en glyphe texte */
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.kgk-emo-u:active { background: var(--bg-card-hover) }
/* pastille de suggestion pour un emoji (recherche) */
.kgk-sg-uni {
    width: calc(var(--kgk-sugg-h) - 10px);
    height: calc(var(--kgk-sugg-h) - 10px);
    padding: 0;
    justify-content: center;
    border-radius: 9px;
    font-size: 22px;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}
.kgk-emo-gh {
    grid-column: 1/-1;
    font-size: .68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 2px 3px;
}
.kgk-emo-empty {
    grid-column: 1/-1;
    text-align: center;
    color: var(--text-muted);
    font-size: .82rem;
    padding: 24px 12px;
}

/* Champ de recherche d'emote : editeur pilote par le meme clavier. */
.kgk-search-ed {
    display: none;
    flex-shrink: 0;
    height: 32px;
    box-sizing: border-box;
    margin: 6px 8px;
    padding: 6px 10px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid var(--accent);
    border-radius: 7px;
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: .85rem;
    line-height: 1.3;
    word-break: break-word;
}
.kgk-search-ed.kgk-on { display: block }
.kgk-search-ed.kgk-empty::before {
    content: 'Rechercher une emote...';
    color: var(--text-muted);
}

/* ====================== CURSEUR MAISON ====================== */
.kgk-caret {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin: 0 -1px 0 0;
    vertical-align: -.16em;
    background: var(--accent);
    animation: kgkBlink 1.05s step-end infinite;
    pointer-events: none;
}
@keyframes kgkBlink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }
body.low-perf .kgk-caret { animation: none }
/* Curseur et selection ne coexistent jamais (comme dans un champ natif). */
.kgk-has-sel .kgk-caret { display: none }

/* Selection : double-tap = un mot, triple-tap = tout le message. */
.kgk-sel {
    background: var(--accent);
    color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 0 2px var(--accent);
}
.kgk-sel img.cc-emote { outline: 2px solid var(--accent); border-radius: 3px }

/* Champ pilote par le clavier maison : aucune selection, aucun focus natif. */
.cc-input.kgk-managed {
    caret-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    cursor: text;
}
/* Le placeholder ne peut plus s'appuyer sur :empty (le span curseur occupe le
   noeud) : classe posee par le JS. Et surtout il passe en ::after — un ::before
   se dessine AVANT le contenu reel, ce qui poussait le curseur a DROITE de la
   phrase. En ::after, le curseur reste colle a gauche, comme un vrai champ. */
.kgk-search-ed.kgk-empty::after {
    content: 'Rechercher une emote...';
    color: var(--text-muted);
    pointer-events: none;
}
/* Champ du chat : clavier OUVERT la phrase d'invite disparait (le curseur a la
   place nette, colle a gauche) ; clavier FERME c'est la regle :empty::before de
   style.css qui l'affiche. Surtout pas les deux a la fois. */

/* ============ REACTION DU LIVE A L'OUVERTURE DU CLAVIER ============
   Rien ne bouge : la barre de nav disparait, le chat retrecit de --kb-h.
   Le player et l'entete gardent EXACTEMENT la meme boite. */
body.kgk-open .mobile-nav { transform: translateY(100%) }
body.kgk-open .cc-emote-picker { display: none !important }   /* remplace par l'onglet emotes */