.speech-bubble {
    display: inline-block;
    padding: 10px 14px;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    max-width: 36rem;
    white-space: normal;
    word-break: break-word;
    position: relative;
}

    .speech-bubble::after {
        content: "";
        position: absolute;
        left: -8px;
        top: 18px; 
        width: 16px;
        height: 16px;
        background: var(--mud-palette-surface);
        border-left: 2px solid var(--mud-palette-primary);
        border-top: 2px solid var(--mud-palette-primary);
        transform: rotate(-45deg);
    }

.speech-bubble-right {
    display: inline-block;
    padding: 10px 14px;
    border: 2px solid var(--mud-palette-tertiary);
    border-radius: 8px;
    background: var(--mud-palette-surface);
    max-width: 36rem;
    white-space: normal;
    word-break: break-word;
    position: relative;
}

    .speech-bubble-right::after {
        content: "";
        position: absolute;
        right: -8px;
        top: 18px;
        width: 16px;
        height: 16px;
        background: var(--mud-palette-surface);
        border-right: 2px solid var(--mud-palette-tertiary);
        border-bottom: 2px solid var(--mud-palette-tertiary); 
        transform: rotate(-45deg);
    }