import { Theme } from '@mui/material';
export declare const styles: {
    header: {
        display: "flex";
        alignItems: "center";
        justifyContent: "space-between";
        padding: ({ spacing }: Theme) => string;
    };
    headerTitle: {
        flexGrow: number;
        px: ({ spacing }: Theme) => string;
    };
    headerActions: {
        display: "flex";
        alignItems: "center";
        marginLeft: ({ spacing }: Theme) => string;
        gap: ({ spacing }: Theme) => string;
    };
    footerWrapper: {
        padding: ({ spacing }: Theme) => string;
    };
    /**
     * Rounded input box, matching the reference ChatFooter. A two-column grid:
     * main column (input + optional slots) | send button, bottom-aligned so it
     * stays at the end as the input grows. NO vertical padding — the textarea's own
     * padding sets the ~32px single-line height, so the box hugs the input.
     */
    footerBox: {
        maxWidth: number;
        width: string;
        margin: string;
        display: "grid";
        gridTemplateColumns: string;
        alignItems: "end";
        columnGap: ({ spacing }: Theme) => string;
        backgroundColor: ({ palette }: Theme) => string;
        borderRadius: ({ spacing }: Theme) => string;
        paddingInline: ({ spacing }: Theme) => string;
    };
    /** Main grid area: input stacked above the (optional) slots row. */
    footerMain: {
        minWidth: number;
        display: "flex";
        flexDirection: "column";
        gap: ({ spacing }: Theme) => string;
    };
    /**
     * Send-button grid area, bottom-aligned (matches the reference flex-end row) so
     * the button stays at the bottom as the input grows. The small bottom padding
     * keeps it off the box edge — in the single-line state it reads as vertically
     * centered (4px top / 4px bottom around the 24px button in the 32px row).
     */
    footerSend: {
        alignSelf: "end";
        paddingBottom: ({ spacing }: Theme) => string;
        '& .MuiIconButton-root': {
            padding: ({ spacing }: Theme) => string;
        };
    };
    /** The chrome-less multiline input (no underline / no filled affordance). */
    footerInput: {
        width: string;
        typography: string;
        minHeight: string;
        '& textarea': {
            fontSize: ({ typography }: Theme) => string;
            lineHeight: ({ typography }: Theme) => string;
            letterSpacing: ({ typography }: Theme) => string;
        };
        '& textarea:not([aria-hidden])': {
            resize: "none";
            padding: ({ spacing }: Theme) => string;
        };
    };
    /**
     * Slots row under the input: start slot + model selector + end slot. The left
     * padding lines the row's content up with the input text above it: the input
     * text is inset ~12px from the box edge (InputBase root padding + the textarea's
     * 10px left padding) while the model-selector text button only insets ~8px, so a
     * 4px indent here makes the slot label share the placeholder's left edge instead
     * of sitting further out.
     */
    footerSlots: {
        display: "flex";
        alignItems: "center";
        gap: ({ spacing }: Theme) => string;
        minWidth: number;
        flexWrap: "wrap";
        paddingLeft: ({ spacing }: Theme) => string;
        paddingBottom: ({ spacing }: Theme) => string;
    };
    modelSelector: {
        textTransform: "none";
        color: ({ palette }: Theme) => string;
        maxWidth: string;
        minWidth: number;
        '& .MuiButton-endIcon': {
            marginLeft: ({ spacing }: Theme) => string;
        };
    };
    modelSelectorLabel: {
        overflow: "hidden";
        textOverflow: "ellipsis";
        whiteSpace: "nowrap";
    };
    footerCaption: {
        textAlign: "center";
    };
    content: {
        overflowY: "auto";
        flex: number;
        position: "relative";
        mx: string;
        maxWidth: number;
        width: string;
        maxHeight: string;
        pt: number;
        pb: number;
        px: number;
        display: "flex";
        flexDirection: "column";
        borderTopWidth: string;
        borderTopStyle: "solid";
        borderBottomWidth: string;
        borderBottomStyle: "solid";
    };
    sentinel: {
        height: string;
        flexShrink: number;
    };
    jumpToLatestWrapper: {
        position: "sticky";
        bottom: ({ spacing }: Theme) => string;
        height: number;
        display: "flex";
        justifyContent: "center";
        zIndex: number;
    };
    jumpToLatest: {
        transition: "opacity 0.2s";
    };
    starter: {
        display: "flex";
        flexDirection: "column";
        alignItems: "center";
        justifyContent: "center";
        padding: ({ spacing }: Theme) => string;
        textAlign: "center";
        maxWidth: number;
        margin: string;
    };
    starterItems: {
        display: "grid";
        width: string;
        marginTop: ({ spacing }: Theme) => string;
    };
    starterItemsTwoCol: {
        gridTemplateColumns: string;
    };
};