:root {
    --hhi-chat-max-width: 75rem; /* 1200px */
}

/* Expand the main chat area, but keep it responsive to available space. */
.MuiContainer-root,
.MuiContainer-maxWidthMd,
.MuiContainer-maxWidthLg,
.MuiContainer-maxWidthXl {
    width: 100% !important;
    max-width: var(--hhi-chat-max-width) !important;
}

/* Chainlit 2.x uses inline width styles like min(48rem, 100vw) / min(60rem, 100vw). */
[style*="min(48rem, 100vw)"],
[style*="min(60rem, 100vw)"] {
    width: min(100%, var(--hhi-chat-max-width)) !important;
    max-width: var(--hhi-chat-max-width) !important;
}

.step,
.message {
    width: 100% !important;
    max-width: var(--hhi-chat-max-width) !important;
}

@media (max-width: 768px) {
    .MuiContainer-root,
    .MuiContainer-maxWidthMd,
    .MuiContainer-maxWidthLg,
    .MuiContainer-maxWidthXl,
    [style*="min(48rem, 100vw)"],
    [style*="min(60rem, 100vw)"],
    .step,
    .message {
        max-width: calc(100vw - 1rem) !important;
    }
}

pre {
    max-width: 100% !important;
}

table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}