styles.css

:root {
    --color-grey-50: #f9fafb;
}

.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 - 320px) !important;
    max-height: 900px !important;
}

@media (max-width: 1280px) {
    div.block.chatbot {
        height: calc(-320px + 100svh) !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(-450px + 100svh) !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;
        /*min-height: 320px;*/
    }
}

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