styles.css

 body {

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

}

.chat-container {

    width: 400px;

    max-width: 100%;

    background-color: white;

    padding: 20px;

    border-radius: 8px;

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

}

.chat-box {

    height: 300px;

    overflow-y: auto;

    border-bottom: 1px solid #ddd;

    margin-bottom: 10px;

}

.user-message, .bot-message {

    padding: 10px;

    margin: 5px 0;

    border-radius: 8px;

}

.user-message {

    background-color: #dcf8c6;

    align-self: flex-end;

    text-align: right;

}

.bot-message {

    background-color: #f1f0f0;

    align-self: flex-start;

}

input[type="text"] {

    width: calc(100% - 50px);

    padding: 10px;

    border: 1px solid #ddd;

    border-radius: 4px;

}

button {

    padding: 10px;

    border: none;

    background-color: #007bff;

    color: white;

    cursor: pointer;

    border-radius: 4px;

}

button:hover {

    background-color: #0056b3;

}