:root { --brand-1: #ff2f92; --brand-2: #ff2f92; --brand-3: #ec4e99; --gray-1: #4a4a4a; --gray-2: #4a4a4a; --gray-3: #9b9b9b; --gray-4: #9b9b9b; --gray-5: rgba(0, 0, 0, 0.2); --gray-6: rgba(0, 0, 0, 0.1); --gray-7: rgba(0, 0, 0, 0.05); --gray-8: rgba(0, 0, 0, 0.03); --gray-dark: #4a4a4a; --red: #ff2f92; --btn-primary-color: #ffffff; } .ChatApp, .MessageContainer, .Navbar, .Message .Bubble, .QuickReplies, .ChatFooter { background-repeat: no-repeat; background-size: cover; } .ChatApp { background-color: #ffffff; } .MessageContainer { background-image: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%); } .Navbar { background-color: #ffffff; } .Message.left .Bubble { background-color: #fff; } .Message.right .Bubble { background-image: linear-gradient(180deg, #fc636b 0%, #fc636b 100%); color: #ffffff; } .QuickReply.highlight { height: 32px; } .QuickReplies, .ChatFooter { background-color: rgba(242, 244, 245, 0.95); } .Message.left .Bubble { border-radius: 4px 20px 20px 20px; } .Message.right .Bubble { border-radius: 20px 4px 20px 20px; } .Btn { border-radius: 16px; } .QuickReply { border-radius: 20px; } .Message.right[data-type="text"] a { pointer-events: none; cursor: default; } .Message.right .Message-main > .Avatar { display: none; }