/* Text message styles */
.message.me {
    justify-content: flex-end;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.message.user {
    justify-content: flex-start;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.message-bubble {
    position: relative;
    word-wrap: break-word;
    word-break: break-word;
    line-height: 1.4;
    box-sizing: border-box;
    display: inline-flex;
    width: auto;
    min-width: 0;
    overflow-wrap: break-word;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.message.me .message-bubble {
    background: #7744c9;
    color: #ffffff;
    padding: 7px 6px 3px 10px; /* top, right, bottom, left */
}

.message.me .message-bubble:not(.has-tail) {
    border-radius: 20px 6px 6px 20px; /* top-left, top-right, bottom-right, bottom-left */
}

.message.user .message-bubble {
    background: #242e3c;
    color: #fafafa;
    padding: 7px 12px 3px 10px; /* top, right, bottom, left */
}

.message.user .message-bubble:not(.has-tail) {
    border-radius: 6px 20px 20px 6px; /* top-left, top-right, bottom-right, bottom-left */
}

/* Border radius when tail is present - must come after base styles */
.message.me .message-bubble.has-tail {
    border-radius: 20px 20px 0px 20px; /* top-left, top-right, bottom-right, bottom-left */
}

.message.user .message-bubble.has-tail {
    border-radius: 20px 20px 20px 0px; /* top-left, top-right, bottom-right, bottom-left */
}

.message-bubble.has-tail {
    position: relative;
}

.message-tail {
    position: absolute;
    bottom: 0;
    width: 15px;
    height: 17px;
    pointer-events: none;
}

.message.me .message-tail {
    right: -9px;
}

.message.user .message-tail {
    left: -9px;
}

.message-tail svg {
    width: 100%;
    height: 100%;
    display: block;
    shape-rendering: crispEdges;
    overflow: visible;
}

.message-tail path {
    shape-rendering: crispEdges;
    stroke: none;
    stroke-width: 0;
}

.message-text {
    font-size: 16px;
    margin-bottom: 0;
    line-height: 20px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.message-content {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.message-time-block {
    display: flex;
    align-items: baseline;
    flex-shrink: 0;
    margin-top: 7px;
}

.message-time-row {
    display: flex;
    align-items: baseline;
    gap: 7px;
    margin-top: 0;
    width: 100%;
}

.message-time {
    font-size: 13px;
    opacity: 0.8;
    margin-top: 0;
    white-space: nowrap;
    display: inline-block;
}

.message.me .message-time {
    color: #fffdff;
}

.message.user .message-time {
    color: #728491;
}

.message-time-inline {
    font-size: 13px;
    opacity: 0.8;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: baseline;
    flex-shrink: 0;
    flex-grow: 0;
}

.message.me .message-time-inline {
    color: #fffdff;
}

.message.user .message-time-inline {
    color: #728491;
}

.message-content-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}

.message.me .message-content-wrapper {
    flex-direction: row;
}

.message.user .message-content-wrapper {
    flex-direction: row;
}

.read-icon {
    width: 16px;
    height: 10px;
    display: inline-block;
    vertical-align: baseline;
    flex-shrink: 0;
    flex-grow: 0;
    position: relative;
    top: 1px;
    margin-left: 5px;
    margin-right: 0;
    min-width: 16px;
    min-height: 10px;
}

.read-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    min-width: 16px;
    min-height: 10px;
}

.message-time-row .read-icon {
    margin-left: 5px;
}