/* Chatbot Container */
.chat-container {
    height: 100%;
    max-width: 95%;
/*  background-color: #f3f3f3; */
    border-radius: 8px;
/*  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
	margin-right: auto;
	margin-left: auto;
}

/* Chatbox for messages */
.chat-box {
    display: flex;
    flex-direction: column-reverse; /* Reverse the column to keep the input box at bottom */
    justify-content: flex-start; /* Align content to the bottom */
    overflow-y: auto;
    flex-grow: 1;
   /*  background-color: #fff; */
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 10px;
    font-size: 16px;
    /* background-image: url('back2.jpg'); */
    background-size: cover; /* Cover the entire chat-box */
    background-position: center; /* Center the background image */
}

/* Assistant Messages */
.assistant-message {
    background-color: #000000e6;
	color: #fff;
    border-radius: 15px;
    padding: 10px;
    margin: 5px 0px;
    max-width: 80%;
    align-self: flex-start; /* Align to the left */
}

/* User Messages */
.user-message {
    background-color: #5417ffb3; 
	color: #fff;
    border-radius: 15px;
    padding: 10px;
    margin: 5px 0px;
    max-width: 80%;
    align-self: flex-end; /* Align to the right */
}

/* Input and Button Container */
.input-button-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
	width: 95%;
    margin: 0px auto 0px auto;
}

/* Input Field */
.user-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 16px;
	background-color: #ffffffab;
    color: black;
}

/* Send Button */
.send-button {
    background-color: #e51f22;
    color: white;
    border: none;
    border-radius: 50%; /* Ensures round shape */
    padding: 8px; /* Adjust padding for a perfect circle */
    width: 30px; /* Fixed width */
    height: 30px; /* Fixed height to match width */
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/*
.send-button:hover {
    background-color: #e2fa96;
}
*/

/* IZI Assistant Messages */

/* Additional Media Query for Responsiveness */
@media (max-width: 768px) {
    .chat-container {
        padding-bottom: 60px; /* Adjust based on the actual height of input-button-container */
    }

    .input-button-container {
        position: fixed; /* Fix position to the bottom of the screen on mobile */
        bottom: 0; /* Align to the bottom */
        left: 0; /* Stretch across the screen */
        width: 100%; /* Ensure it spans the full width */
        background-color: #f3f3f3; /* Match the chat container's background */
        box-shadow: 0 -2px 5px rgba(0,0,0,0.1); /* Adds a slight shadow for depth */
        padding: 10px; /* Adjust padding as needed */
        box-sizing: border-box; /* Ensures padding doesn't add to the width */
        z-index: 2; /* Ensure it's above other content */
    }

    .chat-box {
        margin-bottom: 0; /* Adjust if necessary to account for input-button-container */
    }

    .send-button {
        position: relative; /* Enable positioning for the pseudo-element */
    }

    .send-button::after {
        content: '';
        position: absolute;
        top: -10px; /* Increase the top area */
        right: -10px; /* Increase the right area */
        bottom: -10px; /* Increase the bottom area */
        left: -10px; /* Increase the left area */
        z-index: -1; /* Place it behind the button to keep it invisible */
        background: transparent; /* Ensure it's invisible */
    }
}

.colum-umnik {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1500px) {
	.input-button-container {
	width: 95%;
}
}