/* ── CyberMsg — téléphone & écrans tactiles (28/10/2026) ───────────────────────
   Chargée EN DERNIER (après les .css du module ET après le <style> en ligne) par
   index.php, pages/auth_app.php et pages/anon_room.php : à spécificité égale, elle gagne.
   ⚠ Servie avec ?v= (Cloudflare met les .css en cache) : toute modification de ce
   fichier = changer le ?v= dans ces trois pages. */

/* Hauteur = partie VISIBLE de l'écran. Sur iPhone, 100vh = l'écran SANS les barres
   de Safari : le bas de la page (la saisie) passait sous la barre d'onglets.
   fitToVisualViewport() (chat.js) affine ensuite quand le clavier s'ouvre. */
.app-shell, .anon-room-shell { height: 100vh; height: 100dvh; }
body.cm-app { overscroll-behavior: none; }               /* pas de « rebond » de toute la page */
:root:has(> body.cm-app) { overscroll-behavior: none; }   /* règle À PART : un navigateur sans :has() jetterait toute la liste */
.messages-wrap, .anon-messages, .room-list { overscroll-behavior: contain; }

/* Bouton ‹ de retour à la liste : téléphone seulement */
.chat-back { display: none; }

/* ── Messagerie connectée (auth_app.php) ─────────────────────────────────────── */
@media (max-width: 680px) {
    /* La liste des salons EST l'écran d'accueil ; la conversation la remplace quand
       on l'ouvre (‹, geste retour de l'iPhone ou bouton retour Android la referment).
       Avant : la liste était rangée hors écran (left:-260px) et le seul bouton pour la
       sortir était DANS une conversation déjà ouverte → « sur téléphone j'ai rien ». */
    .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
    .app-shell .sidebar {
        position: relative; left: auto; top: auto; bottom: auto; width: auto;
        z-index: auto; transition: none; border-right: none; min-height: 0;
    }
    .app-shell .chat-panel { display: none; min-width: 0; min-height: 0; }
    .app-shell.in-room .sidebar { display: none; }
    .app-shell.in-room .chat-panel { display: flex; }

    /* Liste : cibles au doigt, noms complets (retour à la ligne, jamais « … ») */
    .sidebar-head { padding: .75em .9em; }
    .sidebar-title { font-size: .85rem; }
    .sidebar-head .btn { font-size: 1rem !important; min-width: 44px; min-height: 40px; justify-content: center; padding: .2em .6em !important; letter-spacing: 0; }
    .sidebar-search { padding: .55em .9em; }
    .sidebar-search .inp { padding: .5em .7em; }
    #tab-active, #tab-archived { font-size: .72rem !important; min-height: 44px; justify-content: center; }
    .room-item { padding: .9em 1.1em; gap: .9em; min-height: 60px; border-bottom: 1px solid var(--border); }
    .room-icon { font-size: 1.35rem; width: 1.6em; text-align: center; }
    .room-name { font-size: .95rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
    .room-badge { font-size: .72rem; padding: .2em .6em; }
    .sidebar-foot { padding: .8em 1.1em; }
    .sidebar-foot .btn { font-size: .68rem !important; padding: .55em .9em !important; min-height: 40px; }

    /* En-tête de conversation : ‹ + nom + boutons en icônes (le texte reste lu par
       les lecteurs d'écran). Nom trop long → les boutons passent sur une 2ᵉ ligne. */
    .chat-header { flex-wrap: wrap; gap: .35em .45em; padding: .45em .55em; }
    .chat-back { display: inline-flex; font-size: 1.6rem !important; line-height: 1; min-width: 40px; min-height: 40px;
                 padding: 0 !important; justify-content: center; border-color: transparent; letter-spacing: 0; }
    .chat-header-icon { font-size: 1.15rem; }
    .chat-header-name { flex: 1 1 5em; min-width: 0; font-size: .95rem; letter-spacing: .06em; line-height: 1.25; overflow-wrap: anywhere; }
    .chat-header-actions { margin-left: auto; gap: .3em; flex-shrink: 0; }
    .chat-header-actions .hdr-btn { font-size: 0 !important; letter-spacing: 0; gap: 0; min-width: 40px; min-height: 40px;
                                    padding: 0 !important; justify-content: center; }
    .chat-header-actions .hdr-btn::before { content: attr(data-ico); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }

    .compose-inner { gap: .4em; padding: .5em .55em; }
    .compose-input { padding: .55em .7em; min-height: 44px; }
}

/* ── Salon public (anon_room.php) ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .anon-room-header { flex-wrap: wrap; gap: .35em .55em; padding: .5em .7em; }
    .anon-room-title { flex: 1 1 6em; min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
    .anon-room-code { font-size: .65rem; letter-spacing: .12em; }
    .anon-room-id { flex-wrap: wrap; justify-content: flex-end; gap: .4em; }
    .anon-room-id .btn { min-height: 38px; padding: .3em .7em; }
    .anon-room-share { flex-wrap: wrap; gap: .4em; padding: .45em .7em; }
    .anon-room-share .share-link { min-width: 8em; }
    .anon-room-share .btn { min-height: 38px; }
    .preview-opt { padding: .45em .7em; }
    .anon-compose-inner { gap: .4em; padding: .5em .55em; }
    .anon-compose-input { padding: .55em .7em; min-height: 44px; }
    /* QR « gardé visible » : il couvrait le bouton Envoyer → au-dessus de la saisie */
    .qr-dock { bottom: 84px; right: .6em; }
    .qr-dock img { width: 96px; height: 96px; }
    /* Porte « mot de passe » : 280 px + marges débordaient d'un écran de 360 px */
    .pw-gate { padding: 12px; }
    .pw-gate-box { min-width: 0; width: 100%; max-width: 420px; padding: 2em 1.3em; }
}

/* ── Commun aux deux fils de messages ───────────────────────────────────────── */
@media (max-width: 680px) {
    .messages-wrap, .anon-messages { padding: .8em .7em; }
    .msg { max-width: 88%; }
    .msg-thumb, .msg-img { max-width: 100%; }
    .msg-video-wrap { display: block; max-width: 100%; }   /* inline-block = largeur de la vidéo : elle ne rétrécissait jamais */
    .msg-video, .msg-video-info { max-width: 100%; }
    .send-btn { min-height: 44px; padding: .5em .85em; font-size: .78rem; }
    .attach-btn { min-width: 40px; min-height: 44px; font-size: 1.25rem; }

    /* Fenêtres : à la largeur de l'écran (min-width: 320px débordait), boutons qui passent à la ligne */
    .modal-bg { padding: 12px; }
    .modal { min-width: 0; width: 100%; max-width: 480px; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 1.3em 1.1em; gap: 1em; }
    .modal-actions { flex-wrap: wrap; }
    .modal-actions .btn { flex: 1 1 auto; justify-content: center; min-height: 44px; }

    .anon-landing { gap: 2em; padding: 1.5em 1em; }
}

/* ── Écrans tactiles (pas de survol) ────────────────────────────────────────── */
@media (hover: none) {
    /* Les actions d'un message (↩ + 📌 × –) n'apparaissaient qu'au survol de la souris :
       un appui sur la bulle les affiche (enableTapActions, chat.js). */
    .msg { cursor: pointer; -webkit-tap-highlight-color: transparent; }
    .msg:hover .msg-actions { display: none; }
    .msg.msg--open { outline: 1px solid rgba(119,255,136,.28); outline-offset: 1px; }
    .msg.msg--open .msg-actions { display: flex; flex-wrap: wrap; }
    .msg-action { min-width: 42px; min-height: 36px; font-size: .9rem; }
    .reaction { min-height: 30px; padding: .2em .6em; }
    /* Sélecteur d'émojis : barre posée au-dessus de la saisie, jamais coupée par le bord */
    .reaction-picker { position: fixed; left: 10px; right: 10px; bottom: 92px; z-index: 600;
                       justify-content: space-around; flex-wrap: wrap; padding: .5em; box-shadow: 0 -6px 24px rgba(0,0,0,.6); }
    .rp-emoji { font-size: 1.35rem; padding: .15em .2em; }     /* les 8 tiennent sur une ligne dès 360 px */
}

/* iPhone : un champ en dessous de 16 px fait ZOOMER la page dès qu'on le touche. */
@media (hover: none), (pointer: coarse) {
    .inp, .compose-input, .anon-compose-input, select { font-size: 16px !important; }
}