.bubble {
  --bubble-color: var(--bs-white);
  --bubble-bottom-icon: url(../../assets/images/svg/bubble-bottom.svg);
  --bubble-bottom-icon-width: 55px;
  --bubble-bottom-icon-height: 25px;

  display: block;
  padding: var(--spacing-4);
  border-radius: var(--radius-medium);
  position: relative;
  font-size: var(--font-size-medium);
  margin-bottom: var(--bubble-bottom-icon-height);
  background-color: var(--bubble-color);
  max-width: fit-content;

  &::after {
    content: "";
    position: absolute;
    bottom: 3px;
    width: 56px;
    height: 0;
    border-style: solid;
    background-color: var(--bubble-color); /* Couleur dynamique */
    mask-image: var(--bubble-bottom-icon);
    mask-repeat: no-repeat;
    mask-size: var(--bubble-bottom-icon-width) var(--bubble-bottom-icon-height);
    mask-position: center;
    -webkit-mask-image: var(--bubble-bottom-icon);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--bubble-bottom-icon-width) var(--bubble-bottom-icon-height);
    -webkit-mask-position: center;
  }

  &.variant-question {
    --bubble-color: var(--bs-white);
    color: var(--bs-primary);
    margin-left: auto;
    font-weight: 700;
    line-height: 140%; /* 22.4px */

    &::after {
      right: 20px;
      border-width: 20px 0 0 20px;
      border-color: transparent transparent transparent var(--bs-white);
      transform: translateY(100%);
    }
  }

  &.variant-answer {
    --bubble-color: var(--secondary-500);
    color: var(--bs-white);

    &::after {
      left: 20px;
      border-width: 20px 20px 0 0;
      border-color: var(--bubble-color) transparent transparent transparent;
      transform: translateY(100%);
    }
  }

  > p:is(:last-child) {
    margin-bottom: 0;
  }
}