.bubble{--sentColor:#1a84e5;--receiveColor:var(--color-background-tertiary);--bg:var(--color-background-default);position:relative;width:fit-content;max-width:255px;line-height:24px;word-wrap:break-word;border-radius:20px;padding:6px 12px}.bubble:before{width:20px}.bubble:after{width:26px;background-color:var(--bg)}.bubble:after,.bubble:before{position:absolute;bottom:0;height:20px;content:""}.bubble.sent{align-self:flex-end;background:var(--sentColor);transform:translateX(-15px);&:before{right:-7px;background-color:var(--sentColor);border-bottom-left-radius:16px 14px}&:after{right:-26px;border-bottom-left-radius:10px}}.bubble.received{background:var(--receiveColor);transform:translateX(15px);&:before{left:-7px;background-color:var(--receiveColor);border-bottom-right-radius:16px 14px}&:after{left:-26px;border-bottom-right-radius:10px}}.bubble.attachment{padding:0;overflow:hidden;height:120px;min-width:120px;background:none;&:after,&:before{display:none}}.bubble.no-tail:after,.bubble.no-tail:before{content:"";opacity:0}