/* Body styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f3f3f3;
}

/* Login and Chat containers */
.login-container, .chat-container {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 350px;
    text-align: center;
}

/* Chat box styling */
.chat-box {
    height: 550px; /* Fixed height for chat box */
   
    border: 1px solid #ccc;
    margin-bottom: 10px;
    overflow-y: auto; /* Enable scrolling for overflow content */
    padding: 10px;
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between messages */
}

/* Styling for individual messages */
.message {
    padding: 10px;
    border-radius: 10px;
    max-width: 70%;
    position: relative;
    font-size: 14px;
    word-wrap: break-word; /* Break long words into next line */
}

/* Styling for left-aligned messages */
.left {
    background: #e1f5fe; /* Light blue background */
    align-self: flex-start;
    text-align: left; /* Align text to the left */
}

/* Styling for right-aligned messages */
.right {
    background: #c8e6c9; /* Light green background */
    align-self: flex-end;
    text-align: right; /* Align text to the right */
}

/* Timestamp styling */
.timestamp {
    font-size: 10px;
    color: #555;
    margin-top: 5px;
    text-align: right;
    word-break: break-word; /* Prevent overflow in timestamps */
}

/* Input and Button styling */
input {
    width: calc(100% - 20px);
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

button:hover {
    background: #0056b3; /* Darker blue for hover effect */
}

/* Login error message styling */
#login-error {
    color: red;
    font-size: 12px;
}








.radio-buttons {
    display: flex; /* Flexbox for left-to-right layout */
    align-items: center; /* Align items vertically in the center */
    margin-top: 5px;
}

.radio-buttons label {
    margin-right: 5px; /* Space between the label and the radio button */
    font-size: 16px;
}

.radio-buttons input[type="radio"] {
    margin-right: 5px; /* Space between the radio button and next element */
}