body {
    background-color: #343a40; /* Dark background */
    padding-bottom: 70px; /* Add padding to prevent overlap */
}

.message-container {
    padding: 10px;
    color: rgb(255, 255, 255);
    height: calc(100vh - 200px); /* Adjust height to leave space for input */
    overflow-y: auto; /* Scroll if content overflows */
    border: 2px solid rgb(204, 204, 204);
    border-radius: 20px; /* Rounded corners for the message container */
    background-color: rgb(73, 80, 87); /* Background color */
    width: 90%; /* Width of the message container */
    max-width: 600px; /* Max width for larger screens */
    margin: 20px auto; /* Centering the container */
}

.input-group {
    position: fixed; /* Fixed at the bottom */
    bottom: 20px; /* Align to the bottom */
    left: 50%; /* Center horizontally */
    transform: translateX(-50%); /* Adjust centering */
    width: 80%; /* Width of the input group */
    max-width: 600px; /* Max width for larger screens */
    z-index: 1000; /* Ensure it's above other elements */
}

#messageInp {
    border-radius: 25px 0 0 25px; /* Rounded left corners */
    color: black; /* Black text */
    background-color: white; /* White background for input */
    height: 50px; /* Height of the input */
    font-size: 16px; /* Font size */
    padding-left: 20px; /* Add some padding on the left */
}

#messageInp::placeholder {
    color: #aaa; /* Slightly darker placeholder text */
    opacity: 1; /* Make sure placeholder is fully visible */
}

#sendBtn {
    border-radius: 0 25px 25px 0; /* Rounded right corners */
    border: none; /* No border for the button */
    background-color: #28a745; /* Green background */
    color: white; /* White text */
    height: 50px; /* Match height with input box */
    width: 60px; /* Width for round shape */
}

#sendBtn i {
    font-size: 1.2rem; /* Size for the icon */
    color: white; /* White icon */
}

#sendBtn:hover {
    background-color: #218838; /* Darker green on hover */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .message-container {
        height: calc(100vh - 220px); /* Adjust for smaller screens */
    }
    
    .input-group {
        width: 90%; /* Wider on smaller screens */
    }
}

.input-container {
    position: relative; /* Positioning for the footer text */
}
  
.footer-text {
    position: fixed; /* Absolute position to stay within the input area */
    bottom: 130px; /* Position it near the bottom */
    left: 700px; /* Align to the left */
    color: white; /* Text color */
    font-size: 0.75rem; /* Smaller text size */
    pointer-events: none; /* Prevent mouse events */
    font-family: 'Outfit', sans-serif;
}