/* Make sure the body takes the full height of the screen */
html, body {
    height: 100%;
    margin: 0;
}

/* Container that holds content */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Main content area */
main {
    flex-grow: 1; /* This ensures the main content takes the available space */
}

/* Footer styles */
.footer-site {
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center; /* Center the content horizontally */
    background-color: #f4f4f9; /* Optional: Set a background color */
    padding: 10px 0; /* Optional: Add some padding for spacing */
    margin-top: auto; /* Push the footer to the bottom */
}

    .footer-site .container {
        display: flex;
        justify-content: center; /* Center the content horizontally */
        align-items: center; /* Center content vertically if needed */
        width: 100%;
    }

    .footer-site a {
        text-decoration: none;
        color: #007bff; /* Customize the link color */
    }

        .footer-site a:hover {
            color: #0056b3; /* Customize the link color when hovered */
        }

/* General Styles for the Image */
.navbar-brand img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Mobile Responsive Layout (iPhone and smaller devices) */
@media (max-width: 767px) {
    .navbar-brand img {
        width: 100%; /* Make the image take up full width */
        height: auto;
    }

    .navbar-collapse {
        display: flex;
        justify-content: center; /* Center the collapsed items */
    }

    .navbar-nav {
        flex-grow: 1;
        justify-content: center; /* Center align navbar items */
    }
}

.navbar-collapse {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .navbar-collapse .navbar-brand {
        flex-grow: 0;
    }

        .navbar-collapse .navbar-brand img {
            max-width: 75%;
            height: auto;
        }

    .navbar-collapse .navbar-nav {
        display: flex;
        align-items: center;
    }

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Chat container styles */
.chat-container {
    height: 600px;
    background-color: #f4f4f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Chatbox styling (area where messages are displayed) */
.chat-box {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #fff;
    border-radius: 4px;
    max-height: 500px;
}

/* User message styles */
.user-message {
    background-color: #d4f1f4; /* Light blue background for user messages */
    padding: 8px;
    margin: 4px 0;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
    align-self: flex-end; /* Align user messages to the right */
}

/* Chatbot message styles */
.chatbot-message {
    background-color: #e1e1e1; /* Light gray background for chatbot messages */
    padding: 8px;
    margin: 4px 0;
    border-radius: 10px;
    max-width: 80%;
    word-wrap: break-word;
    display: inline-block;
    white-space: normal; /* Allow text to wrap normally */
    overflow: hidden; /* Hide overflow text while typing */
    align-self: flex-start; /* Align bot messages to the left */
}

/* Input container (for user typing) */
.input-container {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
}

/* Text input styling */
.user-input {
    width: 90%;
    padding: 10px;
    border-radius: 25px;
    border: 1px solid #ccc;
}

/* Send button styling */
.send-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 50%;
    cursor: pointer;
}

    .send-btn:hover {
        background-color: #45a049;
    }

/* Center the chat container in the viewport */
.container.d-flex {
    height: 100vh; /* Use the full viewport height */
}

/* Media Queries for Mobile devices */
@media (max-width: 480px) {
    /* Adjust image size for very small screens */
    .navbar-brand img {
        max-width: 90%;
    }

    /* Adjust chat container padding and layout for smaller screens */
    .chat-container {
        padding: 10px;
    }

    /* Adjust input fields */
    .input-container {
        flex-direction: column;
        padding: 0 10px;
    }

    .user-input {
        width: 100%;
        margin-bottom: 10px;
    }

    .send-btn {
        width: 100%;
    }
}