/* ============================================================
   ZETBOO — Salons publics (MUC)
   ============================================================ */

/* .page (défini dans style.css) porte une grille pensée pour la home
   page (intro/hero/cards/cta/footer) — inadaptée ici, donc on repasse
   en layout vertical simple pour .salon-page tout en gardant .header,
   .logo, .header-label déjà stylés. Sélecteur à une seule classe : ce
   fichier est chargé après style.css, à priorité égale il l'emporte sur .page. */
.salon-page {
    display: block;
    width: calc(100% - 40px);
    max-width: 1600px;
    /* max-height relatif à la fenêtre : évite qu'un écran bas force un
       scroll interne inutile alors que 1030px ne tiendrait pas dessus.
       var(--navbar-height) (style.css) au lieu d'un 48px codé en dur ici. */
    max-height: min(1030px, calc(100vh - var(--navbar-height)));
    overflow-y: auto;
    margin: 0 auto;
    padding: 24px 0 40px;
}

/* Dans un salon (voir salon.php, :class sur .salon-page) : une hauteur
   fixe (pas juste un plafond) et overflow:hidden — plus de scroll possible
   ici ni sur .salon-chat-section, seul .messages-container défile en
   interne. .salon-body/.salon-chat-section remplissent cette hauteur
   structurellement (height:100%/align-self:stretch, voir plus bas) au lieu
   de la recalculer indépendamment.
   Cette règle doit rester APRÈS .salon-page : même priorité (une classe),
   c'est l'ordre du fichier qui lui donne le dernier mot sur overflow.
   [CORRECTION] - 0.1rem en plus : .main-content (chat-layout.css) a une
   bordure haute de 0.1rem jamais comptée ici, qui grignotait 1-2px sur
   l'espace réellement disponible — d'où le scroll résiduel malgré une
   hauteur par ailleurs correcte. Ne touche pas à .app-body/.main-content
   eux-mêmes : partagés par toutes les pages du site, un overflow:hidden
   dessus casserait le scroll normal de pages plus longues qu'un écran
   (accueil, etc.). */
.salon-page-chat-open {
    height: min(1030px, calc(100vh - var(--navbar-height) - 0.1rem));
    overflow: hidden;
}

/* ---------- Menu déroulant "Salons visités" (navbar, voir index.php) ----------
   Même mécanique que "Mes salons" (.nav-my-rooms-wrapper) :
   v-if + <Transition name="submenu"> (comme "Idiomas"/"Statut" dans le menu
   du compte), pas de panneau animé en tête de page. Pas de max-height propre
   ici : ça entrerait en conflit avec celui animé par la transition
   "submenu" (.submenu-* dans style.css) — la liste se limite donc à ses
   320px comme les autres sous-menus. */
.nav-visited-rooms-wrapper {
    position: relative;
}

.visited-rooms-dropdown {
    width: min(360px, 100%);
}

.visited-rooms-dropdown .empty-msg {
    padding: 10px 16px;
    font-size: 0.85rem;
}

.visited-rooms-dropdown .visited-room-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.visited-room-name {
    font-weight: 700;
    color: var(--ink);
}

.visited-room-desc {
    max-width: 100%;
    color: var(--muted);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Corps de la page (liste des salons publics ou salon courant) ---------- */
.salon-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    /* Sans effet en dehors d'un salon (.salon-page n'a alors qu'un
       max-height, pas de hauteur définie — un pourcentage y est ignoré) ;
       remplit .salon-page-chat-open une fois dans un salon, voir plus haut. */
    height: 100%;
}

.salon-body > .salon-list-section,
.salon-body > .salon-chat-section {
    flex: 1;
    min-width: 0;
}

/* ---------- Liste des salons ---------- */
.salon-list-section {
    max-width: min(1200px, 100%);
    margin: 0 auto;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(20px, 4vw, 32px);
}

.salon-list-section h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: var(--ink);
}

/* Recherche de salon — déplacée depuis la navbar (index.php) directement
   ici, à côté des salons qu'elle filtre (voir filteredSalons, salon.js). */
.salon-search-input {
    display: block;
    width: 100%;
    max-width: 320px;
    padding: 0.5rem 1rem;
    margin-bottom: 18px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background-color: var(--bg-lang-btn);
    color: var(--text-main);
    font: inherit;
    font-size: 0.9rem;
}

.salon-search-input::placeholder {
    color: var(--muted);
}

.salon-search-input:focus {
    outline: none;
}

.loading-msg,
.empty-msg {
    padding: 20px 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.92rem;
}

.error-box {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.25);
    color: #b91c1c;
    font-size: 0.88rem;
    text-align: center;
}

.success-box {
    margin-bottom: 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(67, 160, 71, 0.08);
    border: 1px solid rgba(67, 160, 71, 0.25);
    color: #2e7d32;
    font-size: 0.88rem;
    text-align: center;
}

/* ---------- Popup "Mon profil" (profil.php) — réutilise les classes de la
   modale de création de salon (.room-create-overlay/.room-create-modal/
   .rc-modal-header/.rc-section/.rc-field/.btn-join/.btn-secondary). ---------- */
.profil-avatar-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profil-avatar-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
}

.profil-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

.profil-avatar-preview.is-loading {
    opacity: 0.4;
}

/* Icône de chargement pendant l'envoi/redimensionnement de l'avatar. */
.profil-avatar-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--orange);
    animation: profil-avatar-spin 0.8s linear infinite;
}

@keyframes profil-avatar-spin {
    to { transform: rotate(360deg); }
}

.profil-avatar-upload {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.profil-avatar-upload.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.profil-jid-display {
    font-size: 0.9rem;
    color: var(--muted);
    word-break: break-all;
}

/* Fiche profil d'un participant, ouverte depuis la liste du salon
   (.profile-modal réutilisé — voir chat-layout.css). */
.profil-view-bio {
    font-size: 0.88rem;
    color: var(--ink);
    line-height: 1.4;
    margin: 0 0 14px;
}

.profil-view-facts {
    list-style: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profil-view-facts li strong {
    color: var(--ink);
}

/* Grille des salons disponibles — 3 cartes par rangée sur desktop, moins sur
   petits écrans (voir médias ci-dessous). */
.salon-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.salon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 14px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: inherit;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
}

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

/* Étoile « favori » posée sur la carte (bouton à part : un bouton ne peut pas en contenir un autre) */
.salon-card-wrap {
    position: relative;
}

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

.salon-fav-btn:hover {
    background: rgba(255, 255, 255, 0.85);
}

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

.salon-card:hover:not(:disabled) {
    filter: brightness(0.96);
}

.salon-card:active:not(:disabled) {
    transform: scale(0.98);
}

.salon-card:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.salon-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--line);
}

.salon-card-name {
    font-weight: 700;
    color: var(--ink);
}

.salon-card-desc {
    color: var(--muted);
    font-size: 0.75rem;
    line-height: 1.3;
    /* Hauteur fixe (3 lignes) réservée même sans description ou avec une
       description courte — pour que toutes les cartes de la grille gardent
       les mêmes proportions, peu importe leur contenu. */
    min-height: calc(1.3em * 3);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

@media (max-width: 900px) {
    .salon-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .salon-grid { grid-template-columns: 1fr; }
}

.btn-join {
    flex-shrink: 0;
    padding: 8px 18px;
    border: none;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-join:hover:not(:disabled) {
    background: var(--orange-dark);
}

.btn-join:active:not(:disabled) {
    transform: scale(0.96);
}

.btn-join:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ---------- Conversation dans un salon ----------
   Classes partagées avec messenger.php (room-header, messages-container,
   room-input, message-row, message-sender, message-text) : les styler
   ici les rend cohérentes partout où elles apparaissent dans la SPA. */
.salon-chat-section {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    /* [CORRECTION] Remplit .salon-body (height:100%, voir plus haut) au lieu
       de recalculer sa propre hauteur en dupliquant la formule de
       .salon-page — ce calcul en parallèle finissait toujours par
       dévier d'un pixel ou deux (bordure, arrondis), ce qui déclenchait le
       scroll de la page. align-self:stretch plutôt que align-items:stretch
       sur .salon-body : .salon-list-section garde sa taille de contenu. */
    align-self: stretch;
    min-height: 0;
}

.room-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.room-header-titles {
    min-width: 0;
    flex: 1 1 0;
}

/* Espace réservé de la largeur du panneau participants, entre le texte et
   le bouton "Quitter" : empêche le texte de s'étendre sous ce panneau tout
   en laissant le bouton à sa position d'origine (bord droit). */
.room-header-spacer {
    flex: 0 0 clamp(180px, 18vw, 272px);
}

.room-desc {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.room-desc.is-editable {
    cursor: pointer;
    border-radius: 6px;
}

.room-desc.is-editable:hover {
    background: var(--bg-hover-light);
}

.room-desc-edit {
    width: 100%;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: inherit;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--orange);
    border-radius: 6px;
    padding: 4px 6px;
    resize: vertical;
    min-height: 42px;
}

.room-desc-edit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.15);
}

/* Corps de la conversation : messages+saisie à gauche, participants à droite */
.salon-chat-body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.salon-chat-main {
    position: relative; /* repère du calque du papier-peint */
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* ---------- Panneau participants (colonne de droite) ---------- */
.participants-panel {
    flex-shrink: 0;
    /* Rétrécit en fluide avec l'écran plutôt qu'un saut brutal, jusqu'à la
       bascule sous 640px. */
    width: clamp(180px, 18vw, 272px);
    border-left: 1px solid var(--line);
    background: var(--paper);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.participants-title {
    flex-shrink: 0;
    padding: 14px 16px 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.participants-list {
    list-style: none;
    padding: 0 8px 12px;
}

.participant-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
}

.participant-item:hover {
    background: var(--bg-hover-item);
}

.participant-item.is-clickable {
    cursor: pointer;
}

.participant-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 0.2rem solid transparent;
}

.participant-name {
    font-size: 0.85rem;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.participant-group-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 6px 8px 2px;
    margin: 0;
}

.participant-name.affiliation-owner,
.participant-group-title.affiliation-owner {
    color: #e53935;
}

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

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

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

@media (max-width: 640px) {
    .salon-body {
        flex-direction: column;
    }

    .salon-chat-body {
        flex-direction: column;
    }

    .room-header-spacer {
        display: none;
    }

    .participants-panel {
        width: auto;
        max-height: 140px;
        border-left: none;
        border-top: 1px solid var(--line);
    }

    .participants-list {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 8px;
    }

    .participant-item {
        width: auto;
    }
}

.room-name-small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--muted);
    margin: 2px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-secondary {
    flex-shrink: 0;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--muted);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.btn-secondary:hover {
    border-color: var(--orange);
    color: var(--orange-dark);
}

.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.messages-container .message-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 2px;
    line-height: 1.5;
}

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

/* Place de l'avatar quand il n'est pas affiché (messages qui ne sont pas les derniers du groupe) */
.messages-container .message-avatar-spacer {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.messages-container .message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 2px;
    border: 2px solid transparent;
}

.messages-container .message-content {
    min-width: 0;
}

.messages-container .message-sender {
    display: block;
    color: var(--orange-dark);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.messages-container .message-text {
    color: var(--ink);
    word-break: break-word;
}

.room-input {
    display: flex;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}

.room-input input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--ink);
    background: var(--paper);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.room-input input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.15);
    background: var(--white);
}

.room-attach {
    display: flex;
    flex-shrink: 0;
}

.room-attach button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
}

.room-attach button:hover {
    color: var(--orange);
}

.room-attach button.recording {
    color: #d93025;
}

.room-input > button {
    flex-shrink: 0;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.room-input > button:hover {
    background: var(--orange-dark);
}

/* ---------- Papier-peint, réponses et réactions du salon (comme la fenêtre de message privé) ----------
   Le calque du papier-peint est derrière les messages ET la zone de saisie ; ceux-ci
   passent devant (position:relative) et restent transparents. Motif sous un voile de
   la couleur du fond (--wall-veil-white de config.php). */
.salon-wall-layer {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in srgb, var(--paper) var(--wall-veil-white, 80%), transparent), color-mix(in srgb, var(--paper) var(--wall-veil-white, 80%), transparent)),
        var(--wall-image);
}

.messages-container,
.room-composer,
.salon-chat-main .pending-file,
.salon-chat-main .salon-reply-bar {
    position: relative;
}

.messages-container {
    --m-bubble-name: var(--ink); /* nom cité dans une citation */
}

/* Avatar en bas du message (à côté de la bulle, pas du nom) */
.messages-container .message-avatar {
    align-self: flex-end;
    margin-top: 0;
}

/* Ligne de la bulle : icônes d'action à droite, centrées sur la bulle, visibles
   seulement quand la souris est sur le message. */
.salon-bubble-line {
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 2px;
}

.salon-actions {
    flex-shrink: 0;
    display: flex;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.message-row:hover .salon-actions,
.salon-actions:focus-within {
    opacity: 1;
}

/* Bulle du message : même fond que « messages de l'autre » de la fenêtre privée
   (fond blanc, trait, texte normal), pour tous les messages. */
.salon-bubble {
    width: fit-content;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    border-bottom-left-radius: 2px;
    background: var(--white);
    color: var(--ink);
    word-break: break-word;
}

/* Coins de jonction à gauche (entre deux bulles d'un même expéditeur) : 8 px.
   Le coin bas-gauche du dernier message du groupe reste à 2 px. */
.salon-bubble-inner {
    border-top-left-radius: 8px;
}

.salon-bubble-next {
    border-bottom-left-radius: 8px;
}

.salon-reactions {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.salon-quick {
    width: fit-content;
    margin-top: 4px;
}

.salon-chat-main .salon-reply-bar {
    margin: 0 20px 6px;
}

/* Zone de saisie : outils | champ (smiley dedans, à droite) | envoyer. Dès qu'on écrit,
   les outils passent derrière un « + » et le champ s'élargit (0,6 s). */
.room-composer {
    display: grid;
    grid-template-columns: 90px 1fr auto;
    align-items: end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    flex-shrink: 0;
    transition: grid-template-columns 0.6s ease-out;
}

.room-composing {
    grid-template-columns: 30px 1fr auto;
}

.room-tools {
    position: relative;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

.room-tools-plus,
.room-tools-list > button {
    width: 30px;
    height: 30px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--muted);
    font-size: 20px;
    cursor: pointer;
}

.room-tools-plus:hover,
.room-tools-list > button:hover {
    color: var(--orange);
}

.room-tools-list > button.recording {
    color: #d93025;
}

.room-field {
    min-width: 0;
    display: flex;
    align-items: flex-end;
}

/* Champ : 1 ligne au repos, grandit avec le texte jusqu'à 6 lignes (fitRoomInput,
   salon.js), puis défile. */
.room-textarea {
    display: block;
    flex: 1;
    min-width: 0;
    min-height: 44px;
    max-height: 158px;
    padding: 10px 44px 10px 14px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 0.92rem;
    line-height: 22px;
    resize: none;
    overflow-y: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.room-textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px rgba(243, 107, 33, 0.15);
    background: var(--white);
}

/* Smiley DANS le champ, à droite : la marge négative le fait recouvrir la fin du champ.
   Le conteneur du bouton n'est pas positionné, pour que la fenêtre des émojis se cale
   sur la zone de saisie (bord droit, 20 px de marge). */
.room-emoji {
    flex-shrink: 0;
    margin-left: -42px;
    margin-bottom: 7px;
    display: flex;
}

.room-emoji .emoji-picker-btn {
    width: 30px;
    height: 30px;
}

.room-emoji .emoji-picker-wrapper {
    position: static;
}

.room-emoji .emoji-picker-panel {
    left: auto;
    right: 20px;
}

/* Sélecteur de papier-peint : aligné sur le bord gauche de la zone de saisie */
.room-composer .m-wall-picker {
    left: 20px;
    right: auto;
}

.room-composer > button[type="submit"] {
    height: 44px;
    padding: 0 22px;
    border: none;
    border-radius: 999px;
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.room-composer > button[type="submit"]:hover {
    background: var(--orange-dark);
}

/* ---------- Sélecteur d'émojis (voir js/emoji.js) ---------- */
.emoji-picker-wrapper {
    position: relative;
}

.emoji-picker-wrapper .emoji-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    flex-shrink: 0;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.emoji-picker-panel {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    width: 320px;
    max-height: 360px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-dropdown);
    z-index: 1001;
    overflow: hidden;
}

.emoji-picker-panel .emoji-picker-tabs-wrapper {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--line);
}

.emoji-picker-panel .emoji-picker-tabs {
    display: flex;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    /* Pas de barre de scroll visible du tout — molette (scrollEmojiTabs) et
       flèches (.emoji-picker-tab-arrow ci-dessous) suffisent. */
    scrollbar-width: none; /* Firefox */
}

.emoji-picker-panel .emoji-picker-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}

.emoji-picker-panel .emoji-picker-tab-arrow {
    flex-shrink: 0;
    width: 22px;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: var(--muted);
    cursor: pointer;
}

.emoji-picker-panel .emoji-picker-tab {
    flex-shrink: 0;
    padding: 4px 8px;
    border: none;
    background: none;
    font-size: 1rem;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.emoji-picker-panel .emoji-picker-tab:hover {
    opacity: 0.8;
}

.emoji-picker-panel .emoji-picker-tab.active {
    opacity: 1;
}

.emoji-picker-panel .emoji-picker-search {
    flex-shrink: 0;
    margin: 10px 0;
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.85rem;
    background: var(--paper);
}

.emoji-picker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    padding: 0;
}

.emoji-picker-grid .emoji-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
}

.emoji-picker-grid .emoji-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ============================================================
   Page "Messages privés" — même carte/mise en page que les salons
   (.room-header, .messages-container, .message-row, .room-input
   sont déjà stylés ci-dessus et partagés avec messenger.php).
   ============================================================ */
.page.messenger-page {
    display: block;
    width: min(720px, calc(100% - 40px));
    margin: 0 auto;
    padding: 24px 0 40px;
}

.messenger-page .header {
    border-bottom: 1px solid var(--line);
    margin-bottom: 24px;
}

.thread-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.thread-tabs button {
    padding: 6px 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--white);
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.thread-tabs button:hover {
    border-color: var(--orange);
    color: var(--orange-dark);
}

.thread-tabs button.active {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
}

.thread-section {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: min(70vh, 640px);
}

.thread-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

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

/* Input d'envoi de message plus haut, spécifique à cette page (le salon
   garde sa hauteur d'origine, .room-input étant une classe partagée). */
.thread-section .room-input input {
    height: 48px;
}

/* ============================================================
   Modale de création de salon (XEP-0045, formulaire muc#owner)
   ============================================================ */
.room-create-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    z-index: 1100;
}

.room-create-modal {
    position: relative;
    background: var(--white);
    border-radius: 16px;
    padding: 0 24px 24px;
    width: min(720px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

/* Popup "Mon profil" (profil.php) uniquement — plus large que la modale de
   création de salon, mais le contenu reste centré dans un bloc de la même
   largeur qu'avant (720px) pour ne pas étirer les champs de formulaire sur
   toute la largeur. Ombre allégée à 1px pour un rendu plus sobre. */
.room-create-modal.profil-modal {
    width: min(960px, 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.rc-modal-content {
    width: min(720px, 100%);
    margin: 0 auto;
}

/* En-tête (titre + croix de fermeture) : reste visible au défilement du
   contenu du formulaire, qui peut être long (formulaire de configuration).
   La modale n'a plus de padding en haut (voir ci-dessus) : c'est cet
   en-tête qui occupe toute cette zone, sur exactement 57px. */
.rc-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 57px;
    box-sizing: border-box;
    margin: 0 -24px 16px;
    padding: 0 24px;
    background: var(--white);
    border-radius: 16px 16px 0 0;
}

.rc-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
}

.room-create-modal .btn-close-popup {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--orange);
    color: var(--white);
    cursor: pointer;
    line-height: 1;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.room-create-modal .btn-close-popup:hover {
    background: var(--orange-dark);
}

.rc-section {
    margin-bottom: 20px;
}

.rc-section-roominfo {
    max-width: 680px;
}

.rc-section h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

.rc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}

.rc-field:last-child {
    margin-bottom: 0;
}

/* Deux champs côte à côte (Genre/Orientation, Date/Statut relationnel dans
   "À propos de vous") plutôt qu'empilés un par un. */
.rc-field-row {
    display: flex;
    gap: 14px;
    margin-bottom: 14px;
}

.rc-field-row .rc-field {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.rc-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
}

.rc-hint {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
}

.rc-field input[type="text"],
.rc-field input[type="password"],
.rc-field input[type="number"],
.rc-field input[type="email"],
.rc-field input[type="date"],
.rc-field select,
.rc-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper);
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.rc-field input[type="text"]:focus,
.rc-field input[type="password"]:focus,
.rc-field input[type="number"]:focus,
.rc-field input[type="email"]:focus,
.rc-field input[type="date"]:focus,
.rc-field select:focus,
.rc-field textarea:focus {
    outline: none;
    border-color: var(--orange-light);
    background: var(--white);
}

.rc-textarea-desc {
    height: 70px;
    resize: vertical;
}

.rc-char-count {
    align-self: flex-end;
}

.rc-input-short {
    max-width: 140px;
}

.rc-password-wrapper {
    position: relative;
    display: flex;
}

.rc-password-wrapper input {
    flex: 1;
    padding-right: 40px !important;
}

.rc-password-toggle {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted);
    border-radius: 50%;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.rc-password-toggle:hover {
    background: var(--bg-hover-item);
    color: var(--orange-dark);
}

.rc-toggle {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
}

.rc-toggle:last-child {
    margin-bottom: 0;
}

.rc-toggle input[type="checkbox"] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    accent-color: var(--orange);
    flex-shrink: 0;
    cursor: pointer;
}

.rc-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

/* ============================================================
   Petits écrans (max-width: 480px) — regroupés ici, après toutes
   les règles de base des sélecteurs concernés.
   ============================================================ */
@media (max-width: 480px) {
    .salon-chat-section {
        border-radius: 12px;
    }

    .room-header,
    .room-input,
    .room-composer {
        padding: 12px 14px;
    }

    .messages-container {
        padding: 12px 14px;
    }

    .emoji-picker-panel {
        width: min(300px, 90vw);
    }

    .thread-section {
        height: min(75vh, 560px);
        border-radius: 12px;
    }

    .rc-field-row {
        flex-direction: column;
        gap: 14px;
    }

    .room-create-modal {
        padding: 22px 16px 18px;
        border-radius: 12px;
    }
}