/* 0) on initialise la variable */
:root {
    --vh: 1vh;
}

/* 1) offcanvas en colonne, hauteur dynamique via --vh */
.offcanvas-body.monchat {
    display: flex;
    flex-direction: column;
    /* calcule 100 * la 1% de la hauteur actuelle de la fenêtre */
    height: calc(var(--vh) * 100);
    padding: 0.5rem;
}




/* 2) onglets en flex pour remplir l’espace */
.monchat .tab-content {
    flex: 1 1 auto; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 3) chaque pane est elle-même colonne flex */
.monchat .tab-pane {
    height:100%;
}

    /* 4) on cible le 2 .col-12 (celui qui contient #conversationChat) */
    .monchat .tab-pane > .col-12:nth-child(2) {
        overflow: hidden;
    }

/* 5) zone de messages */
#conversationChat {
    overflow-y: auto;
    padding: 10px;
    padding-bottom : 70px;
    height:100%;
    border: none;
    margin-left: 1px;
}

/* 6) saisie et bouton ne grandissent pas */
.monchat .tab-pane > .col-12:nth-child(3),
.monchat .tab-pane > .col-12:nth-child(4) {
    /*flex: 0 0 auto;*/
}

/* 7) tes règles existantes pour le reste */
#utilisateurEntete,
#conversationsEntete {
    margin: 8px 0;
}

#chatEntete h6 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#listeConversations {
    margin-bottom: 3px;
    border-radius: 0 !important;
}

#messageChatInput {
    border-radius: 0 !important;
    margin-top: 3px;
}

#hideConversationBtn {
    margin-top: 3px;
}

.monchat .message small {
    display: block;
    font-size: 10px;
}

.monchat .conversation-item .titre,
.monchat .conversation-item .preview {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.monchat .conversation-item .titre {
    display: block;
}

.monchat .conversation-item small {
    display: block;
    font-size: 10px;
}

.monchat .conversation-item .preview {
    font-size: 12px;
    color: grey;
}