styles.css

:root {
    --color-grey-50: #f9fafb;
    --banner-background: var(--secondary-400);
    --banner-text-color: var(--primary-200);
    --banner-background-dark: var(--secondary-800);
    --banner-text-color-dark: var(--primary-100);
    --banner-text-a-color: var(--primary-100);
    --banner-text-a-color-dark: var(--secondary-100);
    --banner-chrome-height: calc(16px + 43px);

    /* Chrome height with no banner */
    --chat-chrome-height-wide-no-banner: 320px;
    --chat-chrome-height-narrow-no-banner: 450px;

    /* Use these when we are not using a banner */
    /*--chat-chrome-height-wide: var(--chat-chrome-height-wide-no-banner);*/
    /*--chat-chrome-height-narrow: var(--chat-chrome-height-narrow-no-banner);*/

    /* When we are using a banner, add the banner height to the chat chrome height */
    --chat-chrome-height-wide: calc(var(--chat-chrome-height-wide-no-banner) + var(--banner-chrome-height));
    --chat-chrome-height-narrow: calc(var(--chat-chrome-height-narrow-no-banner) + var(--banner-chrome-height));
}

.banner-message {
    background-color: var(--banner-background);
    padding: 5px;
    margin: 0;
    border-radius: 5px;
    border: none;
}

.banner-message-text {
    font-size: 14px;
    font-weight: bolder;
    color: var(--banner-text-color) !important;
}

.banner-message-emoji {
    margin-right: 3px;
    font-size: 16px;
}

.banner-message-text a {
    color: var(--banner-text-a-color) !important;
}

body.dark .banner-message {
    background-color: var(--banner-background-dark) !important;
}

body.dark .gradio-container .contain .banner-message .banner-message-text {
    color: var(--banner-text-color-dark) !important;
}

body.dark .gradio-container .contain .banner-message .banner-message-text a {
    color: var(--banner-text-a-color-dark) !important;
}

.toast-body {
    background-color: var(--color-grey-50);
}

.html-container:has(.css-styles) {
    padding: 0;
    margin: 0;
}

.css-styles {
    height: 0;
}

.model-message {
    text-align: end;
}

.model-dropdown-container {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.user-input-container .multimodal-textbox {
    border: none !important;
}

/* Match the height of the modified multimodal input box on the same row */
.control-button {
    height: 51px;
}

button.cancel {
    border: var(--button-border-width) solid var(--button-cancel-border-color);
    background: var(--button-cancel-background-fill);
    color: var(--button-cancel-text-color);
    box-shadow: var(--button-cancel-shadow);
}

button.cancel:hover,
.cancel[disabled] {
    background: var(--button-cancel-background-fill-hover);
    color: var(--button-cancel-text-color-hover);
}

.opt-out-message {
    top: 8px;
}

.opt-out-message .html-container,
.opt-out-checkbox label {
    font-size: 14px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--neutral-400) !important;
}

div.block.chatbot {
    height: calc(100svh - var(--chat-chrome-height-wide)) !important;
    max-height: 900px !important;
}

div.no-padding {
    padding: 0 !important;
}

@media (max-width: 1280px) {
    div.block.chatbot {
        height: calc(100svh - var(--chat-chrome-height-wide)) !important;
    }
}

@media (max-width: 1024px) {
    .responsive-row {
        flex-direction: column;
    }

    .model-message {
        text-align: start;
        font-size: 10px !important;
    }

    .model-dropdown-container {
        flex-direction: column;
        align-items: flex-start;
    }

    div.block.chatbot {
        height: calc(100svh - var(--chat-chrome-height-narrow)) !important;
    }
}

@media (max-width: 400px) {
    .responsive-row {
        flex-direction: column;
    }

    .model-message {
        text-align: start;
        font-size: 10px !important;
    }

    .model-dropdown-container {
        flex-direction: column;
        align-items: flex-start;
    }

    div.block.chatbot {
        max-height: 360px !important;
    }
}

@media (max-height: 932px) {
    .chatbot {
        max-height: 500px !important;
    }
}

@media (max-height: 1280px) {
    div.block.chatbot {
        max-height: 800px !important;
    }
}

/* Terms of Service Overlay */
.agreement-overlay {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    /* Semi-transparent black background */
    backdrop-filter: blur(5px);
    /* Bloom/blur effect on the underlying content */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    /* Ensure it sits on top of everything */
}

/* Hide the overlay when dismissed */
.agreement-overlay.hidden {
    display: none !important;
}

/* Container for text/button within the overlay */
.agreement-overlay>.form {
    background-color: #333333;
    color: white !important;
    /* Force black text on white background to prevent invisible text issues */
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    /* Increased width for better readability of long text */
    width: 95%;
    /* Responsive width */
    max-height: 60vh;
    /* Prevent overflowing viewport height */
    overflow-y: auto;
    /* Scroll if content is too tall */
    text-align: left;
    /* Left align text for better readability */
    border: 1px solid #ccc;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Center the header */
.agreement-overlay>.form h2 {
    text-align: center;
    margin-top: 0;
}

/* Use dark mode styling if needed */
body.dark .agreement-overlay>.form {
    background-color: var(--secondary-800);
    border-color: var(--border-color-primary);
    color: var(--body-text-color);
}