/* A Messages-style conversation, using the original sticker artwork. */
.afro-chat-hero{background:#e5e4d9;border-radius:3px;padding:clamp(20px,3vw,40px);overflow:hidden}
.afro-chat{max-width:760px;margin:auto;padding:clamp(24px,3vw,40px);background:#fff;border-radius:28px;display:flex;flex-direction:column;gap:12px;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}
.afro-chat-time{text-align:center;font-size:12px;line-height:1.5;color:#8e8e93;margin-bottom:4px;font-weight:600}.afro-chat-time span{font-weight:400}
.afro-message{position:relative;align-self:flex-start;max-width:80%;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.afro-message p{position:relative;isolation:isolate;border-radius:24px;background:#e9e9eb;padding:12px 20px;font-family:inherit;font-size:clamp(19px,2.2vw,28px);line-height:1.3;margin:0;color:#242426}
.afro-message p:before{content:"";position:absolute;z-index:-1;bottom:0;left:-7px;width:20px;height:20px;background:#e9e9eb;border-bottom-right-radius:15px}
.afro-message p:after{content:"";position:absolute;z-index:-1;bottom:0;left:-10px;width:10px;height:20px;background:#fff;border-bottom-right-radius:10px}
.afro-message--reply{align-self:flex-end;align-items:flex-end}
.afro-message--reply p{background:#007aff;color:white}
.afro-message--reply p:before{left:auto;right:-7px;background:#007aff;border-radius:0 0 0 15px}
.afro-message--reply p:after{left:auto;right:-10px;border-radius:0 0 0 10px}
.afro-message img{display:block;width:116px;height:116px;object-fit:contain;mix-blend-mode:multiply;margin:0 8px 0}
@media(max-width:560px){.afro-chat-hero{padding:16px}.afro-chat{padding:24px 18px;border-radius:20px;gap:14px}.afro-message{max-width:94%}.afro-message p{font-size:17px;padding:10px 14px}.afro-message img{width:92px;height:92px}}

/* Compact conversation with a surrounding sticker collage. */
.afro-chat-hero{position:relative;isolation:isolate;padding:36px 24px;background:#e5e4d9}
.afro-chat{position:relative;z-index:1;box-sizing:border-box;width:min(100%,380px);padding:24px 22px;border-radius:26px;gap:12px;box-shadow:0 16px 48px #00356840}
.afro-message{max-width:94%}
.afro-message p{font-size:17px;padding:10px 14px;border-radius:20px}
.afro-message img{width:86px;height:86px}
.afro-collage{position:absolute;z-index:0;inset:-42px -36px;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:12px;align-items:center;overflow:hidden;pointer-events:none}
.afro-collage-bubble{position:relative;background:#fff;border-radius:25px 25px 25px 5px;min-height:112px;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:8px;transform:rotate(var(--turn));box-shadow:0 3px 0 #005cc430}
.afro-collage-bubble:nth-child(3n){background:#c5f4d3;border-radius:25px 25px 5px 25px}
.afro-collage-bubble:nth-child(4n){background:#ddecff}
.afro-collage-bubble img{display:block;width:100%;height:100px;object-fit:contain;mix-blend-mode:multiply}
.afro-collage-bubble span{font:600 15px/1.2 -apple-system,BlinkMacSystemFont,sans-serif;color:#1e3346;white-space:nowrap}
@media(max-width:700px){.afro-collage{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.afro-chat-hero{padding:32px 40px}.afro-chat{padding:22px 18px}.afro-message p{font-size:16px}}
@media(max-width:420px){.afro-chat-hero{padding:28px}.afro-chat{padding:20px 16px}.afro-collage{grid-template-columns:repeat(4,minmax(0,1fr))}.afro-message p{font-size:15px}.afro-message img{width:76px;height:76px}}

/* Text messages weave between the sticker bubbles. */
.afro-text-collage{position:absolute;inset:0;pointer-events:none}
.afro-floating-message{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--tilt));padding:13px 19px;border-radius:24px 24px 24px 5px;background:#e9e9eb;color:#242426;font:500 clamp(15px,1.7vw,23px)/1.2 -apple-system,BlinkMacSystemFont,sans-serif;white-space:nowrap;box-shadow:0 4px 10px #002c6020}
.afro-floating-message:nth-child(even){background:#007aff;color:#fff;border-radius:24px 24px 5px 24px}
.afro-collage{overflow:visible;z-index:auto}
.afro-collage-bubble:nth-child(5n){z-index:1}
.afro-chat{z-index:2}
@media(max-width:700px){.afro-floating-message{padding:10px 14px;font-size:15px}.afro-floating-message:nth-child(3n){left:4%}}