/* =====================================================================
   KG-MINI — mini-live 2.0
   Sprint live-ux 2026-07
   =====================================================================
   Position et taille sont pilotees en JS (kg-mini.js) : ce fichier ne fait que
   l'apparence. Il PASSE APRES style.css et neutralise les anciennes regles de
   position fixe du mini (bottom/right/width/height en dur) qui se battaient
   avec l'aimantage aux coins.
   ===================================================================== */

/* Ces valeurs etaient figees dans style.css ; c'est le JS qui decide desormais
   (taille S/M/L + coin memorise), donc on les neutralise proprement. */
.stream-box[data-mode="mini"],
.stream-box[data-mode="audio"] {
    bottom: auto;
    right: auto;
}

/* CRUCIAL : les evenements tactiles d'une iframe ne remontent PAS au document
   parent. Sans ceci, l'iframe Twitch avale tous les appuis sur l'image du mini
   et ni « appui = retour au live » ni le glissement depuis la video ne peuvent
   fonctionner (c'est pour ca que l'ancien code ne permettait de glisser que
   depuis la barre de titre). En mini, l'UI Twitch n'a de toute facon aucun
   interet : nos propres commandes la remplacent. */
.stream-box[data-mode="mini"] .stream-frame iframe,
.stream-box[data-mode="mini"] #twitchEmbedTarget iframe { pointer-events: none }

/* ============================================================
   TAILLE REELLE vs TAILLE VUE
   Le player Twitch SE MET EN PAUSE en dessous d'une certaine largeur : c'est
   pour ca que seul le cran L (304px) continuait de jouer, et pas S (180) ni
   M (234). On garde donc une iframe de 480px de large — largeur que Twitch
   accepte — et on la REDUIT visuellement au facteur voulu. Twitch croit avoir
   la place, l'utilisateur voit une petite vignette.
   --mini-k est pose par kg-mini.js a chaque placement.
   ============================================================ */
/* Le bouton de taille affiche sa LETTRE (S/M/L) : il faut la rendre lisible dans
   un rond de 28px, la ou le .sbtn generique attend un pictogramme. */
.sbtn-size {
    font-weight: 800;
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .01em;
    font-family: var(--font-body);
}

.stream-box[data-mode="mini"] .stream-frame { position: relative; overflow: hidden }
.stream-box[data-mode="mini"] #twitchEmbedTarget {
    position: relative;
    width: 480px !important;
    height: 270px !important;
    transform-origin: top left;
    transform: scale(var(--mini-k, 1));
}

.stream-box[data-mode="mini"] {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .55), 0 0 0 1px var(--border);
    cursor: grab;
    touch-action: none;                 /* le glissement nous appartient */
    -webkit-tap-highlight-color: transparent;
    will-change: left, top;
}
.stream-box[data-mode="mini"].mini-dragging {
    cursor: grabbing;
    transform: scale(1.03);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .7), 0 0 0 1px var(--accent);
    transition: transform .12s ease, box-shadow .12s ease;
}
/* Aimantage : la transition n'est active QUE pendant le recalage, sinon le
   glissement serait mou (chaque deplacement serait interpole). */
.stream-box[data-mode="mini"].mini-snap {
    transition: left .22s cubic-bezier(.22, .61, .36, 1),
                top .22s cubic-bezier(.22, .61, .36, 1),
                width .22s ease, height .22s ease;
}
body.low-perf .stream-box[data-mode="mini"].mini-snap { transition: none }

/* ---------- barre de commandes en surimpression ----------
   Avant, la barre etait un bandeau plein qui volait 36px sur une boite de 175px
   de haut. Elle passe en surimpression, degradee, sur l'image. */
.stream-box[data-mode="mini"] .stream-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 5px 6px 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0));
    border-bottom: none;
    pointer-events: none;               /* seuls les boutons captent */
}
.stream-box[data-mode="mini"] .stream-bar-btns { pointer-events: auto }
.stream-box[data-mode="mini"] .stream-bar-title {
    pointer-events: none;
    font-size: .72rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.stream-box[data-mode="mini"] .stream-bar-channel { color: rgba(255, 255, 255, .75) }
.stream-box[data-mode="mini"] .sbtn {
    width: 30px;
    height: 30px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.stream-box[data-mode="mini"] .sbtn:active { background: var(--accent) }
body.low-perf .stream-box[data-mode="mini"] .sbtn { backdrop-filter: none; -webkit-backdrop-filter: none }

/* Cibles tactiles : 30px visuels mais 44px reels (zone etendue invisible). */
@media (pointer: coarse) {
    .stream-box[data-mode="mini"] .sbtn { position: relative }
    .stream-box[data-mode="mini"] .sbtn::after {
        content: '';
        position: absolute;
        top: -7px; right: -4px; bottom: -7px; left: -4px;
    }
    /* Les poignees de coin sont inutilisables au doigt : le bouton de taille
       (S/M/L) les remplace sur tactile. */
    .stream-box[data-mode="mini"] .rh { display: none !important }
}

/* Etiquette breve au changement de taille. */
.mini-flash {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    z-index: 7;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-family: var(--font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease;
}
.mini-flash.on { opacity: 1 }
body.low-perf .mini-flash { transition: none }

/* Mode audio : la barre redevient un bandeau normal (il n'y a plus d'image
   sous laquelle se glisser). */
.stream-box[data-mode="audio"] .stream-bar {
    position: relative;
    background: var(--bg-card);
    padding: 8px 12px;
    pointer-events: auto;
    border-bottom: 1px solid var(--border);
}
.stream-box[data-mode="audio"] { border-radius: 14px; overflow: hidden; touch-action: none }
.stream-box[data-mode="audio"] .stream-bar-title { color: var(--text-primary); text-shadow: none }