.bubble {
  background: var(--white-gradient);
  padding: 6px;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  flex-grow: 1;
  filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.bubbleLeft {
  padding-right: 8px;
}

.bubbleRight {
  padding-left: 8px;
}

.bubbleLeft::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -10px;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 35%, #dfdfdf 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  z-index: -1;
}

.bubbleRight::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  position: absolute;
  top: 50%;
  transform: translateY(-30%);
  left: -10px;
  clip-path: polygon(100% 0, 0 100%, 100% 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #f0f0f0 35%, #dfdfdf 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}