/* ===========================
   ALGEMENE CHATBOX LAYOUT (Website)
   =========================== */

.chat-box {
    width: 100%;
    max-width: 700px;         
    margin: 0 auto;
    padding: 20px;
    background: rgba(0, 30, 35, 0.6);
    border: 2px solid #003b40;
    border-radius: 8px;
    box-shadow: 0 0 18px #00e5ff;
}

.chat-messages {
    height: 400px;            
    overflow-y: auto;
    padding: 10px;
    background: #001f21;
    border-radius: 6px;
    border: 2px solid #003b40;
    box-shadow: inset 0 0 10px #00e5ff;
    color: #00e5ff;
    font-size: 16px;
}

/* ===========================
   WHATSAPP-ACHTIGE BUBBLES
   =========================== */

.bubble {
    max-width: 80%;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: #003b40;
    color: #00e5ff;
    border-radius: 10px;
    box-shadow: 0 0 8px #00e5ff;
}

.bubble-name {
    font-weight: bold;
    margin-bottom: 3px;
}

.bubble-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 3px;
    text-align: right;
}

/* ===========================
   FORMULIER
   =========================== */

.chat-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

#chat-name,
#chat-input {
    padding: 10px;
    border-radius: 6px;
    border: 2px solid #003b40;
    background: #001f21;
    color: #00e5ff;
    font-size: 16px;
    outline: none;
}

#chat-name {
    max-width: 160px;
}

/* Versturen-knop: exact dezelfde stijl in site en popup */
#chat-send.btn,
body.popup #chat-send.btn {
    padding: 10px 20px;
    border-radius: 6px;
    border: 2px solid #003b40;
    background: #00e5ff;   /* blauwe achtergrond */
    color: #001f21;        /* zwarte tekst */
    font-size: 16px;
    cursor: pointer;
}

/* Hover effect (optioneel, past bij site) */
#chat-send.btn:hover,
body.popup #chat-send.btn:hover {
    background: #00cfff;
}

/* ===========================
   POPUP VENSTER OPTIMALISATIE
   =========================== */

body.popup {
    background: #000 !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.popup .chat-box {
    max-width: 700px;       
    height: 400px;          
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

body.popup .chat-messages {
    height: calc(100% - 60px); 
    overflow-y: hidden;       
}

/* Verberg de popup-knop in de popup */
body.popup #chat-popup {
    display: none;
}