/* ============================================================
   Version mobile (js/mobile.js, *-mobile.php)
   Toutes les classes commencent par "m-" : elles ne se mélangent pas avec
   le CSS du bureau. Mêmes variables de couleur (:root, style.css) et mêmes
   transitions ("submenu", "page-zoom") que le bureau.
   ============================================================ */

/* Sur toutes les pages mobiles : pas de « tirer pour rafraîchir » (recharger la page
   déconnecte). Posé sur la page entière, il vaut aussi pour les listes et feuilles
   qui défilent (les .m-messages et .m-conv-messages le posent déjà pour eux). */
.is-mobile,
.is-mobile body {
    overscroll-behavior-y: none;
}

/* ---------- Barre du haut ---------- */
/* Fixée en haut et au-dessus de toutes les feuilles plein écran (conversation
   950, amis 900) : le menu reste toujours touchable, même dans une
   conversation. La page est décalée d'autant (#app, plus bas). */
.m-navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1200;
    height: var(--navbar-height);
    padding: 0 12px 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-navbar);
    backdrop-filter: blur(8px);
    box-shadow: 0 1px 0 var(--line);
}

.m-brand img {
    display: block;
    height: 32px;
}

.m-menu-wrapper {
    position: relative;
}

.m-menu-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 6px;
    border: none;
    background: none;
    color: var(--ink);
    cursor: pointer;
}

.m-menu-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.is-mobile #app {
    padding-top: var(--navbar-height);
}

/* ---------- Menu déroulant ---------- */
.m-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: min(320px, calc(100vw - 24px));
    max-height: calc(100vh - var(--navbar-height) - 16px);
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dropdown);
}

.m-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.m-menu-item:active {
    background: var(--bg-hover-item);
}

.m-menu-item.active {
    font-weight: 700;
}

.m-menu-item > i.ti:first-child {
    font-size: 20px;
}

.m-menu-arrow {
    margin-left: auto;
    font-size: 15px;
    transition: transform 0.3s ease;
}

.m-menu-arrow.open {
    transform: rotate(180deg);
}

.m-submenu {
    margin: 0;
    padding: 0 0 0 14px;
    list-style: none;
}

.m-flag {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 50%;
}

.m-lang-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.m-lang-list a {
    display: block;
    padding: 12px 14px;
    color: var(--ink);
    text-decoration: none;
}

/* Même douceur que les menus du bureau (voir .submenu-*, style.css), avec
   une hauteur max plus grande car ce menu contient toutes les entrées. */
.m-menu-enter-active,
.m-menu-leave-active {
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.m-menu-enter-from,
.m-menu-leave-to {
    opacity: 0;
    transform: translateY(-8px);
}

/* ---------- Pages simples (accueil) ---------- */
.m-page {
    padding: 20px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.m-eyebrow {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--orange);
}

.m-title {
    margin: 0 0 10px;
    font-size: 1.7rem;
    line-height: 1.2;
}

.m-lead {
    margin: 0;
    color: var(--muted);
}

.m-hero {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.m-feature h2 {
    margin: 0 0 4px;
    font-size: 1.05rem;
}

.m-feature p {
    margin: 0;
    color: var(--muted);
}

.m-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.m-btn:disabled {
    opacity: 0.6;
}

.m-btn-block {
    width: 100%;
}

.m-footer {
    margin: 0;
    text-align: center;
    font-size: 0.8rem;
    color: var(--muted);
}

/* ---------- Connexion / inscription ---------- */
.m-auth {
    padding: 20px 16px 32px;
}

.m-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.m-tab {
    flex: 1;
    min-height: 44px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.m-tab.active {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.m-field {
    margin-bottom: 14px;
}

.m-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.9rem;
    font-weight: 600;
}

.m-field input[type="text"],
.m-field input[type="email"],
.m-field input[type="password"] {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem; /* 16px minimum : évite le zoom automatique d'iOS au clic */
}

.m-field input:focus {
    outline: none;
    background: var(--white);
}

.m-auth .m-btn {
    width: 100%;
}

.m-hint {
    display: block;
    margin: 6px 0 12px;
    font-size: 0.8rem;
    color: var(--muted);
}

.m-accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    font-weight: normal;
    color: var(--muted);
}

.m-accept input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.m-error {
    margin: 12px 0 0;
    color: #d93025;
    font-size: 0.9rem;
}

.m-link {
    margin: 16px 0 0;
    text-align: center;
    font-size: 0.9rem;
}

.m-success {
    padding: 16px;
    border-radius: var(--radius);
    background: var(--paper);
}

/* ---------- Conteneur commun : plein écran, sans bordure ni coin arrondi ---------- */
.is-mobile .main-content {
    border: none;
    border-radius: 0;
    background: var(--white);
}

/* ---------- Salons ---------- */
/* Ancré aux quatre bords de l'écran visible (sous la barre du haut) plutôt
   que dimensionné en vh : sur téléphone, 100vh dépasse la zone réellement
   visible (barre d'adresse) et masquait la barre de saisie en bas. */
.m-salon {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    background: var(--white);
}

.m-salon-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px 24px;
}

.m-search {
    width: 100%;
    min-height: 44px;
    margin: 0 0 14px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}

.m-search:focus {
    outline: none;
    background: var(--white);
}

.m-info {
    margin: 12px 0;
    color: var(--m-muted-color, var(--muted));
}

.m-room-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.m-room {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

/* Visiteur non connecté : rappel au-dessus de la liste des salons */
.m-guest-note {
    margin: 0 0 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
}

.m-guest-login {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
}

/* Étoile « favori » à droite de la carte (bouton à part) */
.m-room-wrap {
    position: relative;
}

.m-room-wrap .m-room {
    padding-right: 56px;
}

.m-fav-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    color: #555;
    font-size: 22px;
}

.m-fav-btn.is-favorite {
    color: #f5a000;
}

.m-menu-empty {
    opacity: 0.7;
}

.m-room-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.m-room-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.m-room-name {
    font-weight: 700;
}

.m-room-desc {
    font-size: 0.85rem;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Conversation d'un salon ---------- */
.m-chat {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.m-chat-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}

.m-chat-titles {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.m-chat-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.65rem; /* adresse du salon : plus petite que la description */
}

.m-chat-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    color: var(--muted);
}

.m-desc-edit {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.9rem;
    resize: none;
}

.m-icon-btn {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 24px;
    cursor: pointer;
}

.m-icon-btn.recording {
    color: #d93025;
}

.m-send {
    color: var(--orange);
}

.m-count {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-size: 0.68rem;
    line-height: 16px;
    text-align: center;
}

.m-group-title {
    margin: 8px 0 4px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.m-participant-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.m-participant {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.m-participant-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.m-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain; /* pas de « tirer pour rafraîchir » : recharger la page déconnecte */
    padding: 10px 12px;
}

.m-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
}

.m-msg-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid transparent;
}

.m-msg-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.m-msg-sender {
    display: block;
    margin-bottom: 2px;
    font-size: 0.82rem;
    color: hsl(21, 90%, 54%); /* orange du site, fixe : ne suit pas le thème du papier-peint */
}

.m-msg-text {
    word-break: break-word;
    white-space: pre-wrap; /* respecte les retours à la ligne saisis */
}

.m-notice {
    margin: 0 12px 6px;
    color: #c0392b;
    font-size: 0.9rem;
}

.m-pending {
    margin: 0 12px 6px;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 12px;
}

/* Icône photo + mot (« Photo », « Fichier »…) à gauche ; miniature et croix à droite */
.m-pending-label {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: var(--ink);
}

.m-pending-label .ti {
    font-size: 18px;
}

.m-input-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 4px 6px 6px;
    border-top: 1px solid var(--line);
    background: var(--white);
}

.m-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem; /* 16px minimum : évite le zoom automatique d'iOS */
}

.m-input:focus {
    outline: none;
    background: var(--white);
}

/* ---------- Feuilles plein écran (liste d'amis, conversation) ---------- */
.m-sheet {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    display: flex;
    flex-direction: column;
    background: var(--white);
}

.m-conv {
    z-index: 950;
}

/* Glisse depuis la droite avec fondu, même durée que les autres transitions. */
.m-sheet-enter-active,
.m-sheet-leave-active {
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

.m-sheet-enter-from,
.m-sheet-leave-to {
    opacity: 0;
    transform: translateX(24px);
}

.m-sheet-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--line);
}

.m-sheet-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 12px 24px;
}

.m-btn-small {
    min-height: 36px;
    padding: 0 14px;
    font-size: 0.85rem;
}

.m-btn-light {
    background: var(--paper);
    color: var(--ink);
}

.m-pending-list {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

.m-pending-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
}

.m-pending-item span {
    flex: 1 1 100%;
}

.m-add-contact {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.m-friend-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.m-friend {
    display: flex;
    align-items: center;
}

.m-friend-main {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 0;
    border: none;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.m-friend-avatar-wrapper {
    position: relative;
    flex-shrink: 0;
}

.m-friend-avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

/* Pastille de statut : 16 px, centrée sur le bord du cercle de l'avatar
   (moitié dedans, moitié dehors), en bas à droite. */
.m-friend-dot {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 16px;
    height: 16px;
    border: 2px solid var(--white);
}

.m-friend-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.m-count-inline {
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-size: 0.75rem;
    line-height: 20px;
    text-align: center;
}

/* ---------- Conversation privée ---------- */
.m-conv-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.m-conv .tif {
    font-size: 22px;
}

.m-conv-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain; /* pas de « tirer pour rafraîchir » : recharger la page déconnecte */
    padding: 10px 12px;
}

.m-conv-session {
    margin-bottom: 10px;
    text-align: center;
    font-size: 0.78rem;
    color: var(--m-muted-color, var(--muted));
}

.m-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 2px;
}

/* Fin d'un groupe de messages du même expéditeur : plus d'espace avant le suivant */
.m-bubble-row.m-group-end {
    margin-bottom: 6px;
}

/* Place de l'avatar quand il n'est pas affiché (message qui n'est pas le dernier du groupe) */
.m-msg-avatar-spacer {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.m-bubble-row.own {
    justify-content: flex-end;
}

/* Colonne d'un message : nom (salon), bulle + icônes, infobulle, réactions. */
.m-bubble-col {
    min-width: 0;
    max-width: 84%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.m-bubble-col-own {
    align-items: flex-end;
}

.m-bubble-line {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
}

.m-bubble-line-own {
    flex-direction: row-reverse;
}

/* Texte sous la photo / le vocal / le fichier */
.m-caption {
    display: block;
    margin-top: 6px;
}

.m-msg-actions {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

/* Icônes cachées tant qu'on n'a pas touché le message (leur place reste réservée :
   la bulle ne change pas de taille au toucher). Au toucher elles arrivent doucement
   de la gauche (fondu + glissement) ; elles repartent de la même façon. */
.m-msg-actions-hidden {
    opacity: 0;
    transform: translateX(-16px);
    visibility: hidden;
}

.m-msg-action {
    width: 36px;
    height: 40px;
    padding: 0;
    border: none;
    background: none;
    color: var(--m-action-color, var(--ink)); /* pleines ; couleur du texte, ou des traits du svg avec un papier-peint */
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Rappel du message auquel on répond (dans la bulle) */
.m-quote {
    margin-bottom: 6px;
    padding-left: 8px;
    border-left: 3px solid currentColor;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    opacity: 0.85;
}

.m-quote-from {
    font-weight: 700;
    color: var(--m-bubble-name, #121314); /* nom cité, en gras */
}

.m-quote-text {
    word-break: break-word;
}

/* Photo citée : en transparence, pour se distinguer d'une photo envoyée */
.m-quote-image {
    width: auto;
    height: auto;
    max-width: 55vw; /* pas en % : la bulle s'ajuste à son contenu, la photo deviendrait minuscule */
    margin-top: 4px;
    align-self: flex-start;
    border-radius: 6px;
    opacity: var(--quote-image-opacity, 0.25); /* réglé dans private/config.php */
}

.m-reply-image {
    flex-shrink: 0;
    width: auto;
    height: auto;
    max-width: 40vw;
    max-height: 120px;
    border-radius: 4px;
    opacity: var(--quote-image-opacity, 0.25); /* réglé dans private/config.php */
}

/* Infobulle de 5 smileys + « + » */
.m-quick {
    margin-top: 4px;
    padding: 2px 6px;
    display: flex;
    gap: 2px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 999px;
    box-shadow: var(--shadow-dropdown);
}

.m-quick-emoji {
    min-width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: none;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-quick-more {
    color: var(--muted);
    font-size: 1.1rem;
}

/* Réactions : à cheval sur le bord bas de la bulle (moitié dessus, moitié
   dehors). Le contour blanc les détache du message. */
.m-reactions {
    position: relative;
    z-index: 1;
    margin: -12px 12px 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.m-reactions-own {
    justify-content: flex-end;
}

.m-reaction {
    padding: 1px 8px;
    border: 2px solid var(--white);
    border-radius: 999px;
    background: var(--m-pill-bg, var(--paper)); /* avec un papier-peint : le fond du svg */
    box-shadow: 0 0 0 1px var(--line);
    color: var(--ink);
    font-size: 0.85rem;
}

.m-reaction-mine {
    box-shadow: 0 0 0 1px var(--orange);
}

/* « Répondre à … » au-dessus de la zone de saisie */
.m-reply-bar {
    margin: 0 12px 6px;
    padding: 4px 4px 4px 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: var(--orange);
    color: var(--white);
}

.m-reply-cancel {
    color: var(--white);
}

.m-reply-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}

/* Grand sélecteur d'émojis des réactions : une seule instance, en bas de
   l'écran, au-dessus de tout (le bouton smiley d'origine reste caché). */
.m-reaction-picker .emoji-picker-btn {
    display: none;
}

.m-reaction-picker .emoji-picker-panel {
    position: fixed;
    right: 8px;
    bottom: 12px;
    left: 8px;
    width: auto;
    z-index: 1400;
}

.m-bubble {
    min-width: 0;
    padding: var(--bubble-padding, 8px 12px); /* marge intérieure : private/config.php */
    border-radius: 8px; /* coins du bloc (avant : 16px) */
    word-break: break-word;
}

/* Messages groupés : coins de jonction à 4 px (les coins extérieurs sont à 8 px) du côté
   de l'expéditeur (gauche pour les autres, droite pour moi) ; le coin bas du dernier
   message du groupe (« queue ») est à 2 px. */
.m-bubble-row.theirs.m-group-end .m-bubble {
    border-bottom-left-radius: 2px;
}
.m-bubble-row.own.m-group-end .m-bubble {
    border-bottom-right-radius: 2px;
}
.m-bubble-row.theirs .m-bubble-inner {
    border-top-left-radius: 4px;
}
.m-bubble-row.theirs .m-bubble-next {
    border-bottom-left-radius: 4px;
}
.m-bubble-row.own .m-bubble-inner {
    border-top-right-radius: 4px;
}
.m-bubble-row.own .m-bubble-next {
    border-bottom-right-radius: 4px;
}

.m-bubble-row.theirs .m-bubble {
    background: color-mix(in srgb, var(--paper) var(--bubble-opacity, 100%), transparent); /* transparence du fond : private/config.php */
    /* texte : #191a1b sur bulle claire, #737773 sur bulle foncée (thème du svg) ; nom cité en gras #121314 */
    color: var(--m-text-theirs, #191a1b);
    --m-bubble-name: var(--m-name-theirs, #121314);
}

.m-bubble-row.own .m-bubble {
    /* gris un peu plus foncé que celui des autres (--paper) ; transparence du fond : private/config.php */
    background: color-mix(in srgb, var(--m-own-bubble, hsl(30, 10%, 86%)) var(--bubble-opacity, 100%), transparent);
    color: var(--m-text-own, #191a1b);
    --m-bubble-name: var(--m-name-own, #121314);
}

/* ---------- Appels ---------- */
.m-call-round {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

.m-call-accept {
    background: #2ecc71;
}

.m-call-decline,
.m-call-hangup {
    background: #e74c3c;
}

/* Appel entrant : bandeau sous la barre du haut, au-dessus des feuilles. */
.m-call-incoming {
    position: fixed;
    top: var(--navbar-height);
    right: 0;
    left: 0;
    z-index: 1250;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-dropdown);
}

.m-call-incoming-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.m-call-incoming-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.m-call-incoming-info span {
    font-size: 0.85rem;
    color: var(--muted);
}

/* Appel actif : plein écran, par-dessus la barre du haut aussi. */
.m-call {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1300;
    background: #000;
}

.m-call-remote {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.m-call-audio {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1c1d1e;
}

.m-call-audio-avatar {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
}

.m-call-info {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    color: #fff;
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}

.m-call-info span {
    font-size: 0.85rem;
    opacity: 0.85;
}

/* Ma caméra : petite, dans un coin, en miroir. */
.m-call-local {
    position: absolute;
    top: 72px;
    right: 12px;
    width: 96px;
    height: 128px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    background: #222;
    transform: scaleX(-1);
}

.m-call-local-off {
    display: none;
}

.m-call-hangup {
    position: absolute;
    bottom: 32px;
    left: 50%;
    width: 68px;
    height: 68px;
    transform: translateX(-50%);
    font-size: 30px;
}

/* ---------- Icônes de la barre du haut (salons publics, amis) ---------- */
.m-nav-actions {
    display: flex;
    align-items: center;
}

.m-nav-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: none;
    font-size: 24px;
    cursor: pointer;
}

/* ---------- Zone de saisie qui grandit ----------
   Une seule rangée : outils (papier-peint, trombone, micro) | champ | envoyer.
   Dès qu'on écrit (.m-composer-open = du texte dans le champ) les trois outils se
   regroupent derrière un bouton « + » (colonne 1 réduite de 120 à 44 px, en
   douceur) et le champ s'élargit vers la gauche ; il grandit d'une ligne à la
   fois jusqu'à 6 lignes (js/mobile.js, mobileAutoGrow) puis défile. Tout est
   calé en bas : outils et « envoyer » restent à la hauteur de la dernière ligne. */
.m-composer {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 120px 1fr 44px;
    align-items: end;
    gap: 0 2px;
    padding: 8px 8px 4px;
    border-top: 1px solid var(--line);
    background: var(--white);
    transition: grid-template-columns 0.6s ease-out;
}

.m-composer-open {
    grid-template-columns: 44px 1fr 44px;
}

.m-composer-tools {
    position: relative;
    display: flex;
    justify-content: flex-start;
    overflow: visible;
}

.m-tools-list {
    display: flex;
}

/* Outils ouverts pendant l'écriture : pastille au-dessus du bouton « + » */
.m-tools-pop {
    position: absolute;
    left: 0;
    bottom: calc(100% + 6px);
    z-index: 5;
    padding: 4px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
}

.m-composer-tools .m-icon-btn {
    width: 40px;
}

.m-composer-field {
    grid-column: 2;
    position: relative;
    min-width: 0;
}

.m-composer-send {
    grid-column: 3;
}

.m-textarea {
    display: block;
    width: 100%;
    min-height: 44px;
    max-height: 154px;
    padding: 10px 46px 10px 14px; /* place à droite pour le smiley */
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem; /* 16px minimum : évite le zoom automatique d'iOS */
    line-height: 1.4;
    resize: none;
    overflow-y: auto;
    transition: border-radius 0.3s ease-out, background-color 0.3s ease-out;
}

/* Vide : hauteur imposée d'une ligne, quoi qu'ait posé le JavaScript en ligne
   (la grande taille restait après l'envoi). */
.m-composer:not(.m-composer-open) .m-textarea {
    height: 44px !important;
    overflow-y: hidden; /* pas de barre de défilement dans le champ vide */
}

.m-composer-open .m-textarea {
    border-radius: 22px;
    background: var(--white);
}

.m-textarea:focus {
    outline: none;
}

/* Smiley : en haut à droite du champ. Le panneau s'ouvre vers le haut,
   aligné sur le bord droit pour ne pas sortir de l'écran. */
.m-composer-emoji {
    position: absolute;
    bottom: 0;
    right: 2px;
}

.m-composer-emoji .emoji-picker-panel {
    /* Toute la largeur de l'écran, juste au-dessus de la zone de saisie (position
       mesurée par emoji.js : --m-emoji-bottom). Avant, alignée sur le smiley, elle
       débordait à gauche de l'écran. */
    position: fixed;
    right: 8px;
    bottom: var(--m-emoji-bottom, 80px);
    left: 8px;
    width: auto;
    /* Limitée à la place disponible (clavier ouvert compris) ; la grille défile. */
    max-height: min(360px, calc(100dvh - var(--navbar-height) - 200px));
}

.m-spacer {
    flex: 1;
}

/* ---------- Mon profil et création/édition de salon : page pleine sur mobile ----------
   Mêmes fenêtres que le bureau (profil.php, salon.php), mais plein écran sous
   la barre du haut au lieu d'une fenêtre centrée. */
.is-mobile .profil-overlay,
.is-mobile .roomform-overlay {
    top: var(--navbar-height);
    padding: 0;
    background: var(--white);
    align-items: stretch;
}

.is-mobile .profil-modal,
.is-mobile .roomform-modal {
    width: 100%;
    max-height: none;
    padding: 0 16px 24px;
    border-radius: 0;
    box-shadow: none;
}

.is-mobile .profil-header,
.is-mobile .roomform-header {
    margin: 0 -16px 12px;
    padding: 0 16px;
    border-radius: 0;
}

/* ---------- Papier-peint (js/wallpaper.js) ----------
   Les motifs de images/papier-pain/ sont sombres : un voile de la couleur de
   fond (80 % de blanc) les rend transparents et les fond dans la page. Pour un
   motif plus marqué, baisser le 80 % ; plus discret, l'augmenter. */
.m-wall-page {
    position: fixed;
    inset: 0;
    z-index: -1; /* derrière la liste, les bandes et la zone de saisie, y compris sous la barre du haut */
    background-image:
        linear-gradient(color-mix(in srgb, var(--white) var(--wall-veil-white, 80%), transparent), color-mix(in srgb, var(--white) var(--wall-veil-white, 80%), transparent)),
        var(--wall-image);
}

/* Bandes (en-tête, zone de saisie, barre du haut) : 55 % transparentes quand un
   papier-peint est posé, pour qu'il se voie à travers. Le champ où l'on écrit
   reste opaque. */
.m-bar-wall {
    background: color-mix(in srgb, var(--white) var(--wall-bar-white, 45%), transparent);
}

.m-navbar-wall {
    background: color-mix(in srgb, var(--white) var(--wall-bar-white, 45%), transparent);
    backdrop-filter: none;
}

.m-wall-picker {
    position: absolute;
    right: 8px;
    bottom: calc(100% + 6px);
    z-index: 5;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-dropdown);
}

.m-wall-row {
    display: flex;
    gap: 6px;
}

/* Liste des autres papiers-peints (bouton « + ») : passe à la ligne, défile si longue */
.m-wall-more {
    max-width: 270px;
    max-height: 40vh;
    padding-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    overflow-y: auto;
    border-top: 1px solid var(--line);
}

.m-wall-item {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 2px solid var(--line);
    border-radius: 8px;
    background-color: var(--paper);
    background-size: 40px;
    color: var(--muted);
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.m-wall-current {
    border-color: var(--orange);
}

/* Page des participants : plein écran sous la barre du haut ET l'en-tête du
   salon (57 px : 44 px de boutons + marges), qui reste visible. */
.m-participants-page {
    top: calc(var(--navbar-height) + 57px);
}

/* ---------- Thème des couleurs du papier-peint (images/papier-pain/*.svg) ----------
   Quand un papier-peint est choisi, la page du salon, la conversation privée et
   la barre du haut prennent les couleurs DE CE SVG : fond (--svg-bg) et traits
   (--svg-accent), lues dans le fichier par index.php puis posées en style par
   js/wallpaper.js (wallpaperThemeStyle) avec le texte clair ou foncé
   (--svg-ink, --svg-on-accent) choisi selon la luminosité. Les valeurs de repli
   ci-dessous sont celles des svg actuels (#2b2b31 / #ecc94b). On ne change que
   les variables de couleur du site : bulles, bandes, champ, icônes suivent toutes
   seules (l'orange devient la couleur des traits, le blanc devient le fond du
   svg). Les transparences de config.php s'appliquent toujours. */
.m-theme-svg,
.m-navbar-wall {
    --white: var(--svg-bg, #2b2b31);
    --paper: color-mix(in srgb, var(--svg-bg, #2b2b31) 90%, var(--svg-ink, #f3f0e6));    /* bulle des autres : un cran d'écart avec le fond */
    --ink: var(--svg-ink, #f3f0e6);
    --muted: color-mix(in srgb, var(--svg-ink, #f3f0e6) 65%, var(--svg-bg, #2b2b31));
    --line: color-mix(in srgb, var(--svg-bg, #2b2b31) 82%, var(--svg-ink, #f3f0e6));
    --orange: var(--svg-accent, #ecc94b);
    --orange-dark: color-mix(in srgb, var(--svg-accent, #ecc94b) 65%, var(--svg-ink, #f3f0e6));   /* noms d'expéditeur */
    --m-own-bubble: var(--svg-accent, #ecc94b);   /* ma bulle */
    --m-action-color: var(--svg-accent, #ecc94b);   /* icônes répondre / réagir */
    --m-pill-bg: var(--svg-bg, #2b2b31);            /* pastilles de réaction : fond du svg */
    --icon-c1: var(--svg-accent, #ecc94b);
    --icon-c2: var(--svg-accent, #ecc94b);
    --icon-c3: var(--svg-accent, #ecc94b);
    --icon-c4: var(--svg-accent, #ecc94b);
    --icon-c5: var(--svg-accent, #ecc94b);
    --icon-c6: var(--svg-accent, #ecc94b);
    --icon-logout: color-mix(in srgb, hsl(0, 85%, 60%) 70%, var(--svg-ink, #f3f0e6));
    color: var(--ink);
}

/* Rôles dans la liste des participants : mêmes couleurs que la version bureau
   (salon.css) — propriétaire rouge, admin vert, membre orange, visiteur gris. */
.m-group-title.affiliation-owner,
.m-participant-name.affiliation-owner {
    color: #e53935;
}

.m-group-title.affiliation-admin,
.m-participant-name.affiliation-admin {
    color: #43a047;
}

.m-group-title.affiliation-member,
.m-participant-name.affiliation-member {
    color: #fb8c00;
}

.m-group-title.affiliation-none,
.m-participant-name.affiliation-none {
    color: #9e9e9e;
}