/* Chat bubbles v2 — slightly smaller text, better width usage */
.message-bubble {
    font-size: 1rem !important;
    line-height: 1.48 !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: min(82%, 720px) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: none !important;
}

/* Critical: user bubbles must not collapse to an artificially narrow flex width. */
.from-user,
.chat-message.from-user,
.message-row.from-user {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end !important;
}

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

/* If timestamp is a sibling of the bubble, keep it aligned without squeezing text. */
.from-user .message-time,
.chat-message.from-user .message-time,
.message-row.from-user .message-time {
    flex-basis: 100%;
    text-align: right;
}

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

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