.message-item {
  display: flex;
  flex-direction: row;
  gap: 0px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  flex-shrink: 0;
  position: relative;

  &__right {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    width: 100%;
  }

  &__more {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;

    &__icon {
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      gap: 0px;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      position: relative;
      //padding-bottom: 10px;

      &__actions {
        fill: var(--tertiary-elements, #636D78);
        path: var(--tertiary-elements, #636D78);
      }
    }
  }

  &__outgoing {
    padding: 0px 8px 8px 16px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    width: 320px;
    position: relative;

    &__chat {
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: flex-start;
      justify-content: flex-start;
      flex-shrink: 0;
      position: relative;

      &__bubble-background {
        background: var(--outgoing-background, #E7EFFF);
        border-radius: 22px 22px 0px 22px;
        padding: 8px 12px 8px 12px;
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: flex-start;
        justify-content: flex-start;
        flex-shrink: 0;
        position: relative;
        width: 100%;
      }
      .reply-forward-message {
        color: var(--secondary-text);
        width: 100%;
      }
    }
  }

  &__incoming-mes {
    background: var(--secondary-background, #ffffff);
    padding: 0px 16px 8px 8px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: flex-end;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    width: 320px;
    position: relative;
  }

  &__incoming {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    justify-content: flex-end;

    &__chat {
      display: flex;
      flex-direction: row;
      gap: 8px;

      &__bubble {
        display: flex;
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
        justify-content: flex-end;
        flex-shrink: 0;
        position: relative;

        &__background {
          background: var(--incoming-background, #e4e6e8);
          border-radius: 22px 22px 22px 0px;
          padding: 8px 12px 8px 12px;
          display: flex;
          flex-direction: row;
          gap: 10px;
          align-items: flex-start;
          justify-content: flex-start;
          flex-shrink: 0;
          position: relative;
        }
      }
    }
  }
}