/* Chat layout fix v1
   Keep the larger typography, but make the center column actually shrink
   inside the 3-column layout instead of overflowing behind the sidebars. */

.chat-shell,
.chat-layout,
.chat-page {
    max-width: 100%;
    min-width: 0;
}

.chat-main,
.chat-center,
.chat-conversation,
.chat-thread {
    min-width: 0 !important;
    overflow: hidden;
}

.chat-messages,
[data-messages] {
    min-width: 0 !important;
    max-width: 100%;
    overflow-x: hidden !important;
}

.message-row,
.chat-message {
    min-width: 0;
    max-width: 100%;
}

.message-bubble {
    box-sizing: border-box;
    max-width: min(76%, 680px) !important;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;
}

.message-row.from-user,
.chat-message.from-user {
    justify-content: flex-end;
}

.message-row.from-character,
.chat-message.from-character {
    justify-content: flex-start;
}

/* Composer must stay inside the central column too. */
.chat-composer,
.message-composer,
[data-chat-composer] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Prevent flex/grid children from forcing horizontal overflow. */
.chat-shell > *,
.chat-layout > *,
.chat-page > * {
    min-width: 0;
}

@media (max-width: 1100px) {
    .message-bubble {
        max-width: 82% !important;
    }
}

@media (max-width: 760px) {
    .message-bubble {
        max-width: 88% !important;
        font-size: 1rem !important;
    }
}