/* ======================
   MAIN CHAT
====================== */
.mfx-chat{
display:flex;
height:100%;
background:#000;
color:#fff;
border-radius:12px;
overflow:hidden;
}

/* ======================
   SIDEBAR
====================== */
.mfx-chat-sidebar{
width:30%;
background:#000;
border-right:1px solid #222;
display:flex;
flex-direction:column;
}

.mfx-chat-title{
padding:15px;
font-weight:bold;
border-bottom:1px solid #222;
}

/* USERS */
#mfx-users{
flex:1;
overflow-y:auto;
}

.mfx-user{
padding:12px;
cursor:pointer;
border-bottom:1px solid #111;

/* 🔥 FIX toegevoegd */
display:flex;
align-items:center;
}

.mfx-user:hover{
background:#111;
}

/* DOT */
.dot{
width:8px;
height:8px;
border-radius:50%;
margin-right:8px;
background:#555;
display:inline-block;
}

.dot.online{
background:#2ecc71;
}

/* ======================
   MAIN RIGHT
====================== */
.mfx-chat-main{
flex:1;
display:flex;
flex-direction:column;
}

/* HEADER */
#mfx-chat-header{
padding:15px;
border-bottom:1px solid #222;
}

/* ======================
   CHAT BOX
====================== */
#mfx-chat-box{
flex:1;
padding:15px;
overflow-y:auto;
display:flex;
flex-direction:column;
}

/* ======================
   MESSAGES
====================== */
.message{
display:flex;
margin:6px 0;
}

.message.me{
justify-content:flex-end;
}

.message.other{
justify-content:flex-start;
}

.bubble{
padding:10px 14px;
border-radius:16px;
max-width:70%;
font-size:14px;
}

/* JOUW */
.message.me .bubble{
background:#E10600;
color:#fff;
}

/* ANDER */
.message.other .bubble{
background:#1a1a1a;
color:#fff;
}

/* ======================
   INPUT
====================== */
.mfx-chat-input{
display:flex;
gap:10px;
padding:10px;
background:#000;
border-top:1px solid #222;
flex-shrink:0;
}

#mfx-message{
flex:1;
padding:10px;
background:#111;
border:none;
color:#fff;
border-radius:20px;
}

/* BUTTONS */
#mfx-send,
#mfx-upload,
#mfx-voice{
width:40px;
height:40px;
border-radius:50%;
background:#E10600;
color:#fff;
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}

/* ======================
   TYPING
====================== */
#typing{
font-size:12px;
color:#aaa;
padding:5px 15px;
}

#mfx-upload span,
#mfx-voice span {
    filter: brightness(0) invert(1);
}

.mfx-chat-box img {
    max-width: 200px;
    border-radius: 8px;
}

/* 🔥 BELANGRIJK: avatar fix */
.message .avatar {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    border-radius: 50%;
    object-fit: cover;
}

.mfx-voice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #111;
    padding: 10px 14px;
    border-radius: 20px;
    max-width: 260px;
}

.mfx-voice .play {
    background: #E10600;
    border: none;
    color: #fff;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
}

.mfx-voice .bar {
    flex: 1;
    height: 4px;
    background: #333;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.mfx-voice .progress {
    height: 100%;
    width: 0%;
    background: #E10600;
}

.mfx-voice .time {
    font-size: 12px;
    color: #aaa;
    min-width: 40px;
    text-align: right;
}

/* Zorg dat voice netjes in bubble zit */
.message .bubble .mfx-voice {
    background: #111;
    border-radius: 20px;
    padding: 8px 12px;
    max-width: 220px;
}

/* ===== VOICE FIX DEFINITIEF ===== */

.mfx-voice {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #000;
    padding: 6px 10px;
    border-radius: 20px;
    width: fit-content;
    max-width: 200px;
}

/* play knop */
.mfx-voice .play {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #E10600;
    border: none;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}

/* progress bar */
.mfx-voice .bar {
    flex: 1;
    height: 4px;
    background: #444;
    border-radius: 10px;
    overflow: hidden;
}

.mfx-voice .progress {
    height: 100%;
    width: 0%;
    background: #E10600;
}

/* tijd */
.mfx-voice .time {
    font-size: 11px;
    color: #ccc;
    min-width: 35px;
    text-align: right;
}

#mfx-match-popup{
    position: fixed !important;
    z-index: 9999999 !important;
}

/* 🔥 FIX: knop stabiel maken */
.mfx-match-btn{
    margin-left:auto;
    flex-shrink:0;
    background:#000;
    color:#fff;
    padding:4px 8px;
    border-radius:6px;
    cursor:pointer;
}
/* popup */
.mfx-match-popup{
    position:fixed;
    bottom:20px;
    right:20px;
    background:#111;
    color:#fff;
    padding:15px;
    border-radius:10px;
    z-index:9999;
}

/* 🔥 FIX: onderste .mfx-user aangepast (GEEN space-between meer) */
.mfx-user{
    display:flex;
    align-items:center;
    padding:8px;
}

.mfx-user-name{
    flex:1;
    margin-left:8px;
}

/* 🔥 FIX: tweede knop consistent */
.mfx-match-btn{
    margin-left:auto;
    flex-shrink:0;
    background:none !important;
    color:#ff4757;
    padding:0;
    border-radius:0;
    cursor:pointer;
    font-size:18px;
}

.mfx-user-left{
    display:flex;
    align-items:center;
    gap:8px;
}

.mfx-user-left{
    display:flex;
    align-items:center;
    gap:8px;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#555;
    flex-shrink:0; /* 🔥 belangrijk */
}

#mfx-users .dot.online{
    background:#2ecc71 !important;
}

#mfx-users .dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#555;
    display:inline-block;
}

#mfx-users .dot.online{
    background:#2ecc71 !important;
}

.mfx-user img.avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.mfx-chat-messages{
    padding:20px;
}

.mfx-msg{
    max-width:60%;
    padding:10px 15px;
    border-radius:20px;
    margin:10px 0;
}

.mfx-msg.me{
    background:#e10600;
    color:#fff;
    margin-left:auto;
}

.mfx-msg.them{
    background:#111;
    color:#fff;
}

.mfx-user{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px;
    cursor:pointer;
}

.mfx-dot{
    width:10px;
    height:10px;
    border-radius:50%;
}

.mfx-online{ background:#2ecc71; }
.mfx-offline{ background:#e74c3c; }

.mfx-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
}

/* TOGGLE BUTTON */
#mfx-chat-toggle{
    position:fixed;
    bottom:20px;
    right:20px;
    width:60px;
    height:60px;
    background:#e10600;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    cursor:pointer;
}

/* USERS */
.mfx-chat-users{
    width:250px;
    background:#000;
    overflow-y:auto;
}

/* USER ITEM */
.mfx-user{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px;
    border-bottom:1px solid #111;
    cursor:pointer;
}

/* AVATAR */
.mfx-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
}

/* NAME */
.mfx-name{
    color:#fff;
    font-size:14px;
}

/* ONLINE DOT */
.mfx-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    margin-left:auto;
}

.mfx-online{ background:#2ecc71; }
.mfx-offline{ background:#555; }

/* FAVORITE HEART */
.mfx-fav{
    margin-left:10px;
}

/* RIGHT SIDE */
.mfx-chat-main{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* HEADER */
.mfx-chat-header{
    padding:15px;
    border-bottom:1px solid #111;
    color:#fff;
}

/* MESSAGES */
.mfx-chat-messages{
    flex:1;
    padding:15px;
    overflow-y:auto;
}

/* INPUT */
.mfx-chat-input{
    display:flex;
    gap:10px;
    padding:10px;
}

.mfx-fav{
    opacity:0.3;
    cursor:pointer;
}

.mfx-fav.active{
    opacity:1;
}

/* ===== FORCE CHAT VISIBILITY ===== */

.mfx-content{
    height:auto !important;
    min-height:800px !important;
    overflow:visible !important;
}


/* 🔥 DIT IS DE ECHTE FIX */
.mfx-content{
    display:block !important;
}

.mfx-dashboard{
    display:block !important;
}

.mfx-chat-wrapper{
    position:fixed;
    bottom:20px;
    right:20px;
    width:600px;
    height:500px;
    background:#111;
    border-radius:10px;
    display:flex;
    z-index:999999;
}

.mfx-avatar{
    width:40px;
    height:40px;
    border-radius:50%;
    object-fit:cover;
}

.mfx-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    margin-left:auto;
}

.mfx-online{ background:#2ecc71; }
.mfx-offline{ background:#555; }

.mfx-fav{
    margin-left:10px;
    cursor:pointer;
    opacity:0.3;
}

.mfx-fav.active{
    opacity:1;
}