/* Chat bubbles v3
   Short messages should grow horizontally instead of collapsing into narrow columns. */

.message-row,
.chat-message,
.message-row.from-user,
.chat-message.from-user,
.message-row.from-character,
.chat-message.from-character {
    width: 100% !important;
    min-width: 0 !important;
}

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

/* Do NOT use width:fit-content here: in the existing flex layout it can
   resolve against an already constrained width and wrap short sentences. */
.message-bubble {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: min(180px, 45%) !important;
    max-width: min(52vw, calc(100% - 32px)) !important;
    flex: 0 1 auto !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Very short user messages still get enough horizontal room. */
.from-user .message-bubble,
.chat-message.from-user .message-bubble,
.message-row.from-user .message-bubble {
    min-width: min(210px, 48%) !important;
}

/* Timestamps live on their own line and must never steal bubble width. */
.message-time {
    flex: 0 0 100% !important;
    width: 100% !important;
}
.from-user .message-time,
.chat-message.from-user .message-time,
.message-row.from-user .message-time {
    text-align: right !important;
}

@media (max-width: 760px) {
    .message-bubble,
    .from-user .message-bubble,
    .chat-message.from-user .message-bubble,
    .message-row.from-user .message-bubble {
        min-width: 0 !important;
        max-width: 88% !important;
    }
}