styles.css

:root {
    --color-grey-50: #f9fafb;
    --banner-background: var(--secondary-400);
    --banner-text-color: var(--primary-100);
    --banner-background-dark: var(--secondary-800);
    --banner-text-color-dark: var(--primary-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: 13px;
    font-weight: bolder;
    color: var(--banner-text-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;
}

.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;
    }
}