/* Algemene pagina-styling */
body {
    background: #0a0f0a;
    color: #7aff7a;
    font-family: "Courier New", monospace;
    margin: 0;
    padding: 20px;
}

/* Container */
#app {
    max-width: 600px;
    margin: auto;
    background: #0f150f;
    padding: 20px;
    border: 1px solid #1f3b1f;
    box-shadow: 0 0 20px #0f3d0f;
}

/* Titel */
h1 {
    text-align: center;
    color: #7aff7a;
    text-shadow: 0 0 10px #3aff3a;
}

/* Chatbox */
#chat {
    border: 1px solid #1f3b1f;
    background: #0b120b;
    padding: 10px;
    height: 350px;
    display: flex;
    flex-direction: column;
}

/* Berichtenlijst */
#messages {
    flex: 1;
    overflow-y: auto;
    padding-right: 5px;
}

/* Individueel bericht */
.message {
    display: flex;
    margin-bottom: 8px;
    padding: 6px;
    background: #111c11;
    border-left: 3px solid #3aff3a;
}

/* Gebruikersnaam */
.message .user {
    font-weight: bold;
    margin-right: 6px;
    color: #9aff9a;
}

/* Tekst */
.message .text {
    color: #7aff7a;
}

/* Inputbalk */
#input {
    display: flex;
    margin-top: 10px;
}

/* Tekstinvoer */
#text {
    flex: 1;
    padding: 10px;
    background: #0f1a0f;
    border: 1px solid #2f4f2f;
    color: #7aff7a;
    outline: none;
}

#text::placeholder {
    color: #4f8f4f;
}

/* Verstuurknop */
#send {
    padding: 10px 20px;
    margin-left: 10px;
    background: #1c2a1c;
    border: 1px solid #3aff3a;
    color: #7aff7a;
    cursor: pointer;
    transition: 0.2s;
}

#send:hover {
    background: #2f4f2f;
    box-shadow: 0 0 10px #3aff3a;
}

/* Delete-knop */
#delete {
    margin-top: 20px;
    text-align: center;
}

#delete_button {
    padding: 10px 20px;
    background: #2a1c1c;
    border: 1px solid #ff3a3a;
    color: #ff7a7a;
    cursor: pointer;
    transition: 0.2s;
}

#delete_button:hover {
    background: #4f2f2f;
    box-shadow: 0 0 10px #ff3a3a;
}

/* Zorg dat de pagina goed schaalt op mobiel */
html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}

/* Chat container moet meeschalen */
#app {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 15px;
}

/* Chatbox hoogte aanpassen voor kleine schermen */
#chat {
    height: 60vh; /* dynamisch, werkt op alle telefoons */
}

/* Inputbalk mobielvriendelijk */
#input {
    display: flex;
    gap: 10px;
}

#text {
    flex: 1;
    font-size: 16px; /* voorkomt iPhone zoom */
    padding: 12px;
}

/* Knoppen groter voor duimen */
#send, #delete_button {
    padding: 12px 18px;
    font-size: 16px;
}

/* Berichten scroll fix voor iOS */
#messages {
    -webkit-overflow-scrolling: touch;
}

/* Extra responsive tuning */
@media (max-width: 480px) {
    h1 {
        font-size: 22px;
    }

    #chat {
        height: 65vh;
    }

    .message {
        font-size: 14px;
        padding: 5px;
    }

    #send, #delete_button {
        width: 100%;
    }

    #input {
        flex-direction: column;
    }
}