.speech-bubble {
  margin-left: 1rem;
  position: relative;

  &:after {
    background-color: transparent;
    border: 0 solid;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    bottom: 0.75rem;
    box-shadow: 0.5rem 0.5rem 0 0.1rem white;
    content: '';
    display: block;
    height: 1rem;
    position: absolute;
    left: 0;
    right: unset;
    transform: translate(calc(-100% + .25rem), -50%);
    width: 1.25rem;
  }

  &.sent-by-current-user {
    margin-left: auto;
    margin-right: 1rem;

    &:after {
      box-shadow: -0.5rem 0.5rem 0 0.1rem var(--theme-color-darker);
      right: 0;
      left: unset;
      transform: translate(calc(100% - .25rem), -50%);
    }

    .speech-bubble-content {
      background: linear-gradient(120deg, var(--theme-color) 10%, var(--theme-color-darker) calc(100% - 1.5rem));
      color: var(--theme-complementary-color);

      time.message-timestamp {
        color: var(--theme-complementary-color);
      }

      .reply-content {
        background: linear-gradient(to right, var(--off-white) 10%, color-mix(in srgb, var(--theme-color), white 90%) 120%);

        & > * {
          color: var(--ink);
        }
      }
    }
  }

  .speech-bubble-content, .reply-content {
    background: linear-gradient(to right, var(--off-white) 10%, color-mix(in srgb, var(--theme-color), white 95%) 120%);
    border: 1px solid var(--light-gray);
    border-radius: var(--border-radius);
    box-shadow: 0.25rem 0.25rem 0.25rem rgba(226, 226, 226, 0.25);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: var(--container-xs);
    padding: 0.5rem 1rem;
    word-break: break-word;

    .message-attachments .message-attachment {
      &.video-attachment {
        max-height: 15rem;
      }
    }

    time.message-timestamp {
      text-align: right;
    }

    .message-information {
      align-items: flex-end;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 0.5rem;
      justify-content: flex-end;

      &:has(.reaction-modal-wrapper) {
        justify-content: space-between;

        .reactions-display {
          transform: translateY(50%);
        }
      }
    }
  }

  .reply-content {
    background: var(--transparent-gray-grad);
    border-left: 0.25rem solid var(--theme-color-darker);
  }
}

header .message-name {
  color: var(--theme-color-darker);
  font-weight: 600;
}

.announcement-speech-bubble-wrapper {
  .announcement-speech-bubble {
    background:  linear-gradient(120deg, var(--theme-color) 10%, var(--theme-color-darker) calc(100% - 1.5rem));
    border-radius: var(--border-radius);
    margin-left: 0;
    padding: 0.5rem;

    .speech-bubble-content {
      background: var(--off-white);
      position: relative;
      z-index: 2;
    }

    &:after {
      bottom: 0;
      box-shadow: 0.5rem 0.5rem 0 0.1rem var(--theme-color-darker);
      height: 1.5rem;
      left: unset;
      right: 1rem;
      transform: translate(-100%, 50%) rotate(-45deg);
      width: 2rem;
    }

    .announcement-schedule.badge-wrapper {
      margin-left: auto;
    }
  }

  .speech-bubble-header {
    padding: 0.5rem 4.5rem 0 0;
    text-align: right;
    width: 100%;
  }
}

/* Speech bubble skeleton (Do not change) */
.speech-bubble.speech-bubble-skeleton {
  .message-name.skeleton__text--h5 {
    width: 100px;
  }

  &.sent-by-current-user {
    .speech-bubble-content {
      background: var(--mid-gray);
    }

    &:after {
      box-shadow: -0.5rem 0.5rem 0 0.1rem var(--mid-gray);
    }
  }

  &:nth-child(1) {
    opacity: 0.4;
    width: 60%;
  }

  &:nth-child(2) {
    opacity: 0.5;
    width: 40%;
  }

  &:nth-child(3) {
    opacity: 0.6;
    width: 20%;
  }

  &:nth-child(4) {
    opacity: 0.7;
    width: 80%;
  }

  &:nth-child(5) {
    opacity: 0.8;
    width: 50%;
  }

  &:nth-child(6) {
    opacity: 0.9;
    width: 30%;
  }

  &:nth-child(7) {
    opacity: 1;
    width: 25%;
  }
}

.announcement-shared-survey {
  border: 1px solid var(--theme-color-lighter);
  border-radius: var(--border-radius);
  width: 100%;
  padding: 0.5rem;
  text-align: center;
}