body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #1e1e1e; /* Dark background color */
    color: #e1e2e4; /* Light text color for contrast */
}

.container {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Aligns children from top to bottom */
    height: 100vh; /* Changed from min-height to height */
    width: 20%;
    background-color: #282828;
    padding: 20px;
    box-sizing: border-box;
    position: relative; /* Position relative to allow for absolute positioning inside */
}

.sidebar .chat-topic {
    padding: 10px;
    border-bottom: 1px solid #333; /* Darker border for separation */
    cursor: pointer;
    transition: background-color 0.3s;
}

.sidebar .chat-topic:hover {
    background-color: #333; /* Dark hover effect */
}

.chat-header {
    flex: 1;
    background-color: #1e1e1e; /* Same as body background */
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chatbot-button.active {
    background-color: #212121; /* Subdued gray for active effect */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Less intense shadow */
    border: 2px solid #e1e2e4; /* Bright gray border */
}

.chatbot-button {
    padding: 10px 20px;
    border: none;
    background-color: #333; /* Darker button color */
    color: #e1e2e4; /* Light text color for contrast */
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chatbot-button:hover {
    background-color: #444; /* Slightly lighter hover effect */
}

.logos-wrapper {
    align-self: bottom;
    margin-top: auto; /* Pushes the logos to the bottom */
    margin-bottom: 70px; /* Adjust as needed to keep logos above the footer */
    display: flex;
    flex-direction: column;
    align-items: center;
}

#logo {
    align-self: center;
    width: 50%; /* Adjust width as necessary */
    margin-top: auto; /* Push to the bottom */
    margin-bottom: 30px; /* Adjust as necessary to ensure visibility above the footer */
}

.chat-body {
    flex: 3;
    background-color: #ffffff; /* Darker than sidebar, lighter than body */
    padding: 20px;
    overflow-y: auto;
}

iframe {
    width: 100%;
    height: 85vh;
    border: none;
}

.footer {
    padding: 5px 180px;
    background-color: #1e1e1e; /* Same as body background */
    color: #e1e2e4; /* Light text color for contrast */
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;
}

.footer a { /* Targeting links within the footer */
    color: #ffffff; /* Setting the color to white */
}