.wp-block-sample_messages .sample {
  position: relative;
  background: #6C63FF; /* the main color */
  border-radius: var(--r) var(--r) min(var(--r), 100% - var(--p) - var(--b) / 4) min(var(--r), var(--p) - var(--b) / 4)/var(--r);
  color: #fff;
  margin-bottom: 50px;
  max-width: 85%;
  padding: 1em;
  text-align: left;
}

.wp-block-sample_messages .sample.left {
  --b: 1.5em;
  --p: 8%;
  --r: 10px;
}

.wp-block-sample_messages .sample.right {
  --b: 1.5em;
  --p: 92%;
  --r: 10px;
  margin-left: auto;
}

.wp-block-sample_messages .sample:before {
  --g:#000 calc(100% - 1px),#0000;
  position: absolute;
  top: 100%;
  left: clamp(var(--b) / -2, var(--p) - 3 * var(--b) / 4, 100% - var(--b));
  aspect-ratio: 1;
  background: inherit;
  content: "";
  -webkit-mask: radial-gradient(circle closest-side at 12% 88%, var(--g)), radial-gradient(20% 20% at 52% 55%, var(--g)), radial-gradient(25% 25% at 75% 0, var(--g));
          mask: radial-gradient(circle closest-side at 12% 88%, var(--g)), radial-gradient(20% 20% at 52% 55%, var(--g)), radial-gradient(25% 25% at 75% 0, var(--g));
  width: var(--b);
}

.wp-block-sample_messages .sample.right:before {
  -webkit-mask: radial-gradient(circle closest-side at 88% 88%, var(--g)), radial-gradient(20% 20% at 48% 55%, var(--g)), radial-gradient(25% 25% at 25% 0, var(--g));
          mask: radial-gradient(circle closest-side at 88% 88%, var(--g)), radial-gradient(20% 20% at 48% 55%, var(--g)), radial-gradient(25% 25% at 25% 0, var(--g));
}