body {

    margin: 0;
    font-family: Arial, sans-serif;

    background: linear-gradient(160deg,
            #0f0f0f,
            #1a1a1a,
            #2b2b2b);

    color: white;
}

.page {
    max-width: 1100px;
    margin: auto;
    padding: 40px 20px;
}

/* HEADER */

header {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;

}

.logo {
    font-size: 28px;
    font-weight: bold;
}

.logo span {
    color: #6fcf97;
}

/* CHAT */

.chat-wrapper {

    display: flex;
    justify-content: center;
}

.chat-box {

    width: 100%;
    max-width: 700px;
    height: 420px;

    background: #111;

    border-radius: 14px;

    box-shadow:
        0 10px 40px rgba(0, 0, 0, 0.6);

    display: flex;
    flex-direction: column;

}

/* messages */

.chat-messages {

    flex: 1;
    padding: 20px;
    overflow-y: auto;

}

/* bubbles */

.message {

    margin-bottom: 12px;
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 10px;

}

.user {

    background: #6fcf97;
    color: black;
    margin-left: auto;

}

.bot {

    background: #2a2a2a;
}

/* input */

.chat-input-area {

    display: flex;
    border-top: 1px solid #333;

}

#chat-input {

    flex: 1;
    background: none;
    border: none;
    padding: 14px;
    color: white;
}

#chat-input:focus {
    outline: none;
}

.chat-input-area button {

    border: none;
    background: #6fcf97;
    padding: 0 20px;
    cursor: pointer;
    font-size: 18px;
}

/* description */

.description {

    margin-top: 40px;
    text-align: center;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.description h2 {

    margin-bottom: 10px;
}

.description p {

    color: #bbbbbb;
}

.contact {

    margin-top: 60px;
    padding-top: 30px;

    border-top: 1px solid #333;

    text-align: center;
    color: #bbbbbb;

}

.contact h3 {

    color: #6fcf97;
    margin-bottom: 10px;

}