/* -------------------------------------------------------------
   1. DESKTOP WEERGAVE
------------------------------------------------------------- */
#chat-frame {
    width: 100% !important;
    /* calc(100vh - header_hoogte - marges) */
    /* Pas 160px eventueel aan naar bijv. 140px of 180px voor de perfecte marge */
    height: calc(100vh - 140px) !important; 
    min-height: 550px;
    border: none;
    border-radius: 8px;
    background: #111;
    margin-bottom: 20px;
    box-sizing: border-box;
    display: block;
}

/* Zorg dat de wrapper-container geen vaste hoogte heeft op desktop */
.container {
    min-height: auto;
}

/* -------------------------------------------------------------
   2. MOBIELE WEERGAVE (Schermen smaller dan 768px)
------------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* Haal marges en padding op mobiel weg als de chat actief is */
    .container:has(#chat-frame[style*="display: block"]) {
        padding: 0 !important;
        margin: 0 !important;
        max-width: 100% !important;
    }

    #chat-frame {
        width: 100vw !important;
        height: calc(100vh - 70px) !important; /* Sluit direct aan onder het menu */
        border-radius: 0 !important;
        margin: 0 !important;
    }
}