:host {
  --bubble-bg: rgba(0, 0, 0, 0.6);
  --bubble-width: 300rpx;
  --bubble-text-color: #fff;
  --bubble-text-size: 24rpx;
  --bubble-zindex: 2000;
  --bubble-border-radius: 16rpx;
  --bubble-right: 16rpx;
  --bubble-top: 80px;
  --bubble-arrow-right: 50px;
}

.bubble {
  position: fixed;
  top: var(--bubble-top);
  right: var(--bubble-right);
  z-index: var(--bubble-zindex);
  display: flex;
  align-items: stretch;
  width: var(--bubble-width);
  padding: 16rpx 20rpx;
  background: var(--bubble-bg);
  border-radius: var(--bubble-border-radius);

  &::before {
    position: absolute;
    right: var(--bubble-arrow-right);
    bottom: 100%;
    width: 0;
    height: 0;
    content: '';
    border: 16rpx solid transparent;
    border-top: none;
    border-bottom-color: var(--bubble-bg);
    border-bottom-left-radius: 2rpx;
  }
}

.bubble-text {
  font-size: var(--bubble-text-size);
  line-height: 32rpx;
  color: var(--bubble-text-color);
}

.bubble-icon {
  display: flex;
  align-items: center;
  margin-left: 10rpx;
}