.bk-balloon { display:flex; align-items:flex-start; gap:12px; margin:18px 0; }
.bk-balloon-right { flex-direction:row-reverse; }
.bk-balloon-avatar { flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:20px; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.bk-balloon-body { max-width:78%; }
.bk-balloon-name { font-size:12px; color:#888; margin:0 4px 4px; }
.bk-balloon-right .bk-balloon-name { text-align:right; }
.bk-balloon-bubble { position:relative; padding:13px 16px; border-radius:14px; line-height:1.7; color:#333; }
.bk-balloon-bubble::before { content:""; position:absolute; top:16px; width:0; height:0; border:8px solid transparent; }
.bk-balloon-left .bk-balloon-bubble::before { left:-15px; border-right-color:currentColor; }
.bk-balloon-right .bk-balloon-bubble::before { right:-15px; border-left-color:currentColor; }
.bk-balloon-pink .bk-balloon-avatar { background:#e8568f; }
.bk-balloon-pink .bk-balloon-bubble { background:#fdeaf2; color:#3a2730; }
.bk-balloon-pink .bk-balloon-bubble::before { color:#fdeaf2; }
.bk-balloon-blue .bk-balloon-avatar { background:#3a86c8; }
.bk-balloon-blue .bk-balloon-bubble { background:#e9f3fb; color:#26323a; }
.bk-balloon-blue .bk-balloon-bubble::before { color:#e9f3fb; }
.bk-balloon-gray .bk-balloon-avatar { background:#8a9099; }
.bk-balloon-gray .bk-balloon-bubble { background:#f1f2f4; color:#33363a; }
.bk-balloon-gray .bk-balloon-bubble::before { color:#f1f2f4; }
@media (max-width:600px){ .bk-balloon-body{ max-width:72%; } .bk-balloon-avatar{ width:46px; height:46px; font-size:17px; } }