.wew-conversation-box {
width: 100%;
overflow: hidden;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.wew-conversation-participant-name {
padding-top: 5px;
text-align: center;
font-size: 12px;
}
.wew-conversation-box:nth-child(even) {
margin-bottom: 25px;
}
.left-bubble {
}
.right-bubble {
}
.wew-conversation-box.left-bubble {
flex-direction: row-reverse;
}
.wew-conversation-box.right-bubble {
}
.wew-conversation-box.left-bubble .wew-conversation-bubble:after,
.wew-conversation-box.left-bubble .wew-conversation-bubble:before {
left: 100%;
}
.wew-conversation-box.right-bubble .wew-conversation-bubble:after,
.wew-conversation-box.right-bubble .wew-conversation-bubble:before {
right: 100%;
}
.wew-conversation-box.left-bubble .wew-conversation-bubble:after {
border-left-color: #fff;
}
.wew-conversation-box.right-bubble .wew-conversation-bubble:after {
border-right-color: #fff;
}
.wew-conversation-box.left-bubble .wew-conversation-bubble:before {
border-left-color: #c8c8c8;
}
.wew-conversation-box.right-bubble .wew-conversation-bubble:before {
border-right-color: #c8c8c8;
}
.wew-conversation-avatar {
width: 120px;
}
.wew-conversation-avatar img {
border-radius: 50px;
display: block;
margin: 0 auto;
max-width: 60px;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}
.wew-conversation-bubble {
position: relative;
background: #fff;
border: 1px solid #c8c8c8;
border-radius: 10px;
flex: 1;
font-size: 14px;
padding:3%;
}
.wew-conversation-bubble:after,
.wew-conversation-bubble:before {
top: 1.28rem;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.wew-conversation-bubble:after {
border-color: rgba(255, 255, 255, 0);
border-width: 8px;
margin-top: -8px;
}
.wew-conversation-bubble:before {
border-color: rgba(200, 200, 200, 0);
border-width: 9px;
margin-top: -9px;
}