#bot {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px; /* Set the width and height to the same value for a circle */
    height: 60px; 
    background: linear-gradient(to right, #1c3b2d, #111431);
    border-radius: 50%; /* Makes the button circular */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Added a shadow effect */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden; /* Ensures the image fits within the circle */
}

#bot img {
    width: 100%; /* Image fills the circle */
    height: auto; /* Maintain aspect ratio */
}

#form-container {
    position: fixed;
    bottom: 90px; /* Adjusted to place above the button */
    right: 20px;
    width: 300px;
    padding: 20px;
    background: linear-gradient(to right, #1c3b2d, #111431);
    border: 1px solid #007BFF;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); /* Added a shadow effect */
    display: none; /* Hidden by default */
    color: white;
}

#chat-log {
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* Add some spacing below chat log */
}

.user-message {
    align-self: flex-end; /* Aligns user messages to the right */
    background-color: #007BFF; /* User bubble color */
    color: white;
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    max-width: 60%;
    word-wrap: break-word;
}

.bot-message {
    align-self: flex-start; /* Aligns bot messages to the left */
    background-color: #f1f1f1; /* Bot bubble color */
    color: black;
    border-radius: 10px;
    padding: 10px;
    margin: 5px;
    max-width: 60%;
    word-wrap: break-word;
}

#form-container input {
    padding: 10px; /* Added padding for better touch targets */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    background: rgba(255, 255, 255, 0.2); /* Slightly transparent background */
    color: white; /* Text color */
}

#form-container input:focus {
    outline: none; /* Remove outline on focus */
    background: rgba(255, 255, 255, 0.3); /* Change background on focus */
}

#form-container button {
    padding: 10px; /* Added padding */
    border: none; /* Remove default border */
    border-radius: 5px; /* Rounded corners */
    background-color: #007BFF; /* Button color */
    color: white; /* Button text color */
    cursor: pointer; /* Change cursor on hover */
}

#form-container button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}