.chat-window {
    max-height: 340px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px !important;
    box-sizing: border-box;
    overflow-y: auto;
}

/* Row wrapper allows left/right positioning while keeping column flow */
.message-row {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    padding: 0 4px;
}

.row-sent {
    justify-content: flex-end;
}

.row-received {
    justify-content: flex-start;
}

.message-bubble {
    padding: 8px 12px;
    border-radius: 14px;
    margin-bottom: 0;
    max-width: 78%;
    display: inline-block;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03);
    word-wrap: break-word;
    white-space: pre-wrap; /* preserve line breaks */
    overflow-wrap: anywhere; /* break long words/urls */
    line-height: 1.2;
}

    .message-bubble.sent {
        background: #28E326;
        color: #fff;
        border-bottom-right-radius: 4px;
    }

    .message-bubble.received {
        background: #e9ecef;
        color: #000;
        border-bottom-left-radius: 4px;
    }

.msg-text {
    font-size: 14px;
    margin-bottom: 6px;
}

.msg-meta {
    display: flex;
    justify-content: flex-end;
}

.msg-time {
    font-size: 11px;
    opacity: 0.8;
}

/* Ensure timestamps are small and aligned under text */
.message-bubble .msg-time {
    display: inline-block;
}

/* Responsive tweaks */
@@media (max-width: 480px) {
    .message-bubble {
        max-width: 90%;
        padding: 10px 12px;
        font-size: 14px;
    }

    .chat-window {
        padding: 10px !important;
    }
}

/* Prevent the bubble from hugging the screen edge */
.row-sent .message-bubble {
    margin-right: 6px;
}

.row-received .message-bubble {
    margin-left: 6px;
}